heboba/goodgarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Volledig samengevoegd

Browse Source
This commit is contained in:
Atilla
2024-03-20 08:55:47 +01:00
parent be5250c413
commit a60f14853f
10 changed files with 980 additions and 563 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
app.js
View File

@@ -1,70 +1,66 @@
const { app, BrowserWindow, ipcMain } = require('electron'); const { app, BrowserWindow, ipcMain } = require("electron");
const express = require('express'); const express = require("express");
const bodyParser = require('body-parser'); const bodyParser = require("body-parser");
const { PythonShell } = require('python-shell'); const { PythonShell } = require("python-shell");
const path = require('path'); const path = require("path");
const urlElectron = path.join(__dirname, "src/index.html"); const urlElectron = path.join(__dirname, "src/index.html");
// Create an Express app
const server = express(); const server = express();
server.use(bodyParser.urlencoded({ extended: true })); server.use(bodyParser.urlencoded({ extended: true }));
// Define a route for form POST requests // Define a route for form POST requests
server.post('/submit-form', (req, res) => server.post("/submit-form", (req, res) => {
{
const { plant_naam, plantensoort } = req.body; const { plant_naam, plantensoort } = req.body;
const plant_geteelt = req.body.plant_geteelt == 'true' ? 'true' : 'false'; const plant_geteelt = req.body.plant_geteelt == "true" ? "true" : "false";
let options = let options = {
{ mode: "text",
mode: 'text', args: [plant_naam, plantensoort, plant_geteelt],
args: [plant_naam, plantensoort, plant_geteelt]
}; };
// Execute Python script with plant name as an argument // Execute Python script with plant name as an argument
PythonShell.run('src/py/script/db_connect_form.py', options, (err, results) => PythonShell.run(
{ "src/py/script/db_connect_form.py",
if (err) options,
{ (err, results) => {
console.error(err); if (err) {
res.send('Er is een fout opgetreden'); console.error(err);
} res.send("Er is een fout opgetreden");
else } else {
{ console.log("Python script uitvoering resultaten:", results);
console.log('Python script uitvoering resultaten:', results); res.send("Formulier succesvol verwerkt");
res.send('Formulier succesvol verwerkt'); }
} }
}); );
}); });
// Start the server // Start the server
const PORT = 3000; const PORT = 3000;
server.listen(PORT, () => server.listen(PORT, () => {
{
console.log(`Server is listening on port ${PORT}`); console.log(`Server is listening on port ${PORT}`);
}); });
let mainWindow; let mainWindow;
// Create the Electron application window // Create the Electron application window
function createWindow() function createWindow() {
{ mainWindow = new BrowserWindow({
mainWindow = new BrowserWindow(
{
width: 1280, width: 1280,
height: 800, height: 800,
frame: false, frame: false,
webPreferences: icon: path.join(__dirname, "src/py/static/images/logo.png"),
{ webPreferences: {
nodeIntegration: true, nodeIntegration: true,
contextIsolation: false, contextIsolation: false,
enableRemoteModule: true, enableRemoteModule: true,
webSecurity: true, webSecurity: true,
} },
}); });
mainWindow.loadFile(path.join(__dirname, 'src', 'py', 'templates', 'index.html')); mainWindow.loadFile(
path.join(__dirname, "src", "py", "templates", "index.html")
);
// IPC event listeners for running Python scripts and updating HTML data // IPC event listeners for running Python scripts and updating HTML data
setupIpcMainListeners(); setupIpcMainListeners();
@@ -74,44 +70,40 @@ function createWindow()
app.whenReady().then(createWindow); app.whenReady().then(createWindow);
// Close the app when all windows are closed, except on macOS // Close the app when all windows are closed, except on macOS
app.on('window-all-closed', () => app.on("window-all-closed", () => {
{ if (process.platform !== "darwin") {
if (process.platform !== 'darwin')
{
app.quit(); app.quit();
} }
}); });
// Re-create a window in the app when the dock icon is clicked and there are no other windows open. // Re-create a window in the app when the dock icon is clicked and there are no other windows open.
app.on('activate', () => app.on("activate", () => {
{ if (BrowserWindow.getAllWindows().length === 0) {
if (BrowserWindow.getAllWindows().length === 0)
{
createWindow(); createWindow();
} }
}); });
function setupIpcMainListeners() function setupIpcMainListeners() {
{ ipcMain.on("run-python-script", (event, args) => {
ipcMain.on('run-python-script', (event, args) => let options = {
{ mode: "text",
let options =
{
mode: 'text',
args: args, args: args,
}; };
// The actual script path and event replies should be tailored to your application's needs // The actual script path and event replies should be tailored to your application's needs
}); });
ipcMain.on('request-update-data', (event, args) => ipcMain.on("request-update-data", (event, args) => {
{ const databaseData = {
const databaseData = { timestamp: "2022-01-01", gateway_receive_time: "2022-01-01", device: "Device1", value: 50 }; timestamp: "2022-01-01",
event.reply('update-data-result', { databaseData }); gateway_receive_time: "2022-01-01",
device: "Device1",
value: 50,
};
event.reply("update-data-result", { databaseData });
}); });
ipcMain.on('update-html-data', (event, data) => ipcMain.on("update-html-data", (event, data) => {
{ mainWindow.webContents.send("update-html-data", data);
mainWindow.webContents.send('update-html-data', data);
}); });
} }

8
src/py/script/calculate.py
View File

@@ -1,8 +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)

179
src/py/static/css/style.css
View File

@@ -1,16 +1,26 @@
@import url("https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap"); @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"); @import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap");
h1, h2, h3, h4, h5 { h1,
h2,
h3,
h4,
h5 {
font-family: "Akaya Kanadaka", system-ui; font-family: "Akaya Kanadaka", system-ui;
margin: 0; margin: 0;
} }
p, td { p,
td {
font-family: "Afacad", sans-serif; font-family: "Afacad", sans-serif;
color: black;
}
a {
text-decoration: none;
} }
body { body {
background-image: url("../images/achtergrond.png"); background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/achtergrond.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
@@ -24,7 +34,7 @@ body {
body .mainContainer { body .mainContainer {
width: 85vw; width: 85vw;
height: 38rem; height: 38rem;
background-color: rgba(255, 255, 255, 0.95); background-color: rgba(255, 255, 255, 0.85);
border-radius: 40px; border-radius: 40px;
padding: 2rem; padding: 2rem;
} }
@@ -65,6 +75,7 @@ body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht {
border-radius: 40px; border-radius: 40px;
padding: 1rem; padding: 1rem;
margin-top: 1rem; margin-top: 1rem;
background-color: white;
} }
body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht { body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht {
border: solid 2px rgb(171, 211, 174); border: solid 2px rgb(171, 211, 174);
@@ -85,6 +96,7 @@ body .mainContainer .mainBorder #sectie-1 .grafiek {
border-radius: 40px; border-radius: 40px;
padding: 1rem; padding: 1rem;
position: relative; position: relative;
background-color: white;
} }
body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox { body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox {
border: solid 2px rgb(171, 211, 174); border: solid 2px rgb(171, 211, 174);
@@ -143,7 +155,6 @@ body .mainContainer .mainBorder .content .kant-links #planten td article:hover {
} }
body .mainContainer .mainBorder .content .kant-rechts { body .mainContainer .mainBorder .content .kant-rechts {
grid-column: 3; grid-column: 3;
margin-right: 2rem;
} }
body .mainContainer .mainBorder .content .kant-rechts #metingen { body .mainContainer .mainBorder .content .kant-rechts #metingen {
border: solid 3px rgb(171, 211, 174); border: solid 3px rgb(171, 211, 174);
@@ -166,6 +177,7 @@ body .mainContainer .mainBorder .grid-column-2 {
border-radius: 40px; border-radius: 40px;
padding: 1rem; padding: 1rem;
margin: 3.25rem 1rem 1.25rem 1rem; margin: 3.25rem 1rem 1.25rem 1rem;
background-color: white;
} }
body .mainContainer .mainBorder .grid-column-2 .grid-2-child { body .mainContainer .mainBorder .grid-column-2 .grid-2-child {
border: solid 2px rgb(171, 211, 174); border: solid 2px rgb(171, 211, 174);
@@ -206,7 +218,6 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
top: -20px; top: -20px;
} }
/* Divider */
.divider { .divider {
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -216,7 +227,6 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
margin: 0 auto; margin: 0 auto;
} }
/* The Modal (background) */
.modal { .modal {
display: none; display: none;
position: fixed; position: fixed;
@@ -229,17 +239,168 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 30vw; width: 30vw;
height: auto; height: auto;
border: solid 2px black; border: solid 2px #abd3ae;
border-radius: 10px; border-radius: 10px;
} }
.modal .close { .modal .close {
color: #aaa; color: #aaa;
float: right; float: right;
font-size: 1.75rem; font-size: 1.75rem;
font-weight: bold; font-weight: bold;
} }
.modal .close:hover, .modal .close:active {
.modal .close:hover,
.modal .close:active {
color: black; color: black;
text-decoration: none; text-decoration: none;
cursor: pointer; 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 */ }/*# sourceMappingURL=style.css.map */

2
src/py/static/css/style.css.map
View File

@@ -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"}

905
src/py/static/css/style.scss
View File

@@ -1,413 +1,534 @@
$primary-color: rgb(171, 211, 174); $primary-color: rgb(171, 211, 174);
$secondary-color: rgb(143, 188, 143); $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=Akaya+Kanadaka&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&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-titels: "Akaya Kanadaka", system-ui;
$font-text: "Afacad", sans-serif; $font-text: "Afacad", sans-serif;
@mixin flexbox-center @mixin flexbox-center
{ {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
@mixin groene-border @mixin groene-border
{ {
border: solid 2px $primary-color; border: solid 2px $primary-color;
} }
@mixin box-shadow @mixin box-shadow
{ {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
} }
@mixin border-radius @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; border-radius: 40px;
} padding: 2rem;
@mixin inner-border-radius .goodgarden-logo
{
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; position: absolute;
height: 38rem; width: 10vw;
background-color: rgb(255, 255, 255, 95%); left: 50%;
border-radius: 40px; top: 4.1rem;
padding: 2rem; transform: translateX(-50%);
.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;
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 inner-border-radius;
font-size: 1.25rem;
padding: .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;
.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%);
}
}
}
<<<<<<< HEAD:src/py/static/css/style.scss
}
=======
}
>>>>>>> main:src/css/style.scss
.content
{
display: grid;
grid-template-columns: 3fr 1fr 3fr;
height: 100%;
.kant
{
&-links
{
grid-column: 1;
#planten
{
width: 100%;
border-collapse: collapse;
td
{
<<<<<<< HEAD:src/py/static/css/style.scss
article
=======
article
>>>>>>> main:src/css/style.scss
{
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;
}
}
}
}
}
<<<<<<< HEAD:src/py/static/css/style.scss
&-rechts
{
grid-column: 3;
// margin-right: 2rem;
=======
&-rechts
{
grid-column: 3;
margin-right: 2rem;
>>>>>>> main:src/css/style.scss
#metingen
{
border: solid 3px $primary-color;
border-radius: 40px;
#main-waardes
{
display: flex;
<<<<<<< HEAD:src/py/static/css/style.scss
justify-content: space-evenly;
=======
justify-content: space-between;
>>>>>>> main:src/css/style.scss
padding: .5rem;
padding-bottom: 0;
width: 100%;
table
{
display: flex;
<<<<<<< HEAD:src/py/static/css/style.scss
justify-content: space-around;
// width: 100%;
=======
justify-content: space-between;
width: 100%;
>>>>>>> main:src/css/style.scss
}
}
}
}
}
}
.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;
}
} }
}
.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;
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;
}

