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

errors gefixed | modal | form | dynamische paginas

Browse Source
This commit is contained in:
Atilla
2024-04-07 19:18:53 +02:00
parent b8ab58bb53
commit c6143effc6
24 changed files with 795 additions and 1936 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,11 +59,12 @@ body .mainContainer .mainBorder {
body .mainContainer .mainBorder .pagina-titel {
font-size: 2rem;
margin-left: 1.5rem;
margin-bottom: 1rem;
}
body .mainContainer .mainBorder #sectie-1 {
display: flex;
flex-direction: column;
gap: 1rem;
gap: 0.75rem;
padding: 0 2.5rem 0 1rem;
position: relative;
}
@@ -74,7 +75,6 @@ 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 {
@@ -152,6 +152,7 @@ body .mainContainer .mainBorder .content .kant-links #planten td article h2 {
}
body .mainContainer .mainBorder .content .kant-links #planten td article:hover {
background-color: lightgray;
cursor: pointer;
}
body .mainContainer .mainBorder .content .kant-rechts {
grid-column: 3;
@@ -243,11 +244,16 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
border-radius: 10px;
}
.modal #plant-id {
font-size: 1.5rem;
}
.modal .close {
color: #aaa;
float: right;
font-size: 1.75rem;
font-size: 2rem;
font-weight: bold;
margin-top: -35px;
}
.modal .close:hover,
@@ -310,7 +316,7 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
}
#myModal input[type=submit] {
background-color: white;
background: linear-gradient(45deg, #abd3ae, #6ebf7d);
}
#myModal button {
@@ -326,25 +332,6 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
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;
@@ -356,14 +343,12 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
width: 60px;
height: 30px;
}
.switch input {
.switch .switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
.switch .slider {
position: absolute;
cursor: pointer;
top: 0;
@@ -374,8 +359,7 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
border-radius: 34px;
transition: 0.4s;
}
.slider:before {
.switch .slider:before {
position: absolute;
content: "";
height: 26px;
@@ -386,21 +370,77 @@ body .mainContainer .mainBorder .grid-column-2 .grid-2-child .parent-table .kas-
border-radius: 50%;
transition: 0.4s;
}
input:checked + .slider {
.switch input:checked + .slider {
background-color: #2ecc71;
}
input:checked + .slider:before {
.switch input:checked + .slider:before {
transform: translateX(26px);
}
.rechterkant {
.switch .rechterkant {
display: flex;
justify-content: end;
}
.plant-container,
#modalButton {
.switch .plant-container,
.switch #modalButton {
background-color: white;
}
.switch .switch-container {
position: absolute;
}
.pagina-container {
position: relative;
align-items: end;
}
.close-button:hover {
background-color: rgb(171, 211, 174); /* Aangepaste hover kleur */
color: white; /* Tekstkleur wit op hover voor betere zichtbaarheid */
}
.container {
position: relative;
align-items: end;
}
.close-button {
position: absolute;
top: -90px;
right: -35px;
transform: translate(100%, 0%);
width: 50px;
height: 50px;
background-color: white;
color: rgb(171, 211, 174);
border-radius: 50%; /* Aangepast voor perfecte cirkel */
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 50px;
border: solid rgb(171, 211, 174) 2px;
font-weight: bold;
}
.back-button {
position: absolute;
top: -90px;
right: -25px;
width: 50px;
height: 50px;
background-color: white;
color: rgb(171, 211, 174);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 35px;
border: solid rgb(171, 211, 174) 2px;
font-weight: bold;
}
.back-button:hover {
background-color: rgb(171, 211, 174);
color: white;
}/*# 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"}

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

@@ -104,13 +104,14 @@ body
{
font-size: 2rem;
margin-left: 1.5rem;
margin-bottom: 1rem;
}
#sectie-1
{
display: flex;
flex-direction: column;
gap: 1rem;
gap: 0.75rem;
padding: 0 2.5rem 0 1rem;
position: relative;
@@ -124,7 +125,7 @@ body
@include box-shadow;
@include border-radius;
padding: 1rem;
margin-top: 1rem;
// margin-top: 1rem;
background-color: white;
.algemeen-overzicht
@@ -232,6 +233,7 @@ body
&:hover
{
background-color: lightgray;
cursor: pointer;
}
}
}
@@ -371,11 +373,18 @@ body
border: solid 2px #abd3ae;
border-radius: 10px;
}
.modal #plant-id
{
font-size: 1.5rem;
}
.modal .close {
color: #aaa;
float: right;
font-size: 1.75rem;
font-size: 2rem;
font-weight: bold;
margin-top: -35px;
}
.modal .close:hover,
.modal .close:active {
@@ -437,7 +446,7 @@ body
}
#myModal input[type="submit"] {
background-color: white;
background: linear-gradient(45deg, #abd3ae, #6ebf7d);
}
#myModal button {
@@ -453,24 +462,6 @@ body
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;
@@ -482,7 +473,7 @@ body
display: inline-block;
width: 60px;
height: 30px;
}
.switch input {
opacity: 0;
@@ -532,3 +523,73 @@ input:checked + .slider:before {
{
background-color: white;
}
.switch-container {
position: absolute;
}
}
.pagina-container {
position: relative;
align-items: end;
}
.close-button:hover {
background-color: $primary-color; /* Aangepaste hover kleur */
color: white; /* Tekstkleur wit op hover voor betere zichtbaarheid */
}
.container {
position: relative;
align-items: end;
}
.close-button
{
position: absolute;
top: -90px;
right: -35px;
transform: translate(100%, 0%);
width: 50px;
height: 50px;
background-color: white;
color: $primary-color;
border-radius: 50%; /* Aangepast voor perfecte cirkel */
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 50px;
border: solid $primary-color 2px;
font-weight: bold;
}
.back-button {
position: absolute;
top: -90px;
right: -25px;
width: 50px;
height: 50px;
background-color: white;
color: $primary-color;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 35px;
border: solid $primary-color 2px;
font-weight: bold;
}
.back-button:hover {
background-color: $primary-color;
color: white
}
// .modal-header
// {
// width: 100%;
// display: flex;
// flex-direction: row;
// }

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

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 107 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

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

@@ -40,36 +40,41 @@ function openModal()
}
}
}
else
{
console.error("Modaal elementen niet gevonden");
}
// else
// {
// console.error("Modaal elementen niet gevonden");
// }
}
document.addEventListener('DOMContentLoaded', () =>
{
// document.addEventListener('DOMContentLoaded', () => {
// Call openModal when DOM content is loaded
openModal();
// Roep andere functies hier aan zoals vereist, bijvoorbeeld:
// fetchWeatherDataAndDrawChart();
// Stuur een bericht naar het hoofdproces om het Python-script uit te voeren.
// Send a message to the main process to execute the Python script
ipcRenderer.send('run-python-script', ['some', 'arguments']);
// Luister naar updates van HTML-data vanuit het hoofdproces.
ipcRenderer.on('update-html-data', (event, data) =>
{
// Werk de HTML bij met de ontvangen data.
document.getElementById('batteryVoltage').innerText = data.batteryVoltage;
// Voeg vergelijkbare regels toe voor andere data velden.
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
}
});
// Trigger een event om data update aan te vragen.
// 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');
// Haal batterij data op wanneer de pagina laadt.
// Fetch battery data when the page loads
fetchBatteryData();
});
// });
/**
* Functie om een lijngrafiek te tekenen.
@@ -83,8 +88,9 @@ function drawLineChart(xLabels, data)
// Verkrijg het canvas element en de context voor tekenen.
const canvas = document.getElementById("myCanvas");
if (canvas)
{
const ctx = canvas.getContext("2d");
// Maak het canvas schoon voor nieuwe tekening.
ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -144,6 +150,11 @@ function drawLineChart(xLabels, data)
}
}
}
else
{
console.log("Canvas element does not exist on this page.");
}
}
/**
* Functie om weergegevens op te halen en een grafiek te tekenen.
@@ -168,17 +179,17 @@ function fetchWeatherDataAndDrawChart()
throw new Error('Network response was not ok.');
})
.then(data =>
{
// Verkrijg de weersvoorspelling voor de eerste 5 dagen.
const weatherForecast = data.weather_forecast.slice(0, 5);
// Converteer datums naar dagen van de week.
const dates = weatherForecast.map(day => convertDateToDayOfWeek(day.dag));
// Verkrijg de maximale temperaturen.
const temperatures = weatherForecast.map(day => day.max_temp);
// Teken de lijngrafiek met de verkregen data.
drawLineChart(dates, temperatures);
})
{
// Verkrijg de weersvoorspelling voor de eerste 5 dagen.
const weatherForecast = data.weather_forecast.slice(0, 5);
// Converteer datums naar afkortingen van dagen van de week.
const dates = weatherForecast.map(day => convertDateToDayOfWeek(day.dag));
// Verkrijg de maximale temperaturen.
const temperatures = weatherForecast.map(day => day.max_temp);
// Teken de lijngrafiek met de verkregen data.
drawLineChart(dates, temperatures);
})
.catch(error =>
{
// Log eventuele fouten tijdens het ophalen.
@@ -191,16 +202,32 @@ function fetchWeatherDataAndDrawChart()
* @param {string} dateString - De datum als string in het formaat "dd-mm".
* @returns {string} De afkorting van de dag van de week.
*/
function convertDateToDayOfWeek(dateString)
{
// Split de datum in dag en maand, en zet deze om naar nummers.
const [day, month] = dateString.split('-').map(Number);
// Maak een nieuwe datumobject (jaar is willekeurig omdat we alleen maand en dag nodig hebben).
const date = new Date(2024, month - 1, day);
// Verkrijg de dag van de week en zet deze om naar een afkorting.
const dayOfWeek = ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'][date.getDay()];
return dayOfWeek;
}
// function convertDateToDayOfWeek(dateString)
// {
// // Split de datum in dag en maand, en zet deze om naar nummers.
// const [day, month] = dateString.split('-').map(Number);
// // Maak een nieuwe datumobject (jaar is willekeurig omdat we alleen maand en dag nodig hebben).
// const date = new Date(2024, month - 1, day);
// // Verkrijg de dag van de week en zet deze om naar een afkorting.
// const dayOfWeek = ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'][date.getDay()];
// return dayOfWeek;
// }
// function convertDateToDayOfWeek(dateString)
// {
// // Create a date object from the dateString
// const [year, month, day] = dateString.split("-").map(Number);
// const date = new Date(year, month - 1, day);
// // Array of Dutch day names
// const dayNames = ["zo", "ma", "di", "wo", "do", "vr", "za"];
// // Return the day name according to the date object
// return dayNames[date.getDay()];
// }
/**
* Functie om batterijdata op te halen wanneer de pagina laadt.
@@ -222,6 +249,7 @@ function fetchBatteryData()
console.error('Error fetching battery data:', error);
});
}
/**
* Functie om batterijdata op de pagina bij te werken.
@@ -230,22 +258,31 @@ function fetchBatteryData()
*/
function updateBatteryData(batteryData)
{
// Update de data voor specifieke apparaten op basis van hun ID.
if (batteryData[1].device_id == 322)
// Check if on the specific page where the battery data should be updated
if (window.location.pathname.endsWith('index.html'))
{
document.getElementById('deviceNumber-322').innerHTML = batteryData[1].device_id;
document.getElementById('voltage-322').innerHTML = batteryData[1].label;
document.getElementById('time-322').innerHTML = new Date(batteryData[0].last_seen).toLocaleTimeString();
document.getElementById('tevredenheid-322').innerHTML = batteryData[1].last_battery_voltage;
}
if (batteryData[0].device_id == 256)
{
document.getElementById('deviceNumber-256').innerHTML = batteryData[0].device_id;
document.getElementById('voltage-256').innerHTML = batteryData[0].label;
document.getElementById('time-256').innerHTML = new Date(batteryData[0].last_seen).toLocaleTimeString();
document.getElementById('tevredenheid-256').innerHTML = batteryData[0].last_battery_voltage;
// Update de data voor specifieke apparaten op basis van hun ID.
const sensor322Element = document.getElementById('deviceNumber-322');
const sensor256Element = document.getElementById('deviceNumber-256');
if (batteryData[1].device_id === 322 && sensor322Element)
{
sensor322Element.innerHTML = batteryData[1].device_id;
document.getElementById('voltage-322').innerHTML = batteryData[1].label;
document.getElementById('time-322').innerHTML = new Date(batteryData[1].last_seen * 1000).toLocaleTimeString();
document.getElementById('tevredenheid-322').innerHTML = batteryData[1].last_battery_voltage.toFixed(2);
}
if (batteryData[0].device_id === 256 && sensor256Element)
{
sensor256Element.innerHTML = batteryData[0].device_id;
document.getElementById('voltage-256').innerHTML = batteryData[0].label;
document.getElementById('time-256').innerHTML = new Date(batteryData[0].last_seen * 1000).toLocaleTimeString();
document.getElementById('tevredenheid-256').innerHTML = batteryData[0].last_battery_voltage.toFixed(2);
}
}
}
// Definieer de API-sleutel en de stad waarvoor we de weergegevens willen ophalen.
const apiKey = "9516081f15727d063c9e2f08454a2fe9";
@@ -286,4 +323,84 @@ fetch(apiUrl)
{
// Log eventuele fouten tijdens het ophalen van de data.
console.error('There was a problem with the fetch operation:', error);
});
});
function dynamischSensor()
{
if (window.location.pathname.endsWith('index.html') || window.location.pathname === '/')
{
const sensor1 = document.getElementById("sensor-1");
const sensor2 = document.getElementById("sensor-2");
if (sensor1 && sensor2)
{
sensor1.href = `sensor.html?id=${322}`;
sensor2.href = `sensor.html?id=${256}`;
}
else
{
console.log("Elementen 'sensor-1' of 'sensor-2' bestaan niet in de DOM.");
}
}
}
// Aanroepen van de functie
dynamischSensor();
function closeApplication() {
if (confirm("Weet je zeker dat je de applicatie wilt sluiten?")) {
window.close();
}}
function fetchPlantenData()
{
// Gebruik Axios om een GET-verzoek te versturen naar de planten endpoint.
axios.get('http://127.0.0.1:5000/planten')
.then(response =>
{
// Verwerk de ontvangen data.
const plantenData = response.data;
updatePlantenData(plantenData);
})
.catch(error =>
{
// Log eventuele fouten tijdens het ophalen.
console.error('Error fetching planten data:', error);
});
}
function getPlantIdFromUrl()
{
// Maak een URL-object van de huidige locatie.
const currentUrl = new URL(window.location.href);
// Gebruik de URLSearchParams API om de query parameters te verwerken.
const searchParams = currentUrl.searchParams;
// Haal de 'id' query parameter op.
return searchParams.get('id'); // Dit zal een string retourneren of null als het niet bestaat.
}
function updatePlantenData(plantenData)
{
// Verkrijg de plant ID uit de URL.
const plantId = parseInt(getPlantIdFromUrl(), 10);
// Vind de plant met die ID in de ontvangen JSON-data.
const gevondenPlant = plantenData.find(plant => plant.id === plantId);
// Update de titel van de pagina met de naam van de gevonden plant.
if (gevondenPlant)
{
document.title = gevondenPlant.plant_naam;
document.querySelector(".plant-titel").textContent = gevondenPlant.plant_naam;
console.log("@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
}
else
{
console.log(`Geen plant gevonden met ID ${plantId}`);
}
}
// Roep fetchPlantenData aan ergens waar het logisch is binnen je applicatielogica, bijvoorbeeld na het laden van de pagina of na een gebruikersactie.
fetchPlantenData();

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

@@ -88,7 +88,8 @@ class PlantGrid {
// Handle the "Add" button
const article = document.createElement("article");
const img = article.appendChild(document.createElement("img"));
img.src = "../static/images/Toevoegen.png";
img.src = "../static/images/plus.png";
// img.src = "../images/plus.png";
img.id = "toevoegen";
img.alt = "Add";
article.id = "modalButton";
@@ -107,60 +108,7 @@ class PlantGrid {
}
displayGrid() {
const plantenTable = document.getElementById("planten"); // Verkrijg de tabel waarin het raster getoond moet worden.
let itemCount = 0; // Teller voor het aantal items in het raster.
this.grid.forEach((row, rowIndex) => {
const tr = document.createElement("tr"); // Maak een tabelrij element.
row.forEach((plant, colIndex) => {
const td = document.createElement("td"); // Maak een tabeldata element.
// Logica om plantitems of de "Toevoegen" knop te verwerken.
if (itemCount < 8) {
if (plant) {
// Verwerk normale plantitems.
// Creëer een link element naar de planteninformatiepagina met plant ID als query parameter.
// Voeg vervolgens een artikel, afbeelding en titel toe met de plantinformatie.
// Handle regular plant items
const link = document.createElement("a");
link.href = `planteninfo.html?id=${plant.id}`;
const article = document.createElement("article");
article.classList.add("plant-container");
link.appendChild(article);
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);
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); // Voeg de td toe aan de tr.
});
plantenTable.appendChild(tr); // Voeg de tr toe aan de tabel.
});
}
}
document.addEventListener("DOMContentLoaded", () => {