Program card component

[driezie]

Program card component

1. Ik groepeer door middel van een functie dat de radio stations de toegewezen shows/programmas krijgen
2. De profiel foto wordt opgehaald door de eerste dj/gebruiker in de show, als deze niet wordt geladen wordt de thumbnail van de show geladen.
3. De tijden worden afgekort dooe de slide functie. Hierdoor krijg je van 04:00:00 naar 04:00

getImageSource

// Helper function to get the image source function getImageSource(show) { // Pakt de koppeltabel van de show const programShow = show.mh_shows_id.show

    // Pakt de eerste user op van de show
    const firstUser = programShow && programShow.users && programShow.users[0] && programShow.users[0].mh_users_id && programShow.users[0].mh_users_id.cover;

    // Pakt de thumbnail van de show

    const thumbnail = programShow && programShow.thumbnail && programShow.thumbnail.id;

    // Als de cover niet bestaat of er geen users zijn, gebruik dan de thumbnail van de show
    // Als er geen thumbnail of cover is gebruik een lege string
    return firstUser ? `/${firstUser}` : (thumbnail ? `/${thumbnail}` : '');
}

> getShowTime
```js
// Helper function to get the show time
    function getShowTime(show) {
        const showId = show.mh_shows_id
        // Haalt de tijden op, als er geen tijden zijn, gebruik dan 00:00
        const from = showId && showId.from ? showId.from : '00:00';
        const until = showId && showId.until ? showId.until : '00:00';

        // Verkleint de tijd van 04:00:00 naar 04:00
        const formattedFrom = from.slice(0, 5);
        const formattedUntil = until.slice(0, 5);

        return `${formattedFrom} - ${formattedUntil}`;
    }

 // Group shows by radio station
    function groupByRadioStation(shows) {
        const radioStation = {};

        for (const show of shows) {
            const showId = show.mh_shows_id;

            // Pakt de radio station van de show
            const programShow = showId && showId.show;
            const station = programShow && programShow.radiostation;
            const stationName = station && station.name ? station.name : 'Unknown Station';

            // Als de radio station nog niet bestaat, maak dan een lege array aan
            if (!radioStation[stationName]) {
                radioStation[stationName] = [];
            }

            // Voeg de show toe aan de radio station groep
            radioStation[stationName].push(show);
        }
        return radioStation;
    }

    // Groepeer de shows per radio station (dit is de call)
    const groupedShows = groupByRadioStation((data && data.data && data.data[0] && data.data[0].shows) || []);

Welke testen heb ik uitgevoerd?

ik ben onze hele DOD afgegaan en heb de functionaliteit ook getest.

Code

• [x] Je code voldoet aan de afgesproken conventies
• [x] Je bent consistent met het gebruiken van tabs en enters
• [X] Je structureert je code met comments
• [X] Je legt ingewikkelde code uit met comments

Ontwerp

• [x] Het afgeronde component komt overeen met het ontwerp

Responsive

• [x] Het is responsive op alle schermen tot minstens 300px breed

Toegankelijkheid

• [x] Is te bedienen met toetsenbord
• [x] Heeft een duidelijke focus state
• [x] Er wordt gebruik gemaakt van semantische html (probeer divs te voorkomen)
• [x] Op alle buttons en overige klikbare elementen staat cursor: pointer
• [X] Je scoort minstens een 85% op Lighthouse voor zowel mobiel als desktop op toegankelijkheid
• [X] Bij afbeeldingen, buttons en links staan alt tags die kort en duidelijk beschrijven wat het doet
• [X] Je html komt door de html validator
• [x] Er is op meerdere browsers getest, minstens firefox en chrome

Performance x- [x] Je hebt geen onnodige / dubbele code

• [x] Je behaalt een 85% op de performance Lighthouse test op zowel mobiel als desktop

Mergen

• [x] Alle merge conflicts zijn opgelost
• [x] Minstens 1 persoon heeft je code beoordeeld en goedgekeurd

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lose-your-head-the-client-case	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 1:42pm
lose-your-head-the-client-case-5q6r	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 14, 2024 1:42pm

[TomDeeterink1]

He @driezie , kijk aub naar de conventies die we vast gesteld hebben.

Onderstaande punten die opgelost moeten worden

• Je volledige component (layout met cards) staat in een +page.svelte , dit hoort een component te zijn. Geen hele page.
• Je Programcard.svelte staat in het mapje van de button component, haal deze hier uit en maak een apart mapje aan. Anders klopt onze structuur niet meer.
• In je code van de card worden geen variablen gebruikt voor kleuren.
• In je code van de card staan diverse code die je met een comment uitgezet heb, dit mag ook niet mee in de merge.
• Zorg ervoor dat iemand jou Pull request checked, alles is afgevinkt. terwijl het niet compleet is.

Als dit klaar is kijk ik hem opnieuw na!