4
src/py/static/js/main.js
View File

@@ -113,3 +113,7 @@ function drawLineChart()
} }
drawLineChart(); drawLineChart();
/////////////////////////////////

33
src/py/static/js/planten.class.js
View File

@@ -87,36 +87,48 @@ class PlantGrid {
this.grid[row][col] = plant; this.grid[row][col] = plant;
}); });
// Display the grid in the HTML table with id "planten" // Display the grid in the HTML table with id "planten"
this.displayGrid(); this.displayGrid();
} }
displayGrid() { displayGrid()
{
const plantenTable = document.getElementById("planten"); const plantenTable = document.getElementById("planten");
let itemCount = 0; // Counter for the number of items in the grid let itemCount = 0; // Counter for the number of items in the grid
this.grid.forEach((row, rowIndex) => { this.grid.forEach((row, rowIndex) =>
{
const tr = document.createElement("tr"); const tr = document.createElement("tr");
row.forEach((plant, colIndex) => { row.forEach((plant, colIndex) =>
{
const td = document.createElement("td"); const td = document.createElement("td");
if (itemCount < 8) { if (itemCount < 8)
if (plant) { {
if (plant)
{
// Handle regular plant items // Handle regular plant items
const link = document.createElement("a");
link.href = `planteninfo.html?id=${plant.id}`; // Link naar de planteninfo pagina met plant id als query parameter
const article = document.createElement("article"); const article = document.createElement("article");
article.classList.add("plant-container");
link.appendChild(article); // Voeg het artikel toe aan de link
const img = article.appendChild(document.createElement("img")); const img = article.appendChild(document.createElement("img"));
img.src = "../static/images/icon_awesome-apple-alt.png"; img.src = "../static/images/icon_awesome-apple-alt.png";
const h2 = article.appendChild(document.createElement("h2")); const h2 = article.appendChild(document.createElement("h2"));
h2.classList.add("plant-naam"); h2.classList.add("plant-naam");
h2.textContent = plant.plantNaam; h2.textContent = plant.plantNaam;
td.appendChild(article); td.appendChild(link); // Voeg de link toe aan de td
itemCount++; itemCount++;
} else if (rowIndex === this.rows -1 && colIndex === this.cols -1 && itemCount <= 7) { }
// Handle the "Add" button else if (rowIndex === this.rows - 1 && colIndex === this.cols - 1 && itemCount <= 7)
{
// Handle the "Add" button
const article = document.createElement("article"); const article = document.createElement("article");
const img = article.appendChild(document.createElement("img")); const img = article.appendChild(document.createElement("img"));
img.src = "../static/images/Toevoegen.png"; img.src = "../static/images/Toevoegen.png";
@@ -124,7 +136,7 @@ class PlantGrid {
img.alt = "Add"; img.alt = "Add";
article.id = "modalButton"; article.id = "modalButton";
article.onclick = openModal; article.onclick = openModal;
td.appendChild(article); td.appendChild(article);
itemCount++; itemCount++;
} }
@@ -136,6 +148,7 @@ class PlantGrid {
plantenTable.appendChild(tr); plantenTable.appendChild(tr);
}); });
} }
} }
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {

63
src/py/templates/index.html
View File

@@ -3,6 +3,9 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Dashboard / Planten">
<meta name="author" content="B. Diker, A. Oomen">
<meta name="keywords" content="planten / kas">
<title>Dashboard</title> <title>Dashboard</title>
<link rel="stylesheet" href="../static/css/style.css"> <link rel="stylesheet" href="../static/css/style.css">
<script src="../static/js/main.js" defer></script> <script src="../static/js/main.js" defer></script>
@@ -11,8 +14,10 @@
<body> <body>
<section class="mainContainer"> <section class="mainContainer">
<article> <article>
<a href="index.html">
<img src="../static/images/logo.png" class="goodgarden-logo"> <img src="../static/images/logo.png" class="goodgarden-logo">
</article> </a>
</article>
<section class="mainBorder"> <section class="mainBorder">
<section class="content"> <section class="content">
<section class="kant-links"> <section class="kant-links">
@@ -24,34 +29,38 @@
<h2>Tomaat</h2> <h2>Tomaat</h2>
</article> </article>
</td> </td>
<td>
<article id="modalButton" onclick="openModal()">
<img id="toevoegen" src="../static/images/Toevoegen.png" alt="">
</article>
</td>
</tr> --> </tr> -->
</table> </table>
<div id="myModal" class="modal"> <div class="formulier">
<span class="close">&times;</span> <div id="myModal" class="modal" style="display: none;">
<form action="http://localhost:3000/submit-form" method="post" onsubmit="return addplant()"> <h1 id="plant-id">Plant Toevoegen</h1>
<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><br>
<label for="plantNaam">Naam van de plant</label> <input type="text" name="plant_naam" id="plantNaam"><br>
<input type="text" name="plantensoort" id="plantensoort"> <label for="plantensoort">Soort van de plant</label><br>
<label for="plantensoort">Soort van de plant</label> <input type="text" name="plantensoort" id="plantensoort"><br>
<input type="radio" name="plant_geteelt" id="aanwezig" value="true"> <label for="aanwezig">Aanwezig in de kas</label><br>
<label for="aanwezig">Aanwezig</label> <select name="aanwezig_in_kas">
<option value="ja">Ja</option>
<input type="radio" name="plant_geteelt" id="afwezig" value="false"> <option value="nee">Nee</option>
<label for="afwezig">Afwezig</label> </select><br>
<input type="submit" value="Submit"> <label for="ontvangenMeldingen">Meldingen ontvangen</label><br>
</form> <select name="ontvangen_meldingen">
<option value="ja">Ja</option>
</div> <option value="nee">Nee</option>
<div id="overlay" onclick="closeOverlay"></div> </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>
<!-- White space --> <!-- White space -->
<section> <section>

123
src/py/templates/kas_informatie.html
View File

@@ -3,14 +3,19 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../static/css/style.css"> <meta name="description" content="Kas informatie / Planten" />
<script src="../src/js/main.js" defer></script> <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> <title>Informatie Kas</title>
</head> </head>
<body> <body>
<section class="mainContainer"> <section class="mainContainer">
<article> <article>
<img src="../static/images/logo.png" class="goodgarden-logo"> <a href="index.html">
<img src="../static/images/logo.png" class="goodgarden-logo">
</a>
</article> </article>
<section class="mainBorder informatie-kas-main-container"> <section class="mainBorder informatie-kas-main-container">
<article> <article>
@@ -42,7 +47,11 @@
<article class="grafiek-innerbox"> <article class="grafiek-innerbox">
<h2>Zonlicht</h2> <h2>Zonlicht</h2>
<canvas <canvas
id="myCanvas" class="canvas-informatie-kas" width="275" height="275"></canvas> id="myCanvas"
class="canvas-informatie-kas"
width="275"
height="275"
></canvas>
</article> </article>
</article> </article>
</section> </section>
@@ -51,54 +60,54 @@
<article class="grid-2-child"> <article class="grid-2-child">
<section class="parent-table"> <section class="parent-table">
<table class="kas-table-1"> <table class="kas-table-1">
<tr> <tr>
<td>Aantal geplant:</td> <td>Aantal geplant:</td>
<td id="totale_planten">Loading...</td> <td id="totale_planten">Loading...</td>
</tr> </tr>
<tr> <tr>
<td>Succesvolle Oogst:</td> <td>Succesvolle Oogst:</td>
<td>2</td> <td>2</td>
</tr> </tr>
<tr> <tr>
<td>Gefaalde Oogst:</td> <td>Gefaalde Oogst:</td>
<td>2</td> <td>2</td>
</tr> </tr>
</table> </table>
<table class="kas-table-2"> <table class="kas-table-2">
<tr> <tr>
<td>Warmste Maand:</td> <td>Warmste Maand:</td>
<td>n.v.t.</td> <td>n.v.t.</td>
</tr> </tr>
<tr> <tr>
<td>koudste Maand:</td> <td>koudste Maand:</td>
<td>December</td> <td>December</td>
</tr> </tr>
<tr> <tr>
<td>Gemiddelde Bodemtemp.:</td> <td>Gemiddelde Bodemtemp.:</td>
<td id="bodem-temperatuur">2˚C</td> <td id="bodem-temperatuur">2˚C</td>
</tr> </tr>
<tr> <tr>
<td>Gemiddelde Uren Zonlicht:</td> <td>Gemiddelde Uren Zonlicht:</td>
<td id="battery_voltage">2u</td> <td id="battery_voltage">2u</td>
</tr> </tr>
</table> </table>
<table class="kas-table-3"> <table class="kas-table-3">
<tr> <tr>
<td>Laatste Irrigatie:</td> <td>Laatste Irrigatie:</td>
<td>2u</td> <td>2u</td>
</tr> </tr>
<tr> <tr>
<td>Aankomende Irrigatie:</td> <td>Aankomende Irrigatie:</td>
<td>2u</td> <td>2u</td>
</tr> </tr>
<tr> <tr>
<td>Laatste Bemesting</td> <td>Laatste Bemesting</td>
<td>2d</td> <td>2d</td>
</tr> </tr>
<tr> <tr>
<td>Aankomende Bemesting:</td> <td>Aankomende Bemesting:</td>
<td>2w</td> <td>2w</td>
</tr> </tr>
</table> </table>
</section> </section>
</article> </article>
@@ -106,14 +115,12 @@
</section> </section>
</section> </section>
<script> <script>
// JavaScript-code om gegevens op te halen van het PHP-bestand // fetch('get_data.php')
fetch('get_data.php') // .then(response => response.json())
.then(response => response.json()) // .then(data => {
.then(data => { // document.getElementById('totale_planten').innerHTML = data.totale_planten;
document.getElementById('totale_planten').innerHTML = data.totale_planten; // })
// Voeg andere velden toe op dezelfde manier // .catch(error => console.error('Error:', error));
})
.catch(error => console.error('Error:', error));
</script> </script>
</body> </body>
</html> </html>

118
src/py/templates/planteninfo.html Normal file
View File

@@ -0,0 +1,118 @@
<!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="Planteninfo / 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>
<a href="index.html">
<img src="../static/images/logo.png" class="goodgarden-logo">
</a>
</article>
<section class="mainBorder informatie-kas-main-container">
<article>
<h1>Informatie Kas</h1>
<section id="sectie-1">
<article class="parent-algemeen-overzicht">
<article class="algemeen-overzicht">
<table class="table-informatie-kas">
<tr class="tr-informatie-kas">
<td>Dagen tot Oogst</td>
<td>12</td>
</tr>
<tr class="tr-informatie-kas">
<td>Dagen in Kas</td>
<td>2</td>
</tr>
<tr class="tr-informatie-kas">
<td>Tevredenheid</td>
<td>80%</td>
</tr>
<tr class="tr-informatie-kas">
<td>Aandachtspunten</td>
<td>1</td>
</tr>
</table>
</article>
</article>
<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>
<article class="grid-column-2">
<article class="grid-2-child">
<section class="parent-table">
<table class="kas-table-1">
<tr>
<td>Aantal geplant:</td>
<td>2</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">
<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">
<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>
</body>
</html>