Büchersuche: Einfügen/Fehlerbehebung des Multifilters der Fieberkurve (für gefundene Bücher)

src/components/Fieberkurve.vue

@@ -89,7 +89,6 @@ const props = defineProps({
 })
 
 const emit = defineEmits(["update:values", "filter-by-row"])
-
 defineExpose({ resetSliders })
 
 const sliders = ref([...props.defaultValues])
@@ -123,24 +122,33 @@ 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
   })
-}
 
-function handleClick(index) {
+  emit("filter-by-row", [])
-  sliders.value[index].clicked = true
-  emit("filter-by-row", { rowIndex: index, value: sliders.value[index].value })
 }
 
 function updateLine() {
-  // Optional: Linien-Update
+  // Linien-Update falls nötig
 }
 
 onMounted(() => {
-  // Initial
+  // Initialisierung falls nötig
 })
 </script>
 
@@ -226,7 +234,6 @@ onMounted(() => {
 }
 
 .slider.clicked::-webkit-slider-thumb {
-  //background-color: rgb(var(--v-theme-error));
   background-color: #f45246;
 }
 
@@ -253,12 +260,10 @@ 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;
 }
 
@@ -280,6 +285,7 @@ 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]); // Standardwerte für die Fieberkurve
+const fieberkurveValues = ref([4, 4, 4, 4, 4]);
-const fieberkurveRowFilter = ref({ rowIndex: null, value: null });
+const fieberkurveRowFilter = ref([]);
 
 const filteredBooks = computed(() => {
   return books.filter((book) => {
@@ -137,17 +137,18 @@ const filteredBooks = computed(() => {
       ) ||
       book.isbn?.includes(message.value);
 
-    const matchesFieberkurve = fieberkurveValues.value.every((value, index) => {
+    const hasRowFilters = fieberkurveRowFilter.value.length > 0;
+
+    const matchesFieberkurve = !hasRowFilters && fieberkurveValues.value.every((value, index) => {
       const bookValue = book.fieberkurve[index]?.value || 4;
       return value === 4 || value === bookValue;
     });
 
-    const matchesRowFilter =
+    const matchesFieberkurveRowFilters = hasRowFilters && fieberkurveRowFilter.value.every(({ rowIndex, value }) => {
-      fieberkurveRowFilter.value.rowIndex === null ||
+      return book.fieberkurve[rowIndex]?.value === value;
-      book.fieberkurve[fieberkurveRowFilter.value.rowIndex].value ===
+    });
-      fieberkurveRowFilter.value.value;
 
-    return matchesGenres && matchesText && matchesFieberkurve && matchesRowFilter;
+    return matchesGenres && matchesText && (matchesFieberkurve || matchesFieberkurveRowFilters);
   });
 });
 
@@ -174,7 +175,7 @@ const resetAllSettings = () => {
   selectedCheckbox.value = [];
   fieberkurveRef.value?.resetSliders();
   message.value = "";
-  fieberkurveRowFilter.value = { rowIndex: null, value: null };
+  fieberkurveRowFilter.value = [];
   resetFeedback.value = true;
 
   setTimeout(() => {
@@ -186,9 +187,9 @@ const updateFieberkurveValues = (values) => {
   fieberkurveValues.value = values;
 };
 
-const filterByRow = (filter) => {
+const filterByRow = (activeFilters) => {
-  fieberkurveRowFilter.value = filter;
+  fieberkurveRowFilter.value = activeFilters;
-  console.log("Filter gesetzt:", filter);
+  console.log("Aktive Fieberkurvenfilter:", activeFilters);
 };
 </script>
 
@@ -233,5 +234,3 @@ const filterByRow = (filter) => {
   margin-bottom: 1.5rem;
 }
 </style>
-
-

src/pages/index.vue

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