Refactor case detail into a dedicated page
This commit restructures the web interface for case details. The
previous `/web/cases/{case_id}` route, which previously showed both the
case summary and its recordings, has been split into two distinct pages:
- `/web/cases/{case_id}`: This page now displays the overall case
information, including the document if available.
- `/web/cases/{case_id}/recordings`: This new page is dedicated to
listing and displaying individual recordings within a case.
This change improves the organization and clarity of the web UI,
allowing for more focused views of case data. Additionally, the
`case_detail.html` and `document.html` templates have been removed as
their functionality is now handled by the new `case_page.html` and the
upcoming document rendering logic. The `cases.html` template has also
been removed, indicating a shift towards more granular page views.
This commit is contained in:
@@ -1,89 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Doctate — Fall {{ case_id_short }}</title>
|
||||
<style>
|
||||
body { font-family: sans-serif; max-width: 900px; margin: 2em auto; padding: 0 1em; }
|
||||
header { display: flex; justify-content: space-between; align-items: center; }
|
||||
header form { margin: 0; }
|
||||
.back { color: #4a90e2; text-decoration: none; }
|
||||
.oneliner { font-size: 1.1em; color: #222; margin: 0.6em 0 1em; }
|
||||
.meta { color: #666; font-family: monospace; font-size: 0.9em; }
|
||||
.recording { margin: 1em 0; padding: 0.7em; border: 1px solid #ddd; border-radius: 4px; }
|
||||
.recording.failed-row { background: #fff7f7; border-left: 3px solid #e24a4a; }
|
||||
.recording-head { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; }
|
||||
.recording-head span { font-family: monospace; font-size: 0.9em; min-width: 20em; }
|
||||
.transcript { margin: 0.6em 0 0; padding: 0.6em; background: #f6f6f6; border-radius: 4px; white-space: pre-wrap; font-family: serif; }
|
||||
.pending { color: #888; font-style: italic; margin-top: 0.5em; }
|
||||
.failed { color: #b00; font-weight: bold; margin-top: 0.5em; }
|
||||
.status-badge { display: inline-block; padding: 0.1em 0.6em; border-radius: 999px; font-size: 0.8em; font-weight: bold; color: white; }
|
||||
.status-badge.open { background: #4a90e2; }
|
||||
.status-badge.done { background: #7ed321; }
|
||||
.actions { margin: 1em 0 1.5em; }
|
||||
.actions form { margin: 0; display: inline; }
|
||||
.actions button { font-size: 1em; padding: 0.5em 1em; }
|
||||
.actions a.doc-link { display: inline-block; padding: 0.5em 1em; background: #7ed321; color: white; text-decoration: none; border-radius: 4px; font-weight: bold; }
|
||||
.actions .analyzing { color: #888; font-style: italic; }
|
||||
.actions .llm-missing { color: #a66; font-style: italic; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div><a class="back" href="/web/cases">← Zurück</a></div>
|
||||
<form method="post" action="/web/logout"><button type="submit">Logout</button></form>
|
||||
</header>
|
||||
<h1>Fall {{ case_id_short }} {% if has_document %}<span class="status-badge done">ausgewertet</span>{% else %}<span class="status-badge open">offen</span>{% endif %}</h1>
|
||||
{% match oneliner %}
|
||||
{% when Some with (t) %}
|
||||
<div class="oneliner">{{ t }}</div>
|
||||
{% when None %}
|
||||
<div class="oneliner" style="color:#888;font-style:italic">Noch kein Oneliner.</div>
|
||||
{% endmatch %}
|
||||
<div class="meta">{{ case_id }}</div>
|
||||
|
||||
<div class="actions">
|
||||
{% if analyzing %}
|
||||
<span class="analyzing">wird analysiert …</span>
|
||||
{% else if can_analyze && !has_document %}
|
||||
<form method="post" action="/web/cases/{{ case_id }}/analyze"><button type="submit">Analysieren</button></form>
|
||||
{% else if llm_missing && !has_document %}
|
||||
<span class="llm-missing">LLM-Analyse nicht konfiguriert</span>
|
||||
{% endif %}
|
||||
{% if is_admin %}
|
||||
<form method="post" action="/web/cases/{{ case_id }}/reset" style="display:inline"><button type="submit">Reset</button></form>
|
||||
{% endif %}
|
||||
<form method="post" action="/web/cases/{{ case_id }}/delete" style="margin-left:auto;display:inline"><button type="submit">Entfernen</button></form>
|
||||
</div>
|
||||
|
||||
<h2>Aufnahmen ({{ recordings.len() }})</h2>
|
||||
{% for rec in recordings %}
|
||||
<div class="recording{% if rec.failed %} failed-row{% endif %}">
|
||||
<div class="recording-head">
|
||||
<span>{{ rec.filename }}</span>
|
||||
<audio controls preload="none">
|
||||
<source src="/web/audio/{{ slug }}/{{ case_id }}/{{ rec.filename }}" type="audio/mp4">
|
||||
</audio>
|
||||
</div>
|
||||
{% if rec.failed %}
|
||||
<div class="failed">Transkription fehlgeschlagen — .failed-Suffix entfernen zum Erneut-Versuchen.</div>
|
||||
{% else %}
|
||||
{% match rec.transcript %}
|
||||
{% when Some with (t) %}
|
||||
{% if t.is_empty() %}
|
||||
<div class="pending">(stille Aufnahme)</div>
|
||||
{% else %}
|
||||
<div class="transcript">{{ t }}</div>
|
||||
{% endif %}
|
||||
{% when None %}
|
||||
{% if transcribe_busy %}
|
||||
<div class="pending">Transkription läuft…</div>
|
||||
{% else %}
|
||||
<div class="pending">Transkription ausstehend.</div>
|
||||
{% endif %}
|
||||
{% endmatch %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,61 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Doctate — Cases</title>
|
||||
<style>
|
||||
body { font-family: sans-serif; max-width: 900px; margin: 2em auto; padding: 0 1em; }
|
||||
.case { border: 1px solid #ccc; margin: 1em 0; padding: 1em; border-radius: 4px; }
|
||||
.case h2 { margin: 0 0 0.3em 0; font-size: 1.1em; }
|
||||
.case small { color: #666; font-family: monospace; }
|
||||
.status-open { border-left: 4px solid #4a90e2; }
|
||||
.status-done { border-left: 4px solid #7ed321; }
|
||||
.recording { margin: 0.5em 0; }
|
||||
.recording-head { display: flex; align-items: center; gap: 1em; }
|
||||
.recording-head span { font-family: monospace; font-size: 0.9em; min-width: 20em; }
|
||||
.transcript { margin: 0.5em 0 0 1em; padding: 0.5em; background: #f6f6f6; border-radius: 4px; white-space: pre-wrap; font-family: serif; }
|
||||
.pending { margin: 0.5em 0 0 1em; color: #888; font-style: italic; }
|
||||
.failed { margin: 0.5em 0 0 1em; color: #b00; font-weight: bold; }
|
||||
.recording.failed-row { background: #fff7f7; border-left: 3px solid #e24a4a; padding-left: 0.5em; }
|
||||
.oneliner { font-size: 1em; color: #333; margin: 0 0 0.3em 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Cases</h1>
|
||||
{% if cases.is_empty() %}
|
||||
<p>No cases found.</p>
|
||||
{% else %}
|
||||
{% for case in cases %}
|
||||
<div class="case {% if case.has_document %}status-done{% else %}status-open{% endif %}">
|
||||
<h2>{{ case.user_slug }} — {{ case.case_id_short }} ({% if case.has_document %}analyzed{% else %}in progress{% endif %})</h2>
|
||||
{% match case.oneliner %}
|
||||
{% when Some with (t) %}
|
||||
<div class="oneliner">{{ t }}</div>
|
||||
{% when None %}
|
||||
{% endmatch %}
|
||||
<small>{{ case.case_id }}</small>
|
||||
{% for rec in case.recordings %}
|
||||
<div class="recording{% if rec.failed %} failed-row{% endif %}">
|
||||
<div class="recording-head">
|
||||
<span>{{ rec.filename }}</span>
|
||||
<audio controls preload="none">
|
||||
<source src="/web/audio/{{ case.user_slug }}/{{ case.case_id }}/{{ rec.filename }}" type="audio/mp4">
|
||||
</audio>
|
||||
</div>
|
||||
{% if rec.failed %}
|
||||
<div class="failed">Transcription failed — rename away the .failed suffix to retry.</div>
|
||||
{% else %}
|
||||
{% match rec.transcript %}
|
||||
{% when Some with (t) %}
|
||||
<div class="transcript">{{ t }}</div>
|
||||
{% when None %}
|
||||
<div class="pending">Transcription pending…</div>
|
||||
{% endmatch %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,68 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Doctate — Dokument</title>
|
||||
<style>
|
||||
body { font-family: sans-serif; max-width: 900px; margin: 2em auto; padding: 0 1em; }
|
||||
header { display: flex; justify-content: space-between; align-items: center; }
|
||||
header form { margin: 0; }
|
||||
.back-button { display: inline-block; padding: 0.5em 1em; background: #4a90e2; color: white; text-decoration: none; border-radius: 4px; font-weight: bold; }
|
||||
.doc-content { font-family: serif; font-size: 1.05em; line-height: 1.55; background: #f6f6f6; padding: 1em 1.2em; border-radius: 4px; }
|
||||
.doc-content p { margin: 0.8em 0; }
|
||||
.doc-content p:first-child { margin-top: 0; }
|
||||
.doc-content p:last-child { margin-bottom: 0; }
|
||||
.doc-content mark { background: #fff3a8; padding: 0 0.2em; border-radius: 2px; }
|
||||
.meta { color: #666; font-family: monospace; font-size: 0.9em; margin-bottom: 1em; }
|
||||
.copy-btn { padding: 0.5em 1em; font-size: 1em; border: 1px solid #4a90e2; background: white; color: #4a90e2; border-radius: 4px; cursor: pointer; font-weight: bold; }
|
||||
.copy-btn:hover { background: #eaf3fc; }
|
||||
.toolbar { display: flex; gap: 0.6em; margin: 1em 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div><a class="back-button" href="/web/cases">← Alle Fälle</a></div>
|
||||
<form method="post" action="/web/logout"><button type="submit">Logout</button></form>
|
||||
</header>
|
||||
<h1>Dokument</h1>
|
||||
<div class="meta">{{ case_id }}</div>
|
||||
<div class="toolbar">
|
||||
<button id="copy-btn" type="button" class="copy-btn" hidden>In Zwischenablage</button>
|
||||
</div>
|
||||
<div id="doc-content" class="doc-content">{{ content|safe }}</div>
|
||||
<div class="toolbar">
|
||||
<a class="back-button" href="/web/cases/{{ case_id }}">Aufnahmen</a>
|
||||
</div>
|
||||
<script>
|
||||
(() => {
|
||||
const btn = document.getElementById('copy-btn');
|
||||
if (!btn) return;
|
||||
btn.hidden = false;
|
||||
const label = btn.textContent;
|
||||
btn.addEventListener('click', async () => {
|
||||
const text = document.getElementById('doc-content').innerText;
|
||||
let ok = false;
|
||||
try {
|
||||
if (navigator.clipboard && window.isSecureContext) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
ok = true;
|
||||
}
|
||||
} catch (_) { /* fall through */ }
|
||||
if (!ok) {
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = text;
|
||||
ta.setAttribute('readonly', '');
|
||||
ta.style.position = 'fixed';
|
||||
ta.style.top = '-1000px';
|
||||
document.body.appendChild(ta);
|
||||
ta.select();
|
||||
try { ok = document.execCommand('copy'); } catch (_) {}
|
||||
ta.remove();
|
||||
}
|
||||
btn.textContent = ok ? 'Kopiert ✓' : 'Fehlgeschlagen';
|
||||
setTimeout(() => { btn.textContent = label; }, 1500);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -67,7 +67,7 @@ section h2 { font-size: 1.1em; color: #555; border-bottom: 1px solid #ddd; paddi
|
||||
<li class="case-row {% if case.has_document %}done{% else %}open{% endif %}">
|
||||
<div class="check"><input type="checkbox" name="case_id" value="{{ case.case_id }}"></div>
|
||||
<div class="body">
|
||||
{% if case.has_document %}<a href="/web/cases/{{ case.case_id }}/document">{% else %}<a href="/web/cases/{{ case.case_id }}">{% endif %}
|
||||
<a href="/web/cases/{{ case.case_id }}">
|
||||
<div class="line1"><span class="time"><time datetime="{{ case.recorded_at_iso }}">{{ case.time_hms_utc }}</time></span>{% match case.oneliner %}{% when Some with (t) %} — {{ t }}{% when None %} — <span class="empty">kein Oneliner</span>{% endmatch %}</div>
|
||||
<div class="line2">{{ case.recordings_count }} Aufnahmen{% if case.has_document %} — <span class="status-badge done">ausgewertet</span>{% else %} — <span class="status-badge open">offen</span>{% endif %}{% if case.analyzing %} <span class="label analyzing">wird analysiert</span>{% endif %}</div>
|
||||
{% if is_admin %}<div class="uuid">{{ case.case_id }}</div>{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user