Even een tussen update!
This commit is contained in:
Atilla
2
app.js
2
app.js
@@ -23,7 +23,7 @@ server.post('/submit-form', (req, res) =>
|
||||
};
|
||||
|
||||
// Execute Python script with plant name as an argument
|
||||
PythonShell.run('./script/db_connect_form.py', options, (err, results) =>
|
||||
PythonShell.run('src/py/script/db_connect_form.py', options, (err, results) =>
|
||||
{
|
||||
if (err)
|
||||
{
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"}
|
||||
@@ -1,50 +0,0 @@
|
||||
<?php
|
||||
// Database-verbinding instellen (vervang deze gegevens door je eigen databasegegevens)
|
||||
$servername = "localhost";
|
||||
$username = "root";
|
||||
$password = "";
|
||||
$dbname = "goodgarden";
|
||||
|
||||
// Verbinding maken met de database
|
||||
$conn = new mysqli($servername, $username, $password, $dbname);
|
||||
|
||||
// Controleren op een geslaagde verbinding
|
||||
if ($conn->connect_error) {
|
||||
die("Connection failed: " . $conn->connect_error);
|
||||
}
|
||||
|
||||
// Query om gegevens op te halen uit de tabel devices
|
||||
$query_devices = "SELECT * FROM devices";
|
||||
$result_devices = $conn->query($query_devices);
|
||||
|
||||
// Query om gegevens op te halen uit de tabel battery_voltage_events
|
||||
$query_battery_voltage = "SELECT * FROM battery_voltage_events";
|
||||
$result_battery_voltage = $conn->query($query_battery_voltage);
|
||||
|
||||
// Query om gegevens op te halen uit de tabel fetch
|
||||
$query_fetch = "SELECT * FROM fetch";
|
||||
$result_fetch = $conn->query($query_fetch);
|
||||
|
||||
// Array om resultaten op te slaan
|
||||
$data = array();
|
||||
|
||||
// Controleren of er resultaten zijn van de tabel devices
|
||||
if ($result_devices->num_rows > 0) {
|
||||
$data['devices'] = $result_devices->fetch_all(MYSQLI_ASSOC);
|
||||
}
|
||||
|
||||
// Controleren of er resultaten zijn van de tabel battery_voltage_events
|
||||
if ($result_battery_voltage->num_rows > 0) {
|
||||
$data['battery_voltage_events'] = $result_battery_voltage->fetch_all(MYSQLI_ASSOC);
|
||||
}
|
||||
|
||||
// Controleren of er resultaten zijn van de tabel fetch
|
||||
if ($result_fetch->num_rows > 0) {
|
||||
$data['fetch'] = $result_fetch->fetch_all(MYSQLI_ASSOC);
|
||||
}
|
||||
|
||||
// Gegevens als JSON-uitvoer
|
||||
echo json_encode($data);
|
||||
|
||||
// Verbinding sluiten
|
||||
$conn->close();
|
||||
@@ -1,97 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="../src/css/style.css">
|
||||
<script src="../src/js/main.js" defer></script>
|
||||
<script src="../src/js/planten.class.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section class="mainContainer">
|
||||
<article>
|
||||
<img src="../src/images/logo.png" class="goodgarden-logo">
|
||||
</article>
|
||||
<section class="mainBorder">
|
||||
<section class="content">
|
||||
<section class="kant-links">
|
||||
<table id="planten">
|
||||
<!-- <tr>
|
||||
<td>
|
||||
<article>
|
||||
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</td>
|
||||
<td>
|
||||
<article id="modalButton" onclick="openModal()">
|
||||
<img id="toevoegen"src="images/Toevoegen.png" alt="">
|
||||
</article>
|
||||
</td>
|
||||
</tr> -->
|
||||
</table>
|
||||
<div id="myModal" class="modal">
|
||||
<span class="close">×</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>
|
||||
</section>
|
||||
<section class="kant-rechts">
|
||||
<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>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
113
src/js/main.js
113
src/js/main.js
@@ -1,113 +0,0 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,119 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="../src/css/style.css" />
|
||||
<script src="../src/js/main.js" defer></script>
|
||||
<title>Informatie Kas</title>
|
||||
</head>
|
||||
<body>
|
||||
<section class="mainContainer">
|
||||
<article>
|
||||
<img src="../src/images/logo.png" class="goodgarden-logo">
|
||||
</article>
|
||||
<section class="mainBorder informatie-kas-main-container">
|
||||
<article>
|
||||
<h1 class="pagina-titel">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 id="totale_planten">Loading...</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>
|
||||
<script>
|
||||
// JavaScript-code om gegevens op te halen van het PHP-bestand
|
||||
fetch('get_data.php')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('totale_planten').innerHTML = data.totale_planten;
|
||||
// Voeg andere velden toe op dezelfde manier
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -1,96 +1,115 @@
|
||||
const { ipcRenderer } = require("electron");
|
||||
const axios = require('axios');
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Send a message to the main process to execute the Python script
|
||||
ipcRenderer.send('run-python-script', ['some', 'arguments']);
|
||||
document.addEventListener('DOMContentLoaded', () =>
|
||||
{
|
||||
ipcRenderer.send('request-update-temp', ['some', 'arguments']);
|
||||
|
||||
ipcRenderer.on('python-script-response', (event, pythonData) => {
|
||||
if (pythonData === 'error') {
|
||||
console.error('An error occurred while retrieving data from Python');
|
||||
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 {
|
||||
// Update HTML elements with data received from Python
|
||||
document.getElementById('bodem-temperatuur').textContent = pythonData.bodemTemperatuur; // Adjust the property based on your actual Python response
|
||||
document.getElementById('bodem-temperatuur').textContent = newTemperature;
|
||||
}
|
||||
});
|
||||
|
||||
// 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() {
|
||||
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 () {
|
||||
// Toon de modal wanneer op de knop wordt geklikt
|
||||
button.onclick = function()
|
||||
{
|
||||
modal.style.display = "block";
|
||||
}
|
||||
|
||||
// Close the modal when the 'close' icon is clicked
|
||||
close.onclick = function () {
|
||||
// Sluit de modal wanneer op het 'sluiten' icoon wordt geklikt
|
||||
close.onclick = function()
|
||||
{
|
||||
modal.style.display = "none";
|
||||
}
|
||||
|
||||
// Close the modal when clicked outside the modal
|
||||
window.onclick = function (event) {
|
||||
if (event.target == modal) {
|
||||
// Sluit de modal wanneer buiten de modal wordt geklikt
|
||||
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".
|
||||
/**
|
||||
* --- Functie om de grafiek te tekenen. Enigste belangrijke is de eerste 2 "const" arrays "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");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// ... (rest of the function remains unchanged)
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
});
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
// 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();
|
||||
});
|
||||
drawLineChart();
|
||||
|
||||
@@ -108,7 +108,7 @@ class PlantGrid {
|
||||
// Handle regular plant items
|
||||
const article = document.createElement("article");
|
||||
const img = article.appendChild(document.createElement("img"));
|
||||
img.src = "images/Icon awesome-apple-alt.png";
|
||||
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;
|
||||
@@ -119,7 +119,7 @@ class PlantGrid {
|
||||
// Handle the "Add" button
|
||||
const article = document.createElement("article");
|
||||
const img = article.appendChild(document.createElement("img"));
|
||||
img.src = "images/Toevoegen.png";
|
||||
img.src = "../static/images/Toevoegen.png";
|
||||
img.id = "toevoegen";
|
||||
img.alt = "Add";
|
||||
article.id = "modalButton";
|
||||
@@ -3,112 +3,91 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
|
||||
<title>Document</title>
|
||||
<title>Dashboard</title>
|
||||
<link rel="stylesheet" href="../static/css/style.css">
|
||||
<script src="../static/js/main.js" defer></script>
|
||||
<!-- <script src="../script/main.py"></script> -->
|
||||
<script src="../static/js/planten.class.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<section class="mainContainer">
|
||||
<article>
|
||||
<img src="../static/images/logo.png" class="goodgarden-logo">
|
||||
</article>
|
||||
<section class="mainBorder">
|
||||
<section class="content">
|
||||
<section class="kant-links">
|
||||
<table id="planten">
|
||||
<tr>
|
||||
<td>
|
||||
<a href="../templates/kas_informatie.html">
|
||||
<article class="article-1">
|
||||
<img src="../static/images/Icon awesome-apple-alt.png"alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</a>
|
||||
</td>
|
||||
<!-- <tr>
|
||||
<td>
|
||||
<article>
|
||||
<img src="../static/images/Icon awesome-apple-alt.png" alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Second Row -->
|
||||
<tr>
|
||||
<td>
|
||||
<article>
|
||||
<img src="../static/images/Icon awesome-apple-alt.png" alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</td>
|
||||
<td>
|
||||
<article>
|
||||
<img src="../static/images/Icon awesome-apple-alt.png" alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Third Row -->
|
||||
<tr>
|
||||
<td>
|
||||
<article>
|
||||
<img src="../static/images/Icon awesome-apple-alt.png" alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</td>
|
||||
<td>
|
||||
<article>
|
||||
<img src="../static/images/Icon awesome-apple-alt.png" alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Fourth Row -->
|
||||
<tr>
|
||||
<td>
|
||||
<article>
|
||||
<img src="../static/images/Icon awesome-apple-alt.png" alt="">
|
||||
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||
<h2>Tomaat</h2>
|
||||
</article>
|
||||
</td>
|
||||
<td>
|
||||
<article id="modalButton" onclick="openModal()">
|
||||
<img id="toevoegen"src="../static/images/toevoegen.png" alt="">
|
||||
<img id="toevoegen" src="../static/images/Toevoegen.png" alt="">
|
||||
</article>
|
||||
</td>
|
||||
</tr>
|
||||
</tr> -->
|
||||
</table>
|
||||
<div id="myModal" class="modal">
|
||||
<!-- Modal content -->
|
||||
<span class="close">×</span>
|
||||
<form action="http://localhost:3000/submit-form" method="post">
|
||||
<!-- Form content -->
|
||||
<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>
|
||||
<p></p>
|
||||
</section>
|
||||
<section class="kant-rechts">
|
||||
<section id="metingen">
|
||||
<article id="main-waardes">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<p>Waardes</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>Huidig</p>
|
||||
</td>
|
||||
<td>
|
||||
<p>24u gemiddelde</p>
|
||||
</td>
|
||||
<section id="sectie-1">
|
||||
<article class="parent-algemeen-overzicht">
|
||||
<article class="algemeen-overzicht">
|
||||
<a href="kas_informatie.html">
|
||||
<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>
|
||||
<a/>
|
||||
</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>
|
||||
<div class="divider">
|
||||
</div>
|
||||
<article>
|
||||
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
|
||||
<title>Informatie Kas</title>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="../static/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<script src="../src/js/main.js" defer></script>
|
||||
<title>Informatie Kas</title>
|
||||
</head>
|
||||
<body>
|
||||
<section class="mainContainer">
|
||||
<article>
|
||||
<img src="../static/images/logo.png" class="goodgarden-logo">
|
||||
@@ -20,20 +20,20 @@
|
||||
<article class="algemeen-overzicht">
|
||||
<table class="table-informatie-kas">
|
||||
<tr class="tr-informatie-kas">
|
||||
<td>Device</td>
|
||||
<td id="deviceNumber"></td> <!-- Update this ID -->
|
||||
<td>Dagen tot Oogst</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
<tr class="tr-informatie-kas">
|
||||
<td>Batterij Voltage</td>
|
||||
<td id="voltage"></td> <!-- Update this ID -->
|
||||
<td>Dagen in Kas</td>
|
||||
<td>2</td>
|
||||
</tr>
|
||||
<tr class="tr-informatie-kas">
|
||||
<td>Tijden</td>
|
||||
<td id="time"></td> <!-- Update this ID -->
|
||||
<td>Tevredenheid</td>
|
||||
<td>80%</td>
|
||||
</tr>
|
||||
<tr class="tr-informatie-kas">
|
||||
<td>Zulu</td>
|
||||
<td id="tevredenheid"></td> <!-- Update this ID -->
|
||||
<td>Aandachtspunten</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
</table>
|
||||
</article>
|
||||
@@ -41,7 +41,8 @@
|
||||
<article class="grafiek">
|
||||
<article class="grafiek-innerbox">
|
||||
<h2>Zonlicht</h2>
|
||||
<canvas id="myCanvas" class="canvas-informatie-kas" width="275" height="275"></canvas>
|
||||
<canvas
|
||||
id="myCanvas" class="canvas-informatie-kas" width="275" height="275"></canvas>
|
||||
</article>
|
||||
</article>
|
||||
</section>
|
||||
@@ -52,7 +53,7 @@
|
||||
<table class="kas-table-1">
|
||||
<tr>
|
||||
<td>Aantal geplant:</td>
|
||||
<td>2</td>
|
||||
<td id="totale_planten">Loading...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Succesvolle Oogst:</td>
|
||||
@@ -69,7 +70,7 @@
|
||||
<td>n.v.t.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Koudste Maand:</td>
|
||||
<td>koudste Maand:</td>
|
||||
<td>December</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -78,7 +79,7 @@
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gemiddelde Uren Zonlicht:</td>
|
||||
<td>2u</td>
|
||||
<td id="battery_voltage">2u</td>
|
||||
</tr>
|
||||
</table>
|
||||
<table class="kas-table-3">
|
||||
@@ -104,7 +105,15 @@
|
||||
</article>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<script src="../static/js/main.js" defer></script>
|
||||
<script>
|
||||
// JavaScript-code om gegevens op te halen van het PHP-bestand
|
||||
fetch('get_data.php')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('totale_planten').innerHTML = data.totale_planten;
|
||||
// Voeg andere velden toe op dezelfde manier
|
||||
})
|
||||
.catch(error => console.error('Error:', error));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user