Alles werkend nu!!!

src/py/script/plants.json

@@ -22,5 +22,35 @@
         "plant_naam": "Sla",
         "plantensoort": "Groente",
         "plant_geteelt": 1
+    },
+    {
+        "id": 52,
+        "plant_naam": "Wietplant",
+        "plantensoort": "Onkruid",
+        "plant_geteelt": 1
+    },
+    {
+        "id": 53,
+        "plant_naam": "Patat",
+        "plantensoort": "Aarde",
+        "plant_geteelt": 1
+    },
+    {
+        "id": 54,
+        "plant_naam": "asfasfas",
+        "plantensoort": "fasfasfsaf",
+        "plant_geteelt": 1
+    },
+    {
+        "id": 55,
+        "plant_naam": "sadfadsfdsf",
+        "plantensoort": "sdfdsafdsfdf",
+        "plant_geteelt": 1
+    },
+    {
+        "id": 56,
+        "plant_naam": "asdasd",
+        "plantensoort": "asdasdasdasdasd",
+        "plant_geteelt": 1
     }
 ]

src/py/static/js/main.js

@@ -1,7 +1,7 @@
 // const { ipcRenderer } = require("electron");
+// const axios = require('axios');
 
-// document.addEventListener('DOMContentLoaded', () => 
+// // document.addEventListener('DOMContentLoaded', () => {
-// {
 //     ipcRenderer.send('request-update-temp', ['some', 'arguments']);
 
 //     ipcRenderer.on('update-temp-result', (event, newTemperature) => {
@@ -12,109 +12,122 @@
 //         }
 //     });
 
-// });
+//     // Send a message to the main process to execute the Python script
+//     ipcRenderer.send('run-python-script', ['some', 'arguments']);
 
-// function openModal()
+//     ipcRenderer.on('python-script-response', (event, pythonData) => {
-// {
+//         if (pythonData === 'error') {
-//     const modal = document.getElementById("myModal");
+//             console.error('An error occurred while retrieving data from Python');
-//     const button = document.getElementById("modalButton");
+//         } else {
-//     const close = document.getElementsByClassName("close")[0];
+//             // Update HTML elements with data received from Python
-
+//             document.getElementById('bodem-temperatuur').textContent = pythonData.bodemTemperatuur; // Adjust the property based on your actual Python response
-//     // 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";
 //         }
-//     }
+//     });
-// }
 
-// /**
+//     // Listen for updates to HTML data from the main process
-//  * --- Functie om de grafiek te tekenen. Enigste belangrijke is de eerste 2 "const" arrays "data" & "xLabels".
+//     ipcRenderer.on('update-html-data', (event, data) => {
-//  */
+//         // Update the HTML with the received data
-// function drawLineChart()
+//         document.getElementById('batteryVoltage').innerText = data.batteryVoltage;
-// {
+//         // Add similar lines for other data fields
-//     /*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!!!*/
+//     // Trigger an event to request data update
+//     ipcRenderer.send('request-update-data');
 
-//     const canvas = document.getElementById("myCanvas");
+//     // Function to open the modal
-//     const ctx = canvas.getContext("2d");
+//     function openModal() {
+//         const modal = document.getElementById("myModal");
+//         const button = document.getElementById("modalButton");
+//         const close = document.getElementsByClassName("close")[0];
 
-//     ctx.clearRect(0, 0, canvas.width, canvas.height);
+//         // Check if elements are found before attaching events
+//         if (modal && button && close) {
+//             // Show the modal when the button is clicked
+//             button.onclick = function () {
+//                 modal.style.display = "block";
+//             }
 
-//     const padding = 35; // Increased padding for Y labels
+//             // Close the modal when the 'close' icon is clicked
-//     const graphWidth = canvas.width - padding * 2;
+//             close.onclick = function () {
-//     const graphHeight = canvas.height - padding * 2;
+//                 modal.style.display = "none";
+//             }
 
