feat: Add cage calc that shows requirements for a number of rats

public/i18n/de.json

@@ -8,8 +8,8 @@
   "depth-cm": "Tiefe (cm)",
   "height-cm": "Höhe (cm)",
   "full-floors": "Vollebenen",
-  "number-of-rats": "Anzahl an Ratten",
   "result": "Ergebnis",
+  "number-of-rats": "Anzahl an Ratten",
   "change-language": "Sprache ändern",
   "failed-base-area": "Die Mindestgrundfläche des Käfigs muss {{ MINIMUM_BASE_AREA }}m² (also z.B. 100x50cm) betragen.",
   "failed-overall-area": "Die Gesamtfläche im Käfig ist zu klein.",
@@ -18,6 +18,12 @@
   "failed-num-rats": "Es müssen mindestens 3 Ratten zusammenleben, Paarhaltung ist nicht artgerecht.",
   "failed-minimum-length-long-side": "Die lange Seite des Käfig muss mindestens {{ minimum_length_long_side }}cm lang sein um Rennen zu ermöglichen.",
   "failed-minimum-length-short-side": "Die kurze Seite des Käfig muss mindestens {{ minimum_length_short_side }}cm lang sein.",
+  "base-area": "Die Mindestgrundfläche des Käfigs muss {{ MINIMUM_BASE_AREA }}m² betragen.",
+  "fall-height": "Die mögliche Fallhöhe darf nicht mehr als {{ maximum_fall_height }}cm betragen.",
+  "floor-height": "Der Mindestabstand zwischen Ebenen muss {{ minimum_floor_height }}cm betragen.",
+  "minimum-length-long-side": "Die lange Seite des Käfig muss mindestens {{ minimum_length_long_side }}cm lang sein um Rennen zu ermöglichen.",
+  "minimum-length-short-side": "Die kurze Seite des Käfig muss mindestens {{ minimum_length_short_side }}cm lang sein.",
   "cage-complies-with-all-criteria": "Der Käfig erfüllt alle Kriterien!",
-  "cage-for-x-rats": "Käfig für {{ num_rats }} Ratten"
+  "cage-for-x-rats": "Käfig für {{ num_rats }} Ratten",
+  "overall-area": "Die Gesamtfläche für {{ numRats }} Ratten muss mindestens {{ minimumOverallArea }}m² betragen."
 }

public/i18n/en.json

@@ -8,8 +8,8 @@
   "depth-cm": "Depth (cm)",
   "height-cm": "Height (cm)",
   "full-floors": "Full floors",
-  "number-of-rats": "Number of Rats",
   "result": "Result",
+  "number-of-rats": "Number of Rats",
   "change-language": "Change language",
   "failed-base-area": "The base area of the cage must not be below {{ MINIMUM_BASE_AREA }}m².",
   "failed-overall-area": "The overall area in the cage is to small.",
@@ -18,6 +18,12 @@
   "failed-num-rats": "Rats must live in a group of at least three rats, pairs or lone rats are not species-appropriate.",
   "failed-minimum-length-long-side": "The long side of the cage must be at least {{ minimum_length_long_side }}cm long to enable running.",
   "failed-minimum-length-short-side": "The short side of the cage must be at least {{ minimum_length_short_side }}cm.",
+  "base-area": "The base area of the cage must not be below {{ MINIMUM_BASE_AREA }}m².",
+  "fall-height": "The possible fall height between floors must not be above {{ maximum_fall_height }}cm.",
+  "floor-height": "The height between floors must be above {{ minimum_floor_height }}cm.",
+  "minimum-length-long-side": "The long side of the cage must be at least {{ minimum_length_long_side }}cm long to enable running.",
+  "minimum-length-short-side": "The short side of the cage must be at least {{ minimum_length_short_side }}cm.",
   "cage-complies-with-all-criteria": "This cage complies with all criteria!",
-  "cage-for-x-rats": "Cage for {{ num_rats }} rats"
+  "cage-for-x-rats": "Cage for {{ num_rats }} rats",
+  "overall-area": "The overall area in the cage must be above {{ minimumOverallArea }}m² for {{ numRats }} rats."
 }

public/index.html

@@ -119,7 +119,29 @@
         </div>
     </div>
     <div class="" data-content-id="2">
-        <p>Here is a list of cages you can get.</p>
+        <div class="card">
+            <div class="card-content">
+                <h2 class="title is-4"><label data-i18n="number-of-rats"
+                                              for="cage-calc">Anzahl der Ratten</label></h2>
+                <form id="cage-calc">
+                    <div class="column">
+                        <label id="cageCalcLabelNumRats" for="cageCalcNumRats"></label>
+                        <input type="range" min="3" max="15" value="4" class="slider" id="cageCalcNumRats">
+                        <img class="inline-icon" src="assets/img/logo_transparent.png" alt="Kleine Ratte">
+                    </div>
+                </form>
+            </div>
+            <div class="card-footer is-fullwidth">
+                <div class="card result-card" id="cage-calc-result-card">
+                    <div class="card-header">
+                        <h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
+                    </div>
+                    <div class="card-content">
+                        <div id="cageCalcResultsDiv"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
     <div class="" data-content-id="3">
         <div class="card">