From 2818ec4a605ec8f6949c27469e2e8f5c89558ec0 Mon Sep 17 00:00:00 2001
From: MCMichinator <michi.tomaschko@gmail.com>
Date: Mon, 7 Apr 2025 05:23:38 +0200
Subject: [PATCH] =?UTF-8?q?buchdetailseite:=20Statisch=20zu=20dynamischer?=
 =?UTF-8?q?=20Seite=20verwandelt=20mittels=20id=C2=B4s=20(kann=20jetzt=20a?=
 =?UTF-8?q?ufgerufen=20werden=20=C3=BCber=20B=C3=BCchersuche)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Buchkarten.vue      |   3 +-
 src/navigation/vertical/index.js   |   6 +-
 src/pages/buchdetailseite.vue      | 183 -----------------------------
 src/pages/buchdetailseite/[id].vue | 102 ++++++++++++++++
 typed-router.d.ts                  |   2 +-
 5 files changed, 108 insertions(+), 188 deletions(-)
 delete mode 100644 src/pages/buchdetailseite.vue
 create mode 100644 src/pages/buchdetailseite/[id].vue

diff --git a/src/components/Buchkarten.vue b/src/components/Buchkarten.vue
index f99d589..aaace91 100644
--- a/src/components/Buchkarten.vue
+++ b/src/components/Buchkarten.vue
@@ -6,7 +6,8 @@
       sm="6"
       md="4"
     >
-      <RouterLink :to="`/buchdetailseite/${book.id}`" class="buchkarten-router-link">
+<!--      <RouterLink :to="`/buchdetailseite/${book.id}`" class="buchkarten-router-link">-->
+        <RouterLink :to="`buchdetailseite/${book.id}`">
         <VCard class="pa-3 hover-card" elevation="2">
           <div class="buchkarten-grid">
             <!-- Cover links, volle Höhe -->
diff --git a/src/navigation/vertical/index.js b/src/navigation/vertical/index.js
index e1b5324..3a38bdb 100644
--- a/src/navigation/vertical/index.js
+++ b/src/navigation/vertical/index.js
@@ -29,11 +29,11 @@ export default [
     icon: { icon: 'tabler-timeline' },
   },
   { heading: 'Buch' },
