heboba/goodgarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'Renzo' into fix

Browse Source
This commit is contained in:
Atilla
2024-03-19 11:52:29 +01:00
parent c2dd64c6e9 275d64585e
commit d0337a74d4
2 changed files with 140 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/index.html
View File

@@ -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">&times;</span> <span class="close">&times;</span>

152
src/js/planten.class.js
View File

@@ -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,38 +31,113 @@ dataHardObject = [
"plantNaam": "Komkommer", "plantNaam": "Komkommer",
"plantensoort": "Groente", "plantensoort": "Groente",
"plantGeteelt": 1 "plantGeteelt": 1
} },
]
class Plant {
constructor(dataObject)
{ {
this.id = dataObject.id; "id": 3,
this.plantNaam = dataObject.plantNaam; "plantNaam": "Appel",
this.plantensoort = dataObject.plantensoort; "plantensoort": "Groente",
this.plantGeteelt = dataObject.plantGeteelt; "plantGeteelt": 0
},
{
"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": 0
},
{
"id": 8,
"plantNaam": "test",
"plantensoort": "Groente",
"plantGeteelt": 0
},
{
"id": 9,
"plantNaam": "yippie",
"plantensoort": "Groente",
"plantGeteelt": 0
}
];
// Only save objects that have plantGeteelt as 1
const filteredData = dataHardObject.filter(plantObject => plantObject.plantGeteelt === 1);
// Populate the grid with plant objects
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;
});
// Display the grid in the HTML table with id "planten"
this.displayGrid();
} }
htmlData() { displayGrid() {
if (this.plantGeteelt) const plantenTable = document.getElementById("planten");
{
const titel = document.querySelectorAll(".plant-naam"); let itemCount = 0; // Counter for the number of items in the grid
for (let i = 0; i < titel.length; i++) {
const element = titel[i]; this.grid.forEach((row, rowIndex) => {
element.textContent = this.plantNaam; 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++;
} 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"));
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', (event) => { document.addEventListener("DOMContentLoaded", () => {
// const tomaatPlant = new Plant(dataHardObject[0]); const plantGrid = new PlantGrid();
// tomaatPlant.htmlData(); });
// });
document.addEventListener("DOMContentLoaded", (event) => {
dataHardObject.forEach(plantObject => {
const plant = new Plant(plantObject);
plant.htmlData();
});
})