update

frontend/src/components/VerwaltungTab.vue

@@ -106,6 +106,21 @@ async function aufnahmeLoeschen(s) {
   await aufnahmenLaden()
 }
 
+// Welcher Film in einer Aufnahme lief, sagt der Host — per Filmsuche
+const filmDialogFuer = ref(null)
+
+async function filmZuweisen(start, movieId) {
+  aufnahmenFehler.value = ''
+  const resp = await fetch('/api/aufnahmen/film', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ start, movie_id: movieId }),
+  })
+  if (!resp.ok) aufnahmenFehler.value = 'Zuweisen hat nicht geklappt.'
+  filmDialogFuer.value = null
+  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' })
@@ -245,19 +260,52 @@ async function entfernen(user) {
       <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>
+          <span>
+            {{ aufnahmeText(s) }} ·
+            <strong v-if="s.film">{{ s.film.title }}</strong>
+            <em v-else>kein Film</em>
+          </span>
+          <span class="knoepfe">
+            <button type="button" class="klein" @click="filmDialogFuer = s.start">Film</button>
+            <button
+              v-if="s.zugewiesen"
+              type="button"
+              class="klein"
+              @click="filmZuweisen(s.start, null)"
+            >
+              Aufheben
+            </button>
+            <button
+              type="button"
+              class="klein"
+              :class="{ warnung: loeschFrage === s.start }"
+              @click="aufnahmeLoeschen(s)"
+            >
+              {{ loeschFrage === s.start ? 'Wirklich löschen?' : 'Löschen' }}
+            </button>
+          </span>
         </li>
       </ul>
     </section>
 
+    <Teleport to="body">
+      <div v-if="filmDialogFuer" class="hintergrund" @click.self="filmDialogFuer = null">
+        <div class="fenster" role="dialog" aria-modal="true">
+          <p class="label">Aufnahme</p>
+          <h2>Welcher Film lief?</h2>
+          <FilmSuche
+            platzhalter="Film suchen …"
+            @waehlen="filmZuweisen(filmDialogFuer, $event.id)"
+          />
+          <div class="fuss">
+            <button type="button" class="abbrechen" @click="filmDialogFuer = null">
+              Abbrechen
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
     <Teleport to="body">
       <div v-if="hostFilmDialog" class="hintergrund" @click.self="hostFilmDialog = false">
         <div class="fenster" role="dialog" aria-modal="true">
@@ -552,6 +600,17 @@ h3 {
   font-size: 0.9rem;
 }
 
+.aufnahmen .knoepfe {
+  display: flex;
+  flex-shrink: 0;
+  gap: 0.4rem;
+}
+
+.aufnahmen em {
+  color: var(--muted);
+  font-style: normal;
+}
+
 .klein.warnung {
   color: #fff;
   background: var(--accent);