From 6c301452966dc0a83a748aa96597963d471257e9 Mon Sep 17 00:00:00 2001
From: Dirk Heilig <heilig@adesso-mobile.de>
Date: Sun, 24 Nov 2024 14:59:58 +0100
Subject: [PATCH] update calculator, add warning and minimum price

---
 content/calc/index.html | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)
diff --git a/content/calc/index.html b/content/calc/index.html
index a141f10..609238c 100644
--- a/content/calc/index.html
+++ b/content/calc/index.html
@@ -1,14 +1,18 @@
-<html class=theme-light><meta charset=UTF-8><title>3D-Druck Kostenrechner</title>
-<script>const pricePerPrintingHourInEuro=.3,pricePerMaterialGrammInEuro=.025,roundUpStep=.5,identifierAddition=.03</script><link rel=stylesheet href=./bulma.min.css><meta name=viewport content="width=device-width,initial-scale=1"><div class=block id=filamentcalc><style>body{padding:2em;background-color:#f5f5f5}.box{border:.125em solid #dbdbdb}#logo{float:right;position:absolute;top:0;right:0}.selected{filter:brightness(90%);text-decoration:underline}.box{margin:2em auto 0;max-width:50em}.b button{float:right;margin-right:1em}input{margin-left:1em;width:5em}h2{margin-bottom:.5em;font-weight:700}li{list-style:none}</style><section class=hero><div class=hero-body><h1 class=title>3D-Druck Filamentkostenrechner</h1><p id=logo class="image is-128x128"><img src=logo.png></div></section><div class="columns box"><div class="column is-full b">Wo kommt dein Filament her?
-<button class=button id=pool_filament>Pool Filament</button>
-<button class=button id=own_filament>
-Eigenes/Spenden- Filament</button></div></div><div class="columns box step2"><div class=column><label for=printtime_h>Druckzeit</label></div><div class=column><input id=printtime_h class=half type=number min=0 max=1000 step=1 placeholder=0>
-<label for=printtime_h>h</label>
-<input id=printtime_m class=half type=number min=0 max=5000 step=1 placeholder=0>
-<label for=printtime_m>m</label></div></div><div class="columns box step2 material"><div class=column><label for=material>Materialmenge</label></div><div class=column><input id=material type=number min=0 max=1000 step=1 placeholder=0>
-<label for=material>g</label></div></div><div class="columns box step2"><div class=column><label for=cost_euro>Kosten in €</label></div><div class=column><input id=cost_euro aria-disabled=true disabled></div></div><div class="columns box step2"><div class="column is-two"><h2>Wie entsteht der Preis?</h2><ul><li>Pro Druckstunde fallen <span id=pricePerHour>...</span> € Kosten
-für Strom und Verschleiß an.<li>Pool-Filament wird mit <span id=pricePerMaterial>...</span> €
-pro kg berechnet.<li>Beide Kosten werden addiert und auf die nächsten
-<span id=roundUpLimit>...</span> € aufgerundet.<span id=idtext>
+<html class=theme-light><meta charset=UTF-8><title>3D-Druck Kostenrechner</title><script>const pricePerPrintingHourInEuro=.3,pricePerMaterialGrammInEuro=.025,roundUpStep=.5,minimumCost=1,identifierAddition=.03</script><link rel=stylesheet href=./bulma.min.css><meta name=viewport content="width=device-width,initial-scale=1"><div class=block id=filamentcalc><style>body{padding:2em;background-color:#f5f5f5}#below_minimum{display:none;color:#a33}.box{border:.125em solid #dbdbdb}.box>.column{padding:.5em}#logo{float:right;position:absolute;top:0;right:0}.selected{filter:brightness(90%);text-decoration:underline}.box{margin:2em auto 0;max-width:50em}.b button{float:right;margin-right:1em}input{margin-left:1em;width:5em}h2{margin-bottom:.5em;font-weight:700}li{list-style:none}</style><section class=hero><div class=hero-body><h1 class=title>3D-Druck Filamentkostenrechner</h1><p id=logo class="image is-128x128"><img src=logo.png></div></section><div class="columns box"><div class="column is-full b">Wo kommt dein Filament her?
+    <button class=button id=pool_filament>Pool Filament</button>
+    <button class=button id=own_filament>
+        Eigenes/Spenden- Filament</button></div></div><div class="columns box"><div class="column is-full warning"></div><h2>Achtung!</h2><p>Es ist für die Abrechnung wichtig, das du den genauen Betrag überweist
+    und weder aufrundest noch die 3ct abziehst!</div><div class="columns box step2"><div class=column><label for=printtime_h>Druckzeit</label></div><div class=column><input id=printtime_h class=half type=number min=0 max=1000 step=1 placeholder=0>
+    <label for=printtime_h>h</label>
+    <input id=printtime_m class=half type=number min=0 max=5000 step=1 placeholder=0>
+    <label for=printtime_m>m</label></div></div><div class="columns box step2 material"><div class=column><label for=material>Materialmenge</label></div><div class=column><input id=material type=number min=0 max=1000 step=1 placeholder=0>
+    <label for=material>g</label></div></div><div class="columns box step2"><div class=column><label for=cost_euro>Kosten in €</label></div><div class=column><input id=cost_euro aria-disabled=true disabled>
+    <span id=below_minimum>Deine tatsächlichen Druckkosten sind unter dem technischen Minimum
+von <span class=minimum></span>€. Es wird auf
+<span class=minimum></span>€ aufgerundet. Gerne kannst du weitere
+Kleinteile mit Drucken um das auszugleichen.</span></div></div><div class="columns box step2"><div class="column is-two"><h2>Wie entsteht der Preis?</h2><ul><li>Pro Druckstunde fallen <span id=pricePerHour>...</span> € Kosten
+    für Strom und Verschleiß an.<li>Pool-Filament wird mit <span id=pricePerMaterial>...</span> €
+    pro kg berechnet.<li>Beide Kosten werden addiert und auf die nächsten
+    <span id=roundUpLimit>...</span> € aufgerundet.<span id=idtext>
 (Zusätzlich wird <span id=idval></span> € addiert damit wir
-auf der Abrechnung den Verwendungszweck erkennen können.)</span></ul></div></div></div><script>const pool_filament=document.getElementById("pool_filament"),own_filament=document.getElementById("own_filament"),step1=document.getElementsByClassName("step1"),step2=document.getElementsByClassName("step2"),printtime_h=document.getElementById("printtime_h"),printtime_m=document.getElementById("printtime_m"),material=document.getElementById("material"),cost_euro=document.getElementById("cost_euro");let ownFilament;pool_filament.addEventListener("click",function(){for(let e=0;e<step2.length;e++)step2[e].style.display="flex";ownFilament=!1,updateCost()}),own_filament.addEventListener("click",function(){for(let e=0;e<step2.length;e++){const t=step2[e];t.classList.contains("material")?t.style.display="none":t.style.display="flex"}ownFilament=!0,updateCost()}),printtime_h.addEventListener("input",updateCost),printtime_m.addEventListener("input",updateCost),material.addEventListener("input",updateCost);function updateCost(){pricePerHour.innerHTML=pricePerPrintingHourInEuro.toFixed(2),pricePerMaterial.innerHTML=(pricePerMaterialGrammInEuro*1e3).toFixed(2),roundUpLimit.innerHTML=roundUpStep.toFixed(2),idval.innerHTML=identifierAddition.toFixed(2),identifierAddition===0?idtext.style.display="none":idtext.style.display="inherit";const t=parseInt("0"+printtime_h.value)*60+parseInt("0"+printtime_m.value),n=parseInt("0"+material.value)*pricePerMaterialGrammInEuro;let e=t*pricePerPrintingHourInEuro/60;ownFilament||(e+=n),e=Math.ceil(e/roundUpStep)*roundUpStep,e>0&&(e+=identifierAddition),console.log(e),cost_euro.value=e.toFixed(2)+" €",ownFilament?(own_filament.classList.add("selected"),pool_filament.classList.remove("selected")):(pool_filament.classList.add("selected"),own_filament.classList.remove("selected"))}updateCost()</script>
\ No newline at end of file
+auf der Abrechnung den Verwendungszweck erkennen können.)</span></ul></div></div></div><script>const pool_filament=document.getElementById("pool_filament"),own_filament=document.getElementById("own_filament"),step1=document.getElementsByClassName("step1"),step2=document.getElementsByClassName("step2"),printtime_h=document.getElementById("printtime_h"),printtime_m=document.getElementById("printtime_m"),material=document.getElementById("material"),cost_euro=document.getElementById("cost_euro");let ownFilament;pool_filament.addEventListener("click",function(){for(let e=0;e<step2.length;e++)step2[e].style.display="flex";ownFilament=!1,updateCost()}),own_filament.addEventListener("click",function(){for(let e=0;e<step2.length;e++){const t=step2[e];t.classList.contains("material")?t.style.display="none":t.style.display="flex"}ownFilament=!0,updateCost()}),printtime_h.addEventListener("input",updateCost),printtime_m.addEventListener("input",updateCost),material.addEventListener("input",updateCost);function updateCost(){for(let e of document.querySelectorAll(".minimum"))e.innerHTML=minimumCost.toFixed(2);pricePerHour.innerHTML=pricePerPrintingHourInEuro.toFixed(2),pricePerMaterial.innerHTML=(pricePerMaterialGrammInEuro*1e3).toFixed(2),roundUpLimit.innerHTML=roundUpStep.toFixed(2),idval.innerHTML=identifierAddition.toFixed(2),identifierAddition===0?idtext.style.display="none":idtext.style.display="inherit";const n=parseInt("0"+printtime_h.value)*60+parseInt("0"+printtime_m.value),s=parseInt("0"+material.value)*pricePerMaterialGrammInEuro;let e=n*pricePerPrintingHourInEuro/60;ownFilament||(e+=s);let t=!1;e+roundUpStep<minimumCost&&e>0&&(t=!0,e=minimumCost),t?document.getElementById("below_minimum").style.display="inherit":document.getElementById("below_minimum").style.display="none",e=Math.ceil(e/roundUpStep)*roundUpStep,e>0&&(e+=identifierAddition),cost_euro.value=e.toFixed(2)+" €",ownFilament?(own_filament.classList.add("selected"),pool_filament.classList.remove("selected")):(pool_filament.classList.add("selected"),own_filament.classList.remove("selected"))}updateCost()</script>
\ No newline at end of file
