-
-
Plant Toevoegen
-
-
+
+ ×
+
+
@@ -108,28 +104,37 @@
-
-
-
-
- |
- Waardes
- |
-
- Huidig
- |
-
- 24u gemiddelde
- |
-
-
- |
- a
- |
-
-
-
-
+
+
+
+
+
+
+
+
+ Zonlicht
+
+
+
+
diff --git a/src/js/main.js b/src/js/main.js
new file mode 100644
index 0000000..a3e1eb4
--- /dev/null
+++ b/src/js/main.js
@@ -0,0 +1,115 @@
+const { ipcRenderer } = require("electron");
+
+document.addEventListener('DOMContentLoaded', () =>
+{
+ ipcRenderer.send('request-update-temp', ['some', 'arguments']);
+
+ ipcRenderer.on('update-temp-result', (event, newTemperature) => {
+ if (newTemperature === 'error') {
+ console.error('Er is een fout opgetreden bij het ophalen van de nieuwe temperatuur');
+ } else {
+ document.getElementById('bodem-temperatuur').textContent = newTemperature;
+ }
+ });
+
+});
+
+function openModal()
+{
+ const modal = document.getElementById("myModal");
+ const button = document.getElementById("modalButton");
+ const close = document.getElementsByClassName("close")[0];
+
+ // Toon de modal wanneer op de knop wordt geklikt
+ button.onclick = function()
+ {
+ modal.style.display = "block";
+ }
+
+ // Sluit de modal wanneer op het 'sluiten' icoon wordt geklikt
+ close.onclick = function()
+ {
+ modal.style.display = "none";
+ }
+
+ // Sluit de modal wanneer buiten de modal wordt geklikt
+ window.onclick = function(event)
+ {
+ if (event.target == modal)
+ {
+ modal.style.display = "none";
+ }
+ }
+}
+
+/**
+ * --- Functie om de grafiek te tekenen. Enigste belangrijke is de eerste 2 "const" arrays "data" & "xLabels".
+ */
+function drawLineChart()
+{
+ /*Dit is de data die getoond wordt als "punt" op de grafiek. 20 = y20 / x20, 50 = y50 / x50 enzovoort... De array "data" & "xLabels" moeten beide evenveel array items hebben!!*/
+ const data = [20, 50, 60, 45, 50, 100, 70, 60, 65, 0, 85, 0];
+ const xLabels = ["", "", "", "", "", 6, "", "", "", "", "", 12];
+
+ const yLabels = ["", 20, "", 40, "", 60, "", 80, "", 100]; /*NIET VERANDEREN!!!*/
+
+ const canvas = document.getElementById("myCanvas");
+ const ctx = canvas.getContext("2d");
+
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+ const padding = 35; // Increased padding for Y labels
+ const graphWidth = canvas.width - padding * 2;
+ const graphHeight = canvas.height - padding * 2;
+
+ ctx.beginPath();
+ ctx.moveTo(padding, padding);
+ ctx.lineTo(padding, canvas.height - padding);
+ ctx.lineTo(canvas.width - padding, canvas.height - padding);
+ ctx.stroke();
+
+ // Set the color of the line
+ ctx.strokeStyle = "rgb(143, 188, 143)";
+
+ const xIncrement = graphWidth / (xLabels.length - 1);
+ const yIncrement = graphHeight / (yLabels.length - 1);
+
+ // Plot the data
+ ctx.beginPath();
+ ctx.moveTo(padding, canvas.height - padding - (data[0] / 100) * graphHeight);
+
+ for (let i = 1; i < data.length; i++)
+ {
+ const xPos = padding + i * xIncrement;
+ const yPos = canvas.height - padding - (data[i] / 100) * graphHeight;
+ ctx.lineTo(xPos, yPos);
+ }
+ ctx.stroke();
+
+ // Draw Y labels
+ ctx.fillStyle = "black";
+ ctx.textAlign = "right"; // Align text to the right
+ ctx.textBaseline = "middle"; // Center vertically
+
+ for (let i = 0; i < yLabels.length; i++)
+ {
+ if (yLabels[i] !== "")
+ {
+ const yPos = canvas.height - padding - i * yIncrement;
+ ctx.fillText(yLabels[i], padding - 10, yPos);
+ }
+ }
+
+ // Draw X labels
+ ctx.textAlign = "center"; // Center horizontally for X labels
+ for (let i = 0; i < xLabels.length; i++)
+ {
+ if (xLabels[i] !== "")
+ {
+ const xPos = padding + i * xIncrement;
+ ctx.fillText(xLabels[i], xPos, canvas.height - padding + 20);
+ }
+ }
+}
+
+drawLineChart();
\ No newline at end of file
diff --git a/src/js/planten.class.js b/src/js/planten.class.js
new file mode 100644
index 0000000..db55ccc
--- /dev/null
+++ b/src/js/planten.class.js
@@ -0,0 +1,32 @@
+dataHardObject = {
+ "id": 1,
+ "plantnaam": "Tomaat",
+ "plantensoort": "Groente",
+ "plantGeteelt": 1
+}
+
+// Nieuwe planten aanmaken in de table
+// function hardcodeData(dataHardObject)
+// {
+// dataHardObject => "id"
+// }
+
+class Plant {
+ constructor(dataHardObject) {
+ this.id = dataHardObject.id;
+ this.plantNaam = dataHardObject.plantNaam;
+ this.plantensoort = dataHardObject.plantensoort;
+ this.plantGeteelt = dataHardObject.plantGeteelt;
+ }
+
+ htmlData(plantNaam) {
+ if (this.plantGeteelt)
+ {
+ const titel = document.querySelector(".plant-naam");
+ titel.textContent = this.plantNaam;
+ }
+ }
+}
+
+const tomaatPlant = new Plant(dataHardObject);
+tomaatPlant.htmlData();
\ No newline at end of file
diff --git a/src/kas_informatie.html b/src/kas_informatie.html
index e23678f..7809eec 100644
--- a/src/kas_informatie.html
+++ b/src/kas_informatie.html
@@ -1,25 +1,109 @@
-
-
-
+
+
+
+
+
Informatie Kas
-
-
-
+
+
+
+
+ 
+
+
-
-
+ Informatie Kas
+
-
-
-
+
+
+ Zonlicht
+
+
+
+
+
+
+
+
+ | Aantal geplant: |
+ 2 |
+
+
+ | Succesvolle Oogst: |
+ 2 |
+
+
+ | Gefaalde Oogst: |
+ 2 |
+
+
+
+
+ | Warmste Maand: |
+ n.v.t. |
+
+
+ | koudste Maand: |
+ December |
+
+
+ | Gemiddelde Bodemtemp.: |
+ 2˚C |
+
+
+ | Gemiddelde Uren Zonlicht: |
+ 2u |
+
+
+
+
+ | Laatste Irrigatie: |
+ 2u |
+
+
+ | Aankomende Irrigatie: |
+ 2u |
+
+
+ | Laatste Bemesting |
+ 2d |
+
+
+ | Aankomende Bemesting: |
+ 2w |
+
+
+
+
+
+
-
-
-
\ No newline at end of file
+
+
-