Genre Datenbank für Testzwecke im Frontend (statisch)

src/components/genredatenbank.js

@@ -1,93 +1,72 @@
-export const books = [
+export const genres = [
   {
-    id: 1,
+    value: 'Abenteuer',
-    title: 'Rich Dad Poor Dad',
+    icon: {
-    description: 'Ein Buch über finanzielle Bildung und Investitionen.',
+      icon: 'tabler-compass',
-    image: 'https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg',
+      size: '28',
-    fieberkurve: [
+    },
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-    ],
   },
   {
-    id: 2,
+    value: 'Contemporary',
-    title: 'Harry Potter und der Stein der Weisen',
+    icon: {
-    description: 'Der erste Teil der magischen Harry-Potter-Reihe.',
+      icon: 'tabler-building-skyscraper',
-    image: 'https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg',
+      size: '28',
-    fieberkurve: [
+    },
-      { value: 5 },
-      { value: 2 },
-      { value: 7 },
-      { value: 3 },
-      { value: 5 },
-    ],
   },
   {
-    id: 3,
+    value: 'Crime',
-    title: 'Der Herr der Ringe',
+    icon: {
-    description: 'Ein episches Fantasy-Abenteuer von J.R.R. Tolkien.',
+      icon: 'tabler-fingerprint',
-    image: 'https://m.media-amazon.com/images/I/91zbi9M+mKL._AC_UF1000,1000_QL80_.jpg',
+      size: '28',
-    fieberkurve: [
+    },
-      { value: 5 },
-      { value: 4 },
-      { value: 6 },
-      { value: 4 },
-      { value: 2 },
-    ],
   },
   {
-    id: 4,
+    value: 'Erotik',
-    title: 'Die Tribute von Panem',
+    icon: {
-    description: 'Ein dystopischer Roman über den Kampf ums Überleben.',
+      icon: 'tabler-bed',
-    image: 'https://m.media-amazon.com/images/I/61JfGcL2ljL._AC_UF1000,1000_QL80_.jpg',
+      size: '28',
-    fieberkurve: [
+    },
-      { value: 4 },
-      { value: 7 },
-      { value: 4 },
-      { value: 3 },
-      { value: 5 },
-    ],
   },
   {
-    id: 5,
+    value: 'Fantasy',
-    title: 'Game of Thrones',
+    icon: {
-    description: 'Der Auftakt zur epischen Saga von George R.R. Martin.',
+      icon: 'tabler-paw',
-    image: 'https://m.media-amazon.com/images/I/91L2Dhn2xBL._AC_UF1000,1000_QL80_.jpg',
+      size: '28',
-    fieberkurve: [
+    },
-      { value: 5 },
-      { value: 2 },
-      { value: 7 },
-      { value: 3 },
-      { value: 5 },
-    ],
   },
   {
-    id: 6,
+    value: 'History',
-    title: '1984',
+    icon: {
-    description: 'Ein dystopischer Klassiker von George Orwell.',
+      icon: 'tabler-swords',
-    image: 'https://m.media-amazon.com/images/I/71kxa1-0mfL.jpg',
+      size: '28',
-    fieberkurve: [
+    },
-      { value: 5 },
-      { value: 2 },
-      { value: 4 },
-      { value: 4 },
-      { value: 5 },
-    ],
   },
   {
-    id: 7,
+    value: 'Horror',
-    title: 'Sakrileg - The Da Vinci Code',
+    icon: {
-    description: 'Ein spannender Thriller von Dan Brown.',
+      icon: 'tabler-ghost-2',
-    image: 'https://m.media-amazon.com/images/I/81Q9NhedqgL.jpg',
+      size: '28',
-    fieberkurve: [
+    },
-      { value: 1 },
+  },
-      { value: 7 },
+  {
-      { value: 7 },
+    value: 'Humor',
-      { value: 3 },
+    icon: {
-      { value: 1 },
+      icon: 'tabler-mood-xd',
-    ],
+      size: '28',
+    },
+  },
+  {
+    value: 'Romance',
+    icon: {
+      icon: 'tabler-hearts',
+      size: '28',
+    },
+  },
+  {
+    value: 'ScienceFiction',
+    icon: {
+      icon: 'tabler-ufo',
+      size: '28',
+    },
   },
 ]

src/pages/genredatenbank.vue

@@ -1,28 +1,52 @@
 <script setup>
-import { books } from '@/components/buecherdatenbank'; // Importiere die Bücher-Datenbank
+import { genres } from '@/components/genredatenbank' // Importiere die Genres-Datenbank
-import Fieberkurve from "@/components/Fieberkurve.vue";
+
+// Erzeuge eine neue Datenstruktur mit IDs
+const tableData = genres.map((genre, index) => ({
+  id: index + 1, // Füge eine ID hinzu
+  name: genre.value, // Nutze den "value"-Schlüssel für den Namen
+  icon: genre.icon.icon, // Icon-Daten
+  iconSize: genre.icon.size, // Icon-Größe
+}))
+
+// Definiere die Header der Tabelle
+const headers = [
+  {
+    title: 'ID',
+    key: 'id',
+    sortable: true,
+  },
+  {
+    title: 'Genre-Name',
+    key: 'name',
+    sortable: true,
+  },
+  {
+    title: 'Icon',
+    key: 'icon',
+    sortable: false,
+  },
+]
 </script>
 
 <template>
-  <h2>Bücherdatenbank:</h2>
+  <h2>Genredatenbank:</h2>
-  <p>(Alle statisch angelegte Testbücher in "buecherdatenbank.js")</p>
+  <p>(Alle statisch angelegten Genres in "genredatenbank.js")</p>
   <hr>
   <br>
-  <VRow>
-    <VCol
-      v-for="book in books"
-      :key="book.id"
-      sm="6"
-      cols="12"
-    >
-      id: {{ book.id }} <br>
-      title: {{ book.title }} <br>
-      description: {{ book.description }} <br>
-      image: {{ book.image }} <br>
-      fieberkurve: {{ book.fieberkurve }} <br>
 
-    </VCol>
+  <!-- Data Table - Dense -->
-  </VRow>
+  <VDataTable
+    :headers="headers"
+    :items="tableData"
+    density="compact"
+    :items-per-page="10"
+  >
+    <!-- Custom Slot für Icons -->
+    <template #item.icon="{ item }">
+      <span :class="item.icon" :style="{ fontSize: `${item.iconSize}px` }"></span>
+    </template>
+  </VDataTable>
 </template>
 
 <style scoped lang="scss">