Bücherdatenbank für Testzwecke eigebunden (statische Bücher)

components.d.ts

@@ -26,6 +26,7 @@ declare module 'vue' {
     AppStepper: typeof import('./src/@core/components/AppStepper.vue')['default']
     AppTextarea: typeof import('./src/@core/components/app-form-elements/AppTextarea.vue')['default']
     AppTextField: typeof import('./src/@core/components/app-form-elements/AppTextField.vue')['default']
+    Buecherdatenbank: typeof import('./src/pages/buecherdatenbank.vue')['default']
     BuyNow: typeof import('./src/@core/components/BuyNow.vue')['default']
     CardAddEditDialog: typeof import('./src/components/dialogs/CardAddEditDialog.vue')['default']
     CardStatisticsHorizontal: typeof import('./src/@core/components/cards/CardStatisticsHorizontal.vue')['default']

src/pages/buecherdatenbank.vue

@@ -1,100 +1,68 @@
 <script setup>
-export const books = [
+import { books } from '@/components/buecherdatenbank' // Importiere die Bücher-Datenbank
+import Fieberkurve from "@/components/Fieberkurve.vue"
+
+// Erzeuge die Datenstruktur für die Tabelle
+const tableData = books.map(book => ({
+  id: book.id,
+  title: book.title,
+  description: book.description,
+  image: book.image,
+  fieberkurve: book.fieberkurve,
+}))
+
+// Definiere die Header der Tabelle
+const headers = [
   {
-    id: 1,
+    title: 'ID',
-    title: 'Rich Dad Poor Dad',
+    key: 'id',
-    description: 'Ein Buch über finanzielle Bildung und Investitionen.',
+    sortable: true,
-    image: 'https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg',
-    fieberkurve: [
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-    ],
   },
   {
-    id: 2,
+    title: 'Titel',
-    title: 'Harry Potter und der Stein der Weisen',
+    key: 'title',
-    description: 'Der erste Teil der magischen Harry-Potter-Reihe.',
+    sortable: true,
-    image: 'https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg',
-    fieberkurve: [
-      { value: 5 },
-      { value: 2 },
-      { value: 7 },
-      { value: 3 },
-      { value: 5 },
-    ],
   },
   {
-    id: 3,
+    title: 'Beschreibung',
-    title: 'Der Herr der Ringe',
+    key: 'description',
-    description: 'Ein episches Fantasy-Abenteuer von J.R.R. Tolkien.',
+    sortable: false,
-    image: 'https://m.media-amazon.com/images/I/91zbi9M+mKL._AC_UF1000,1000_QL80_.jpg',
-    fieberkurve: [
-      { value: 5 },
-      { value: 4 },
-      { value: 6 },
-      { value: 4 },
-      { value: 2 },
-    ],
   },
   {
-    id: 4,
+    title: 'Bild',
-    title: 'Die Tribute von Panem',
+    key: 'image',
-    description: 'Ein dystopischer Roman über den Kampf ums Überleben.',
+    sortable: false,
-    image: 'https://m.media-amazon.com/images/I/61JfGcL2ljL._AC_UF1000,1000_QL80_.jpg',
-    fieberkurve: [
-      { value: 4 },
-      { value: 7 },
-      { value: 4 },
-      { value: 3 },
-      { value: 5 },
-    ],
   },
   {
-    id: 5,
+    title: 'Fieberkurve',
-    title: 'Game of Thrones',
+    key: 'fieberkurve',
-    description: 'Der Auftakt zur epischen Saga von George R.R. Martin.',
+    sortable: false,
-    image: 'https://m.media-amazon.com/images/I/91L2Dhn2xBL._AC_UF1000,1000_QL80_.jpg',
-    fieberkurve: [
-      { value: 5 },
-      { value: 2 },
-      { value: 7 },
-      { value: 3 },
-      { value: 5 },
-    ],
   },
-  {
+]
-    id: 6,
-    title: '1984',
-    description: 'Ein dystopischer Klassiker von George Orwell.',
-    image: 'https://m.media-amazon.com/images/I/71kxa1-0mfL.jpg',
-    fieberkurve: [
-      { value: 5 },
-      { value: 2 },
-      { value: 4 },
-      { value: 4 },
-      { value: 5 },
-    ],
-  },
-  {
-    id: 7,
-    title: 'Sakrileg - The Da Vinci Code',
-    description: 'Ein spannender Thriller von Dan Brown.',
-    image: 'https://m.media-amazon.com/images/I/81Q9NhedqgL.jpg',
-    fieberkurve: [
-      { value: 1 },
-      { value: 7 },
-      { value: 7 },
-      { value: 3 },
-      { value: 1 },
-    ],
-  },
-];
 </script>
 
 <template>
+  <h2>Bücherdatenbank:</h2>
+  <p>(Alle statisch angelegten Testbücher in "buecherdatenbank.js")</p>
+  <hr>
+
+  <!-- Data Table - Dense -->
+  <VDataTable
+    :headers="headers"
+    :items="tableData"
+    density="compact"
+    :items-per-page="5"
+  >
+    <!-- Custom Slot für Bild -->
+    <template #item.image="{ item }">
+      <img :src="item.image" alt="Buchbild" style="width: 50px; height: auto;" />
+    </template>
+
+    <!-- Custom Slot für Fieberkurve -->
+    <template #item.fieberkurve="{ item }">
+      <Fieberkurve :data="item.fieberkurve" />
+    </template>
+  </VDataTable>
 </template>
 
 <style scoped lang="scss">