Versie 0.2.0

client/ui/notes.js

@@ -0,0 +1,68 @@
+// Generated, do not edit. sha256:dd3cdccc38ee940cd5da182fe49a2feb4a0d00eb7f08ee8c95f1fe0e712cbd46
+import { getAssetNote, setAssetNote } from '../data/asset-notes.js';
+import { t } from '../i18n/index.js';
+import { esc } from './escape.js';
+
+const SAVE_DELAY_MS = 700;
+
+function nuLokaal() {
+  const d = new Date();
+  const p = n => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}T${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+
+export function notesHtml() {
+  return `<div class="notes">
+      <div class="notes-add">
+        <input type="datetime-local" class="input notes-when" data-notes-when aria-label="${esc(t('notes.when'))}" title="${esc(t('notes.when'))}">
+        <input type="text" class="input notes-line" data-notes-line placeholder="${esc(t('notes.line'))}" aria-label="${esc(t('notes.line'))}" autocomplete="off">
+      </div>
+      <textarea class="input notes-body" data-notes-body placeholder="${esc(t('notes.body'))}" aria-label="${esc(t('notes.tab'))}"></textarea>
+      <div class="notes-status t-caption t-muted" data-notes-status aria-live="polite"></div>
+    </div>`;
+}
+
+export async function mountNotes(host, assetId) {
+  const when = host.querySelector('[data-notes-when]');
+  const line = host.querySelector('[data-notes-line]');
+  const body = host.querySelector('[data-notes-body]');
+  const status = host.querySelector('[data-notes-status]');
+  if (!when || !line || !body) return;
+  when.value = nuLokaal();
+  let whenTouched = false;
+  when.addEventListener('input', () => { whenTouched = true; });
+  line.addEventListener('focus', () => { if (!whenTouched) when.value = nuLokaal(); });
+
+  let opgeslagen = '';
+  try { opgeslagen = (await getAssetNote(assetId))?.body || ''; } catch (e) { status.textContent = e.message; }
+  body.value = opgeslagen;
+
+  let timer = null;
+  async function bewaar() {
+    clearTimeout(timer); timer = null;
+    const tekst = body.value;
+    if (tekst === opgeslagen) return;
+    status.textContent = t('notes.saving');
+    try {
+      await setAssetNote(assetId, tekst);
+      opgeslagen = tekst;
+      status.textContent = t('notes.saved');
+    } catch (e) { status.textContent = e.message; }
+  }
+  body.addEventListener('input', () => { clearTimeout(timer); timer = setTimeout(bewaar, SAVE_DELAY_MS); });
+  body.addEventListener('blur', bewaar);
+
+  line.addEventListener('keydown', e => {
+    if (e.key !== 'Enter') return;
+    e.preventDefault();
+    const tekst = line.value.trim();
+    if (!tekst) return;
+    const stempel = (when.value || nuLokaal()).replace('T', ' ');
+    const rest = body.value.replace(/^\s+/, '');
+    body.value = `${stempel}  ${tekst}${rest ? `\n${rest}` : ''}`;
+    line.value = '';
+    whenTouched = false;
+    when.value = nuLokaal();
+    bewaar();
+  });
+}