From f36dae570b2ea08a886803696ca7259a48947a33 Mon Sep 17 00:00:00 2001 From: Renzo <6025850@mborijnland.nl> Date: Wed, 20 Mar 2024 09:35:18 +0100 Subject: [PATCH] plantenClass OOP V1.0 --- src/css/style.css | 41 +++++++++++++++++++----------- src/css/style.css.map | 2 +- src/css/style.scss | 55 +++++++++++++++++++++++++++++++---------- src/index.html | 3 ++- src/js/planten.class.js | 4 +-- src/sensoren.html | 54 ++++++++++++++++++++++++++++++++++++++++ 6 files changed, 128 insertions(+), 31 deletions(-) create mode 100644 src/sensoren.html diff --git a/src/css/style.css b/src/css/style.css index 9695cf5..158a644 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -9,6 +9,22 @@ p, td { font-family: "Afacad", sans-serif; } +.containers-articles, body .mainContainer .mainBorder .content .kant-rechts #sensor-2, body .mainContainer .mainBorder .content .kant-links #sensor-1, 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); + background-color: white; +} + body { background-image: url("../images/achtergrond.png"); background-repeat: no-repeat; @@ -117,20 +133,6 @@ 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; @@ -141,6 +143,12 @@ body .mainContainer .mainBorder .content .kant-links #planten td article h2 { body .mainContainer .mainBorder .content .kant-links #planten td article:hover { background-color: lightgray; } +body .mainContainer .mainBorder .content .kant-links #sensor-1 { + border: none; + border-radius: 40px 0px 0px 40px; + width: 30vw; + margin-top: 10vh; +} body .mainContainer .mainBorder .content .kant-rechts { grid-column: 3; margin-right: 2rem; @@ -161,6 +169,11 @@ body .mainContainer .mainBorder .content .kant-rechts #metingen #main-waardes ta justify-content: space-between; width: 100%; } +body .mainContainer .mainBorder .content .kant-rechts #sensor-2 { + border-radius: 0px 40px 40px 0px; + width: 30vw; + margin-top: 10vh; +} body .mainContainer .mainBorder .grid-column-2 { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); border-radius: 40px; diff --git a/src/css/style.css.map b/src/css/style.css.map index b11fddc..17d7627 100644 --- a/src/css/style.css.map +++ b/src/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/src/css/style.scss b/src/css/style.scss index f4e5e76..c5f1d70 100644 --- a/src/css/style.scss +++ b/src/css/style.scss @@ -45,6 +45,23 @@ p, td font-family: $font-text; } +.containers-articles +{ + height: 7rem; + width: 10rem; + padding: .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); + background-color: white; +} + body { background-image: url("../images/achtergrond.png"); @@ -162,7 +179,7 @@ body canvas { - // Zorgt ervoor dat de grafiek precies in eht midden komt + // Zorgt ervoor dat de grafiek precies in het midden komt position: absolute; top: 50%; left: 50%; @@ -193,18 +210,7 @@ body { 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); + @extend .containers-articles; #toevoegen { @@ -226,6 +232,18 @@ body } } } + + #sensor + { + &-1 + { + @extend .containers-articles; + border: none; + border-radius: 40px 0px 0px 40px; + width: 30vw; + margin-top: 10vh; + } + } } &-rechts @@ -255,6 +273,17 @@ body } } } + + #sensor + { + &-2 + { + @extend .containers-articles; + border-radius: 0px 40px 40px 0px; + width: 30vw; + margin-top: 10vh; + } + } } } } diff --git a/src/index.html b/src/index.html index 2c4e0d5..e9a5d20 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - Document + Homepage @@ -64,6 +64,7 @@ Dagen tot Oogst 12 + sensoren Dagen in Kas diff --git a/src/js/planten.class.js b/src/js/planten.class.js index b671e08..efe074c 100644 --- a/src/js/planten.class.js +++ b/src/js/planten.class.js @@ -60,7 +60,7 @@ class PlantGrid { "id": 7, "plantNaam": "Groene", "plantensoort": "Groente", - "plantGeteelt": 0 + "plantGeteelt": 1 }, { "id": 8, @@ -72,7 +72,7 @@ class PlantGrid { "id": 9, "plantNaam": "yippie", "plantensoort": "Groente", - "plantGeteelt": 0 + "plantGeteelt": 1 } ]; diff --git a/src/sensoren.html b/src/sensoren.html new file mode 100644 index 0000000..442839c --- /dev/null +++ b/src/sensoren.html @@ -0,0 +1,54 @@ + + + + + + Sensoren + + + + + +
+
+ +
+
+
+
+
+
+ + + + + + + + + +
12
34
+
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+ +
+
+
+
+
+ + \ No newline at end of file