68 lines
2.7 KiB
JavaScript
68 lines
2.7 KiB
JavaScript
|
// 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();
|
||
|
|
});
|
||
|
|
}
|