errors gefixed | modal | form | dynamische paginas

app.js

@@ -97,6 +97,7 @@ app.on("window-all-closed", () =>
 // Creëert het hoofdvenster opnieuw wanneer het app icoon wordt aangeklikt en er zijn geen vensters open.
 app.on("activate", () => 
 {
+
   if (BrowserWindow.getAllWindows().length === 0) 
   {
     createWindow();
@@ -105,6 +106,7 @@ app.on("activate", () =>
 
 //
 
+
 // Configureert IPC (Inter-Process Communication) luisteraars.
 function setupIpcMainListeners() 
 {

app.py

@@ -73,6 +73,31 @@ def get_weather():
     }
  
     return jsonify(weather_data)
+
+
+def get_planten_data():
+    mydb = database_connect()
+    if mydb and mydb.is_connected():
+        cursor = mydb.cursor(dictionary=True)  # Corrected from corsor to cursor
+
+        query = "SELECT id, plant_naam, plantensoort, plant_geteelt FROM planten"
+
+        cursor.execute(query)
+        planten_data = cursor.fetchall()  # Fetch all rows
+        mydb.close()
+        return planten_data
+
+    
+@app.route("/planten", methods=["GET"])
+def get_data_planten():
+    planten_data = get_planten_data()
+ 
+    if planten_data is None or len(planten_data) == 0:
+   
+        return jsonify({"error": "Failed to fetch data from database"})
+ 
+ 
+    return jsonify(planten_data) # Directly return the list of dictionaries as JSON
  
 if __name__ == "__main__":
     app.run(host="127.0.0.1", port=5000)

goodgarden.sql

@@ -1,316 +0,0 @@
--- phpMyAdmin SQL Dump
--- version 5.2.1
--- https://www.phpmyadmin.net/
---
--- Host: 127.0.0.1
--- Gegenereerd op: 20 mrt 2024 om 10:19
--- Serverversie: 10.4.32-MariaDB
--- PHP-versie: 8.2.12
-
-DROP DATABASE IF EXISTS goodgarden;
-CREATE DATABASE goodgarden;
-
-USE goodgarden;
-
-SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
-START TRANSACTION;
-SET time_zone = "+00:00";
-
-
-/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
-/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
-/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
-/*!40101 SET NAMES utf8mb4 */;
-
---
--- Database: `goodgarden`
---
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `battery_voltage_events`
---
-
-CREATE TABLE `battery_voltage_events` (
-  `id` int(10) UNSIGNED NOT NULL,
-  `timestamp` int(11) DEFAULT NULL,
-  `gateway_receive_time` varchar(50) DEFAULT NULL,
-  `device` int(11) DEFAULT NULL,
-  `value` decimal(10,5) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
---
--- Gegevens worden geëxporteerd voor tabel `battery_voltage_events`
---
-
-INSERT INTO `battery_voltage_events` (`id`, `timestamp`, `gateway_receive_time`, `device`, `value`) VALUES
-(2185, 1710839863, '2024-03-19T09:17:43Z', 256, 4.03663),
-(2186, 1710842346, '2024-03-19T09:59:06Z', 322, 4.08547);
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `devices`
---
-
-CREATE TABLE `devices` (
-  `id` int(10) UNSIGNED NOT NULL,
-  `serial_number` varchar(255) DEFAULT NULL,
-  `name` varchar(255) DEFAULT NULL,
-  `label` varchar(255) DEFAULT NULL,
-  `last_seen` int(11) DEFAULT NULL,
-  `last_battery_voltage` float DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `fetch`
---
-
-CREATE TABLE `fetch` (
-  `id` int(10) UNSIGNED NOT NULL,
-  `timestamp` int(11) DEFAULT NULL,
-  `gateway_receive_time` varchar(50) DEFAULT NULL,
-  `device` int(11) DEFAULT NULL,
-  `value` decimal(10,5) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `par_events`
---
-
-CREATE TABLE `par_events` (
-  `id` int(10) UNSIGNED NOT NULL,
-  `timestamp` int(11) DEFAULT NULL,
-  `gateway_receive_time` varchar(50) DEFAULT NULL,
-  `device` int(11) DEFAULT NULL,
-  `value` decimal(10,5) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `planten`
---
-
-CREATE TABLE `planten` (
-  `id` int(20) UNSIGNED NOT NULL,
-  `plant_naam` varchar(255) DEFAULT NULL,
-  `plantensoort` varchar(255) DEFAULT NULL,
-  `plant_geteelt` tinyint(1) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
---
--- Gegevens worden geëxporteerd voor tabel `planten`
---
-
-INSERT INTO `planten` (`id`, `plant_naam`, `plantensoort`, `plant_geteelt`) VALUES
-(47, 'Tomaten', 'Groente', 1),
-(49, 'Komkommer', 'Groente', 1),
-(50, 'Appel', 'Fruit', 1),
-(51, 'Sla', 'Groente', 1),
-(52, 'Wietplant', 'Onkruid', 0);
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `relative_humidity_events`
---
-
-CREATE TABLE `relative_humidity_events` (
-  `id` int(10) UNSIGNED NOT NULL,
-  `timestamp` int(11) DEFAULT NULL,
-  `gateway_receive_time` varchar(50) DEFAULT NULL,
-  `device` int(11) DEFAULT NULL,
-  `value` decimal(10,5) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `soil_electric_conductivity_events`
---
-
-CREATE TABLE `soil_electric_conductivity_events` (
-  `id` int(10) UNSIGNED NOT NULL,
-  `timestamp` int(11) DEFAULT NULL,
-  `gateway_receive_time` varchar(50) DEFAULT NULL,
-  `device` int(11) DEFAULT NULL,
-  `value` decimal(10,5) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `soil_relative_permittivity_events`
---
-
-CREATE TABLE `soil_relative_permittivity_events` (
-  `id` int(10) UNSIGNED NOT NULL,
-  `timestamp` int(11) DEFAULT NULL,
-  `gateway_receive_time` varchar(50) DEFAULT NULL,
-  `device` int(11) DEFAULT NULL,
-  `value` decimal(10,5) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `soil_temperature_events`
---
-
-CREATE TABLE `soil_temperature_events` (
-  `id` int(10) NOT NULL,
-  `timestamp` int(11) DEFAULT NULL,
-  `gateway_receive_time` varchar(50) DEFAULT NULL,
-  `device` int(11) DEFAULT NULL,
-  `value` decimal(10,5) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
---
--- Indexen voor geëxporteerde tabellen
---
-
---
--- Indexen voor tabel `battery_voltage_events`
---
-ALTER TABLE `battery_voltage_events`
-  ADD PRIMARY KEY (`id`),
-  ADD UNIQUE KEY `timestamp` (`timestamp`),
-  ADD UNIQUE KEY `gateway_receive_time` (`gateway_receive_time`);
-
---
--- Indexen voor tabel `devices`
---
-ALTER TABLE `devices`
-  ADD PRIMARY KEY (`id`),
-  ADD UNIQUE KEY `last_seen` (`last_seen`),
-  ADD UNIQUE KEY `last_battery_voltage` (`last_battery_voltage`);
-
---
--- Indexen voor tabel `fetch`
---
-ALTER TABLE `fetch`
-  ADD PRIMARY KEY (`id`),
-  ADD UNIQUE KEY `timestamp` (`timestamp`),
-  ADD UNIQUE KEY `gateway_receive_time` (`gateway_receive_time`),
-  ADD UNIQUE KEY `value` (`value`);
-
---
--- Indexen voor tabel `par_events`
---
-ALTER TABLE `par_events`
-  ADD PRIMARY KEY (`id`),
-  ADD UNIQUE KEY `timestamp` (`timestamp`),
-  ADD UNIQUE KEY `gateway_receive_time` (`gateway_receive_time`),
-  ADD UNIQUE KEY `value` (`value`);
-
---
--- Indexen voor tabel `planten`
---
-ALTER TABLE `planten`
-  ADD PRIMARY KEY (`id`),
-  ADD UNIQUE KEY `plant_naam` (`plant_naam`);
-
---
--- Indexen voor tabel `relative_humidity_events`
---
-ALTER TABLE `relative_humidity_events`
-  ADD PRIMARY KEY (`id`),
-  ADD UNIQUE KEY `timestamp` (`timestamp`),
-  ADD UNIQUE KEY `gateway_receive_time` (`gateway_receive_time`),
-  ADD UNIQUE KEY `value` (`value`);
-
---
--- Indexen voor tabel `soil_electric_conductivity_events`
---
-ALTER TABLE `soil_electric_conductivity_events`
-  ADD PRIMARY KEY (`id`),
-  ADD UNIQUE KEY `timestamp` (`timestamp`),
-  ADD UNIQUE KEY `gateway_receive_time` (`gateway_receive_time`),
-  ADD UNIQUE KEY `value` (`value`);
-
---
--- Indexen voor tabel `soil_relative_permittivity_events`
---
-ALTER TABLE `soil_relative_permittivity_events`
-  ADD PRIMARY KEY (`id`),
-  ADD UNIQUE KEY `timestamp` (`timestamp`),
-  ADD UNIQUE KEY `gateway_receive_time` (`gateway_receive_time`),
-  ADD UNIQUE KEY `value` (`value`);
-
---
--- Indexen voor tabel `soil_temperature_events`
---
-ALTER TABLE `soil_temperature_events`
-  ADD PRIMARY KEY (`id`),
-  ADD UNIQUE KEY `timestamp` (`timestamp`),
-  ADD UNIQUE KEY `gateway_receive_time` (`gateway_receive_time`),
-  ADD UNIQUE KEY `value` (`value`);
-
---
--- AUTO_INCREMENT voor geëxporteerde tabellen
---
-
---
--- AUTO_INCREMENT voor een tabel `battery_voltage_events`
---
-ALTER TABLE `battery_voltage_events`
-  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2189;
-
---
--- AUTO_INCREMENT voor een tabel `devices`
---
-ALTER TABLE `devices`
-  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=15;
-
---
--- AUTO_INCREMENT voor een tabel `fetch`
---
-ALTER TABLE `fetch`
-  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=100;
-
---
--- AUTO_INCREMENT voor een tabel `par_events`
---
-ALTER TABLE `par_events`
-  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
-
---
--- AUTO_INCREMENT voor een tabel `planten`
---
-ALTER TABLE `planten`
-  MODIFY `id` int(20) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=53;
-
---
--- AUTO_INCREMENT voor een tabel `relative_humidity_events`
---
-ALTER TABLE `relative_humidity_events`
-  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;
-
---
--- AUTO_INCREMENT voor een tabel `soil_electric_conductivity_events`
---
-ALTER TABLE `soil_electric_conductivity_events`
-  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;
-
---
--- AUTO_INCREMENT voor een tabel `soil_relative_permittivity_events`
---
-ALTER TABLE `soil_relative_permittivity_events`
-  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
-
---
--- AUTO_INCREMENT voor een tabel `soil_temperature_events`
---
-ALTER TABLE `soil_temperature_events`
-  MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=8;
-COMMIT;
-
-/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
-/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
-/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

mqtt/publisher.py

@@ -12,7 +12,12 @@ publish_interval = 30  # MOET ~300 ZIJN voor productiegebruik.
 # Definieer API-eindpunten en de corresponderende MQTT topics.
 api_endpoints = [
     {"url": "https://garden.inajar.nl/api/devices/", "topic": "goodgarden/devices"},
-    # Voeg meer API-eindpunten en topics toe zoals vereist.
+    {"url": "https://garden.inajar.nl/api/relative_humidity_events/", "topic": "goodgarden/relative_humidity"},
+    {"url": "https://garden.inajar.nl/api/battery_voltage_events/", "topic": "goodgarden/battery_voltage"},
+    {"url": "https://garden.inajar.nl/api/soil_electric_conductivity_events/", "topic": "goodgarden/soil_electric_conductivity"},
+    {"url": "https://garden.inajar.nl/api/soil_relative_permittivity_events/", "topic": "goodgarden/soil_relative_permittivity"},
+    {"url": "https://garden.inajar.nl/api/soil_temperature_events/", "topic": "goodgarden/soil_temperature"},
+    {"url": "https://garden.inajar.nl/api/par_events/", "topic": "goodgarden/par_events"}
 ]
 
 def on_connect(client, userdata, flags, rc):

src/css/style.css

@@ -1,405 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap");
-h1,
-h2,
-h3,
-h4,
-h5 {
-  font-family: "Akaya Kanadaka", system-ui;
-  margin: 0;
-}
-
-p,
-td {
-  font-family: "Afacad", sans-serif;
-  color: black;
-}
-
-a {
-  text-decoration: none;
-}
-
-body {
-  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/achtergrond.png");
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  font-family: "Afacad", sans-serif;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  margin: 0;
-}
-body .mainContainer {
-  width: 85vw;
-  height: 38rem;
-  background-color: rgba(255, 255, 255, 0.85);
-  border-radius: 40px;
-  padding: 2rem;
-}
-body .mainContainer .goodgarden-logo {
-  position: absolute;
-  width: 10vw;
-  left: 50%;
-  top: 4.1rem;
-  transform: translateX(-50%);
-}
-body .mainContainer .informatie-kas-main-container {
-  display: grid;
-  grid-template-columns: 5fr 7fr;
-}
-body .mainContainer .mainBorder {
-  padding: 1.25rem 1.5rem;
-  padding: 1rem 0;
-  height: 35rem;
-  border: solid 5px rgb(171, 211, 174);
-  border-radius: 40px;
-}
-body .mainContainer .mainBorder .pagina-titel {
-  font-size: 2rem;
-  margin-left: 1.5rem;
-}
-body .mainContainer .mainBorder #sectie-1 {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  padding: 0 2.5rem 0 1rem;
-  position: relative;
-}
-body .mainContainer .mainBorder #sectie-1 h1 {
-  background-color: green;
-}
-body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-  border-radius: 40px;
-  padding: 1rem;
-  background-color: white;
-}
-body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht {
-  border: solid 2px rgb(171, 211, 174);
-  border-radius: 35px;
-  font-size: 1.25rem;
-  padding: 0.5rem 1rem;
-}
-body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht .table-informatie-kas {
-  width: 100%;
-}
-body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht .table-informatie-kas .tr-informatie-kas {
-  display: flex;
-  justify-content: space-between;
-  text-align: left;
-}
-body .mainContainer .mainBorder #sectie-1 .grafiek {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-  border-radius: 40px;
-  padding: 1rem;
-  position: relative;
-  background-color: white;
-}
-body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox {
-  border: solid 2px rgb(171, 211, 174);
-  border-radius: 35px;
-  font-size: 1.25rem;
-  padding: 0 1rem 2.5rem;
-  height: 225px;
-  position: relative;
-}
-body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox h2 {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-}
-body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox canvas {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-body .mainContainer .mainBorder .content {
-  display: grid;
-  grid-template-columns: 3fr 1fr 3fr;
-  height: 100%;
-}
-body .mainContainer .mainBorder .content .kant-links {
-  grid-column: 1;
-}
-body .mainContainer .mainBorder .content .kant-links #planten {
-  width: 100%;
-  border-collapse: collapse;
-}
-body .mainContainer .mainBorder .content .kant-links #planten td article {
-  height: 7rem;
-  width: 10rem;
-  padding: 0.6rem;
-  margin: 0.1rem;
-  margin-left: 2rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: solid 3px rgb(171, 211, 174);
-  border-radius: 40px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-body .mainContainer .mainBorder .content .kant-links #planten td article #toevoegen {
-  height: 5rem;
-  width: 5rem;
-}
-body .mainContainer .mainBorder .content .kant-links #planten td article h2 {
-  color: gray;
-}
-body .mainContainer .mainBorder .content .kant-links #planten td article:hover {
-  background-color: lightgray;
-}
-body .mainContainer .mainBorder .content .kant-rechts {
-  grid-column: 3;
-}
-body .mainContainer .mainBorder .content .kant-rechts #metingen {
-  border: solid 3px rgb(171, 211, 174);
-  border-radius: 40px;
-}
-body .mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes {
-  display: flex;
-  justify-content: space-between;
-  padding: 0.5rem;
-  padding-bottom: 0;
-  width: 100%;
-}
-body .mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes table {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-body .mainContainer .mainBorder .grid-column-2 {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-  border-radius: 40px;
-  padding: 1rem;
-  margin: 3.25rem 1rem 1.25rem 1rem;
-  background-color: white;
-}
-body .mainContainer .mainBorder .grid-column-2 .grid-2-child {
-  border: solid 2px rgb(171, 211, 174);
-  border-radius: 35px;
-  height: 100%;
-}
-body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table {
-  padding: 1.5rem 2rem;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 2.5rem;
-  justify-content: space-around;
-  height: 90%;
-}
-body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table table tr td {
-  font-size: 1.05rem;
-}
-body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-1 tr td {
-  font-size: 1.25rem;
-}
-body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2 {
-  position: relative;
-}
-body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::after, body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 1px;
-  width: 90%;
-  background: black;
-}
-body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::after {
-  bottom: -20px;
-}
-body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-table-2::before {
-  top: -20px;
-}
-
-.divider {
-  display: flex;
-  justify-content: center;
-  border: solid 1px rgb(171, 211, 174);
-  border-radius: 5px;
-  width: 80%;
-  margin: 0 auto;
-}
-
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 999;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  background: white;
-  padding: 1.25rem;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  width: 30vw;
-  height: auto;
-  border: solid 2px #abd3ae;
-  border-radius: 10px;
-}
-
-.modal .close {
-  color: #aaa;
-  float: right;
-  font-size: 1.75rem;
-  font-weight: bold;
-}
-
-.modal .close:hover,
-.modal .close:active {
-  color: black;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-#myModal select,
-#myModal input {
-  width: calc(100% - 20px);
-  padding: 10px;
-  margin-bottom: 15px;
-  border: 2px solid #abd3ae;
-  border-radius: 5px;
-  box-sizing: border-box;
-}
-
-#myModal .knop {
-  display: flex;
-  justify-content: space-between;
-}
-
-#myModal button {
-  width: 48%;
-  padding: 10px;
-  box-sizing: border-box;
-  height: 40px;
-}
-
-#myModal .knop-container {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-}
-
-#myModal .knop-container input,
-#myModal .knop-container button {
-  flex: 1;
-  margin: 0 5px;
-  padding: 10px;
-  box-sizing: border-box;
-}
-
-#myModal input[type=text],
-#myModal select {
-  border: 2px solid #abd3ae;
-  padding: 10px;
-  border-radius: 17px;
-  box-sizing: border-box;
-}
-
-#myModal input[type=submit],
-#myModal button {
-  color: #fff;
-  border: none;
-  border-radius: 15px;
-  cursor: pointer;
-}
-
-#myModal input[type=submit] {
-  background-color: white;
-}
-
-#myModal button {
-  background-color: white;
-  color: black;
-}
-
-.toevoeging {
-  background: linear-gradient(45deg, #abd3ae, #2ecc71);
-}
-
-.annulatie-knop {
-  background: linear-gradient(45deg, #ffcc00, #ff6600);
-}
-
-#myModal button:hover {
-  background: linear-gradient(45deg, #abd3ae, #fff);
-  color: #000;
-}
-
-.modal .close {
-  color: #aaa;
-  float: right;
-  font-size: 1.75rem;
-  font-weight: bold;
-}
-
-.modal .close:hover,
-.modal .close:active {
-  color: black;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-.switch-container {
-  display: flex;
-  align-items: end;
-}
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 30px;
-}
-
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  border-radius: 34px;
-  transition: 0.4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  border-radius: 50%;
-  transition: 0.4s;
-}
-
-input:checked + .slider {
-  background-color: #2ecc71;
-}
-
-input:checked + .slider:before {
-  transform: translateX(26px);
-}
-
-.rechterkant {
-  display: flex;
-  justify-content: end;
-}
-
-.plant-container,
-#modalButton {
-  background-color: white;
-}/*# sourceMappingURL=style.css.map */

