From be3beb5fc3387891022cc604c397dfe9c90dfb13 Mon Sep 17 00:00:00 2001 From: mohammedcifci78 Date: Fri, 9 Feb 2024 11:13:10 +0100 Subject: [PATCH 1/8] databaseupdate --- index.py | 97 +++++++++++++++++++++++++++---------------------------- script.js | 0 2 files changed, 48 insertions(+), 49 deletions(-) delete mode 100644 script.js diff --git a/index.py b/index.py index d0d2abe..d7be32e 100644 --- a/index.py +++ b/index.py @@ -1,45 +1,9 @@ import mysql.connector import requests +import time -# Verbinding maken met de database -mydb = mysql.connector.connect( - host="localhost", - user="root", - password="", - database="goodgarden" -) - -# Controleren of de verbinding succesvol is -if mydb.is_connected(): - print("Connected to the database") -else: - print("Failed to connect to the database") - -try: - # Maak een cursor aan - mycursor = mydb.cursor() - - # Voer de query uit om gegevens op te halen - mycursor.execute("SELECT * FROM goodgarden.sensor_data") - - # Haal de resultaten op - myresult = mycursor.fetchall() - - # Print de resultaten - for x in myresult: - print(x) - -except mysql.connector.Error as err: - print(f"Error: {err}") - -finally: - # Sluit de cursor en de databaseverbinding - mycursor.close() - mydb.close( - - ) - -def fetch_data(): +def gegevens_ophalen_en_database_bijwerken(): + # API-verzoek url = "https://garden.inajar.nl/api/battery_voltage_events/?format=json" headers = { "Authorization": "Token 33bb3b42452306c58ecedc3c86cfae28ba22329c" @@ -47,16 +11,51 @@ def fetch_data(): try: response = requests.get(url, headers=headers) - response.raise_for_status() # Raise an exception for 4xx and 5xx status codes + response.raise_for_status() - data = response.json() - load_data(data) - except requests.exceptions.RequestException as e: - print(f"Error fetching data: {e}") + data = response.json().get('results', []) -def load_data(data): - api_data = data - print("Data loaded:", api_data) + print("API-reactie:") + print(data) -if __name__ == "__main__": - fetch_data() + if not isinstance(data, list): + raise ValueError("De API-reactie wordt niet herkend als een lijst van dictionaries.") + + # Verbinding maken met de database + connection = mysql.connector.connect( + host="localhost", + user="root", + password="", + database="goodgarden" + ) + + if connection.is_connected(): + cursor = connection.cursor() + + # Database bijwerken met API-gegevens + for entry in data: + timestamp = entry.get("timestamp") + gateway_receive_time = entry.get("gateway_receive_time") + device = entry.get("device") + value = entry.get("value") + + # Veronderstel dat de kolommen van de 'sensor_data'-tabel timestamp, gateway_receive_time, device, en value zijn + sql_update_query = f"INSERT INTO goodgarden.sensor_data (timestamp, gateway_receive_time, device, value) VALUES ({timestamp}, '{gateway_receive_time}', {device}, {value})" + cursor.execute(sql_update_query) + connection.commit() + + print("Database succesvol bijgewerkt") + + except Exception as e: + print(f"Fout bijwerken database: {e}") + + finally: + if connection.is_connected(): + cursor.close() + connection.close() + print("MySQL-verbinding is gesloten") + +# Zet een timer op om de functie elke 10 minuten uit te voeren +while True: + gegevens_ophalen_en_database_bijwerken() + time.sleep(60) # 600 seconden = 10 minuten diff --git a/script.js b/script.js deleted file mode 100644 index e69de29..0000000 From b953225a4b347c7eaf198e2cebb08d5ef9eeb023 Mon Sep 17 00:00:00 2001 From: mohammedcifci78 Date: Fri, 9 Feb 2024 11:46:55 +0100 Subject: [PATCH 2/8] nietswerkt(nogfixed) --- goodGarden.sql | 13 +++++++------ index.py | 33 +++++++++++++++++++-------------- updatedata.sql | 2 ++ 3 files changed, 28 insertions(+), 20 deletions(-) create mode 100644 updatedata.sql diff --git a/goodGarden.sql b/goodGarden.sql index 06d9991..1345a38 100644 --- a/goodGarden.sql +++ b/goodGarden.sql @@ -1,16 +1,17 @@ -DROP DATABASE IF EXISTS goodgarden; -CREATE DATABASE goodgarden; +CREATE DATABASE IF NOT EXISTS goodgarden; +USE goodgarden; -CREATE TABLE goodgarden.sensor_data ( +CREATE TABLE IF NOT EXISTS goodgarden.sensor_data ( id INT UNSIGNED NOT NULL AUTO_INCREMENT, timestamp INT, gateway_receive_time VARCHAR(50), device INT, - value DECIMAL(10, 5), + value DECIMAL(12, 8), -- Aangepaste precisie naar DECIMAL(12, 8) PRIMARY KEY (id) ); -- Invoegen van gegevens in de 'sensor_data'-tabel INSERT INTO goodgarden.sensor_data (timestamp, gateway_receive_time, device, value) -VALUES (1707295162, '2024-02-07T08:39:22Z', 256, 4.107448101043701), - (1707261284, '2024-02-06T23:14:44Z', 322, 4.111111164093018); +VALUES + (1707295162, '2024-02-07T08:39:22Z', 256, 4.107448101043701), + (1707261284, '2024-02-06T23:14:44Z', 322, 4.111111164093018); diff --git a/index.py b/index.py index d7be32e..0f1db17 100644 --- a/index.py +++ b/index.py @@ -2,14 +2,14 @@ import mysql.connector import requests import time -def gegevens_ophalen_en_database_bijwerken(): - # API-verzoek - url = "https://garden.inajar.nl/api/battery_voltage_events/?format=json" - headers = { - "Authorization": "Token 33bb3b42452306c58ecedc3c86cfae28ba22329c" - } - +while True: try: + # API-verzoek + url = "https://garden.inajar.nl/api/battery_voltage_events/?format=json" + headers = { + "Authorization": "Token 33bb3b42452306c58ecedc3c86cfae28ba22329c" + } + response = requests.get(url, headers=headers) response.raise_for_status() @@ -39,9 +39,13 @@ def gegevens_ophalen_en_database_bijwerken(): device = entry.get("device") value = entry.get("value") - # Veronderstel dat de kolommen van de 'sensor_data'-tabel timestamp, gateway_receive_time, device, en value zijn - sql_update_query = f"INSERT INTO goodgarden.sensor_data (timestamp, gateway_receive_time, device, value) VALUES ({timestamp}, '{gateway_receive_time}', {device}, {value})" - cursor.execute(sql_update_query) + # Gebruik van prepared statements om SQL-injectie te voorkomen + sql_update_query = ( + "UPDATE goodgarden.sensor_data " + "SET timestamp=%s, gateway_receive_time=%s, device=%s " + "WHERE value=%s" + ) + cursor.execute(sql_update_query, (timestamp, gateway_receive_time, device, value)) connection.commit() print("Database succesvol bijgewerkt") @@ -55,7 +59,8 @@ def gegevens_ophalen_en_database_bijwerken(): connection.close() print("MySQL-verbinding is gesloten") -# Zet een timer op om de functie elke 10 minuten uit te voeren -while True: - gegevens_ophalen_en_database_bijwerken() - time.sleep(60) # 600 seconden = 10 minuten + # Voeg deze regel toe binnen de while-loop + print("Aantal gegevens uit de API:", len(data)) + + # Voeg een pauze toe van 10 minuten voordat de lus opnieuw wordt uitgevoerd + time.sleep(600) diff --git a/updatedata.sql b/updatedata.sql new file mode 100644 index 0000000..21cc3cd --- /dev/null +++ b/updatedata.sql @@ -0,0 +1,2 @@ +USE goodgarden; +ALTER TABLE goodgarden.sensor_data MODIFY COLUMN value DECIMAL(12, 2); From bf226e93d7d6474912466ced8bda8a61ff168519 Mon Sep 17 00:00:00 2001 From: mohammedcifci <118259207+6028570@users.noreply.github.com> Date: Tue, 27 Feb 2024 10:49:58 +0100 Subject: [PATCH 3/8] Revert "Mohammed" --- goodGarden.sql | 13 ++++++------- index.py | 4 +--- updatedata.sql | 2 -- 3 files changed, 7 insertions(+), 12 deletions(-) delete mode 100644 updatedata.sql diff --git a/goodGarden.sql b/goodGarden.sql index dd71584..de6d9d1 100644 --- a/goodGarden.sql +++ b/goodGarden.sql @@ -1,17 +1,16 @@ -CREATE DATABASE IF NOT EXISTS goodgarden; -USE goodgarden; +DROP DATABASE IF EXISTS goodgarden; +CREATE DATABASE goodgarden; -CREATE TABLE IF NOT EXISTS goodgarden.sensor_data ( +CREATE TABLE goodgarden.sensor_data ( id INT UNSIGNED NOT NULL AUTO_INCREMENT, timestamp INT, gateway_receive_time VARCHAR(50), device INT, - value DECIMAL(12, 8), -- Aangepaste precisie naar DECIMAL(12, 8) + value DECIMAL(10, 5), PRIMARY KEY (id) ); Invoegen van gegevens in de 'sensor_data'-tabel INSERT INTO goodgarden.sensor_data (timestamp, gateway_receive_time, device, value) -VALUES - (1707295162, '2024-02-07T08:39:22Z', 256, 4.107448101043701), - (1707261284, '2024-02-06T23:14:44Z', 322, 4.111111164093018); +VALUES (1707295162, '2024-02-07T08:39:22Z', 256, 4.107448101043701), + (1707261284, '2024-02-06T23:14:44Z', 322, 4.111111164093018); diff --git a/index.py b/index.py index af94f78..0bc2059 100644 --- a/index.py +++ b/index.py @@ -2,8 +2,6 @@ import mysql.connector import requests import time - - def database_connect(): return mysql.connector.connect( host="localhost", @@ -66,4 +64,4 @@ def load_data(data): print("Data ingevoegd in de database.") if __name__ == "__main__": - fetch_data() + fetch_data() \ No newline at end of file diff --git a/updatedata.sql b/updatedata.sql deleted file mode 100644 index 21cc3cd..0000000 --- a/updatedata.sql +++ /dev/null @@ -1,2 +0,0 @@ -USE goodgarden; -ALTER TABLE goodgarden.sensor_data MODIFY COLUMN value DECIMAL(12, 2); From a5a38fbbcad87c16da8a882627a4eb4b7c89b454 Mon Sep 17 00:00:00 2001 From: Renzo <6025850@mborijnland.nl> Date: Fri, 1 Mar 2024 11:06:49 +0100 Subject: [PATCH 4/8] lalalal --- src/css/style.css | 2 +- src/css/style.css.map | 2 +- src/css/style.scss | 4 +--- src/index.html | 2 +- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index d4e140e..725e7df 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -11,7 +11,7 @@ body { .mainContainer { margin: 2rem; - height: 37rem; + height: 38rem; background-color: rgba(255, 255, 255, 0.95); border-radius: 40px; padding: 2rem; diff --git a/src/css/style.css.map b/src/css/style.css.map index ae223fa..2c7e3fc 100644 --- a/src/css/style.css.map +++ b/src/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,iBAAA;AAKQ,mFAAA;AACA,2GAAA;AAMR,iCAAA;AACA;EAEI,kDAAA;EACA,4BAAA;EACA,sBAAA;EACA,iCARQ;ACDZ;;ADYA;EAEI,YAAA;EACA,aAAA;EACA,2CAAA;EACA,mBAAA;EACA,aAAA;ACVJ;ADYI;EAEI,eAAA;EACA,aAAA;EACA,oCAAA;EACA,mBAAA;ACXR;ADaQ;EAEI,aAAA;EACA,kCAAA;EACA,YAAA;ACZZ;ADgBgB;EAEI,cAAA;ACfpB;ADiBoB;EAEI,WAAA;EACA,yBAAA;AChBxB;ADoB4B;EAEI,YAAA;EACA,YAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,oCAAA;EACA,mBAAA;EACA,wCAAA;ACnBhC;ADqBgC;EAEI,YAAA;EACA,WAAA;ACpBpC;ADuBgC;EAEI,WAAA;ACtBpC;ADyBgC;EAEI,2BAAA;ACxBpC;ADgCgB;EAEI,cAAA;EACA,kBAAA;AC/BpB;ADiCoB;EAGI,oCAAA;EACA,mBAAA;ACjCxB;ADmCwB;EAEA,aAAA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;EACA,WAAA;AClCxB;ADoC4B;EAEI,aAAA;EACA,6BAAA;ACnChC;;AD8CA,YAAA;AACA;EACI,aAAA;EACA,uBAAA;EACA,oCAAA;EACA,kBAAA;EACA,UAAA;EACA,cAAA;AC3CJ;;AD8CA,2BAAA;AAEA;EAEI,aAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;EACA,iBAAA;EACA,aAAA;EACA,wCAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,mBAAA;AC7CJ;AD+CI;EAEI,WAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;AC9CR;ADgDQ;EAGI,YAAA;EACA,qBAAA;EACA,eAAA;AChDZ","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,iBAAA;AAKQ,mFAAA;AACA,2GAAA;AAMR,iCAAA;AACA;EAEI,kDAAA;EACA,4BAAA;EACA,sBAAA;EACA,iCARQ;ACDZ;;ADYA;EAEI,YAAA;EACA,aAAA;EACA,2CAAA;EACA,mBAAA;EACA,aAAA;ACVJ;ADYI;EAEI,eAAA;EACA,aAAA;EACA,oCAAA;EACA,mBAAA;ACXR;ADaQ;EAEI,aAAA;EACA,kCAAA;EACA,YAAA;ACZZ;ADgBgB;EAEI,cAAA;ACfpB;ADiBoB;EAEI,WAAA;EACA,yBAAA;AChBxB;ADoB4B;EAEI,YAAA;EACA,YAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,oCAAA;EACA,mBAAA;EACA,wCAAA;ACnBhC;ADqBgC;EAEI,YAAA;EACA,WAAA;ACpBpC;ADuBgC;EAEI,WAAA;ACtBpC;ADyBgC;EAEI,2BAAA;ACxBpC;AD+BgB;EAEI,cAAA;EACA,kBAAA;AC9BpB;ADgCoB;EAGI,oCAAA;EACA,mBAAA;AChCxB;ADkCwB;EAEA,aAAA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;EACA,WAAA;ACjCxB;ADmC4B;EAEI,aAAA;EACA,6BAAA;AClChC;;AD6CA,YAAA;AACA;EACI,aAAA;EACA,uBAAA;EACA,oCAAA;EACA,kBAAA;EACA,UAAA;EACA,cAAA;AC1CJ;;AD6CA,2BAAA;AAEA;EAEI,aAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;EACA,iBAAA;EACA,aAAA;EACA,wCAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,mBAAA;AC5CJ;AD8CI;EAEI,WAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;AC7CR;AD+CQ;EAGI,YAAA;EACA,qBAAA;EACA,eAAA;AC/CZ","file":"style.css"} \ No newline at end of file diff --git a/src/css/style.scss b/src/css/style.scss index 3655136..24829ef 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -7,7 +7,6 @@ $secondary-color: rgb(143, 188, 143); @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; /* The Main container and border*/ @@ -22,7 +21,7 @@ body .mainContainer { margin: 2rem; - height: 37rem; + height: 38rem; background-color: rgb(255, 255, 255, 95%); border-radius: 40px; padding: 2rem; @@ -84,7 +83,6 @@ body background-color: lightgray; } - } } } diff --git a/src/index.html b/src/index.html index c0b0297..2e3c628 100644 --- a/src/index.html +++ b/src/index.html @@ -16,7 +16,7 @@ - +
-
+

