Seite Buchdetails

components.d.ts

@@ -44,6 +44,7 @@ declare module 'vue' {
     DropZone: typeof import('./src/@core/components/DropZone.vue')['default']
     EnableOneTimePasswordDialog: typeof import('./src/components/dialogs/EnableOneTimePasswordDialog.vue')['default']
     ErrorHeader: typeof import('./src/components/ErrorHeader.vue')['default']
+    Fieberkurve: typeof import('./src/components/Fieberkurve.vue')['default']
     I18n: typeof import('./src/@core/components/I18n.vue')['default']
     MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
     Notifications: typeof import('./src/@core/components/Notifications.vue')['default']

src/components/Fieberkurve.vue

@@ -0,0 +1,469 @@
+<script setup>
+import { ref, watch, defineProps, defineEmits } from "vue"
+
+const props = defineProps({
+  showResetButton: {
+    type: Boolean,
+    required: true,
+  },
+  showCategories: {
+    type: Boolean,
+    required: true,
+  },
+})
+
+/*
+const emit = defineEmits(['buttonClicked'])
+
+const emitButtonClick = () => {
+  emit('buttonClicked', 1)
+}
+*/
+
+const schwierigkeit = ref(4)
+const stimmung = ref(4)
+const spannung = ref(4)
+const gewalt = ref(4)
+const erotik = ref(4)
+
+const ColorRow1 = ref('#a8a6a6')
+const ColorRow2 = ref('#a8a6a6')
+const ColorRow3 = ref('#a8a6a6')
+const ColorRow4 = ref('#a8a6a6')
+const ColorRow5 = ref('#a8a6a6')
+
+const isRow1Active = ref(false)
+const isRow2Active = ref(false)
+const isRow3Active = ref(false)
+const isRow4Active = ref(false)
+const isRow5Active = ref(false)
+
+const isResetButtonPressed = ref(false)
+const firstClick = ref(false)
+
+function FevercurveIsClicked(RowValue) {
+  isResetButtonPressed.value = true
+  switch (RowValue) {
+  case "schwierigkeit":
+    console.log("Line: 1")
+    ColorRow1.value = '#cccccc'
+    isRow1Active.value = true
+    break
+  case "stimmung":
+    console.log("Line: 2")
+    ColorRow2.value = '#cccccc'
+    isRow2Active.value = true
+    break
+  case "spannung":
+    console.log("Line: 3")
+    ColorRow3.value = '#cccccc'
+    isRow3Active.value = true
+    break
+  case "gewalt":
+    console.log("Line: 4")
+    ColorRow4.value = '#cccccc'
+    isRow4Active.value = true
+    break
+  case "erotik":
+    console.log("Line: 5")
+    ColorRow5.value = '#cccccc'
+    isRow5Active.value = true
+    break
+  }
+  console.log("firstClick:", firstClick.value)
+
+  if (!firstClick.value) {
+    rowFevercurveConnectors()
+  }
+  firstClick.value = true
+}
+
+
+function resetFevercurve() {
+  if (!isResetButtonPressed.value) {
+    return
+  }
+  console.log("reset Fevercurve")
+
+  isResetButtonPressed.value = false
+  firstClick.value = false
+
+  ColorRow1.value = '#a8a6a6'
+  ColorRow2.value = '#a8a6a6'
+  ColorRow3.value = '#a8a6a6'
+  ColorRow4.value = '#a8a6a6'
+  ColorRow5.value = '#a8a6a6'
+
+  isRow1Active.value = false
+  isRow2Active.value = false
+  isRow3Active.value = false
+  isRow4Active.value = false
+  isRow5Active.value = false
+
+  schwierigkeit.value = 4
+  stimmung.value = 4
+  spannung.value = 4
+  gewalt.value = 4
+  erotik.value = 4
+
+  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() {
+  console.log("Funktion wird aufgerufen")
+
+  let c = document.getElementById("myCanvas")
+  let ctx = c.getContext("2d")
+
+  //settings
+  // let gradient = ctx.createLinearGradient(182, 5, 41, 100)
+  // gradient.addColorStop("0", "#3f5efb")
+  // gradient.addColorStop("1.0", "#b60529")
+  // ctx.strokeStyle = gradient
+  ctx.strokeStyle = "red"
+  ctx.lineWidth = 4
+
+  // clear canvas
+  ctx.clearRect(0, 0, c.width, c.height)
+  ctx.beginPath()
+
+  let Breite = 240
+  let Hoehe = 130
+  let Kreis = 20
+
+  ctx.moveTo(((schwierigkeit.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((1 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
+  ctx.lineTo(((stimmung.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((2 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
+  ctx.lineTo(((spannung.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((3 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
+  ctx.lineTo(((gewalt.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((4 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
+  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], () => {
+  if (isResetButtonPressed.value){
+    rowFevercurveConnectors()
+  }
+})
+</script>
+
+<template>
+  <div>
+    <div class="grid-container">
+      <div
+        v-if="props.showCategories"
+        class="item1"
+      >
+        anspruchsvoll <br>
+        lustig <br>
+        spannend <br>
+        brutal <br>
+        sittsam
+      </div>
+      <div class="item2">
+        <!--      Slider -->
+        <div style="position: relative; height: 120px">
+          <!--              Fieberkurve -->
+          <canvas
+            id="myCanvas"
+            width="240"
+            height="130"
+          >
+            Your browser does not support the HTML canvas tag.
+          </canvas>
+
+          <div class="FieberkurveGesamt">
+            <div
+              class="Fieberkurve"
+              @click="FevercurveIsClicked('schwierigkeit')"
+            >
+              <input
+                id="myRange"
+                v-model="schwierigkeit"
+                type="range"
+                min="1"
+                max="7"
+                class="slider"
+                :style="{ color: '#000000' }"
+              >
+              <div
+                class="slider-track"
+                :style="{ backgroundColor: ColorRow1 }"
+              />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+            </div>
+            <!--                :style="{ backgroundColor: vuetifyTheme.current.value.colors.primary }" -->
+
+
+            <div
+              class="Fieberkurve"
+              @click="FevercurveIsClicked('stimmung')"
+            >
+              <input
+                id="myRange"
+                v-model="stimmung"
+                type="range"
+                min="1"
+                max="7"
+                class="slider"
+              >
+              <div
+                class="slider-track"
+                :style="{ backgroundColor: ColorRow2 }"
+              />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+            </div>
+
+            <div
+              class="Fieberkurve"
+              @click="FevercurveIsClicked('spannung')"
+            >
+              <input
+                id="myRange"
+                v-model="spannung"
+                type="range"
+                min="1"
+                max="7"
+                class="slider"
+              >
+              <div
+                class="slider-track"
+                :style="{ backgroundColor: ColorRow3 }"
+              />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+            </div>
+
+            <div
+              class="Fieberkurve"
+              @click="FevercurveIsClicked('gewalt')"
+            >
+              <input
+                id="myRange"
+                v-model="gewalt"
+                type="range"
+                min="1"
+                max="7"
+                class="slider"
+              >
+              <div
+                class="slider-track"
+                :style="{ backgroundColor: ColorRow4 }"
+              />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+            </div>
+
+            <div
+              class="Fieberkurve"
+              @click="FevercurveIsClicked('erotik')"
+            >
+              <input
+                id="myRange5"
+                v-model="erotik"
+                type="range"
+                min="1"
+                max="7"
+                class="slider"
+                :class="{ backgroundColor: '#e70707' }"
+              >
+              <div
+                class="slider-track"
+                :style="{ backgroundColor: ColorRow5 }"
+              />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+              <div class="kreis" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="props.showCategories"
+        class="item3"
+      >
+        leseleicht<br>
+        traurig<br>
+        entspannend<br>
+        gewaltfrei<br>
+        erotisch
+      </div>
+    </div>
+    <!--              ENDE FIEBERKURVE -->
+    <!--              Button Fieberkurve zurücksetzen -->
+    <div
+      v-if="props.showResetButton"
+      style="
+          width: 100%;
+          margin: 5px;
+          display: flex;
+          justify-content: center;"
+    >
+      <VBtn
+        size="small"
+        @click="resetFevercurve"
+      >
+        Fieberkurve zurücksetzen
+      </VBtn>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+//Grid Layout
+.item1 {
+  grid-area: txtLinks;
+  background: transparent !important;
+}
+
+.item2 {
+  grid-area: Fieberkurve;
+  background: transparent !important;
+}
+
+.item3 {
+  grid-area: txtRechts;
+  background: transparent !important;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-areas: 'txtLinks Fieberkurve txtRechts';
+  gap: 10px;
+  justify-content: center;
+  line-height: 26px;
+}
+
+.grid-container > div {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+//Grid Layout END
+
+
+canvas {
+  z-index: 2;
+  //border:1px solid #000000;
+  position: absolute;
+}
+
+.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: #27c21f;
+  //padding: ;
+  border-radius: 25px;
+}
+
+.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 {
+  z-index: 3;
+  width: 100%;
+  position: absolute;
+  //top: 10px;
+  -webkit-appearance: none;
+
+  //background: #c29c1f;
+  //height: 7.5px;
+  //margin-top: 3.5px;
+
+  //background: rgba(50, 150, 11, 0.81);
+  outline: none;
+  //border: 5px solid rgba(232, 64, 64, 0.83);
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.slider-track {
+  position: absolute;
+  width: 100%;
+  border-radius: 8px;
+  //background: #bb2626;
+  height: 10px;
+  margin-top: 5px;
+}
+
+
+/*  Kreis  */
+/* for chrome/safari */
+.slider::-webkit-slider-thumb {
+  //z-index: 4;
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  background: #F07D00;
+  cursor: pointer;
+  //border: 5px solid red;
+  border-radius: 100%;
+}
+
+/* for firefox */
+.slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  background: #000;
+  cursor: pointer;
+  //border: 5px solid lawngreen;
+  border-radius: 4px;
+}
+</style>

src/navigation/vertical/index.js

@@ -10,6 +10,16 @@ export default [
     to: { name: 'buechersuche' },
     icon: { icon: 'tabler-books' },
   },
+  {
+    title: 'Fieberkurve',
+    to: { name: 'testfieberkurven' },
+    icon: { icon: 'tabler-chart-dots-3' },
+  },
+  {
+    title: 'Detailseite',
+    to: { name: 'buchdetailseite' },
+    icon: { icon: 'tabler-list-details' },
+  },
   {
     title: 'Bücher eintragen',
     to: { name: 'buecher-eintragen' },

src/pages/buchdetailseite.vue

@@ -0,0 +1,24 @@
+<script setup>
+import harryPotter from "@images/harry_potter_stein_weisen_rowling.jpg";
+</script>
+
+<template>
+  <VRow class="match-height">
+    <VCol
+      cols="12"
+      md="12"
+    >
+      <VCard title="Detailseite">
+        <VImg
+          width="200px"
+          height="300px"
+          :src="harryPotter"
+        />
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/pages/buecher-eintragen.vue

@@ -4,6 +4,8 @@
       cols="12"
       md="12"
     >
+
+<!--
       <VCard
         class="mb-6"
         title="TEST"
@@ -38,13 +40,14 @@
             </VCol>
           </VRow>
         </VCardText>
-      </VCard>
+      </VCard>-->
       
       
       
       <!--      v-show="!showEnterBooks" -->
       <!--      ToDo: Wieder einfügen, wenn fertig -->
       <VCard
+        v-show="!showEnterBooks"
         class="mb-6"
         title="Bücher eintragen"
         subtitle="Du kannst ein Buch bei uns nicht finden? Hier kannst du es eintragen!"
@@ -58,7 +61,7 @@
               <AppTextField
                 v-model="inputValueTitle"
                 clearable
-                label="Titel eingeben:"
+                label="Titel* eingeben:"
                 placeholder="Harry Potter und der Stein der Weisen"
                 clear-icon="tabler-x"
               />
@@ -327,7 +330,7 @@ function displayBook() {
 }
 
 //////////////////
-const showEnterBooks = ref(true) /// false setzten!
+const showEnterBooks = ref(false) /// false setzten!
 
 function displayedEnterBooks() {
   showEnterBooks.value = true

src/pages/buechersuche.vue

@@ -8,196 +8,14 @@
         title="Büchersuche"
         subtitle="Vorbeischauen – Vergleichen – Verlieben"
       >
-        <div class="grid-container">
+        <!-- ******* Fieberkurve ***** -->
-          <div class="item1">
+        <Fieberkurve :show-reset-button="true" :show-categories="true" />
-            anspruchsvoll <br>
-            lustig <br>
-            spannend <br>
-            brutal <br>
-            sittsam
-          </div>
-          <div class="item2">
-            <!--      Slider -->
-            <div style="position: relative; height: 120px">
-              <!--              Fieberkurve -->
-              <canvas
-                id="myCanvas"
-                width="240"
-                height="130"
-              >
-                Your browser does not support the HTML canvas tag.
-              </canvas>
 
-              <div class="FieberkurveGesamt">
+<!--        <div style="position: absolute; top: 255px; left: 10px; color: rgba(185,17,17,0.85)">
-                <div
-                  class="Fieberkurve"
-                  @click="FevercurveIsClicked('schwierigkeit')"
-                >
-                  <input
-                    id="myRange"
-                    v-model="schwierigkeit"
-                    type="range"
-                    min="1"
-                    max="7"
-                    class="slider"
-                    :style="{ color: '#000000' }"
-                  >
-                  <div
-                    class="slider-track"
-                    :style="{ backgroundColor: ColorRow1 }"
-                  />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                </div>
-                <!--                :style="{ backgroundColor: vuetifyTheme.current.value.colors.primary }" -->
-
-
-                <div
-                  class="Fieberkurve"
-                  @click="FevercurveIsClicked('stimmung')"
-                >
-                  <input
-                    id="myRange"
-                    v-model="stimmung"
-                    type="range"
-                    min="1"
-                    max="7"
-                    class="slider"
-                  >
-                  <div
-                    class="slider-track"
-                    :style="{ backgroundColor: ColorRow2 }"
-                  />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                </div>
-
-                <div
-                  class="Fieberkurve"
-                  @click="FevercurveIsClicked('spannung')"
-                >
-                  <input
-                    id="myRange"
-                    v-model="spannung"
-                    type="range"
-                    min="1"
-                    max="7"
-                    class="slider"
-                  >
-                  <div
-                    class="slider-track"
-                    :style="{ backgroundColor: ColorRow3 }"
-                  />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                </div>
-
-                <div
-                  class="Fieberkurve"
-                  @click="FevercurveIsClicked('gewalt')"
-                >
-                  <input
-                    id="myRange"
-                    v-model="gewalt"
-                    type="range"
-                    min="1"
-                    max="7"
-                    class="slider"
-                  >
-                  <div
-                    class="slider-track"
-                    :style="{ backgroundColor: ColorRow4 }"
-                  />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                </div>
-
-                <div
-                  class="Fieberkurve"
-                  @click="FevercurveIsClicked('erotik')"
-                >
-                  <input
-                    id="myRange5"
-                    v-model="erotik"
-                    type="range"
-                    min="1"
-                    max="7"
-                    class="slider"
-                    :class="{ backgroundColor: '#e70707' }"
-                  >
-                  <div
-                    class="slider-track"
-                    :style="{ backgroundColor: ColorRow5 }"
-                  />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                  <div class="kreis" />
-                </div>
-              </div>
-              <!--              ENDE FIEBERKURVE -->
-            </div>
-          </div>
-          <div class="item3">
-            leseleicht<br>
-            traurig<br>
-            entspannend<br>
-            gewaltfrei<br>
-            erotisch
-          </div>
-        </div>
-
-
-
-        <div
-          style="
-          width: 100%;
-          margin: 5px;
-          display: flex;
-          justify-content: center;"
-        >
-          <VBtn
-            size="small"
-            @click="resetFevercurve"
-          >
-            Fieberkurve zurücksetzen
-          </VBtn>
-        </div>
-
-        <div style="position: absolute; top: 100px; left: 10px; color: rgba(185,17,17,0.85)">
-          R1: {{ schwierigkeit }}, {{ isRow1Active }} <br>
-          R2: {{ stimmung }}, {{ isRow2Active }} <br>
-          R3: {{ spannung }}, {{ isRow3Active }} <br>
-          R4: {{ gewalt }}, {{ isRow4Active }} <br>
-          R5: {{ erotik }}, {{ isRow5Active }} <br>
-        </div>
-        <div style="position: absolute; top: 255px; left: 10px; color: rgba(185,17,17,0.85)">
           {{ selectedCheckbox }}
-        </div>
+        </div>-->
 
+        <!-- ******* Genre´s ***** -->
         <div style="padding: 0 7rem;">
           <VCol>
             <CustomCheckboxesWithIcon
@@ -207,7 +25,6 @@
           </VCol>
         </div>
 
-
         <!-- ******* TEXT SUCHFELD!! ***** -->
 
         <div style="padding: 0 5rem;">
@@ -275,27 +92,28 @@
         </div>
 
         <br>
-<!--        <hr>-->
-
       </VCard>
     </VCol>
 
-        <VCol
+
-          cols="12"
+
-          md="12"
+
+
+
+    <VCol
+      cols="12"
+      md="12"
+    >
+      <!--
+        <VCard
+        title="Bücher eintragen"
+        subtitle="Dir fehlt ein Buch? Hier kannst du es eintragen!"
         >
-          <!--
+      -->
-            <VCard
+      <VCard
-            title="Bücher eintragen"
+        class="mb-6"
-            subtitle="Dir fehlt ein Buch? Hier kannst du es eintragen!"
+        title="Gefundene Bücher:"
-            >
+      >
-          -->
-          <VCard
-            class="mb-6"
-            title="Gefundene Bücher:"
-          >
-
-
         <!-- 👉 Hier werden die Bücher aufgelistet. -->
 
         <VCol
@@ -305,13 +123,11 @@
           <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"
-                  width="150"
                   height="300px"
-                  :src="harryPotter1"
+                  :src="harry_potter"
-                  />
+                />
-                -->
               </div>
 
               <VDivider :vertical="$vuetify.display.mdAndUp" />
@@ -319,149 +135,11 @@
               <div>
                 <VCardTitle>Harry Potter</VCardTitle>
                 <VCardText>
-                  <div style="position: relative; height: 120px">
+<!--                <div style="position: relative; height: 120px">-->
                     <!--              Fieberkurve -->
-                    <canvas
-                      id="myCanvas"
-                      width="240"
-                      height="130"
-                    >
-                      Your browser does not support the HTML canvas tag.
-                    </canvas>
-
-                    <div class="FieberkurveGesamt">
-                      <div
-                        class="Fieberkurve"
-                        @click="FevercurveIsClicked('schwierigkeit')"
-                      >
-                        <input
-                          id="myRange"
-                          v-model="schwierigkeit"
-                          type="range"
-                          min="1"
-                          max="7"
-                          class="slider"
-                          :style="{ color: '#000000' }"
-                        >
-                        <div
-                          class="slider-track"
-                          :style="{ backgroundColor: ColorRow1 }"
-                        />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                      </div>
-                      <!--                :style="{ backgroundColor: vuetifyTheme.current.value.colors.primary }" -->
-
-
-                      <div
-                        class="Fieberkurve"
-                        @click="FevercurveIsClicked('stimmung')"
-                      >
-                        <input
-                          id="myRange"
-                          v-model="stimmung"
-                          type="range"
-                          min="1"
-                          max="7"
-                          class="slider"
-                        >
-                        <div
-                          class="slider-track"
-                          :style="{ backgroundColor: ColorRow2 }"
-                        />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                      </div>
-
-                      <div
-                        class="Fieberkurve"
-                        @click="FevercurveIsClicked('spannung')"
-                      >
-                        <input
-                          id="myRange"
-                          v-model="spannung"
-                          type="range"
-                          min="1"
-                          max="7"
-                          class="slider"
-                        >
-                        <div
-                          class="slider-track"
-                          :style="{ backgroundColor: ColorRow3 }"
-                        />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                      </div>
-
-                      <div
-                        class="Fieberkurve"
-                        @click="FevercurveIsClicked('gewalt')"
-                      >
-                        <input
-                          id="myRange"
-                          v-model="gewalt"
-                          type="range"
-                          min="1"
-                          max="7"
-                          class="slider"
-                        >
-                        <div
-                          class="slider-track"
-                          :style="{ backgroundColor: ColorRow4 }"
-                        />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                      </div>
-
-                      <div
-                        class="Fieberkurve"
-                        @click="FevercurveIsClicked('erotik')"
-                      >
-                        <input
-                          id="myRange5"
-                          v-model="erotik"
-                          type="range"
-                          min="1"
-                          max="7"
-                          class="slider"
-                          :class="{ backgroundColor: '#e70707' }"
-                        >
-                        <div
-                          class="slider-track"
-                          :style="{ backgroundColor: ColorRow5 }"
-                        />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                        <div class="kreis" />
-                      </div>
-                    </div>
-                  </div>
                 </VCardText>
 
+
                 <VCardText>
                   Harry Potter ist eine Kinder- und Jugendromanreihe der englischen Schriftstellerin Joanne K. Rowling. ...
                 </VCardText>
@@ -498,6 +176,8 @@
 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 { useTheme } from "vuetify"
 
 const message = ref('')
@@ -596,40 +276,18 @@ const checkboxContent = [
 ]
 
 const selectedCheckbox = ref([])
-const toggleCheckboxOne = ref(true)
 
-const schwierigkeit = ref(4)
+// const toggleCheckboxOne = ref(true)
-const stimmung = ref(4)
+// const genreBool = ref(false)
-const spannung = ref(4)
-const gewalt = ref(4)
-const erotik = ref(4)
 
-const genreBool = ref(false)
 
-const isResetButtonPressed = ref(false)
-const firstClick = ref(false)
 
-const ColorRow1 = ref('#a8a6a6')
-const ColorRow2 = ref('#a8a6a6')
-const ColorRow3 = ref('#a8a6a6')
-const ColorRow4 = ref('#a8a6a6')
-const ColorRow5 = ref('#a8a6a6')
 
-const genre1Color = ref('#a8a6a6')
+// const genre1Color = ref('#a8a6a6')
 
-const isRow1Active = ref(false)
+// let activeGenre = []
-const isRow2Active = ref(false)
-const isRow3Active = ref(false)
-const isRow4Active = ref(false)
-const isRow5Active = ref(false)
 
-// const genre1 = ref(true)
+/*let genres = [{
-// const genre2 = ref(true)
-// const genre3 = ref(true)
-
-let activeGenre = []
-
-let genres = [{
   id: 1,
   name: "Horror",
   icon: "tabler-ghost-2",
@@ -657,27 +315,25 @@ let genres = [{
   color: "#9fa8da",
   icon: "tabler-ghost-2",
   bool: false,
-}]
+}]*/
 
-const abenteuerBool = ref(false)
+// const abenteuerBool = ref(false)
-const people = ref(['Mike'])
+// const people = ref(['Mike'])
 
-function TestGenreActive(genre, bool){
+/*function TestGenreActive(genre, bool){
   console.log("Hey Genre:", genre, bool)
   bool = !bool
   console.log("Bye Genre:", genre, bool)
 
   return bool
 
-}
+}*/
 
-
+/*function IsGenreActive(genre) {
-
-function IsGenreActive(genre) {
   return activeGenre.includes(genre)
-}
+}*/
 
-function  ToggleIsGenreSelected(genre) {
+/*function  ToggleIsGenreSelected(genre) {
   console.log('IsGenreActive', IsGenreActive(genre))
   console.log('ToggleIsGenreSelected genre', genre)
   if (IsGenreActive(genre)){
@@ -691,17 +347,15 @@ function  ToggleIsGenreSelected(genre) {
     console.log(`else values: ${activeGenre}`)
   }
 
-
-
   // this.genreBool = !this.genreBool
-  /*genre.bool = !genre.bool
+  /!*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)
@@ -709,7 +363,7 @@ function  ToggleIsGenreSelected(genre) {
   // console.log("genres id", genre.id)
   // console.log("genres icon", genre.icon)
   // console.log("genres color", genre.color)
-  /*genre.selected = !genre.selected
+  /!*genre.selected = !genre.selected
   if (!genre.selected) {
     genre.color = "#cccccc" + "!important"
     console.log("IF !genre.selected", genre.selected, genre.color)
@@ -719,87 +373,14 @@ function  ToggleIsGenreSelected(genre) {
   }
 
   // genre.color = "#cccccc" + "!important"
-  console.log("genreNew", genre, genre.color)*/
+  console.log("genreNew", genre, genre.color)*!/
-}
+}*/
-
-function FevercurveIsClicked(RowValue) {
-  isResetButtonPressed.value = true
-  switch (RowValue) {
-  case "schwierigkeit":
-    console.log("Line: 1")
-    ColorRow1.value = '#cccccc'
-    isRow1Active.value = true
-    break
-  case "stimmung":
-    console.log("Line: 2")
-    ColorRow2.value = '#cccccc'
-    isRow2Active.value = true
-    break
-  case "spannung":
-    console.log("Line: 3")
-    ColorRow3.value = '#cccccc'
-    isRow3Active.value = true
-    break
-  case "gewalt":
-    console.log("Line: 4")
-    ColorRow4.value = '#cccccc'
-    isRow4Active.value = true
-    break
-  case "erotik":
-    console.log("Line: 5")
-    ColorRow5.value = '#cccccc'
-    isRow5Active.value = true
-    break
-  }
-  console.log("firstClick:", firstClick.value)
-
-  if (!firstClick.value) {
-    rowFevercurveConnectors()
-  }
-  firstClick.value = true
-}
-
-function resetFevercurve() {
-  if (!isResetButtonPressed.value) {
-    return
-  }
-  console.log("reset Fevercurve")
-
-  isResetButtonPressed.value = false
-  firstClick.value = false
-
-  ColorRow1.value = '#a8a6a6'
-  ColorRow2.value = '#a8a6a6'
-  ColorRow3.value = '#a8a6a6'
-  ColorRow4.value = '#a8a6a6'
-  ColorRow5.value = '#a8a6a6'
-
-  isRow1Active.value = false
-  isRow2Active.value = false
-  isRow3Active.value = false
-  isRow4Active.value = false
-  isRow5Active.value = false
-
-  schwierigkeit.value = 4
-  stimmung.value = 4
-  spannung.value = 4
-  gewalt.value = 4
-  erotik.value = 4
-
-  clearFevercurveConnectors()
-}
 
 // lifecycle hooks
 /*onMounted(() => {
   // rowFevercurveConnectors()
 })*/
 
-watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
-  if (isResetButtonPressed.value){
-    rowFevercurveConnectors()
-  }
-})
-
 /*computed() {
   genreBackgroundColor() {
     return (genreId) => {
@@ -807,169 +388,9 @@ watch([schwierigkeit, stimmung, spannung, gewalt, erotik], () => {
     }
   }
 }*/
-
-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() {
-  console.log("Funktion wird aufgerufen")
-
-  let c = document.getElementById("myCanvas")
-  let ctx = c.getContext("2d")
-
-  //settings
-  // let gradient = ctx.createLinearGradient(182, 5, 41, 100)
-  // gradient.addColorStop("0", "#3f5efb")
-  // gradient.addColorStop("1.0", "#b60529")
-  // ctx.strokeStyle = gradient
-  ctx.strokeStyle = "red"
-  ctx.lineWidth = 4
-
-  // clear canvas
-  ctx.clearRect(0, 0, c.width, c.height)
-  ctx.beginPath()
-
-  let Breite = 240
-  let Hoehe = 130
-  let Kreis = 20
-
-  ctx.moveTo(((schwierigkeit.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((1 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
-  ctx.lineTo(((stimmung.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((2 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
-  ctx.lineTo(((spannung.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((3 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
-  ctx.lineTo(((gewalt.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((4 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
-  ctx.lineTo(((erotik.value - 1) * ((Breite - Kreis) / 6) + (Kreis / 2)), ((5 - 1) * ((Hoehe - Kreis) / 4) + (Kreis / 2)))
-
-  ctx.stroke()
-}
 </script>
 
 <style scoped lang="scss">
-//Grid Layout
-.item1 {
-  grid-area: txtLinks;
-  background: transparent !important;
-}
-
-.item2 {
-  grid-area: Fieberkurve;
-  background: transparent !important;
-}
-
-.item3 {
-  grid-area: txtRechts;
-  background: transparent !important;
-}
-
-.grid-container {
-  display: grid;
-  grid-template-areas: 'txtLinks Fieberkurve txtRechts';
-  gap: 10px;
-  justify-content: center;
-  line-height: 26px;
-}
-
-.grid-container > div {
-  background-color: rgba(255, 255, 255, 0.8);
-}
-
-//Grid Layout END
-
-
-canvas {
-  z-index: 2;
-  //border:1px solid #000000;
-  position: absolute;
-}
-
-.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: #27c21f;
-  //padding: ;
-  border-radius: 25px;
-}
-
-.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 {
-  z-index: 3;
-  width: 100%;
-  position: absolute;
-  //top: 10px;
-  -webkit-appearance: none;
-
-  //background: #c29c1f;
-  //height: 7.5px;
-  //margin-top: 3.5px;
-
-  //background: rgba(50, 150, 11, 0.81);
-  outline: none;
-  //border: 5px solid rgba(232, 64, 64, 0.83);
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.slider-track {
-  position: absolute;
-  width: 100%;
-  border-radius: 8px;
-  //background: #bb2626;
-  height: 10px;
-  margin-top: 5px;
-}
-
-
-/*  Kreis  */
-/* for chrome/safari */
-.slider::-webkit-slider-thumb {
-  //z-index: 4;
-  -webkit-appearance: none;
-  appearance: none;
-  width: 20px;
-  height: 20px;
-  background: #F07D00;
-  cursor: pointer;
-  //border: 5px solid red;
-  border-radius: 100%;
-}
-
-/* for firefox */
-.slider::-moz-range-thumb {
-  width: 20px;
-  height: 20px;
-  background: #000;
-  cursor: pointer;
-  //border: 5px solid lawngreen;
-  border-radius: 4px;
-}
-
-
 .genre-section-main {
   display: flex;
 }

src/pages/testfieberkurven.vue

@@ -0,0 +1,21 @@
+<script setup>
+
+import Fieberkurve from "@/components/Fieberkurve.vue";
+</script>
+
+<template>
+  <Fieberkurve :show-reset-button="true" :show-categories="true" />
+  <hr>
+  <br>
+  <Fieberkurve :show-reset-button="false" :show-categories="true" />
+  <br>
+  <hr>
+  <br>
+  <Fieberkurve :show-reset-button="false" :show-categories="false" />
+  <br>
+  <hr>
+</template>
+
+<style scoped lang="scss">
+
+</style>

typed-router.d.ts

@@ -41,9 +41,11 @@ declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
     'root': RouteRecordInfo<'root', '/', Record<never, never>, Record<never, never>>,
     '$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>>,
     'buechersuche': RouteRecordInfo<'buechersuche', '/buechersuche', Record<never, never>, Record<never, never>>,
     'login': RouteRecordInfo<'login', '/login', Record<never, never>, Record<never, never>>,
+    'testfieberkurven': RouteRecordInfo<'testfieberkurven', '/testfieberkurven', Record<never, never>, Record<never, never>>,
   }
 }