tueit_GmbH/tueit_Transkriptor
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: transcript modal with markdown rendering, delete button, remove preview section

Browse Source
This commit is contained in:
Thomas Kopp
2026-04-01 14:18:04 +02:00
parent ae3ae61593
commit 1ab023c2ac
2 changed files with 104 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app.js
+42 -15
View File
@@ -1,11 +1,16 @@
const btn = document.getElementById('record-btn');
const statusText = document.getElementById('status-text');
const headerStatus = document.getElementById('header-status');
const preview = document.getElementById('preview');
const instructionsEl = document.getElementById('instructions');
const transcriptList = document.getElementById('transcript-list');
const userChip = document.getElementById('user-chip');
const logoutBtn = document.getElementById('logout-btn');
const modal = document.getElementById('modal');
const modalTitle = document.getElementById('modal-title');
const modalBody = document.getElementById('modal-body');
const modalOpenBtn = document.getElementById('modal-open-btn');
const modalCloseBtn = document.getElementById('modal-close-btn');
let _modalPath = null;
const STATUS_LABELS = {
idle: 'Bereit',
@@ -36,6 +41,30 @@ logoutBtn.addEventListener('click', () => {
});
});
function openModal(filename, path) {
_modalPath = path;
modalTitle.textContent = filename.replace(/\.md$/, '').replace(/^\d{4}-\d{2}-\d{2}-\d{4}-/, '');
modalBody.innerHTML = '';
modal.classList.remove('hidden');
apiFetch(`/transcripts/${encodeURIComponent(filename)}`)
.then(r => r.text())
.then(md => {
modalBody.innerHTML = DOMPurify.sanitize(marked.parse(md));
});
}
function closeModal() {
modal.classList.add('hidden');
_modalPath = null;
}
modalCloseBtn.addEventListener('click', closeModal);
modal.querySelector('.modal-backdrop').addEventListener('click', closeModal);
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });
modalOpenBtn.addEventListener('click', () => {
if (_modalPath) apiFetch('/open', { method: 'POST', body: JSON.stringify({ path: _modalPath }) });
});
instructionsEl.addEventListener('input', async () => {
await apiFetch('/instructions', {
method: 'POST',
@@ -58,8 +87,6 @@ btn.addEventListener('click', async () => {
if (data.action === 'started') {
setStatus('recording');
} else if (data.action === 'reset') {
preview.textContent = 'Noch keine Aufnahme verarbeitet.';
preview.classList.remove('has-content');
setStatus('idle');
}
});
@@ -70,18 +97,12 @@ function connectWs() {
ws.onmessage = (e) => {
const msg = JSON.parse(e.data);
if (msg.event === 'processing') setStatus('processing');
if (msg.event === 'transcribed' || msg.event === 'refined') {
const text = msg.raw || msg.markdown || '';
preview.textContent = text;
preview.classList.add('has-content');
}
if (msg.event === 'saved') {
setStatus('idle');
loadTranscripts();
}
if (msg.event === 'error') {
setStatus('error');
preview.textContent = `Fehler: ${msg.message}`;
}
};
ws.onclose = () => setTimeout(connectWs, 2000);
@@ -104,13 +125,19 @@ async function loadTranscripts() {
meta.className = 'meta';
meta.textContent = `${Math.round(t.size / 1024 * 10) / 10} KB`;
div.append(name, meta);
div.addEventListener('click', () => {
apiFetch('/open', {
method: 'POST',
body: JSON.stringify({ path: t.path }),
});
div.addEventListener('click', () => openModal(t.filename, t.path));
const delBtn = document.createElement('button');
delBtn.className = 'del-btn';
delBtn.title = 'Löschen';
delBtn.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M9 3h6l1 1h4v2H4V4h4l1-1zm-3 5h12l-1 13H7L6 8zm5 2v9h2v-9h-2zm-3 0v9h2v-9H8zm8 0v9h2v-9h-2z"/></svg>';
delBtn.addEventListener('click', async (e) => {
e.stopPropagation();
await apiFetch(`/transcripts/${encodeURIComponent(t.filename)}`, { method: 'DELETE' });
loadTranscripts();
});
div.append(name, meta, delBtn);
return div;
})
);