hoi
This commit is contained in:
Renzo
6
app.js
6
app.js
@@ -3,7 +3,7 @@ const express = require('express'); /* TYPE IN TERMINAL: "npm install express"
|
|||||||
const bodyParser = require('body-parser'); /* TYPE IN TERMINAL: "npm install body-parser" */
|
const bodyParser = require('body-parser'); /* TYPE IN TERMINAL: "npm install body-parser" */
|
||||||
const { PythonShell } = require('python-shell'); /* TYPE IN TERMINAL: "npm install python-shell" */
|
const { PythonShell } = require('python-shell'); /* TYPE IN TERMINAL: "npm install python-shell" */
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
const urlElectron = path.join(__dirname, "src/main.html");
|
const urlElectron = path.join(__dirname, "src/index.html");
|
||||||
|
|
||||||
// Maak een Express-app
|
// Maak een Express-app
|
||||||
const server = express();
|
const server = express();
|
||||||
@@ -40,8 +40,8 @@ server.listen(PORT, () => {
|
|||||||
// Maak de Electron applicatie aan met bijbehorende waardes
|
// Maak de Electron applicatie aan met bijbehorende waardes
|
||||||
function createWindow() {
|
function createWindow() {
|
||||||
const mainWindow = new BrowserWindow({
|
const mainWindow = new BrowserWindow({
|
||||||
width: 800,
|
width: 1280,
|
||||||
height: 600,
|
height: 800,
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
nodeIntegration: true,
|
nodeIntegration: true,
|
||||||
contextIsolation: false
|
contextIsolation: false
|
||||||
|
|||||||
@@ -1,3 +1,93 @@
|
|||||||
|
/*default colors*/
|
||||||
|
@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");
|
||||||
|
/* The Main container and border*/
|
||||||
|
body {
|
||||||
|
background-image: url("../images/achtergrond.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
font-family: "Afacad", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainContainer {
|
||||||
|
margin: 2rem;
|
||||||
|
height: 37rem;
|
||||||
|
background-color: rgba(255, 255, 255, 0.95);
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
.mainContainer .mainBorder {
|
||||||
|
padding: 1rem 0;
|
||||||
|
height: 35rem;
|
||||||
|
border: solid 5px rgb(171, 211, 174);
|
||||||
|
border-radius: 40px;
|
||||||
|
}
|
||||||
|
.mainContainer .mainBorder .content {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 3fr 1fr 3fr;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.mainContainer .mainBorder .content .kant-links {
|
||||||
|
grid-column: 1;
|
||||||
|
}
|
||||||
|
.mainContainer .mainBorder .content .kant-links #planten {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
.mainContainer .mainBorder .content .kant-links #planten td article #toevoegen {
|
||||||
|
height: 5rem;
|
||||||
|
width: 5rem;
|
||||||
|
}
|
||||||
|
.mainContainer .mainBorder .content .kant-links #planten td article h2 {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
.mainContainer .mainBorder .content .kant-links #planten td article:hover {
|
||||||
|
background-color: lightgray;
|
||||||
|
}
|
||||||
|
.mainContainer .mainBorder .content .kant-rechts {
|
||||||
|
grid-column: 3;
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
|
.mainContainer .mainBorder .content .kant-rechts #metingen {
|
||||||
|
border: solid 3px rgb(171, 211, 174);
|
||||||
|
border-radius: 40px;
|
||||||
|
}
|
||||||
|
.mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
padding: 0.5rem;
|
||||||
|
padding-bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes table {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Divider */
|
||||||
|
.divider {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
border: solid 1px rgb(171, 211, 174);
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* The Modal (background) */
|
/* The Modal (background) */
|
||||||
.modal {
|
.modal {
|
||||||
display: none;
|
display: none;
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,2BAAA;AAEA;EAEI,aAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;EACA,iBAAA;EACA,aAAA;EACA,wCAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,mBAAA;ACDJ;ADGI;EAEI,WAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;ACFR;ADIQ;EAGI,YAAA;EACA,qBAAA;EACA,eAAA;ACJZ","file":"style.css"}
|
{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,iBAAA;AAKQ,mFAAA;AACA,2GAAA;AAMR,iCAAA;AACA;EAEI,kDAAA;EACA,4BAAA;EACA,sBAAA;EACA,iCARQ;ACDZ;;ADYA;EAEI,YAAA;EACA,aAAA;EACA,2CAAA;EACA,mBAAA;EACA,aAAA;ACVJ;ADYI;EAEI,eAAA;EACA,aAAA;EACA,oCAAA;EACA,mBAAA;ACXR;ADaQ;EAEI,aAAA;EACA,kCAAA;EACA,YAAA;ACZZ;ADgBgB;EAEI,cAAA;ACfpB;ADiBoB;EAEI,WAAA;EACA,yBAAA;AChBxB;ADoB4B;EAEI,YAAA;EACA,YAAA;EACA,eAAA;EACA,cAAA;EACA,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,oCAAA;EACA,mBAAA;EACA,wCAAA;ACnBhC;ADqBgC;EAEI,YAAA;EACA,WAAA;ACpBpC;ADuBgC;EAEI,WAAA;ACtBpC;ADyBgC;EAEI,2BAAA;ACxBpC;ADgCgB;EAEI,cAAA;EACA,kBAAA;AC/BpB;ADiCoB;EAGI,oCAAA;EACA,mBAAA;ACjCxB;ADmCwB;EAEA,aAAA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;EACA,WAAA;AClCxB;ADoC4B;EAEI,aAAA;EACA,6BAAA;ACnChC;;AD8CA,YAAA;AACA;EACI,aAAA;EACA,uBAAA;EACA,oCAAA;EACA,kBAAA;EACA,UAAA;EACA,cAAA;AC3CJ;;AD8CA,2BAAA;AAEA;EAEI,aAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;EACA,iBAAA;EACA,aAAA;EACA,wCAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,mBAAA;AC7CJ;AD+CI;EAEI,WAAA;EACA,YAAA;EACA,eAAA;EACA,iBAAA;AC9CR;ADgDQ;EAGI,YAAA;EACA,qBAAA;EACA,eAAA;AChDZ","file":"style.css"}
|
||||||
@@ -1,3 +1,137 @@
|
|||||||
|
/*default colors*/
|
||||||
|
|
||||||
|
$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;
|
||||||
|
|
||||||
|
/* The Main container and border*/
|
||||||
|
body
|
||||||
|
{
|
||||||
|
background-image: url("../images/achtergrond.png");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
font-family: $font-text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainContainer
|
||||||
|
{
|
||||||
|
margin: 2rem;
|
||||||
|
height: 37rem;
|
||||||
|
background-color: rgb(255, 255, 255, 95%);
|
||||||
|
border-radius: 40px;
|
||||||
|
padding: 2rem;
|
||||||
|
|
||||||
|
.mainBorder
|
||||||
|
{
|
||||||
|
padding: 1rem 0;
|
||||||
|
height: 35rem;
|
||||||
|
border: solid 5px $primary-color;
|
||||||
|
border-radius: 40px;
|
||||||
|
|
||||||
|
.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: .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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-rechts
|
||||||
|
{
|
||||||
|
grid-column: 3;
|
||||||
|
margin-right: 2rem;
|
||||||
|
|
||||||
|
#metingen
|
||||||
|
{
|
||||||
|
|
||||||
|
border: solid 3px $primary-color;
|
||||||
|
border-radius: 40px;
|
||||||
|
|
||||||
|
#main-waardes
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
padding: .5rem;
|
||||||
|
padding-bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
table
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
// width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Divider */
|
||||||
|
.divider {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
border: solid 1px $primary-color;
|
||||||
|
border-radius: 5px;
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* The Modal (background) */
|
/* The Modal (background) */
|
||||||
|
|
||||||
.modal
|
.modal
|
||||||
|
|||||||
BIN
src/images/Icon awesome-apple-alt.png
Normal file
BIN
src/images/Icon awesome-apple-alt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/images/Toevoegen.png
Normal file
BIN
src/images/Toevoegen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
BIN
src/images/achtergrond.png
Normal file
BIN
src/images/achtergrond.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 MiB |
117
src/index.html
Normal file
117
src/index.html
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
<!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="./css/style.css">
|
||||||
|
<script src="../script/main.js"></script>
|
||||||
|
<script src="../script/main.py" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section class="mainContainer">
|
||||||
|
<section class="mainBorder">
|
||||||
|
<section class="content">
|
||||||
|
<section class="kant-links">
|
||||||
|
<table id="planten">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<article class="article-1">
|
||||||
|
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||||
|
<h2>Tomaat</h2>
|
||||||
|
</article>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<article>
|
||||||
|
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||||
|
<h2>Tomaat</h2>
|
||||||
|
</article>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Second Row -->
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<article>
|
||||||
|
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||||
|
<h2>Tomaat</h2>
|
||||||
|
</article>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<article>
|
||||||
|
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||||
|
<h2>Tomaat</h2>
|
||||||
|
</article>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Third Row -->
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<article>
|
||||||
|
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||||
|
<h2>Tomaat</h2>
|
||||||
|
</article>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<article>
|
||||||
|
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||||
|
<h2>Tomaat</h2>
|
||||||
|
</article>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<!-- Fourth Row -->
|
||||||
|
<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">
|
||||||
|
<!-- Modal content -->
|
||||||
|
<span class="close">×</span>
|
||||||
|
<form action="http://localhost:3000/submit-form" method="post">
|
||||||
|
<!-- Form content -->
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- White space -->
|
||||||
|
<section>
|
||||||
|
<p>a</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>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</article>
|
||||||
|
<div class="divider">
|
||||||
|
</div>
|
||||||
|
<article>
|
||||||
|
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -1,47 +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="./css/style.css">
|
|
||||||
<script src="../script/main.js"></script>
|
|
||||||
<script src="../script/main.py" defer></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<section id="linkerkant">
|
|
||||||
<article>
|
|
||||||
<img src="" alt="">
|
|
||||||
<h2>Tomaat</h2>
|
|
||||||
<button></button>
|
|
||||||
</article>
|
|
||||||
<article>
|
|
||||||
<img src="" alt="">
|
|
||||||
<button id="modalButton" onclick="openModal()">TOEVOEGEN!!!</button>
|
|
||||||
</article>
|
|
||||||
</section>
|
|
||||||
<section>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
<div id="myModal" class="modal">
|
|
||||||
<span class="close">×</span>
|
|
||||||
<form action="http://localhost:3000/submit-form" method="post">
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user