Skip to content

Commit 063bac3

Browse files
GuertelwalGuertelwal
authored
lasercut-preisrechner hinzugefügt
1 parent d326398 commit 063bac3

File tree

1 file changed

+201
-0
lines changed

1 file changed

+201
-0
lines changed

‎lasercut-preisrechner.html‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
<!--
2+
SPDX-FileCopyrightText: 2023 Johann Galle
3+
SPDX-License-Identifier: Unlicense
4+
-->
5+
<!DOCTYPE html>
6+
<html>
7+
<head>
8+
<meta charset="utf-8">
9+
<title>Lasercutter Preisrechner fablab Cottbus e.V.</title>
10+
<style>
11+
body {
12+
text-align: center;
13+
max-width: 80em;
14+
margin: auto;
15+
font-family: sans-serif;
16+
font-size: 1.2em;
17+
font-variant-numeric: tabular-nums;
18+
}
19+
noscript {
20+
color: red;
21+
}
22+
table {
23+
margin: auto;
24+
border-collapse: collapse;
25+
border: 1px solid grey;
26+
vertical-align: top;
27+
}
28+
td, th {
29+
text-align: right;
30+
padding: .5em .1em .5em .7em;
31+
}
32+
td:last-child, th:last-child {
33+
padding-right: .7em;
34+
}
35+
th {
36+
text-align: center;
37+
border-bottom: 2px solid black;
38+
}
39+
tr:nth-child(2n) {
40+
background: lightgrey;
41+
}
42+
tr > .unit {
43+
text-align: left;
44+
padding-left: .1em;
45+
}
46+
.grandtotal {
47+
border-bottom: 3px double black;
48+
vertical-align: top;
49+
}
50+
</style>
51+
</head>
52+
<body>
53+
<noscript>
54+
Zum Ausführen der Berechnungen wird JavaScript verwendet.
55+
Wenn JavaScript nicht verfügbar oder nicht aktiviert ist, kann dieser Rechner leider nicht verwendet werden.
56+
</noscript>
57+
<h1>Lasercutter Preisrechner</h1>
58+
<h2>fablab Cottbus e.V.</h2>
59+
<table>
60+
<thead>
61+
<tr>
62+
<th>Beschreibung</th>
63+
<th colspan="2">Grundpreis</th>
64+
<th colspan="2">Multiplikator</th>
65+
<th>Summe</th>
66+
</tr>
67+
</thead>
68+
<tbody>
69+
<tr>
70+
<td><label for="vorbereiten-in">Datei für Bearbeitung vorbereiten</label></td>
71+
<td>15.00</td>
72+
<td class="unit" aria-label="Euro">€</td>
73+
<td><input type="number" id="vorbereiten-in" value="0" min="0" max="1" step="1"/></td>
74+
<td class="unit"></td>
75+
<td><output id="vorbereiten-out">?</output> €</td>
76+
</tr>
77+
<tr>
78+
<td><label for="konvertieren-in">Aus anderem Dateiformat konvertieren</label></td>
79+
<td>5.00</td>
80+
<td class="unit" aria-label="Euro">€</td>
81+
<td><input type="number" id="konvertieren-in" value="0" min="0" max="1" step="1"/></td>
82+
<td class="unit"></td>
83+
<td><output id="konvertieren-out">?</output> €</td>
84+
</tr>
85+
<tr>
86+
<td><label for="anpassen-in">Datei anpassen</label></td>
87+
<td>20.00</td>
88+
<td class="unit" aria-label="Euro pro Stunde">€/h</td>
89+
<td><input type="number" id="anpassen-in" value="0.0" min="0" step="0.1"/></td>
90+
<td class="unit" aria-label="Stunden">h</td>
91+
<td><output id="anpassen-out">?</output> €</td>
92+
</tr>
93+
<tr>
94+
<td><label for="tests-in">Tests zur Machbarkeit bzw. Maßgenauigkeit</label></td>
95+
<td>20.00</td>
96+
<td class="unit" aria-label="Euro pro Stunde">€/h</td>
97+
<td><input type="number" id="tests-in" value="0.0" min="0" step="0.1"/></td>
98+
<td class="unit" aria-label="Stunden">h</td>
99+
<td><output id="tests-out">?</output> €</td>
100+
</tr>
101+
<tr>
102+
<td><label for="abschreibung-in">Abschreibung Lasercutter</label></td>
103+
<td>0.50</td>
104+
<td class="unit" aria-label="Euro pro Minute">€/min</td>
105+
<td rowspan="2"><input type="number" id="abschreibung-in" value="1.0" min="0.1" step="0.1"/></td>
106+
<td rowspan="2" class="unit" aria-label="Minuten">min</td>
107+
<td><output id="abschreibung-out">?</output> €</td>
108+
</tr>
109+
<tr>
110+
<td>Anteilige Wartungskosten (Kalibrierung, Reparaturen)</td>
111+
<td>0.70</td>
112+
<td class="unit" aria-label="Euro pro Minute">€/min</td>
113+
<td><output id="wartung-out">?</output> €</td>
114+
</tr>
115+
<tr>
116+
<td><label for="rabatt-in">Rabatt</label></td>
117+
<td colspan="4">
118+
<select id="rabatt-in">
119+
<option selected value="0">keiner (kommerziell)</option>
120+
<option value="0.25">Privatpersonen (-25 %)</option>
121+
<option value="0.5">Sozialrabatt (-50 %)</option>
122+
<option value="0.75">eigenständig arbeitende Mitglieder (-75 %)</option>
123+
</select>
124+
</td>
125+
<td><output id="rabatt-out">?</output> €</td>
126+
</tr>
127+
<tr>
128+
<td colspan="5">Zwischensumme ohne Material</td>
129+
<td class="total"><output id="zws-ohne-mat">?</output> €</td>
130+
</tr>
131+
<tr>
132+
<td>
133+
<label for="material-factor">Material</label>
134+
<select id="material-factor">
135+
<option value="31">Buche 3mm</option>
136+
<option value="35">Plexiglas 3mm</option>
137+
<option value="28">Pappel 3mm</option>
138+
</select>
139+
</td>
140+
<td><output id="material-preis"></output></td>
141+
<td class="unit" aria-label="Euro pro Platte">€/Platte</td>
142+
<td><input type="number" id="material-in" value="0.0" min="0" aria-label="Anzahl Platten"/></td>
143+
<td class="unit" aria-hidden="true">Platte(n)</td>
144+
<td><output id="material-out">?</output> €</td>
145+
</tr>
146+
<tr>
147+
<td colspan="5">Preis</td>
148+
<td><div class="grandtotal"><output id="total-out">?</output> €</div></td>
149+
</tr>
150+
</tbody>
151+
</table>
152+
<script>
153+
function setOutput(outputId, value) {
154+
const output = document.getElementById(outputId);
155+
156+
if (isNaN(value)) {
157+
output.innerText = "?";
158+
return value;
159+
} else {
160+
output.innerText = value.toFixed(2);
161+
return value;
162+
}
163+
}
164+
165+
function calculate(inputId, factor, outputId) {
166+
const inputValue = parseFloat(document.getElementById(inputId).value);
167+
return setOutput(
168+
outputId,
169+
Math.round(inputValue * factor * 100) / 100);
170+
}
171+
172+
/// Computes and updates all reactive fields.
173+
function updateTotals() {
174+
let total = (
175+
calculate("vorbereiten-in", 15, "vorbereiten-out")
176+
+ calculate("konvertieren-in", 5, "konvertieren-out")
177+
+ calculate("anpassen-in", 20, "anpassen-out")
178+
+ calculate("tests-in", 20, "tests-out")
179+
+ calculate("abschreibung-in", 0.5, "abschreibung-out")
180+
+ calculate("abschreibung-in", 0.7, "wartung-out")
181+
);
182+
183+
const rabatt = Math.round(total * parseFloat(document.getElementById("rabatt-in").value) * 100) / 100;
184+
setOutput("rabatt-out", -rabatt);
185+
total -= rabatt;
186+
setOutput("zws-ohne-mat", total);
187+
188+
const materialFactor = parseFloat(document.getElementById("material-factor").value);
189+
setOutput("material-preis", materialFactor);
190+
total += calculate("material-in", materialFactor, "material-out");
191+
192+
setOutput("total-out", total);
193+
}
194+
195+
// Initialize reactivity.
196+
document.querySelectorAll("input, select").forEach(elem => elem.addEventListener("input", updateTotals));
197+
// Initialize totals from currently selected/inputted values.
198+
updateTotals();
199+
</script>
200+
</body>
201+
</html>

0 commit comments

Comments
 (0)