plantenClass OOP bijna werkend

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();
-    });
-})
+        // 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();
+});