src/css/style.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}

src/css/style.scss

@@ -1,536 +0,0 @@
-$primary-color: rgb(171, 211, 174);
-$secondary-color: rgb(143, 188, 143);
- 
-@import url("https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap");
- 
-$font-titels: "Akaya Kanadaka", system-ui;
- 
-$font-text: "Afacad", sans-serif;
- 
-@mixin flexbox-center
-{
-  display: flex;
-  justify-content: center;
-}
- 
-@mixin groene-border
-{
-  border: solid 2px $primary-color;
-}
- 
-@mixin box-shadow
-{
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-}
- 
-@mixin border-radius
-{
-  border-radius: 40px;
-}
- 
-@mixin inner-border-radius
-{
-  border-radius: 35px;
-}
- 
-h1,
-h2,
-h3,
-h4,
-h5
-{
-  font-family: $font-titels;
-  margin: 0;
-}
- 
-p,
-td
-{
-  font-family: $font-text;
-  color: black;
-}
- 
-a
-{
-  text-decoration: none;
-}
- 
-body
-{
-  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/achtergrond.png");
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  font-family: $font-text;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  margin: 0;
- 
-  .mainContainer
-  {
-    width: 85vw;
-    height: 38rem;
-    background-color: rgb(255, 255, 255, 85%);
-    border-radius: 40px;
-    padding: 2rem;
- 
-    .goodgarden-logo
-    {
-      position: absolute;
-      width: 10vw;
-      left: 50%;
-      top: 4.1rem;
-      transform: translateX(-50%);
-    }
- 
-    .informatie-kas-main-container
-    {
-      display: grid;
-      grid-template-columns: 5fr 7fr;
-    }
- 
-    .mainBorder
-    {
-      padding: 1.25rem 1.5rem;
-      padding: 1rem 0;
-      height: 35rem;
-      border: solid 5px $primary-color;
-      border-radius: 40px;
- 
-      .pagina-titel
-      {
-        font-size: 2rem;
-        margin-left: 1.5rem;
-      }
- 
-      #sectie-1
-      {
-        display: flex;
-        flex-direction: column;
-        // gap: 1rem;
-        gap: 0;
-        padding: 0 2.5rem 0 1rem;
-        position: relative;
- 
-        h1
-        {
-          background-color: green;
-        }
- 
-        .parent-algemeen-overzicht
-        {
-          @include box-shadow;
-          @include border-radius;
-          padding: 1rem;
-          // margin-top: 1rem;
-          background-color: white;
- 
-          .algemeen-overzicht
-          {
-            @include groene-border;
-            @include inner-border-radius;
-            font-size: 1.25rem;
-            padding: 0.5rem 1rem;
- 
-            .table-informatie-kas
-            {
-              width: 100%;
- 
-              .tr-informatie-kas
-              {
-                display: flex;
-                justify-content: space-between;
-                text-align: left;
-              }
-            }
-          }
-        }
- 
-        .grafiek
-        {
-          @include box-shadow;
-          @include border-radius;
-          padding: 1rem;
-          position: relative;
-          background-color: white;
- 
-          .grafiek-innerbox
-          {
-            @include groene-border;
-            @include inner-border-radius;
-            font-size: 1.25rem;
-            padding: 0 1rem 2.5rem;
-            height: 225px;
-            position: relative;
- 
-            h2
-            {
-              position: absolute;
-              left: 50%;
-              transform: translateX(-50%);
-            }
- 
-            canvas
-            {
-              // Zorgt ervoor dat de grafiek precies in eht midden komt
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
-            }
-          }
-        }
-      }
- 
-      .content
-      {
-        display: grid;
-        grid-template-columns: 3fr 1fr 3fr;
-        height: 100%;
- 
-        .kant
-        {
-          &-links
-          {
-            grid-column: 1;
- 
-            #planten
-            {
-              width: 100%;
-              border-collapse: collapse;
- 
-              td
-              {
-                article
-                {
-                  height: 7rem;
-                  width: 10rem;
-                  padding: 0.6rem;
-                  margin: 0.1rem;
-                  margin-left: 2rem;
-                  display: flex;
-                  flex-direction: column;
-                  justify-content: center;
-                  align-items: center;
-                  border: solid 3px $primary-color;
-                  border-radius: 40px;
-                  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
- 
-                  #toevoegen
-                  {
-                    height: 5rem;
-                    width: 5rem;
-                  }
- 
-                  h2
-                  {
-                    color: gray;
-                  }
- 
-                  &:hover
-                  {
-                    background-color: lightgray;
-                  }
-                }
-              }
-            }
-          }
- 
-          &-rechts
-          {
-            grid-column: 3;
-            // margin-right: 2rem;
- 
-            #metingen
-            {
-              border: solid 3px $primary-color;
-              border-radius: 40px;
- 
-              #main-waardes
-              {
-                display: flex;
-                justify-content: space-between;
-                padding: 0.5rem;
-                padding-bottom: 0;
-                width: 100%;
- 
-                table
-                {
-                  display: flex;
-                  justify-content: space-between;
-                  width: 100%;
-                }
-              }
-            }
-          }
-        }
-      }
- 
-      .grid-column-2
-      {
-        @include box-shadow;
-        @include border-radius;
-        padding: 1rem;
-        margin: 3.25rem 1rem 1.25rem 1rem;
-        background-color: white;
- 
-        .grid-2-child
-        {
-          @include groene-border;
-          @include inner-border-radius;
-          height: 100%;
- 
-          .parent-table
-          {
-            padding: 1.5rem 2rem;
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            gap: 2.5rem;
-            justify-content: space-around;
-            height: 90%;
- 
-            table
-            {
-              tr
-              {
-                td
-                {
-                  font-size: 1.05rem;
-                }
-              }
-            }
- 
-            .kas-table-1
-            {
-              tr
-              {
-                td
-                {
-                  font-size: 1.25rem;
-                }
-              }
-            }
- 
-            .kas-table-2
-            {
-              position: relative;
- 
-              &::after,
-              &::before
-              {
-                content: "";
-                position: absolute;
-                left: 0;
-                right: 0;
-                height: 1px;
-                width: 90%;
-                background: black;
-              }
- 
-              &::after
-              {
-                bottom: -20px;
-              }
- 
-              &::before
-              {
-                top: -20px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
- 
-.divider {
-  display: flex;
-  justify-content: center;
-  border: solid 1px $primary-color;
-  border-radius: 5px;
-  width: 80%;
-  margin: 0 auto;
-}
- 
-.modal {
-  display: none;
-  position: fixed;
-  z-index: 999;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  background: white;
-  padding: 1.25rem;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  width: 30vw;
-  height: auto;
-  border: solid 2px #abd3ae;
-  border-radius: 10px;
-}
-.modal .close {
-  color: #aaa;
-  float: right;
-  font-size: 1.75rem;
-  font-weight: bold;
-}
-.modal .close:hover,
-.modal .close:active {
-  color: black;
-  text-decoration: none;
-  cursor: pointer;
-}
- 
-#myModal select,
-#myModal input {
-  width: calc(100% - 20px);
-  padding: 10px;
-  margin-bottom: 15px;
-  border: 2px solid #abd3ae;
-  border-radius: 5px;
-  box-sizing: border-box;
-}
- 
-#myModal .knop {
-  display: flex;
-  justify-content: space-between;
-}
- 
-#myModal button {
-  width: 48%;
-  padding: 10px;
-  box-sizing: border-box;
-  height: 40px;
-}
- 
-#myModal .knop-container {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-}
- 
-#myModal .knop-container input,
-#myModal .knop-container button {
-  flex: 1;
-  margin: 0 5px;
-  padding: 10px;
-  box-sizing: border-box;
-}
- 
-#myModal input[type="text"],
-#myModal select {
-  border: 2px solid #abd3ae;
-  padding: 10px;
-  border-radius: 17px;
-  box-sizing: border-box;
-}
- 
-#myModal input[type="submit"],
-#myModal button {
-  color: #fff;
-  border: none;
-  border-radius: 15px;
-  cursor: pointer;
-}
- 
-#myModal input[type="submit"] {
-  background-color: white;
-}
- 
-#myModal button {
-  background-color: white;
-  color: black;
-}
- 
-.toevoeging {
-  background: linear-gradient(45deg, #abd3ae, #2ecc71);
-}
- 
-.annulatie-knop {
-  background: linear-gradient(45deg, #ffcc00, #ff6600);
-}
- 
-#myModal button:hover {
-  background: linear-gradient(45deg, #abd3ae, #fff);
-  color: #000;
-}
- 
-.modal .close {
-  color: #aaa;
-  float: right;
-  font-size: 1.75rem;
-  font-weight: bold;
-}
- 
-.modal .close:hover,
-.modal .close:active {
-  color: black;
-  text-decoration: none;
-  cursor: pointer;
-}
- 
-.switch-container {
-  display: flex;
-  align-items: end;
-}
- 
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 60px;
-  height: 30px;
-}
- 
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
- 
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  border-radius: 34px;
-  transition: 0.4s;
-}
- 
-.slider:before {
-  position: absolute;
-  content: "";
-  height: 26px;
-  width: 26px;
-  left: 4px;
-  bottom: 4px;
-  background-color: white;
-  border-radius: 50%;
-  transition: 0.4s;
-}
- 
-input:checked + .slider {
-  background-color: #2ecc71;
-}
- 
-input:checked + .slider:before {
-  transform: translateX(26px);
-}
- 
-.rechterkant {
-  display: flex;
-  justify-content: end;
-}
- 
-  .plant-container,
-  #modalButton
-  {
-    background-color: white;
-  }
- 

