From e3e065af1600131a4abc3ca5ddc1fae5ece66a1c Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Sun, 21 Jul 2024 22:55:10 +0200
Subject: [PATCH] feat: Make active cage

---
 src/assets/css/style.css |  4 ++++
 src/index.html           | 32 +++++++++++++++++++++++++++-----
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 7205ae0..80d413a 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -138,6 +138,10 @@ label {
     box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
 }
 
+.card-active {
+    border: 3px solid var(--highlight-two);
+}
+
 .info-container {
     padding: 2px 16px;
 }
diff --git a/src/index.html b/src/index.html
index ea8dda6..71292e6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -50,7 +50,7 @@
                 </label>
             </div>
 
-            <div class="card">
+            <div class="card" id="card-ManualMeasurements">
                 <label for="form-cage-measurements">Käfigmaße</label>
                 <form id="form-cage-measurements" class="form-measurements">
                     <div class="input-measurement">
@@ -93,19 +93,35 @@
 <script>
 
     const inputWidth = document.getElementById("width");
-    inputWidth.onchange = update;
+    inputWidth.onchange = updateViaManualMeasurements;
     const inputDepth = document.getElementById("depth");
-    inputDepth.onchange = update;
+    inputDepth.onchange = updateViaManualMeasurements;
     const inputHeight = document.getElementById("height");
-    inputHeight.onchange = update;
+    inputHeight.onchange = updateViaManualMeasurements;
 
 
     const selectSavicSuiteRoyaleXL = document.getElementById("SavicSuiteRoyaleXL");
     const selectSavicSuiteRoyale95Double = document.getElementById("SavicSuiteRoyale95Double");
     const selectTiakiKleintierkäfigEtagere = document.getElementById("TiakiKleintierkäfigEtagere");
 
+    const cardSavicSuiteRoyaleXL = document.getElementById("card-SavicSuiteRoyaleXL");
+    const cardSavicSuiteRoyale95Double = document.getElementById("card-SavicSuiteRoyale95Double");
+    const cardTiakiKleintierkäfigEtagere = document.getElementById("card-TiakiKleintierkäfigEtagere");
+
+
+    function markActiveCage(cageName) {
+
+        cardSavicSuiteRoyaleXL.classList.remove("card-active");
+        cardSavicSuiteRoyale95Double.classList.remove("card-active");
+        cardTiakiKleintierkäfigEtagere.classList.remove("card-active");
+        if (cageName != "") {
+            const activeCage = document.getElementById("card-" + cageName);
+            activeCage.classList.add("card-active")
+        }
+
+    }
+
     function updateCage(event) {
-        console.log("dada");
         selectSavicSuiteRoyaleXL.checked = false;
         selectSavicSuiteRoyale95Double.checked = false;
         selectTiakiKleintierkäfigEtagere.checked = false;
@@ -119,6 +135,8 @@
         inputDepth.value = dim.depth;
         inputHeight.value = dim.height;
 
+        markActiveCage(cageName);
+
         update();
     }
 
@@ -172,6 +190,10 @@
 
     }
 
+    function updateViaManualMeasurements () {
+        markActiveCage("ManualMeasurements");
+        update();
+    }
     function update() {
         const width = inputWidth.value
         const depth = inputDepth.value