Fix/date and docs (#82)

Co-authored-by: Anton Lilleby <[email protected]>
capraconsulting · Jul 23, 2024 · eb9c9d3 · eb9c9d3
1 parent e45d2cb
commit eb9c9d3
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 68 deletions.
diff --git 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
@@ -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
@@ -70,6 +70,7 @@
       </Alert>
     {:else}
       <UnregistrationFormExternal
+        {event}
         form={unregistrationForm}
         errors={unregistrationErrors}
         delayed={unregistrationDelayed}

diff --git a/app/src/components/external/UnregistrationFormExternal.svelte b/app/src/components/external/UnregistrationFormExternal.svelte
@@ -1,52 +1,57 @@
 <script lang="ts">
+  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;
 </script>
 
-<form
-  class="mt-20 flex flex-col gap-6"
-  method="POST"
-  action="?/submitUnregistrationExternal"
-  use:enhance
->
-  <input type="text" name="subject" id="subject" class="hidden" />
-
-  <div
-    class="mb-8 flex flex-col items-start justify-center rounded-lg border p-4 dark:border-gray-700 dark:bg-gray-800 sm:p-8"
+{#if !dateHasPassed(event.deadline)}
+  <form
+    class="mt-20 flex flex-col gap-6"
+    method="POST"
+    action="?/submitUnregistrationExternal"
+    use:enhance
   >
-    <div class="flex flex-col items-center gap-5">
-      <div class="items-start-4 flex flex-col">
-        <h4
-          class="text-2xl font-bold leading-none tracking-tight text-gray-900 dark:text-white sm:text-2xl"
-        >
-          <h2 class="pb-4 text-base font-bold sm:text-xl">Ønsker du å melde deg av?</h2>
-        </h4>
+    <input type="text" name="subject" id="subject" class="hidden" />
+
+    <div
+      class="mb-8 flex flex-col items-start justify-center rounded-lg border p-4 sm:p-8 dark:border-gray-700 dark:bg-gray-800"
+    >
+      <div class="flex flex-col items-center gap-5">
+        <div class="items-start-4 flex flex-col">
+          <h4
+            class="text-2xl font-bold leading-none tracking-tight text-gray-900 sm:text-2xl dark:text-white"
+          >
+            <h2 class="pb-4 text-base font-bold sm:text-xl">Ønsker du å melde deg av?</h2>
+          </h4>
 
-        <ButtonGroup class="w-100">
-          <Input
-            class="bg-white"
-            type="text"
-            placeholder="[email protected]"
-            name="email"
-            bind:value={$form.email}
-          />
-          <Button class="w-48" type="submit" color="light" disabled={$delayed}>
-            Meld meg av
-            <span class="w-3">
-              {#if $delayed}
-                <Spinner color="gray" class="ml-2 " size="4" />
-              {/if}
-            </span>
-          </Button>
-        </ButtonGroup>
-        {#if $errors.email}
-          <p class="text-xs text-red-600">Fyll inn gyldig epost.</p>
-        {/if}
+          <ButtonGroup class="w-100">
+            <Input
+              class="bg-white"
+              type="text"
+              placeholder="[email protected]"
+              name="email"
+              bind:value={$form.email}
+            />
+            <Button class="w-48" type="submit" color="light" disabled={$delayed}>
+              Meld meg av
+              <span class="w-3">
+                {#if $delayed}
+                  <Spinner color="gray" class="ml-2 " size="4" />
+                {/if}
+              </span>
+            </Button>
+          </ButtonGroup>
+          {#if $errors.email}
+            <p class="text-xs text-red-600">Fyll inn gyldig epost.</p>
+          {/if}
+        </div>
       </div>
     </div>
-  </div>
-</form>
+  </form>
+{/if}
diff --git a/app/src/components/shared/EventInfoBox.svelte b/app/src/components/shared/EventInfoBox.svelte
@@ -1,27 +1,26 @@
 <script lang="ts">
   import { endsOnDifferentDay, formatDate, formatTime } from "$lib/utils/date.util";
   import type { Event } from "$models/sanity.model";
-  import { CalendarBlank, Clock, MapPin, ForkKnife, Tag } from "phosphor-svelte";
+  import { CalendarBlank, Clock, MapPin, ForkKnife, Tag, Lightbulb } from "phosphor-svelte";
 
   export let event: Event;
 </script>
 
 <div
-  class="flex h-full w-full flex-col gap-1 hyphens-auto rounded-xl bg-zinc-100 p-3 text-sm font-light dark:bg-zinc-800 sm:p-6 sm:text-base"
+  class="flex h-full w-full flex-col gap-1 hyphens-auto rounded-xl bg-zinc-100 p-3 text-sm font-light sm:p-6 sm:text-base dark:bg-zinc-800"
 >
   <div class="flex items-center">
-    <CalendarBlank class="mr-2 flex-none" />
+    <Lightbulb class="mr-2 flex-none" />
     <span>{event.category}</span>
   </div>
 
   <div class="flex items-center">
     <CalendarBlank class="mr-2 flex-none" />
     <span
       >{formatDate(event.start)}
-      {endsOnDifferentDay(event.start, event.end) ? `- ${formatDate(event.end)}` : ""}</span
-    >
+      {endsOnDifferentDay(event.start, event.end) ? `- ${formatDate(event.end)}` : ""}
+    </span>
   </div>
-
   <div class="flex items-center">
     <Clock class="mr-2 flex-none" />
     <span>{formatTime(event.start)} - {formatTime(event.end)}</span>

diff --git 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