src/py/script/goodgarden.sql

@@ -1,346 +0,0 @@
--- phpMyAdmin SQL Dump
--- version 5.2.1
--- https://www.phpmyadmin.net/
---
--- Host: 127.0.0.1
--- Gegenereerd op: 14 feb 2024 om 14:36
--- Serverversie: 10.4.28-MariaDB
--- PHP-versie: 8.2.4
-
-DROP DATABASE IF EXISTS goodgarden;
-CREATE DATABASE goodgarden;
-
-USE goodgarden; 
-
-SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
-START TRANSACTION;
-SET time_zone = "+00:00";
-
-
-/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
-/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
-/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
-/*!40101 SET NAMES utf8mb4 */;
-
---
--- Database: `goodgarden`
---
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `battery_voltage_events`
---
-
-CREATE TABLE `battery_voltage_events` (
-  `id` int(10) UNSIGNED NOT NULL,
-  `timestamp` int(11) DEFAULT NULL,
-  `gateway_receive_time` varchar(50) DEFAULT NULL,
-  `device` int(11) DEFAULT NULL,
-  `value` decimal(10,5) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
---
--- Gegevens worden geëxporteerd voor tabel `battery_voltage_events`
---
-
-INSERT INTO `battery_voltage_events` (`id`, `timestamp`, `gateway_receive_time`, `device`, `value`) VALUES
-(1, 1707825721, '2024-02-13T12:02:01Z', 256, 4.09890),
-(2, 1707837460, '2024-02-13T15:17:40Z', 322, 4.10501),
-(3, 1707825721, '2024-02-13T12:02:01Z', 256, 4.09890),
-(4, 1707837460, '2024-02-13T15:17:40Z', 322, 4.10501),
-(5, 1707825721, '2024-02-13T12:02:01Z', 256, 4.09890),
-(6, 1707837460, '2024-02-13T15:17:40Z', 322, 4.10501),
-(7, 1707825721, '2024-02-13T12:02:01Z', 256, 4.09890),
-(8, 1707837460, '2024-02-13T15:17:40Z', 322, 4.10501),
-(9, 1707825721, '2024-02-13T12:02:01Z', 256, 4.09890),
-(10, 1707837460, '2024-02-13T15:17:40Z', 322, 4.10501);
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `devices`
---
-
-CREATE TABLE `devices` (
-  `id` int(10) UNSIGNED NOT NULL,
-  `serial_number` varchar(255) DEFAULT NULL,
-  `name` varchar(255) DEFAULT NULL,
-  `label` varchar(255) DEFAULT NULL,
-  `last_seen` int(11) DEFAULT NULL,
-  `last_battery_voltage` float DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
---
--- Gegevens worden geëxporteerd voor tabel `devices`
---
-
-INSERT INTO `devices` (`id`, `serial_number`, `name`, `label`, `last_seen`, `last_battery_voltage`) VALUES
-(1, '0033889B1BAB1169', 'firefly2_0051', 'The Field', 1707765066, 4.09768),
-(2, '006FE1FC316ED7D8', 'firefly2_0111', 'The Field', 1707764966, 4.10745);
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `fetch`
---
-
-CREATE TABLE `fetch` (
-  `id` int(10) UNSIGNED NOT NULL,
-  `timestamp` int(11) DEFAULT NULL,
-  `gateway_receive_time` varchar(50) DEFAULT NULL,
-  `device` int(11) DEFAULT NULL,
-  `value` decimal(10,5) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
---
--- Gegevens worden geëxporteerd voor tabel `fetch`
---
-
-INSERT INTO `fetch` (`id`, `timestamp`, `gateway_receive_time`, `device`, `value`) VALUES
-(70, 1707851215, '2024-02-13T19:06:55Z', 322, 0.00000),
-(71, 1707851215, '2024-02-13T19:06:55Z', 322, 1.52000),
-(72, 1707851215, '2024-02-13T19:06:55Z', 322, 12.06000),
-(73, 1707825721, '2024-02-13T12:02:01Z', 256, 4.09890),
-(74, 1707837460, '2024-02-13T15:17:40Z', 322, 4.10501),
-(75, 0, '', 0, 0.00000),
-(76, 0, '', 0, 0.00000),
-(77, 1707844638, '2024-02-13T17:17:18Z', 322, 0.00000),
-(78, 1707851099, '2024-02-13T19:04:59Z', 256, 0.00000),
-(79, 1707844638, '2024-02-13T17:17:18Z', 322, 71.08984),
-(80, 1707851099, '2024-02-13T19:04:59Z', 256, 66.72949),
-(81, 1707851215, '2024-02-13T19:06:55Z', 322, 0.00000),
-(82, 1707851215, '2024-02-13T19:06:55Z', 322, 1.52000),
-(83, 1707851215, '2024-02-13T19:06:55Z', 322, 12.06000),
-(84, 0, '', 0, 0.00000),
-(85, 0, '', 0, 0.00000),
-(86, 1707844638, '2024-02-13T17:17:18Z', 322, 0.00000),
-(87, 1707851099, '2024-02-13T19:04:59Z', 256, 0.00000),
-(88, 1707844638, '2024-02-13T17:17:18Z', 322, 71.08984),
-(89, 1707851099, '2024-02-13T19:04:59Z', 256, 66.72949),
-(90, 1707825721, '2024-02-13T12:02:01Z', 256, 4.09890),
-(91, 1707837460, '2024-02-13T15:17:40Z', 322, 4.10501),
-(92, 0, '', 0, 0.00000),
-(93, 0, '', 0, 0.00000),
-(94, 1707844638, '2024-02-13T17:17:18Z', 322, 0.00000),
-(95, 1707851099, '2024-02-13T19:04:59Z', 256, 0.00000),
-(96, 1707844638, '2024-02-13T17:17:18Z', 322, 71.08984),
-(97, 1707851099, '2024-02-13T19:04:59Z', 256, 66.72949);
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `par_events`
---
-
-CREATE TABLE `par_events` (
-  `id` int(10) UNSIGNED NOT NULL,
-  `timestamp` int(11) DEFAULT NULL,
-  `gateway_receive_time` varchar(50) DEFAULT NULL,
-  `device` int(11) DEFAULT NULL,
-  `value` decimal(10,5) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
---
--- Gegevens worden geëxporteerd voor tabel `par_events`
---
-
-INSERT INTO `par_events` (`id`, `timestamp`, `gateway_receive_time`, `device`, `value`) VALUES
-(1, 1707844638, '2024-02-13T17:17:18Z', 322, 0.00000),
-(2, 1707851099, '2024-02-13T19:04:59Z', 256, 0.00000);
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `relative_humidity_events`
---
-
-CREATE TABLE `relative_humidity_events` (
-  `id` int(10) UNSIGNED NOT NULL,
-  `timestamp` int(11) DEFAULT NULL,
-  `gateway_receive_time` varchar(50) DEFAULT NULL,
-  `device` int(11) DEFAULT NULL,
-  `value` decimal(10,5) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
---
--- Gegevens worden geëxporteerd voor tabel `relative_humidity_events`
---
-
-INSERT INTO `relative_humidity_events` (`id`, `timestamp`, `gateway_receive_time`, `device`, `value`) VALUES
-(3, 1707844638, '2024-02-13T17:17:18Z', 322, 71.08984),
-(4, 1707851099, '2024-02-13T19:04:59Z', 256, 66.72949),
-(5, 1707844638, '2024-02-13T17:17:18Z', 322, 71.08984),
-(6, 1707851099, '2024-02-13T19:04:59Z', 256, 66.72949);
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `soil_electric_conductivity_events`
---
-
-CREATE TABLE `soil_electric_conductivity_events` (
-  `id` int(10) UNSIGNED NOT NULL,
-  `timestamp` int(11) DEFAULT NULL,
-  `gateway_receive_time` varchar(50) DEFAULT NULL,
-  `device` int(11) DEFAULT NULL,
-  `value` decimal(10,5) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
---
--- Gegevens worden geëxporteerd voor tabel `soil_electric_conductivity_events`
---
-
-INSERT INTO `soil_electric_conductivity_events` (`id`, `timestamp`, `gateway_receive_time`, `device`, `value`) VALUES
-(3, 1707851215, '2024-02-13T19:06:55Z', 322, 0.00000);
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `soil_relative_permittivity_events`
---
-
-CREATE TABLE `soil_relative_permittivity_events` (
-  `id` int(10) UNSIGNED NOT NULL,
-  `timestamp` int(11) DEFAULT NULL,
-  `gateway_receive_time` varchar(50) DEFAULT NULL,
-  `device` int(11) DEFAULT NULL,
-  `value` decimal(10,5) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
---
--- Gegevens worden geëxporteerd voor tabel `soil_relative_permittivity_events`
---
-
-INSERT INTO `soil_relative_permittivity_events` (`id`, `timestamp`, `gateway_receive_time`, `device`, `value`) VALUES
-(3, 1707851215, '2024-02-13T19:06:55Z', 322, 1.52000);
-
--- --------------------------------------------------------
-
---
--- Tabelstructuur voor tabel `soil_temperature_events`
---
-
-CREATE TABLE `soil_temperature_events` (
-  `id` int(10) NOT NULL,
-  `timestamp` int(11) DEFAULT NULL,
-  `gateway_receive_time` varchar(50) DEFAULT NULL,
-  `device` int(11) DEFAULT NULL,
-  `value` decimal(10,5) DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
-
---
--- Gegevens worden geëxporteerd voor tabel `soil_temperature_events`
---
-
-INSERT INTO `soil_temperature_events` (`id`, `timestamp`, `gateway_receive_time`, `device`, `value`) VALUES
-(3, 1707851215, '2024-02-13T19:06:55Z', 322, 12.06000);
-
---
--- Indexen voor geëxporteerde tabellen
---
-
---
--- Indexen voor tabel `battery_voltage_events`
---
-ALTER TABLE `battery_voltage_events`
-  ADD PRIMARY KEY (`id`);
-
---
--- Indexen voor tabel `devices`
---
-ALTER TABLE `devices`
-  ADD PRIMARY KEY (`id`);
-
---
--- Indexen voor tabel `fetch`
---
-ALTER TABLE `fetch`
-  ADD PRIMARY KEY (`id`);
-
---
--- Indexen voor tabel `par_events`
---
-ALTER TABLE `par_events`
-  ADD PRIMARY KEY (`id`);
-
---
--- Indexen voor tabel `relative_humidity_events`
---
-ALTER TABLE `relative_humidity_events`
-  ADD PRIMARY KEY (`id`);
-
---
--- Indexen voor tabel `soil_electric_conductivity_events`
---
-ALTER TABLE `soil_electric_conductivity_events`
-  ADD PRIMARY KEY (`id`);
-
---
--- Indexen voor tabel `soil_relative_permittivity_events`
---
-ALTER TABLE `soil_relative_permittivity_events`
-  ADD PRIMARY KEY (`id`);
-
---
--- Indexen voor tabel `soil_temperature_events`
---
-ALTER TABLE `soil_temperature_events`
-  ADD PRIMARY KEY (`id`);
-
---
--- AUTO_INCREMENT voor geëxporteerde tabellen
---
-
---
--- AUTO_INCREMENT voor een tabel `battery_voltage_events`
---
-ALTER TABLE `battery_voltage_events`
-  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;
-
---
--- AUTO_INCREMENT voor een tabel `devices`
---
-ALTER TABLE `devices`
-  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
-
---
--- AUTO_INCREMENT voor een tabel `fetch`
---
-ALTER TABLE `fetch`
-  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=98;
-
---
--- AUTO_INCREMENT voor een tabel `par_events`
---
-ALTER TABLE `par_events`
-  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
-
---
--- AUTO_INCREMENT voor een tabel `relative_humidity_events`
---
-ALTER TABLE `relative_humidity_events`
-  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=7;
-
---
--- AUTO_INCREMENT voor een tabel `soil_electric_conductivity_events`
---
-ALTER TABLE `soil_electric_conductivity_events`
-  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
-
---
--- AUTO_INCREMENT voor een tabel `soil_relative_permittivity_events`
---
-ALTER TABLE `soil_relative_permittivity_events`
-  MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
-
---
--- AUTO_INCREMENT voor een tabel `soil_temperature_events`
---
-ALTER TABLE `soil_temperature_events`
-  MODIFY `id` int(10) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
-COMMIT;
-
-/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
-/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
-/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

src/py/script/plants.json

@@ -1,50 +1,26 @@
 [
     {
-        "id": 47,
-        "plant_naam": "Tomaten",
+        "id": 3,
+        "plant_naam": "Tomatenplant",
         "plantensoort": "Groente",
         "plant_geteelt": 1
     },
     {
-        "id": 49,
-        "plant_naam": "Komkommer",
-        "plantensoort": "Groente",
-        "plant_geteelt": 1
-    },
-    {
-        "id": 50,
-        "plant_naam": "Appel",
-        "plantensoort": "Fruit",
-        "plant_geteelt": 0
-    },
-    {
-        "id": 51,
+        "id": 4,
         "plant_naam": "Sla",
         "plantensoort": "Groente",
-        "plant_geteelt": 0
-    },
-    {
-        "id": 53,
-        "plant_naam": "Patat",
-        "plantensoort": "Aarde",
-        "plant_geteelt": 0
-    },
-    {
-        "id": 54,
-        "plant_naam": "asfasfas",
-        "plantensoort": "fasfasfsaf",
-        "plant_geteelt": 0
-    },
-    {
-        "id": 55,
-        "plant_naam": "sadfadsfdsf",
-        "plantensoort": "sdfdsafdsfdf",
         "plant_geteelt": 1
     },
     {
-        "id": 56,
-        "plant_naam": "asdasd",
-        "plantensoort": "asdasdasdasdasd",
+        "id": 5,
+        "plant_naam": "Peterselie",
+        "plantensoort": "Kruiden",
+        "plant_geteelt": 1
+    },
+    {
+        "id": 6,
+        "plant_naam": "Aardbei",
+        "plantensoort": "Fruit",
         "plant_geteelt": 1
     }
 ]

src/py/static/css/style.css

@@ -59,11 +59,12 @@ body .mainContainer .mainBorder {
 body .mainContainer .mainBorder .pagina-titel {
   font-size: 2rem;
   margin-left: 1.5rem;
+  margin-bottom: 1rem;
 }
 body .mainContainer .mainBorder #sectie-1 {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.75rem;
   padding: 0 2.5rem 0 1rem;
   position: relative;
 }
@@ -74,7 +75,6 @@ body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
   border-radius: 40px;
   padding: 1rem;
-  margin-top: 1rem;
   background-color: white;
 }
 body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht {
@@ -152,6 +152,7 @@ body .mainContainer .mainBorder .content .kant-links #planten td article h2 {
 }
 body .mainContainer .mainBorder .content .kant-links #planten td article:hover {
   background-color: lightgray;
+  cursor: pointer;
 }
 body .mainContainer .mainBorder .content .kant-rechts {
   grid-column: 3;
@@ -243,11 +244,16 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
   border-radius: 10px;
 }
 
+.modal #plant-id {
+  font-size: 1.5rem;
+}
+
 .modal .close {
   color: #aaa;
   float: right;
-  font-size: 1.75rem;
+  font-size: 2rem;
   font-weight: bold;
+  margin-top: -35px;
 }
 
 .modal .close:hover,
@@ -310,7 +316,7 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
 }
 
 #myModal input[type=submit] {
-  background-color: white;
+  background: linear-gradient(45deg, #abd3ae, #6ebf7d);
 }
 
 #myModal button {
@@ -326,25 +332,6 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
   background: linear-gradient(45deg, #ffcc00, #ff6600);
 }
 
-#myModal button:hover {
-  background: linear-gradient(45deg, #abd3ae, #fff);
-  color: #000;
-}
-
-.modal .close {
-  color: #aaa;
-  float: right;
-  font-size: 1.75rem;
-  font-weight: bold;
-}
-
-.modal .close:hover,
-.modal .close:active {
-  color: black;
-  text-decoration: none;
-  cursor: pointer;
-}
-
 .switch-container {
   display: flex;
   align-items: end;
@@ -356,14 +343,12 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
   width: 60px;
   height: 30px;
 }
-
-.switch input {
+.switch .switch input {
   opacity: 0;
   width: 0;
   height: 0;
 }
-
-.slider {
+.switch .slider {
   position: absolute;
   cursor: pointer;
   top: 0;
@@ -374,8 +359,7 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
   border-radius: 34px;
   transition: 0.4s;
 }
-
-.slider:before {
+.switch .slider:before {
   position: absolute;
   content: "";
   height: 26px;
@@ -386,21 +370,77 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
   border-radius: 50%;
   transition: 0.4s;
 }
-
-input:checked + .slider {
+.switch input:checked + .slider {
   background-color: #2ecc71;
 }
-
-input:checked + .slider:before {
+.switch input:checked + .slider:before {
   transform: translateX(26px);
 }
-
-.rechterkant {
+.switch .rechterkant {
   display: flex;
   justify-content: end;
 }
-
-.plant-container,
-#modalButton {
+.switch .plant-container,
+.switch #modalButton {
   background-color: white;
+}
+.switch .switch-container {
+  position: absolute;
+}
+
+.pagina-container {
+  position: relative;
+  align-items: end;
+}
+
+.close-button:hover {
+  background-color: rgb(171, 211, 174); /* Aangepaste hover kleur */
+  color: white; /* Tekstkleur wit op hover voor betere zichtbaarheid */
+}
+
+.container {
+  position: relative;
+  align-items: end;
+}
+
+.close-button {
+  position: absolute;
+  top: -90px;
+  right: -35px;
+  transform: translate(100%, 0%);
+  width: 50px;
+  height: 50px;
+  background-color: white;
+  color: rgb(171, 211, 174);
+  border-radius: 50%; /* Aangepast voor perfecte cirkel */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 50px;
+  border: solid rgb(171, 211, 174) 2px;
+  font-weight: bold;
+}
+
+.back-button {
+  position: absolute;
+  top: -90px;
+  right: -25px;
+  width: 50px;
+  height: 50px;
+  background-color: white;
+  color: rgb(171, 211, 174);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 35px;
+  border: solid rgb(171, 211, 174) 2px;
+  font-weight: bold;
+}
+
+.back-button:hover {
+  background-color: rgb(171, 211, 174);
+  color: white;
 }/*# sourceMappingURL=style.css.map */

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":"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","file":"style.css"}

src/py/static/css/style.scss

@@ -104,13 +104,14 @@ body
       {
         font-size: 2rem;
         margin-left: 1.5rem;
+        margin-bottom: 1rem;
       }
 
       #sectie-1 
       {
         display: flex;
         flex-direction: column;
-        gap: 1rem;
+        gap: 0.75rem;
         padding: 0 2.5rem 0 1rem;
         position: relative;
 
@@ -124,7 +125,7 @@ body
           @include box-shadow;
           @include border-radius;
           padding: 1rem;
-          margin-top: 1rem;
+          // margin-top: 1rem;
           background-color: white;
 
           .algemeen-overzicht 
@@ -232,6 +233,7 @@ body
                   &:hover 
                   {
                     background-color: lightgray;
+                    cursor: pointer;
                   }
                 }
               }
@@ -371,11 +373,18 @@ body
   border: solid 2px #abd3ae;
   border-radius: 10px;
 }
+
+.modal #plant-id
+{
+  font-size: 1.5rem;
+}
+
 .modal .close {
   color: #aaa;
   float: right;
-  font-size: 1.75rem;
+  font-size: 2rem;
   font-weight: bold;
+  margin-top: -35px;
 }
 .modal .close:hover,
 .modal .close:active {
@@ -437,7 +446,7 @@ body
 }
 
 #myModal input[type="submit"] {
-  background-color: white;
+  background: linear-gradient(45deg, #abd3ae, #6ebf7d);
 }
 
 #myModal button {
@@ -453,24 +462,6 @@ body
   background: linear-gradient(45deg, #ffcc00, #ff6600);
 }
 
-#myModal button:hover {
-  background: linear-gradient(45deg, #abd3ae, #fff);
-  color: #000;
-}
-
-.modal .close {
-  color: #aaa;
-  float: right;
-  font-size: 1.75rem;
-  font-weight: bold;
-}
-
-.modal .close:hover,
-.modal .close:active {
-  color: black;
-  text-decoration: none;
-  cursor: pointer;
-}
 
 .switch-container {
   display: flex;
@@ -482,7 +473,7 @@ body
   display: inline-block;
   width: 60px;
   height: 30px;
-}
+
 
 .switch input {
   opacity: 0;
@@ -532,3 +523,73 @@ input:checked + .slider:before {
   {
     background-color: white;
   }
+
+  .switch-container {
+    position: absolute;
+  }
+}
+
+.pagina-container {
+  position: relative;
+  align-items: end;
+}
+
+.close-button:hover {
+  background-color: $primary-color; /* Aangepaste hover kleur */
+  color: white; /* Tekstkleur wit op hover voor betere zichtbaarheid */
+}
+
+.container {
+  position: relative;
+  align-items: end;
+}
+
+.close-button 
+{
+  position: absolute;
+  top: -90px;
+  right: -35px;
+  transform: translate(100%, 0%);
+  width: 50px;
+  height: 50px;
+  background-color: white;
+  color: $primary-color;
+  border-radius: 50%; /* Aangepast voor perfecte cirkel */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 50px;
+  border: solid $primary-color 2px;
+  font-weight: bold;
+}
+
+.back-button {
+  position: absolute;
+  top: -90px;
+  right: -25px;
+  width: 50px;
+  height: 50px;
+  background-color: white;
+  color: $primary-color;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  font-size: 35px;
+  border: solid $primary-color 2px;
+  font-weight: bold;
+}
+
+.back-button:hover {
+  background-color: $primary-color;
+  color: white
+}
+
+// .modal-header
+// {
+//   width: 100%;
+//   display: flex;
+//   flex-direction: row;
+// }

src/py/static/js/main.js

@@ -40,36 +40,41 @@ function openModal()
             }
         }
     } 
-    else 
-    {
-        console.error("Modaal elementen niet gevonden");
-    }
+    // else 
+    // {
+    //     console.error("Modaal elementen niet gevonden");
+    // }
 }
 
-document.addEventListener('DOMContentLoaded', () => 
-{
+// document.addEventListener('DOMContentLoaded', () => {
+    // Call openModal when DOM content is loaded
     openModal();
  
-    // Roep andere functies hier aan zoals vereist, bijvoorbeeld:
-    // fetchWeatherDataAndDrawChart();
- 
-    // Stuur een bericht naar het hoofdproces om het Python-script uit te voeren.
+    // Send a message to the main process to execute the Python script
     ipcRenderer.send('run-python-script', ['some', 'arguments']);
  
-    // Luister naar updates van HTML-data vanuit het hoofdproces.
-    ipcRenderer.on('update-html-data', (event, data) => 
-    {
-        // Werk de HTML bij met de ontvangen data.
-        document.getElementById('batteryVoltage').innerText = data.batteryVoltage;
-        // Voeg vergelijkbare regels toe voor andere data velden.
+    ipcRenderer.on('python-script-response', (event, pythonData) => {
+        if (pythonData === 'error') {
+            console.error('An error occurred while retrieving data from Python');
+        } 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
+        }
     });
  
-    // Trigger een event om data update aan te vragen.
+    // Listen for updates to HTML data from the main process
+    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
+    });
+ 
+    // Trigger an event to request data update
     ipcRenderer.send('request-update-data');
  
-    // Haal batterij data op wanneer de pagina laadt.
+    // Fetch battery data when the page loads
     fetchBatteryData();
-});
+// });
  
 /**
  * Functie om een lijngrafiek te tekenen.
@@ -83,8 +88,9 @@ function drawLineChart(xLabels, data)
  
     // 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);
  
@@ -144,6 +150,11 @@ function drawLineChart(xLabels, data)
         }
     }
 }
+else
+{
+    console.log("Canvas element does not exist on this page.");
+}
+}
  
 /**
  * Functie om weergegevens op te halen en een grafiek te tekenen.
@@ -168,17 +179,17 @@ function fetchWeatherDataAndDrawChart()
             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 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);
-        })
+            {
+                // 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.
@@ -191,16 +202,32 @@ function fetchWeatherDataAndDrawChart()
  * @param {string} dateString - De datum als string in het formaat "dd-mm".
  * @returns {string} De afkorting van de dag van de week.
  */
-function convertDateToDayOfWeek(dateString) 
-{
-    // Split de datum in dag en maand, en zet deze om naar nummers.
-    const [day, month] = dateString.split('-').map(Number);
-    // Maak een nieuwe datumobject (jaar is willekeurig omdat we alleen maand en dag nodig hebben).
-    const date = new Date(2024, month - 1, day);
-    // Verkrijg de dag van de week en zet deze om naar een afkorting.
-    const dayOfWeek = ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'][date.getDay()];
-    return dayOfWeek;
-}
+// function convertDateToDayOfWeek(dateString) 
+// {
+//     // Split de datum in dag en maand, en zet deze om naar nummers.
+//     const [day, month] = dateString.split('-').map(Number);
+//     // Maak een nieuwe datumobject (jaar is willekeurig omdat we alleen maand en dag nodig hebben).
+//     const date = new Date(2024, month - 1, day);
+//     // Verkrijg de dag van de week en zet deze om naar een afkorting.
+//     const dayOfWeek = ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'][date.getDay()];
+//     return dayOfWeek;
+// }
+
+// function convertDateToDayOfWeek(dateString) 
+// {
+//     // Create a date object from the dateString
+//     const [year, month, day] = dateString.split("-").map(Number);
+//     const date = new Date(year, month - 1, day);
+
+//     // Array of Dutch day names
+//     const dayNames = ["zo", "ma", "di", "wo", "do", "vr", "za"];
+
+//     // Return the day name according to the date object
+//     return dayNames[date.getDay()];
+// }
+
+
+
  
 /**
  * Functie om batterijdata op te halen wanneer de pagina laadt.
@@ -222,6 +249,7 @@ function fetchBatteryData()
             console.error('Error fetching battery data:', error);
         });
 }
+
  
 /**
  * Functie om batterijdata op de pagina bij te werken.
@@ -230,22 +258,31 @@ function fetchBatteryData()
  */
 function updateBatteryData(batteryData) 
 {
-    // Update de data voor specifieke apparaten op basis van hun ID.
-    if (batteryData[1].device_id == 322) 
+    // Check if on the specific page where the battery data should be updated
+    if (window.location.pathname.endsWith('index.html')) 
     {
-        document.getElementById('deviceNumber-322').innerHTML = batteryData[1].device_id;
-        document.getElementById('voltage-322').innerHTML = batteryData[1].label;
-        document.getElementById('time-322').innerHTML = new Date(batteryData[0].last_seen).toLocaleTimeString();
-        document.getElementById('tevredenheid-322').innerHTML = batteryData[1].last_battery_voltage;
-    }
-    if (batteryData[0].device_id == 256) 
-    {
-        document.getElementById('deviceNumber-256').innerHTML = batteryData[0].device_id;
-        document.getElementById('voltage-256').innerHTML = batteryData[0].label;
-        document.getElementById('time-256').innerHTML = new Date(batteryData[0].last_seen).toLocaleTimeString();
-        document.getElementById('tevredenheid-256').innerHTML = batteryData[0].last_battery_voltage;
+        // Update de data voor specifieke apparaten op basis van hun ID.
+        const sensor322Element = document.getElementById('deviceNumber-322');
+        const sensor256Element = document.getElementById('deviceNumber-256');
+        
+        if (batteryData[1].device_id === 322 && sensor322Element) 
+        {
+            sensor322Element.innerHTML = batteryData[1].device_id;
+            document.getElementById('voltage-322').innerHTML = batteryData[1].label;
+            document.getElementById('time-322').innerHTML = new Date(batteryData[1].last_seen * 1000).toLocaleTimeString();
+            document.getElementById('tevredenheid-322').innerHTML = batteryData[1].last_battery_voltage.toFixed(2);
+        }
+        if (batteryData[0].device_id === 256 && sensor256Element) 
+        {
+            sensor256Element.innerHTML = batteryData[0].device_id;
+            document.getElementById('voltage-256').innerHTML = batteryData[0].label;
+            document.getElementById('time-256').innerHTML = new Date(batteryData[0].last_seen * 1000).toLocaleTimeString();
+            document.getElementById('tevredenheid-256').innerHTML = batteryData[0].last_battery_voltage.toFixed(2);
+        }
     }
 }
+
+
  
 // Definieer de API-sleutel en de stad waarvoor we de weergegevens willen ophalen.
 const apiKey = "9516081f15727d063c9e2f08454a2fe9";
@@ -286,4 +323,84 @@ fetch(apiUrl)
   {
     // 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 => 
+        {
+            // 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();
+    

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

@@ -88,7 +88,8 @@ class PlantGrid {
                         // Handle the "Add" button
                         const article = document.createElement("article");
                         const img = article.appendChild(document.createElement("img"));
-                        img.src = "../static/images/Toevoegen.png";
+                        img.src = "../static/images/plus.png";
+                        // img.src = "../images/plus.png";
                         img.id = "toevoegen";
                         img.alt = "Add";
                         article.id = "modalButton";
@@ -107,60 +108,7 @@ class PlantGrid {
     
     }
 
-    displayGrid() {
-        const plantenTable = document.getElementById("planten"); // Verkrijg de tabel waarin het raster getoond moet worden.
 
-        let itemCount = 0; // Teller voor het aantal items in het raster.
-
-        this.grid.forEach((row, rowIndex) => {
-            const tr = document.createElement("tr"); // Maak een tabelrij element.
-
-            row.forEach((plant, colIndex) => {
-                const td = document.createElement("td"); // Maak een tabeldata element.
-
-                // Logica om plantitems of de "Toevoegen" knop te verwerken.
-                if (itemCount < 8) {
-                    if (plant) {
-                        // Verwerk normale plantitems.
-                        // Creëer een link element naar de planteninformatiepagina met plant ID als query parameter.
-                        // Voeg vervolgens een artikel, afbeelding en titel toe met de plantinformatie.
-                         // Handle regular plant items
-                         const link = document.createElement("a");
-                         link.href = `planteninfo.html?id=${plant.id}`;
- 
-                         const article = document.createElement("article");
-                         article.classList.add("plant-container");
-                         link.appendChild(article);
- 
-                         const img = article.appendChild(document.createElement("img"));
-                         img.src = "../static/images/icon_awesome-apple-alt.png";
-                         const h2 = article.appendChild(document.createElement("h2"));
-                         h2.classList.add("plant-naam");
-                         h2.textContent = plant.plantNaam;
- 
-                         td.appendChild(link);
-                         itemCount++;
-                        } else if (rowIndex === this.rows - 1 && colIndex === this.cols - 1 && itemCount <= 7) {
-                            // Handle the "Add" button
-                            const article = document.createElement("article");
-                            const img = article.appendChild(document.createElement("img"));
-                            img.src = "../static/images/Toevoegen.png";
-                            img.id = "toevoegen";
-                            img.alt = "Add";
-                            article.id = "modalButton";
-                            article.onclick = openModal;
-                    
-                            td.appendChild(article);
-                            itemCount++;
-                    }
-                }
-
-                tr.appendChild(td); // Voeg de td toe aan de tr.
-            });
-
-            plantenTable.appendChild(tr); // Voeg de tr toe aan de tabel.
-        });
-}
 }
 
 document.addEventListener("DOMContentLoaded", () => {

src/py/templates/index.html

@@ -12,24 +12,27 @@
     <script src="../static/js/planten.class.js"></script>
 </head>
 <body>
-    <section class="mainContainer">
+      <section class="mainContainer">
+        <div class="pagina-container">
+          <div class="close-button" onclick="closeApplication()">&times;</div>
+      </div>
         <article>
           <a href="index.html">
             <img src="../static/images/logo.png" class="goodgarden-logo">
           </a>
         </article>
         <section class="mainBorder">
-            <section class="content">
-                <section class="kant-links">
+          <section class="content">
+            <section class="kant-links">
                   <table id="planten">
                   </table>
                   <!-- Modal voor het toevoegen van nieuwe planten -->
-                  <div id="myModal" class="modal">
-                      <!-- Sluitknop voor de modal -->
-                      <span class="close">&times;</span>
-                      <!-- Formulier voor het toevoegen van nieuwe planten -->
+                  <!-- <div id="myModal" class="modal">
+                      Sluitknop voor de modal -->
+                      <!-- <span class="close">&times;</span>
+
                       <form action="http://localhost:3000/submit-form" method="post" onsubmit="return addplant()">
-                          <!-- Velden voor het invullen van plantinformatie -->
+    
                           <input type="text" name="plant_naam" id="plantNaam">
                           <label for="plantNaam">Naam van de plant</label>
          
@@ -44,68 +47,124 @@
          
                           <input type="submit" value="Submit">
                       </form>
-                  </div>
+                  </div>  -->
+                  <div class="formulier">
+                    <div id="myModal" class="modal" style="display: none;">
+                      <!-- <article class="modal-header"> -->
+                        <h1 id="plant-id">Plant Toevoegen</h1>
+                        <span class="close">&times;</span>
+                      <!-- </article> -->
+                        <form action="http://localhost:3000/submit-form" method="post">
+                            <label for="plantNaam">Naam van de plant</label><br>
+                            <input type="text" name="plant_naam" id="plantNaam"><br>
+            
+                            <label for="plantensoort">Soort van de plant</label><br>
+                            <input type="text" name="plantensoort" id="plantensoort"><br>
+            
+                            <label for="aanwezig">Aanwezig in de kas</label><br>
+                            <select name="aanwezig_in_kas">
+                                <option value="ja">Ja</option>
+                                <option value="nee">Nee</option>
+                            </select><br>
+            
+                            <label for="ontvangenMeldingen">Meldingen ontvangen</label><br>
+                            <select name="ontvangen_meldingen">
+                                <option value="ja">Ja</option>
+                                <option value="nee">Nee</option>
+                            </select><br>
+            
+                            <section class="knop-container">
+                                <br><button class="annulatie-knop" type="button" onclick="closeOverlay()">Annuleren</button>
+                                <input type="submit" value="Submit">
+                            </section>
+                        </form>
+                    </div>
+                </div>
                 <div id="overlay" onclick="closeOverlay"></div>
-        </section>
-        <section class="kant-rechts">
-          <!-- Sectie voor sensorinformatie -->
-          <section id="sectie-1">
-              <!-- Container voor algemene overzichtinformatie -->
-              <article class="parent-algemeen-overzicht">
-                  <article class="algemeen-overzicht">
-                      <!-- Link naar pagina met meer details over de sensoren -->
-                    <a href="sensoren.html">
-                      <!-- Tabel met sensorinformatie -->
-                      <table class="table-informatie-kas">
-                        <tr class="tr-informatie-kas">
-                          <td>Sensor:</td>
-                          <td id="deviceNumber-322"></td>
-                        </tr>
-                        <tr class="tr-informatie-kas">
-                          <td>Locatie:</td>
-                          <td id="voltage-322"></td>
-                        </tr>
-                        <tr class="tr-informatie-kas">
-                          <td>Batterijvoltage:</td>
-                          <td id="tevredenheid-322"></td>
-                        </tr>
-                        <tr class="tr-informatie-kas">
-                          <td>Dagen resterend:</td>
-                          <td id="time-322"></td>
-                        </tr>
-                      </table>
-                    <a/>
-              </article>
-            </article>
-            <article class="parent-algemeen-overzicht">
-              <article class="algemeen-overzicht">
-                <a href="sensoren.html">
-                <table class="table-informatie-kas">
-                  <tr class="tr-informatie-kas">
-                    <td>Sensor:</td>
-                    <td id="deviceNumber-256"></td>
-                  </tr>
-                  <tr class="tr-informatie-kas">
-                    <td>Locatie:</td>
-                    <td id="voltage-256"></td>
-                  </tr>
-                  <tr class="tr-informatie-kas">
-                    <td>Batterijvoltage:</td>
-                    <td id="tevredenheid-256"></td>
-                  </tr>
-                  <tr class="tr-informatie-kas">
-                    <td>Dagen resterend:</td>
-                    <td id="time-256"></td>
-                  </tr>
-                </table>
-                <a/>
-              </article>
-            </article>
+            </section>
+            <section class="kant-rechts">
+                <!-- Sectie voor sensorinformatie -->
+                <section id="sectie-1">
+                  <article class="parent-algemeen-overzicht">
+                    <article class="algemeen-overzicht">
+                      <a href="pomp_informatie.html" id="kas-informatie">
+                        <table class="table-informatie-kas">
+                          <tr class="tr-informatie-pomp">
+                            <td>Pomp Status:</td>
+                            <td id="">Uitstekend!</td>
+                          </tr>
+                          <tr class="tr-informatie-pomp">
+                            <td>Volgende Irrigatie:</td>
+                            <td id="">24:00</td>
+                          </tr>
+                          <tr class="tr-informatie-pomp">
+                            <td>Laatste Irrigatie:</td>
+                            <td id="">18:00</td>
+                          </tr>
+                          <tr class="tr-informatie-pomp">
+                            <td>Waterverbruik:</td>
+                            <td id="">0.5 L/u</td>
+                          </tr>
+                        </table>
+                      <a/>
+                    </article>
+                  </article>
+                  <!-- Container voor algemene overzichtinformatie -->
+                  <article class="parent-algemeen-overzicht">
+                    <article class="algemeen-overzicht">
+                        <!-- Link naar pagina met meer details over de sensoren -->
+                      <a href="./sensor.html" id="sensor-1">
+                        <!-- Tabel met sensorinformatie -->
+                        <table class="table-informatie-kas">
+                          <tr class="tr-informatie-kas">
+                            <td>Sensor:</td>
+                            <td id="deviceNumber-322"></td>
+                          </tr>
+                          <tr class="tr-informatie-kas">
+                            <td>Locatie:</td>
+                            <td id="voltage-322"></td>
+                          </tr>
+                          <tr class="tr-informatie-kas">
+                            <td>Batterijvoltage:</td>
+                            <td id="tevredenheid-322"></td>
+                          </tr>
+                          <tr class="tr-informatie-kas">
+                            <td>Dagen resterend:</td>
+                            <td id="time-322"></td>
+                          </tr>
+                        </table>
+                      <a/>
+                    </article>
+                  </article>
+                  <article class="parent-algemeen-overzicht">
+                    <article class="algemeen-overzicht">
+                      <a href="sensoren.html" id="sensor-2">
+                        <table class="table-informatie-kas">
+                          <tr class="tr-informatie-kas">
+                            <td>Sensor:</td>
+                            <td id="deviceNumber-256"></td>
+                          </tr>
+                          <tr class="tr-informatie-kas">
+                            <td>Locatie:</td>
+                            <td id="voltage-256"></td>
+                          </tr>
+                          <tr class="tr-informatie-kas">
+                            <td>Batterijvoltage:</td>
+                            <td id="tevredenheid-256"></td>
+                          </tr>
+                          <tr class="tr-informatie-kas">
+                            <td>Dagen resterend:</td>
+                            <td id="time-256"></td>
+                          </tr>
+                        </table>
+                      <a/>
+                    </article>
+                  </article>
+                </section>
+            </section>
           </section>
         </section>
-            </section>
-        </section>
-  </section>
+      </section>
 </body>
 
 </html>

src/py/templates/kas_informatie.html

@@ -13,6 +13,12 @@
   <body>
     <section class="mainContainer">
       <article>
+        <div class="pagina-container">
+          <div class="close-button" onclick="closeApplication()">&times;</div>
+        </div>
+        <div class="container">
+          <a href="index.html" class="back-button">&#8592;</a>
+        </div>
         <a href="index.html">
           <img src="../static/images/logo.png" class="goodgarden-logo">
         </a>
@@ -20,7 +26,7 @@
       <!-- De container die de inhoud van de informatiepagina bevat -->
       <section class="mainBorder informatie-kas-main-container">
         <article>
-          <h1 class="pagina-titel">Informatie Kas</h1>
+          <h1 class="pagina-titel-kas">Informatie Kas</h1>
           <!-- Sectie met overzicht van de kas gegevens -->
           <section id="sectie-1">
             <!-- Weergave van sensor data en kascondities -->

src/py/templates/planteninfo.html

@@ -8,11 +8,17 @@
     <meta name="keywords" content="planten / kas" />
     <link rel="stylesheet" href="../static/css/style.css" />
     <script src="../static/js/main.js" defer></script>
-    <title>Informatie Kas</title>
+    <title>Planten</title>
   </head>
   <body>
     <section class="mainContainer">
       <article>
+        <div class="pagina-container">
+          <div class="close-button" onclick="closeApplication()">&times;</div>
+        </div>
+        <div class="container">
+          <a href="index.html" class="back-button">&#8592;</a>
+        </div>
         <a href="index.html">
           <img src="../static/images/logo.png" class="goodgarden-logo">
         </a>
@@ -20,7 +26,7 @@
       <!-- Bevat de primaire inhoud van de pagina -->
       <section class="mainBorder informatie-kas-main-container">
         <article>
-          <h1>Informatie Kas</h1>
+          <h1 class="pagina-titel plant-titel">&nbsp;</h1>
           <!-- Bevat een overzicht van algemene informatie en grafieken -->
           <section id="sectie-1">
             <!-- Weergave van belangrijke kasstatistieken -->

src/py/templates/pomp_informatie.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Kas informatie / Planten" />
+    <meta name="author" content="B. Diker, A. Oomen" />
+    <meta name="keywords" content="planten / kas" />
+    <link rel="stylesheet" href="../static/css/style.css" />
+    <script src="../static/js/main.js" defer></script>
+    <title>Informatie Kas</title>
+  </head>
+  <body>
+    <section class="mainContainer">
+      <article>
+        <div class="pagina-container">
+          <div class="close-button" onclick="closeApplication()">&times;</div>
+        </div>
+        <div class="container">
+          <a href="index.html" class="back-button">&#8592;</a>
+        </div>
+        <a href="index.html">
+          <img src="../static/images/logo.png" class="goodgarden-logo">
+        </a>
+      </article>
+      <!-- De container die de inhoud van de informatiepagina bevat -->
+      <section class="mainBorder informatie-kas-main-container">
+        <article>
+          <h1 class="pagina-titel">Informatie Pomp</h1>
+          <!-- Sectie met overzicht van de kas gegevens -->
+          <section id="sectie-1">
+            <!-- Weergave van sensor data en kascondities -->
+            <article class="parent-algemeen-overzicht">
+              <article class="algemeen-overzicht">
+                 <!-- Tabel voor het weergeven van sensorgegevens -->
+                <table class="table-informatie-kas">
+                  <tr class="tr-informatie-kas">
+                      <td>Pomp Status:</td>
+                      <td id="deviceNumber">Uitstekend!</td>
+                  </tr>
+                  <tr class="tr-informatie-kas">
+                      <td>Waterverbruik:</td>
+                      <td id="voltage">0.5 L/u</td>
+                  </tr>
+                  <tr class="tr-informatie-kas">
+                      <td>Volgende Irrigatie</td>
+                      <td id="time">24:00</td>
+                  </tr>
+                  <tr class="tr-informatie-kas">
+                      <td>Laatste Irrigatie:</td>
+                      <td id="zulu">18:00</td>
+                  </tr>
+              </table>
+              </article>
+            </article>
+            <!-- Weergave van zonlichtdata in een grafiek -->
+            <article class="grafiek">
+              <article class="grafiek-innerbox">
+                <h2>Waterverbruik</h2>
+                <canvas
+                  id="myCanvas"
+                  class="canvas-informatie-kas"
+                  width="275"
+                  height="275"
+                ></canvas>
+              </article>
+            </article>
+          </section>
+        </article>
+        <!-- Sectie met aanvullende informatie over de kas in tabelvorm -->
+        <article class="grid-column-2">
+          <article class="grid-2-child">
+            <section class="parent-table">
+              <!-- Verschillende tabellen voor gedetailleerde informatie -->
+              <table class="kas-table-1">
+                 <!-- Rijen met specifieke kas informatie, zoals aantal geplante en geoogste planten -->
+                <tr>
+                  <td>Aantal geplant:</td>
+                  <td id="totale_planten">Loading...</td>
+                </tr>
+                <tr>
+                  <td>Succesvolle Oogst:</td>
+                  <td>2</td>
+                </tr>
+                <tr>
+                  <td>Gefaalde Oogst:</td>
+                  <td>2</td>
+                </tr>
+              </table>
+              <table class="kas-table-2">
+                 <!-- Rijen met klimaat- en bodemcondities -->
+                <tr>
+                  <td>Warmste Maand:</td>
+                  <td>n.v.t.</td>
+                </tr>
+                <tr>
+                  <td>koudste Maand:</td>
+                  <td>December</td>
+                </tr>
+                <tr>
+                  <td>Gemiddelde Bodemtemp.:</td>
+                  <td id="bodem-temperatuur">2˚C</td>
+                </tr>
+                <tr>
+                  <td>Gemiddelde Uren Zonlicht:</td>
+                  <td id="battery_voltage">2u</td>
+                </tr>
+              </table>
+              <table class="kas-table-3">
+                <!-- Rijen met irrigatie- en bemestingschema's -->
+                <tr>
+                  <td>Laatste Irrigatie:</td>
+                  <td>2u</td>
+                </tr>
+                <tr>
+                  <td>Aankomende Irrigatie:</td>
+                  <td>2u</td>
+                </tr>
+                <tr>
+                  <td>Laatste Bemesting</td>
+                  <td>2d</td>
+                </tr>
+                <tr>
+                  <td>Aankomende Bemesting:</td>
+                  <td>2w</td>
+                </tr>
+              </table>
+            </section>
+          </article>
+        </article>
+      </section>
+    </section>
+    <script>
+    </script>
+  </body>
+</html>

src/py/templates/sensor.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Kas informatie / Planten" />
+    <meta name="author" content="B. Diker, A. Oomen" />
+    <meta name="keywords" content="planten / kas" />
+    <link rel="stylesheet" href="../static/css/style.css" />
+    <script src="../static/js/main.js" defer></script>
+    <title>Informatie Kas</title>
+  </head>
+  <body>
+    <section class="mainContainer">
+      <article>
+        <div class="pagina-container">
+          <div class="close-button" onclick="closeApplication()">&times;</div>
+        </div>
+        <div class="container">
+          <a href="index.html" class="back-button">&#8592;</a>
+        </div>
+        <a href="index.html">
+          <img src="../static/images/logo.png" class="goodgarden-logo">
+        </a>
+      </article>
+      <!-- De container die de inhoud van de informatiepagina bevat -->
+      <section class="mainBorder informatie-kas-main-container">
+        <article>
+          <h1 class="pagina-titel sensor-titel">Informatie Kas</h1>
+          <!-- Sectie met overzicht van de kas gegevens -->
+          <section id="sectie-1">
+            <!-- Weergave van sensor data en kascondities -->
+            <article class="parent-algemeen-overzicht">
+              <article class="algemeen-overzicht">
+                 <!-- Tabel voor het weergeven van sensorgegevens -->
+                <table class="table-informatie-kas">
+                  <tr class="tr-informatie-kas">
+                      <td>Device</td>
+                      <td id="deviceNumber"></td>
+                  </tr>
+                  <tr class="tr-informatie-kas">
+                      <td>Batterij Voltage</td>
+                      <td id="voltage"></td>
+                  </tr>
+                  <tr class="tr-informatie-kas">
+                      <td>Tijden</td>
+                      <td id="time"></td>
+                  </tr>
+                  <tr class="tr-informatie-kas">
+                      <td>Zulu</td>
+                      <td id="zulu"></td>
+                  </tr>
+              </table>
+              </article>
+            </article>
+            <!-- Weergave van zonlichtdata in een grafiek -->
+            <article class="grafiek">
+              <article class="grafiek-innerbox">
+                <h2>Zonlicht</h2>
+                <canvas
+                  id="myCanvas"
+                  class="canvas-informatie-kas"
+                  width="275"
+                  height="275"
+                ></canvas>
+              </article>
+            </article>
+          </section>
+        </article>
+        <!-- Sectie met aanvullende informatie over de kas in tabelvorm -->
+        <article class="grid-column-2">
+          <article class="grid-2-child">
+            <section class="parent-table">
+              <!-- Verschillende tabellen voor gedetailleerde informatie -->
+              <table class="kas-table-1">
+                 <!-- Rijen met specifieke kas informatie, zoals aantal geplante en geoogste planten -->
+                <tr>
+                  <td>Aantal geplant:</td>
+                  <td id="totale_planten">Loading...</td>
+                </tr>
+                <tr>
+                  <td>Succesvolle Oogst:</td>
+                  <td>2</td>
+                </tr>
+                <tr>
+                  <td>Gefaalde Oogst:</td>
+                  <td>2</td>
+                </tr>
+              </table>
+              <table class="kas-table-2">
+                 <!-- Rijen met klimaat- en bodemcondities -->
+                <tr>
+                  <td>Warmste Maand:</td>
+                  <td>n.v.t.</td>
+                </tr>
+                <tr>
+                  <td>koudste Maand:</td>
+                  <td>December</td>
+                </tr>
+                <tr>
+                  <td>Gemiddelde Bodemtemp.:</td>
+                  <td id="bodem-temperatuur">2˚C</td>
+                </tr>
+                <tr>
+                  <td>Gemiddelde Uren Zonlicht:</td>
+                  <td id="battery_voltage">2u</td>
+                </tr>
+              </table>
+              <table class="kas-table-3">
+                <!-- Rijen met irrigatie- en bemestingschema's -->
+                <tr>
+                  <td>Laatste Irrigatie:</td>
+                  <td>2u</td>
+                </tr>
+                <tr>
+                  <td>Aankomende Irrigatie:</td>
+                  <td>2u</td>
+                </tr>
+                <tr>
+                  <td>Laatste Bemesting</td>
+                  <td>2d</td>
+                </tr>
+                <tr>
+                  <td>Aankomende Bemesting:</td>
+                  <td>2w</td>
+                </tr>
+              </table>
+            </section>
+          </article>
+        </article>
+      </section>
+    </section>
+    <script>
+    </script>
+  </body>
+</html>

src/py/templates/sensoren.html

@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sensoren</title>
-    <link rel="stylesheet" href="../src/css/style.css">
-    <script src="../src/js/main.js" defer></script>
-    <script src="../src/js/planten.class.js"></script>
-</head>
-<body>
-    <section class="mainContainer">
-        <article>
-            <img src="../src/images/logo.png" class="goodgarden-logo">
-          </article>
-        <section class="mainBorder">
-            <section class="content">
-                <section class="kant-links">
-                    <section class="border-sensor">
-                        <article id="sensor-1">
-                            <table>
-                                <tr>
-                                    <td>1</td>
-                                    <td>2</td>
-                                </tr>
-                                <tr>
-                                    <td>3</td>
-                                    <td>4</td>
-                                </tr>
-                            </table>
-                        </article>
-                    </section>
-                    <section>
-                        <article id="grafiek-1">
-
-                        </article>
-                    </section>
-                </section>
-                <section>
-
-                </section>
-                <section class="kant-rechts">
-                    <article id="sensor-2">
-
-                    </article>
-                    <article id="grafiek-2">
-
-                    </article>
-                </section>
-            </section>
-        </section>
-    </section>
-</body>
-</html>