Input Velden Electron

This commit is contained in:
Atilla
2024-02-16 17:19:52 +01:00
23 changed files with 1957 additions and 269 deletions

35
ReadMe.md Normal file
View File

@@ -0,0 +1,35 @@
# GoodGarden
Welkom bij ons project genaamd "GoodGarden". Wij hebben besloten om er een monolitische project van te maken. Alles is te vinden binnen deze repository.
### Vereisten
* Python
* Node.Js
* XAMPP (of andere naar keuze)
### Installeren
Zorg dat je in de hoofdmap "GoodGarden" zit. Kijk in je path: "/GoodGarden". Als je in de correcte map zit moet je de volgende items installeren:
- npm install electron
- npm install express
- npm install body-parser
- npm install python-shell
- pip install mysql-connector-python
- pip install requests
## Gebruik
Een paar voorbeelden van nuttig gebruik van dit project of hoe het gebruikt kan worden.
## Versiebeheer
We gebruiken [SemVer](http://semver.org/) voor versiebeheer. Voor de beschikbare versies, zie de [tags op deze repository](https://example.com/tags).
## Auteurs
* **Jouw Naam** - *Initieel werk* - [Gebruikersnaam](https://example.com/)
Zie ook de lijst van [bijdragers](https://example.com/contributors) die hebben bijgedragen aan dit project.

67
app.js Normal file
View File

@@ -0,0 +1,67 @@
const { app, BrowserWindow } = 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 path = require('path');
const urlElectron = path.join(__dirname, "src/main.html");
// Maak een Express-app
const server = express();
server.use(bodyParser.urlencoded({ extended: true }));
// Definieer een route voor form POST verzoeken
server.post('/submit-form', (req, res) => {
const { plant_naam, plantensoort } = req.body; // Verkrijg de plant_naam uit het formulier
const plant_geteelt = req.body.plant_geteelt == 'true' ? 'true' : 'false'; // Zorgt dat de string "true" herkent wordt
let options = {
mode: 'text',
args: [plant_naam, plantensoort, plant_geteelt] // Zet hier een variable bij om de data toe te voegen aan de database
};
// 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
const PORT = 3000;
server.listen(PORT, () => {
console.log(`Server luistert op port ${PORT}`);
});
// Maak de Electron applicatie aan met bijbehorende waardes
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
mainWindow.loadURL(urlElectron);
}
app.whenReady().then(createWindow);
// Functionaliteit voor het openen en sluiten van de app
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});

View File

@@ -1,16 +0,0 @@
-- DROP DATABASE IF EXISTS goodgarden;
-- CREATE DATABASE goodgarden;
-- CREATE TABLE goodgarden.sensor_data (
-- id INT UNSIGNED NOT NULL AUTO_INCREMENT,
-- timestamp INT,
-- gateway_receive_time VARCHAR(50),
-- device INT,
-- 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);

39
main.js
View File

@@ -1,39 +0,0 @@
const { app, BrowserWindow, nativeImage, shell } = require("electron");
// const screen = require("electron").screen;
const path = require("path");
let mainWindow;
function createWindow()
{
// const iconPath = path.join(__dirname, "images/logo.png");
// const icon = nativeImage.createFromPath(iconPath);
const urlElectron = path.join(__dirname, "src/main.html");
mainWindow = new BrowserWindow(
{
width: 1000,
height: 650,
webPreferences:
{
nodeIntegration: true,
},
resizable: false,
frame: true,
// icon: icon,
alwaysOnTop: true,
// backgroundColor: "green"
});
// const { width, height } = screen.getPrimaryDisplay().workAreaSize;
// mainWindow.setPosition(width - 450, height - 500);
mainWindow.loadURL(urlElectron);
// mainWindow.on("closed", function ()
// {
// mainWindow = null;
// });
}
app.on("ready", createWindow);

1577
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,10 +1,10 @@
{
"name": "goodgarden",
"description": "",
"main": "main.js",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron main.js"
"start": "electron app.js"
},
"author": "",
"license": "ISC",
@@ -12,6 +12,10 @@
"electron": "^23.3.13"
},
"dependencies": {
"elctron": "^0.0.1-security"
"body-parser": "^1.20.2",
"elctron": "^0.0.1-security",
"express": "^4.18.2",
"mysql2": "^3.9.1",
"python-shell": "^5.0.0"
}
}

