src/components/Fieberkurve.vue

@@ -89,6 +89,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(["update:values", "filter-by-row"])
+
 defineExpose({ resetSliders })
 
 const sliders = ref([...props.defaultValues])
@@ -122,33 +123,24 @@ watch(
   { deep: true },
 )
 
-function handleClick(index) {
-  sliders.value[index].clicked = true
-
-  const activeFilters = sliders.value
-    .map((slider, idx) =>
-      slider.clicked ? { rowIndex: idx, value: Number(slider.value) } : null
-    )
-    .filter(Boolean)
-
-  emit("filter-by-row", activeFilters)
-}
-
 function resetSliders() {
   sliders.value.forEach(slider => {
     slider.value = 4
     slider.clicked = false
   })
+}
 
-  emit("filter-by-row", [])
+function handleClick(index) {
+  sliders.value[index].clicked = true
+  emit("filter-by-row", { rowIndex: index, value: sliders.value[index].value })
 }
 
 function updateLine() {
-  // Linien-Update falls nötig
+  // Optional: Linien-Update
 }
 
 onMounted(() => {
-  // Initialisierung falls nötig
+  // Initial
 })
 </script>
 
@@ -234,6 +226,7 @@ onMounted(() => {
 }
 
 .slider.clicked::-webkit-slider-thumb {
+  //background-color: rgb(var(--v-theme-error));
   background-color: #f45246;
 }
 
@@ -260,10 +253,12 @@ onMounted(() => {
 
 .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;
 }
 
@@ -285,7 +280,6 @@ onMounted(() => {
 
 
 
-
 <!-- Alter Code Michi von Fieberkurve 19.01.2025 -->
 
 <!--

src/pages/buechersuche.vue

@@ -120,8 +120,8 @@ import { genres } from "@/components/genredatenbank";
 const message = ref("");
 const loading = ref(false);
 const selectedCheckbox = ref([]);
-const fieberkurveValues = ref([4, 4, 4, 4, 4]);
-const fieberkurveRowFilter = ref([]);
+const fieberkurveValues = ref([4, 4, 4, 4, 4]); // Standardwerte für die Fieberkurve
+const fieberkurveRowFilter = ref({ rowIndex: null, value: null });
 
 const filteredBooks = computed(() => {
   return books.filter((book) => {
@@ -137,18 +137,17 @@ const filteredBooks = computed(() => {
       ) ||
       book.isbn?.includes(message.value);
 
-    const hasRowFilters = fieberkurveRowFilter.value.length > 0;
-
-    const matchesFieberkurve = !hasRowFilters && fieberkurveValues.value.every((value, index) => {
+    const matchesFieberkurve = fieberkurveValues.value.every((value, index) => {
       const bookValue = book.fieberkurve[index]?.value || 4;
       return value === 4 || value === bookValue;
     });
 
-    const matchesFieberkurveRowFilters = hasRowFilters && fieberkurveRowFilter.value.every(({ rowIndex, value }) => {
-      return book.fieberkurve[rowIndex]?.value === value;
-    });
+    const matchesRowFilter =
+      fieberkurveRowFilter.value.rowIndex === null ||
+      book.fieberkurve[fieberkurveRowFilter.value.rowIndex].value ===
+      fieberkurveRowFilter.value.value;
 
-    return matchesGenres && matchesText && (matchesFieberkurve || matchesFieberkurveRowFilters);
+    return matchesGenres && matchesText && matchesFieberkurve && matchesRowFilter;
   });
 });
 
@@ -175,7 +174,7 @@ const resetAllSettings = () => {
   selectedCheckbox.value = [];
   fieberkurveRef.value?.resetSliders();
   message.value = "";
-  fieberkurveRowFilter.value = [];
+  fieberkurveRowFilter.value = { rowIndex: null, value: null };
   resetFeedback.value = true;
 
   setTimeout(() => {
@@ -187,9 +186,9 @@ const updateFieberkurveValues = (values) => {
   fieberkurveValues.value = values;
 };
 
-const filterByRow = (activeFilters) => {
-  fieberkurveRowFilter.value = activeFilters;
-  console.log("Aktive Fieberkurvenfilter:", activeFilters);
+const filterByRow = (filter) => {
+  fieberkurveRowFilter.value = filter;
+  console.log("Filter gesetzt:", filter);
 };
 </script>
 
@@ -234,3 +233,5 @@ const filterByRow = (activeFilters) => {
   margin-bottom: 1.5rem;
 }
 </style>
+
+

src/pages/index.vue

@@ -6,8 +6,7 @@
         :src="skoutzLogo"
         class="mx-auto d-block"
       />
-      <h2 class="text-h4 text-center mt-4">BUCHSUCHE</h2>
-
+      <h2>BUCHSUCHE</h2>
       <VCardItem>
         <VCardTitle>Vorbeischauen – Vergleichen – Verlieben</VCardTitle>
       </VCardItem>