moanos/RattenheimRechner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add cages from json

Browse Source
This commit is contained in:
moanos [he/him] 2024-09-15 18:06:38 +02:00
parent 8e0adf54a2
commit 3808aafa88
2 changed files with 101 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -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"/>

101
src/index.js
View File

@ -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);
});