decent-webui/cmd/filesvc/ui/app.js

(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();
})();