From 5777dd5908405935c58d0556f028a2a773e9b67d Mon Sep 17 00:00:00 2001
From: team3 <team3@mitho-media.de>
Date: Wed, 2 Sep 2026 19:36:53 +0200
Subject: [PATCH] =?UTF-8?q?Vorschlag=20umschaltbar,=20Wertungen=20einzeln?=
 =?UTF-8?q?=20l=C3=B6schbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wer einen Film aufs Rad gesetzt hat, kann ihn dort auch wieder runternehmen.
Im Raster tragen alle Filme auf dem Rad jetzt eine Marke, nicht nur der
eigene Vorschlag — so sieht man auf einen Blick, was schon vorgeschlagen
ist. Die Karten hören dafür am Live-Kanal mit.

Dazu: der Host löscht einzelne Wertungen, das Cover dockt oben an statt
mittig, und die Suche heißt schlicht "Globale Suche".

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013XVnRop5c3or3B8xE2hpgZ
---
 backend/app/main.py                     |  9 +++++++
 backend/app/watched.py                  | 13 +++++++++--
 frontend/src/App.vue                    | 19 ++++++++++++++-
 frontend/src/components/MovieCard.vue   | 31 ++++++++++++++++++++++++-
 frontend/src/components/MovieDetail.vue | 26 +++++++++++++++++----
 frontend/src/components/SearchTab.vue   |  2 +-
 frontend/src/components/SeriesCard.vue  | 27 ++++++++++++++++++++-
 frontend/src/components/WatchedTab.vue  | 27 ++++++++++++++++++++-
 8 files changed, 142 insertions(+), 12 deletions(-)

diff --git a/backend/app/main.py b/backend/app/main.py
index 7625988..e57dae9 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -315,6 +315,15 @@ def bewerten(
     return eintrag
 
 
+@app.delete("/api/watched/rating/{rating_id}")
+def wertung_loeschen(rating_id: int):
+    """Der Host räumt eine einzelne Wertung weg."""
+    if not watched.stimme_loeschen(rating_id):
+        raise HTTPException(status_code=404, detail="Wertung nicht gefunden")
+    events.senden("watched")
+    return {"removed": 1}
+
+
 @app.delete("/api/suggestions/alle")
 def runde_zuruecksetzen():
     """Host leert die Runde: Vorschläge weg, Rad wieder leer."""
diff --git a/backend/app/watched.py b/backend/app/watched.py
index 6e27de7..0c7da39 100644
--- a/backend/app/watched.py
+++ b/backend/app/watched.py
@@ -59,7 +59,7 @@ def alle(session_id):
             "SELECT * FROM watched ORDER BY watched_at DESC, id DESC"
         ).fetchall()
         stimmen = conn.execute(
-            "SELECT watched_id, session_id, stars, name FROM ratings "
+            "SELECT id, watched_id, session_id, stars, name FROM ratings "
             "ORDER BY created_at ASC"
         ).fetchall()
 
