From 4077a2806ca5e54370cc40c3a0c99785335b30d5 Mon Sep 17 00:00:00 2001
From: MCMichinator <michi.tomaschko@gmail.com>
Date: Wed, 2 Apr 2025 20:16:21 +0200
Subject: [PATCH] =?UTF-8?q?Neue=20B=C3=BCcherdetailseite?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/buchdetailseite.vue | 161 +++++++++++++++++++++++++++++++++-
 1 file changed, 160 insertions(+), 1 deletion(-)

diff --git a/src/pages/buchdetailseite.vue b/src/pages/buchdetailseite.vue
index 5338bcc..7632833 100644
--- a/src/pages/buchdetailseite.vue
+++ b/src/pages/buchdetailseite.vue
@@ -1,4 +1,4 @@
-<script setup>
+<!--<script setup>
 import harryPotter from "@images/harry_potter_stein_weisen_rowling.jpg";
 </script>
 
@@ -21,4 +21,163 @@ import harryPotter from "@images/harry_potter_stein_weisen_rowling.jpg";
 
 <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>