update

frontend/src/components/MovieDetail.vue

@@ -1,13 +1,39 @@
 <script setup>
-import { computed, onMounted, onUnmounted } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { backdropUrl, posterUrl } from '../images'
 
 const props = defineProps({
   movie: { type: Object, required: true },
   series: { type: Array, default: () => [] },
+  meinVorschlag: { type: Object, default: null },
 })
 
-const emit = defineEmits(['close', 'open'])
+const emit = defineEmits(['close', 'open', 'suggested'])
+
+const vorschlagen = ref({ zustand: 'bereit', name: '' })
+
+const schonVorgeschlagen = computed(
+  () => props.meinVorschlag?.movie_id === props.movie.id
+)
+
+async function abschicken() {
+  vorschlagen.value = { ...vorschlagen.value, zustand: 'laeuft' }
+  try {
+    const resp = await fetch('/api/suggestions', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        movie_id: props.movie.id,
+        name: vorschlagen.value.name || null,
+      }),
+    })
+    if (!resp.ok) throw new Error()
+    vorschlagen.value = { ...vorschlagen.value, zustand: 'fertig' }
+    emit('suggested')
+  } catch {
+    vorschlagen.value = { ...vorschlagen.value, zustand: 'fehler' }
+  }
+}
 
 const poster = computed(() => posterUrl(props.movie.poster_path, 'w342'))
 const shots = computed(() =>
@@ -86,6 +112,37 @@ onUnmounted(() => {
               IMDb
             </a>
           </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>
+            <template v-else>
+              <span v-if="meinVorschlag" class="hinweis">
+                Du hast „{{ meinVorschlag.title }}“ vorgeschlagen. Ein neuer
+                Vorschlag ersetzt ihn.
+              </span>
+              <input
+                v-model="vorschlagen.name"
+                type="text"
+                placeholder="Dein Name (optional)"
+                maxlength="40"
+              />
+              <button
+                type="button"
+                :disabled="vorschlagen.zustand === 'laeuft'"
+                @click="abschicken"
+              >
+                Vorschlagen
+              </button>
+              <span v-if="vorschlagen.zustand === 'fehler'" class="fehler">
+                Hat nicht geklappt.
+              </span>
+            </template>
+          </div>
         </div>
       </header>
 
@@ -257,6 +314,57 @@ h2 {
   background: #f5c518;
 }
 
+.vorschlag {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--line);
+}
+
+.vorschlag input {
+  width: 11rem;
+  padding: 0.45rem 0.7rem;
+  font-size: 0.85rem;
+}
+
+.vorschlag button {
+  padding: 0.45rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 7px;
+}
+
+.vorschlag button:hover:not(:disabled) {
+  border-color: var(--accent);
+}
+
+.vorschlag button:disabled {
+  color: var(--muted);
+  cursor: default;
+}
+
+.hinweis {
+  flex-basis: 100%;
+  color: var(--muted);
+  font-size: 0.8rem;
+  line-height: 1.4;
+}
+
+.ok {
+  color: #6bbf7a;
+  font-size: 0.88rem;
+}
+
+.fehler {
+  color: var(--accent);
+  font-size: 0.85rem;
+}
+
 .netflix:hover,
 .imdb:hover {
   filter: brightness(1.15);