Jesse 1ste pull request. get routes werkend

[J3SS3HVA]

Hier is mijn eerste pull request.

wat is mij gelukt

het is mij gelukt om de juiste data op te halen voor de pagina die alle lijsten weergeeft en de huizen die in een lijst zitten.

server.js

In de server heb ik voor gezorgd dat hij alle lijsten worden opgehaald voor lijsten.ejs. die zitten hier in directus f_lists

Wanneer je op een zo'n lijst klikt opent hij lijst.ejs en zorgt hij dat je alleen de huizen ziet die in die lijst staan .
(Gedaan met app.get(lijsten/:id))

lijsten.ejs

Hierin heb ik een ul gemaakt waarin een for each loop zit. Met dat worden alle lijsten omringt met het *

element
in die <li> zit er voor nu een test image + de titel van de lijst en een form met button die je naar zijn lijst pagina leid met zijn huizen.

lijst.ejs

Ook hier werk ik met een ul waarin de huizen geloopt worden en omringt zijn met het <li> element. In die li zie je het plaatje van het huis en nog wat informatie erover zoals de stad waar hij inzit en de prijs bijvoorbeeld.

overige changes

• had ook al een beetje gewerkt aan de navbar.
• en een beetje gewerkt aan de index
• Ben nog niet echt begonnen met het stylen. In deze pull request gaat voor nu over dat het mij gelukt is om de data op te halen.

screenshots

lijsten.ejs

Je ziet hier alle lijsten met daarbij de titel, een test image en een button die je brengt naar alle huizen die in zijn lijst zitten

lijst.ejs

dit is wat ik krijg als ik op de button klik van de lijst met de titel Amsterdam. Vervolgens zie je alle huizen die bij deze lijst horen.

[nikoladupreez]

Super bezig Jesse! Je hebt echt al veel gedaan, topper 🚀

Ik heb een paar comments gezet bij je code, maar heb je code nog niet getest verder door het lokaal te draaien. Zal dat ook nog even doen! :)

[J3SS3HVA]

Dankjewel voor de feedback. Ik ben nu van start gegaan met het verbeteren van mijn werk

[J3SS3HVA]

@nikoladupreez alle feedback is nu verbeterd. ✅

in de volgende push zie je uiteindelijk alle verbeteringen

[J3SS3HVA]

ver 1.2 is gepushed hier zijn nog wat andere dingen waar ik mee bezig ben

1. ben bezig met een zero state: in de directus api heb ik 1 lijst leeg gehaald, wanneer de lijst leeg is renderd hij de lijst empty.ejs. Daarin zit een welkoms boodschap waarin staat wat je moet doen.

2. ook voor de server side heb ik iets gemaakt dat als de post succesvol is van de star rating, dat hij je vervolgens redirect naar de succes.ejs waar er een melding staat dat het is gelukt.

volgende stap

Mijn volgende stap is om deze pagina's helemaal af te krijgen.

[nikoladupreez]

Heel nice dat je zo snel de feedback hebt verwerkt Jesse! Ziet er meteen cleaner uit ✨ 🧹

Ik heb ook even een test gedaan door het lokaal te draaien en krijg op het moment een 500 error wanneer ik een rating probeer toe te voegen voor een listing. Heb jij dat ook?

[nikoladupreez]

Je hebt op het moment niets in de .then staan, hoort de code voor de succes state wat hierna komt daar eigenlijk in?

[nikoladupreez]

Je zou dan ook nog een .catch kunnen toevoegen om een error state te laten zien (is een nice to have, niet belangrijk voor je user story)

[J3SS3HVA]

let formSubmit = this.querySelector("button[type='submit']");
    formSubmit.classList.add("succes");
    formSubmit.innerText = "Gelukt"; // Change the text of the button to "Gelukt"
    formSubmit.disabled = true; // Disable the button

dit is wat na de then komt. er komen bepaalde styling die de succes state aangeeft. Ik zal kijken of het mij nog lukt om die catch toe te voegen. We zijn nu namelijk bezig met alles voor te bereiden voor de sprint review.
(ik krijg trouwens geen error wanneer ik de post uitvoer van de star rating)

[nikoladupreez]

Op het moment wordt de succes state altijd toegevoegd, ook als de request niet succesvol was :)

Ik krijg namelijk een 500 error wanneer ik een rating probeer toe te voegen, maar ik zie wel de succes state

[J3SS3HVA]

heb er nu dit van gemaakt. Bij de then voert hij nu een functie uit waarbij hij kijkt of het gelukt is of niet.
als het gelukt is voert hij de succes state uit en zo niet dan voert hij de error state uit waar de tekst dus naar mislukt veranderd.

starForms.forEach((starForm) => {
  starForm.addEventListener("submit", function (event) {

    // Maak een FormData-object van het formulier
    let starItem = new FormData(this);

    // Voeg 'clientside' toe aan de FormData
    starItem.append("clientside", true);

    // Voer het fetch-verzoek uit naar de server
    fetch(this.action, {
      method: this.method,
      body: new URLSearchParams(starItem),
    }).then(() => {
      // Wanneer het item succesvol is verzonden, voert hij het volgende uit
      let formSubmit = this.querySelector("button[type='submit']");
      formSubmit.classList.add("succes");
      formSubmit.innerText = "Gelukt"; // Verander de tekst van de knop naar "Gelukt"
      formSubmit.disabled = true; // Schakel de knop uit
    })
    .catch(() => {
      let formSubmit = this.querySelector("button[type='submit']");
      formSubmit.innerText = "Mislukt"; 
      formSubmit.disabled = false; 
    });

    // Voorkom standaardgedrag van het formulier
    event.preventDefault();
  });
});

[rinux55]

Hi Jesse,

Je hebt super goed en compleet werk geleverd! Afgezien van de comments van mijn collega heb ik maar twee kleine opmerkingen over accessibility.

Heel goed om te zien hoe je zo gestructureerd te werk bent gegaan, netjes met goed beschreven commits.

De pagina zelf ziet er ook goed uit en je hebt er een leuke twist aangeven met de animaties!

[rinux55]

Dit is een prima oplossing voor de stars! Let er op dat de aria-label die je definieert hetgeen is wat mensen te lezen of te horen krijgen als ze gebruik maken van hulptechnologieën. Zorg er dus voor dat dit voor mensen geschreven is. Dus niet "1-ster" maar beter "1 ster" of "Geef 1 ster".

[rinux55]

Aangezien deze afbeelding niets meer dan een icoon is voor deze link, en daarmee een "decorative image", zou ik hem geen alt-text geven, maar deze leeg laten: alt="".

Zie https://www.w3.org/WAI/tutorials/images/decorative/

Als een gebruiker met hulptechnologieën focust op deze link krijgt deze al "Bekijk Lijst" te zien of te horen.

[rinux55]

deze button is ook op een gegeven moment disabled, die zou ik ook nog stylen.