-  {
+  /*{
     title: 'Buch Detailseite',
-    to: { name: 'buchdetailseite' },
+    to: { name: '1' },
     icon: { icon: 'tabler-list-details' },
-  },
+  },*/
   { heading: 'Datenbank' },
   {
     title: 'Bücher',
diff --git a/src/pages/buchdetailseite.vue b/src/pages/buchdetailseite.vue
deleted file mode 100644
index 7632833..0000000
--- a/src/pages/buchdetailseite.vue
+++ /dev/null
@@ -1,183 +0,0 @@
-<!--<script setup>
-import harryPotter from "@images/harry_potter_stein_weisen_rowling.jpg";
-</script>
-
-<template>
-  <VRow class="match-height">
-    <VCol
-      cols="12"
-      md="12"
-    >
-      <VCard title="Detailseite">
-        <VImg
-          width="200px"
-          height="300px"
-          :src="harryPotter"
-        />
-      </VCard>
-    </VCol>
-  </VRow>
-</template>
-
-<style scoped lang="scss">
-
-</style>-->
-
-
-
-
-<script setup>
-import { ref } from "vue";
-import Fieberkurve from "@/components/Fieberkurve.vue";
-// import HarryPotterCover from "@images/harry_potter_stein_weisen_rowling.jpg";
-
-// Beispiel-Daten für das Buch
-const book = ref({
-  title: "Rich Dad Poor Dad",
-  subtitle: "Was die Reichen ihren Kindern über Geld beibringen",
-  authors: [{ name: "Robert T. Kiyosaki" }],
-  rating: 4.5,
-  reviews: 11234,
-  blurb:
-    "Warum bleiben die Reichen reich und die Armen arm? Weil die Reichen ihren Kindern beibringen, wie sie mit Geld umgehen müssen, und die anderen nicht! Dieses Buch zeigt, wie man finanzielle Freiheit erreichen kann.",
-  genres: ["Finanzen", "Bildung", "Motivation"],
-  publishers: ["Plassen Verlag"],
-  pageCount: 240,
-  language: "Deutsch",
-  publishedDate: "2014-12",
-  isbn: "9783898798822",
-  format: "Taschenbuch",
-  coverUrl: "https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg",
-  purchaseLinks: [
-    {
-      name: "Amazon",
-      url: "https://www.amazon.de",
-      logo: "https://upload.wikimedia.org/wikipedia/commons/a/a9/Amazon_logo.svg",
-    },
-    {
-      name: "Thalia",
-      url: "https://www.thalia.de",
-      logo: "https://upload.wikimedia.org/wikipedia/commons/8/87/Thalia_Logo.svg",
-    },
-    {
-      name: "Hugendubel",
-      url: "https://www.hugendubel.de",
-      logo: "https://upload.wikimedia.org/wikipedia/commons/4/47/Hugendubel_Logo.svg",
-    },
-  ],
-});
-</script>
-
-<template>
-  <VContainer>
-    <!-- Hauptkarte für Buchdetails -->
-<!--    <VCard
-      title="Buchdetails: {{ book.title }}"
-      subtitle="{{ book.subtitle }}"
-      class="mb-6"
-    >-->
-    <VCard
-      title="Buchdetails"
-      class="mb-6"
-      >
-      <VRow>
-        <!-- Buchcover -->
-        <VCol cols="12" md="4" class="text-center">
-          <VImg
-            :src="book.coverUrl"
-            alt="Buchcover"
-            max-height="400px"
-            max-width="300px"
-          />
-        </VCol>
-
-        <!-- Buchinformationen -->
-        <VCol cols="12" md="8">
-          <h2 class="mb-1">{{ book.title }}</h2>
-          <h4 class="text-muted mb-4">{{ book.subtitle }}</h4>
-          <h5>von {{ book.authors.map(author => author.name).join(", ") }}</h5>
-
-
-          <!-- Statische Fieberkurve mit vordefinierten Werten -->
-          <Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 4 }, { value: 1 }]" />
-
-          <!-- Bewertung -->
-          <div class="d-flex align-center mb-3">
-            <VRating
-              v-model="book.rating"
-              readonly
-              length="5"
-              class="mr-2"
-              color="yellow"
-            />
-            <span>({{ book.reviews }} Bewertungen)</span>
-          </div>
-
-          <!-- Beschreibung -->
-          <p>{{ book.blurb }}</p>
-
-          <!-- Zusätzliche Details -->
-          <ul class="list-unstyled">
-            <li><strong>Genres:</strong> {{ book.genres.join(", ") }}</li>
-            <li><strong>Verlag:</strong> {{ book.publishers.join(", ") }}</li>
-            <li><strong>Seitenanzahl:</strong> {{ book.pageCount }}</li>
-            <li><strong>Sprache:</strong> {{ book.language }}</li>
-            <li><strong>Veröffentlicht:</strong> {{ book.publishedDate }}</li>
-            <li><strong>ISBN:</strong> {{ book.isbn }}</li>
-            <li><strong>Format:</strong> {{ book.format }}</li>
-          </ul>
-
-          <!-- Kaufmöglichkeiten -->
-          <div class="mt-4">
-            <h5>Kaufen bei:</h5>
-            <div class="d-flex flex-wrap">
-              <VBtn
-                v-for="link in book.purchaseLinks"
-                :key="link.name"
-                :href="link.url"
-                target="_blank"
-                class="ma-2"
-                outlined
-              >
-                <VImg :src="link.logo" max-width="24px" class="mr-2" /> {{ link.name }}
-              </VBtn>
-            </div>
-          </div>
-          <br>
-        </VCol>
-      </VRow>
-    </VCard>
-  </VContainer>
-</template>
-
-<style scoped>
-h2 {
-  font-size: 2rem !important;
-  font-weight: bold !important;
-}
-
-h4 {
-  font-size: 1.5rem !important;
-  margin-bottom: 1rem !important;
-}
-
-p {
-  font-size: 1rem !important;
-  line-height: 1.5 !important;
-}
-
-.VImg {
-  margin-right: 8px !important;
-}
-
-.VBtn {
-  display: flex !important;
-  align-items: center !important;
-  font-size: 0.9rem !important;
-}
-
-ul {
-  list-style-type: none !important;
-  padding: 0 !important;
-}
-</style>
diff --git a/src/pages/buchdetailseite/[id].vue b/src/pages/buchdetailseite/[id].vue
new file mode 100644
index 0000000..11c0126
--- /dev/null
+++ b/src/pages/buchdetailseite/[id].vue
@@ -0,0 +1,102 @@
+<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>
+
+      <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>
+
+          <VCardText>
+            <div v-if="book.authors?.length" class="mb-2">
+              <strong>Autor(en):</strong>
+              {{ book.authors.map(a => a.name).join(', ') }}
+            </div>
+
+            <!-- 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>
+
+            <!-- Fieberkurve -->
+            <Fieberkurve :is-static="true" :default-values="book.fieberkurve" :hide-text="true" class="mb-4" />
+
+            <!-- Beschreibung -->
+            <div class="mb-4">
+              <strong>Beschreibung:</strong>
+              <p class="mt-1">{{ book.blurb }}</p>
+            </div>
+
+            <!-- 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>
+
+            <!-- Shoplink (Platzhalter) -->
+            <div class="mt-4">
+              <VBtn color="success" variant="flat">
+                <VIcon icon="tabler-shopping-cart" class="me-2" />
+                Bei Amazon suchen
+              </VBtn>
+            </div>
+
+          </VCardText>
+        </VCard>
+      </VCol>
+    </VRow>
+  </VContainer>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { books } from '@/components/buecherdatenbank.js'
+import { genres as genreIcons } from '@/components/genredatenbank.js'
+import Fieberkurve from '@/components/Fieberkurve.vue'
+
+const route = useRoute()
+const bookId = parseInt(route.params.id)
+const book = books.find(b => b.id === bookId) || {}
+
+const genreIconMap = genreIcons.reduce((acc, g) => {
+  acc[g.value] = g.icon
+  return acc
+}, {})
+</script>
+
+<style scoped>
+p {
+  line-height: 1.6;
+}
+</style>
diff --git a/typed-router.d.ts b/typed-router.d.ts
index 3653883..8039bb1 100644
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@@ -41,7 +41,7 @@ declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
     'root': RouteRecordInfo<'root', '/', Record<never, never>, Record<never, never>>,
     '$error': RouteRecordInfo<'$error', '/:error(.*)', { error: ParamValue<true> }, { error: ParamValue<false> }>,
-    'buchdetailseite': RouteRecordInfo<'buchdetailseite', '/buchdetailseite', Record<never, never>, Record<never, never>>,
+    'buchdetailseite-id': RouteRecordInfo<'buchdetailseite-id', '/buchdetailseite/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     'buecher-eintragen': RouteRecordInfo<'buecher-eintragen', '/buecher-eintragen', Record<never, never>, Record<never, never>>,
     'buecherdatenbank': RouteRecordInfo<'buecherdatenbank', '/buecherdatenbank', Record<never, never>, Record<never, never>>,
     'buechersuche': RouteRecordInfo<'buechersuche', '/buechersuche', Record<never, never>, Record<never, never>>,