Neue Büchersuche Seite

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/components/Fieberkurve.vue

@@ -1,7 +1,292 @@
+<template>
+  <div>
+    <div class="grid-container">
+      <!-- Linker Text -->
+      <div v-if="!hideText" class="item1">
+        <div class="text-pair">anspruchsvoll</div>
+        <div class="text-pair">lustig</div>
+        <div class="text-pair">spannend</div>
+        <div class="text-pair">brutal</div>
+        <div class="text-pair">sittsam</div>
+      </div>
+
+      <!-- Fieberkurve und Punkte -->
+      <div class="item2">
+        <div class="FieberkurveGesamt">
+          <div
+            v-for="(slider, index) in sliders"
+            :key="index"
+            class="Fieberkurve"
+            :class="{ active: slider.clicked }"
+          >
+            <div v-for="i in 7" :key="i" class="kreis" />
+            <input
+              v-model="slider.value"
+              type="range"
+              min="1"
+              max="7"
+              class="slider-bg"
+              :class="{ 'bg-clicked': slider.clicked }"
+              :disabled="isStatic"
+            />
+            <input
+              v-model="slider.value"
+              type="range"
+              min="1"
+              max="7"
+              class="slider"
+              :class="{ clicked: slider.clicked }"
+              :disabled="isStatic"
+              @input="updateLine"
+              @click="handleClick(index)"
+            />
+          </div>
+
+          <svg class="line-svg">
+            <polyline
+              :points="linePoints"
+              :class="{ clicked: sliders.some(slider => slider.clicked) }"
+              fill="none"
+              stroke-width="3"
+            />
+          </svg>
+        </div>
+      </div>
+
+      <!-- Rechter Text -->
+      <div v-if="!hideText" class="item3">
+        <div class="text-pair">leseleicht</div>
+        <div class="text-pair">traurig</div>
+        <div class="text-pair">entspannend</div>
+        <div class="text-pair">gewaltfrei</div>
+        <div class="text-pair">erotisch</div>
+      </div>
+    </div>
+
+    <!-- Reset Button -->
+    <div v-if="!isStatic" class="reset-container">
+      <button @click="resetSliders">Fieberkurve zurücksetzen</button>
+    </div>
+  </div>
+</template>
+
 <script setup>