-//     ctx.beginPath();
+//             // Close the modal when clicked outside the modal
-//     ctx.moveTo(padding, padding);
+//             window.onclick = function (event) {
-//     ctx.lineTo(padding, canvas.height - padding);
+//                 if (event.target == modal) {
-//     ctx.lineTo(canvas.width - padding, canvas.height - padding);
+//                     modal.style.display = "none";
-//     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
+//     // Call the function to open the modal
-//     ctx.textAlign = "center"; // Center horizontally for X labels
+//     openModal();
-//     for (let i = 0; i < xLabels.length; i++)
+
-//     {
+//     /**
-//         if (xLabels[i] !== "")
+//      * --- Function to draw the chart. The important arrays are "data" & "xLabels".
-//         {
+//      */
+//     function drawLineChart() {
+//         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;
-//             ctx.fillText(xLabels[i], xPos, canvas.height - padding + 20);
+//             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();
+//     // Call the function to draw the line chart
-
+//     drawLineChart();
-// /////////////////////////////////
 
 //     // Function to fetch battery data from Flask API
 //     function fetchBatteryData() {
@@ -133,28 +146,49 @@
 //         document.getElementById('deviceNumber').innerText = batteryData.device;
 //         document.getElementById('voltage').innerText = batteryData.value;
 //         document.getElementById('time').innerText = batteryData.gateway_receive_time;
-//         document.getElementById('tevredenheid').innerText = batteryData.timestamp;
+//         document.getElementById('zulu').innerText = batteryData.timestamp;
 
 //         // Voeg andere eigenschappen toe zoals nodig
 //     }
 
 //     // Fetch battery data when the page loads
 //     fetchBatteryData();
-/////////////////////////////////
+// // });
 
 const { ipcRenderer } = require("electron");
 const axios = require('axios');
  
-// document.addEventListener('DOMContentLoaded', () => {
+// Function to open the modal
-    ipcRenderer.send('request-update-temp', ['some', 'arguments']);
+function openModal() {
+    const modal = document.getElementById("myModal");
+    const button = document.getElementById("modalButton");
+    const close = document.getElementsByClassName("close")[0];
  
-    ipcRenderer.on('update-temp-result', (event, newTemperature) => {
+    if (modal && button) { // Check if elements are found
-        if (newTemperature === 'error') {
+        // Toon de modal wanneer op de knop wordt geklikt
-            console.error('Er is een fout opgetreden bij het ophalen van de nieuwe temperatuur');
+        button.onclick = function () {
-        } else {
+            modal.style.display = "block";
-            document.getElementById('bodem-temperatuur').textContent = newTemperature;
         }
-    });
+ 
+        // 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";
+            }
+        }
+    } else {
+        console.error("Modal elements not found");
+    }
+}
+ 
+document.addEventListener('DOMContentLoaded', () => {
+    // Call openModal when DOM content is loaded
+    openModal();
  
     // Send a message to the main process to execute the Python script
     ipcRenderer.send('run-python-script', ['some', 'arguments']);
@@ -178,123 +212,95 @@ const axios = require('axios');
     // Trigger an event to request data update
     ipcRenderer.send('request-update-data');
  
-    // Function to open the modal
-    function openModal() {
-        const modal = document.getElementById("myModal");
-        const button = document.getElementById("modalButton");
-        const close = document.getElementsByClassName("close")[0];
-
-        // Check if elements are found before attaching events
-        if (modal && button && close) {
-            // Show the modal when the button is clicked
-            button.onclick = function () {
-                modal.style.display = "block";
-            }
-
-            // Close the modal when the 'close' icon is clicked
-            close.onclick = function () {
-                modal.style.display = "none";
-            }
-
-            // Close the modal when clicked outside the modal
-            window.onclick = function (event) {
-                if (event.target == modal) {
-                    modal.style.display = "none";
-                }
-            }
-        }
-    }
-
-    // Call the function to open the modal
-    openModal();
-
-    /**
-     * --- Function to draw the chart. The important arrays are "data" & "xLabels".
-     */
-    function drawLineChart() {
-        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);
-            }
-        }
-    }
-
-    // Call the function to draw the line chart
-    drawLineChart();
-
-    // Function to fetch battery data from Flask API
-    function fetchBatteryData() {
-        axios.get('http://127.0.0.1:5000')
-            .then(response => {
-                const batteryData = response.data;
-                updateBatteryData(batteryData);
-            })
-            .catch(error => {
-                console.error('Error fetching battery data:', error);
-            });
-    }
-
-    // Function to update HTML content with battery data
-    function updateBatteryData(batteryData) {
-        document.getElementById('deviceNumber').innerText = batteryData.device;
-        document.getElementById('voltage').innerText = batteryData.value;
-        document.getElementById('time').innerText = batteryData.gateway_receive_time;
-        document.getElementById('zulu').innerText = batteryData.timestamp;
-
-        // Voeg andere eigenschappen toe zoals nodig
-    }
-
     // Fetch battery data when the page loads
     fetchBatteryData();