View File

@@ -1,10 +1,13 @@
import requests
import requests #** TYPE IN TERMINAL: "pip install requests"
import time
import mysql.connector #** TYPE IN TERMINAL: "pip install mysql-connector-python"
# Import python db_connect.py script
from db_connect import database_connect
def fetch_and_display_all(urls, access_token):
for url in urls:
# Functie voor het aanmaken van gegevens in de database
def create_data(url, access_token, repeat_count=5):
for _ in range(repeat_count):
try:
headers = {
"Authorization": f"Token {access_token}"
@@ -14,17 +17,19 @@ def fetch_and_display_all(urls, access_token):
data = response.json()
print(f"Data from {url}:")
# print(data)
load_data(data)
# print(f"Data from {url}:")
print(data)
insert_data(data)
except requests.exceptions.RequestException as e:
print(f"Error fetching data from {url}: {e}")
print("Waiting for the next create action...")
time.sleep(10)
# time.sleep(300)
print("Waiting for the next retrieval action...")
time.sleep(300) # Time here is in seconds.
def load_data(data):
# Functie voor het invoegen van gegevens in de database
def insert_data(data):
mydb = database_connect()
if mydb.is_connected():
mycursor = mydb.cursor()
@@ -33,7 +38,9 @@ def load_data(data):
INSERT INTO goodgarden.battery_voltage_events (timestamp, gateway_receive_time, device, value)
VALUES (%s, %s, %s, %s)
"""
for record in data['results']:
for record in data['results']: # Pas dit aan op basis van de werkelijke structuur van de JSON
timestamp = record.get('timestamp', '')
gateway_receive_time = record.get('gateway_receive_time', '')
device = record.get('device', '')
@@ -41,24 +48,131 @@ def load_data(data):
print(f"Inserting data: timestamp={timestamp}, gateway_receive_time={gateway_receive_time}, device={device}, value={value}")
# Execute the query
# Voer de query uit
mycursor.execute(insert_query, (timestamp, gateway_receive_time, device, value))
# Commit the changes
# Bevestig de wijzigingen
mydb.commit()
# Close cursor and connection
# Sluit cursor en verbinding
mycursor.close()
mydb.close()
# print("Data inserted into the database.")
# Functie voor het lezen van gegevens uit de database
def read_data(url, access_token, repeat_count=5):
for _ in range(repeat_count):
try:
headers = {
"Authorization": f"Token {access_token}"
}
response = requests.get(url, headers=headers)
response.raise_for_status()
data = response.json()
print(f"Data from {url}:")
print(data)
except requests.exceptions.RequestException as e:
print(f"Error fetching data from {url}: {e}")
# Wacht een bepaalde tijd in secondes
print("Waiting for the next read action...")
time.sleep(300)
# Functie voor het bijwerken van gegevens in de database
def update_data(record_id, new_value):
try:
mydb = database_connect()
if mydb.is_connected():
mycursor = mydb.cursor()
# Controleer of het record bestaat voordat je het bijwerkt
mycursor.execute("SELECT * FROM goodgarden.battery_voltage_events WHERE id = %s", (record_id,))
existing_record = mycursor.fetchone()
if not existing_record:
print(f"Record with ID {record_id} not found. Update operation aborted.")
return
# Hier moet je de juiste kolomnamen aanpassen op basis van de structuur van je database
update_query = """
UPDATE goodgarden.battery_voltage_events
SET value = %s
WHERE id = %s
"""
# Voer de query uit
print(f"Executing update query: {update_query}")
print(f"Updating record with ID {record_id} to new value: {new_value}")
mycursor.execute(update_query, (new_value, record_id)) # Provide the tuple with values here
# Bevestig de wijzigingen
mydb.commit()
print(f"Update executed. Rowcount: {mycursor.rowcount}")
except mysql.connector.Error as update_err:
print(f"Error updating data: {update_err}")
finally:
# Zorg ervoor dat je altijd de cursor en de databaseverbinding sluit
if 'mycursor' in locals() and mycursor is not None:
mycursor.close()
if 'mydb' in locals() and mydb.is_connected():
mydb.close()
# Functie voor het verwijderen van gegevens uit de database
def delete_data(record_id):
mydb = database_connect()
if mydb.is_connected():
mycursor = mydb.cursor()
# Hier moet je de juiste kolomnamen aanpassen op basis van de structuur van je database
delete_query = """
DELETE FROM goodgarden.battery_voltage_events
WHERE id = %s
"""
# Voer de query uit
mycursor.execute(delete_query, (record_id,))
# Bevestig de wijzigingen
mydb.commit()
# Sluit cursor en verbinding
mycursor.close()
mydb.close()
print(f"Data with ID {record_id} deleted.")
if __name__ == "__main__":
urls = [
"https://garden.inajar.nl/api/battery_voltage_events/?format=json",
]
url = "https://garden.inajar.nl/api/battery_voltage_events/?format=json"
access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"
repeat_count = 10
fetch_and_display_all(urls, access_token)
operation_choice = input("Choose operation (C for Create, R for Read, U for Update, D for Delete): ").upper()
# Maak gegevens aan
if operation_choice == "C":
create_data(url, access_token, repeat_count)
# Lees gegevens
elif operation_choice == "R":
read_data(url, access_token, repeat_count)
# Update gegevens
elif operation_choice == "U":
record_id = int(input("Enter record ID to update: "))
new_value = input("Enter new value: ")
update_data(record_id, new_value)
# Verwijder gegevens
elif operation_choice == "D":
record_id = int(input("Enter record ID to delete: "))
delete_data(record_id)
else:
print("Invalid operation choice. Please choose C, R, U, or D.")

View File

@@ -1,4 +1,4 @@
import mysql.connector
import mysql.connector #** TYPE IN TERMINAL: "pip install mysql-connector-python"
from mysql.connector import Error
def database_connect():

50
script/db_connect_form.py Normal file
View File

@@ -0,0 +1,50 @@
import sys
import json
import mysql.connector #** TYPE IN TERMINAL: "pip install mysql-connector-python"
from mysql.connector import Error
# Voeg de data uit het formulier toe aan de database
def insert_plant_name(plant_naam, plantensoort, plant_geteelt):
# Als er "true" is meegeven als waarde dan komt in de database 1 anders 0 (false)
plant_geteelt_value = 1 if plant_geteelt.lower() == "true" else 0
try:
connection = mysql.connector.connect(
host='localhost',
database='goodgarden',
user='root',
password=''
)
# Als er verbinding gemaakt kan worden voer dan onderstaande query uit
if connection.is_connected():
# De crusor() zorgt ervoor dat er een verbinding met de database gelegt kan worden en de data gemanipuleerd
cursor = connection.cursor()
query = "INSERT INTO goodgarden.planten (plant_naam, plantensoort, plant_geteelt) VALUES (%s, %s, %s)"
cursor.execute(query, (plant_naam, plantensoort, plant_geteelt_value)) # "%s" wordt hier ingevuld doormiddel van de variable (parameter)
connection.commit()
print(json.dumps({"success": True}))
else:
print(json.dumps({"success": False, "error": "Database connection failed"}))
except Error as e:
print(json.dumps({"success": False, "error": str(e)}))
finally:
if connection and connection.is_connected():
cursor.close()
connection.close()
# Wordt alleen uitgevoerd als het een standalone script is (geen import!!!)
if __name__ == "__main__":
# Dit zijn de variables die door het JavaScript bestand (app.js) worden meegegeven --- NOTE: sys.argv[0] is altijd de naam van het script!
plant_naam = sys.argv[1]
plantensoort = sys.argv[2]
plant_geteelt = sys.argv[3]
# Call de function met de variables
insert_plant_name(plant_naam, plantensoort, plant_geteelt)

View File

@@ -3,8 +3,8 @@ import time
from db_connect import database_connect
def fetch_and_display_all(urls, access_token):
for url in urls:
def fetch_and_display_all(url, access_token, repeat_count=5):
for _ in range(repeat_count):
try:
headers = {
"Authorization": f"Token {access_token}"
@@ -21,7 +21,10 @@ def fetch_and_display_all(urls, access_token):
print(f"Error fetching data from {url}: {e}")
print("Waiting for the next retrieval action...")
time.sleep(300) # Time here is in seconds.
# time.sleep(300) # Time here is in seconds.
time.sleep(1) # Time here is in seconds.
def load_data(data):
mydb = database_connect()
@@ -55,10 +58,14 @@ def load_data(data):
print("Data inserted into the database.")
if __name__ == "__main__":
urls = [
"https://garden.inajar.nl/api/devices/?format=json"
]
url = "https://garden.inajar.nl/api/devices/?format=json"
access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c" # Replace this with your actual access token
access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"
# access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"
# You can change the repeat_count to control how many times you want to repeat the process
repeat_count = 10
fetch_and_display_all(urls, access_token)
fetch_and_display_all(url, access_token, repeat_count)

View File

@@ -2,6 +2,7 @@ import requests
import time
from db_connect import database_connect
# Establish a database connection
connection = database_connect()
@@ -47,26 +48,6 @@ def load_data(data):
# Execute the query
mycursor.execute(insert_query, (timestamp, gateway_receive_time, device, value))
# insert_query = """ Voor deze code werktengid te krijgen moet je in de datebase een ''id, serial_number, name, label, last_seen, last_battery_voltage)' aanmaken en dan werkt het.
# INSERT INTO goodgarden.fetch (id, serial_number, name, label, last_seen, last_battery_voltage) Hier de tabel naam veranderen
# VALUES (%s, %s, %s, %s, %s, %s)
# """
# for record in data['results']: # Adjust this based on the actual structure of the JSON
# id = record.get('id', '')
# serial_number = record.get('serial_number', '')
# name = record.get('name', '')
# label = record.get('label', '')
# last_seen = record.get('last_seen', '')
# last_battery_voltage = record.get('last_battery_voltage', '')
# print(f"Inserting data: id={id}, serial_number={serial_number}, name={name}, label={label}, last_seen={last_seen}, last_battery_voltage={last_battery_voltage}") # Print the data being inserted
# # Execute the query
# mycursor.execute(insert_query, (id, serial_number, name, label, last_seen, last_battery_voltage))
# Commit the changes
mydb.commit()

