feat: add cages from json

public/index.html

@@ -31,7 +31,7 @@
 <div class="content">
     <h1 data-i18n-key="app-name">Käfigrechner</h1>
     <div class="container-form">
-        <div class="cards">
+        <div class="cards" id="container-cages">
             <div class="card" id="card-SavicSuiteRoyaleXL">
                 <label for="SavicSuiteRoyaleXL">
                     <input type="checkbox" id="SavicSuiteRoyaleXL"/>

src/index.js

@@ -2,6 +2,50 @@ import i18next from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import HttpApi from "i18next-http-backend";
 
+
+///////////////
+// CAGE DATA //
+///////////////
+
+const cages_dict = [
+    {
+        "name": "SavicSuiteRoyal95Double",
+        "dimensions": {
+            "width": 95,
+            "depth": 63,
+            "height": 120
+        },
+        "description": {
+            "en": "A european cage that (with added floors) is suitable for 4-7 rats",
+            "de": "Ein eurpäischer Käfig der mit zwei zusätzliche Ebenen für 4-7 Ratten geeignet ist. Oft lässt sich der Käfig auch gebraucht kaufen"
+        },
+        "images": {
+            "1": {
+                "path": "assets/img/savic-95-double.jpg",
+                "alt": "Bild eines Gitterkäfigs mit Türen die die gesamte Front öffnen."
+            }
+        }
+    },
+    {
+        "name": "SavicSuiteRoyalXL",
+        "dimensions": {
+            "width": 115,
+            "depth": 67.5,
+            "height": 153
+        },
+        "description": {
+            "en": "A european cage that (with added floors) is suitable for 4-9 rats",
+            "de": "Ein eurpäischer Käfig der mit zwei zusätzliche Ebenen für 4-9 Ratten geeignet ist. Oft lässt sich der Käfig auch gebraucht kaufen"
+        },
+        "images": {
+            "1": {
+                "path": "assets/img/savic-xl.jpeg",
+                "alt": "Bild eines Gitterkäfigs mit Türen die die gesamte Front öffnen."
+            }
+        }
+    }
+]
+
 /////////////////
 // TRANSLATION //
 /////////////////
@@ -139,7 +183,6 @@ class Validator {
     }
 
 
-
 }
 
 class Dimensions {
@@ -178,6 +221,55 @@ inputDepth.onchange = updateViaManualMeasurements;
 const inputHeight = document.getElementById("height");
 inputHeight.onchange = updateViaManualMeasurements;
 
+function createCageCard(cageName, cageImages) {
+    console.log(cageImages);
+    // Create the card div
+    const cardDiv = document.createElement('div');
+    cardDiv.className = 'card';
+    cardDiv.id = 'card-'+cageName;
+
+    // Create the label element
+    const label = document.createElement('label');
+    label.setAttribute('for', cageName);
+
+    // Create the checkbox input element
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    checkbox.id = cageName;
+
+    const cardImageDiv = document.createElement('div');
+    cardImageDiv.className = 'card-photo';
+
+    const img = document.createElement('img');
+    img.setAttribute("alt-i18n-key", 'alt-savic-xl');
+    img.src = cageImages[1].path;
+
+    // Append image to card-photo div
+    cardImageDiv.appendChild(img);
+
+    // Create the info-container div and heading
+    const infoContainerDiv = document.createElement('div');
+    infoContainerDiv.className = 'info-container';
+
+    const heading = document.createElement('h4');
+    heading.innerHTML = '<b>'+ cageName + '</b>';
+
+    // Append heading to info-container div
+    infoContainerDiv.appendChild(heading);
+
+    // Append elements to label
+    label.appendChild(checkbox);
+    label.appendChild(cardImageDiv);
+    label.appendChild(infoContainerDiv);
+
+    // Append label to cardDiv
+    cardDiv.appendChild(label);
+
+    // Append cardDiv to the body or a specific element
+    let containerForCages = document.getElementById("container-cages");
+    containerForCages.appendChild(cardDiv); // Change to a specific parent element if needed
+}
+
 
 const selectSavicSuiteRoyaleXL = document.getElementById("SavicSuiteRoyaleXL");
 const selectSavicSuiteRoyale95Double = document.getElementById("SavicSuiteRoyale95Double");
@@ -301,3 +393,10 @@ function increaseFloorNum() {
     input.value = value + 1;
     update();
 }
+
+
+cages_dict.forEach((cage) => {
+    console.log(cage.images);
+    createCageCard(cage.name, cage.images);
+});
+