From eb9c9d369b8be9c7fe635298a3360db5cea81c9e Mon Sep 17 00:00:00 2001 From: an2n Date: Tue, 23 Jul 2024 10:16:39 +0200 Subject: [PATCH] Fix/date and docs (#82) Co-authored-by: Anton Lilleby --- README.md | 28 ++++--- app/package.json | 3 +- .../external/EventFormExternal.svelte | 1 + .../UnregistrationFormExternal.svelte | 83 ++++++++++--------- app/src/components/shared/EventInfoBox.svelte | 11 ++- app/src/lib/utils/date.util.ts | 18 ++-- pnpm-lock.yaml | 7 ++ 7 files changed, 83 insertions(+), 68 deletions(-) diff --git a/README.md b/README.md index 94ee32c..3e13816 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,14 @@ # CapraWeb -Dette repositoriet inneholder to applikasjoner: Sanity Studio under /studio og SvelteKit applikasjonen under /app. Prosjektet har fått navnet CapraWeb for å inkludere hele nettsiden her i fremtiden. Foreløpig fokuserer vi på arrangementsdelen. +UI med [Svelte](https://svelte.dev) og [React](https://react.dev)\ +Server side rendering med [SvelteKit](https://kit.svelte.dev)\ +Styling med [Tailwind](https://tailwindcss.com)\ +Hosted hos [Vercel](https://vercel.com/)\ +Innhold og bilder i [Sanity](https://www.sanity.io) -Dette er et levende dokument, denne arbeideren 👷 i dokumentet her betyr at vi trenger hjelp! +En MVP løsning for administrasjon og visning av både interne og eksterne arrangementer hos Liflig, Fryde og Capra. Dette inkluderer fagsirkler, konferanser, frokostseminarer og sosiale begivenheter. Prosjektet har fått navnet CapraWeb for å inkludere hele nettsiden her i fremtiden. Foreløpig fokuserer vi på arrangementsdelen. + +Dette er et levende dokument, denne arbeideren 👷 betyr at vi trenger hjelp! ## Figma @@ -16,7 +22,7 @@ Design drodling finner man her: [Nettside design](https://www.figma.com/design/Z ### Verktøy -- [Node.js](https://nodejs.org/en/) (v18.19 eller senere) +- [Node.js](https://nodejs.org) (v18.19 eller senere) - [PNPM](https://pnpm.io/installation) (9.0.6 eller senere) - [Sanity CLI](https://www.sanity.io/docs/getting-started-with-sanity-cli) (anbefalt) - [Supabase CLI](https://supabase.com/docs/guides/cli/getting-started) (anbefalt) @@ -30,11 +36,11 @@ Design drodling finner man her: [Nettside design](https://www.figma.com/design/Z - Svelte - Tailwind CSS IntelliSense -## Kom i gang +## Komme i gang For å kjøre koden: -1. Be om environment variabler for lokal testing i kanalen #tmp_arrangementsoversikt. +1. Be om environment variabler for lokal testing i kanalen [#tmp_arrangementsoversikt](). Du må selv opprette en `.env` fil i /studio og /app. 2. Installer dependencies: @@ -50,8 +56,8 @@ pnpm install pnpm dev ``` -- SvelteKit skal nå kjøre på [http://localhost:5173/](http://localhost:5173/) -- Sanity Studio skal kjøre på [http://localhost:3333/](http://localhost:3333/) +- SvelteKit skal nå kjøre på [http://localhost:5173](http://localhost:517/) +- Sanity Studio skal kjøre på [http://localhost:3333](http://localhost:3333) NB: Du kan også starte dev serverne hver for seg i deres respektive mapper. @@ -69,7 +75,7 @@ Bygg bør alltid kjøres som en del av vår pull request policy 👷 ### Deploy -Sanity Studio blir deployet til [https://capra.sanity.studio/](https://capra.sanity.studio). +Sanity Studio blir deployet til [https://capra.sanity.studio](https://capra.sanity.studio). GitHub Actions CI/CD deploy kjører automatisk ved push til main-branch og ved endringer i /studio mappen. Alternativt kan deploy også utføres manuelt ved å navigere til /studio-katalogen og kjøre følgende kommando: ```bash @@ -108,7 +114,7 @@ Bygg bør alltid kjøres som en del av vår pull request policy 👷 ### Deploy -SvelteKit blir foreløpig deployet til [https://capra-web.vercel.app/](https://capra-web.vercel.app/) fra /app med følgenden kommando: +SvelteKit blir foreløpig deployet til [https://capra-web.vercel.app](https://capra-web.vercel.app) fra /app med følgenden kommando: ```bash vercel deploy @@ -164,7 +170,7 @@ Når et arrangement publiseres for første gang, vil det automatisk genereres en ## E-posthåndtering -E-post med kalenderinvitasjon (.ics-fil) sendes fra SvelteKit på serversiden. På grunn av manglende tilgang til en server fra Sanity, har vi satt opp et API-endepunkt i SvelteKit som Sanity kan kommunisere med for å sende e-post. Som SMTP host benytter vi oss av [Mandrill](https://mandrillapp.com/). Autentisering skjer via Mailchimp. +E-post med kalenderinvitasjon (.ics-fil) sendes fra SvelteKit på serversiden. På grunn av manglende tilgang til en server fra Sanity, har vi satt opp et API-endepunkt i SvelteKit som Sanity kan kommunisere med for å sende e-post. Som SMTP host benytter vi oss av [Mandrillapp](https://mandrillapp.com/). Autentisering skjer via Mailchimp. E-post domene for alle selskaper må verifiseres. Vi er på en trial-plan her og 👷 @@ -173,7 +179,7 @@ E-post domene for alle selskaper må verifiseres. Vi er på en trial-plan her og Når en bruker melder seg på et arrangement, utløses følgende prosess: 1. En e-postbekreftelse sendes til brukeren. -2. Denne e-posten inkluderer en kalenderinvitasjon med deltagerstatus satt som akseptert +2. Denne e-posten inkluderer en kalenderinvitasjon med deltagerstatus satt som akseptert. 3. Kalenderinvitasjonen legges automatisk inn i deltagerens kalender, slik at arrangementet blir synlig i kalenderen umiddelbart etter påmelding. ### Avmelding diff --git a/app/package.json b/app/package.json index 6db0cfa..bcce972 100644 --- a/app/package.json +++ b/app/package.json @@ -24,7 +24,8 @@ "nodemailer": "^6.9.14", "playwright": "^1.45.0", "postgres": "^3.4.4", - "validator": "^13.12.0" + "validator": "^13.12.0", + "date-fns": "^3.6.0" }, "devDependencies": { "@playwright/test": "^1.45.0", diff --git a/app/src/components/external/EventFormExternal.svelte b/app/src/components/external/EventFormExternal.svelte index ecfa459..96b58a8 100644 --- a/app/src/components/external/EventFormExternal.svelte +++ b/app/src/components/external/EventFormExternal.svelte @@ -70,6 +70,7 @@ {:else} + import { dateHasPassed } from "$lib/utils/date.util"; import { Input, Button, ButtonGroup, Spinner } from "flowbite-svelte"; + import type { Event } from "$models/sanity.model"; + export let event: Event; export let form; export let errors; export let delayed; export let enhance; -
- - -
-
-
-

-

Ønsker du å melde deg av?

- + + +
+
+
+

+

Ønsker du å melde deg av?

+ - - - - - {#if $errors.email} -

Fyll inn gyldig epost.

- {/if} + + + + + {#if $errors.email} +

Fyll inn gyldig epost.

+ {/if} +
-
- + +{/if} diff --git a/app/src/components/shared/EventInfoBox.svelte b/app/src/components/shared/EventInfoBox.svelte index 41afa75..efdf839 100644 --- a/app/src/components/shared/EventInfoBox.svelte +++ b/app/src/components/shared/EventInfoBox.svelte @@ -1,16 +1,16 @@
- + {event.category}
@@ -18,10 +18,9 @@ {formatDate(event.start)} - {endsOnDifferentDay(event.start, event.end) ? `- ${formatDate(event.end)}` : ""} + {endsOnDifferentDay(event.start, event.end) ? `- ${formatDate(event.end)}` : ""} +
-
{formatTime(event.start)} - {formatTime(event.end)} diff --git a/app/src/lib/utils/date.util.ts b/app/src/lib/utils/date.util.ts index 05bfd78..884aabd 100644 --- a/app/src/lib/utils/date.util.ts +++ b/app/src/lib/utils/date.util.ts @@ -1,6 +1,5 @@ -function toDate(dateString: string): Date { - return new Date(dateString); -} +import { parseISO, isSameDay, format } from "date-fns"; +import { nb } from "date-fns/locale"; export function formatDate(date: string): string { return new Date(date).toLocaleDateString("nb-NO", { @@ -18,18 +17,15 @@ export function formatDateWithWeekDay(date: string): string { }); } -export function formatTime(date: string): string { - // Note: The 'nb-NO' locale has a specific formatting behavior where it may remove and then re-add a leading zero. - return new Date(date).toLocaleTimeString("en-GB", { - hour: "numeric", - minute: "numeric", - }); +export function formatTime(dateString: string): string { + const date = parseISO(dateString); + return format(date, "HH:mm", { locale: nb }); } export function endsOnDifferentDay(start: string, end: string): boolean { - return toDate(start) !== toDate(end); + return !isSameDay(parseISO(start), parseISO(end)); } export function dateHasPassed(date: string): boolean { - return toDate(date) <= new Date(); + return new Date(date) <= new Date(); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b47859b..755e6be 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -28,6 +28,9 @@ importers: '@sanity/visual-editing': specifier: ^2.1.5 version: 2.1.5(@sanity/client@6.20.1)(@sveltejs/kit@2.5.17)(react-dom@18.3.1)(react@18.3.1)(svelte@4.2.18) + date-fns: + specifier: ^3.6.0 + version: 3.6.0 globals: specifier: ^15.8.0 version: 15.8.0 @@ -5346,6 +5349,10 @@ packages: '@babel/runtime': 7.24.1 dev: false + /date-fns@3.6.0: + resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==} + dev: false + /date-now@1.0.1: resolution: {integrity: sha512-yiizelQCqYLUEVT4zqYihOW6Ird7Qyc6fD3Pv5xGxk4+Jz0rsB1dMN2KyNV6jgOHYh5K+sPGCSOknQN4Upa3pg==} dev: false