"use client" import { useCallback, useEffect, useState } from "react" import { Box, Button, Container, Flex, Heading, HStack, SimpleGrid, Spinner, Stack, Text, } from "@chakra-ui/react" import NextLink from "next/link" import { Icon } from "@obelisk/blocks" /** * Het eigen strippensaldo van de ingelogde speler, als papieren strippenkaart. * * De kaart zelf is het scherm: één vakje per gekochte les, en een afgestempeld * vakje voor elke les die de speler gevolgd heeft. Dat is wat een speler van een * strippenkaart kent — hij ziet in één oogopslag hoeveel vakjes nog leeg zijn, * zonder een getal te hoeven lezen. * * De stempels staan per vakje een paar graden gedraaid. Die hoek komt uit de * index, niet uit een random: bij een re-render mag een stempel niet verspringen, * en op de server moet dezelfde hoek uitkomen als in de browser. * * Alles komt van /mine/, dat op de sessie filtert. Deze component stuurt dus * nooit een speler-id mee; hij kan per definitie alleen het eigen saldo tonen. */ const MAANDEN = [ "jan", "feb", "mrt", "apr", "mei", "jun", "jul", "aug", "sep", "okt", "nov", "dec", ] function formatDate(iso) { if (!iso) return "" const date = new Date(iso) if (Number.isNaN(date.getTime())) return "" return new Intl.DateTimeFormat("nl-NL", { day: "numeric", month: "long", year: "numeric", }).format(date) } /** Kort datumstempel: '9 sep' — moet in een vakje passen. */ function stampDate(iso) { if (!iso) return "" const date = new Date(iso) if (Number.isNaN(date.getTime())) return "" return `${date.getDate()} ${MAANDEN[date.getMonth()]}` } function formatMoney(value) { return new Intl.NumberFormat("nl-NL", { style: "currency", currency: "EUR", }).format(Number(value || 0)) } export default function MijnStrippenkaart({ title = "Mijn strippenkaart", buyUrl = "/lessen/", }) { const [data, setData] = useState(null) const [error, setError] = useState("") const load = useCallback(() => { fetch("/api/app/stripcards/mine/") .then((res) => { if (res.status === 401 || res.status === 403) { throw new Error("Log in om je strippenkaart te zien.") } return res.json() }) .then((body) => { setData(body); setError("") }) .catch((err) => setError(err?.message || "Je strippenkaart kon niet geladen worden.")) }, []) useEffect(() => { load() }, [load]) if (error) { return ( {error} ) } if (!data) { return ( ) } const saldo = data.balance || {} const left = saldo.strips_left || 0 const gekocht = saldo.strips_bought || 0 const purchases = data.purchases || [] const uses = data.uses || [] // De kaart loopt van les 1 tot het aantal gekochte lessen. De gevolgde lessen // vullen de vakjes op volgorde van oud naar nieuw: /mine/ levert ze // nieuwste-eerst, dus die lijst gaat hier omgekeerd in. const oudsteEerst = [...uses].reverse() const vakjes = Array.from({ length: gekocht }, (_, i) => ({ nummer: i + 1, use: oudsteEerst[i] || null, })) return ( {title} {saldo.holder_name ? ( {saldo.holder_name} ) : null} {gekocht === 0 ? ( Je kaart is nog leeg Koop een pakket lessen, dan verschijnen hier je vakjes. De trainer stempelt er één af elke keer dat je een les volgt. ) : ( Pickleball Apeldoorn Lessenkaart {left} / {gekocht} {left === 0 ? "Alle vakjes zijn afgestempeld." : `Nog ${left} ${left === 1 ? "les" : "lessen"} te gebruiken.`} {gekocht} {gekocht === 1 ? "vakje" : "vakjes"} {vakjes.map((vak, index) => ( ))} {left === 0 ? ( Je kaart is vol. Koop lessen bij om te blijven spelen — wat je bijkoopt komt op een nieuwe kaart te staan. ) : null} )} Gevolgde lessen {uses.length === 0 ? ( Je hebt nog geen les gevolgd. ) : ( {uses.map((les, index) => ( {formatDate(les.used_at)} {les.note ? ( {les.note} ) : null} ))} )} Aankopen {purchases.length === 0 ? ( Je hebt nog geen lessen gekocht. ) : ( {purchases.map((buy) => ( {buy.type_title} {formatDate(buy.purchased_at)} {formatMoney(buy.price)} ))} )} ) } /** * Eén vakje van de kaart: leeg met z'n nummer, of afgestempeld met de datum * waarop de les gevolgd is. * * Staat na de default export: de props_schema van een library-component wordt * afgeleid uit de eerste component in het bestand, en dan zou dit vakje de * props van de pagina bepalen in plaats van title/buyUrl. */ function Vakje({ nummer, use, index }) { const gebruikt = Boolean(use) const hoek = [-9, 6, -4, 11, -7, 3][nummer % 6] return ( {nummer} {gebruikt ? ( ) : null} ) } /** * Eén letter van de gebogen tekst. * * De letter zit in een strook van precies een halve stempelhoogte, met de tekst * bovenaan uitgelijnd, en die strook draait om z'n onderkant — het middelpunt * van de stempel. De letter komt daardoor automatisch in de rand terecht: geen * losse radius die je bij elke lettergrootte opnieuw moet bijstellen. * * Onderaan staat de strook 180° gedraaid. De hoek wordt daar OPGETELD bij die * 180 en niet afgetrokken, want met een aftrekking klapt de leesrichting om en * verschijnt 'APELDOORN' als 'NROODLEPA'. */ function BoogLetter({ letter, hoek, boven }) { return ( {letter} ) } /** * Tekst langs de rand van de stempel: elke letter apart over 'spread' graden. */ function Boog({ tekst, spread, boven }) { const letters = tekst.split("") const stap = spread / (letters.length - 1) return letters.map((letter, i) => ( )) } /** * De inktafdruk: dubbele ring, de clubnaam gebogen langs de boven- en onderrand * en een banderol met de datum er dwars door — de opbouw van een rubberstempel. * * Vaste maat van 120px, zodat de letterposities niet meeschalen: bij een kleinere * stempel zouden de boogletters over elkaar heen kruipen. */ function Stempel({ datum }) { return ( {datum} ) }

Account aanmaken