Neue Büchersuche Seite

Neue Büchereintragen Seite
Neue Fieberkurve + Testseite für Variaten
2025-04-02 20:17:44 +02:00 · 2025-04-02 20:17:21 +02:00 · 2025-04-02 20:16:56 +02:00 · 2025-04-02 20:16:21 +02:00 · 2025-04-02 20:15:55 +02:00 · 2025-04-02 20:15:14 +02:00
14 changed files with 1632 additions and 955 deletions
--- a/components.d.ts
+++ b/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']
--- a/src/components/Fieberkurve.vue
+++ b/src/components/Fieberkurve.vue
@ -1,3 +1,288 @@
+<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, 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"

@ -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 -->
-    <!--              Button Fieberkurve zurücksetzen -->
+  &lt;!&ndash;              ENDE FIEBERKURVE &ndash;&gt;
+  &lt;!&ndash;              Button Fieberkurve zurücksetzen &ndash;&gt;
  <div
  v-if="props.showResetButton"
  style="
@ -467,3 +752,4 @@ canvas {
  border-radius: 4px;
  }
  </style>
+-->
--- a/src/components/genredatenbank.js
+++ b/src/components/genredatenbank.js
@ -1,93 +1,72 @@
-export const books = [
+export const genres = [
  {
-    id: 1,
-    title: 'Rich Dad Poor Dad',
-    description: 'Ein Buch über finanzielle Bildung und Investitionen.',
-    image: 'https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg',
-    fieberkurve: [
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-    ],
+    value: 'Abenteuer',
+    icon: {
+      icon: 'tabler-compass',
+      size: '28',
+    },
  },
  {
-    id: 2,
-    title: 'Harry Potter und der Stein der Weisen',
-    description: 'Der erste Teil der magischen Harry-Potter-Reihe.',
-    image: 'https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg',
-    fieberkurve: [
-      { value: 5 },
-      { value: 2 },
-      { value: 7 },
-      { value: 3 },
-      { value: 5 },
-    ],
+    value: 'Contemporary',
+    icon: {
+      icon: 'tabler-building-skyscraper',
+      size: '28',
+    },
  },
  {
-    id: 3,
-    title: 'Der Herr der Ringe',
-    description: 'Ein episches Fantasy-Abenteuer von J.R.R. Tolkien.',
-    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 },
-    ],
+    value: 'Crime',
+    icon: {
+      icon: 'tabler-fingerprint',
+      size: '28',
+    },
  },
  {
-    id: 4,
-    title: 'Die Tribute von Panem',
-    description: 'Ein dystopischer Roman über den Kampf ums Überleben.',
-    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 },
-    ],
+    value: 'Erotik',
+    icon: {
+      icon: 'tabler-bed',
+      size: '28',
+    },
  },
  {
-    id: 5,
-    title: 'Game of Thrones',
-    description: 'Der Auftakt zur epischen Saga von George R.R. Martin.',
-    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 },
-    ],
+    value: 'Fantasy',
+    icon: {
+      icon: 'tabler-paw',
+      size: '28',
+    },
  },
  {
-    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 },
-    ],
+    value: 'History',
+    icon: {
+      icon: 'tabler-swords',
+      size: '28',
+    },
  },
  {
-    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 },
-    ],
+    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',
+    },
  },
 ]
