Hugging Face's logo

Spaces:
DmitrMakeev
/
flask_inference_api_g
Sleeping

App Files Community
DmitrMakeev commited on
Commit
28e445e
·
verified ·
1 Parent(s): ee5a3eb

Delete calculate.html

Browse files
Files changed (1) hide show
  1. calculate.html +0 -808
calculate.html DELETED
@@ -1,808 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <link
5
- rel="stylesheet"
6
- href="https://use.fontawesome.com/releases/v5.12.1/css/all.css"
7
- crossorigin="anonymous"
8
- />
9
- <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
10
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
11
- <meta charset="UTF-8" />
12
- <title>Fertilizer-Calculator</title>
13
- <style>
14
- * {
15
- box-sizing: border-box;
16
- margin: 0;
17
- padding: 0;
18
- font-family: Arial, sans-serif;
19
- }
20
-
21
- body {
22
- background-color: #f4f4f4;
23
- }
24
-
25
- .convertSpalte {
26
- display: inline-block;
27
- margin: 1%;
28
- width: fit;
29
- background-color: white;
30
- border-radius: 10px;
31
- box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
32
- padding: 20px;
33
- box-sizing: border-box;
34
- }
35
-
36
- .spalte {
37
- display: inline-block;
38
- margin: 1%;
39
- width: 30%;
40
- background-color: white;
41
- border-radius: 10px;
42
- box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
43
- padding: 20px;
44
- box-sizing: border-box;
45
- }
46
-
47
- .sendButton {
48
- background-color: #4caf50;
49
- font-size: 15px;
50
- margin-bottom: 20px;
51
- font-weight: bold;
52
- color: white;
53
- padding: 10px;
54
- margin-top: 20px;
55
- margin-right: auto;
56
- margin-left: auto;
57
- border-radius: 10px;
58
- border: none;
59
- display: flex;
60
- }
61
-
62
- .addButton {
63
- background-color: #d8d6d6;
64
- font-size: 12px;
65
- margin-bottom: 20px;
66
- padding: 10px;
67
- margin-right: auto;
68
- margin-left: auto;
69
- border-radius: 10px;
70
- border: none;
71
- display: flex;
72
- }
73
-
74
- .center {
75
- margin: auto;
76
- width: 40%;
77
- padding: 20px;
78
- background-color: white;
79
- border-radius: 10px;
80
- box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
81
- }
82
-
83
- .center label {
84
- display: block;
85
- margin-bottom: 10px;
86
- font-size: 18px;
87
- font-weight: bold;
88
- }
89
-
90
- .center input[type="number"],
91
- .center select {
92
- width: 100%;
93
- padding: 10;
94
- border-radius: 5px;
95
- border: none;
96
- background-color: #f4f4f4;
97
- margin-bottom: 20px;
98
- font-size: 16px;
99
- }
100
-
101
- .center select {
102
- appearance: none;
103
- -webkit-appearance: none;
104
- background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-down-512.png")
105
- no-repeat;
106
- background-position: 95% center;
107
- background-size: 18px;
108
- cursor: pointer;
109
- }
110
-
111
- .center select:focus {
112
- outline: none;
113
- }
114
-
115
- .center input[type="submit"] {
116
- background-color: #4caf50;
117
- color: white;
118
- font-size: 16px;
119
- padding: 10px 20px;
120
- border: none;
121
- border-radius: 5px;
122
- cursor: pointer;
123
- margin-top: 20px;
124
- }
125
-
126
- .center input[type="submit"]:hover {
127
- background-color: #3e8e41;
128
- }
129
-
130
- label {
131
- display: block;
132
- margin-bottom: 10px;
133
- font-size: 16px;
134
- font-weight: bold;
135
- }
136
-
137
- input[type="number"] {
138
- width: 100%;
139
- padding: 10px;
140
- border-radius: 5px;
141
- border: none;
142
- background-color: #f4f4f4;
143
- margin-bottom: 20px;
144
- font-size: 16px;
145
- }
146
-
147
- input[type="number"]:focus {
148
- outline: none;
149
- }
150
-
151
- input[type="number"]::-webkit-inner-spin-button,
152
- input[type="number"]::-webkit-outer-spin-button {
153
- -webkit-appearance: none;
154
- margin: 0;
155
- }
156
-
157
- .headline {
158
- font-size: 24px;
159
- margin-bottom: 20px;
160
- text-align: center;
161
- font-weight: bold;
162
- color: #4caf50;
163
- }
164
-
165
- .fertilizerDropdowns {
166
- margin-bottom: 20px;
167
- }
168
-
169
- .dropdownGrid {
170
- display: grid;
171
- grid-template-columns: 1fr;
172
- }
173
-
174
- .details {
175
- font-size: 24px;
176
- margin: 20px;
177
- padding: 20px;
178
- background-color: #3e8e41;
179
- color: white;
180
- }
181
-
182
- .text {
183
- margin-left: 50px;
184
- }
185
- </style>
186
- </head>
187
-
188
- <body onload="getFertilizer()">
189
- <details>
190
- <summary class="details">Dünger-Berechnung</summary>
191
- <div class="text">
192
- <p>
193
- Dieser Dünger- und Verbrauchsrechner soll jedem Aquarianer eine
194
- einfache Möglichkeit bieten den Tagesverbrauch seines Aquariums zu
195
- berechnen und darauf basierend eine Empfehlung für die tägliche
196
- Zugabemenge zu bekommen. <br /><br />
197
- Diese Schritte sind für die Berechnung notwendig:
198
- <br />
199
- </p>
200
- <ul>
201
- <li>
202
- Bringe deine Nährstoffe (NO3, PO4, K, Fe) auf einen optimalen
203
- Bereich (siehe z.B. JBL)
204
- </li>
205
- <li>
206
- Gebe entsprechend der Herstellerangabe des Düngers die Menge für 7
207
- Tage hinzu!
208
- </li>
209
- <li>
210
- Messe die Konzentration der Nährstoffe eine kurze Zeit nach der
211
- Zugabe und notiere dir diese Werte!
212
- </li>
213
- <li>
214
- Messe erneut nach 7 Tagen die Konzentration der Nährstoffe und
215
- notiere dir ebenfalls diese Werte!
216
- </li>
217
- <li>
218
- Gebe die Messwerte in den Feldern ein und erhalte den Tagesverbrauch
219
- deiner Pflanzen im Aquarium!
220
- </li>
221
- <li>
222
- Hinweis: Solltest du einen Wasserwert nicht gemessen haben, dann
223
- trage dafür 0 in dem entsprechenden Feld ein.
224
- </li>
225
- </ul>
226
- </div>
227
- <div class="spalte">
228
- <p class="headline">1. Messung</p>
229
- <label for="nitrateIs1">Nitrat</label>
230
- <input
231
- type="number"
232
- step="0.1"
233
- id="nitrateIs1"
234
- placeholder="Wert in mg/L"
235
- /><br />
236
- <label for="phosphateIs1">Phosphat</label>
237
- <input
238
- type="number"
239
- step="0.1"
240
- id="phosphateIs1"
241
- placeholder="Wert in mg/L"
242
- /><br />
243
- <label for="potassiumIs1">Kalium</label>
244
- <input
245
- type="number"
246
- step="0.1"
247
- id="potassiumIs1"
248
- placeholder="Wert in mg/L"
249
- /><br />
250
- <label for="ironIs1">Eisen</label>
251
- <input
252
- type="number"
253
- step="0.1"
254
- id="ironIs1"
255
- placeholder="Wert in mg/L"
256
- />
257
- </div>
258
- <div class="spalte">
259
- <p class="headline">2. Messung</p>
260
- <label for="nitrateIs2">Nitrat</label>
261
- <input
262
- type="number"
263
- step="0.1"
264
- id="nitrateIs2"
265
- placeholder="Wert in mg/L"
266
- /><br />
267
- <label for="phosphateIs2">Phosphat</label>
268
- <input
269
- type="number"
270
- step="0.1"
271
- id="phosphateIs2"
272
- placeholder="Wert in mg/L"
273
- /><br />
274
- <label for="potassiumIs2">Kalium</label>
275
- <input
276
- type="number"
277
- step="0.1"
278
- id="potassiumIs2"
279
- placeholder="Wert in mg/L"
280
- /><br />
281
- <label for="ironIs2">Eisen</label>
282
- <input
283
- type="number"
284
- step="0.1"
285
- id="ironIs2"
286
- placeholder="Wert in mg/L"
287
- />
288
- </div>
289
- <div class="spalte">
290
- <label for="liter">Liter des Aquariums (netto):</label>
291
- <input type="number" id="liter" placeholder="Wert in Liter" />
292
- <div id="dropdowns">
293
- <label for="fertilizer1">Dünger:</label>
294
- <div class="dropdownGrid" id="dropdown-container">
295
- <select class="fertilizerDropdowns" id="fertilizer1"></select>
296
- </div>
297
- <button type="button" class="addButton" onclick="addDropdown()">
298
- Dünger hinzufügen
299
- </button>
300
- <button
301
- type="button"
302
- class="sendButton"
303
- id="sendCalculationRequest"
304
- onclick="sendCalculationRequest()"
305
- >
306
- Berechnen
307
- </button>
308
- </div>
309
- </div>
310
- <div id="chartDiv" style="display: none">
311
- <canvas id="dunger-chart"></canvas>
312
- </div>
313
- <div id="errorDiv" style="display: none"></div>
314
- </details>
315
- <details>
316
- <summary class="details">Dünger-Konverter</summary>
317
- <div class="text">
318
- <p>
319
- Dieser Dünger-Konverter soll jedem Aquarianer eine einfache
320
- Möglichkeit bieten die Nährstoffzugabe für die Größe seines eigenen
321
- Aquariums umzurechnen. <br /><br />
322
- Diese Schritte sind für die Berechnung notwendig:
323
- <br />
324
- </p>
325
- <ul>
326
- <li>
327
- Trage die Netto-Liter des Aquarium und die entsprechenden Dünger
328
- ein.
329
- </li>
330
- <li>
331
- Du erhälst das Ergebnis der Nährstoffe (in mg/l) für 1ml Dünger in
332
- der Liter-Menge des Aquariums.
333
- </li>
334
- </ul>
335
- </div>
336
- <div class="convertSpalte">
337
- <label for="liter">Liter des Aquariums (netto):</label>
338
- <input type="number" id="literConvert" placeholder="Wert in Liter" />
339
-
340
- <div id="dropdownsConvert">
341
- <label for="fertilizerConvert1">Dünger:</label>
342
- <div class="dropdownGrid" id="convert-dropdown-container">
343
- <select
344
- class="fertilizerDropdowns"
345
- id="fertilizerConvert1"
346
- ></select>
347
- </div>
348
- <button
349
- type="button"
350
- class="addButton"
351
- onclick="addConvertDropdown()"
352
- >
353
- Dünger hinzufügen
354
- </button>
355
- </div>
356
- <button
357
- type="button"
358
- class="sendButton"
359
- id="sendCalculationRequest"
360
- onclick="sendConvertRequest()"
361
- >
362
- Berechnen
363
- </button>
364
- </div>
365
- <div class="convertSpalte">
366
- <table class="w3-card">
367
- <thead>
368
- <tr>
369
- <th>Name</th>
370
- <th>Nitrat (mg/l)</th>
371
- <th>Phosphat (mg/l)</th>
372
- <th>Kalium (mg/l)</th>
373
- <th>Eisen (mg/l)</th>
374
- <th>Magnesium (mg/l)</th>
375
- <th>Menge in ml</th>
376
- </tr>
377
- </thead>
378
- <tbody id="data-output">
379
- <!-- Placeholder -->
380
- </tbody>
381
- </table>
382
- </div>
383
- </details>
384
- <details>
385
- <summary class="details">Verbrauchsrechner</summary>
386
- <div class="text">
387
- <p>
388
- Dieser Verbrauchsrechner soll jedem Aquarianer eine einfache
389
- Möglichkeit bieten den Verbrauch der Nährstoffe im Aquarium zu berechnen. <br /><br />
390
- Diese Schritte sind für die Berechnung notwendig:
391
- <br />
392
- </p>
393
- <ul>
394
- <li>
395
- Bringe deine Nährstoffe (NO3, PO4, K, Fe) auf einen optimalen
396
- Bereich (siehe z.B. JBL)
397
- </li>
398
- <li>
399
- Gebe entsprechend der Herstellerangabe des Düngers die Menge für den Zeitraum (z.B. 3 Tage)
400
- Tage hinzu!
401
- </li>
402
- <li>
403
- Messe die Konzentration der Nährstoffe eine kurze Zeit nach der
404
- Zugabe und notiere dir diese Werte!
405
- </li>
406
- <li>
407
- Messe erneut nach deiner gewählten Zeit (z.B. 3 Tage) die Konzentration der Nährstoffe und
408
- notiere dir ebenfalls diese Werte!
409
- </li>
410
- <li>
411
- Gebe die Messwerte in den Feldern ein und erhalte den Tagesverbrauch
412
- deiner Pflanzen im Aquarium!
413
- </li>
414
- <li>
415
- Hinweis: Solltest du einen Wasserwert nicht gemessen haben, dann
416
- trage dafür 0 in dem entsprechenden Feld ein.
417
- </li>
418
- </ul>
419
- </div>
420
- <div class="spalte" id="consumption1">
421
- <p class="headline">1. Messung</p>
422
- <label for="nitrateIs1">Nitrat</label>
423
- <input
424
- type="number"
425
- step="0.1"
426
- id="nitrateIs1Consumption"
427
- placeholder="Wert in mg/L"
428
- /><br />
429
- <label for="phosphateIs1">Phosphat</label>
430
- <input
431
- type="number"
432
- step="0.1"
433
- id="phosphateIs1Consumption"
434
- placeholder="Wert in mg/L"
435
- /><br />
436
- <label for="potassiumIs1">Kalium</label>
437
- <input
438
- type="number"
439
- step="0.1"
440
- id="potassiumIs1Consumption"
441
- placeholder="Wert in mg/L"
442
- /><br />
443
- <label for="ironIs1">Eisen</label>
444
- <input
445
- type="number"
446
- step="0.1"
447
- id="ironIs1Consumption"
448
- placeholder="Wert in mg/L"
449
- />
450
- </div>
451
- <div class="spalte">
452
- <p class="headline">2. Messung</p>
453
- <label for="nitrateIs2">Nitrat</label>
454
- <input
455
- type="number"
456
- step="0.1"
457
- id="nitrateIs2Consumption"
458
- name="nitrateIs2"
459
- placeholder="Wert in mg/L"
460
- /><br />
461
- <label for="phosphateIs2">Phosphat</label>
462
- <input
463
- type="number"
464
- step="0.1"
465
- id="phosphateIs2Consumption"
466
- placeholder="Wert in mg/L"
467
- /><br />
468
- <label for="potassiumIs2">Kalium</label>
469
- <input
470
- type="number"
471
- step="0.1"
472
- id="potassiumIs2Consumption"
473
- placeholder="Wert in mg/L"
474
- /><br />
475
- <label for="ironIs2">Eisen</label>
476
- <input
477
- type="number"
478
- step="0.1"
479
- id="ironIs2Consumption"
480
- placeholder="Wert in mg/L"
481
- />
482
- </div>
483
- <div class="spalte">
484
- <label for="liter">Wie viele Tage lagen zwischen den zwei Messungen?</label>
485
- <input type="number" id="days" placeholder="7" />
486
- <button
487
- type="button"
488
- class="sendButton"
489
- id="sendConsumptionRequest"
490
- onclick="sendConsumptionRequest()"
491
- >
492
- Berechnen
493
- </button>
494
- </div>
495
- <div id="chartDivConsumption" style="display: none">
496
- <canvas id="consumption-chart"></canvas>
497
- </div>
498
- <div id="errorDiv" style="display: none"></div>
499
- </details>
500
- <script>
501
- function sendConsumptionRequest() {
502
-
503
- fetch(
504
- "https://q6h486sln5.execute-api.eu-west-2.amazonaws.com/v2/consumption",
505
- {
506
- method: "POST",
507
- body: JSON.stringify({
508
- nitrateIs1:
509
- parseFloat(document.getElementById("nitrateIs1Consumption").value) || 0,
510
- phosphateIs1:
511
- parseFloat(document.getElementById("phosphateIs1Consumption").value) || 0,
512
- potassiumIs1:
513
- parseFloat(document.getElementById("potassiumIs1Consumption").value) || 0,
514
- ironIs1:
515
- parseFloat(document.getElementById("ironIs1Consumption").value) || 0,
516
- nitrateIs2:
517
- parseFloat(document.getElementById("nitrateIs2Consumption").value) || 0,
518
- phosphateIs2:
519
- parseFloat(document.getElementById("phosphateIs2Consumption").value) || 0,
520
- potassiumIs2:
521
- parseFloat(document.getElementById("potassiumIs2Consumption").value) || 0,
522
- ironIs2:
523
- parseFloat(document.getElementById("ironIs2Consumption").value) || 0,
524
- days: document.getElementById("days").value || 7,
525
- }),
526
- headers: {
527
- "Content-type": "application/json; charset=UTF-8",
528
- },
529
- }
530
- )
531
- .then((response) => {
532
- return response.json();
533
- })
534
- .then((data) => {
535
- createConsumptionChart(data);
536
- });
537
- }
538
-
539
-
540
- function sendConvertRequest() {
541
- var fertilizerInUse = [];
542
-
543
- var dropdownDiv = document.getElementById("convert-dropdown-container");
544
- var dropdowns = dropdownDiv.querySelectorAll("select");
545
-
546
- dropdowns.forEach((dropdown) => {
547
- fertilizerInUse.push(parseInt(dropdown.value));
548
- });
549
-
550
- fetch(
551
- "https://q6h486sln5.execute-api.eu-west-2.amazonaws.com/v2/convert",
552
- {
553
- method: "POST",
554
- body: JSON.stringify({
555
- liter:
556
- parseFloat(document.getElementById("literConvert").value) || 0,
557
- fertilizerInUse: fertilizerInUse,
558
- }),
559
- headers: {
560
- "Content-type": "application/json; charset=UTF-8",
561
- },
562
- }
563
- )
564
- .then((response) => {
565
- return response.json();
566
- })
567
- .then((data) => {
568
- createTable(data);
569
- });
570
- }
571
-
572
- function createTable(data) {
573
- var placeholder = document.querySelector("#data-output");
574
- var out = "";
575
- for (let fertilizer of data) {
576
- out += `
577
- <tr>
578
- <td>${fertilizer.name}</td>
579
- <td>${fertilizer.nitrate}</td>
580
- <td>${fertilizer.phosphate}</td>
581
- <td>${fertilizer.potassium}</td>
582
- <td>${fertilizer.iron}</td>
583
- <td>${fertilizer.magnesium}</td>
584
- <td>${fertilizer.dosage}</td>
585
- </tr>
586
- `;
587
- }
588
- placeholder.innerHTML = out;
589
- }
590
-
591
- function sendCalculationRequest() {
592
- var fertilizerInUse = [];
593
-
594
- var dropdownDiv = document.getElementById("dropdown-container");
595
- var dropdowns = dropdownDiv.querySelectorAll("select");
596
-
597
- dropdowns.forEach((dropdown) => {
598
- fertilizerInUse.push(parseInt(dropdown.value));
599
- });
600
-
601
- fetch(
602
- "https://q6h486sln5.execute-api.eu-west-2.amazonaws.com/v2/calculation",
603
- {
604
- method: "POST",
605
- body: JSON.stringify({
606
- liter: parseFloat(document.getElementById("liter").value) || 0,
607
- nitrateIs1:
608
- parseFloat(document.getElementById("nitrateIs1").value) || 0,
609
- phosphateIs1:
610
- parseFloat(document.getElementById("phosphateIs1").value) || 0,
611
- potassiumIs1:
612
- parseFloat(document.getElementById("potassiumIs1").value) || 0,
613
- ironIs1:
614
- parseFloat(document.getElementById("ironIs1").value) || 0,
615
- nitrateIs2:
616
- parseFloat(document.getElementById("nitrateIs2").value) || 0,
617
- phosphateIs2:
618
- parseFloat(document.getElementById("phosphateIs2").value) || 0,
619
- potassiumIs2:
620
- parseFloat(document.getElementById("potassiumIs2").value) || 0,
621
- ironIs2:
622
- parseFloat(document.getElementById("ironIs2").value) || 0,
623
- fertilizerInUse: fertilizerInUse,
624
- }),
625
- headers: {
626
- "Content-type": "application/json; charset=UTF-8",
627
- },
628
- }
629
- )
630
- .then((response) => {
631
- return response.json();
632
- })
633
- .then((data) => {
634
- createChart(data);
635
- });
636
- }
637
-
638
- function addDropdown() {
639
- var dropdownContainer = document.getElementById("dropdown-container");
640
- if (dropdownContainer.children.length < 4) {
641
- var newDropdown = document.createElement("select");
642
- newDropdown.name =
643
- "fertilizer" + (dropdownContainer.children.length + 1);
644
- newDropdown.id =
645
- "fertilizer" + (dropdownContainer.children.length + 1);
646
- var options = document.getElementById("fertilizer1").innerHTML;
647
- newDropdown.innerHTML = options;
648
- newDropdown.classList.add("fertilizerDropdowns");
649
- dropdownContainer.appendChild(newDropdown);
650
- }
651
- }
652
-
653
- function addConvertDropdown() {
654
- var dropdownContainer = document.getElementById(
655
- "convert-dropdown-container"
656
- );
657
- if (dropdownContainer.children.length < 4) {
658
- var newDropdown = document.createElement("select");
659
- newDropdown.name =
660
- "fertilizerConvert" + (dropdownContainer.children.length + 1);
661
- newDropdown.id =
662
- "fertilizerConvert" + (dropdownContainer.children.length + 1);
663
- var options = document.getElementById("fertilizerConvert1").innerHTML;
664
- newDropdown.innerHTML = options;
665
- newDropdown.classList.add("fertilizerDropdowns");
666
- dropdownContainer.appendChild(newDropdown);
667
- }
668
- }
669
-
670
- function getFertilizer() {
671
- fetch(
672
- "https://q6h486sln5.execute-api.eu-west-2.amazonaws.com/v2/getAllFertilizer"
673
- )
674
- .then((response) => {
675
- return response.json();
676
- })
677
- .then((data) => {
678
- data.forEach((eintrag) => {
679
- const option = document.createElement("option");
680
- option.value = eintrag.id;
681
- option.textContent = eintrag.name;
682
- fertilizer1.appendChild(option);
683
- });
684
- data.forEach((eintrag) => {
685
- const option = document.createElement("option");
686
- option.value = eintrag.id;
687
- option.textContent = eintrag.name;
688
- fertilizerConvert1.appendChild(option);
689
- });
690
- });
691
- }
692
-
693
- function createConsumptionChart(data) {
694
- if (document.getElementById("consumption-chart")) {
695
- document.getElementById("consumption-chart").destroy;
696
- }
697
-
698
- const response = data;
699
- if (!("Error" in data)) {
700
- document.getElementById("chartDivConsumption").style.display = "block";
701
-
702
- var translate = {
703
- "Nitrat": data.nitrate,
704
- "Phosphat": data.phosphate,
705
- "Kalium": data.potassium,
706
- "Eisen": data.iron
707
- }
708
-
709
- const ctx = document.getElementById("consumption-chart").getContext("2d");
710
- const chart = new Chart(ctx, {
711
- type: "bar",
712
- data: {
713
- labels: Object.keys(translate),
714
- datasets: [
715
- {
716
- label: "mg/l",
717
- data: Object.values(translate),
718
- backgroundColor: [
719
- "rgba(255, 99, 132, 0.2)",
720
- "rgba(54, 162, 235, 0.2)",
721
- "rgba(255, 206, 86, 0.2)",
722
- ],
723
- borderColor: [
724
- "rgba(255, 99, 132, 1)",
725
- "rgba(54, 162, 235, 1)",
726
- "rgba(255, 206, 86, 1)",
727
- ],
728
- borderWidth: 1,
729
- },
730
- ],
731
- },
732
- options: {
733
- scales: {
734
- yAxes: [
735
- {
736
- ticks: {
737
- beginAtZero: true,
738
- },
739
- },
740
- ],
741
- },
742
- },
743
- });
744
- }
745
- }
746
-
747
- function createChart(data) {
748
- if (document.getElementById("dunger-chart")) {
749
- document.getElementById("dunger-chart").destroy;
750
- }
751
-
752
- const response = data;
753
- if (!("Error" in data)) {
754
- document.getElementById("chartDiv").style.display = "block";
755
-
756
- const ctx = document.getElementById("dunger-chart").getContext("2d");
757
- const chart = new Chart(ctx, {
758
- type: "bar",
759
- data: {
760
- labels: Object.keys(response),
761
- datasets: [
762
- {
763
- label: "Menge in ml",
764
- data: Object.values(response),
765
- backgroundColor: [
766
- "rgba(255, 99, 132, 0.2)",
767
- "rgba(54, 162, 235, 0.2)",
768
- "rgba(255, 206, 86, 0.2)",
769
- ],
770
- borderColor: [
771
- "rgba(255, 99, 132, 1)",
772
- "rgba(54, 162, 235, 1)",
773
- "rgba(255, 206, 86, 1)",
774
- ],
775
- borderWidth: 1,
776
- },
777
- ],
778
- },
779
- options: {
780
- scales: {
781
- yAxes: [
782
- {
783
- ticks: {
784
- beginAtZero: true,
785
- },
786
- },
787
- ],
788
- },
789
- },
790
- });
791
- } else {
792
- if (data.Error === 0) {
793
- document.getElementById("errorDiv").style.display = "block";
794
- var errDiv = document.getElementById("errorDiv");
795
- var content = document.createTextNode("");
796
- errDiv.innerHTML =
797
- "<p class='text'>Es konnte keine Kombination errechnet werden! Versuch doch einfach eine andere Dünger-Kombination.</p>";
798
- } else {
799
- document.getElementById("errorDiv").style.display = "block";
800
- var errDiv = document.getElementById("errorDiv");
801
- errDiv.innerHTML =
802
- "<p class='text'>Es ist ein Fehler aufgetreten!</p>";
803
- }
804
- }
805
- }
806
- </script>
807
- </body>
808
- </html>