feat: Style main result

fix: remove placeholder when result is calculated
fix: Cage checker
2025-04-18 09:27:26 +02:00 · 2025-04-18 09:27:12 +02:00 · 2025-04-18 08:37:12 +02:00 · 2025-04-18 08:27:11 +02:00 · 2025-04-18 08:14:38 +02:00 · 2025-04-18 01:00:41 +02:00
5 changed files with 51 additions and 18 deletions
--- a/public/i18n/de.json
+++ b/public/i18n/de.json
@@ -1,5 +1,6 @@
 {
-  "app-name": "Käfigrechner",
+  "title": "VdRD Käfigrechner für Ratten",
+  "app-name": "VdRD Käfigrechner für Ratten",
  "how-many-rats-does-this-cage-fit": "Wie viele Ratten passen in den Käfig?",
  "what-cage-should-i-get": "Käfiggröße rechnen",
  "check-existing-cage": "Käfig prüfen",
@@ -9,7 +10,11 @@
  "height-cm": "Höhe (cm)",
  "full-floors": "Vollebenen",
  "result": "Ergebnis",
+  "input-data-num-rats": "Bitte gib erst die Maße des Käfigs ein, dann siehst du hier die Anzahl der Ratten die hineinpassen.",
  "number-of-rats": "Anzahl an Ratten",
+  "please-input-cage-calc": "Stell ein für wie viel Ratten der Käfig sein soll, danach siehst du hier das Ergebnis.",
+  "please-input-cage-check": "Bitte gib erst die Maße des Käfigs und die Anzahl an Ratten ein. Danach siehst du hier, ob der Käfig passt.",
+  "give-feedback": "Feedback geben",
  "change-language": "Sprache ändern",
  "information-on-rat-husbandry": "Information",
  "basic-rat-info": "Basiswissen Ratten",
@@ -20,7 +25,6 @@
  "the-vdrd": "VdRD e.V.",
  "imprint": "Impressum",
  "source-code": "Quellcode",
-  "give-feedback": "Feedback geben",
  "feedback": "Feedback",
  "sus-title": "Bewerte den Rechner",
  "explanation-feedback": "Vielen Dank, dass du uns Feedback gibst! Dein Feedback hilft uns den Rechner zu verbessern. Wir sammeln dabei keinerlei persönliche Daten. Du tust uns einfach nur einen großen Gefallen!",
--- a/public/i18n/en.json
+++ b/public/i18n/en.json
@@ -1,5 +1,6 @@
 {
-  "app-name": "Cage Calculator",
+  "title": "VdRD Rat Cage Calculator",
+  "app-name": "VdRD Rat Cage Calculator",
  "how-many-rats-does-this-cage-fit": "How many rats does this cage fit?",
  "what-cage-should-i-get": "Calculate cage size",
  "check-existing-cage": "Check cage",
@@ -9,7 +10,11 @@
  "height-cm": "Height (cm)",
  "full-floors": "Full floors",
  "result": "Result",
+  "input-data-num-rats": "Please input them measurements of the cage. Then you will see the number of rats allowed.",
  "number-of-rats": "Number of Rats",
+  "please-input-cage-calc": "First put in how many rats should fit the cage. After that come back here.",
+  "please-input-cage-check": "First put in how many rats should fit the cage and the cages measurements. After that come back here to see if they fit.",
+  "give-feedback": "Give Feedback",
  "change-language": "Change language",
  "information-on-rat-husbandry": "Information",
  "basic-rat-info": "Basic Rat Information",
@@ -20,7 +25,6 @@
  "the-vdrd": "VdRD r.V.",
  "imprint": "Imprint",
  "source-code": "Source Code",
-  "give-feedback": "Give Feedback",
  "feedback": "Feedback",
  "sus-title": "Rate the calculator",
  "explanation-feedback": "Thank you for giving us feedback! We will use your feedback to improve the calculator.",
--- a/public/index.html
+++ b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
 <head>
    <meta charset="UTF-8">
-    <title>Käfigrechner</title>
+    <title data-i18n="title">VdRD Käfigrechner</title>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="description"
          content="Rechner für die Größe eines Rattenkäfigs basierend auf den Empfehlungen des VdRD e.V.">
@@ -17,7 +17,7 @@
    <div class="navbar-brand">
        <div class="navbar-item">
            <img src="assets/img/logo_vdrd.png" alt="VdRD Log">
-            <h1 data-i18n="app-name" class="title is-3">Käfigrechner</h1>
+            <h1 data-i18n="app-name" class="title is-3">VdRD Käfigrechner für Ratten</h1>
        </div>
    </div>
 </div>
@@ -108,10 +108,16 @@
        <div class="card-footer is-fullwidth">
            <div class="card result-card" id="num-rats-result-card">
                <div class="card-header">
-                    <h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
+                    <h2 class="card-header-title title is-2 is-centered" data-i18n="result">Ergebnis</h2>
                </div>
                <div class="card-content">
-                    <div id="num-rats-resultsDiv"></div>
+                    <div class="is-size-5" id="num-rats-resultsDiv">
+                        <p data-i18n="input-data-num-rats">
+                            Bitte gib erst die Maße ein, dann siehst du hier die Anzahl
+                            der Ratten die hineinpassen.
+                        </p>
+
+                    </div>
                </div>
            </div>
        </div>
@@ -134,10 +140,12 @@
            <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>
+                        <h2 class="card-header-title title is-2 is-centered" data-i18n="result">Ergebnis</h2>
                    </div>
                    <div class="card-content">
-                        <div id="cageCalcResultsDiv"></div>
+                        <div class="is-size-5" id="cageCalcResultsDiv"></div>
+                        <p data-i18n="please-input-cage-calc">Stell ein für wie viel Ratten der Käfig sein soll, danach
+                            siehst du hier das Ergebnis</p>
                    </div>
                </div>
            </div>
@@ -209,16 +217,22 @@
        <div class="card-footer is-fullwidth">
            <div class="card result-card" id="result-card">
                <div class="card-header">
-                    <h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
+                    <h2 class="card-header-title title is-2 is-centered" data-i18n="result">Ergebnis</h2>
                </div>
                <div class="card-content">
-                    <div id="resultsDiv"></div>
+                    <div id="resultsDiv">
+                        <p data-i18n="please-input-cage-check">Bitte gib erst die Maße des Käfigs und die Anzahl an
+                            Ratten ein. Danach siehst du hier, ob der Käfig passt.</p>
+                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>

+<button class="button is-primary floating js-modal-trigger" data-target="modal-feedback"
+        data-i18n="give-feedback"></button>
+
 <div class="footer" aria-label="Footer">
    <div class="columns">
        <div class="column">
@@ -272,6 +286,7 @@
    </div>
 </div>

+
 <div id="modal-feedback" class="modal">

    <div class="modal-background"></div>
--- a/src/index.js
+++ b/src/index.js
@@ -346,16 +346,16 @@ function formatCriteria(criteria) {
 function updateCageCheck() {
    labelNumRats.innerHTML = i18next.t("cage-for-x-rats", {"num_rats": ratSlider.value});

-    const width = inputWidth.value
-    const depth = inputDepth.value
-    const height = inputHeight.value
+    const width = inputWidth.value;
+    const depth = inputDepth.value;
+    const height = inputHeight.value;
    const dimensions = new Dimensions(width / 100, depth / 100, height / 100);
    const validator = new Validator();
    const numRats = ratSlider.value;
    const numFullFloors = fullFloorNum.value;


-    const failed_checks = validator.cageCheck(dimensions, numRats,);
+    const failed_checks = validator.cageCheck(dimensions, numRats, numFullFloors);
    let resultsDiv = document.getElementById("resultsDiv");

    const result = getResultFromChecks(failed_checks);
@@ -409,7 +409,7 @@ function updateNumRatsCalculator() {
    const validator = new Validator();
    const failed_checks = validator.failCageNumberIndependent(dimensions, numFullFloors);

-    let overallArea = validator.getOverallArea(dimensions, );
+    let overallArea = validator.getOverallArea(dimensions, numFullFloors);
    let allowedNumRats;
    try {
        allowedNumRats = validator.allowedNumberOfRats(overallArea);
@@ -426,7 +426,8 @@ function updateNumRatsCalculator() {

    resultsDiv.innerHTML = "";
    const p = document.createElement('p');
-    p.textContent = i18next.t("cage-for-x-rats", {"num_rats": allowedNumRats});
+    p.textContent = i18next.t("cage-for-x-rats", {"num_rats": Math.floor(allowedNumRats)});
+    p.className = " is-size-5 has-text-weight-semibold"
    resultsDiv.appendChild(p);
    resultsDiv.appendChild(result);

--- a/src/main.scss
+++ b/src/main.scss
@@ -162,3 +162,12 @@ Reused from Notfellchen
  font-size: 0.9rem;
  margin-top: 0.25rem;
 }
+
+// FLOATING BUTTON
+
+.floating {
+  position: fixed;
+  border-radius: 0.3rem;
+  bottom: 4.5rem;
+  right: 1rem;
+}
Author	SHA1	Message	Date
moanos	666cc732bf	feat: Style main result All checks were successful ci/woodpecker/push/woodpecker Pipeline was successful Details	2025-04-18 09:27:26 +02:00
moanos	ecc3d418fc	fix: remove placeholder when result is calculated	2025-04-18 09:27:12 +02:00
moanos	154f550775	fix: Cage checker All checks were successful ci/woodpecker/push/woodpecker Pipeline was successful Details	2025-04-18 08:37:12 +02:00
moanos	cb71f61a91	feat: Fill yet empty result field	2025-04-18 08:27:11 +02:00
moanos	168e4acf6a	fix: Round down number of rats if not int	2025-04-18 08:14:38 +02:00
moanos	cfe305e698	feat: Adjust title based on language All checks were successful ci/woodpecker/push/woodpecker Pipeline was successful Details	2025-04-18 01:00:41 +02:00
moanos	1606c7dcf1	feat: add floating button to give feedback	2025-04-18 00:39:24 +02:00