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

feat: tab navigation in modal (Index/Transkript/Zusammenfassung)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Thomas Kopp
2026-04-02 12:10:50 +02:00
parent 336628341b
commit d3582eaeb7
4 changed files with 68 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api/router.py
+5 -4
View File
@@ -136,7 +136,7 @@ async def get_transcripts(user: dict = Depends(current_user)):
return list_transcripts(user_dir)
@router.get("/transcripts/{filename}")
@router.get("/transcripts/{filename:path}")
async def get_transcript(filename: str, user: dict = Depends(current_user)):
from fastapi.responses import PlainTextResponse
user_dir = os.path.join(user["output_dir"], user["username"])
@@ -146,7 +146,7 @@ async def get_transcript(filename: str, user: dict = Depends(current_user)):
return PlainTextResponse(content)
@router.post("/transcripts/{filename}/reprocess")
@router.post("/transcripts/{filename:path}/reprocess")
async def reprocess_transcript(filename: str, body: dict, user: dict = Depends(current_user)):
from output import read_transcript
from fastapi.responses import PlainTextResponse
@@ -175,10 +175,11 @@ async def reprocess_transcript(filename: str, body: dict, user: dict = Depends(c
return PlainTextResponse(refined)
@router.delete("/transcripts/{filename}")
@router.delete("/transcripts/{filename:path}")
async def delete_transcript(filename: str, user: dict = Depends(current_user)):
user_dir = os.path.join(user["output_dir"], user["username"])
if os.path.basename(filename) != filename or not filename.endswith(".md"):
parts = filename.split("/")
if len(parts) > 2 or any(p in (".", "..") or not p for p in parts) or not filename.endswith(".md"):
raise HTTPException(status_code=404, detail="Nicht gefunden")
path = os.path.join(user_dir, filename)
if not os.path.exists(path):
frontend/app.js
+40 -8
View File
@@ -12,9 +12,11 @@ const modalObsidianBtn = document.getElementById('modal-obsidian-btn');
const modalFolderBtn = document.getElementById('modal-folder-btn');
const modalOpenBtn = document.getElementById('modal-open-btn');
const modalCloseBtn = document.getElementById('modal-close-btn');
const modalTabs = document.getElementById('modal-tabs');
let _modalPath = null;
let _modalPaths = null;
let _modalFilename = null;
let _modalRelated = null;
const speakerCard = document.getElementById('speaker-card');
const speakerRows = document.getElementById('speaker-rows');
@@ -54,18 +56,47 @@ logoutBtn.addEventListener('click', () => {
});
});
function openModal(filename, path, paths) {
function _loadModalContent(filename, activeTab) {
modalBody.innerHTML = '';
apiFetch(`/transcripts/${filename.split('/').map(encodeURIComponent).join('/')}`)
.then(r => r.text())
.then(md => { modalBody.innerHTML = DOMPurify.sanitize(marked.parse(md)); });
// update active tab
modalTabs.querySelectorAll('.modal-tab').forEach(t => {
t.classList.toggle('active', t.dataset.file === filename);
});
}
function openModal(filename, path, paths, related) {
_modalPath = path;
_modalPaths = paths || null;
_modalFilename = filename;
modalTitle.textContent = filename.replace(/\.md$/, '').replace(/^\d{4}-\d{2}-\d{2}-\d{4}-/, '');
modalBody.innerHTML = '';
_modalRelated = related || null;
modalTitle.textContent = filename.replace(/\.md$/, '').replace(/^\d{4}-\d{2}-\d{2}-\d{4}-/, '').replace(/-index$/, '');
modal.classList.remove('hidden');
apiFetch(`/transcripts/${encodeURIComponent(filename)}`)
.then(r => r.text())
.then(md => {
modalBody.innerHTML = DOMPurify.sanitize(marked.parse(md));
// Build tabs if there are related files
modalTabs.innerHTML = '';
if (related && (related.transkript || related.zusammenfassung)) {
modalTabs.style.display = 'flex';
const tabDefs = [
{ label: 'Index', file: filename },
{ label: 'Transkript', file: related.transkript },
{ label: 'Zusammenfassung', file: related.zusammenfassung },
].filter(t => t.file);
tabDefs.forEach(({ label, file }) => {
const btn = document.createElement('button');
btn.className = 'modal-tab';
btn.textContent = label;
btn.dataset.file = file;
btn.addEventListener('click', () => _loadModalContent(file, file));
modalTabs.appendChild(btn);
});
} else {
modalTabs.style.display = 'none';
}
_loadModalContent(filename, filename);
}
function closeModal() {
@@ -73,6 +104,7 @@ function closeModal() {
_modalPath = null;
_modalPaths = null;
_modalFilename = null;
_modalRelated = null;
}
modalCloseBtn.addEventListener('click', closeModal);
@@ -239,7 +271,7 @@ async function loadTranscripts() {
meta.className = 'meta';
meta.textContent = `${Math.round(t.size / 1024 * 10) / 10} KB`;
div.addEventListener('click', () => openModal(t.filename, t.path));
div.addEventListener('click', () => openModal(t.filename, t.path, null, t.related || null));
const reprocessBtn = document.createElement('button');
reprocessBtn.className = 'del-btn';
frontend/index.html
+5
View File
@@ -163,6 +163,10 @@
.modal-body pre { background: var(--surface2); padding: 12px; border-radius: 6px; overflow-x: auto; margin: 0 0 0.8em; }
.modal-body pre code { background: none; padding: 0; }
.modal-body hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }
.modal-tabs { display: flex; gap: 4px; padding: 10px 18px 0; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.modal-tab { background: none; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; padding: 5px 12px; font-size: 0.78rem; font-family: inherit; color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s; margin-bottom: -1px; }
.modal-tab:hover { color: var(--text); }
.modal-tab.active { color: var(--text); border-color: var(--border); background: var(--surface); }
.del-btn {
background: none; border: none; color: var(--muted); cursor: pointer;
padding: 4px; border-radius: 4px; display: flex; align-items: center;
@@ -274,6 +278,7 @@
<button id="modal-close-btn" class="modal-btn" title="Schließen">✕</button>
</div>
</div>
<div id="modal-tabs" class="modal-tabs" style="display:none"></div>
<div id="modal-body" class="modal-body"></div>
</div>
</div>
output.py
+18 -3
View File
@@ -36,10 +36,15 @@ def save_transcript(
def read_transcript(output_dir: str, filename: str) -> str | None:
"""Return file content if filename is a plain .md file inside output_dir."""
if os.path.basename(filename) != filename or not filename.endswith(".md"):
"""Return file content for a .md file inside output_dir (flat or one level deep)."""
if not filename.endswith(".md"):
return None
parts = filename.split("/")
if len(parts) > 2 or any(p in (".", "..") or not p for p in parts):
return None
path = os.path.join(output_dir, filename)
if not os.path.abspath(path).startswith(os.path.abspath(output_dir) + os.sep):
return None
if not os.path.exists(path):
return None
with open(path, encoding="utf-8") as f:
@@ -57,7 +62,17 @@ def list_transcripts(output_dir: str, limit: int = 20) -> list[dict]:
for f in files:
full = os.path.join(output_dir, f)
stat = os.stat(full)
result.append({"filename": f, "path": full, "size": stat.st_size, "mtime": stat.st_mtime})
item: dict = {"filename": f, "path": full, "size": stat.st_size, "mtime": stat.st_mtime}
if f.endswith("-index.md"):
base = f[: -len("-index.md")]
related: dict[str, str] = {}
for suffix, key in [("-transkript.md", "transkript"), ("-zusammenfassung.md", "zusammenfassung")]:
rel_filename = f"{base}/{base}{suffix}"
if os.path.exists(os.path.join(output_dir, rel_filename)):
related[key] = rel_filename
if related:
item["related"] = related
result.append(item)
return result