--- a/src/layouts/components/Footer.vue
+++ b/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"
--- a/src/navigation/vertical/index.js
+++ b/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',
-    to: { name: 'buecher-eintragen' },
-    icon: { icon: 'tabler-book-2' },
+    title: 'Bücher',
+    to: { name: 'buecherdatenbank' },
+    icon: { icon: 'tabler-books' },
+  },
+  {
+    title: 'Genre´s',
+    to: { name: 'genredatenbank' },
+    icon: { icon: 'tabler-masks-theater' },
  },

  /*{
--- 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>
--- a/src/pages/buecher-eintragen.vue
+++ b/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:"
@ -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()
 }

 //////////////////
--- a/src/pages/buecherdatenbank.vue
+++ b/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: 'Rich Dad Poor Dad',
-    description: 'Ein Buch über finanzielle Bildung und Investitionen.',
-    image: 'https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg',
-    fieberkurve: [
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-    ],
+    title: 'ID',
+    key: 'id',
+    sortable: true,
  },
  {
-    id: 2,
-    title: 'Harry Potter und der Stein der Weisen',
-    description: 'Der erste Teil der magischen Harry-Potter-Reihe.',
-    image: 'https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg',
-    fieberkurve: [
-      { value: 5 },
-      { value: 2 },
-      { value: 7 },
-      { value: 3 },
-      { value: 5 },
-    ],
+    title: 'Titel',
+    key: 'title',
+    sortable: true,
  },
  {
-    id: 3,
-    title: 'Der Herr der Ringe',
-    description: 'Ein episches Fantasy-Abenteuer von J.R.R. Tolkien.',
-    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 },
-    ],
+    title: 'Beschreibung',
+    key: 'description',
+    sortable: false,
  },
  {
-    id: 4,
-    title: 'Die Tribute von Panem',
-    description: 'Ein dystopischer Roman über den Kampf ums Überleben.',
-    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 },
-    ],
+    title: 'Bild',
+    key: 'image',
+    sortable: false,
  },
  {
-    id: 5,
-    title: 'Game of Thrones',
-    description: 'Der Auftakt zur epischen Saga von George R.R. Martin.',
-    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 },
-    ],
+    title: 'Fieberkurve',
+    key: 'fieberkurve',
+    sortable: false,
  },
-  {
-    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">
--- a/src/pages/buechersuche.vue
+++ b/src/pages/buechersuche.vue
@ -1,32 +1,48 @@
 <template>
  <VRow class="match-height">
-    <VCol
-      cols="12"
-      md="12"
-    >
-      <VCard
-        title="Büchersuche"
-        subtitle="Vorbeischauen – Vergleichen – Verlieben"
-      >
-        <!-- ******* Fieberkurve ***** -->
-        <Fieberkurve :show-reset-button="true" :show-categories="true" />
+    <VCol cols="12" md="12">
+      <VCard title="Büchersuche" subtitle="Vorbeischauen – Vergleichen – Verlieben">
+        <VCardTitle class="text-center text-h4 font-weight-bold">
+          SKOUTZ BUCHSUCHE
+        </VCardTitle>

-<!--        <div style="position: absolute; top: 255px; left: 10px; color: rgba(185,17,17,0.85)">
-          {{ selectedCheckbox }}
-        </div>-->
-
-        <!-- ******* Genre´s ***** -->
-        <div style="padding: 0 7rem;">
-          <VCol>
-            <CustomCheckboxesWithIcon
-              v-model:selected-checkbox="selectedCheckbox"
-              :checkbox-content="checkboxContent"
+        <!-- Fieberkurve -->
+        <Fieberkurve
+          ref="fieberkurveRef"
+          :show-reset-button="true"
+          :show-categories="true"
+          @update:values="updateFieberkurveValues"
+          @filter-by-row="filterByRow"
        />
-          </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
-                :icon="$vuetify.display.smAndDown"
-                @click="clickMe"
-              >
-                <VIcon
-                  icon="tabler-search"
-                  color="#fff"
-                  size="22"
-                />
-                <span
-                  v-if="$vuetify.display.mdAndUp"
-                  class="ms-3"
-                >Suchen</span>
+              <VBtn :icon="$vuetify.display.smAndDown" @click="searchBooks">
+                <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
-        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"
-        >
+    <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">
            <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
-                  width="200px"
-                  height="300px"
-                  :src="harry_potter"
-                />
+                  <VImg width="200px" height="300px" :src="book.image" />
                </div>

                <VDivider :vertical="$vuetify.display.mdAndUp" />

                <div>
-                <VCardTitle>Harry Potter</VCardTitle>
-                <VCardText>
-<!--                <div style="position: relative; height: 120px">-->
-                    <!--              Fieberkurve -->
-                </VCardText>
-
-
-                <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>
-                -->
-
+                  <VCardTitle>{{ book.title }}</VCardTitle>
+                  <VCardText>{{ book.description }}</VCardText>
+                  <Fieberkurve
+                    :is-static="true"
+                    :default-values="book.fieberkurve"
+                    :hide-text="true"
+                  />
                  <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>
-
-
-        <!--        ENDE: Genre -->
+        </VRow>
      </VCard>
    </VCol>
  </VRow>
 </template>

 <script setup lang="ts">
-import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
-import { themeConfig } from '@themeConfig'
-import { ref, onMounted, watch } from 'vue'
-import Fieberkurve from "@/components/Fieberkurve.vue"
-import harry_potter from "@/assets/images/harry_potter_stein_weisen_rowling.jpg"
-import BookService from './BookService'
-import { useTheme } from "vuetify"
+import { ref, computed } from "vue";
+import Fieberkurve from "@/components/Fieberkurve.vue";
+import { books } from "@/components/buecherdatenbank";
+import { genres } from "@/components/genredatenbank";

-const message = ref('')
-const loading = ref(false)
+const message = ref("");
+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 = () => {
-  loading.value = true
-  message.value = 'Warte darauf...'
+const filteredBooks = computed(() => {
+  return books.filter((book) => {
+    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
-    message.value = ''
-  }, 2000)
-}
+    resetFeedback.value = false;
+  }, 1500);
+};

-const checkboxContent = [
-  /*{
-    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 updateFieberkurveValues = (values) => {
+  fieberkurveValues.value = values;
+};

-const selectedCheckbox = ref([])
-
-
-
-// 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'
-    }
-  }
-}*/
+const filterByRow = (filter) => {
+  fieberkurveRowFilter.value = filter;
+  console.log("Filter gesetzt:", filter);
+};
 </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>
