From 6679083789062777a2c10461c989fe4be6b1def6 Mon Sep 17 00:00:00 2001
From: MCMichinator <michi.tomaschko@gmail.com>
Date: Mon, 7 Apr 2025 05:24:51 +0200
Subject: [PATCH] =?UTF-8?q?buchdetailseite:=20Umsetzung=20von=20PowerPoint?=
 =?UTF-8?q?=20Layout,=20sowie=20zus=C3=A4tliche=20Idee=20"Community-Statis?=
 =?UTF-8?q?tik"=20usw.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/buchdetailseite/[id].vue | 275 ++++++++++++++++++++---------
 1 file changed, 193 insertions(+), 82 deletions(-)

diff --git a/src/pages/buchdetailseite/[id].vue b/src/pages/buchdetailseite/[id].vue
index 11c0126..b5ad8c0 100644
--- a/src/pages/buchdetailseite/[id].vue
+++ b/src/pages/buchdetailseite/[id].vue
@@ -1,102 +1,213 @@
 <template>
-  <VContainer class="pt-6">
-    <VRow>
-      <VCol cols="12" md="4">
-        <VImg
-          :src="book.image"
-          max-height="500"
-          max-width="100%"
-          contain
-          class="rounded"
-        />
-      </VCol>
+  <VContainer class="py-6">
+    <VCard class="pa-4" elevation="2">
+      <VRow>
+        <!-- Cover & Shops + Community -->
+        <VCol cols="12" md="3">
+          <div class="mb-4" style="aspect-ratio: 2/3; overflow: hidden;">
+            <VImg :src="book.image" height="100%" width="100%" cover class="elevation-1" />
+          </div>
 
-      <VCol cols="12" md="8">
-        <VCard class="pa-4">
-          <VCardTitle class="text-h5 font-weight-bold">
-            {{ book.title }}<br>
-            <span class="text-subtitle-1" v-if="book.subtitle">{{ book.subtitle }}</span>
-          </VCardTitle>
+          <div class="d-flex flex-column gap-2 mb-4">
+            <VBtn block color="black" variant="outlined" href="https://www.amazon.de" target="_blank">
+              <VIcon start icon="tabler-brand-amazon" /> Amazon
+            </VBtn>
+            <VBtn block color="blue" variant="outlined">
+              <VIcon start icon="tabler-book" /> Hugendubel
+            </VBtn>
+            <VBtn block color="grey" variant="outlined">
+              <VIcon start icon="tabler-brand-apple" /> Apple
+            </VBtn>
+            <VBtn block color="green" variant="outlined">
+              <VIcon start icon="tabler-book-2" /> Thalia
+            </VBtn>
+          </div>
 
-          <VCardText>
-            <div v-if="book.authors?.length" class="mb-2">
-              <strong>Autor(en):</strong>
-              {{ book.authors.map(a => a.name).join(', ') }}
-            </div>
+          <!-- Community-Statistik -->
+          <VCard class="pa-3" variant="outlined" style="min-height: 220px;">
+            <VCardTitle>Community-Statistik</VCardTitle>
+            <VCardText>
+              <VList density="compact">
+                <VListItem prepend-icon="tabler-library">In 47 Bibliotheken</VListItem>
+                <VListItem prepend-icon="tabler-bookmark">Auf 20 Merkzettel</VListItem>
+                <VListItem prepend-icon="tabler-book">4 Leser*innen lesen es gerade</VListItem>
+              </VList>
+            </VCardText>
+          </VCard>
+        </VCol>
 
-            <!-- Genres mit Icons -->
-            <div class="d-flex flex-wrap align-center mb-3">
-              <VChip
-                v-for="genre in book.genres"
-                :key="genre"
-                color="primary"
-                class="ma-1"
-                size="small"
-              >
-                <VIcon
-                  v-if="genreIconMap[genre]"
-                  :icon="genreIconMap[genre].icon"
-                  :size="genreIconMap[genre].size"
-                  class="me-1"
-                />
-                {{ genre }}
-              </VChip>
-            </div>
+        <!-- Hauptbereich -->
+        <VCol cols="12" md="9">
+          <div class="mb-6">
+            <h1 class="text-h4 font-weight-bold mb-1">{{ book.title }}</h1>
+            <h2 class="text-subtitle-1">von {{ book.authors[0]?.name }}</h2>
+            <div class="mt-2 text-muted">{{ book.subtitle }}</div>
+          </div>
 
