diff --git a/app.js b/app.js index cee16e7..b4d2392 100644 --- a/app.js +++ b/app.js @@ -1,70 +1,66 @@ -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 { 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"); -// Create an Express app const server = express(); server.use(bodyParser.urlencoded({ extended: true })); // 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_geteelt = req.body.plant_geteelt == 'true' ? 'true' : 'false'; + const plant_geteelt = req.body.plant_geteelt == "true" ? "true" : "false"; - let options = - { - mode: 'text', - args: [plant_naam, plantensoort, plant_geteelt] + let options = { + mode: "text", + args: [plant_naam, plantensoort, plant_geteelt], }; // Execute Python script with plant name as an argument - PythonShell.run('src/py/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'); + PythonShell.run( + "src/py/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 the server const PORT = 3000; -server.listen(PORT, () => -{ +server.listen(PORT, () => { console.log(`Server is listening on port ${PORT}`); }); let mainWindow; // Create the Electron application window -function createWindow() -{ - mainWindow = new BrowserWindow( - { +function createWindow() { + mainWindow = new BrowserWindow({ width: 1280, height: 800, frame: false, - webPreferences: - { + icon: path.join(__dirname, "src/py/static/images/logo.png"), + webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: 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 setupIpcMainListeners(); @@ -74,44 +70,40 @@ function createWindow() app.whenReady().then(createWindow); // Close the app when all windows are closed, except on macOS -app.on('window-all-closed', () => -{ - if (process.platform !== 'darwin') - { +app.on("window-all-closed", () => { + if (process.platform !== "darwin") { app.quit(); } }); // Re-create a window in the app when the dock icon is clicked and there are no other windows open. -app.on('activate', () => -{ - if (BrowserWindow.getAllWindows().length === 0) - { +app.on("activate", () => { + if (BrowserWindow.getAllWindows().length === 0) { createWindow(); } }); -function setupIpcMainListeners() -{ - ipcMain.on('run-python-script', (event, args) => - { - let options = - { - mode: 'text', +function setupIpcMainListeners() { + ipcMain.on("run-python-script", (event, args) => { + let options = { + mode: "text", args: args, }; // The actual script path and event replies should be tailored to your application's needs }); - ipcMain.on('request-update-data', (event, args) => - { - const databaseData = { timestamp: "2022-01-01", gateway_receive_time: "2022-01-01", device: "Device1", value: 50 }; - event.reply('update-data-result', { databaseData }); + ipcMain.on("request-update-data", (event, args) => { + const databaseData = { + timestamp: "2022-01-01", + gateway_receive_time: "2022-01-01", + device: "Device1", + value: 50, + }; + event.reply("update-data-result", { databaseData }); }); - ipcMain.on('update-html-data', (event, data) => - { - mainWindow.webContents.send('update-html-data', data); + ipcMain.on("update-html-data", (event, data) => { + mainWindow.webContents.send("update-html-data", data); }); -} \ No newline at end of file +} diff --git a/src/py/script/calculate.py b/src/py/script/calculate.py deleted file mode 100644 index 9175a51..0000000 --- a/src/py/script/calculate.py +++ /dev/null @@ -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) diff --git a/src/py/static/css/style.css b/src/py/static/css/style.css index a418aa3..0668a0e 100644 --- a/src/py/static/css/style.css +++ b/src/py/static/css/style.css @@ -1,16 +1,26 @@ @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 { +h1, +h2, +h3, +h4, +h5 { font-family: "Akaya Kanadaka", system-ui; margin: 0; } -p, td { +p, +td { font-family: "Afacad", sans-serif; + color: black; +} + +a { + text-decoration: none; } 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-size: cover; background-position: center; @@ -24,7 +34,7 @@ body { body .mainContainer { width: 85vw; height: 38rem; - background-color: rgba(255, 255, 255, 0.95); + background-color: rgba(255, 255, 255, 0.85); border-radius: 40px; padding: 2rem; } @@ -65,6 +75,7 @@ body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht { border-radius: 40px; padding: 1rem; margin-top: 1rem; + background-color: white; } body .mainContainer .mainBorder #sectie-1 .parent-algemeen-overzicht .algemeen-overzicht { border: solid 2px rgb(171, 211, 174); @@ -85,6 +96,7 @@ body .mainContainer .mainBorder #sectie-1 .grafiek { border-radius: 40px; padding: 1rem; position: relative; + background-color: white; } body .mainContainer .mainBorder #sectie-1 .grafiek .grafiek-innerbox { border: solid 2px rgb(171, 211, 174); @@ -143,7 +155,6 @@ 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); @@ -166,6 +177,7 @@ body .mainContainer .mainBorder .grid-column-2 { border-radius: 40px; padding: 1rem; margin: 3.25rem 1rem 1.25rem 1rem; + background-color: white; } body .mainContainer .mainBorder .grid-column-2 .grid-2-child { border: solid 2px rgb(171, 211, 174); @@ -206,7 +218,6 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas- top: -20px; } -/* Divider */ .divider { display: flex; justify-content: center; @@ -216,7 +227,6 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas- margin: 0 auto; } -/* The Modal (background) */ .modal { display: none; 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); width: 30vw; height: auto; - border: solid 2px black; + 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 { + +.modal .close:hover, +.modal .close:active { color: black; text-decoration: none; cursor: pointer; +} + +#myModal select, +#myModal input { + width: calc(100% - 20px); + padding: 10px; + margin-bottom: 15px; + border: 2px solid #abd3ae; + border-radius: 5px; + box-sizing: border-box; +} + +#myModal .knop { + display: flex; + justify-content: space-between; +} + +#myModal button { + width: 48%; + padding: 10px; + box-sizing: border-box; + height: 40px; +} + +#myModal .knop-container { + display: flex; + justify-content: space-between; + margin-top: 20px; +} + +#myModal .knop-container input, +#myModal .knop-container button { + flex: 1; + margin: 0 5px; + padding: 10px; + box-sizing: border-box; +} + +#myModal input[type=text], +#myModal select { + border: 2px solid #abd3ae; + padding: 10px; + border-radius: 17px; + box-sizing: border-box; +} + +#myModal input[type=submit], +#myModal button { + color: #fff; + border: none; + border-radius: 15px; + cursor: pointer; +} + +#myModal input[type=submit] { + background-color: white; +} + +#myModal button { + background-color: white; + color: black; +} + +.toevoeging { + background: linear-gradient(45deg, #abd3ae, #2ecc71); +} + +.annulatie-knop { + background: linear-gradient(45deg, #ffcc00, #ff6600); +} + +#myModal button:hover { + background: linear-gradient(45deg, #abd3ae, #fff); + color: #000; +} + +.modal .close { + color: #aaa; + float: right; + font-size: 1.75rem; + font-weight: bold; +} + +.modal .close:hover, +.modal .close:active { + color: black; + text-decoration: none; + cursor: pointer; +} + +.switch-container { + display: flex; + align-items: end; +} + +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 30px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + border-radius: 34px; + transition: 0.4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + border-radius: 50%; + transition: 0.4s; +} + +input:checked + .slider { + background-color: #2ecc71; +} + +input:checked + .slider:before { + transform: translateX(26px); +} + +.rechterkant { + display: flex; + justify-content: end; +} + +.plant-container, +#modalButton { + background-color: white; }/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/py/static/css/style.css.map b/src/py/static/css/style.css.map index 8802fe7..90630c9 100644 --- a/src/py/static/css/style.css.map +++ b/src/py/static/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ 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/py/static/css/style.scss b/src/py/static/css/style.scss index adc4ce4..05fda39 100644 --- a/src/py/static/css/style.scss +++ b/src/py/static/css/style.scss @@ -1,413 +1,534 @@ -$primary-color: rgb(171, 211, 174); +$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'); +@import url("https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap"); $font-titels: "Akaya Kanadaka", system-ui; $font-text: "Afacad", sans-serif; -@mixin flexbox-center +@mixin flexbox-center { - display: flex; - justify-content: center; + display: flex; + 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; -} + padding: 2rem; -@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 + .goodgarden-logo { - width: 85vw; - height: 38rem; - background-color: rgb(255, 255, 255, 95%); - border-radius: 40px; - padding: 2rem; - - .goodgarden-logo - { - position: absolute; - width: 10vw; - left: 50%; - top: 4.1rem; - transform: translateX(-50%); - } - - .informatie-kas-main-container - { - display: grid; - grid-template-columns: 5fr 7fr; - } - - .mainBorder - { - padding: 1.25rem 1.5rem; - padding: 1rem 0; - height: 35rem; - border: solid 5px $primary-color; - border-radius: 40px; - - .pagina-titel - { - font-size: 2rem; - margin-left: 1.5rem; - } - - #sectie-1 - { - display: flex; - flex-direction: column; - gap: 1rem; - 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; - } + position: absolute; + width: 10vw; + left: 50%; + top: 4.1rem; + transform: translateX(-50%); } -} \ No newline at end of file + + .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; + } diff --git a/src/py/static/js/main.js b/src/py/static/js/main.js index 24631b3..bc89974 100644 --- a/src/py/static/js/main.js +++ b/src/py/static/js/main.js @@ -113,3 +113,7 @@ function drawLineChart() } drawLineChart(); + + +///////////////////////////////// + diff --git a/src/py/static/js/planten.class.js b/src/py/static/js/planten.class.js index c54657f..b40d275 100644 --- a/src/py/static/js/planten.class.js +++ b/src/py/static/js/planten.class.js @@ -87,36 +87,48 @@ class PlantGrid { this.grid[row][col] = plant; }); - // Display the grid in the HTML table with id "planten" this.displayGrid(); } - displayGrid() { + displayGrid() + { const plantenTable = document.getElementById("planten"); 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"); - row.forEach((plant, colIndex) => { + row.forEach((plant, colIndex) => + { const td = document.createElement("td"); - if (itemCount < 8) { - if (plant) { + if (itemCount < 8) + { + if (plant) + { // 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"); + article.classList.add("plant-container"); + link.appendChild(article); // Voeg het artikel toe aan de link + const img = article.appendChild(document.createElement("img")); img.src = "../static/images/icon_awesome-apple-alt.png"; const h2 = article.appendChild(document.createElement("h2")); h2.classList.add("plant-naam"); h2.textContent = plant.plantNaam; - td.appendChild(article); + td.appendChild(link); // Voeg de link toe aan de td 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 img = article.appendChild(document.createElement("img")); img.src = "../static/images/Toevoegen.png"; @@ -124,7 +136,7 @@ class PlantGrid { img.alt = "Add"; article.id = "modalButton"; article.onclick = openModal; - + td.appendChild(article); itemCount++; } @@ -136,6 +148,7 @@ class PlantGrid { plantenTable.appendChild(tr); }); } + } document.addEventListener("DOMContentLoaded", () => { diff --git a/src/py/templates/index.html b/src/py/templates/index.html index 123f355..e64b3b3 100644 --- a/src/py/templates/index.html +++ b/src/py/templates/index.html @@ -3,6 +3,9 @@ + + + Dashboard @@ -11,8 +14,10 @@
+ -
+ +
@@ -24,34 +29,38 @@

Tomaat

- -
- -
- --> - -
+
+ +
+
diff --git a/src/py/templates/kas_informatie.html b/src/py/templates/kas_informatie.html index 3d340b8..62c1487 100644 --- a/src/py/templates/kas_informatie.html +++ b/src/py/templates/kas_informatie.html @@ -3,14 +3,19 @@ - - + + + + + Informatie Kas
@@ -42,7 +47,11 @@

Zonlicht

+ id="myCanvas" + class="canvas-informatie-kas" + width="275" + height="275" + >
@@ -51,54 +60,54 @@
- - - - - - - - - - - - + + + + + + + + + + + +
Aantal geplant:Loading...
Succesvolle Oogst:2
Gefaalde Oogst:2
Aantal geplant:Loading...
Succesvolle Oogst:2
Gefaalde Oogst:2
- - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + +
Warmste Maand:n.v.t.
koudste Maand:December
Gemiddelde Bodemtemp.:2˚C
Gemiddelde Uren Zonlicht:2u
Warmste Maand:n.v.t.
koudste Maand:December
Gemiddelde Bodemtemp.:2˚C
Gemiddelde Uren Zonlicht:2u
- - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + +
Laatste Irrigatie:2u
Aankomende Irrigatie:2u
Laatste Bemesting2d
Aankomende Bemesting:2w
Laatste Irrigatie:2u
Aankomende Irrigatie:2u
Laatste Bemesting2d
Aankomende Bemesting:2w
@@ -106,14 +115,12 @@
- - \ No newline at end of file + + diff --git a/src/py/templates/planteninfo.html b/src/py/templates/planteninfo.html new file mode 100644 index 0000000..5b6ab93 --- /dev/null +++ b/src/py/templates/planteninfo.html @@ -0,0 +1,118 @@ + + + + + + + + + + + Informatie Kas + + +
+ +
+
+

Informatie Kas

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

Zonlicht

+ +
+
+
+
+
+
+
+ + + + + + + + + + + + + +
Aantal geplant:2
Succesvolle Oogst:2
Gefaalde Oogst:2
+ + + + + + + + + + + + + + + + + +
Warmste Maand:n.v.t.
koudste Maand:December
Gemiddelde Bodemtemp.:2˚C
Gemiddelde Uren Zonlicht:2u
+ + + + + + + + + + + + + + + + + +
Laatste Irrigatie:2u
Aankomende Irrigatie:2u
Laatste Bemesting2d
Aankomende Bemesting:2w
+
+
+
+
+
+ +