-import { ref, watch, defineProps, defineEmits } from "vue"
+import { ref, computed, watch, onMounted, defineProps, defineEmits } from "vue"
 
 const props = defineProps({
+  isStatic: { type: Boolean, default: false },
+  defaultValues: {
+    type: Array,
+    default: () => [
+      { value: 4, clicked: false },
+      { value: 4, clicked: false },
+      { value: 4, clicked: false },
+      { value: 4, clicked: false },
+      { value: 4, clicked: false },
+    ],
+  },
+  hideText: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(["update:values", "filter-by-row"])
+
+defineExpose({ resetSliders })
+
+const sliders = ref([...props.defaultValues])
+
+const linePoints = computed(() => {
+  const Breite = 240
+  const Hoehe = 130
+  const Kreis = 20
+  return sliders.value
+    .map((slider, index) => {
+      const x = (slider.value - 1) * ((Breite - Kreis) / 6) + Kreis / 2
+      const y = index * ((Hoehe - Kreis) / 4) + Kreis / 2
+      return `${x},${y}`
+    })
+    .join(" ")
+})
+
+watch(
+  () => props.defaultValues,
+  newValues => {
+    sliders.value = newValues.map(val => ({ ...val }))
+  },
+  { deep: true },
+)
+
+watch(
+  sliders,
+  () => {
+    emit("update:values", sliders.value.map(slider => slider.value))
+  },
+  { deep: true },
+)
+
+function resetSliders() {
+  sliders.value.forEach(slider => {
+    slider.value = 4
+    slider.clicked = false
+  })
+}
+
+function handleClick(index) {
+  sliders.value[index].clicked = true
+  emit("filter-by-row", { rowIndex: index, value: sliders.value[index].value })
+}
+
+function updateLine() {
+  // Optional: Linien-Update
+}
+
+onMounted(() => {
+  // Initial
+})
+</script>
+
+<style scoped>
+.grid-container {
+  display: grid;
+  grid-template-areas: "txtLinks Fieberkurve txtRechts";
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+}
+
+.item1,
+.item3 {
+  background: transparent;
+}
+
+.text-pair {
+  display: flex;
+  align-items: center;
+  height: 26px;
+}
+
+.FieberkurveGesamt {
+  height: 130px;
+  width: 240px;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: space-between;
+}
+
+.Fieberkurve {
+  position: relative;
+  width: 240px;
+  display: flex;
+  justify-content: space-between;
+  background-color: transparent;
+}
+
+.Fieberkurve.active {
+  background-color: transparent;
+}
+
+.kreis {
+  z-index: 2;
+  width: 20px;
+  height: 20px;
+  border-radius: 100%;
+  background: #ceccccdb;
+  box-shadow: 2px 12px 27px -13px rgba(0, 0, 0, 0.48);
+}
+
+.slider-bg {
+  z-index: 1;
+  width: 100%;
+  position: absolute;
+  top: calc(50% - 4px);
+  height: 8px;
+  -webkit-appearance: none;
+  outline: none;
+  border-radius: 8px;
+  cursor: pointer;
+  background: #d3d3d3;
+  pointer-events: none;
+}
+
+.slider-bg.bg-clicked {
+  background: #e0e0e0;
+}
+
+.slider {
+  z-index: 3;
+  width: 100%;
+  position: absolute;
+  top: calc(50% - 4px);
+  height: 8px;
+  -webkit-appearance: none;
+  outline: none;
+  border-radius: 8px;
+  cursor: pointer;
+  background: transparent;
+}
+
+.slider.clicked::-webkit-slider-thumb {
+  //background-color: rgb(var(--v-theme-error));
+  background-color: #f45246;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  background: rgba(251, 194, 194, 0.86);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.line-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.line-svg polyline {
+  stroke: rgba(251, 194, 194, 0.86);
+  //background-image: linear-gradient(to bottom, #f9f9f9 0, #f5f5f5 100%);
+  transition: stroke 0.3s ease;
+}
+
+.line-svg polyline.clicked {
+  //stroke: rgb(var(--v-theme-error));
+  stroke: #fa574d;
+}
+
+.reset-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+}
+</style>
+
+
+
+
+
+
+
+
+
+
+
+
+<!-- Alter Code Michi von Fieberkurve 19.01.2025 -->
+
+<!--
+  <script setup>
+  import { ref, watch, defineProps, defineEmits } from "vue"
+
+  const props = defineProps({
   showResetButton: {
   type: Boolean,
   required: true,
@@ -10,38 +295,38 @@ const props = defineProps({
   type: Boolean,
   required: true,
   },
-})
+  })
 
-/*
+  /*
-const emit = defineEmits(['buttonClicked'])
+  const emit = defineEmits(['buttonClicked'])
 
-const emitButtonClick = () => {
+  const emitButtonClick = () => {
   emit('buttonClicked', 1)
-}
+  }
-*/
+  */
 
-const schwierigkeit = ref(4)
+  const schwierigkeit = ref(4)
-const stimmung = ref(4)
+  const stimmung = ref(4)
-const spannung = ref(4)
+  const spannung = ref(4)
-const gewalt = ref(4)
+  const gewalt = ref(4)
-const erotik = ref(4)
+  const erotik = ref(4)
 
-const ColorRow1 = ref('#a8a6a6')
+  const ColorRow1 = ref('#a8a6a6')
-const ColorRow2 = ref('#a8a6a6')
+  const ColorRow2 = ref('#a8a6a6')
-const ColorRow3 = ref('#a8a6a6')
+  const ColorRow3 = ref('#a8a6a6')
-const ColorRow4 = ref('#a8a6a6')
+  const ColorRow4 = ref('#a8a6a6')
-const ColorRow5 = ref('#a8a6a6')
+  const ColorRow5 = ref('#a8a6a6')
 
-const isRow1Active = ref(false)
+  const isRow1Active = ref(false)
-const isRow2Active = ref(false)
+  const isRow2Active = ref(false)
-const isRow3Active = ref(false)
+  const isRow3Active = ref(false)
-const isRow4Active = ref(false)
+  const isRow4Active = ref(false)
-const isRow5Active = ref(false)
+  const isRow5Active = ref(false)
 
-const isResetButtonPressed = ref(false)
+  const isResetButtonPressed = ref(false)
-const firstClick = ref(false)
+  const firstClick = ref(false)
 
-function FevercurveIsClicked(RowValue) {
+  function FevercurveIsClicked(RowValue) {
   isResetButtonPressed.value = true
   switch (RowValue) {
   case "schwierigkeit":
@@ -76,10 +361,10 @@ function FevercurveIsClicked(RowValue) {
   rowFevercurveConnectors()
   }
   firstClick.value = true
-}
+  }
 
 
-function resetFevercurve() {
+  function resetFevercurve() {
   if (!isResetButtonPressed.value) {
   return
   }
@@ -107,17 +392,17 @@ function resetFevercurve() {
   erotik.value = 4
 
   clearFevercurveConnectors()
-}
+  }
 
-function clearFevercurveConnectors() {
+  function clearFevercurveConnectors() {
   console.log("Striche werden gecleart")
 
   let c = document.getElementById("myCanvas")
   let ctx = c.getContext("2d")
   ctx.clearRect(0, 0, c.width, c.height)
-}
+  }
 
-function rowFevercurveConnectors() {
+  function rowFevercurveConnectors() {
   console.log("Funktion wird aufgerufen")
 
   let c = document.getElementById("myCanvas")
@@ -146,19 +431,19 @@ function rowFevercurveConnectors() {
   ctx.lineTo(((erotik.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((5 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
 
   ctx.stroke()
-}
+  }
 
 
 
 
-watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
+  watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
   if (isResetButtonPressed.value){
   rowFevercurveConnectors()
   }
-})
+  })
-</script>
+  </script>
 
-<template>
+  <template>
   <div>
   <div class="grid-container">
   <div
@@ -172,9 +457,9 @@ watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
   sittsam
   </div>
   <div class="item2">
-        <!--      Slider -->
+  &lt;!&ndash;      Slider &ndash;&gt;
   <div style="position: relative; height: 120px">
-          <!--              Fieberkurve -->
+  &lt;!&ndash;              Fieberkurve &ndash;&gt;
   <canvas
   id="myCanvas"
   width="240"
@@ -209,7 +494,7 @@ watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
   <div class="kreis" />
   <div class="kreis" />
   </div>
-            <!--                :style="{ backgroundColor: vuetifyTheme.current.value.colors.primary }" -->
+  &lt;!&ndash;                :style="{ backgroundColor: vuetifyTheme.current.value.colors.primary }" &ndash;&gt;
 
 
   <div
@@ -326,8 +611,8 @@ watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
   erotisch
   </div>
   </div>
-    <!--              ENDE FIEBERKURVE -->
+  &lt;!&ndash;              ENDE FIEBERKURVE &ndash;&gt;
-    <!--              Button Fieberkurve zurücksetzen -->
+  &lt;!&ndash;              Button Fieberkurve zurücksetzen &ndash;&gt;
   <div
   v-if="props.showResetButton"
   style="
@@ -344,47 +629,47 @@ watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
   </VBtn>
   </div>
   </div>
-</template>
+  </template>
 
-<style scoped lang="scss">
+  <style scoped lang="scss">
-//Grid Layout
+  //Grid Layout
-.item1 {
+  .item1 {
   grid-area: txtLinks;
   background: transparent !important;
-}
+  }
 
-.item2 {
+  .item2 {
   grid-area: Fieberkurve;
   background: transparent !important;
-}
+  }
 
-.item3 {
+  .item3 {
   grid-area: txtRechts;
   background: transparent !important;
-}
+  }
 
-.grid-container {
+  .grid-container {
   display: grid;
   grid-template-areas: 'txtLinks Fieberkurve txtRechts';
   gap: 10px;
   justify-content: center;
   line-height: 26px;
-}
+  }
 
-.grid-container > div {
+  .grid-container > div {
   background-color: rgba(255, 255, 255, 0.8);
-}
+  }
 
-//Grid Layout END
+  //Grid Layout END
 
 
-canvas {
+  canvas {
   z-index: 2;
   //border:1px solid #000000;
   position: absolute;
-}
+  }
 
-.FieberkurveGesamt {
+  .FieberkurveGesamt {
   height: 130px;
   width: 240px;
   position: relative;
@@ -392,9 +677,9 @@ canvas {
   flex-wrap: wrap;
   align-content: space-between;
 
-}
+  }
 
-.Fieberkurve {
+  .Fieberkurve {
   position: relative;
   width: 240px;
   display: flex;
@@ -402,20 +687,20 @@ canvas {
   //background: #27c21f;
   //padding: ;
   border-radius: 25px;
-}
+  }
 
-.kreis {
+  .kreis {
   z-index: 1;
   width: 20px;
   height: 20px;
   border-radius: 100%;
   background: #CECCCCDB;
   box-shadow: 2px 12px 27px -13px rgba(0,0,0,0.48);
-}
+  }
 
 
 
-.slider {
+  .slider {
   z-index: 3;
   width: 100%;
   position: absolute;
@@ -431,21 +716,21 @@ canvas {
   //border: 5px solid rgba(232, 64, 64, 0.83);
   border-radius: 8px;
   cursor: pointer;
-}
+  }
 
-.slider-track {
+  .slider-track {
   position: absolute;
   width: 100%;
   border-radius: 8px;
   //background: #bb2626;
   height: 10px;
   margin-top: 5px;
-}
+  }
 
 
-/*  Kreis  */
+  /*  Kreis  */
-/* for chrome/safari */
+  /* for chrome/safari */
-.slider::-webkit-slider-thumb {
+  .slider::-webkit-slider-thumb {
   //z-index: 4;
   -webkit-appearance: none;
   appearance: none;
@@ -455,15 +740,16 @@ canvas {
   cursor: pointer;
   //border: 5px solid red;
   border-radius: 100%;
-}
+  }
 
-/* for firefox */
+  /* for firefox */
-.slider::-moz-range-thumb {
+  .slider::-moz-range-thumb {
   width: 20px;
   height: 20px;
   background: #000;
   cursor: pointer;
   //border: 5px solid lawngreen;
   border-radius: 4px;
-}
+  }
-</style>
+  </style>
+-->

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/layouts/components/Footer.vue

@@ -3,7 +3,7 @@
     <!-- 👉 Footer: left content -->
     <span class="d-flex align-center text-medium-emphasis">
       &copy;
-      {{ new Date().getFullYear() }}
+      {{ new Date().getFullYear() }} Skoutz4Success UG
 <!--      Made With
       <VIcon
         icon="tabler-heart-filled"

src/navigation/vertical/index.js

@@ -11,19 +11,39 @@ export default [
     icon: { icon: 'tabler-books' },
   },
   {
-    title: 'Fieberkurve',
+    title: 'Bücher eintragen',
+    to: { name: 'buecher-eintragen' },
+    icon: { icon: 'tabler-book-2' },
+  },
+
+  { heading: '--- TEST ABSCHNITT ---' },
+  { heading: 'Fieberkurve' },
+  {
+    title: 'Fieberkurven Varianten',
     to: { name: 'testfieberkurven' },
     icon: { icon: 'tabler-chart-dots-3' },
   },
   {
-    title: 'Detailseite',
+    title: 'Statische Fieberkurven',
+    to: { name: 'statische-fieberkurven' },
+    icon: { icon: 'tabler-timeline' },
+  },
+  { heading: 'Buch' },
+  {
+    title: 'Buch Detailseite',
     to: { name: 'buchdetailseite' },
     icon: { icon: 'tabler-list-details' },
   },
+  { heading: 'Datenbank' },
   {
-    title: 'Bücher eintragen',
+    title: 'Bücher',
-    to: { name: 'buecher-eintragen' },
+    to: { name: 'buecherdatenbank' },
-    icon: { icon: 'tabler-book-2' },
+    icon: { icon: 'tabler-books' },
+  },
+  {
+    title: 'Genre´s',
+    to: { name: 'genredatenbank' },
+    icon: { icon: 'tabler-masks-theater' },
   },
 
   /*{

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>

src/pages/buecher-eintragen.vue

@@ -86,6 +86,9 @@
                 clear-icon="tabler-x"
               />
             </VCol>
+
+
+<!--            SUCHEN BUTTON: Erscheint sobald was eigegeben wurde in die Felder Title/ISBN-->
             <VCol
               v-show="showButton"
               cols="12"
@@ -102,17 +105,29 @@
             </VCol>
 
 
+
             <VCol
               v-show="displayedBooks"
               cols="12"
             >
+              <div v-if="book">
+                Buchtitel: {{ book.title }}
+                <br>
+                Untertitel: {{ book.subtitle }}
+              </div>
+
+              <div style="color: red">
+                Buch wurde nicht gefunden? Jetzt
                 <VBtn
-                variant="text"
                   color="error"
                   @click="displayedEnterBooks"
                 >
-                Wurde dein Buch nicht gefunden? Dann trage es jetzt ein!
+                  eintragen
                 </VBtn>
+              </div>
+
+
+
             </VCol>
           </VRow>
         </VCardText>
@@ -121,7 +136,213 @@
 
 
 
+
+
+<!--      FROMULAR: BUCH EINTRAGEN -->
       <VCard
+        v-if="book"
+        v-show="showEnterBooks"
+        class="mb-6"
+        title="Trage dein Buch jetzt ein:"
+        subtitle="Alle mit * gekennzeichneten Felder sind Pflichtfelder!"
+      >
+        <VCardText>
+            <!--            Fieberkurve* -->
+<!--            <VCol cols="12">
+              <AppTextField
+                label="Fieberkurve* eingeben:"
+                placeholder="Fieberkurve"
+              />
+            </VCol>-->
+            <!-- Fieberkurve -->
+            <Fieberkurve :show-reset-button="false" :show-categories="true" class="my-4" />
+
+          <VRow>
+            <!--            Titel* -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                v-if="book"
+                v-model="book.title"
+                label="Titel eingeben:"
+                placeholder="Harry Potter und der Stein der Weisen"
+              />
+            </VCol>
+            <!--            ISBN* -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                id="isbnInput"
+                v-if="book"
+                v-model="book.isbn"
+                type="number"
+                label="ISBN* eingeben:"
+                placeholder="978-3-551-55167-7"
+                clearable
+                clear-icon="tabler-x"
+              />
+            </VCol>
+            <!--            Untertitel -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                label="Untertitel eingeben:"
+                placeholder=" "
+                v-if="book"
+                v-model="book.subtitle"
+              />
+            </VCol>
+            <!--            Genre* -> 1:n -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+<!--              ToDo: Hier muss noch Anton die Gerne einfügen-->
+              <AppCombobox
+                v-if="book"
+                v-model="book.genres"
+                chips
+                clearable
+                multiple
+                closable-chips
+                clear-icon="tabler-circle-x"
+                :items="genreItems"
+                label="Genre/s* wählen:"
+                prepend-icon="tabler-filter"
+              />
+            </VCol>
+            <!--            Autor/en* -> 1:n -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                label="Autor/en* eingeben:"
+                placeholder="J.K. Rowling"
+                v-if="book"
+                v-model="book.authors[0].name"
+              />
+            </VCol>
+            <!--            Verlag/e* -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                label="Verlag/e* eingeben:"
+                placeholder="Carlsen Verlag"
+                v-if="book"
+                v-model="book.publishers"
+              />
+            </VCol>
+            <!--            Sprache* -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                label="Sprache* eingeben:"
+                placeholder="Deutsch"
+                v-if="book"
+                v-model="book.language"
+              />
+            </VCol>
+            <!--            Seitenanzahl -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                label="Seitenanzahl eingeben:"
+                suffix="Seiten"
+                type="number"
+                placeholder="336"
+                v-if="book"
+                v-model="book.pageCount"
+              />
+            </VCol>
+            <!--            Erscheinungsdatum -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+              <AppTextField
+                label="Erscheinungsdatum eingeben:"
+                placeholder="26. Juni 1998"
+                v-if="book"
+                v-model="book.publishedDate"
+              />
+            </VCol>
+            <!--            Format* -> Taschenbuch, Hardcover, E-Book, etc. -->
+            <VCol
+              cols="12"
+              md="6"
+            >
+
+              <!--              ToDo: Hier muss noch Anton die Buch Format einfügen-->
+              <AppTextField
+                label="Format* eingeben:"
+                placeholder="Taschenbuch"
+              />
+            </VCol>
+            <!--            Kurzbeschreibung* -->
+            <VCol cols="12">
+              <span class="mb-1">Kurzbeschreibung*</span>
+              <ProductDescriptionEditor
+                placeholder="Der elfjährige Harry Potter,
+der bei seinem gehässigen Onkel Vernon, seiner Tante Petunia und seinem Cousin Dudley lebt, erfährt an seinem elften Geburtstag, dass er ein Zauberer ist. Er erhält einen Platz auf der Schule für Hexerei und Zauberei Hogwarts, wo er neue Freunde findet und in die Geheimnisse der Zauberwelt eintaucht."
+                class="border rounded"
+                v-if="book"
+                v-model="book.blurb"
+              />
+            </VCol>
+            <!--            Cover/Umschlagbild* -->
+            <VCol cols="12">
+              <!-- 👉 Cover -->
+              <!--
+                <VCardItem>
+                <template #title>
+                Buchcover hochladen
+                </template>
+                </VCardItem>
+              -->
+              <DropZone />
+            </VCol>
+
+
+            <VCol cols="12">
+              <div class="demo-space-x">
+                <VBtn color="success">
+                  Buch eintragen
+                  <VIcon
+                    end
+                    icon="tabler-device-floppy"
+                  />
+                </VBtn>
+                <VBtn color="error">
+                  Löschen
+                  <VIcon
+                    end
+                    icon="tabler-x"
+                  />
+                </VBtn>
+              </div>
+            </VCol>
+          </VRow>
+        </VCardText>
+      </VCard>
+
+
+
+      <!--      FROMULAR 2: BUCH EINTRAGEN - kein Buch gefunden -->
+      <VCard
+        v-else
         v-show="showEnterBooks"
         class="mb-6"
         title="Trage dein Buch jetzt ein:"
@@ -169,7 +390,7 @@
             >
               <AppTextField
                 label="Untertitel eingeben:"
-                placeholder=" "
+                placeholder=""
               />
             </VCol>
             <!--            Genre* -> 1:n -->
@@ -177,8 +398,8 @@
               cols="12"
               md="6"
             >
+              <!--              ToDo: Hier muss noch Anton die Gerne einfügen-->
               <AppCombobox
-                v-model="genreChips"
                 chips
                 clearable
                 multiple
@@ -225,7 +446,6 @@
               md="6"
             >
               <AppTextField
-                v-model="seitenanzahl"
                 label="Seitenanzahl eingeben:"
                 suffix="Seiten"
                 type="number"
@@ -247,6 +467,8 @@
               cols="12"
               md="6"
             >
+
+              <!--              ToDo: Hier muss noch Anton die Buch Format einfügen-->
               <AppTextField
                 label="Format* eingeben:"
                 placeholder="Taschenbuch"
@@ -296,6 +518,9 @@ der bei seinem gehässigen Onkel Vernon, seiner Tante Petunia und seinem Cousin
           </VRow>
         </VCardText>
       </VCard>
+
+
+
     </VCol>
   </VRow>
 </template>
@@ -305,6 +530,7 @@ import { ref, watch } from 'vue'
 import AppTextField from "@core/components/app-form-elements/AppTextField.vue"
 import DropZone from "@core/components/DropZone.vue"
 import AppCombobox from "@core/components/app-form-elements/AppCombobox.vue"
+import BookService from "@/pages/BookService.js";
 
 const inputValueTitle = ref('')
 const inputValueISBN = ref('')
@@ -325,8 +551,25 @@ watch(inputValueISBN, newValue => {
   }
 })
 
+let book = ref(null)
+function searchForISBN() {
+  // const isbn = '9783898798822'
+  // const isbn = inputValueISBN
+
+  BookService.getBookByIsbn(inputValueISBN.value)
+    .then(response => {
+      // book = response.data
+      console.log("response", response)
+      book.value = response
+    })
+    .catch(error => {
+      console.error(error)
+    })
+}
+
 function displayBook() {
   displayedBooks.value = true
+  searchForISBN()
 }
 
 //////////////////

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">

src/pages/buechersuche.vue

@@ -1,32 +1,48 @@
 <template>
   <VRow class="match-height">
-    <VCol
+    <VCol cols="12" md="12">
-      cols="12"
+      <VCard title="Büchersuche" subtitle="Vorbeischauen – Vergleichen – Verlieben">
-      md="12"
+        <VCardTitle class="text-center text-h4 font-weight-bold">
-    >
+          SKOUTZ BUCHSUCHE
-      <VCard
+        </VCardTitle>
-        title="Büchersuche"
-        subtitle="Vorbeischauen – Vergleichen – Verlieben"
-      >
-        <!-- ******* Fieberkurve ***** -->
-        <Fieberkurve :show-reset-button="true" :show-categories="true" />
 
-<!--        <div style="position: absolute; top: 255px; left: 10px; color: rgba(185,17,17,0.85)">
+        <!-- Fieberkurve -->
-          {{ selectedCheckbox }}
+        <Fieberkurve
-        </div>-->
+          ref="fieberkurveRef"
-
+          :show-reset-button="true"
-        <!-- ******* Genre´s ***** -->
+          :show-categories="true"
-        <div style="padding: 0 7rem;">
+          @update:values="updateFieberkurveValues"
-          <VCol>
+          @filter-by-row="filterByRow"
-            <CustomCheckboxesWithIcon
-              v-model:selected-checkbox="selectedCheckbox"
-              :checkbox-content="checkboxContent"
         />
-          </VCol>
+
+        <br>
+
+        <!-- Genres -->
+        <div class="genre-section-main">
+          <div
+            v-for="genre in genres"
+            :key="genre.value"
+            class="custom-checkbox"
+            :class="{ active: selectedCheckbox.includes(genre.value) }"
+            @click="toggleGenre(genre.value)"
+          >
+            <VTooltip location="top">
+              {{ genre.value }}
+              <template #activator="{ props }">
+                <div v-bind="props" class="icon">
+                  <VIcon :icon="genre.icon.icon" />
+                </div>
+              </template>
+            </VTooltip>
+          </div>
         </div>
 
-        <!-- ******* TEXT SUCHFELD!! ***** -->
+        <!-- Button zum Zurücksetzen der Genres -->
+        <VBtn class="my-3 mx-auto d-block" color="primary" @click="clearGenres">
+          Alle Genres Zurücksetzen
+        </VBtn>
 
+        <!-- Text Suchfeld -->
         <div style="padding: 0 5rem;">
           <AppTextField
             v-model="message"
@@ -36,392 +52,186 @@
             type="text"
             class="textfield-demo-icon-slot"
           >
-            <!-- Prepend -->
-            <template #prepend>
-              <VTooltip location="bottom">
-                <template #activator="{ props }">
-                  <VIcon
-                    v-bind="props"
-                    icon="tabler-help"
-                  />
-                </template>
-                Skoutz ist die Buchsuche, <br>
-                die deinen Geschmack trifft. <br>
-                5 Klicks 🖱 statt 5 Sterne ⭐ und du <br>
-                findest genau, was du willst. <br>
-              </VTooltip>
-            </template>
-
-            <!-- AppendInner -->
-            <template #append-inner>
-              <VFadeTransition leave-absolute>
-                <VProgressCircular
-                  v-if="loading"
-                  color="primary"
-                  width="3"
-                  size="24"
-                  indeterminate
-                />
-
-                <VNodeRenderer
-                  v-else
-                  class="text-2xl"
-                  :nodes="themeConfig.app.logo"
-                />
-              </VFadeTransition>
-            </template>
-
-            <!-- Append -->
             <template #append>
-              <VBtn
+              <VBtn :icon="$vuetify.display.smAndDown" @click="searchBooks">
-                :icon="$vuetify.display.smAndDown"
+                <VIcon icon="tabler-search" color="#fff" size="22" />
-                @click="clickMe"
+                <span v-if="$vuetify.display.mdAndUp" class="ms-3">Suchen</span>
-              >
-                <VIcon
-                  icon="tabler-search"
-                  color="#fff"
-                  size="22"
-                />
-                <span
-                  v-if="$vuetify.display.mdAndUp"
-                  class="ms-3"
-                >Suchen</span>
               </VBtn>
             </template>
           </AppTextField>
         </div>
 
-        <br>
+        <!-- Button zum Zurücksetzen der Einstellungen -->
+        <VBtn
+          class="my-3 mx-auto d-block"
+          :color="resetFeedback ? 'success' : 'error'"
+          @click="resetAllSettings"
+        >
+          {{ resetFeedback ? 'Zurückgesetzt!' : 'Alle Einstellungen zurücksetzen' }}
+        </VBtn>
+
+        <br />
       </VCard>
     </VCol>
 
-
+    <VCol cols="12" md="12">
-
+      <VCard class="mb-6" title="Gefundene Bücher:">
-
+        <VRow>
-
+          <VCol v-for="book in filteredBooks" :key="book.id" sm="6" cols="12">
-
-    <VCol
-      cols="12"
-      md="12"
-    >
-      <!--
-        <VCard
-        title="Bücher eintragen"
-        subtitle="Dir fehlt ein Buch? Hier kannst du es eintragen!"
-        >
-      -->
-      <VCard
-        class="mb-6"
-        title="Gefundene Bücher:"
-      >
-
-        Hallo Hier ist die API:
-        {{book}}
-        <div v-if="book">
-          <p>Titel: {{ book.title }}</p>
-<!--          <p>Autor: {{ book.author }}</p>-->
-        </div>
-
-        <!-- 👉 Hier werden die Bücher aufgelistet. -->
-
-        <VCol
-          sm="6"
-          cols="12"
-        >
             <VCard>
               <div class="d-flex justify-space-between flex-wrap flex-md-nowrap flex-column flex-md-row">
                 <div class="ma-auto pa-5">
-                <VImg
+                  <VImg width="200px" height="300px" :src="book.image" />
-                  width="200px"
-                  height="300px"
-                  :src="harry_potter"
-                />
                 </div>
 
                 <VDivider :vertical="$vuetify.display.mdAndUp" />
 
                 <div>
-                <VCardTitle>Harry Potter</VCardTitle>
+                  <VCardTitle>{{ book.title }}</VCardTitle>
-                <VCardText>
+                  <VCardText>{{ book.description }}</VCardText>
-<!--                <div style="position: relative; height: 120px">-->
+                  <Fieberkurve
-                    <!--              Fieberkurve -->
+                    :is-static="true"
-                </VCardText>
+                    :default-values="book.fieberkurve"
-
+                    :hide-text="true"
-
+                  />
-                <VCardText>
-                  Harry Potter ist eine Kinder- und Jugendromanreihe der englischen Schriftstellerin Joanne K. Rowling. ...
-                </VCardText>
-                <!--
-                  <VCardText class="text-subtitle-1">
-                  <span>Bestellen:</span> <span class="font-weight-medium">Amazon</span>
-                  </VCardText>
-                -->
-
                   <VCardActions class="justify-space-between">
                     <VBtn>
                       <VIcon icon="tabler-list-details" />
                       <span class="ms-2">Detail Seite</span>
                     </VBtn>
-
+                    <IconBtn color="secondary" icon="tabler-share" />
-                  <IconBtn
-                    color="secondary"
-                    icon="tabler-share"
-                  />
                   </VCardActions>
                 </div>
               </div>
             </VCard>
           </VCol>
-
+        </VRow>
-
-        <!--        ENDE: Genre -->
       </VCard>
     </VCol>
   </VRow>
 </template>
 
 <script setup lang="ts">
-import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
+import { ref, computed } from "vue";
-import { themeConfig } from '@themeConfig'
+import Fieberkurve from "@/components/Fieberkurve.vue";
-import { ref, onMounted, watch } from 'vue'
+import { books } from "@/components/buecherdatenbank";
-import Fieberkurve from "@/components/Fieberkurve.vue"
+import { genres } from "@/components/genredatenbank";
-import harry_potter from "@/assets/images/harry_potter_stein_weisen_rowling.jpg"
-import BookService from './BookService'
-import { useTheme } from "vuetify"
 
-const message = ref('')
+const message = ref("");
-const loading = ref(false)
+const loading = ref(false);
+const selectedCheckbox = ref([]);
+const fieberkurveValues = ref([4, 4, 4, 4, 4]); // Standardwerte für die Fieberkurve
+const fieberkurveRowFilter = ref({ rowIndex: null, value: null });
 
-const clickMe = () => {
+const filteredBooks = computed(() => {
-  loading.value = true
+  return books.filter((book) => {
-  message.value = 'Warte darauf...'
+    const matchesGenres =
+      selectedCheckbox.value.length === 0 ||
+      selectedCheckbox.value.some((genre) => book.genres.includes(genre));
+
+    const matchesText =
+      !message.value ||
+      book.title.toLowerCase().includes(message.value.toLowerCase()) ||
+      book.authors?.some((author) =>
+        author.name.toLowerCase().includes(message.value.toLowerCase())
+      ) ||
+      book.isbn?.includes(message.value);
+
+    const matchesFieberkurve = fieberkurveValues.value.every((value, index) => {
+      const bookValue = book.fieberkurve[index]?.value || 4;
+      return value === 4 || value === bookValue;
+    });
+
+    const matchesRowFilter =
+      fieberkurveRowFilter.value.rowIndex === null ||
+      book.fieberkurve[fieberkurveRowFilter.value.rowIndex].value ===
+      fieberkurveRowFilter.value.value;
+
+    return matchesGenres && matchesText && matchesFieberkurve && matchesRowFilter;
+  });
+});
+
+const searchBooks = () => {
+  console.log("Suche gestartet mit Text:", message.value);
+};
+
+const toggleGenre = (genre) => {
+  if (selectedCheckbox.value.includes(genre)) {
+    selectedCheckbox.value = selectedCheckbox.value.filter((g) => g !== genre);
+  } else {
+    selectedCheckbox.value.push(genre);
+  }
+};
+
+const clearGenres = () => {
+  selectedCheckbox.value = [];
+};
+
+const fieberkurveRef = ref(null);
+const resetFeedback = ref(false);
+
+const resetAllSettings = () => {
+  selectedCheckbox.value = [];
+  fieberkurveRef.value?.resetSliders();
+  message.value = "";
+  fieberkurveRowFilter.value = { rowIndex: null, value: null };
+  resetFeedback.value = true;
 
   setTimeout(() => {
-    loading.value = false
+    resetFeedback.value = false;
-    message.value = ''
+  }, 1500);
-  }, 2000)
+};
-}
 
-const checkboxContent = [
+const updateFieberkurveValues = (values) => {
-  /*{
+  fieberkurveValues.value = values;
-    title: 'Backup',
+};
-    desc: 'Backup every file from your project.',
-    value: 'backup',
-    icon: {
-      icon: 'tabler-server-2',
-      size: '28',
-    },
-  },*/
-  {
-    value: 'Abendteuer',
-    icon: {
-      icon: 'tabler-compass',
-      size: '28',
-    },
-  },
-  {
-    value: 'Contemporary',
-    icon: {
-      icon: 'tabler-building-skyscraper',
-      size: '28',
-    },
-  },
-  {
-    value: 'Crime',
-    icon: {
-      icon: 'tabler-fingerprint',
-      size: '28',
-    },
-  },
-  {
-    value: 'Erotik',
-    icon: {
-      icon: 'tabler-bed',
-      size: '28',
-    },
-  },
-  {
-    value: 'Fantasy',
-    icon: {
-      icon: 'tabler-paw',
-      size: '28',
-    },
-  },
-  {
-    value: 'History',
-    icon: {
-      icon: 'tabler-swords',
-      size: '28',
-    },
-  },
-  {
-    value: 'Horror',
-    icon: {
-      icon: 'tabler-ghost-2',
-      size: '28',
-    },
-  },
-  {
-    value: 'Humor',
-    icon: {
-      icon: 'tabler-mood-xd',
-      size: '28',
-    },
-  },
-  {
-    value: 'Romance',
-    icon: {
-      icon: 'tabler-hearts',
-      size: '28',
-    },
-  },
-  {
-    value: 'ScienceFiction',
-    icon: {
-      icon: 'tabler-ufo',
-      size: '28',
-    },
-  },
-]
 
-const selectedCheckbox = ref([])
+const filterByRow = (filter) => {
-
+  fieberkurveRowFilter.value = filter;
-
+  console.log("Filter gesetzt:", filter);
-
+};
-// Hier ist der Abschnitt für die API (BACKEND)
-let book = null
-
-onMounted(() => {
-  const isbn = '9783898798822' // Ersetze durch die gewünschte ISBN
-
-  BookService.getBookByIsbn(isbn)
-    .then(response => {
-      // book = response.data
-      book = response
-    })
-    .catch(error => {
-      console.error(error)
-    })
-})
-
-
-
-
-// const toggleCheckboxOne = ref(true)
-// const genreBool = ref(false)
-
-
-
-
-// const genre1Color = ref('#a8a6a6')
-
-// let activeGenre = []
-
-/*let genres = [{
-  id: 1,
-  name: "Horror",
-  icon: "tabler-ghost-2",
-
-  color: "#a8a6a6",
-  bool: true,
-},
-{
-  id: 2,
-  name: "Test",
-  color: "#a8a6a6",
-  icon: "tabler-ghost-2",
-  bool: false,
-},
-{
-  id: 3,
-  name: "History",
-  color: "#9fa8da",
-  icon: "tabler-timeline",
-  bool: false,
-},
-{
-  id: 4,
-  name: "Anton",
-  color: "#9fa8da",
-  icon: "tabler-ghost-2",
-  bool: false,
-}]*/
-
-// const abenteuerBool = ref(false)
-// const people = ref(['Mike'])
-
-/*function TestGenreActive(genre, bool){
-  console.log("Hey Genre:", genre, bool)
-  bool = !bool
-  console.log("Bye Genre:", genre, bool)
-
-  return bool
-
-}*/
-
-/*function IsGenreActive(genre) {
-  return activeGenre.includes(genre)
-}*/
-
-/*function  ToggleIsGenreSelected(genre) {
-  console.log('IsGenreActive', IsGenreActive(genre))
-  console.log('ToggleIsGenreSelected genre', genre)
-  if (IsGenreActive(genre)){
-    const index = activeGenre.indexOf(genre)
-
-    activeGenre.splice(index, 1)
-
-    console.log(`if values: ${activeGenre}`)
-  } else {
-    activeGenre.push(genre)
-    console.log(`else values: ${activeGenre}`)
-  }
-
-  // this.genreBool = !this.genreBool
-  /!*genre.bool = !genre.bool
-  genre = {
-    id: genre.id,
-    name: genre.name,
-    color: genre.color,
-    icon: genre.icon,
-    bool: genre.bool
-  }*!/
-  // console.log("genreBool", genreBool)
-  // console.log("genre", genre)
-  // console.log("genreselected", genre.selected)
-  // console.log("genres name", genre.name)
-  // console.log("genres id", genre.id)
-  // console.log("genres icon", genre.icon)
-  // console.log("genres color", genre.color)
-  /!*genre.selected = !genre.selected
-  if (!genre.selected) {
-    genre.color = "#cccccc" + "!important"
-    console.log("IF !genre.selected", genre.selected, genre.color)
-  } else {
-    genre.color = vuetifyTheme.current.value.colors.primary
-    console.log("ELSE genre.selected", genre.selected, genre.color)
-  }
-
-  // genre.color = "#cccccc" + "!important"
-  console.log("genreNew", genre, genre.color)*!/
-}*/
-
-// lifecycle hooks
-/*onMounted(() => {
-  // rowFevercurveConnectors()
-})*/
-
-/*computed() {
-  genreBackgroundColor() {
-    return (genreId) => {
-      return IsGenreActive(genreId) ? vuetifyTheme.current.value.colors.primary : '#acadac'
-    }
-  }
-}*/
 </script>
 
 <style scoped lang="scss">
 .genre-section-main {
   display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+.genre-section-main > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50px;
+  height: 50px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.genre-section-main > div.active {
+  background-color: rgb(var(--v-theme-primary));
+  color: white;
+  border-color: #4e60e4;
+}
+
+.genre-section-main > div:hover {
+  background-color: #e6e8f0;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.genre-section-main .icon {
+  font-size: 18px;
+  color: inherit;
+}
+
+.v-text-field {
+  margin-bottom: 1.5rem;
 }
 </style>
+
+

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">

src/pages/index.vue

@@ -1,4 +1,92 @@
+<template>
+  <div>
+    <VCard>
+      <VImg
+        max-width="200"
+        :src="skoutzLogo"
+        class="mx-auto d-block"
+      />
+      <h2>BUCHSUCHE</h2>
+      <VCardItem>
+        <VCardTitle>Vorbeischauen – Vergleichen – Verlieben</VCardTitle>
+      </VCardItem>
+      <VCardText>
+        SKOUTZ bietet die erste intelligente Buchsuchmaschine, die das Leseerlebnis beschreibt. Emotionen, die wir mit einem Buch verbinden. Die Skoutz-Buchsuche arbeitet nach denselben Prinzipien wie Online-Datingagenturen. Nur vermitteln wir nicht Menschen, sondern Bücher. Lieblingsbücher!
+      </VCardText>
+
+      <VDivider class="my-4" />
+
+      <VCardItem>
+        <VCardTitle>Nur die Geschichte zählt</VCardTitle>
+      </VCardItem>
+      <VCardText>
+        Bei SKOUTZ sind alle Bücher willkommen, egal ob das Buch einen großen, einen kleinen oder auch keinen Verlag hat.
+      </VCardText>
+
+      <VDivider class="my-4" />
+
+      <VCardItem>
+        <VCardTitle>Fünf Klicks statt fünf Sterne</VCardTitle>
+      </VCardItem>
+      <VCardText>
+        Mit 5 Gegensatzpaaren erstellt ihr mit wenigen Klicks eine „Fieberkurve“, die das Buch viel genauer beschreibt, als ein paar Sterne, die noch dazu jeder nach ganz anderen Maßstäben vergibt.
+        <br>
+        Anhand dieser Buch-Fieberkurve könnt ihr auch viel besser euer nächstes Buch finden. Oder suchen lassen, denn je mehr Buch-Fieberkurven ihr eingebt, desto genauer können wir euch genau die Bücher vorstellen, die zu eurer Lese-Fieberkurve, eurem Beuteschema passen. Oder nach einem bestimmten Buch suchen, ganz nach der Stimmung, in der ihr gerade seid.
+        Buchfiebern lohnt sich.
+      </VCardText>
+
+      <VDivider class="my-4" />
+
+      <VCardItem>
+        <VCardTitle>Nie war eine Buchbewertung einfacher</VCardTitle>
+      </VCardItem>
+      <VCardText>
+        Einfaches Rezensieren, gerade für die nicht so wortgeübten Leser. Einfach die Schieber einstellen, fertig!
+      </VCardText>
+
+      <VDivider class="my-4" />
+
+      <VCardItem>
+        <VCardTitle>Skoutzig sein.</VCardTitle>
+      </VCardItem>
+      <VCardText>
+        Wir möchten, dass sich nicht nur die Bücher, sondern auch die Leser bei Skoutz wohlfühlen. Deshalb haben wir uns bei Skoutz eine Menge für euch einfallen lassen. Autoren, Leser, Blogger, Verleger, Buchhändler und all die anderen Menschen, die mit ihrer Hingabe und Leidenschaft Bücher „leben“ – wir bieten allen Platz, um sich vorzustellen und auszutauschen.
+        Im Skoutz-Magazin gibt es reichlich Lesestoff wie Interviews, aktuelle Themen, Eventreports, Buchvorstellungen, das Skoutz-Wiki und vieles mehr.
+      </VCardText>
+
+      <VDivider class="my-4" />
+
+      <VCardItem>
+        <VCardTitle>Skoutz-Blogbonus</VCardTitle>
+      </VCardItem>
+      <VCardText>
+        Es besteht die Möglichkeit, unter die Buch-Fieberkurve nach einem kurzen Teasertext auch einen externen Link auf eure ausführliche Rezension zu setzen. Auf euren Blog zum Beispiel. Damit die Rezension dort gelesen wird, wo sie auch geschrieben wurde.
+      </VCardText>
+    </VCard>
+  </div>
+</template>
+
 <script setup>
+import skoutzLogo from "../assets/images/skoutzLogo.png";
+</script>
+
+<style scoped>
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+.d-block {
+  display: block !important;
+}
+.my-4 {
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
+}
+</style>
+
+
+
+<!--<script setup>
 import skoutzLogo from "../assets/images/skoutzLogo.png"
 </script>
 
@@ -59,7 +147,7 @@ import skoutzLogo from "../assets/images/skoutzLogo.png"
 
 
 
-<!--    <VCard
+&lt;!&ndash;    <VCard
       class="mb-6"
       title="Kick start your project 🚀"
     >
@@ -80,7 +168,7 @@ import skoutzLogo from "../assets/images/skoutzLogo.png"
     <VCard title="Want to integrate JWT? 🔒">
       <VCardText>We carefully crafted JWT flow so you can implement JWT with ease and with minimum efforts.</VCardText>
       <VCardText>Please read our  JWT Documentation to get more out of JWT authentication.</VCardText>
-    </VCard>-->
+    </VCard>&ndash;&gt;
 
 
 
@@ -88,4 +176,4 @@ import skoutzLogo from "../assets/images/skoutzLogo.png"
   </div>
 </template>
 <script setup lang="ts">
-</script>
+</script>-->

src/pages/statische-fieberkurven.vue

@@ -1,65 +1,38 @@
 <template>
   <div>
-    <h1>Fieberkurve Beispielseite</h1>
-
-    <!-- Interaktive Fieberkurve -->
-    <div>
-      <h2>Interaktive Fieberkurve</h2>
-      <Fieberkurve :isStatic="false" @update:values="updateValues" />
-    </div>
-
-    <br>
-    <!-- Button zum Laden der Daten -->
-    <div class="button-container">
-      <button @click="loadValues">Daten laden</button>
-    </div>
-
-    <!-- Statische Fieberkurve -->
-    <div>
-      <h2>Dynamische Fieberkurve</h2>
-      <Fieberkurve :isStatic="true" :defaultValues="staticValues" />
-      {{ staticValues }}
-    </div>
-
     <!-- Statische Fieberkurve -->
     <div>
       <hr>
       <br>
       <h2>Statische Fieberkurve</h2>
-      <Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }]" />
+      <p>1.
-      <Fieberkurve :isStatic="true" :defaultValues="[{ value: 1 }, { value: 4 }, { value: 7 }, { value: 1 }, { value: 2 }]" />
+        < Fieberkurve
+        :isStatic="true"
+        :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }]" />
+      </p>
+      <p>2.
+        < Fieberkurve :isStatic="true"
+        :hideText="true"
+        :defaultValues="[{ value: 1 }, { value: 4 }, { value: 7 }, { value: 1 }, { value: 2 }]" />
+      </p>
+      <hr>
+      <br>
+      <Fieberkurve
+        :is-static="true"
+        :default-values="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }]"
+      />
+      <Fieberkurve
+        :is-static="true"
+        :hide-text="true"
+        :default-values="[{ value: 1 }, { value: 4 }, { value: 7 }, { value: 1 }, { value: 2 }]"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref } from "vue"
-import Fieberkurve from "@/components/Fieberkurve.vue";
+import Fieberkurve from "@/components/Fieberkurve.vue"
-
-// Werte der interaktiven Fieberkurve
-const staticValues = ref([
-  { value: 4 },
-  { value: 4 },
-  { value: 4 },
-  { value: 4 },
-  { value: 4 }
-]);
-
-// Temporäre Werte für interaktive Fieberkurve
-const temporaryValues = ref([]);
-
-// Funktion zum Aktualisieren der temporären Werte
-function updateValues(values) {
-  temporaryValues.value = values.map(value => ({ value }));
-}
-
-// Funktion zum Laden der temporären Werte in die statische Fieberkurve
-function loadValues() {
-  if (temporaryValues.value != 0){
-    staticValues.value = [...temporaryValues.value]; // Neuzuweisung des Arrays
-  }
-  // console.log(staticValues.value, temporaryValues.value)
-}
 </script>
 
 <style scoped>
@@ -105,12 +78,13 @@ div {
 
 
 
-<!--<script setup>
+<!--
+  <script setup>
 
-import Fieberkurve from "@/components/Fieberkurve.vue";
+  import Fieberkurve from "@/components/Fieberkurve.vue";
-</script>
+  </script>
 
-<template>
+  <template>
 
   <VCard
   title="Fieberkurven Vorschauseite"
@@ -143,9 +117,10 @@ import Fieberkurve from "@/components/Fieberkurve.vue";
   <br>
   <br>
   </VCard>
-</template>
+  </template>
 
 
-<style scoped lang="scss">
+  <style scoped lang="scss">
 
-</style>-->
+  </style>
+-->

src/pages/testfieberkurven.vue

@@ -1,21 +1,142 @@
+<template>
+  <div>
+    <h1>Fieberkurve Beispielseite</h1>
+
+    <!-- Interaktive Fieberkurve -->
+    <div>
+      <h2>Interaktive Fieberkurve</h2>
+      <Fieberkurve :isStatic="false" @update:values="updateValues" />
+    </div>
+
+    <br>
+    <!-- Button zum Laden der Daten -->
+    <div class="button-container">
+      <button @click="loadValues">Daten laden</button>
+    </div>
+
+    <!-- Statische Fieberkurve -->
+    <div>
+      <h2>Dynamische Fieberkurve</h2>
+      <Fieberkurve :isStatic="true" :defaultValues="staticValues" />
+      {{ staticValues }}
+    </div>
+  </div>
+</template>
+
 <script setup>
+import { ref } from "vue";
+import Fieberkurve from "@/components/Fieberkurve.vue";
+
+// Werte der interaktiven Fieberkurve
+const staticValues = ref([
+  { value: 4 },
+  { value: 4 },
+  { value: 4 },
+  { value: 4 },
+  { value: 4 }
+]);
+
+// Temporäre Werte für interaktive Fieberkurve
+const temporaryValues = ref([]);
+
+// Funktion zum Aktualisieren der temporären Werte
+function updateValues(values) {
+  temporaryValues.value = values.map(value => ({ value }));
+}
+
+// Funktion zum Laden der temporären Werte in die statische Fieberkurve
+function loadValues() {
+  if (temporaryValues.value != 0){
+    staticValues.value = [...temporaryValues.value]; // Neuzuweisung des Arrays
+  }
+  // console.log(staticValues.value, temporaryValues.value)
+}
+</script>
+
+<style scoped>
+h1 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+h2 {
+  margin: 20px 0;
+  text-align: left;
+}
+
+.button-container {
+  text-align: center;
+  margin: 20px 0;
+}
+
+button {
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+div {
+  margin-bottom: 40px;
+}
+</style>
+
+
+
+
+
+
+
+
+
+<!--<script setup>
 
 import Fieberkurve from "@/components/Fieberkurve.vue";
 </script>
 
 <template>
-  <Fieberkurve :show-reset-button="true" :show-categories="true" />
+
-  <hr>
+  <VCard
+    title="Fieberkurven Vorschauseite"
+    subtitle="Hier werden nur ein paar Varianten der Fieberkurve gezeigt!"
+  >
+
+
+
+
+    <h4>Interaktive Fieberkurve:</h4>
+    &lt;!&ndash; Interaktive Fieberkurve &ndash;&gt;
+    <Fieberkurve :isStatic="false" />
     <br>
-  <Fieberkurve :show-reset-button="false" :show-categories="true" />
+    <br>
+    <Fieberkurve :isStatic="false" />
+
     <br>
     <hr>
     <br>
-  <Fieberkurve :show-reset-button="false" :show-categories="false" />
+    <h4>Statische Fieberkurve mit vordefinierten Werten:</h4>
+
+    &lt;!&ndash; Statische Fieberkurve mit vordefinierten Werten &ndash;&gt;
+    <Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 7 }, { value: 4 }, { value: 1 }]" />
     <br>
-  <hr>
+    <br>
+    <Fieberkurve :isStatic="true" :defaultValues="[{ value: 1 }, { value: 2 }, { value: 2 }, { value: 3 }, { value: 1 }]" />
+    <br>
+    <br>
+    <Fieberkurve :isStatic="true" :defaultValues="[{ value: 5 }, { value: 2 }, { value: 3 }, { value: 4 }, { value: 7 }]" />
+    <br>
+    <br>
+  </VCard>
 </template>
 
+
 <style scoped lang="scss">
 
-</style>
+</style>-->

typed-router.d.ts

@@ -43,8 +43,11 @@ declare module 'vue-router/auto/routes' {
     '$error': RouteRecordInfo<'$error', '/:error(.*)', { error: ParamValue<true> }, { error: ParamValue<false> }>,
     'buchdetailseite': RouteRecordInfo<'buchdetailseite', '/buchdetailseite', Record<never, never>, Record<never, never>>,
     '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>>,
+    'genredatenbank': RouteRecordInfo<'genredatenbank', '/genredatenbank', Record<never, never>, Record<never, never>>,
     'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
+    'statische-fieberkurven': RouteRecordInfo<'statische-fieberkurven', '/statische-fieberkurven', Record<never, never>, Record<never, never>>,
     'testfieberkurven': RouteRecordInfo<'testfieberkurven', '/testfieberkurven', Record<never, never>, Record<never, never>>,
   }
 }