plantenClass OOP bijna werkend
This commit is contained in:
Renzo
@@ -17,54 +17,7 @@
|
|||||||
<section class="content">
|
<section class="content">
|
||||||
<section class="kant-links">
|
<section class="kant-links">
|
||||||
<table id="planten">
|
<table id="planten">
|
||||||
<tr>
|
<!-- <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>
|
|
||||||
<td>
|
<td>
|
||||||
<article>
|
<article>
|
||||||
<img src="images/Icon awesome-apple-alt.png" alt="">
|
<img src="images/Icon awesome-apple-alt.png" alt="">
|
||||||
@@ -76,7 +29,7 @@
|
|||||||
<img id="toevoegen"src="images/Toevoegen.png" alt="">
|
<img id="toevoegen"src="images/Toevoegen.png" alt="">
|
||||||
</article>
|
</article>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr> -->
|
||||||
</table>
|
</table>
|
||||||
<div id="myModal" class="modal">
|
<div id="myModal" class="modal">
|
||||||
<span class="close">×</span>
|
<span class="close">×</span>
|
||||||
|
|||||||
@@ -1,4 +1,25 @@
|
|||||||
dataHardObject = [
|
class Plant {
|
||||||
|
constructor(dataObject) {
|
||||||
|
this.id = dataObject.id;
|
||||||
|
this.plantNaam = dataObject.plantNaam;
|
||||||
|
this.plantensoort = dataObject.plantensoort;
|
||||||
|
this.plantGeteelt = dataObject.plantGeteelt;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class PlantGrid {
|
||||||
|
constructor() {
|
||||||
|
this.grid = [];
|
||||||
|
this.cols = 2; // Number of columns
|
||||||
|
this.rows = 4; // Number of rows (including the row for the "Add" button)
|
||||||
|
|
||||||
|
// 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,
|
"id": 1,
|
||||||
"plantNaam": "Tomt",
|
"plantNaam": "Tomt",
|
||||||
@@ -10,40 +31,111 @@ dataHardObject = [
|
|||||||
"plantNaam": "Komkommer",
|
"plantNaam": "Komkommer",
|
||||||
"plantensoort": "Groente",
|
"plantensoort": "Groente",
|
||||||
"plantGeteelt": 1
|
"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");
|
"id": 3,
|
||||||
// titel.forEach(element => {
|
"plantNaam": "Appel",
|
||||||
// element.textContent = this.plantNaam;
|
"plantensoort": "Groente",
|
||||||
for (let i = 0; i < titel.length; i++) {
|
"plantGeteelt": 1
|
||||||
const element = titel[i];
|
},
|
||||||
element.textContent = this.plantNaam;
|
{
|
||||||
}
|
"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
|
||||||
}
|
}
|
||||||
|
];
|
||||||
|
|
||||||
// document.addEventListener('DOMContentLoaded', (event) => {
|
const filteredData = dataHardObject.filter(plantObject => plantObject.plantGeteelt === 1);
|
||||||
// const tomaatPlant = new Plant(dataHardObject[0]);
|
|
||||||
// tomaatPlant.htmlData();
|
|
||||||
// });
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", (event) => {
|
// Populate the grid with plant objects
|
||||||
dataHardObject.forEach(plantObject => {
|
filteredData.forEach((plantObject, index) => {
|
||||||
const plant = new Plant(plantObject);
|
const plant = new Plant(plantObject);
|
||||||
plant.htmlData();
|
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();
|
||||||
});
|
});
|
||||||
})
|
|
||||||
Reference in New Issue
Block a user