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

Alles werkend nu!!!

Browse Source
This commit is contained in:
Atilla
2024-03-26 12:15:25 +01:00
parent bc383b28ad
commit 59ffdbbc22
3 changed files with 289 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/py/script/plants.json
View File

@@ -22,5 +22,35 @@
"plant_naam": "Sla",
"plantensoort": "Groente",
"plant_geteelt": 1
},
{
"id": 52,
"plant_naam": "Wietplant",
"plantensoort": "Onkruid",
"plant_geteelt": 1
},
{
"id": 53,
"plant_naam": "Patat",
"plantensoort": "Aarde",
"plant_geteelt": 1
},
{
"id": 54,
"plant_naam": "asfasfas",
"plantensoort": "fasfasfsaf",
"plant_geteelt": 1
},
{
"id": 55,
"plant_naam": "sadfadsfdsf",
"plantensoort": "sdfdsafdsfdf",
"plant_geteelt": 1
},
{
"id": 56,
"plant_naam": "asdasd",
"plantensoort": "asdasdasdasdasd",
"plant_geteelt": 1
}
]

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

@@ -1,7 +1,7 @@
// const { ipcRenderer } = require("electron");
// const axios = require('axios');
// document.addEventListener('DOMContentLoaded', () =>
// {
// // document.addEventListener('DOMContentLoaded', () => {
// ipcRenderer.send('request-update-temp', ['some', 'arguments']);
// ipcRenderer.on('update-temp-result', (event, newTemperature) => {
@@ -12,45 +12,64 @@
// }
// });
// // 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
// }
// });
// function openModal()
// {
// // 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];
// // Toon de modal wanneer op de knop wordt geklikt
// button.onclick = function()
// {
// // 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";
// }
// // Sluit de modal wanneer op het 'sluiten' icoon wordt geklikt
// close.onclick = function()
// {
// // Close the modal when the 'close' icon is clicked
// close.onclick = function () {
// modal.style.display = "none";
// }
// // Sluit de modal wanneer buiten de modal wordt geklikt
// window.onclick = function(event)
// {
// if (event.target == modal)
// {
// // 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();
// /**
// * --- Functie om de grafiek te tekenen. Enigste belangrijke is de eerste 2 "const" arrays "data" & "xLabels".
// * --- Function to draw the chart. The important arrays are "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!!*/
// 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");
@@ -78,8 +97,7 @@
// ctx.beginPath();
// ctx.moveTo(padding, canvas.height - padding - (data[0] / 100) * graphHeight);
// for (let i = 1; i < data.length; i++)
// {
// 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);
@@ -91,10 +109,8 @@
// ctx.textAlign = "right"; // Align text to the right
// ctx.textBaseline = "middle"; // Center vertically
// for (let i = 0; i < yLabels.length; i++)
// {
// if (yLabels[i] !== "")
// {
// 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);
// }
@@ -102,20 +118,17 @@
// // Draw X labels
// ctx.textAlign = "center"; // Center horizontally for X labels
// for (let i = 0; i < xLabels.length; i++)
// {
// if (xLabels[i] !== "")
// {
// 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')
@@ -133,28 +146,49 @@
// 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;
// document.getElementById('zulu').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']);
// Function to open the modal
function openModal() {
const modal = document.getElementById("myModal");
const button = document.getElementById("modalButton");
const close = document.getElementsByClassName("close")[0];
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;
if (modal && button) { // Check if elements are found
// 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";
}
}
} else {
console.error("Modal elements not found");
}
}
document.addEventListener('DOMContentLoaded', () => {
// Call openModal when DOM content is loaded
openModal();
// Send a message to the main process to execute the Python script
ipcRenderer.send('run-python-script', ['some', 'arguments']);
@@ -178,42 +212,16 @@ const axios = require('axios');
// 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];
// Fetch battery data when the page loads
fetchBatteryData();
});
// 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() {
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");
@@ -241,7 +249,8 @@ const axios = require('axios');
ctx.beginPath();
ctx.moveTo(padding, canvas.height - padding - (data[0] / 100) * graphHeight);
for (let i = 1; i < data.length; i++) {
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);
@@ -253,8 +262,10 @@ const axios = require('axios');
ctx.textAlign = "right"; // Align text to the right
ctx.textBaseline = "middle"; // Center vertically
for (let i = 0; i < yLabels.length; i++) {
if (yLabels[i] !== "") {
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);
}
@@ -262,19 +273,18 @@ const axios = require('axios');
// Draw X labels
ctx.textAlign = "center"; // Center horizontally for X labels
for (let i = 0; i < xLabels.length; i++) {
if (xLabels[i] !== "") {
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() {
// Function to fetch battery data from Flask API
function fetchBatteryData() {
axios.get('http://127.0.0.1:5000')
.then(response => {
const batteryData = response.data;
@@ -283,18 +293,14 @@ const axios = require('axios');
.catch(error => {
console.error('Error fetching battery data:', error);
});
}
}
// Function to update HTML content with battery data
function updateBatteryData(batteryData) {
// 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;
document.getElementById('tevredenheid').innerText = batteryData.timestamp;
// Voeg andere eigenschappen toe zoals nodig
}
// Fetch battery data when the page loads
fetchBatteryData();
// });
}

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

@@ -31,10 +31,10 @@
</td>
</tr> -->
</table>
<div class="formulier">
<!-- <div class="formulier">
<div id="myModal" class="modal" style="display: none;">
<h1 id="plant-id">Plant Toevoegen</h1>
<form action="http://localhost:3000/submit-form" method="post">
<form action="http://localhost:3000/submit-form" method="post"onsubmit="return addplant()">
<label for="plantNaam">Naam van de plant</label><br>
<input type="text" name="plant_naam" id="plantNaam"><br>
@@ -43,14 +43,14 @@
<label for="aanwezig">Aanwezig in de kas</label><br>
<select name="aanwezig_in_kas">
<option value="ja">Ja</option>
<option value="nee">Nee</option>
<option value="true">Ja</option>
<option value="false">Nee</option>
</select><br>
<label for="ontvangenMeldingen">Meldingen ontvangen</label><br>
<select name="ontvangen_meldingen">
<option value="ja">Ja</option>
<option value="nee">Nee</option>
<option value="true">Ja</option>
<option value="false">Nee</option>
</select><br>
<section class="knop-container">
@@ -60,7 +60,28 @@
</form>
</div>
</div>
<div id="overlay" onclick="closeOverlay()"></div>
<div id="overlay" onclick="closeOverlay()"></div> -->
<div id="myModal" class="modal">
<span class="close">&times;</span>
<form action="http://localhost:3000/submit-form" method="post" onsubmit="return addplant()">
<input type="text" name="plant_naam" id="plantNaam">
<label for="plantNaam">Naam van de plant</label>
<input type="text" name="plantensoort" id="plantensoort">
<label for="plantensoort">Soort van de plant</label>
<input type="radio" name="plant_geteelt" id="aanwezig" value="true">
<label for="aanwezig">Aanwezig</label>
<input type="radio" name="plant_geteelt" id="afwezig" value="false">
<label for="afwezig">Afwezig</label>
<input type="submit" value="Submit">
</form>
</div>
<div id="overlay" onclick="closeOverlay"></div>
</section>
<!-- White space -->
<section>