fix: cage selector

src/index.html

@@ -14,34 +14,34 @@
         <div class="cage-selector">
             <div class="card">
                 <div class="card-photo">
-                    <input type="checkbox" id="savic-xl"/>
+                    <input type="checkbox" id="SavicSuiteRoyaleXL"/>
                     <div>
                         <img src="assets/img/savic-xl.jpeg">
                     </div>
                 </div>
-                <label for="savic-xl"> Savic Suite Royale XL</label>
+                <label for="SavicSuiteRoyaleXL"> Savic Suite Royale XL</label>
             </div>
 
 
             <div class="card">
                 <div class="card-photo">
-                    <input type="checkbox" id="savic-95"/>
+                    <input type="checkbox" id="SavicSuiteRoyale95Double"/>
                     <div>
                         <img src="assets/img/savic-95-double.jpg">
                     </div>
                 </div>
-                <label for="savic-95">Savic Suite Royale 95 Double</label>
+                <label for="SavicSuiteRoyale95Double">Savic Suite Royale 95 Double</label>
             </div>
 
 
             <div class="card">
                 <div class="card-photo">
-                    <input type="checkbox" id="tiaki"/>
+                    <input type="checkbox" id="TiakiKleintierkäfigEtagere"/>
                     <div>
                         <img src="assets/img/tiaki.jpeg">
                     </div>
                 </div>
-                <label>TIAKI Kleintierkäfig Étagère</label>
+                <label for="TiakiKleintierkäfigEtagere">TIAKI Kleintierkäfig Étagère</label>
             </div>
 
             <div class="card">
@@ -50,15 +50,15 @@
                     <label for="form-cage-measurements">Käfigmaße</label>
                     <form id="form-cage-measurements" class="form-measurements">
                         <div class="input-measurement">
-                            <label for="width">Breite</label>
+                            <label for="width">Breite (cm)</label>
                             <input class="measurement" type="number" id="width">
                         </div>
                         <div class="input-measurement">
-                            <label for="depth">Tiefe</label>
+                            <label for="depth">Tiefe (cm)</label>
                             <input class="measurement" type="number" id="depth">
                         </div>
                         <div class="input-measurement">
-                            <label for="height">Höhe</label>
+                            <label for="height">Höhe (cm)</label>
                             <input class="measurement" type="number" id="height">
                         </div>
                     </form>
@@ -89,6 +89,39 @@
 </div>
 <script>
 
+    const inputWidth = document.getElementById("width");
+    const inputDepth = document.getElementById("depth");
+    const inputHeight = document.getElementById("height");
+
+
+
+    const selectSavicSuiteRoyaleXL = document.getElementById("SavicSuiteRoyaleXL");
+    const selectSavicSuiteRoyale95Double = document.getElementById("SavicSuiteRoyale95Double");
+    const selectTiakiKleintierkäfigEtagere = document.getElementById("TiakiKleintierkäfigEtagere");
+
+    function updateCage(event) {
+        console.log("dada");
+        selectSavicSuiteRoyaleXL.checked = false;
+        selectSavicSuiteRoyale95Double.checked = false;
+        selectTiakiKleintierkäfigEtagere.checked = false;
+        const selectedCage = event.currentTarget
+        selectedCage.checked = true;
+        const cageName = selectedCage.id;
+
+        console.log(cageName);
+        var dim = getCageDimensions(cageName);
+        inputWidth.value = dim.width;
+        inputDepth.value = dim.depth;
+        inputHeight.value = dim.height;
+
+        update();
+    }
+
+    selectSavicSuiteRoyaleXL.onchange = updateCage;
+    selectSavicSuiteRoyale95Double.onchange = updateCage;
+    selectTiakiKleintierkäfigEtagere.onchange = updateCage;
+
+
     var labelNumRats = document.getElementById("labelNumRats");
 
     var ratSlider = document.getElementById("numRats");
@@ -103,8 +136,18 @@
     // Full floor functions
     var fullFloorNum = document.getElementById("numFullFloors");
 
-
-    var savicSuiteRoyaleDim = new Dimensions(1, 0.5, 1);
+    function getCageDimensions(cageName) {
+        console.log(cageName);
+        if (cageName == "SavicSuiteRoyaleXL") {
+            return new Dimensions(115, 67.5, 153);
+        }
+        if (cageName == "SavicSuiteRoyale95Double") {
+            return new Dimensions(95, 63, 120);
+        }
+        if (cageName == "TiakiKleintierkäfigEtagere") {
+            return new Dimensions(93.5, 63, 141.2);
+        }
+    }
 
     function getResultFromChecks(checks) {
         console.log(checks.length)
@@ -125,8 +168,13 @@
     }
 
     function update() {
-        var failed_checks = cageCheck(savicSuiteRoyaleDim, ratSlider.value, fullFloorNum.value);
-        var resultsDiv = document.getElementById("resultsDiv");
+        const width = inputWidth.value
+        const depth = inputDepth.value
+        const height = inputHeight.value
+        const dimensions = new Dimensions(width/100, depth/100, height/100);
+        const failed_checks = cageCheck(dimensions, ratSlider.value, fullFloorNum.value);
+        console.log(failed_checks);
+        let resultsDiv = document.getElementById("resultsDiv");
         resultsDiv.innerHTML = `<strong>Ergebnis</strong>`;
 
         const result = getResultFromChecks(failed_checks);