@@ -75,7 +75,8 @@ def alle(session_id):
             {
                 **dict(film),
                 "ratings": [
-                    {"stars": s["stars"], "name": s["name"]} for s in eigene
+                    {"id": s["id"], "stars": s["stars"], "name": s["name"]}
+                    for s in eigene
                 ],
                 "average": round(sum(werte) / len(werte), 1) if werte else None,
                 "count": len(werte),
@@ -163,6 +164,14 @@ def bewerten(watched_id, session_id, stars, name=None):
     return {"watched_id": watched_id, "stars": stars}
 
 
+def stimme_loeschen(rating_id):
+    """Der Host räumt eine einzelne Wertung weg."""
+    with connect() as conn:
+        return conn.execute(
+            "DELETE FROM ratings WHERE id = ?", (rating_id,)
+        ).rowcount
+
+
 def ids():
     """movie_ids der geschauten Filme, für die Detailansicht."""
     with connect() as conn:
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 84713bd..6dd5851 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { abonnieren } from './live'
 import MovieCard from './components/MovieCard.vue'
 import FilterSidebar from './components/FilterSidebar.vue'
 import MovieDetail from './components/MovieDetail.vue'
@@ -249,14 +250,19 @@ function tastatur(e) {
 // Wer schon vorgeschlagen hat, soll das in der Detailansicht sehen
 const meinVorschlag = ref(null)
 
+// Alle Filme auf dem Rad, damit die Karten es zeigen können
+const aufDemRad = ref([])
+
 async function ladeVorschlag() {
   try {
     const resp = await fetch('/api/suggestions')
     if (!resp.ok) return
     const daten = await resp.json()
     meinVorschlag.value = daten.items.find((i) => i.id === daten.mine) || null
+    aufDemRad.value = daten.items.map((i) => i.movie_id)
   } catch {
     meinVorschlag.value = null
+    aufDemRad.value = []
   }
 }
 
@@ -375,14 +381,23 @@ async function load() {
   }
 }
 
+let abbestellen = null
+
 onMounted(() => {
   load()
   ladeVorschlag()
   ladeGesehen()
+  // Schlägt jemand anders etwas vor, sollen es auch die Karten zeigen
+  abbestellen = abonnieren((nachricht) => {
+    if (nachricht.type === 'suggestions' || nachricht.type === 'reset') ladeVorschlag()
+  })
   window.addEventListener('keydown', tastatur)
 })
 
-onUnmounted(() => window.removeEventListener('keydown', tastatur))
+onUnmounted(() => {
+  window.removeEventListener('keydown', tastatur)
+  abbestellen?.()
+})
 </script>
 
 <template>
@@ -447,12 +462,14 @@ onUnmounted(() => window.removeEventListener('keydown', tastatur))
           <MovieCard
             v-if="entry.parts.length === 1"
             :movie="entry.parts[0]"
+            :auf-dem-rad="aufDemRad.includes(entry.parts[0].id)"
             @open="selected = $event"
           />
           <SeriesCard
             v-else
             :parts="entry.parts"
             :start="entry.best"
+            :auf-dem-rad="aufDemRad"
             @open="selected = $event"
           />
         </template>
diff --git a/frontend/src/components/MovieCard.vue b/frontend/src/components/MovieCard.vue
index 998dde0..84a086a 100644
--- a/frontend/src/components/MovieCard.vue
+++ b/frontend/src/components/MovieCard.vue
@@ -4,6 +4,7 @@ import { posterUrl } from '../images'
 
 const props = defineProps({
   movie: { type: Object, required: true },
+  aufDemRad: { type: Boolean, default: false },
 })
 
 defineEmits(['open'])
@@ -21,7 +22,13 @@ const meta = computed(() =>
 </script>
 
 <template>
-  <button class="card" type="button" @click="$emit('open', movie)">
+  <button
+    class="card"
+    :class="{ 'auf-dem-rad': aufDemRad }"
+    type="button"
+    @click="$emit('open', movie)"
+  >
+    <span v-if="aufDemRad" class="rad-marke" title="Steht auf dem Rad">Rad</span>
     <div class="poster">
       <img v-if="poster" :src="poster" :alt="movie.title" loading="lazy" />
       <span v-else class="placeholder">Kein Cover</span>
@@ -37,6 +44,7 @@ const meta = computed(() =>
 
 <style scoped>
 .card {
+  position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -47,6 +55,27 @@ const meta = computed(() =>
   transition: transform 0.15s ease, border-color 0.15s ease;
 }
 
+/* Steht der Film auf dem Rad, soll man das im Raster sehen */
+.card.auf-dem-rad {
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+.rad-marke {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  z-index: 1;
+  padding: 0.1rem 0.4rem;
+  color: #fff;
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: var(--accent);
+  border-radius: 4px;
+}
+
 .card:hover,
 .card:focus-visible {
   transform: translateY(-4px);
diff --git a/frontend/src/components/MovieDetail.vue b/frontend/src/components/MovieDetail.vue
index 1a250b2..f86e9b8 100644
--- a/frontend/src/components/MovieDetail.vue
+++ b/frontend/src/components/MovieDetail.vue
@@ -19,6 +19,18 @@ const schonVorgeschlagen = computed(
   () => props.meinVorschlag?.movie_id === props.movie.id
 )
 
+async function zuruecknehmen() {
+  vorschlagen.value = { zustand: 'laeuft' }
+  try {
+    const resp = await fetch('/api/suggestions', { method: 'DELETE' })
+    if (!resp.ok) throw new Error()
+    vorschlagen.value = { zustand: 'bereit' }
+    emit('suggested')
+  } catch {
+    vorschlagen.value = { zustand: 'fehler' }
+  }
+}
+
 async function abschicken() {
   vorschlagen.value = { zustand: 'laeuft' }
   try {
@@ -136,11 +148,15 @@ onUnmounted(() => {
           </div>
 
           <div class="vorschlag">
-            <template v-if="vorschlagen.zustand === 'fertig'">
-              <span class="ok">Für den Filmabend vorgeschlagen.</span>
-            </template>
-            <template v-else-if="schonVorgeschlagen">
-              <span class="ok">Dieser Film steht schon auf dem Rad.</span>
+            <template v-if="schonVorgeschlagen || vorschlagen.zustand === 'fertig'">
+              <span class="ok">Steht auf dem Rad.</span>
+              <button
+                type="button"
+                :disabled="vorschlagen.zustand === 'laeuft'"
+                @click="zuruecknehmen"
+              >
+                Wieder runternehmen
+              </button>
             </template>
             <template v-else>
               <span v-if="meinVorschlag" class="hinweis">
diff --git a/frontend/src/components/SearchTab.vue b/frontend/src/components/SearchTab.vue
index 0caa4e1..862d77d 100644
--- a/frontend/src/components/SearchTab.vue
+++ b/frontend/src/components/SearchTab.vue
@@ -54,7 +54,7 @@ async function open(movie) {
       v-model="query"
       type="search"
       class="big-search"
-      placeholder="Film suchen — egal wo er läuft…"
+      placeholder="Globale Suche …"
       autofocus
     />
 
diff --git a/frontend/src/components/SeriesCard.vue b/frontend/src/components/SeriesCard.vue
index 1fde9eb..29b8de3 100644
--- a/frontend/src/components/SeriesCard.vue
+++ b/frontend/src/components/SeriesCard.vue
@@ -6,6 +6,7 @@ const props = defineProps({
   parts: { type: Array, required: true },
   // Die Karte öffnet mit dem stärksten Teil, nicht mit dem ersten
   start: { type: Number, default: 0 },
+  aufDemRad: { type: Array, default: () => [] },
 })
 
 defineEmits(['open'])
@@ -17,6 +18,8 @@ const rating = computed(() =>
   current.value.vote_average ? current.value.vote_average.toFixed(1) : null
 )
 
+const stehtAufDemRad = computed(() => props.aufDemRad.includes(current.value.id))
+
 const meta = computed(() =>
   [current.value.year || 'Jahr unbekannt', current.value.runtime && `${current.value.runtime} Min.`]
     .filter(Boolean)
@@ -30,7 +33,8 @@ function step(delta) {
 </script>
 
 <template>
-  <article class="card">
+  <article class="card" :class="{ 'auf-dem-rad': stehtAufDemRad }">
+    <span v-if="stehtAufDemRad" class="rad-marke" title="Steht auf dem Rad">Rad</span>
     <button class="poster" type="button" @click="$emit('open', current)">
       <img v-if="poster" :src="poster" :alt="current.title" loading="lazy" />
       <span v-else class="placeholder">Kein Cover</span>
@@ -64,6 +68,7 @@ function step(delta) {
 
 <style scoped>
 .card {
+  position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -212,4 +217,24 @@ h2:hover {
 .dot:hover {
   background: var(--muted);
 }
+
+.card.auf-dem-rad {
+  border-color: var(--accent);
+  box-shadow: inset 0 0 0 1px var(--accent);
+}
+
+.rad-marke {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  z-index: 2;
+  padding: 0.1rem 0.4rem;
+  color: #fff;
+  font-size: 0.65rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  background: var(--accent);
+  border-radius: 4px;
+}
 </style>
diff --git a/frontend/src/components/WatchedTab.vue b/frontend/src/components/WatchedTab.vue
index d23077a..b1337eb 100644
--- a/frontend/src/components/WatchedTab.vue
+++ b/frontend/src/components/WatchedTab.vue
@@ -62,6 +62,10 @@ async function sichtbarkeit(item) {
   })
 }
 
+async function wertungEntfernen(wertung) {
+  await fetch(`/api/watched/rating/${wertung.id}`, { method: 'DELETE' })
+}
+
 async function entfernen(item) {
   await fetch(`/api/watched/${item.id}`, { method: 'DELETE' })
 }
@@ -170,9 +174,18 @@ onUnmounted(() => abbestellen?.())
           </div>
 
           <ul v-if="item.ratings.length" class="stimmen">
-            <li v-for="(r, i) in item.ratings" :key="i">
+            <li v-for="r in item.ratings" :key="r.id">
               <span class="wer">{{ r.name || 'Anonym' }}</span>
               <span class="punkte">{{ '★'.repeat(r.stars) }}</span>
+              <button
+                v-if="host"
+                type="button"
+                class="weg-klein"
+                title="Diese Wertung entfernen"
+                @click="wertungEntfernen(r)"
+              >
+                ×
+              </button>
             </li>
           </ul>
 
@@ -217,6 +230,7 @@ onUnmounted(() => abbestellen?.())
 .karte {
   display: flex;
   gap: 0.9rem;
+  align-items: flex-start;
   padding: 0.8rem;
   background: var(--bg-soft);
   border: 1px solid var(--line);
@@ -345,6 +359,17 @@ h3:hover {
   color: #f5c518;
 }
 
+.weg-klein {
+  padding: 0 0.25rem;
+  color: var(--muted);
+  font-size: 0.9rem;
+  line-height: 1;
+}
+
+.weg-klein:hover {
+  color: var(--accent);
+}
+
 .aktionen {
   display: flex;
   gap: 0.35rem;