This commit is contained in:
132
cmd/filesvc/ui/app.js
Normal file
132
cmd/filesvc/ui/app.js
Normal file
@@ -0,0 +1,132 @@
|
||||
(function() {
|
||||
const $ = sel => document.querySelector(sel);
|
||||
const $$ = sel => Array.from(document.querySelectorAll(sel));
|
||||
const state = { offset: 0, limit: 20, total: null };
|
||||
|
||||
function loadCfg() {
|
||||
try { return JSON.parse(localStorage.getItem('cfg')) || {}; } catch { return {}; }
|
||||
}
|
||||
function saveCfg(cfg) { localStorage.setItem('cfg', JSON.stringify(cfg)); }
|
||||
const cfg = loadCfg();
|
||||
$('#apiKey').value = cfg.apiKey || '';
|
||||
$('#baseUrl').value = cfg.baseUrl || '';
|
||||
$('#saveCfg').onclick = () => {
|
||||
cfg.apiKey = $('#apiKey').value.trim();
|
||||
cfg.baseUrl = $('#baseUrl').value.trim();
|
||||
saveCfg(cfg);
|
||||
refresh();
|
||||
};
|
||||
|
||||
function api(path, opts = {}) {
|
||||
const base = cfg.baseUrl || '';
|
||||
opts.headers = Object.assign({ 'X-API-Key': cfg.apiKey || '' }, opts.headers || {});
|
||||
return fetch(base + path, opts).then(r => {
|
||||
if (!r.ok) throw new Error(`${r.status} ${r.statusText}`);
|
||||
const ct = r.headers.get('content-type') || '';
|
||||
if (ct.includes('application/json')) return r.json();
|
||||
return r.text();
|
||||
});
|
||||
}
|
||||
|
||||
async function refresh() {
|
||||
const q = encodeURIComponent($('#q').value || '');
|
||||
try {
|
||||
const data = await api(`/v1/files?limit=${state.limit}&offset=${state.offset}&q=${q}`);
|
||||
renderTable(data.items || []);
|
||||
const next = data.next || 0;
|
||||
state.hasNext = next > 0;
|
||||
state.nextOffset = next;
|
||||
$('#pageInfo').textContent = `offset ${state.offset}`;
|
||||
} catch (e) {
|
||||
alert('List failed: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
function renderTable(items) {
|
||||
const tbody = $('#files tbody');
|
||||
tbody.innerHTML = '';
|
||||
const tpl = $('#rowTpl').content;
|
||||
for (const it of items) {
|
||||
const tr = tpl.cloneNode(true);
|
||||
tr.querySelector('.id').textContent = it.id;
|
||||
tr.querySelector('.name').textContent = it.name;
|
||||
tr.querySelector('.size').textContent = human(it.size);
|
||||
tr.querySelector('.created').textContent = new Date(it.createdAt).toLocaleString();
|
||||
const act = tr.querySelector('.actions');
|
||||
|
||||
const dl = btn('Download', async () => {
|
||||
const base = cfg.baseUrl || '';
|
||||
const url = `${base}/v1/files/${it.id}?download=1`;
|
||||
const a = document.createElement('a');
|
||||
a.href = url; a.download = '';
|
||||
a.click();
|
||||
});
|
||||
const meta = btn('Meta', async () => showMeta(it.id));
|
||||
const del = btn('Delete', async () => {
|
||||
if (!confirm('Delete file?')) return;
|
||||
try { await api(`/v1/files/${it.id}`, { method:'DELETE' }); refresh(); } catch(e){ alert('Delete failed: '+e.message); }
|
||||
});
|
||||
act.append(dl, meta, del);
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
}
|
||||
|
||||
function btn(text, on) { const b = document.createElement('button'); b.textContent = text; b.onclick = on; return b; }
|
||||
function human(n) { if (n < 1024) return n + ' B'; const u=['KB','MB','GB','TB']; let i=-1; do { n/=1024; i++; } while(n>=1024 && i<u.length-1); return n.toFixed(1)+' '+u[i]; }
|
||||
|
||||
$('#refresh').onclick = () => { state.offset = 0; refresh(); };
|
||||
$('#q').addEventListener('keydown', e => { if (e.key==='Enter') { state.offset=0; refresh(); } });
|
||||
$('#prev').onclick = () => { state.offset = Math.max(0, state.offset - state.limit); refresh(); };
|
||||
$('#next').onclick = () => { if (state.hasNext) { state.offset = state.nextOffset; refresh(); } };
|
||||
|
||||
// Upload form
|
||||
$('#uploadForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const f = $('#fileInput').files[0];
|
||||
if (!f) return alert('Pick a file');
|
||||
const meta = $('#metaInput').value.trim();
|
||||
const fd = new FormData();
|
||||
fd.append('file', f);
|
||||
fd.append('meta', meta);
|
||||
try { await api('/v1/files?meta='+encodeURIComponent(meta), { method: 'POST', body: fd }); refresh(); } catch(e){ alert('Upload failed: '+e.message); }
|
||||
});
|
||||
|
||||
// Chunked upload
|
||||
$('#chunkInit').onclick = async () => {
|
||||
try {
|
||||
const name = $('#chunkName').value.trim() || 'file';
|
||||
const meta = $('#chunkMeta').value.trim();
|
||||
const r = await api(`/v1/uploads?name=${encodeURIComponent(name)}&meta=${encodeURIComponent(meta)}`, { method:'POST' });
|
||||
$('#chunkId').textContent = r.id;
|
||||
} catch(e){ alert('Init failed: '+e.message); }
|
||||
};
|
||||
$('#chunkPut').onclick = async () => {
|
||||
const uid = $('#chunkId').textContent.trim();
|
||||
const part = parseInt($('#chunkPart').value,10) || 1;
|
||||
const file = $('#chunkFile').files[0];
|
||||
if (!uid) return alert('Init first');
|
||||
if (!file) return alert('Choose a file (this will send the whole file as one part).');
|
||||
try { await api(`/v1/uploads/${uid}/parts/${part}`, { method:'PUT', body: file }); alert('Part uploaded'); } catch(e){ alert('PUT failed: '+e.message); }
|
||||
};
|
||||
$('#chunkComplete').onclick = async () => {
|
||||
const uid = $('#chunkId').textContent.trim(); if (!uid) return;
|
||||
try { await api(`/v1/uploads/${uid}/complete`, { method:'POST' }); refresh(); } catch(e){ alert('Complete failed: '+e.message); }
|
||||
};
|
||||
$('#chunkAbort').onclick = async () => {
|
||||
const uid = $('#chunkId').textContent.trim(); if (!uid) return;
|
||||
try { await api(`/v1/uploads/${uid}`, { method:'DELETE' }); $('#chunkId').textContent=''; alert('Aborted'); } catch(e){ alert('Abort failed: '+e.message); }
|
||||
};
|
||||
|
||||
async function showMeta(id) {
|
||||
try {
|
||||
const rec = await api(`/v1/files/${id}/meta`);
|
||||
const json = prompt('Edit meta as JSON (object of string:string)', JSON.stringify(rec.meta||{}));
|
||||
if (json == null) return;
|
||||
const obj = JSON.parse(json);
|
||||
await api(`/v1/files/${id}/meta`, { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(obj) });
|
||||
refresh();
|
||||
} catch(e){ alert('Meta failed: '+e.message); }
|
||||
}
|
||||
|
||||
refresh();
|
||||
})();
|
||||
77
cmd/filesvc/ui/index.html
Normal file
77
cmd/filesvc/ui/index.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>File Service UI</title>
|
||||
<link rel="stylesheet" href="/static/ui/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>File Service</h1>
|
||||
<div class="cfg">
|
||||
<label>API Base <input id="baseUrl" value="" placeholder="(same origin)"/></label>
|
||||
<label>API Key <input id="apiKey" placeholder="X-API-Key"/></label>
|
||||
<button id="saveCfg">Save</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="card">
|
||||
<h2>Upload</h2>
|
||||
<form id="uploadForm">
|
||||
<input type="file" id="fileInput" name="file" required />
|
||||
<input type="text" id="metaInput" placeholder="meta e.g. project=alpha,owner=alice" />
|
||||
<button type="submit">Upload</button>
|
||||
</form>
|
||||
<details>
|
||||
<summary>Chunked upload</summary>
|
||||
<div class="chunk">
|
||||
<input type="text" id="chunkName" placeholder="filename"/>
|
||||
<input type="text" id="chunkMeta" placeholder="meta key=val,..."/>
|
||||
<button id="chunkInit">Init</button>
|
||||
<span id="chunkId"></span>
|
||||
<div>
|
||||
<input type="file" id="chunkFile"/>
|
||||
<input type="number" id="chunkPart" min="1" value="1"/>
|
||||
<button id="chunkPut">PUT Part</button>
|
||||
<button id="chunkComplete">Complete</button>
|
||||
<button id="chunkAbort">Abort</button>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h2>Files</h2>
|
||||
<div class="toolbar">
|
||||
<input type="search" id="q" placeholder="search by name"/>
|
||||
<button id="refresh">Refresh</button>
|
||||
</div>
|
||||
<table id="files">
|
||||
<thead>
|
||||
<tr><th>ID</th><th>Name</th><th>Size</th><th>Created</th><th>Actions</th></tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<div class="pager">
|
||||
<button id="prev">Prev</button>
|
||||
<span id="pageInfo"></span>
|
||||
<button id="next">Next</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<template id="rowTpl">
|
||||
<tr>
|
||||
<td class="mono id"></td>
|
||||
<td class="name"></td>
|
||||
<td class="size"></td>
|
||||
<td class="created"></td>
|
||||
<td class="actions"></td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script src="/static/ui/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
19
cmd/filesvc/ui/style.css
Normal file
19
cmd/filesvc/ui/style.css
Normal file
@@ -0,0 +1,19 @@
|
||||
:root { --bg: #0b0f14; --fg: #e6eef8; --muted: #9bb0c8; --card: #121923; --accent: #5aa9ff; }
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--bg); color: var(--fg); }
|
||||
header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #0e141b; border-bottom: 1px solid #2a3543; }
|
||||
h1 { margin: 0; font-size: 20px; }
|
||||
.cfg label { margin-right: 8px; font-size: 12px; color: var(--muted); }
|
||||
.cfg input { margin-left: 6px; padding: 6px 8px; background: #0c1219; border: 1px solid #2a3543; color: var(--fg); border-radius: 6px; }
|
||||
button { padding: 8px 12px; border: 1px solid #2a3543; background: #111a24; color: var(--fg); border-radius: 8px; cursor: pointer; }
|
||||
button:hover { border-color: var(--accent); }
|
||||
main { padding: 20px; max-width: 1100px; margin: 0 auto; }
|
||||
.card { background: var(--card); border: 1px solid #1f2a38; border-radius: 14px; padding: 16px; margin-bottom: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
|
||||
.toolbar { display:flex; gap: 8px; align-items: center; margin-bottom: 10px; }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #213043; }
|
||||
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
|
||||
.name { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.pager { display:flex; gap: 8px; align-items:center; justify-content:flex-end; padding-top: 8px; }
|
||||
.actions button { margin-right: 6px; }
|
||||
summary { cursor: pointer; }
|
||||
Reference in New Issue
Block a user