-// });
+});
+ 
+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();
+// Function to fetch battery data from Flask API
+function fetchBatteryData() {
+    axios.get('http://127.0.0.1:5000')
+        .then(response => {
+            const batteryData = response.data;
+            updateBatteryData(batteryData);
+        })
+        .catch(error => {
+            console.error('Error fetching battery data:', error);
+        });
+}
+ 
+// Function to update HTML content with battery data
+function updateBatteryData(batteryData) {
+    document.getElementById('deviceNumber').innerText = batteryData.device;
+    document.getElementById('voltage').innerText = batteryData.value;
+    document.getElementById('time').innerText = batteryData.gateway_receive_time;
+    document.getElementById('tevredenheid').innerText = batteryData.timestamp;
+ 
+    // Voeg andere eigenschappen toe zoals nodig
+}

src/py/templates/index.html

@@ -31,10 +31,10 @@
                             </td>
                         </tr> -->
                     </table>
-                    <div class="formulier">
+                    <!-- <div class="formulier">
                       <div id="myModal" class="modal" style="display: none;">
                           <h1 id="plant-id">Plant Toevoegen</h1>
-                          <form action="http://localhost:3000/submit-form" method="post">
+                          <form action="http://localhost:3000/submit-form" method="post"onsubmit="return addplant()">
                               <label for="plantNaam">Naam van de plant</label><br>
                               <input type="text" name="plant_naam" id="plantNaam"><br>
               
@@ -43,14 +43,14 @@
               
                               <label for="aanwezig">Aanwezig in de kas</label><br>
                               <select name="aanwezig_in_kas">
-                                  <option value="ja">Ja</option>
+                                  <option value="true">Ja</option>
-                                  <option value="nee">Nee</option>
+                                  <option value="false">Nee</option>
                               </select><br>
               
                               <label for="ontvangenMeldingen">Meldingen ontvangen</label><br>
                               <select name="ontvangen_meldingen">
-                                  <option value="ja">Ja</option>
+                                  <option value="true">Ja</option>
-                                  <option value="nee">Nee</option>
+                                  <option value="false">Nee</option>
                               </select><br>
               
                               <section class="knop-container">
@@ -60,7 +60,28 @@
                           </form>
                       </div>
                   </div>
-                  <div id="overlay" onclick="closeOverlay()"></div>
+                  <div id="overlay" onclick="closeOverlay()"></div> -->
+                  <div id="myModal" class="modal">
+                    <span class="close">&times;</span>
+                    <form action="http://localhost:3000/submit-form" method="post" onsubmit="return addplant()">
+           
+                        <input type="text" name="plant_naam" id="plantNaam">
+                        <label for="plantNaam">Naam van de plant</label>
+           
+                        <input type="text" name="plantensoort" id="plantensoort">
+                        <label for="plantensoort">Soort van de plant</label>
+           
+                        <input type="radio" name="plant_geteelt" id="aanwezig" value="true">
+                        <label for="aanwezig">Aanwezig</label>
+           
+                        <input type="radio" name="plant_geteelt" id="afwezig" value="false">
+                        <label for="afwezig">Afwezig</label>
+           
+                        <input type="submit" value="Submit">
+                    </form>
+           
+                </div>
+                <div id="overlay" onclick="closeOverlay"></div>
                 </section>
                 <!-- White space -->
                 <section>