diff --git a/src/index.js b/src/index.js
index 1f5448c..c3dea5f 100644
--- a/src/index.js
+++ b/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
diff --git a/src/main.scss b/src/main.scss
index 6be5d0a..125c624 100644
--- a/src/main.scss
+++ b/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");