-            <!-- Fieberkurve -->
-            <Fieberkurve :is-static="true" :default-values="book.fieberkurve" :hide-text="true" class="mb-4" />
+          <!-- Genres -->
+          <div class="d-flex align-center gap-2 flex-wrap mb-4">
+            <VChip
+              v-for="genre in book.genres"
+              :key="genre"
+              color="primary"
+              variant="flat"
+              class="me-1"
+            >
+              <VIcon start :icon="genreIcon(genre)" /> {{ genre }}
+            </VChip>
+          </div>
 
-            <!-- Beschreibung -->
-            <div class="mb-4">
-              <strong>Beschreibung:</strong>
-              <p class="mt-1">{{ book.blurb }}</p>
-            </div>
+          <!-- Neue statische Fieberkurve -->
+          <Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }]" class="my-4" />
 
-            <!-- Detailtabelle -->
-            <VTable dense>
-              <tbody>
-              <tr><td><strong>Seitenzahl</strong></td><td>{{ book.pageCount }}</td></tr>
-              <tr><td><strong>Sprache</strong></td><td>{{ book.language }}</td></tr>
-              <tr v-if="book.publishers"><td><strong>Verlag</strong></td><td>{{ book.publishers }}</td></tr>
-              <tr><td><strong>Veröffentlicht</strong></td><td>{{ book.publishedDate }}</td></tr>
-              <tr v-if="book.isbn"><td><strong>ISBN</strong></td><td>{{ book.isbn }}</td></tr>
-              </tbody>
-            </VTable>
+          <!-- Inhaltsangabe -->
+          <VCard class="mb-4" variant="outlined" style="min-height: 180px;">
+            <VCardTitle>Inhaltsangabe</VCardTitle>
+            <VCardText>{{ book.blurb }}</VCardText>
+          </VCard>
 
-            <!-- Shoplink (Platzhalter) -->
-            <div class="mt-4">
-              <VBtn color="success" variant="flat">
-                <VIcon icon="tabler-shopping-cart" class="me-2" />
-                Bei Amazon suchen
-              </VBtn>
-            </div>
+          <!-- Buchdetails & Infos -->
+          <VRow>
+            <VCol cols="12" md="6">
+              <VCard class="pa-3" variant="outlined" style="min-height: 220px;">
+                <VCardTitle>Buchdetails</VCardTitle>
+                <VCardText>
+                  <strong>ISBN:</strong> {{ book.isbn || '–' }}<br />
+                  <strong>Sprache:</strong> {{ book.language }}<br />
+                  <strong>Seiten:</strong> {{ book.pageCount }}<br />
+                  <strong>Verlag:</strong> {{ book.publishers || '–' }}<br />
+                  <strong>Veröffentlicht:</strong> {{ book.publishedDate }}
+                </VCardText>
+              </VCard>
+            </VCol>
+            <VCol cols="12" md="6">
+              <VCard class="pa-3" variant="outlined" style="min-height: 220px;">
+                <VCardTitle>Weitere Informationen</VCardTitle>
+                <VCardText>
+                  <ul class="pa-0" style="list-style: none">
+                    <li><a href="#">Alle Ausgaben in der Übersicht</a></li>
+                    <li><a href="#">Vergleichbare Bücher suchen</a></li>
+                    <li><a href="#">Mehr über das Buch (z. B. Skoutz-Artikel)</a></li>
+                    <li><a href="#">Über den Autor/die Autorin</a></li>
+                    <li><a href="#">Über den Verlag</a></li>
+                    <li><a href="#">Weitere Bücher aus der Reihe</a></li>
+                  </ul>
+                </VCardText>
+              </VCard>
+            </VCol>
+          </VRow>
 
