From 04dc1e6b90fdcbfca98043e901d038e9ff2679f2 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Sat, 20 Jul 2024 08:47:41 +0200
Subject: [PATCH] fix: cage selector

---
 src/index.html | 60 +++++++++++++++++++++++++++-----------------------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/index.html b/src/index.html
index 18aba53..5613b5f 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,34 +14,34 @@
         <div class="cage-selector">
             <div class="card">
                 <div class="card-photo">
-                    <input type="checkbox" id="selectSavicSuiteRoyleXL"/>
+                    <input type="checkbox" id="SavicSuiteRoyaleXL"/>
                     <div>
                         <img src="assets/img/savic-xl.jpeg">
                     </div>
                 </div>
-                <label for="selectSavicSuiteRoyleXL"> 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="selectSavicSuiteRoyle95Double"/>
+                    <input type="checkbox" id="SavicSuiteRoyale95Double"/>
                     <div>
                         <img src="assets/img/savic-95-double.jpg">
                     </div>
                 </div>
-                <label for="selectSavicSuiteRoyle95Double">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="selectTiakiKleintierkäfigEtagere"/>
+                    <input type="checkbox" id="TiakiKleintierkäfigEtagere"/>
                     <div>
                         <img src="assets/img/tiaki.jpeg">
                     </div>
                 </div>
-                <label for="selectTiakiKleintierkäfigEtagere">TIAKI Kleintierkäfig Étagère</label>
+                <label for="TiakiKleintierkäfigEtagere">TIAKI Kleintierkäfig Étagère</label>
             </div>
 
             <div class="card">
@@ -95,27 +95,31 @@
 
 
 
-    const selectSavicSuiteRoyleXL = document.getElementById("selectSavicSuiteRoyleXL");
-    const selectSavicSuiteRoyle95Double = document.getElementById("selectSavicSuiteRoyle95Double");
-    const selectTiakiKleintierkäfigEtagere = document.getElementById("selectTiakiKleintierkäfigEtagere");
+    const selectSavicSuiteRoyaleXL = document.getElementById("SavicSuiteRoyaleXL");
+    const selectSavicSuiteRoyale95Double = document.getElementById("SavicSuiteRoyale95Double");
+    const selectTiakiKleintierkäfigEtagere = document.getElementById("TiakiKleintierkäfigEtagere");
 
-    function updateCage(selectedCage) {
-        selectSavicSuiteRoyleXL.checked = false;
-        selectSavicSuiteRoyle95Double.checked = false;
+    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;
-        const dim = getCageDimensions(cageName);
+
+        console.log(cageName);
+        var dim = getCageDimensions(cageName);
         inputWidth.value = dim.width;
         inputDepth.value = dim.depth;
         inputHeight.value = dim.height;
 
-
-
+        update();
     }
-    selectSavicSuiteRoyleXL.onselect = updateCage;
-    selectSavicSuiteRoyle95Double.onselect = updateCage;
-    selectTiakiKleintierkäfigEtagere.onselect = updateCage;
+
+    selectSavicSuiteRoyaleXL.onchange = updateCage;
+    selectSavicSuiteRoyale95Double.onchange = updateCage;
+    selectTiakiKleintierkäfigEtagere.onchange = updateCage;
 
 
     var labelNumRats = document.getElementById("labelNumRats");
@@ -133,14 +137,15 @@
     var fullFloorNum = document.getElementById("numFullFloors");
 
     function getCageDimensions(cageName) {
+        console.log(cageName);
         if (cageName == "SavicSuiteRoyaleXL") {
-            return new Dimensions(1, 0.5, 1);
+            return new Dimensions(115, 67.5, 153);
         }
         if (cageName == "SavicSuiteRoyale95Double") {
-            return new Dimensions(1, 0.5, 1);
+            return new Dimensions(95, 63, 120);
         }
         if (cageName == "TiakiKleintierkäfigEtagere") {
-            return new Dimensions(1, 0.5, 1);
+            return new Dimensions(93.5, 63, 141.2);
         }
     }
 
@@ -163,12 +168,13 @@
     }
 
     function update() {
-        const width = inputWidth.value / 100
-        const depth = inputDepth.value / 100
-        const height = inputHeight.value / 100
-        const dimensions = new Dimensions(width, depth, height)
-        var failed_checks = cageCheck(dimensions, 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);