27
script/main.js Normal file
View File

@@ -0,0 +1,27 @@
function openModal()
{
const modal = document.getElementById("myModal");
const button = document.getElementById("modalButton");
const close = document.getElementsByClassName("close")[0];
// Toon de modal wanneer op de knop wordt geklikt
button.onclick = function()
{
modal.style.display = "block";
}
// Sluit de modal wanneer op het 'sluiten' icoon wordt geklikt
close.onclick = function()
{
modal.style.display = "none";
}
// Sluit de modal wanneer buiten de modal wordt geklikt
window.onclick = function(event)
{
if (event.target == modal)
{
modal.style.display = "none";
}
}
}

0
script/main.py Normal file
View File

View File

@@ -3,8 +3,8 @@ import time
from db_connect import database_connect
def fetch_and_display_all(urls, access_token):
for url in urls:
def fetch_and_display_all(url, access_token, repeat_count=5):
for _ in range(repeat_count):
try:
headers = {
"Authorization": f"Token {access_token}"
@@ -21,7 +21,9 @@ def fetch_and_display_all(urls, access_token):
print(f"Error fetching data from {url}: {e}")
print("Waiting for the next retrieval action...")
time.sleep(300) # Time here is in seconds.
time.sleep(1) # Time here is in seconds.
def load_data(data):
mydb = database_connect()
@@ -54,10 +56,9 @@ def load_data(data):
print("Data inserted into the database.")
if __name__ == "__main__":
urls = [
"https://garden.inajar.nl/api/par_events/?format=json"
]
url = "https://garden.inajar.nl/api/par_events/?format=json"
access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"
# You can change the repeat_count to control how many times you want to repeat the process
repeat_count = 10
access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"
fetch_and_display_all(urls, access_token)
fetch_and_display_all(url, access_token, repeat_count)

View File

@@ -3,8 +3,8 @@ import time
from db_connect import database_connect
def fetch_and_display_all(urls, access_token):
for url in urls:
def fetch_and_display_all(url, access_token, repeat_count=5):
for _ in range(repeat_count):
try:
headers = {
"Authorization": f"Token {access_token}"
@@ -21,7 +21,8 @@ def fetch_and_display_all(urls, access_token):
print(f"Error fetching data from {url}: {e}")
print("Waiting for the next retrieval action...")
time.sleep(300) # Time here is in seconds.
time.sleep(1) # Time here is in seconds.
def load_data(data):
mydb = database_connect()
@@ -54,10 +55,10 @@ def load_data(data):
print("Data inserted into the database.")
if __name__ == "__main__":
urls = [
"https://garden.inajar.nl/api/relative_humidity_events/?format=json"
]
url = "https://garden.inajar.nl/api/relative_humidity_events/?format=json"
access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"
fetch_and_display_all(urls, access_token)
# You can change the repeat_count to control how many times you want to repeat the process
repeat_count = 10
fetch_and_display_all(url, access_token, repeat_count)

View File

@@ -3,8 +3,8 @@ import time
from db_connect import database_connect
def fetch_and_display_all(urls, access_token):
for url in urls:
def fetch_and_display_all(url, access_token, repeat_count=5):
for _ in range(repeat_count):
try:
headers = {
"Authorization": f"Token {access_token}"
@@ -21,7 +21,8 @@ def fetch_and_display_all(urls, access_token):
print(f"Error fetching data from {url}: {e}")
print("Waiting for the next retrieval action...")
time.sleep(300) # Time here is in seconds.
time.sleep(1) # Time here is in seconds.
def load_data(data):
mydb = database_connect()
@@ -52,12 +53,11 @@ def load_data(data):
mydb.close()
print("Data inserted into the database.")
if __name__ == "__main__":
urls = [
"https://garden.inajar.nl/api/soil_electric_conductivity_events/?format=json"
]
url = "https://garden.inajar.nl/api/soil_electric_conductivity_events/?format=json"
access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c" # Replace this with your actual access token
# You can change the repeat_count to control how many times you want to repeat the process
repeat_count = 10
access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"
fetch_and_display_all(urls, access_token)
fetch_and_display_all(url, access_token, repeat_count)

View File

@@ -3,10 +3,8 @@ import time
from db_connect import database_connect
# connection = database_connect()
def fetch_and_display_all(urls, access_token):
for url in urls:
def fetch_and_display_all(url, access_token, repeat_count=5):
for _ in range(repeat_count):
try:
headers = {
"Authorization": f"Token {access_token}"
@@ -23,7 +21,9 @@ def fetch_and_display_all(urls, access_token):
print(f"Error fetching data from {url}: {e}")
print("Waiting for the next retrieval action...")
time.sleep(300) # Time here is in seconds.
time.sleep(1) # Time here is in seconds.
def load_data(data):
mydb = database_connect()
@@ -32,7 +32,7 @@ def load_data(data):
# Here you need to adjust the correct column names and data formats based on the API response
insert_query = """
INSERT INTO goodgarden.soil_relative_permittivity_events (timestamp, gateway_receive_time, device, value)
INSERT INTO goodgarden.soil_temperature_events (timestamp, gateway_receive_time, device, value)
VALUES (%s, %s, %s, %s)
"""
for record in data['results']:
@@ -56,10 +56,11 @@ def load_data(data):
print("Data inserted into the database.")
if __name__ == "__main__":
urls = [
"https://garden.inajar.nl/api/soil_relative_permittivity_events/?format=json"
]
url = "https://garden.inajar.nl/api/soil_relative_permittivity_events/?format=json"
access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"
# You can change the repeat_count to control how many times you want to repeat the process
repeat_count = 10
access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"
fetch_and_display_all(urls, access_token)
# fetch_and_display_all(urls, access_token)
fetch_and_display_all(url, access_token, repeat_count)

View File

@@ -1,12 +1,12 @@
import requests
import time
from db_connect import database_connect
# connection = database_connect()
def fetch_and_display_all(url, access_token, repeat_count=5):
for _ in range(repeat_count):
def fetch_and_display_all(urls, access_token):
for url in urls:
try:
headers = {
"Authorization": f"Token {access_token}"
@@ -23,7 +23,8 @@ def fetch_and_display_all(urls, access_token):
print(f"Error fetching data from {url}: {e}")
print("Waiting for the next retrieval action...")
time.sleep(300) # Time here is in seconds.
time.sleep(1) # Time here is in seconds.
def load_data(data):
mydb = database_connect()
@@ -54,12 +55,11 @@ def load_data(data):
mydb.close()
print("Data inserted into the database.")
if __name__ == "__main__":
urls = [
"https://garden.inajar.nl/api/soil_temperature_events/?format=json"
]
url = "https://garden.inajar.nl/api/soil_temperature_events/?format=json"
access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c" # Replace this with your actual access token
# You can change the repeat_count to control how many times you want to repeat the process
repeat_count = 10
access_token = "33bb3b42452306c58ecedc3c86cfae28ba22329c"
fetch_and_display_all(urls, access_token)
fetch_and_display_all(url, access_token, repeat_count)

27
src/css/style.css Normal file
View File

@@ -0,0 +1,27 @@
/* 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;
}
.modal .close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.modal .close:hover, .modal .close:active {
color: black;
text-decoration: none;
cursor: pointer;
}/*# sourceMappingURL=style.css.map */

1
src/css/style.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,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;ACDJ;ADGI;EAEI,WAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;ACFR;ADIQ;EAGI,YAAA;EACA,qBAAA;EACA,eAAA;ACJZ","file":"style.css"}

34
src/css/style.scss Normal file
View File

@@ -0,0 +1,34 @@
/* 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;
}
}
}

View File

@@ -4,8 +4,44 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
<script src="../script/main.js"></script>
<script src="../script/main.py" defer></script>
</head>
<body>
<h1>sdgdfsgjindgfvadsiuuiadsiuhdgnhaewgiadsnugaeuigndfogjdfsgdff</h1>
<section id="linkerkant">
<article>
<img src="" alt="">
<h2>Tomaat</h2>
<button></button>
</article>
<article>
<img src="" alt="">
<button id="modalButton" onclick="openModal()">TOEVOEGEN!!!</button>
</article>
</section>
<section>
</section>
<div id="myModal" class="modal">
<span class="close">&times;</span>
<form action="http://localhost:3000/submit-form" method="post">
<input type="text" name="plant_naam" id="plantNaam">
<label for="plantNaam">Naam van de plant</label>
<input type="text" name="plantensoort" id="plantensoort">
<label for="plantensoort">Soort van de plant</label>
<input type="radio" name="plant_geteelt" id="aanwezig" value="true">
<label for="aanwezig">Aanwezig</label>
<input type="radio" name="plant_geteelt" id="afwezig" value="false">
<label for="afwezig">Afwezig</label>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>