+
+
--- a/src/pages/genredatenbank.vue
+++ b/src/pages/genredatenbank.vue
@ -1,28 +1,52 @@
 <script setup>
-import { books } from '@/components/buecherdatenbank'; // Importiere die Bücher-Datenbank
-import Fieberkurve from "@/components/Fieberkurve.vue";
+import { genres } from '@/components/genredatenbank' // Importiere die Genres-Datenbank
+
+// 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>
-  <p>(Alle statisch angelegte Testbücher in "buecherdatenbank.js")</p>
+  <h2>Genredatenbank:</h2>
+  <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>
-  </VRow>
+  <!-- Data Table - Dense -->
+  <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">
--- a/src/pages/index.vue
+++ b/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>-->
--- a/src/pages/statische-fieberkurven.vue
+++ b/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 }]" />
-      <Fieberkurve :isStatic="true" :defaultValues="[{ value: 1 }, { value: 4 }, { value: 7 }, { value: 1 }, { value: 2 }]" />
+      <p>1.
+        < 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 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)
-}
+import { ref } from "vue"
+import Fieberkurve from "@/components/Fieberkurve.vue"
 </script>

 <style scoped>
@ -105,7 +78,8 @@ div {



-<!--<script setup>
+<!--
+  <script setup>

  import Fieberkurve from "@/components/Fieberkurve.vue";
  </script>
@ -148,4 +122,5 @@ import Fieberkurve from "@/components/Fieberkurve.vue";

  <style scoped lang="scss">

-</style>-->
+  </style>
+-->
--- a/src/pages/testfieberkurven.vue
+++ b/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>-->
--- a/typed-router.d.ts
+++ b/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>>,
  }
 }
Author	SHA1	Message	Date
MCMichinator	701e1ba9e3	Neue Büchersuche Seite	2025-04-02 20:17:44 +02:00
MCMichinator	76f83cbae9	Neue Büchereintragen Seite	2025-04-02 20:17:21 +02:00
MCMichinator	01bb983492	Neue Fieberkurve + Testseite für Variaten	2025-04-02 20:16:56 +02:00
MCMichinator	4077a2806c	Neue Bücherdetailseite	2025-04-02 20:16:21 +02:00
MCMichinator	e6016a7729	Genre Datenbank für Testzwecke im Frontend (statisch)	2025-04-02 20:15:55 +02:00
MCMichinator	2f45025ffa	Footer: update Name	2025-04-02 20:15:14 +02:00
MCMichinator	71e1878354	Bücherdatenbank für Testzwecke eigebunden (statische Bücher)	2025-04-02 20:14:49 +02:00
MCMichinator	789c3f4630	new index	2025-04-02 20:13:01 +02:00