From 281d201b52051a7664e72005dd46e1bf6a8f297b Mon Sep 17 00:00:00 2001
From: Renzo <6025850@mborijnland.nl>
Date: Wed, 13 Mar 2024 09:23:41 +0100
Subject: [PATCH 1/3] plantenClass OOP bijna werkend

---
 src/index.html          |  51 +-----------
 src/js/planten.class.js | 178 ++++++++++++++++++++++++++++++----------
 2 files changed, 137 insertions(+), 92 deletions(-)

diff --git a/src/index.html b/src/index.html
index f8e7ad1..2c4e0d5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -17,54 +17,7 @@
             <section class="content">
                 <section class="kant-links">
                     <table id="planten">
-                        <tr>
-                            <td>
-                                <a href="../src/kas_informatie.html">
-                                <article class="article-1">
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
-                                    <h2 class="plant-naam"></h2>
-                                </article>
-                            </a>
-                            </td>
-                            <td>
-                                <article>
-                                    <img src="images/Icon awesome-apple-alt.png" alt="">
-                                    <h2 class="plant-naam">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>
+                        <!-- <tr>
                             <td>
                                 <article>
                                     <img src="images/Icon awesome-apple-alt.png" alt="">
@@ -76,7 +29,7 @@
                                     <img id="toevoegen"src="images/Toevoegen.png" alt="">
                                 </article>
                             </td>
-                        </tr>
+                        </tr> -->
                     </table>
                     <div id="myModal" class="modal">
                         <span class="close">&times;</span>
diff --git a/src/js/planten.class.js b/src/js/planten.class.js
index 3b7fbe3..3262ea5 100644
--- a/src/js/planten.class.js
+++ b/src/js/planten.class.js
@@ -1,49 +1,141 @@
-dataHardObject = [
-    {
-        "id": 1,
-        "plantNaam": "Tomt",
-        "plantensoort": "Groente",
-        "plantGeteelt": 1
-    },
-    {
-        "id": 2,
-        "plantNaam": "Komkommer",
-        "plantensoort": "Groente",
-        "plantGeteelt": 1
-    }
-]
-
 class Plant {
     constructor(dataObject) {
-      this.id = dataObject.id;
-      this.plantNaam = dataObject.plantNaam;
-      this.plantensoort = dataObject.plantensoort;
-      this.plantGeteelt = dataObject.plantGeteelt;
-    }
-
-    htmlData() {
-        if (this.plantGeteelt) 
-        {
-            const titel = document.querySelectorAll(".plant-naam");
-                // titel.forEach(element => {
-                // element.textContent = this.plantNaam;
-                for (let i = 0; i < titel.length; i++) {
-                    const element = titel[i];
-                    element.textContent = this.plantNaam;
-                }
-            // });
-        }
+        this.id = dataObject.id;
+        this.plantNaam = dataObject.plantNaam;
+        this.plantensoort = dataObject.plantensoort;
+        this.plantGeteelt = dataObject.plantGeteelt;
     }
 }
 
-// document.addEventListener('DOMContentLoaded', (event) => {
-//     const tomaatPlant = new Plant(dataHardObject[0]);
-//     tomaatPlant.htmlData();
-// });
+class PlantGrid {
+    constructor() {
+        this.grid = [];
+        this.cols = 2; // Number of columns
+        this.rows = 4; // Number of rows (including the row for the "Add" button)
 
-document.addEventListener("DOMContentLoaded", (event) => {
-    dataHardObject.forEach(plantObject => {
-        const plant = new Plant(plantObject);
-        plant.htmlData();
-    });
-})
\ No newline at end of file
+        // Initialize the grid with null values
+        for (let i = 0; i < this.rows; i++) {
+            this.grid[i] = new Array(this.cols).fill(null);
+        }
+
+        // Sample data
+        const dataHardObject = [
+            {
+                "id": 1,
+                "plantNaam": "Tomt",
+                "plantensoort": "Groente",
+                "plantGeteelt": 1
+            },
+            {
+                "id": 2,
+                "plantNaam": "Komkommer",
+                "plantensoort": "Groente",
+                "plantGeteelt": 1
+            },
+            {
+                "id": 3,
+                "plantNaam": "Appel",
+                "plantensoort": "Groente",
+                "plantGeteelt": 1
+            },
+            {
+                "id": 4,
+                "plantNaam": "KwamKwammer",
+                "plantensoort": "Groente",
+                "plantGeteelt": 1
+            },
+            {
+                "id": 5,
+                "plantNaam": ":p",
+                "plantensoort": "Groente",
+                "plantGeteelt": 1
+            },
+            {
+                "id": 6,
+                "plantNaam": ":3",
+                "plantensoort": "Groente",
+                "plantGeteelt": 1
+            },
+            {
+                "id": 7,
+                "plantNaam": "Groene",
+                "plantensoort": "Groente",
+                "plantGeteelt": 1
+            },
+            {
+                "id": 8,
+                "plantNaam": "test",
+                "plantensoort": "Groente",
+                "plantGeteelt": 0
+            },
+            {
+                "id": 9,
+                "plantNaam": "yippie",
+                "plantensoort": "Groente",
+                "plantGeteelt": 0
+            }
+        ];
+
+        const filteredData = dataHardObject.filter(plantObject => plantObject.plantGeteelt === 1);
+
+        // Populate the grid with plant objects
+        filteredData.forEach((plantObject, index) => {
+            const plant = new Plant(plantObject);
+                const col = index % this.cols;
+                const row = Math.floor(index / this.cols);
+                this.grid[row][col] = plant;
+        });
+
+        // Display the grid in the HTML table with id "planten"
+        this.displayGrid();
+    }
+
+    displayGrid() {
+        const plantenTable = document.getElementById("planten");
+
+        let itemCount = 0; // Counter for the number of items in the grid
+
+        this.grid.forEach((row, rowIndex) => {
+            const tr = document.createElement("tr");
+
+            row.forEach((plant, colIndex) => {
+                const td = document.createElement("td");
+
+                if (itemCount < 8) {
+                     if (plant) {
+                        // Handle regular plant items
+                        const article = document.createElement("article");
+                        const img = article.appendChild(document.createElement("img"));
+                        img.src = "images/Icon awesome-apple-alt.png";
+                        const h2 = article.appendChild(document.createElement("h2"));
+                        h2.classList.add("plant-naam");
+                        h2.textContent = plant.plantNaam;
+
+                        td.appendChild(article);
+                        itemCount++;
+                    } if (rowIndex === this.rows -1 && colIndex === this.cols -1 & itemCount <= 7) {
+                        // Handle the "Add" button
+                        const article = document.createElement("article");
+                        const img = article.appendChild(document.createElement("img"));
+                        img.src = "images/Toevoegen.png";
+                        img.id = "toevoegen";
+                        img.alt = "Add";
+                        article.id = "modalButton";
+                        article.onclick = openModal;
+
+                        td.appendChild(article);
+                        itemCount++;
+                    }
+                }
+
+                tr.appendChild(td);
+            });
+
+            plantenTable.appendChild(tr);
+        });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    const plantGrid = new PlantGrid();
+});

