From eab39d0d79efa7b4dff638c410228e18029570bd Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Wed, 31 Jul 2024 19:38:59 +0200
Subject: [PATCH] trans: fix various translation issues in active components

---
 public/index.html   | 2 +-
 public/lang/de.json | 3 ++-
 public/lang/en.json | 3 ++-
 src/index.js        | 8 ++++----
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index 6366c3f..34ff623 100644
--- a/public/index.html
+++ b/public/index.html
@@ -116,7 +116,7 @@
 
         <div class="input-element">
             <div class="slidecontainer">
-                <label for="numRats" id="labelNumRats" data-i18n-key="number-of-rats">Anzahl an Ratten ?</label>
+                <label for="numRats" id="labelNumRats"></label>
                 <input type="range" min="3" max="15" value="4" class="slider" id="numRats">
             </div>
         </div>
diff --git a/public/lang/de.json b/public/lang/de.json
index ee24c40..220c92f 100644
--- a/public/lang/de.json
+++ b/public/lang/de.json
@@ -18,5 +18,6 @@
   "alt-savic-95-double": "Bild eines dekorierten Käfigs, des Savic Suite Royale 95 Double. Auf insgesamt vie Vollebenen sind Holz- und Papphäusschen, Hängematten, Futterschalen und mehr.",
   "alt-tiaki": "Bild des Tiaki-Käfigs, ein Drahtkäfig mit vier Türen die erlauben die gesamte Vorderseite zu öffnen. Auf halber Höhe ist eine weitere Vollebene.",
   "cage-measurements": "Käfigmaße",
-  "cage-complies-with-all-criteria": "Der Käfig erfüllt alle Kriterien!"
+  "cage-complies-with-all-criteria": "Der Käfig erfüllt alle Kriterien!",
+  "cage-for-x-rats": "Käfig für {{ num_rats }} Ratten"
 }
\ No newline at end of file
diff --git a/public/lang/en.json b/public/lang/en.json
index 95afba8..2a1d03c 100644
--- a/public/lang/en.json
+++ b/public/lang/en.json
@@ -18,5 +18,6 @@
   "alt-savic-95-double": "A picture of a decorated wire bar cage with four doors that allow to open the full front of the cage. Inside there are hammocks, toys and four full floors with lots of hides",
   "alt-tiaki": "A picture of a decorated wire bar cage with four doors that allow to open the full front of the cage.",
   "cage-measurements": "Cage measurements",
-  "cage-complies-with-all-criteria": "This cage complies with all criteria!"
+  "cage-complies-with-all-criteria": "This cage complies with all criteria!",
+  "cage-for-x-rats": "Cage for {{ num_rats }} rats"
 }
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 7bb124e..b27f7a2 100644
--- a/src/index.js
+++ b/src/index.js
@@ -52,7 +52,8 @@ function bindLocaleSwitcher(initialValue) {
     switcher.onchange = (e) => {
         i18next
             .changeLanguage(e.target.value)
-            .then(translatePageElements);
+            .then(translatePageElements)
+            .then(update);
     };
 }
 
@@ -229,10 +230,7 @@ var labelNumRats = document.getElementById("labelNumRats");
 
 var ratSlider = document.getElementById("numRats");
 
-labelNumRats.innerHTML = `Anzahl an Ratten: ` + ratSlider.value;
-
 ratSlider.oninput = function () {
-    labelNumRats.innerHTML = `Anzahl an Ratten: ` + this.value;
     update();
 }
 
@@ -274,6 +272,8 @@ function updateViaManualMeasurements() {
 }
 
 function update() {
+    labelNumRats.innerHTML = i18next.t("cage-for-x-rats", {"num_rats": ratSlider.value});
+
     const width = inputWidth.value
     const depth = inputDepth.value
     const height = inputHeight.value