-          </VCardText>
-        </VCard>
-      </VCol>
-    </VRow>
+          <!-- Weitere Bücher vom Autor -->
+          <VCard class="mt-6 mb-6" elevation="0">
+            <VCardTitle>Bücher von {{ book.authors[0]?.name }}</VCardTitle>
+            <VCardText>
+              <VRow>
+                <VCol v-for="item in authorBooks" :key="item.id" cols="12" sm="6" md="3">
+                  <RouterLink :to="`/buchdetailseite/${item.id}`">
+                    <VCard class="hover:scale-105 transition-transform duration-200">
+                      <VImg :src="item.image" height="180" cover />
+                      <VCardText>
+                        <div class="text-sm font-semibold">{{ item.title }}</div>
+                      </VCardText>
+                    </VCard>
+                  </RouterLink>
+                </VCol>
+                <!-- Beispielbücher -->
+                <VCol cols="12" sm="6" md="3">
+                  <VCard>
+                    <VImg src="https://m.media-amazon.com/images/I/81bsw6fnUiL.jpg" height="180" cover />
+                    <VCardText>
+                      <div class="text-sm font-semibold">Rich Dad's Cashflow Quadrant</div>
+                    </VCardText>
+                  </VCard>
+                </VCol>
+                <VCol cols="12" sm="6" md="3">
+                  <VCard>
+                    <VImg src="https://m.media-amazon.com/images/I/81eUwF5QzIL.jpg" height="180" cover />
+                    <VCardText>
+                      <div class="text-sm font-semibold">Rich Dad's Guide to Investing</div>
+                    </VCardText>
+                  </VCard>
+                </VCol>
+              </VRow>
+            </VCardText>
+          </VCard>
+
+          <!-- Rezensionen -->
+          <VCard elevation="0">
+            <VCardTitle>Rezensionen & Bewertungen</VCardTitle>
+            <VCardText>
+              <p class="mb-2">⭐⭐⭐⭐☆ 4,3 / 5 Sterne (15 Stimmen)</p>
+              <em>Hier könnten später echte Rezensionen von Nutzern folgen.</em>
+            </VCardText>
+          </VCard>
+
+          <!-- Ähnliche Bücher -->
+          <VCard class="mt-6" elevation="0">
+            <VCardTitle>Ähnliche Bücher</VCardTitle>
+            <VCardText>
+              <VRow>
+                <VCol
+                  v-for="similar in similarBooks"
+                  :key="similar.id"
+                  cols="12"
+                  sm="6"
+                  md="3"
+                >
+                  <RouterLink :to="`/buchdetailseite/${similar.id}`">
+                    <VCard class="hover:scale-105 transition-transform duration-200">
+                      <VImg :src="similar.image" height="180" cover />
+                      <VCardText>
+                        <div class="text-sm font-semibold">{{ similar.title }}</div>
+                      </VCardText>
+                    </VCard>
+                  </RouterLink>
+                </VCol>
+              </VRow>
+            </VCardText>
+          </VCard>
+        </VCol>
+      </VRow>
+    </VCard>
   </VContainer>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { books } from '@/components/buecherdatenbank.js'
-import { genres as genreIcons } from '@/components/genredatenbank.js'
+import { books } from '@/components/buecherdatenbank'
 import Fieberkurve from '@/components/Fieberkurve.vue'
 
 const route = useRoute()
-const bookId = parseInt(route.params.id)
-const book = books.find(b => b.id === bookId) || {}
+const id = parseInt(route.params.id)
+const book = books.find(b => b.id === id) || {}
 
-const genreIconMap = genreIcons.reduce((acc, g) => {
-  acc[g.value] = g.icon
-  return acc
-}, {})
-</script>
+const authorBooks = computed(() => {
+  if (!book?.authors?.[0]?.name) return []
+  return books.filter(b => b.authors?.[0]?.name === book.authors[0].name && b.id !== book.id)
+})
 
-<style scoped>
-p {
-  line-height: 1.6;
+const similarBooks = computed(() => {
+  if (!book.genres || !book.genres.length) return []
+  return books.filter(b =>
+    b.id !== book.id &&
+    b.genres?.some(g => book.genres.includes(g))
+  ).slice(0, 4)
+})
+
+const genreIcon = genre => {
+  const icons = {
+    Crime: 'tabler-fingerprint',
+    Erotik: 'tabler-bed',
+    Fantasy: 'tabler-paw',
+    History: 'tabler-swords',
+    Horror: 'tabler-ghost-2',
+    Humor: 'tabler-mood-xd',
+    Romance: 'tabler-hearts',
+    ScienceFiction: 'tabler-ufo',
+    Contemporary: 'tabler-building-skyscraper',
+    Abenteuer: 'tabler-compass',
+  }
+  return icons[genre] || 'tabler-book'
 }
-</style>
+</script>