From 534d0daeffd8bb0f41944bc285f1a58e4d0ae159 Mon Sep 17 00:00:00 2001
From: Renzo <6025850@mborijnland.nl>
Date: Wed, 13 Mar 2024 10:34:50 +0100
Subject: [PATCH 2/3] plantenClass OOP werkt volledig met sample data

---
 src/js/planten.class.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/js/planten.class.js b/src/js/planten.class.js
index 3262ea5..fd13610 100644
--- a/src/js/planten.class.js
+++ b/src/js/planten.class.js
@@ -36,7 +36,7 @@ class PlantGrid {
                 "id": 3,
                 "plantNaam": "Appel",
                 "plantensoort": "Groente",
-                "plantGeteelt": 1
+                "plantGeteelt": 0
             },
             {
                 "id": 4,
@@ -60,7 +60,7 @@ class PlantGrid {
                 "id": 7,
                 "plantNaam": "Groene",
                 "plantensoort": "Groente",
-                "plantGeteelt": 1
+                "plantGeteelt": 0
             },
             {
                 "id": 8,
@@ -72,19 +72,20 @@ class PlantGrid {
                 "id": 9,
                 "plantNaam": "yippie",
                 "plantensoort": "Groente",
-                "plantGeteelt": 0
+                "plantGeteelt": 1
             }
         ];
 
         const filteredData = dataHardObject.filter(plantObject => plantObject.plantGeteelt === 1);
 
         // Populate the grid with plant objects
-        filteredData.forEach((plantObject, index) => {
+        filteredData.slice(0, 8).forEach((plantObject, index) => {
             const plant = new Plant(plantObject);
-                const col = index % this.cols;
-                const row = Math.floor(index / this.cols);
-                this.grid[row][col] = plant;
+            const col = index % this.cols;
+            const row = Math.floor(index / this.cols);
+            this.grid[row][col] = plant;
         });
+        
 
         // Display the grid in the HTML table with id "planten"
         this.displayGrid();
@@ -113,7 +114,7 @@ class PlantGrid {
 
                         td.appendChild(article);
                         itemCount++;
-                    } if (rowIndex === this.rows -1 && colIndex === this.cols -1 & itemCount <= 7) {
+                    } else if (rowIndex === this.rows -1 && colIndex === this.cols -1 & itemCount <= 7) {
                         // Handle the "Add" button
                         const article = document.createElement("article");
                         const img = article.appendChild(document.createElement("img"));

From 275d64585e863914f31ea22ec475bae4c7a839b6 Mon Sep 17 00:00:00 2001
From: Renzo <6025850@mborijnland.nl>
Date: Wed, 13 Mar 2024 13:33:39 +0100
Subject: [PATCH 3/3] plantenClass OOP werkt volledig met sample data en if
 statement fix

---
 src/js/planten.class.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/js/planten.class.js b/src/js/planten.class.js
index fd13610..b671e08 100644
--- a/src/js/planten.class.js
+++ b/src/js/planten.class.js
@@ -72,10 +72,11 @@ class PlantGrid {
                 "id": 9,
                 "plantNaam": "yippie",
                 "plantensoort": "Groente",
-                "plantGeteelt": 1
+                "plantGeteelt": 0
             }
         ];
 
+        // Only save objects that have plantGeteelt as 1
         const filteredData = dataHardObject.filter(plantObject => plantObject.plantGeteelt === 1);
 
         // Populate the grid with plant objects
@@ -114,7 +115,7 @@ class PlantGrid {
 
                         td.appendChild(article);
                         itemCount++;
-                    } else if (rowIndex === this.rows -1 && colIndex === this.cols -1 & itemCount <= 7) {
+                    } else if (rowIndex === this.rows -1 && colIndex === this.cols -1 && itemCount <= 7) {
                         // Handle the "Add" button
                         const article = document.createElement("article");
                         const img = article.appendChild(document.createElement("img"));