Tomaat

From 4e9c8f415c7c382a7f974bbd37d8e5448cb218c2 Mon Sep 17 00:00:00 2001 From: Renzo <6025850@mborijnland.nl> Date: Tue, 5 Mar 2024 10:49:25 +0100 Subject: [PATCH 5/8] Update Front-End --- src/css/style.scss | 241 +++++++++++++++++++++++++++++++-------------- 1 file changed, 167 insertions(+), 74 deletions(-) diff --git a/src/css/style.scss b/src/css/style.scss index 24829ef..1e5b432 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -9,108 +9,201 @@ $secondary-color: rgb(143, 188, 143); $font-titels: "Akaya Kanadaka", system-ui; $font-text: "Afacad", sans-serif; -/* The Main container and border*/ +@mixin flexbox +{ + display: flex; + justify-content: space-around; +} + +@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; +} + +h1, h2, h3, h4, h5 +{ + font-family: $font-titels; + margin: 0; +} + +p, td +{ + font-family: $font-text; +} + body { background-image: url("../images/achtergrond.png"); background-repeat: no-repeat; background-size: cover; - font-family: $font-text; -} + background-position: center; + // font-family: $font-text; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; -.mainContainer -{ - margin: 2rem; - height: 38rem; - background-color: rgb(255, 255, 255, 95%); - border-radius: 40px; - padding: 2rem; - - .mainBorder + .mainContainer { - padding: 1rem 0; - height: 35rem; - border: solid 5px $primary-color; + width: 85vw; + height: 38rem; + background-color: rgb(255, 255, 255, 95%); border-radius: 40px; + padding: 2rem; - .content + .informatie-kas-main-container { display: grid; - grid-template-columns: 3fr 1fr 3fr; - height: 100%; - - .kant + grid-template-columns: 5fr 7fr; + } + + .mainBorder + { + padding: 1rem 0; + height: 35rem; + border: solid 5px $primary-color; + border-radius: 40px; + + #sectie-1 { - &-links + h1 { - grid-column: 1; + background-color: green; + } - #planten + .parent-algemeen-overzicht + { + @include box-shadow; + @include border-radius; + padding: 1rem; + + .algemeen-overzicht { - width: 100%; - border-collapse: collapse; + @include groene-border; + @include border-radius; + font-size: 1.25rem; + padding: 1rem; + background-color: red; - td + .table-informatie-kas { - article + width: 100%; + + .tr-informatie-kas { - height: 7rem; - width: 10rem; - padding: .6rem; - margin: .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; - } - + justify-content: space-between; + text-align: left; } + + // .tr-informatie-kas > :last-child + // { + // text-align: center; /* Centers the numbers */ + // flex: 1; /* Allows it to expand to fill the space */ + // } + // } } } - } - &-rechts - { - grid-column: 3; - margin-right: 2rem; - - #metingen + + .grafiek { + // background-color: blue; + } + } - border: solid 3px $primary-color; - border-radius: 40px; + .content + { + display: grid; + grid-template-columns: 3fr 1fr 3fr; + height: 100%; - #main-waardes + .kant + { + &-links { - display: flex; - justify-content: space-evenly; - padding: .5rem; - padding-bottom: 0; - width: 100%; + grid-column: 1; - table + #planten { + width: 100%; + border-collapse: collapse; + + td + { + article + { + height: 7rem; + width: 10rem; + padding: .6rem; + margin: .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-around; - // width: 100%; + justify-content: space-evenly; + padding: .5rem; + padding-bottom: 0; + width: 100%; + + table + { + display: flex; + justify-content: space-around; + // width: 100%; + } + } } } } @@ -120,7 +213,7 @@ body } } -/* Divider */ + /* Divider */ .divider { display: flex; justify-content: center; From 9291757112b2ef32c8dc8f21f92565206b20e270 Mon Sep 17 00:00:00 2001 From: Atilla Date: Tue, 5 Mar 2024 16:17:54 +0100 Subject: [PATCH 6/8] hoi --- script/battery_voltage_events.py | 3 +++ src/kas_informatie.html | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/script/battery_voltage_events.py b/script/battery_voltage_events.py index ee63266..28b84f1 100644 --- a/script/battery_voltage_events.py +++ b/script/battery_voltage_events.py @@ -181,6 +181,9 @@ import mysql.connector import requests from datetime import datetime, timezone, timedelta import time +import os +import paho.mqtt.client as mqtt +from dotenv import load_dotenv # Functie om verbinding te maken met de database def database_connect(): diff --git a/src/kas_informatie.html b/src/kas_informatie.html index fad704a..c8d24e1 100644 --- a/src/kas_informatie.html +++ b/src/kas_informatie.html @@ -81,7 +81,7 @@
Gemiddelde Uren Zonlicht:2u2u
From e60518fa77a6cbcd739bd555c1e98ca0873a4700 Mon Sep 17 00:00:00 2001 From: Atilla Date: Tue, 5 Mar 2024 19:39:41 +0100 Subject: [PATCH 7/8] Gedeeltelijk opgelost --- src/css/style.css | 28 +- src/css/style.css.map | 2 +- src/css/style.scss | 840 ++++-------------------------------------- src/index.html | 7 +- 4 files changed, 85 insertions(+), 792 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index ce37c37..cb20bc2 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,4 +1,3 @@ -/*default colors*/ @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 { @@ -103,19 +102,19 @@ body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox canvas { left: 50%; transform: translate(-50%, -50%); } -body .mainContainer .mainBorder #sectie-1 .content { +body .mainContainer .mainBorder .content { display: grid; grid-template-columns: 3fr 1fr 3fr; height: 100%; } -body .mainContainer .mainBorder #sectie-1 .content .kant-links { +body .mainContainer .mainBorder .content .kant-links { grid-column: 1; } -body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten { +body .mainContainer .mainBorder .content .kant-links #planten { width: 100%; border-collapse: collapse; } -body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article { +body .mainContainer .mainBorder .content .kant-links #planten td article { height: 7rem; width: 10rem; padding: 0.6rem; @@ -129,33 +128,34 @@ body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td artic border-radius: 40px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } -body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article #toevoegen { +body .mainContainer .mainBorder .content .kant-links #planten td article #toevoegen { height: 5rem; width: 5rem; } -body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article h2 { +body .mainContainer .mainBorder .content .kant-links #planten td article h2 { color: gray; } -body .mainContainer .mainBorder #sectie-1 .content .kant-links #planten td article:hover { +body .mainContainer .mainBorder .content .kant-links #planten td article:hover { background-color: lightgray; } -body .mainContainer .mainBorder #sectie-1 .content .kant-rechts { +body .mainContainer .mainBorder .content .kant-rechts { grid-column: 3; } -body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen { +body .mainContainer .mainBorder .content .kant-rechts #metingen { border: solid 3px rgb(171, 211, 174); border-radius: 40px; } -body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen #main-waardes { +body .mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes { display: flex; - justify-content: space-evenly; + justify-content: space-between; padding: 0.5rem; padding-bottom: 0; width: 100%; } -body .mainContainer .mainBorder #sectie-1 .content .kant-rechts #metingen #main-waardes table { +body .mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes table { display: flex; - justify-content: space-around; + justify-content: space-between; + width: 100%; } body .mainContainer .mainBorder .grid-column-2 { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); diff --git a/src/css/style.css.map b/src/css/style.css.map index f4fdac6..e339665 100644 --- a/src/css/style.css.map +++ b/src/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/src/css/style.scss b/src/css/style.scss index 1695ea3..dd546ab 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -1,712 +1,3 @@ -// /*default colors*/ - -// $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 -// { -// display: flex; -// justify-content: space-around; -// } - -// @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; -// } - -// h1, h2, h3, h4, h5 -// { -// font-family: $font-titels; -// margin: 0; -// } - -// p, td -// { -// font-family: $font-text; -// } - -// body -// { -// // background-image: 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; -// background-image: 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, 95%); -// border-radius: 40px; -// padding: 2rem; - -// .goodgarden-logo -// { -// // z-index: inherit; -// position: absolute; -// width: 10vw; -// left: 50%; -// top: 2.5rem; -// transform: translateX(-50%); -// } - -// .informatie-kas-main-container -// { -// display: grid; -// grid-template-columns: 5fr 7fr; -// } - -// .mainBorder -// { -// 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; -// 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; - -// .algemeen-overzicht -// { -// @include groene-border; -// @include border-radius; -// font-size: 1.25rem; -// padding: .5rem 1rem; -// // background-color: red; - -// .table-informatie-kas -// { -// width: 100%; - -// .tr-informatie-kas -// { -// display: flex; -// justify-content: space-between; -// text-align: left; -// } - -// // .tr-informatie-kas > :last-child -// // { -// // text-align: center; /* Centers the numbers */ -// // flex: 1; /* Allows it to expand to fill the space */ -// // } -// // } -// } -// } - -// .grafiek -// { -// @include box-shadow; -// @include border-radius; -// padding: 1rem; -// position: relative; - -// .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: .6rem; -// margin: .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-evenly; -// padding: .5rem; -// padding-bottom: 0; -// width: 100%; - -// table -// { -// display: flex; -// justify-content: space-around; -// // width: 100%; -// } -// } -// } -// } -// } -// } -// } -// } -// } -// } - -// /* Divider */ -// .divider { -// display: flex; -// justify-content: center; -// border: solid 1px $primary-color; -// border-radius: 5px; -// width: 80%; -// margin: 0 auto; -// } - -// /* The Modal (background) */ - -// .modal -// { -// display: none; -// position: fixed; -// z-index: 999; -// left: 50%; -// top: 50%; -// transform: translate(-50%, -50%); -// background: white; -// padding: 20px; -// box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); -// width: 30vw; -// height: auto; -// border: solid 2px black; -// border-radius: 10px; - -// .close -// { -// color: #aaa; -// float: right; -// font-size: 28px; -// font-weight: bold; - -// &:hover, -// &:active -// { -// color: black; -// text-decoration: none; -// cursor: pointer; -// } -// } -// } - -/*default colors*/ - -// $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 -// { -// display: flex; -// justify-content: space-around; -// } - -// @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; -// } - -// body -// { -// background-image: 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, 95%); -// border-radius: 40px; -// padding: 2rem; - -// .goodgarden-logo -// { -// // z-index: inherit; -// position: absolute; -// width: 10vw; -// left: 50%; -// top: 2.5rem; -// transform: translateX(-50%); -// } - -// .informatie-kas-main-container -// { -// display: grid; -// grid-template-columns: 5fr 7fr; -// } - -// .mainBorder -// { -// padding: 1.25rem 1.5rem; -// 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; -// padding: 0 2.5rem 0 1rem; -// position: relative; - -// .parent-algemeen-overzicht -// { -// @include box-shadow; -// @include border-radius; -// padding: 1rem; -// margin-top: 1rem; - - -// .algemeen-overzicht -// { -// @include groene-border; -// @include inner-border-radius; -// font-size: 1.25rem; -// padding: .5rem 1rem; -// // background-color: red; - -// .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; - -// .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: .6rem; -// margin: .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-evenly; -// padding: .5rem; -// padding-bottom: 0; -// width: 100%; - -// table -// { -// display: flex; -// justify-content: space-around; -// // width: 100%; -// } -// } -// } -// } -// } -// } -// } - -// .grid-column-2 -// { -// @include box-shadow; -// @include border-radius; -// padding: 1rem; -// margin: 3.25rem 1rem 1.25rem 1rem; - -// .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 */ -// .divider { -// display: flex; -// justify-content: center; -// border: solid 1px $primary-color; -// border-radius: 5px; -// width: 80%; -// margin: 0 auto; -// } - -// /* The Modal (background) */ - -// .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 black; -// border-radius: 10px; - -// .close -// { -// color: #aaa; -// float: right; -// font-size: 1.75rem; -// font-weight: bold; - -// &:hover, -// &:active -// { -// color: black; -// text-decoration: none; -// cursor: pointer; -// } -// } -// } - $primary-color: rgb(171, 211, 174); $secondary-color: rgb(143, 188, 143); @@ -880,96 +171,95 @@ body } } } - + + } + .content + { + display: grid; + grid-template-columns: 3fr 1fr 3fr; + height: 100%; - .content + .kant { - display: grid; - grid-template-columns: 3fr 1fr 3fr; - height: 100%; - - .kant + &-links { - &-links + grid-column: 1; + + #planten { - grid-column: 1; + width: 100%; + border-collapse: collapse; - #planten + td { - width: 100%; - border-collapse: collapse; - - td + article { - article + height: 7rem; + width: 10rem; + padding: .6rem; + margin: .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: 7rem; - width: 10rem; - padding: .6rem; - margin: .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; - } - - + height: 5rem; + width: 5rem; } + + h2 + { + color: gray; + } + + &:hover + { + background-color: lightgray; + } + + } } } + } + + &-rechts + { + grid-column: 3; + // margin-right: 2rem; - &-rechts + #metingen { - grid-column: 3; - // margin-right: 2rem; - #metingen + border: solid 3px $primary-color; + border-radius: 40px; + + #main-waardes { + display: flex; + justify-content: space-between; + padding: .5rem; + padding-bottom: 0; + width: 100%; - border: solid 3px $primary-color; - border-radius: 40px; - - #main-waardes + table { - display: flex; - justify-content: space-evenly; - padding: .5rem; - padding-bottom: 0; - width: 100%; - - table - { - display: flex; - justify-content: space-around; - // width: 100%; - } + display: flex; + justify-content: space-between; + width: 100%; } } } } } } - + .grid-column-2 { @include box-shadow; diff --git a/src/index.html b/src/index.html index 56779ca..5b14b45 100644 --- a/src/index.html +++ b/src/index.html @@ -10,6 +10,9 @@
+
+ +
@@ -69,9 +72,9 @@
-
+
From 49f3739f7ef57226c43282bddea5d00110db241e Mon Sep 17 00:00:00 2001 From: Atilla Date: Tue, 5 Mar 2024 21:05:57 +0100 Subject: [PATCH 8/8] Bijgewerkte versie, html nog niet juiste groote! --- app.js | 63 ++++++------------------ package-lock.json | 106 ++++------------------------------------ package.json | 2 +- src/css/style.css | 10 ++-- src/css/style.css.map | 2 +- src/css/style.scss | 13 +++-- src/index.html | 77 ++++++++++++++++++----------- src/js/main.js | 17 ++----- src/kas_informatie.html | 2 - src/py/calculate.py | 7 --- 10 files changed, 89 insertions(+), 210 deletions(-) delete mode 100644 src/py/calculate.py diff --git a/app.js b/app.js index 7c74b7f..ef0679d 100644 --- a/app.js +++ b/app.js @@ -1,7 +1,7 @@ -const { app, BrowserWindow,ipcMain } = require('electron'); /* TYPE IN TERMINAL: "npm install electron" */ -const express = require('express'); /* TYPE IN TERMINAL: "npm install express" */ -const bodyParser = require('body-parser'); /* TYPE IN TERMINAL: "npm install body-parser" */ -const { PythonShell } = require('python-shell'); /* TYPE IN TERMINAL: "npm install python-shell" */ +const { app, BrowserWindow, ipcMain } = require('electron'); +const express = require('express'); +const bodyParser = require('body-parser'); +const { PythonShell } = require('python-shell'); const path = require('path'); const urlElectron = path.join(__dirname, "src/index.html"); @@ -16,31 +16,19 @@ server.post('/submit-form', (req, res) => { let options = { mode: 'text', - args: [plant_naam, plantensoort, plant_geteelt], // Zet hier een variable bij om de data toe te voegen aan de databas + args: [plant_naam, plantensoort, plant_geteelt] // Zet hier een variable bij om de data toe te voegen aan de database }; -/*Om python te gebruiken*/ -// ipcMain.on('request-update-temp', (event, args) => { -// let options = { -// mode: 'text', -// scriptPath: 'path/to/your/python/script', -// args: args -// }; - -// PythonShell.run('calculate.py', options, (err, results) => { -// if (err) { -// console.error('Error running python script', err); -// event.reply('update-temp-result', 'error'); -// } else { -// console.log('Python script results:', results); -// event.reply('update-temp-result', results[0]); // Verstuur het resultaat terug naar de renderer proces -// } -// }); -// }); - -// En dan in je renderer proces, stuur je een bericht om de update te verzoeken -ipcRenderer.send('request-update-temp', [/* hier kunnen argumenten komen die je Python script nodig heeft */]); - + // Voer Python script uit met de plant_naam als argument + PythonShell.run('./script/db_connect_form.py', options, (err, results) => { + if (err) { + console.error(err); + res.send('Er is een fout opgetreden'); + } else { + console.log('Python script uitvoering resultaten:', results); + res.send('Formulier succesvol verwerkt'); + } + }); }); // Start de server voor verbinding met de database @@ -62,27 +50,6 @@ function createWindow() { }); mainWindow.loadURL(urlElectron); - - /*Is om het Python script te kunnen gebruiken*/ - ipcMain.on('run-python-script', (event, args) => { - let options = { - mode: 'text', - args: args - }; - - PythonShell.run('../src/py/calculate.py', options, (err, results) => { - if (err) - { - console.error('Error running python script', err); - event.reply('python-script-response', 'error'); - } - else - { - console.log('Python script results:', results); - event.reply('python-script-response', results); - } - }); -}); } app.whenReady().then(createWindow); diff --git a/package-lock.json b/package-lock.json index 1b052bb..d36888a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "body-parser": "^1.20.2", "elctron": "^0.0.1-security", - "express": "^4.18.2", + "express": "^4.18.3", "mysql2": "^3.9.1", "python-shell": "^5.0.0" }, @@ -896,13 +896,13 @@ } }, "node_modules/express": { - "version": "4.18.2", - "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz", - "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==", + "version": "4.18.3", + "resolved": "https://registry.npmjs.org/express/-/express-4.18.3.tgz", + "integrity": "sha512-6VyCijWQ+9O7WuVMTRBTl+cjNNIzD5cY5mQ1WM8r/LEkI2u8EYpOotESNwzNlyCn3g+dmjKYI6BmNneSr/FSRw==", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.1", + "body-parser": "1.20.2", "content-disposition": "0.5.4", "content-type": "~1.0.4", "cookie": "0.5.0", @@ -936,54 +936,6 @@ "node": ">= 0.10.0" } }, - "node_modules/express/node_modules/body-parser": { - "version": "1.20.1", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz", - "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==", - "dependencies": { - "bytes": "3.1.2", - "content-type": "~1.0.4", - "debug": "2.6.9", - "depd": "2.0.0", - "destroy": "1.2.0", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "on-finished": "2.4.1", - "qs": "6.11.0", - "raw-body": "2.5.1", - "type-is": "~1.6.18", - "unpipe": "1.0.0" - }, - "engines": { - "node": ">= 0.8", - "npm": "1.2.8000 || >= 1.4.16" - } - }, - "node_modules/express/node_modules/iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/express/node_modules/raw-body": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz", - "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==", - "dependencies": { - "bytes": "3.1.2", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "unpipe": "1.0.0" - }, - "engines": { - "node": ">= 0.8" - } - }, "node_modules/extract-zip": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz", @@ -2339,13 +2291,13 @@ "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==" }, "express": { - "version": "4.18.2", - "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz", - "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==", + "version": "4.18.3", + "resolved": "https://registry.npmjs.org/express/-/express-4.18.3.tgz", + "integrity": "sha512-6VyCijWQ+9O7WuVMTRBTl+cjNNIzD5cY5mQ1WM8r/LEkI2u8EYpOotESNwzNlyCn3g+dmjKYI6BmNneSr/FSRw==", "requires": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.1", + "body-parser": "1.20.2", "content-disposition": "0.5.4", "content-type": "~1.0.4", "cookie": "0.5.0", @@ -2374,46 +2326,6 @@ "type-is": "~1.6.18", "utils-merge": "1.0.1", "vary": "~1.1.2" - }, - "dependencies": { - "body-parser": { - "version": "1.20.1", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz", - "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==", - "requires": { - "bytes": "3.1.2", - "content-type": "~1.0.4", - "debug": "2.6.9", - "depd": "2.0.0", - "destroy": "1.2.0", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "on-finished": "2.4.1", - "qs": "6.11.0", - "raw-body": "2.5.1", - "type-is": "~1.6.18", - "unpipe": "1.0.0" - } - }, - "iconv-lite": { - "version": "0.4.24", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", - "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", - "requires": { - "safer-buffer": ">= 2.1.2 < 3" - } - }, - "raw-body": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz", - "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==", - "requires": { - "bytes": "3.1.2", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "unpipe": "1.0.0" - } - } } }, "extract-zip": { diff --git a/package.json b/package.json index 9ad6306..900b13d 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "dependencies": { "body-parser": "^1.20.2", "elctron": "^0.0.1-security", - "express": "^4.18.2", + "express": "^4.18.3", "mysql2": "^3.9.1", "python-shell": "^5.0.0" } diff --git a/src/css/style.css b/src/css/style.css index cb20bc2..1770397 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -14,6 +14,7 @@ body { background-repeat: no-repeat; background-size: cover; background-position: center; + font-family: "Afacad", sans-serif; display: flex; justify-content: center; align-items: center; @@ -39,6 +40,7 @@ body .mainContainer .informatie-kas-main-container { 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); @@ -90,6 +92,7 @@ body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox { font-size: 1.25rem; padding: 0 1rem 2.5rem; height: 225px; + position: relative; } body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox h2 { position: absolute; @@ -140,6 +143,7 @@ body .mainContainer .mainBorder .content .kant-links #planten td article:hover { } body .mainContainer .mainBorder .content .kant-rechts { grid-column: 3; + margin-right: 2rem; } body .mainContainer .mainBorder .content .kant-rechts #metingen { border: solid 3px rgb(171, 211, 174); @@ -175,12 +179,6 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table { 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; } diff --git a/src/css/style.css.map b/src/css/style.css.map index e339665..b11fddc 100644 --- a/src/css/style.css.map +++ b/src/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/src/css/style.scss b/src/css/style.scss index dd546ab..28c57eb 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -51,7 +51,7 @@ body background-repeat: no-repeat; background-size: cover; background-position: center; - // font-family: $font-text; + font-family: $font-text; display: flex; justify-content: center; align-items: center; @@ -68,7 +68,6 @@ body .goodgarden-logo { - // z-index: inherit; position: absolute; width: 10vw; left: 50%; @@ -84,7 +83,7 @@ body .mainBorder { - // padding: 1.25rem 1.5rem;\ + padding: 1.25rem 1.5rem; padding: 1rem 0; height: 35rem; border: solid 5px $primary-color; @@ -152,7 +151,7 @@ body font-size: 1.25rem; padding: 0 1rem 2.5rem; height: 225px; - // position: relative; + position: relative; h2 { @@ -232,7 +231,7 @@ body &-rechts { grid-column: 3; - // margin-right: 2rem; + margin-right: 2rem; #metingen { @@ -290,7 +289,7 @@ body { td { - font-size: 1.05rem; + // font-size: 1.05rem; } } } @@ -301,7 +300,7 @@ body { td { - font-size: 1.25rem; + // font-size: 1.25rem; } } } diff --git a/src/index.html b/src/index.html index 5b14b45..54968d1 100644 --- a/src/index.html +++ b/src/index.html @@ -5,8 +5,7 @@ Document - - +
@@ -72,18 +71,31 @@ - +
@@ -91,28 +103,37 @@

a

-
-
- - - - - - -
-

Waardes

- 		-

Huidig

- 		-

24u gemiddelde

-
-
-
-
-
- -
-
+
+
+
+ + + + + + + + + + + + + + + + + +
Dagen tot Oogst12
Dagen in Kas2
Tevredenheid80%
Aandachtspunten1
+
+
+
+
+

Zonlicht

+ +
+
+
diff --git a/src/js/main.js b/src/js/main.js index 4ce0a61..a3e1eb4 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -2,8 +2,6 @@ const { ipcRenderer } = require("electron"); document.addEventListener('DOMContentLoaded', () => { - // Stuur een bericht naar de main process om het Python script uit te voeren -// In je renderer.js (geladen met defer in je HTML) ipcRenderer.send('request-update-temp', ['some', 'arguments']); ipcRenderer.on('update-temp-result', (event, newTemperature) => { @@ -16,11 +14,6 @@ document.addEventListener('DOMContentLoaded', () => }); -// function dataTablePython() -// { -// document.getElementById("") -// } - function openModal() { const modal = document.getElementById("myModal"); @@ -58,19 +51,17 @@ function drawLineChart() const data = [20, 50, 60, 45, 50, 100, 70, 60, 65, 0, 85, 0]; const xLabels = ["", "", "", "", "", 6, "", "", "", "", "", 12]; - // Define Y-axis labels here. The number of labels should match your scale. const yLabels = ["", 20, "", 40, "", 60, "", 80, "", 100]; /*NIET VERANDEREN!!!*/ const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); - ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas + ctx.clearRect(0, 0, canvas.width, canvas.height); const padding = 35; // Increased padding for Y labels const graphWidth = canvas.width - padding * 2; const graphHeight = canvas.height - padding * 2; - // Draw the axes ctx.beginPath(); ctx.moveTo(padding, padding); ctx.lineTo(padding, canvas.height - padding); @@ -78,10 +69,10 @@ function drawLineChart() ctx.stroke(); // Set the color of the line - ctx.strokeStyle = "#008000"; // This sets the line color to green + ctx.strokeStyle = "rgb(143, 188, 143)"; const xIncrement = graphWidth / (xLabels.length - 1); - const yIncrement = graphHeight / (yLabels.length - 1); // Assuming you have labels for each increment + const yIncrement = graphHeight / (yLabels.length - 1); // Plot the data ctx.beginPath(); @@ -93,7 +84,7 @@ function drawLineChart() const yPos = canvas.height - padding - (data[i] / 100) * graphHeight; ctx.lineTo(xPos, yPos); } - ctx.stroke(); // Apply the stroke to the line + ctx.stroke(); // Draw Y labels ctx.fillStyle = "black"; diff --git a/src/kas_informatie.html b/src/kas_informatie.html index c8d24e1..7809eec 100644 --- a/src/kas_informatie.html +++ b/src/kas_informatie.html @@ -4,7 +4,6 @@ - Informatie Kas @@ -47,7 +46,6 @@ -
diff --git a/src/py/calculate.py b/src/py/calculate.py deleted file mode 100644 index 5a4f5f5..0000000 --- a/src/py/calculate.py +++ /dev/null @@ -1,7 +0,0 @@ -# In calculate.py - -# Doe je berekeningen hier, vervang 42 door je berekende waarde -calculated_value = 42 - -# Print het resultaat, dat zal worden gelezen door de PythonShell.run callback -print(calculated_value)