update

frontend/src/components/VerwaltungTab.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import FilmSuche from './FilmSuche.vue'
 import { posterUrl } from '../images'
 import PersonName from './PersonName.vue'
@@ -71,6 +71,47 @@ async function hostFilmSetzen(movieId) {
   hostFilmDialog.value = false
 }
 
+// Die Aufnahmen der Abende — der Host löscht, was weg kann. Erst ein
+// zweiter Klick auf denselben Knopf löscht wirklich.
+const aufnahmen = ref(null)
+const aufnahmenFehler = ref('')
+const loeschFrage = ref(null)
+
+async function aufnahmenLaden() {
+  if (!props.host) return
+  aufnahmenFehler.value = ''
+  loeschFrage.value = null
+  try {
+    const resp = await fetch('/api/aufnahmen')
+    if (!resp.ok) throw new Error()
+    aufnahmen.value = (await resp.json()).stuecke
+  } catch {
+    aufnahmen.value = []
+    aufnahmenFehler.value = 'Die Aufnahmen sind gerade nicht erreichbar.'
+  }
+}
+
+async function aufnahmeLoeschen(s) {
+  if (loeschFrage.value !== s.start) {
+    loeschFrage.value = s.start
+    return
+  }
+  const params = new URLSearchParams({ start: s.start, dauer: s.dauer })
+  const resp = await fetch(`/api/aufnahmen?${params}`, { method: 'DELETE' })
+  if (!resp.ok) aufnahmenFehler.value = 'Löschen hat nicht geklappt.'
+  await aufnahmenLaden()
+}
+
+function aufnahmeText(s) {
+  const d = new Date(s.start)
+  const datum = d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
+  const zeit = d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })
+  return `${datum} · ${zeit} Uhr · ${Math.max(1, Math.round(s.dauer / 60))} Min`
+}
+
+onMounted(aufnahmenLaden)
+watch(() => props.host, aufnahmenLaden)
+
 async function anlegen() {
   fehler.value = ''
   const resp = await fetch('/api/users', {
@@ -193,6 +234,26 @@ async function entfernen(user) {
       </div>
     </section>
 
+    <section v-if="host" class="aufnahmen">
+      <h3>Aufnahmen</h3>
+      <p v-if="aufnahmenFehler" class="fehler">{{ aufnahmenFehler }}</p>
+      <p v-if="aufnahmen === null" class="leer">Suche Aufnahmen …</p>
+      <p v-else-if="!aufnahmen.length" class="leer">Keine Aufnahmen.</p>
+      <ul v-else>
+        <li v-for="s in aufnahmen" :key="s.start" class="zeile">
+          <span>{{ aufnahmeText(s) }}</span>
+          <button
+            type="button"
+            class="klein"
+            :class="{ warnung: loeschFrage === s.start }"
+            @click="aufnahmeLoeschen(s)"
+          >
+            {{ loeschFrage === s.start ? 'Wirklich löschen?' : 'Löschen' }}
+          </button>
+        </li>
+      </ul>
+    </section>
+
     <Teleport to="body">
       <div v-if="hostFilmDialog" class="hintergrund" @click.self="hostFilmDialog = false">
         <div class="fenster" role="dialog" aria-modal="true">
@@ -472,6 +533,27 @@ h3 {
   }
 }
 
+.aufnahmen ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  list-style: none;
+}
+
+.aufnahmen .zeile {
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.9rem;
+}
+
+.klein.warnung {
+  color: #fff;
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
 .hostfilm .zeile {
   display: flex;
   flex-wrap: wrap;