SCHOON

src/py/static/css/style.css

@@ -20,7 +20,7 @@ a {
 }
 
 body {
-  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/achtergrond.png");
+  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/achtergrond.webp");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
@@ -345,8 +345,8 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
 .switch {
   position: relative;
   display: inline-block;
-  width: 60px;
-  height: 30px;
+  width: 50px;
+  height: 25px;
 }
 
 .switch input[type=checkbox] {
@@ -370,21 +370,21 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
 .slider:before {
   position: absolute;
   content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
+  height: 22px;
+  width: 22px;
+  left: 3px;
+  bottom: 2px;
   background-color: white;
   border-radius: 50%;
   transition: 0.4s;
 }
 
 input:checked + .slider {
-  background-color: #2ecc71;
+  background-color: rgb(171, 211, 174);
 }
 
 input:checked + .slider:before {
-  transform: translateX(26px);
+  transform: translateX(23px);
 }
 
 .rechterkant {

src/py/static/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAGQ,mFAAA;AACA,2GAAA;AAgCR;;;;;EAME,wCApCY;EAqCZ,SAAA;AClCF;;ADqCA;;EAGE,iCAzCU;EA0CV,YAAA;ACnCF;;ADsCA;EAEE,qBAAA;ACpCF;;ADuCA;EAEE,kHAAA;EACA,4BAAA;EACA,sBAAA;EACA,2BAAA;EACA,iCAxDU;EAyDV,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,aAAA;EACA,SAAA;ACrCF;ADuCE;EAEE,WAAA;EACA,aAAA;EACA,2CAAA;EACA,mBAAA;EACA,aAAA;ACtCJ;ADwCI;EAEE,kBAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,2BAAA;ACvCN;AD0CI;EAEE,aAAA;EACA,8BAAA;ACzCN;AD4CI;EAEE,uBAAA;EACA,eAAA;EACA,aAAA;EACA,oCAAA;EACA,mBAAA;AC3CN;AD6CM;EAEE,eAAA;EACA,mBAAA;EACA,mBAAA;AC5CR;AD+CM;EAEE,aAAA;EACA,sBAAA;EACA,YAAA;EACA,wBAAA;EACA,kBAAA;AC9CR;ADgDQ;EAEE,uBAAA;AC/CV;ADkDQ;EAnGN,2CAAA;EAKA,mBAAA;EAkGQ,aAAA;EAEA,uBAAA;AClDV;ADoDU;EAhHR,oCAAA;EAeA,mBAAA;EAqGU,kBAAA;EACA,oBAAA;ACnDZ;ADqDY;EAEE,WAAA;ACpDd;ADsDc;EAEE,aAAA;EACA,8BAAA;EACA,gBAAA;ACrDhB;AD2DQ;EAhIN,2CAAA;EAKA,mBAAA;EA+HQ,aAAA;EACA,kBAAA;EACA,uBAAA;AC1DV;AD4DU;EA7IR,oCAAA;EAeA,mBAAA;EAkIU,kBAAA;EACA,sBAAA;EACA,aAAA;EACA,kBAAA;AC3DZ;AD6DY;EAEE,kBAAA;EACA,SAAA;EACA,2BAAA;AC5Dd;AD+DY;EAGE,kBAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;AC/Dd;ADqEM;EAEE,aAAA;EACA,kCAAA;EACA,YAAA;ACpER;ADwEU;EAEE,cAAA;ACvEZ;ADyEY;EAEE,WAAA;EACA,yBAAA;ACxEd;AD4EgB;EAEE,YAAA;EACA,YAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,oCAAA;EACA,mBAAA;EACA,wCAAA;AC3ElB;AD6EkB;EAEE,YAAA;EACA,WAAA;AC5EpB;AD+EkB;EAEE,WAAA;AC9EpB;ADiFkB;EAEE,2BAAA;EACA,eAAA;AChFpB;ADuFU;EAEE,cAAA;ACtFZ;ADyFY;EAEE,oCAAA;EACA,mBAAA;ACxFd;AD0Fc;EAEE,aAAA;EACA,8BAAA;EACA,eAAA;EACA,iBAAA;EACA,WAAA;ACzFhB;AD2FgB;EAEE,aAAA;EACA,8BAAA;EACA,WAAA;AC1FlB;ADkGM;EAzPJ,2CAAA;EAKA,mBAAA;EAwPM,aAAA;EACA,iCAAA;EACA,uBAAA;ACjGR;ADmGQ;EAtQN,oCAAA;EAeA,mBAAA;EA2PQ,YAAA;AClGV;ADoGU;EAEE,oBAAA;EACA,aAAA;EACA,sBAAA;EACA,oBAAA;EACA,WAAA;EACA,6BAAA;EACA,WAAA;ACnGZ;ADyGgB;EAEE,kBAAA;ACxGlB;ADiHgB;EAEE,kBAAA;AChHlB;ADqHY;EAEE,kBAAA;ACpHd;ADsHc;EAGE,WAAA;EACA,kBAAA;EACA,OAAA;EACA,QAAA;EACA,WAAA;EACA,UAAA;EACA,iBAAA;ACtHhB;ADyHc;EAEE,aAAA;ACxHhB;AD2Hc;EAEE,UAAA;AC1HhB;;ADoIA;EACE,aAAA;EACA,uBAAA;EACA,oCAAA;EACA,kBAAA;EACA,UAAA;EACA,cAAA;ACjIF;;ADoIA;EACE,aAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;EACA,iBAAA;EACA,gBAAA;EACA,wCAAA;EACA,WAAA;EACA,YAAA;EACA,yBAAA;EACA,mBAAA;ACjIF;;ADoIA;EAEE,iBAAA;AClIF;;ADqIA;EACE,WAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;EACA,iBAAA;AClIF;;ADoIA;;EAEE,YAAA;EACA,qBAAA;EACA,eAAA;ACjIF;;ADoIA;;EAEE,wBAAA;EACA,aAAA;EACA,mBAAA;EACA,yBAAA;EACA,kBAAA;EACA,sBAAA;ACjIF;;ADoIA;EACE,aAAA;EACA,8BAAA;ACjIF;;ADoIA;EACE,UAAA;EACA,aAAA;EACA,sBAAA;EACA,YAAA;ACjIF;;ADoIA;EACE,aAAA;EACA,8BAAA;EACA,gBAAA;ACjIF;;ADoIA;;EAEE,OAAA;EACA,aAAA;EACA,aAAA;EACA,sBAAA;ACjIF;;ADoIA;;EAEE,yBAAA;EACA,aAAA;EACA,mBAAA;EACA,sBAAA;ACjIF;;ADoIA;;EAEE,WAAA;EACA,YAAA;EACA,mBAAA;EACA,eAAA;ACjIF;;ADoIA;EACE,oDAAA;ACjIF;;ADoIA;EACE,uBAAA;EACA,YAAA;ACjIF;;ADoIA;EACE,oDAAA;ACjIF;;ADoIA;EACE,oDAAA;ACjIF;;ADoIA;EACE,aAAA;EACA,mBAAA;EACA,yBAAA;ACjIF;;ADoIA;EACE,iBAAA;ACjIF;;ADoIA;EACE,kBAAA;EACA,qBAAA;EACA,WAAA;EACA,YAAA;ACjIF;;ADoIA;EACE,UAAA;EACA,QAAA;EACA,SAAA;ACjIF;;ADoIA;EACE,kBAAA;EACA,eAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,sBAAA;EACA,mBAAA;EACA,gBAAA;ACjIF;;ADoIA;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,uBAAA;EACA,kBAAA;EACA,gBAAA;ACjIF;;ADoIA;EACE,oCAhgBc;AC+XhB;;ADoIA;EACE,2BAAA;ACjIF;;ADmIA;EACE,aAAA;EACA,oBAAA;AChIF;;ADmIE;;EAGE,uBAAA;ACjIJ;;ADoIE;EACE,kBAAA;EACA,WAAA;ACjIJ;;ADmIA;EACE,kBAAA;EACA,gBAAA;AChIF;;ADmIA;EACE,oCA3hBc,EA2hBoB,2BAAA;EAClC,YAAA,EAAA,sDAAA;AChIF;;ADmIA;EACE,kBAAA;EACA,gBAAA;AChIF;;ADmIA;EAEE,kBAAA;EACA,UAAA;EACA,YAAA;EACA,8BAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,yBA7iBc;EA8iBd,kBAAA,EAAA,mCAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,eAAA;EACA,oCAAA;EACA,iBAAA;ACjIF;;ADoIA;EACE,kBAAA;EACA,UAAA;EACA,YAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,yBA/jBc;EAgkBd,kBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,eAAA;EACA,oCAAA;EACA,iBAAA;ACjIF;;ADoIA;EACE,oCA3kBc;EA4kBd,YAAA;ACjIF","file":"style.css"}

src/py/static/css/style.scss

@@ -58,7 +58,7 @@ a
 
 body 
 {
-  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/achtergrond.png");
+  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/achtergrond.webp");
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
@@ -475,8 +475,8 @@ body
 .switch {
   position: relative;
   display: inline-block;
-  width: 60px;
-  height: 30px;
+  width: 50px;
+  height: 25px;
 }
  
 .switch input[type="checkbox"] {
@@ -500,21 +500,21 @@ body
 .slider:before {
   position: absolute;
   content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
+  height: 22px;
+  width: 22px;
+  left: 3px;
+  bottom: 2px;
   background-color: white;
   border-radius: 50%;
   transition: 0.4s;
 }
  
 input:checked + .slider {
-  background-color: #2ecc71;
+  background-color: $primary-color;
 }
  
 input:checked + .slider:before {
-  transform: translateX(26px);
+  transform: translateX(23px);
 }
 .rechterkant {
   display: flex;

src/py/static/images/desktop.ini

@@ -0,0 +1,2 @@
+[LocalizedFileNames]
+achtergrond.webp=@achtergrond.webp,0

src/py/static/js/grafiek.js

@@ -0,0 +1,116 @@
+/**
+ * Class to handle the creation and manipulation of line charts on a canvas.
+ */
+class LineChart 
+{
+    /**
+     * Creates an instance of LineChart.
+     * @param {string} canvasId - The ID of the canvas element where the chart will be drawn.
+     */
+    constructor(canvasId) 
+    {
+        this.canvas = document.getElementById(canvasId);
+        if (this.canvas) 
+        {
+            this.ctx = this.canvas.getContext("2d");
+        }
+        this.padding = 35; // Default padding around the graph
+    }
+
+    /**
+     * Clears the entire canvas, preparing it for a new drawing.
+     */
+    clearCanvas() 
+    {
+        if (this.canvas) 
+        {
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        }
+    }
+
+    /**
+     * Draws a line chart on the canvas using the provided data.
+     * @param {Array<string>} xLabels - Labels for the x-axis.
+     * @param {Array<number>} data - Data points for the chart, one per x-label.
+     * @param {Array<number|string>} [yLabels=["", 10, 15, 20, 25, 30, 35, 40]] - Labels for the y-axis.
+     */
+    drawChart(xLabels, data, yLabels = ["", 10, 15, 20, 25, 30, 35, 40]) 
+    {
+        if (!this.canvas) 
+        {
+            return; // Exit if canvas is not initialized
+        }
+        
+        this.clearCanvas();
+        const graphWidth = this.canvas.width - this.padding * 2;
+        const graphHeight = this.canvas.height - this.padding * 2;
+
+        // Draw the axes
+        this.ctx.strokeStyle = "rgb(143, 188, 143)";
+        this.ctx.beginPath();
+        this.ctx.moveTo(this.padding, this.padding);
+        this.ctx.lineTo(this.padding, this.canvas.height - this.padding);
+        this.ctx.lineTo(this.canvas.width - this.padding, this.canvas.height - this.padding);
+        this.ctx.stroke();
+
+        // Calculate increments for plotting points
+        const xIncrement = graphWidth / (xLabels.length - 1);
+        const yIncrement = graphHeight / (yLabels.length - 1);
+        
+        // Plot the data points
+        this.ctx.beginPath();
+        this.ctx.moveTo(this.padding, this.canvas.height - this.padding - (data[0] / 100) * graphHeight);
+        for (let i = 1; i < data.length; i++) 
+        {
+            const xPos = this.padding + i * xIncrement;
+            const yPos = this.canvas.height - this.padding - (data[i] / 100) * graphHeight;
+            this.ctx.lineTo(xPos, yPos);
+        }
+        this.ctx.stroke();
+        
+        // Draw y-axis labels
+        this.ctx.fillStyle = "black";
+        this.ctx.textAlign = "right";
+        this.ctx.textBaseline = "middle";
+        yLabels.forEach((label, i) => 
+        {
+            if (label !== "") 
+            {
+                const yPos = this.canvas.height - this.padding - i * yIncrement;
+                this.ctx.fillText(label, this.padding - 10, yPos);
+            }
+        });
+
+        // Draw x-axis labels
+        this.ctx.textAlign = "center";
+        xLabels.forEach((label, i) => 
+        {
+            if (label !== "") 
+            {
+                const xPos = this.padding + i * xIncrement;
+                this.ctx.fillText(label, xPos, this.canvas.height - this.padding + 20);
+            }
+        });
+    }
+}
+
+/**
+ * Fetches weather data from an API and draws a line chart with the fetched data.
+ * @param {LineChart} chart - The LineChart instance to draw on.
+ * @param {string} apiUrl - The URL to fetch the weather data from.
+ */
+function fetchWeatherDataAndDrawChart(chart, apiUrl) 
+{
+    fetch(apiUrl)
+        .then(response => response.ok ? response.json() : Promise.reject('Network response was not ok.'))
+        .then(data => 
+        {
+            const dates = data.weather_forecast.map(day => day.dag);
+            const temperatures = data.weather_forecast.map(day => day.max_temp);
+            chart.drawChart(dates, temperatures);
+        })
+        .catch(error => console.error('There was a problem with the fetch operation:', error));
+}
+
+const myChart = new LineChart("myCanvas");
+fetchWeatherDataAndDrawChart(myChart, "http://127.0.0.1:5000/weather");

src/py/static/js/main.js

@@ -4,7 +4,41 @@ const { ipcRenderer } = require("electron");
 
 // Importeer Axios voor het maken van HTTP-verzoeken
 const axios = require('axios');
- 
+/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀*/
+function closeApplication() 
+{
+    if (confirm("Weet je zeker dat je de applicatie wilt sluiten?")) 
+    {
+        window.close();
+    }
+}
+/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀*/
 /**
  * Functie om een modaal venster te openen.
  * Deze functie stelt event listeners in voor het openen en sluiten van de modaal.
@@ -41,24 +75,45 @@ function openModal()
         }
     } 
 }
-
 // Call openModal when DOM content is loaded
 openModal();
+/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀*/
+/**
+ * *WAT IS DIT, WERKT HET? */
+
 
 // Send a message to the main process to execute the Python script
 ipcRenderer.send('run-python-script', ['some', 'arguments']);
 
-ipcRenderer.on('python-script-response', (event, pythonData) => {
-    if (pythonData === 'error') {
+ipcRenderer.on('python-script-response', (event, pythonData) => 
+{
+    if (pythonData === 'error') 
+    {
         console.error('An error occurred while retrieving data from Python');
-    } else {
+    } 
+    else 
+    {
         // Update HTML elements with data received from Python
         document.getElementById('bodem-temperatuur').textContent = pythonData.bodemTemperatuur; // Adjust the property based on your actual Python response
     }
 });
 
 // Listen for updates to HTML data from the main process
-ipcRenderer.on('update-html-data', (event, data) => {
+ipcRenderer.on('update-html-data', (event, data) => 
+{
     // Update the HTML with the received data
     document.getElementById('batteryVoltage').innerText = data.batteryVoltage;
     // Add similar lines for other data fields
@@ -66,131 +121,20 @@ ipcRenderer.on('update-html-data', (event, data) => {
 
 // Trigger an event to request data update
 ipcRenderer.send('request-update-data');
-
-// Fetch battery data when the page loads
-fetchBatteryData();
- 
-/**
- * Functie om een lijngrafiek te tekenen.
- * @param {Array} xLabels Labels voor de x-as.
- * @param {Array} data De data punten voor de grafiek.
- */
-function drawLineChart(xLabels, data) 
-{
-    // Definieer Y labels (niet veranderen volgens commentaar).
-    const yLabels = ["", 10, 15, 20, 25, 30, 35, 40];
- 
-    // Verkrijg het canvas element en de context voor tekenen.
-    const canvas = document.getElementById("myCanvas");
-    if (canvas) 
-    {
-    const ctx = canvas.getContext("2d");
-    // Maak het canvas schoon voor nieuwe tekening.
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
- 
-    // Definieer padding en bereken grafiekafmetingen.
-    const padding = 35; // Vergrote padding voor Y labels.
-    const graphWidth = canvas.width - padding * 2;
-    const graphHeight = canvas.height - padding * 2;
- 
-    // Teken de as van de grafiek.
-    ctx.beginPath();
-    ctx.moveTo(padding, padding);
-    ctx.lineTo(padding, canvas.height - padding);
-    ctx.lineTo(canvas.width - padding, canvas.height - padding);
-    ctx.stroke();
- 
-    // Stel de kleur van de lijn in.
-    ctx.strokeStyle = "rgb(143, 188, 143)";
- 
-    // Bereken incrementen voor het plotten.
-    const xIncrement = graphWidth / (xLabels.length - 1);
-    const yIncrement = graphHeight / (yLabels.length - 1);
- 
-    // Plot de 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();
- 
-    // Teken Y labels.
-    ctx.fillStyle = "black";
-    ctx.textAlign = "right"; // Tekst naar rechts uitlijnen.
-    ctx.textBaseline = "middle"; // Verticaal centreren.
- 
-    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);
-        }
-    }
- 
-    // Teken X labels.
-    ctx.textAlign = "center"; // Horizontaal centreren voor 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);
-        }
-    }
-}
-else
-{
-    console.log("Canvas element does not exist on this page.");
-}
-}
- 
-/**
- * Functie om weergegevens op te halen en een grafiek te tekenen.
- * Deze functie haalt weergegevens op van een lokale server en tekent een lijngrafiek
- * op basis van de verkregen data.
- */
-function fetchWeatherDataAndDrawChart() 
-{
-    // URL van de API waar de weergegevens opgehaald kunnen worden.
-    const apiUrl = `http://127.0.0.1:5000/weather`;
- 
-    // Voer een GET-verzoek uit naar de API.
-    fetch(apiUrl)
-        .then(response => 
-        {
-            // Controleer of het verzoek succesvol was.
-            if (response.ok) 
-            {
-                return response.json();
-            }
-            // Gooi een fout als het verzoek niet succesvol was.
-            throw new Error('Network response was not ok.');
-        })
-        .then(data => 
-            {
-                // Verkrijg de weersvoorspelling voor de eerste 5 dagen.
-                const weatherForecast = data.weather_forecast.slice(0, 5);
-                // Converteer datums naar afkortingen van dagen van de week.
-                const dates = weatherForecast.map(day => convertDateToDayOfWeek(day.dag));
-                // Verkrijg de maximale temperaturen.
-                const temperatures = weatherForecast.map(day => day.max_temp);
-             
-                // Teken de lijngrafiek met de verkregen data.
-                drawLineChart(dates, temperatures);
-            })            
-        .catch(error => 
-        {
-            // Log eventuele fouten tijdens het ophalen.
-            console.error('There was a problem with the fetch operation:', error);
-        });
-}
- 
+ /*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀*/
 /**
  * Functie om batterijdata op te halen wanneer de pagina laadt.
  * Deze functie haalt data op met Axios en verwerkt deze vervolgens.
@@ -212,7 +156,6 @@ function fetchBatteryData()
         });
 }
 
- 
 /**
  * Functie om batterijdata op de pagina bij te werken.
  * Deze functie update de HTML met de ontvangen batterijdata.
@@ -243,143 +186,139 @@ function updateBatteryData(batteryData)
         }
     }
 }
+// Fetch battery data when the page loads
+fetchBatteryData();
+/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀                        ⠀⠈⠀⠀⠀*/
 
 
- 
-// Definieer de API-sleutel en de stad waarvoor we de weergegevens willen ophalen.
-const apiKey = "9516081f15727d063c9e2f08454a2fe9";
-const city = "Leiden";
- 
-// Construeer de URL voor de API-aanroep. In dit geval is het een lokale server.
-const apiUrl = `http://127.0.0.1:5000/weather`;
- 
-// Voer een GET-verzoek uit naar de API om de weergegevens op te halen.
-fetch(apiUrl)
-  .then(response => 
-  {
-    // Controleer of de respons van de server in orde is (status code 200).
-    if (response.ok) 
+function dynamischSensor()
+{
+    if (window.location.pathname.endsWith('index.html') || window.location.pathname === '/') 
     {
-      // Zo ja, parse de JSON uit de respons.
-      return response.json();
-    }
-    // Zo niet, gooi een fout.
-    throw new Error('Network response was not ok.');
-  })
-  .then(data => 
-  {
-    // Log de ontvangen data naar de console voor debugging.
-    console.log(data);
- 
-    // Extraheren van de weersvoorspelling voor de eerste vijf dagen.
-    const weatherForecast = data.weather_forecast.slice(0, 5);
-    // Haal de dagen op waarvoor de voorspelling geldt.
-    const dates = weatherForecast.map(day => day.dag);
-    // Haal de maximale temperaturen op voor deze dagen.
-    const temperatures = weatherForecast.map(day => day.max_temp);
- 
-    // Update de grafiek met de nieuwe data.
-    drawLineChart(dates, temperatures);
-  })
-  .catch(error => 
-  {
-    // Log eventuele fouten tijdens het ophalen van de data.
-    console.error('There was a problem with the fetch operation:', error);
-  });
-
-  function dynamischSensor()
-  {
-      if (window.location.pathname.endsWith('index.html') || window.location.pathname === '/') 
-      {
-          const sensor1 = document.getElementById("sensor-1");
-          const sensor2 = document.getElementById("sensor-2");
-          
-          if (sensor1 && sensor2) 
-          {
-              sensor1.href = `sensor.html?id=${322}`;
-              sensor2.href = `sensor.html?id=${256}`;
-          }
-          else 
-          {
-              console.log("Elementen 'sensor-1' of 'sensor-2' bestaan niet in de DOM.");
-          }
-      }
-  }
-  
-  // Aanroepen van de functie
-  dynamischSensor();
-  
-
-  function closeApplication() {
-    if (confirm("Weet je zeker dat je de applicatie wilt sluiten?")) {
-        window.close();
-    }}
-
-    function fetchPlantenData()
-    {
-        // Gebruik Axios om een GET-verzoek te versturen naar de planten endpoint.
-        axios.get('http://127.0.0.1:5000/planten')
-        .then(response => 
+        const sensor1 = document.getElementById("sensor-1");
+        const sensor2 = document.getElementById("sensor-2");
+        
+        if (sensor1 && sensor2) 
         {
-            // Verwerk de ontvangen data.
-            const plantenData = response.data;
-            updatePlantenData(plantenData);
-        })
-        .catch(error => 
-        {
-            // Log eventuele fouten tijdens het ophalen.
-            console.error('Error fetching planten data:', error);
-        });
-    }
-    
-    function getPlantIdFromUrl()
-    {
-        // Maak een URL-object van de huidige locatie.
-        const currentUrl = new URL(window.location.href);
-        // Gebruik de URLSearchParams API om de query parameters te verwerken.
-        const searchParams = currentUrl.searchParams;
-        // Haal de 'id' query parameter op.
-        return searchParams.get('id'); // Dit zal een string retourneren of null als het niet bestaat.
-    }
-    
-    function updatePlantenData(plantenData) 
-    {
-        // Verkrijg de plant ID uit de URL.
-        const plantId = parseInt(getPlantIdFromUrl(), 10);
-    
-        // Vind de plant met die ID in de ontvangen JSON-data.
-        const gevondenPlant = plantenData.find(plant => plant.id === plantId);
-    
-        // Update de titel van de pagina met de naam van de gevonden plant.
-        if (gevondenPlant) 
-        {
-            document.title = gevondenPlant.plant_naam;
-            document.querySelector(".plant-titel").textContent = gevondenPlant.plant_naam;
-            console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
+            sensor1.href = `sensor.html?id=${322}`;
+            sensor2.href = `sensor.html?id=${256}`;
         }
         else 
         {
-            console.log(`Geen plant gevonden met ID ${plantId}`);
+            console.log("Elementen 'sensor-1' of 'sensor-2' bestaan niet in de DOM.");
         }
     }
+}
+  
+// Aanroepen van de functie
+dynamischSensor();
+
+/*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀PLANTEN⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀ ⠈⠀⠀⠀*/
+
+function fetchPlantenData()
+{
+    // Gebruik Axios om een GET-verzoek te versturen naar de planten endpoint.
+    axios.get('http://127.0.0.1:5000/planten')
+    .then(response => 
+    {
+        // Verwerk de ontvangen data.
+        const plantenData = response.data;
+        updatePlantenData(plantenData);
+    })
+    .catch(error => 
+    {
+        // Log eventuele fouten tijdens het ophalen.
+        console.error('Error fetching planten data:', error);
+    });
+}
+
+function getPlantIdFromUrl()
+{
+    // Maak een URL-object van de huidige locatie.
+    const currentUrl = new URL(window.location.href);
+    // Gebruik de URLSearchParams API om de query parameters te verwerken.
+    const searchParams = currentUrl.searchParams;
+    // Haal de 'id' query parameter op.
+    return searchParams.get('id'); // Dit zal een string retourneren of null als het niet bestaat.
+}
+
+function updatePlantenData(plantenData) 
+{
+    // Verkrijg de plant ID uit de URL.
+    const plantId = parseInt(getPlantIdFromUrl(), 10);
+
+    // Vind de plant met die ID in de ontvangen JSON-data.
+    const gevondenPlant = plantenData.find(plant => plant.id === plantId);
+
+    // Update de titel van de pagina met de naam van de gevonden plant.
+    if (gevondenPlant) 
+    {
+        document.title = gevondenPlant.plant_naam;
+        document.querySelector(".plant-titel").textContent = gevondenPlant.plant_naam;
+        // console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
+    }
+    else 
+    {
+        console.log(`Geen plant gevonden met ID ${plantId}`);
+    }
+}
     
-    // Roep fetchPlantenData aan ergens waar het logisch is binnen je applicatielogica, bijvoorbeeld na het laden van de pagina of na een gebruikersactie.
-    fetchPlantenData();
-    
+// Roep fetchPlantenData aan ergens waar het logisch is binnen je applicatielogica, bijvoorbeeld na het laden van de pagina of na een gebruikersactie.
+fetchPlantenData();
+    /*⠀⠀⠀⢸⣦⡀⠀⠀⠀⠀⢀⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⢸⣏⠻⣶⣤⡶⢾⡿⠁⠀⢠⣄⡀⢀⣴⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⣀⣼⠷⠀⠀⠁⢀⣿⠃⠀⠀⢀⣿⣿⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠴⣾⣯⣅⣀⠀⠀⠀⠈⢻⣦⡀⠒⠻⠿⣿⡿⠿⠓⠂⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠉⢻⡇⣤⣾⣿⣷⣿⣿⣤⠀⠀⣿⠁⠀⠀⠀⢀⣴⣿⣿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠸⣿⡿⠏⠀⢀⠀⠀⠿⣶⣤⣤⣤⣄⣀⣴⣿⡿⢻⣿⡆⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠟⠁⠀⢀⣼⠀⠀⠀⠹⣿⣟⠿⠿⠿⡿⠋⠀⠘⣿⣇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⢳⣶⣶⣿⣿⣇⣀⠀⠀⠙⣿⣆⠀⠀⠀⠀⠀⠀⠛⠿⣿⣦⣤⣀⠀⠀
+⠀⠀⠀⠀⠀⠀⣹⣿⣿⣿⣿⠿⠋⠁⠀⣹⣿⠳⠀⠀⠀⠀⠀⠀⢀⣠⣽⣿⡿⠟⠃
+⠀⠀⠀⠀⠀⢰⠿⠛⠻⢿⡇⠀⠀⠀⣰⣿⠏⠀⠀⢀⠀⠀⠀⣾⣿⠟⠋⠁⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⣰⣿⣿⣾⣿⠿⢿⣷⣀⢀⣿⡇⠁⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠋⠉⠁⠀⠀⠀⠀⠙⢿⣿⣿⠇⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⠀⠀⠀⠀⠀⠀⠀
+⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀*/
 // Get the battery voltage
-const batteryVoltage = parseFloat(document.getElementById('battery-voltage').textContent);
+// const batteryVoltage = parseFloat(document.getElementById('battery-voltage'));
  
-// Select the img element
-const batteryImage = document.getElementById('battery-image');
+// // Select the img element
+// const batteryImage = document.getElementById('battery-image');
  
-// Check the battery voltage and decide whether to show the image
-if (batteryVoltage < 3.0) {
-    // Battery is lower than 3.0 volts, show the empty battery image
-    batteryImage.src = '../static/img/warning-logo.png';
-} else if (batteryVoltage > 4.2) {
-    // Battery is higher than 4.2 volts, do not show the image
-    batteryImage.style.display = 'none';
-} else {
-    // Battery voltage is within the desired range, hide the image
-    batteryImage.style.display = 'none';
-}
+// // Check the battery voltage and decide whether to show the image
+// if (batteryVoltage < 3.0) {
+//     // Battery is lower than 3.0 volts, show the empty battery image
+//     batteryImage.src = '../static/img/warning-logo.png';
+// } else if (batteryVoltage > 4.2) {
+//     // Battery is higher than 4.2 volts, do not show the image
+//     batteryImage.style.display = 'none';
+// } else {
+//     // Battery voltage is within the desired range, hide the image
+//     batteryImage.style.display = 'none';
+// }

src/py/static/js/planten.class.js

@@ -28,7 +28,7 @@ class PlantGrid {
     
     // Methode om data te laden.
     loadData() {
-        fetch('../script/plants.json')
+        fetch('../script/json/plants.json')
             .then(response => {
                 // Controleer of de netwerkrespons ok is.
                 if (!response.ok) {

src/py/static/js/planten_pagina.js

@@ -0,0 +1 @@
+/*Hier komt alle code die te maken heeft met de "dynamische" planten pagina's*/