Fieberkurve: Einzelnes Deaktivieren durch Klick auf denselben Punkt

src/components/Fieberkurve.vue

@@ -81,11 +81,11 @@ const props = defineProps({
   defaultValues: {
     type: Array,
     default: () => [
-      { value: 4, clicked: false },
+      { value: 4, clicked: false, lastClickedValue: null },
-      { value: 4, clicked: false },
+      { value: 4, clicked: false, lastClickedValue: null },
-      { value: 4, clicked: false },
+      { value: 4, clicked: false, lastClickedValue: null },
-      { value: 4, clicked: false },
+      { value: 4, clicked: false, lastClickedValue: null },
-      { value: 4, clicked: false },
+      { value: 4, clicked: false, lastClickedValue: null },
     ],
   },
   hideText: { type: Boolean, default: false },
@@ -129,11 +129,22 @@ watch(
 )
 
 function handleClick(index) {
-  sliders.value[index].clicked = true
+  const clickedSlider = sliders.value[index]
+  const currentValue = Number(clickedSlider.value)
+
+  if (clickedSlider.clicked && clickedSlider.lastClickedValue === currentValue) {
+    // Deaktivieren
+    clickedSlider.clicked = false
+    clickedSlider.value = 4
+    clickedSlider.lastClickedValue = null
+  } else {
+    clickedSlider.clicked = true
+    clickedSlider.lastClickedValue = currentValue
+  }
 
   const activeFilters = sliders.value
     .map((slider, idx) =>
-      slider.clicked ? {rowIndex: idx, value: Number(slider.value)} : null
+      slider.clicked ? { rowIndex: idx, value: Number(slider.value) } : null
     )
     .filter(Boolean)
 
@@ -144,17 +155,18 @@ function resetSliders() {
   sliders.value.forEach(slider => {
     slider.value = 4
     slider.clicked = false
+    slider.lastClickedValue = null
   })
 
   emit("filter-by-row", [])
 }
 
 function updateLine() {
-  // optional: Linienanimation etc.
+  // Optional: Linienanimation
 }
 
 onMounted(() => {
-  // Initial
+  // Init
 })
 </script>