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

src/index.js

@@ -71,7 +71,6 @@ function bindLocaleSwitcher(initialValue) {
 //////////
 
 
-
 function initTabs(tabs, tabContent, activationClass) {
     tabs.forEach((tab) => {
         tab.addEventListener('click', (e) => {
@@ -122,13 +121,21 @@ const MINIMUM_LENGTH_LONG_SIDE = 0.8;
 const MINIMUM_LENGTH_SHORT_SIDE = 0.5;
 const MINIMUM_FLOOR_HEIGHT = 0.25;
 
-const FAILED_BASE_AREA = "base_area";
-const FAILED_OVERALL_AREA = "overall_area";
-const FAILED_FALL_HEIGHT = "fall_height";
-const FAILED_NUM_RATS = "num_rats";
-const FAILED_MINIMUM_LENGTH_LONG_SIDE = "length_long_side";
-const FAILED_MINIMUM_LENGTH_SHORT_SIDE = "length_short_side";
-const FAILED_FLOOR_HEIGHT = "floor_height"
+const FAILED_BASE_AREA = "failed_base_area";
+const FAILED_OVERALL_AREA = "failed_overall_area";
+const FAILED_FALL_HEIGHT = "failed_fall_height";
+const FAILED_NUM_RATS = "failed_num_rats";
+const FAILED_MINIMUM_LENGTH_LONG_SIDE = "failed_length_long_side";
+const FAILED_MINIMUM_LENGTH_SHORT_SIDE = "failed_length_short_side";
+const FAILED_FLOOR_HEIGHT = "failed_floor_height"
+
+
+const CRITERIA_BASE_AREA = "base_area";
+const CRITERIA_FALL_HEIGHT = "fall_height";
+const CRITERIA_MINIMUM_LENGTH_LONG_SIDE = "length_long_side";
+const CRITERIA_MINIMUM_LENGTH_SHORT_SIDE = "length_short_side";
+const CRITERIA_FLOOR_HEIGHT = "floor_height"
+const CRITERIA_OVERALL_AREA = "overall_area"
 
 
 class Validator {
@@ -142,6 +149,13 @@ class Validator {
             [FAILED_MINIMUM_LENGTH_LONG_SIDE]: i18next.t("failed-minimum-length-long-side", {"minimum_length_long_side": (MINIMUM_LENGTH_LONG_SIDE * 100).toFixed(0)}),
             [FAILED_MINIMUM_LENGTH_SHORT_SIDE]: i18next.t("failed-minimum-length-short-side", {"minimum_length_short_side": (MINIMUM_LENGTH_SHORT_SIDE * 100).toFixed(0)}),
         };
+        this.STATIC_CRITERIA = {
+            [CRITERIA_BASE_AREA]: i18next.t('base-area', {"MINIMUM_BASE_AREA": MINIMUM_BASE_AREA}),
+            [CRITERIA_FALL_HEIGHT]: i18next.t("fall-height", {"maximum_fall_height": (MAXIMUM_FALL_HEIGHT * 100).toFixed(0)}),
+            [CRITERIA_FLOOR_HEIGHT]: i18next.t("floor-height", {"minimum_floor_height": (MINIMUM_FLOOR_HEIGHT * 100).toFixed(0)}),
+            [CRITERIA_MINIMUM_LENGTH_LONG_SIDE]: i18next.t("minimum-length-long-side", {"minimum_length_long_side": (MINIMUM_LENGTH_LONG_SIDE * 100).toFixed(0)}),
+            [CRITERIA_MINIMUM_LENGTH_SHORT_SIDE]: i18next.t("minimum-length-short-side", {"minimum_length_short_side": (MINIMUM_LENGTH_SHORT_SIDE * 100).toFixed(0)}),
+        }
     }
 
     overallAreaNeeded(numOfRats) {
@@ -155,8 +169,8 @@ class Validator {
         /*
         Calculates the number of rats that are allowed for a certain overall area.
          */
-        let result = 3.0 + (overallArea-MINIMUM_AREA_THREE_RATS) / AREA_PER_ADDITIONAL_RAT;
-        console.log(`Area left: ${overallArea-MINIMUM_AREA_THREE_RATS}`);
+        let result = 3.0 + (overallArea - MINIMUM_AREA_THREE_RATS) / AREA_PER_ADDITIONAL_RAT;
+        console.log(`Area left: ${overallArea - MINIMUM_AREA_THREE_RATS}`);
         console.log(`Result: ${result}`);
         if (result < 3) {
             throw new Error("Cages must be for three rats or more");
@@ -243,6 +257,10 @@ class Dimensions {
 // DOCUMENT INTERACTION //
 //////////////////////////
 
+///////
+// 1 //
+///////
+
 const numRatsCalculatorInputWidth = document.getElementById("num-rats-width");
 numRatsCalculatorInputWidth.onchange = updateNumRatsCalculator;
 const numRatsCalculatorInputDepth = document.getElementById("num-rats-depth");
@@ -255,6 +273,23 @@ numRatsNumFullFloors.oninput = function () {
     updateNumRatsCalculator();
 }
 
+///////
+// 2 //
+///////
+
+
+let cageCalcLabelNumRats = document.getElementById("cageCalcLabelNumRats");
+
+let cageCalcRatSlider = document.getElementById("cageCalcNumRats");
+
+cageCalcRatSlider.oninput = function () {
+    updateCageCalc();
+}
+
+
+///////
+// 3 //
+///////
 
 const inputWidth = document.getElementById("width");
 inputWidth.onchange = updateCageCheck;
@@ -295,6 +330,18 @@ function getResultFromChecks(checks) {
 
 }
 
+
+function formatCriteria(criteria) {
+    const ul = document.createElement('ul');
+    for (const key in criteria) {
+        const li = document.createElement('li');
+        li.textContent = `☑️ ` + criteria[key];
+        ul.appendChild(li);
+    }
+    return ul;
+
+}
+
 function updateCageCheck() {
     labelNumRats.innerHTML = i18next.t("cage-for-x-rats", {"num_rats": ratSlider.value});
 
@@ -312,6 +359,23 @@ function updateCageCheck() {
     resultsDiv.appendChild(result);
 }
 
+function updateCageCalc() {
+    let numRats = cageCalcRatSlider.value
+    cageCalcLabelNumRats.innerHTML = i18next.t("cage-for-x-rats", {"num_rats": numRats});
+    const validator = new Validator();
+    let criteria = validator.STATIC_CRITERIA;
+    let minimumOverallArea = validator.overallAreaNeeded(cageCalcRatSlider.value);
+    criteria[CRITERIA_OVERALL_AREA] = i18next.t('overall-area', {"numRats": numRats, "minimumOverallArea": minimumOverallArea});
+
+    let resultsDiv = document.getElementById("cageCalcResultsDiv");
+
+    const result = formatCriteria(criteria);
+
+    resultsDiv.innerHTML = "";
+    resultsDiv.appendChild(result);
+
+}
+
 function updateNumRatsCalculator() {
 
     const width = numRatsCalculatorInputWidth.value

src/main.scss

@@ -28,6 +28,10 @@ body {
   width: 100%;
 }
 
+.inline-icon {
+  height: 1.5rem;
+}
+
 // Import the Google Font
 @import url("https://fonts.googleapis.com/css?family=Nunito:400,700");