plantenClass OOP V1.0

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;

src/css/style.css.map

@@ -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"}

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;
+                                    @extend .containers-articles;
-                                    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
                                     {
@@ -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;
+                            }
+                        }
                     }
                 }
             }

src/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Homepage</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>
@@ -64,6 +64,7 @@
                   <tr class="tr-informatie-kas">
                     <td>Dagen tot Oogst</td>
                     <td>12</td>
+                    <a href="sensoren.html">sensoren</a>
                   </tr>
                   <tr class="tr-informatie-kas">
                     <td>Dagen in Kas</td>

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
             }
         ];
 

src/sensoren.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sensoren</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">
+                    <section class="border-sensor">
+                        <article id="sensor-1">
+                            <table>
+                                <tr>
+                                    <td>1</td>
+                                    <td>2</td>
+                                </tr>
+                                <tr>
+                                    <td>3</td>
+                                    <td>4</td>
+                                </tr>
+                            </table>
+                        </article>
+                    </section>
+                    <section>
+                        <article id="grafiek-1">
+
+                        </article>
+                    </section>
+                </section>
+                <section>
+
+                </section>
+                <section class="kant-rechts">
+                    <article id="sensor-2">
+
+                    </article>
+                    <article id="grafiek-2">
+
+                    </article>
+                </section>
+            </section>
+        </section>
+    </section>
+</body>
+</html>