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