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

planten class V1.1

Browse Source
This commit is contained in:
Renzo
2024-03-20 13:26:00 +01:00
parent d9504f5e7c 35717dad89
commit 4e7fae5943
60 changed files with 6458 additions and 3480 deletions
Download Patch File Download Diff File Expand all files Collapse all files

406
src/py/static/css/style.css Normal file
View File

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

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

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

534
src/py/static/css/style.scss Normal file
View File

@@ -0,0 +1,534 @@
$primary-color: rgb(171, 211, 174);
$secondary-color: rgb(143, 188, 143);
@import url("https://fonts.googleapis.com/css2?family=Akaya+Kanadaka&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap");
$font-titels: "Akaya Kanadaka", system-ui;
$font-text: "Afacad", sans-serif;
@mixin flexbox-center
{
display: flex;
justify-content: center;
}
@mixin groene-border
{
border: solid 2px $primary-color;
}
@mixin box-shadow
{
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
@mixin border-radius
{
border-radius: 40px;
}
@mixin inner-border-radius
{
border-radius: 35px;
}
h1,
h2,
h3,
h4,
h5
{
font-family: $font-titels;
margin: 0;
}
p,
td
{
font-family: $font-text;
color: black;
}
a
{
text-decoration: none;
}
body
{
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/achtergrond.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
font-family: $font-text;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
.mainContainer
{
width: 85vw;
height: 38rem;
background-color: rgb(255, 255, 255, 85%);
border-radius: 40px;
padding: 2rem;
.goodgarden-logo
{
position: absolute;
width: 10vw;
left: 50%;
top: 4.1rem;
transform: translateX(-50%);
}
.informatie-kas-main-container
{
display: grid;
grid-template-columns: 5fr 7fr;
}
.mainBorder
{
padding: 1.25rem 1.5rem;
padding: 1rem 0;
height: 35rem;
border: solid 5px $primary-color;
border-radius: 40px;
.pagina-titel
{
font-size: 2rem;
margin-left: 1.5rem;
}
#sectie-1
{
display: flex;
flex-direction: column;
gap: 1rem;
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;
}

BIN
src/py/static/images/Icon_awesome-apple-alt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/py/static/images/Toevoegen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

BIN
src/py/static/images/achtergrond.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 MiB

BIN
src/py/static/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

300
src/py/static/js/main.js Normal file
View File

@@ -0,0 +1,300 @@
// const { ipcRenderer } = require("electron");
// document.addEventListener('DOMContentLoaded', () =>
// {
// ipcRenderer.send('request-update-temp', ['some', 'arguments']);
// ipcRenderer.on('update-temp-result', (event, newTemperature) => {
// if (newTemperature === 'error') {
// console.error('Er is een fout opgetreden bij het ophalen van de nieuwe temperatuur');
// } else {
// document.getElementById('bodem-temperatuur').textContent = newTemperature;
// }
// });
// });
// 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";
// }
// }
// }
// /**
// * --- Functie om de grafiek te tekenen. Enigste belangrijke is de eerste 2 "const" arrays "data" & "xLabels".
// */
// function drawLineChart()
// {
// /*Dit is de data die getoond wordt als "punt" op de grafiek. 20 = y20 / x20, 50 = y50 / x50 enzovoort... De array "data" & "xLabels" moeten beide evenveel array items hebben!!*/
// const data = [20, 50, 60, 45, 50, 100, 70, 60, 65, 0, 85, 0];
// const xLabels = ["", "", "", "", "", 6, "", "", "", "", "", 12];
// 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);
// const padding = 35; // Increased padding for Y labels
// const graphWidth = canvas.width - padding * 2;
// const graphHeight = canvas.height - padding * 2;
// ctx.beginPath();
// ctx.moveTo(padding, padding);
// ctx.lineTo(padding, canvas.height - padding);
// ctx.lineTo(canvas.width - padding, canvas.height - padding);
// ctx.stroke();
// // Set the color of the line
// ctx.strokeStyle = "rgb(143, 188, 143)";
// const xIncrement = graphWidth / (xLabels.length - 1);
// const yIncrement = graphHeight / (yLabels.length - 1);
// // Plot the data
// ctx.beginPath();
// ctx.moveTo(padding, canvas.height - padding - (data[0] / 100) * graphHeight);
// for (let i = 1; i < data.length; i++)
// {
// const xPos = padding + i * xIncrement;
// const yPos = canvas.height - padding - (data[i] / 100) * graphHeight;
// ctx.lineTo(xPos, yPos);
// }
// ctx.stroke();
// // Draw Y labels
// ctx.fillStyle = "black";
// ctx.textAlign = "right"; // Align text to the right
// ctx.textBaseline = "middle"; // Center vertically
// for (let i = 0; i < yLabels.length; i++)
// {
// if (yLabels[i] !== "")
// {
// const yPos = canvas.height - padding - i * yIncrement;
// ctx.fillText(yLabels[i], padding - 10, yPos);
// }
// }
// // Draw X labels
// ctx.textAlign = "center"; // Center horizontally for X labels
// for (let i = 0; i < xLabels.length; i++)
// {
// if (xLabels[i] !== "")
// {
// const xPos = padding + i * xIncrement;
// ctx.fillText(xLabels[i], xPos, canvas.height - padding + 20);
// }
// }
// }
// drawLineChart();
// /////////////////////////////////
// // Function to fetch battery data from Flask API
// function fetchBatteryData() {
// axios.get('http://127.0.0.1:5000')
// .then(response => {
// const batteryData = response.data;
// updateBatteryData(batteryData);
// })
// .catch(error => {
// console.error('Error fetching battery data:', error);
// });
// }
// // Function to update HTML content with battery data
// function updateBatteryData(batteryData) {
// document.getElementById('deviceNumber').innerText = batteryData.device;
// document.getElementById('voltage').innerText = batteryData.value;
// document.getElementById('time').innerText = batteryData.gateway_receive_time;
// document.getElementById('tevredenheid').innerText = batteryData.timestamp;
// // Voeg andere eigenschappen toe zoals nodig
// }
// // Fetch battery data when the page loads
// fetchBatteryData();
/////////////////////////////////
const { ipcRenderer } = require("electron");
const axios = require('axios');
// document.addEventListener('DOMContentLoaded', () => {
ipcRenderer.send('request-update-temp', ['some', 'arguments']);
ipcRenderer.on('update-temp-result', (event, newTemperature) => {
if (newTemperature === 'error') {
console.error('Er is een fout opgetreden bij het ophalen van de nieuwe temperatuur');
} else {
document.getElementById('bodem-temperatuur').textContent = newTemperature;
}
});
// Send a message to the main process to execute the Python script
ipcRenderer.send('run-python-script', ['some', 'arguments']);
ipcRenderer.on('python-script-response', (event, pythonData) => {
if (pythonData === 'error') {
console.error('An error occurred while retrieving data from Python');
} else {
// Update HTML elements with data received from Python
document.getElementById('bodem-temperatuur').textContent = pythonData.bodemTemperatuur; // Adjust the property based on your actual Python response
}
});
// Listen for updates to HTML data from the main process
ipcRenderer.on('update-html-data', (event, data) => {
// Update the HTML with the received data
document.getElementById('batteryVoltage').innerText = data.batteryVoltage;
// Add similar lines for other data fields
});
// Trigger an event to request data update
ipcRenderer.send('request-update-data');
// Function to open the modal
function openModal() {
const modal = document.getElementById("myModal");
const button = document.getElementById("modalButton");
const close = document.getElementsByClassName("close")[0];
// Check if elements are found before attaching events
if (modal && button && close) {
// Show the modal when the button is clicked
button.onclick = function () {
modal.style.display = "block";
}
// Close the modal when the 'close' icon is clicked
close.onclick = function () {
modal.style.display = "none";
}
// Close the modal when clicked outside the modal
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
}
// Call the function to open the modal
openModal();
/**
* --- Function to draw the chart. The important arrays are "data" & "xLabels".
*/
function drawLineChart() {
const data = [20, 50, 60, 45, 50, 100, 70, 60, 65, 0, 85, 0];
const xLabels = ["", "", "", "", "", 6, "", "", "", "", "", 12];
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);
const padding = 35; // Increased padding for Y labels
const graphWidth = canvas.width - padding * 2;
const graphHeight = canvas.height - padding * 2;
ctx.beginPath();
ctx.moveTo(padding, padding);
ctx.lineTo(padding, canvas.height - padding);
ctx.lineTo(canvas.width - padding, canvas.height - padding);
ctx.stroke();
// Set the color of the line
ctx.strokeStyle = "rgb(143, 188, 143)";
const xIncrement = graphWidth / (xLabels.length - 1);
const yIncrement = graphHeight / (yLabels.length - 1);
// Plot the data
ctx.beginPath();
ctx.moveTo(padding, canvas.height - padding - (data[0] / 100) * graphHeight);
for (let i = 1; i < data.length; i++) {
const xPos = padding + i * xIncrement;
const yPos = canvas.height - padding - (data[i] / 100) * graphHeight;
ctx.lineTo(xPos, yPos);
}
ctx.stroke();
// Draw Y labels
ctx.fillStyle = "black";
ctx.textAlign = "right"; // Align text to the right
ctx.textBaseline = "middle"; // Center vertically
for (let i = 0; i < yLabels.length; i++) {
if (yLabels[i] !== "") {
const yPos = canvas.height - padding - i * yIncrement;
ctx.fillText(yLabels[i], padding - 10, yPos);
}
}
// Draw X labels
ctx.textAlign = "center"; // Center horizontally for X labels
for (let i = 0; i < xLabels.length; i++) {
if (xLabels[i] !== "") {
const xPos = padding + i * xIncrement;
ctx.fillText(xLabels[i], xPos, canvas.height - padding + 20);
}
}
}
// Call the function to draw the line chart
drawLineChart();
// Function to fetch battery data from Flask API
function fetchBatteryData() {
axios.get('http://127.0.0.1:5000')
.then(response => {
const batteryData = response.data;
updateBatteryData(batteryData);
})
.catch(error => {
console.error('Error fetching battery data:', error);
});
}
// Function to update HTML content with battery data
function updateBatteryData(batteryData) {
document.getElementById('deviceNumber').innerText = batteryData.device;
document.getElementById('voltage').innerText = batteryData.value;
document.getElementById('time').innerText = batteryData.gateway_receive_time;
document.getElementById('zulu').innerText = batteryData.timestamp;
// Voeg andere eigenschappen toe zoals nodig
}
// Fetch battery data when the page loads
fetchBatteryData();
// });

104
src/py/static/js/planten.class.js Normal file
View File

@@ -0,0 +1,104 @@
class Plant {
constructor(dataObject) {
this.id = dataObject.id;
this.plantNaam = dataObject.plant_naam; // Note the property name change
this.plantensoort = dataObject.plantensoort;
this.plantGeteelt = dataObject.plant_geteelt;
}
}
class PlantGrid {
constructor() {
this.grid = [];
this.cols = 2; // Number of columns
this.rows = 4; // Number of rows (including the row for the "Add" button)
// Initialize the grid with null values
for (let i = 0; i < this.rows; i++) {
this.grid[i] = new Array(this.cols).fill(null);
}
// Load JSON data from the server
this.loadData();
}
loadData() {
fetch('../script/plants.json') // Assuming your JSON data is stored in 'plants.json'
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
const filteredData = data.filter(plantObject => plantObject.plant_geteelt === 1);
// Populate the grid with plant objects
filteredData.slice(0, 8).forEach((plantObject, index) => {
const plant = new Plant(plantObject);
const col = index % this.cols;
const row = Math.floor(index / this.cols);
this.grid[row][col] = plant;
});
// Display the grid in the HTML table with id "planten"
this.displayGrid();
})
.catch(error => console.error('Error loading data:', error));
}
displayGrid() {
const plantenTable = document.getElementById("planten");
let itemCount = 0; // Counter for the number of items in the grid
this.grid.forEach((row, rowIndex) => {
const tr = document.createElement("tr");
row.forEach((plant, colIndex) => {
const td = document.createElement("td");
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(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
const article = document.createElement("article");
const img = article.appendChild(document.createElement("img"));
img.src = "../static/images/Toevoegen.png";
img.id = "toevoegen";
img.alt = "Add";
article.id = "modalButton";
article.onclick = openModal;
td.appendChild(article);
itemCount++;
}
}
tr.appendChild(td);
});
plantenTable.appendChild(tr);
});
}
}
document.addEventListener("DOMContentLoaded", () => {
const plantGrid = new PlantGrid();
});