Merge pull request #62 from Daellhin/dev

chore: improve mocking support

src/components/announcements/AnnouncementViewer.svelte

@@ -2,7 +2,7 @@
   import { announcementStore } from "$lib/stores/AnnouncementStore"
   import { faArrowRightLong } from "@fortawesome/free-solid-svg-icons"
   import Fa from "svelte-fa"
-  import AnnounementComponent from "./AnnounementComponent.svelte"
+  import AnnounementComponent from "./AnnouncementComponent.svelte"
 
   let index = 0
 
@@ -13,7 +13,7 @@
   }
 </script>
 
-{#if $announcementStore}
+{#if $announcementStore && announcements.length > 0}
   <AnnounementComponent annoucement={announcements[index]} />
 
   {#if announcements.length > 1}

src/components/carousel/Carousel.svelte

@@ -5,6 +5,7 @@
     faChevronLeft,
     faChevronRight,
   } from "@fortawesome/free-solid-svg-icons"
+  import { onMount } from "svelte"
   import Fa from "svelte-fa"
 
   export let images: { imageUrl: string; alt?: string }[]
@@ -27,6 +28,9 @@
 
   // -- Looping --
   let loopTimeout: number
+  let mounted = false
+
+  onMount(() => (mounted = true))
 
   function setLoop() {
     clearTimeout(loopTimeout)
@@ -35,7 +39,7 @@
       setLoop()
     }, duration)
   }
-  $: if (loop && $preferencesStore.autoPlay) setLoop()
+  $: if (mounted && loop && $preferencesStore.autoPlay) setLoop()
   else clearTimeout(loopTimeout)
 </script>
 
@@ -57,9 +61,7 @@
   {/each}
   <!-- Slide indicators -->
   {#if images.length > 1 && !hideIndicators}
-    <div
-      class="absolute flex space-x-3 -translate-x-1/2 bottom-5 left-1/2"
-    >
+    <div class="absolute flex space-x-3 -translate-x-1/2 bottom-5 left-1/2">
       {#each images as _, i}
         <button
           type="button"

src/components/formHelpers/DropzoneFilePreview.svelte

@@ -49,7 +49,7 @@
     <Fa icon={image} />
   {/if}
   <div class="my-auto font-semibold">{imageName}</div>
-  <div class="min-w-6 ml-auto">
+  <div class="min-w-6 h-6 ml-auto">
     {#if !saving}
       <button
         class="btn btn-circle btn-xs hover:text-red-500"
@@ -59,11 +59,11 @@
         <Fa icon={faXmark} />
       </button>
     {:else if progress !== undefined}
-      <div title={toString(progress)}>
+      <div class="flex items-center" title={toString(progress)}>
         {#if progress === UploadProgress.CONVERTING || progress === UploadProgress.UPLOADING}
           <span
             class="loading loading-ring loading-sm"
-            title={toString(progress)}
+
           />
         {:else if progress === UploadProgress.DONE}
           <Fa icon={faCheck} color="green" />

src/components/photoAlbum/PhotoAlbumViewer.svelte

@@ -22,6 +22,8 @@
   export let photoAlbum: PhotoAlbum
   export let preview = false
 
+  let innerWidth: number
+
   $: imageUrls = photoAlbum.getImageUrls()
   $: thumbnailUrls = photoAlbum.getThumbnailUrls()
 
@@ -62,6 +64,8 @@
   })
 </script>
 
+<svelte:window bind:innerWidth />
+
 <div class="mb-4" id={photoAlbum.id}>
   <!-- Title -->
   <div class="flex">

src/data/AnnouncementsJson.ts

@@ -0,0 +1,14 @@
+
+import type { AnnouncementJson } from "$lib/domain/Announcement"
+import { Timestamp } from "firebase/firestore"
+
+export const ANNOUNCEMENT: AnnouncementJson = {
+	// id: "0",
+	createdAt: new Timestamp(Math.round(Date.now() / 1000), 0),
+	title: "Mock Announcement",
+	content: "Mock announcement content",
+	visible: true,
+	dismissible: true
+}
+
+export const ANNOUNCEMENTS_JSON: AnnouncementJson[] = [ANNOUNCEMENT]

src/data/ArticlesJson.ts

@@ -2,13 +2,15 @@ import type { ArticleJson } from "$lib/domain/Article"
 import { Timestamp } from "firebase/firestore"
 
 export const ARTICLE: ArticleJson = {
-    id: "1",
+    id: "0",
     createdAt: new Timestamp(Math.round(Date.now() / 1000), 0),
     authors: ["Lorin Speybrouck"],
     tags: ["Belangrijk", "Algemeen"],
     title: "Clubfeest 2023",
     images: [],
-    content: "<h1>Beste atleet, beste ouders</h1><h2>Even wat informatie over 3 februari.</h2><p><br></p><p>Die dag zal er <b>geen </b>training zijn.</p><p>  Aan de mensen die ingeschreven zijn voor het clubfeest, vragen we om <b>cash  geld</b> te voorzien. De drankjes bij het eten moeten nog ter plaatse betaald  worden.</p><p>  De aanwezige laureaten van het wedstrijds- en joggingscriterium zullen ter  plaatse hun prijs ontvangen.</p><p><br></p><p>Vriendelijke groeten,</p><p>Het Bestuur<br></p>"
+    content: "<h1>Beste atleet, beste ouders</h1><h2>Even wat informatie over 3 februari.</h2><p><br></p><p>Die dag zal er <b>geen </b>training zijn.</p><p>  Aan de mensen die ingeschreven zijn voor het clubfeest, vragen we om <b>cash  geld</b> te voorzien. De drankjes bij het eten moeten nog ter plaatse betaald  worden.</p><p>  De aanwezige laureaten van het wedstrijds- en joggingscriterium zullen ter  plaatse hun prijs ontvangen.</p><p><br></p><p>Vriendelijke groeten,</p><p>Het Bestuur<br></p>",
+    lastUpdate: new Timestamp(Math.round(Date.now() / 1000), 0),
+    visible: true,
 }
 
 export const ARTICLES_JSON: ArticleJson[] = Array(5).fill(ARTICLE)

src/data/CalendarEventsJson.ts

@@ -1,45 +1,21 @@
 import type { CalendarEventJson } from '$lib/domain/CalendarEvent'
 import { Timestamp } from 'firebase/firestore'
 
-export const EVENTS_JSON: CalendarEventJson[] = [
-    {
-        id: "0",
-        date: Timestamp.fromDate(new Date("2023-03-19")),
-        duration: "10:30 - 12:00",
-        location: "Blauwenhoek 76, 1840 Londerzeel",
-        title: "Thematraining- Spurt",
-        info: ""
-    },
-    {
-        id: "1",
-        date: Timestamp.fromDate(new Date("2023-03-26")),
-        duration: "08:00 - 17:00",
-        location: "J. Van Doorslaerstraat 22, 1840 Steenhuffel",
-        title: "Pegasusloop",
-        info: ""
-    },
-    {
-        id: "2",
-        date: Timestamp.fromDate(new Date("2023-05-07")),
-        duration: "Gehele dag",
-        location: "",
-        title: "Interclub AC",
-        info: ""
-    },
-    {
-        id: "3",
-        date: Timestamp.fromDate(new Date("2023-05-13")),
-        duration: "08:00 - 17:00",
-        location: "Blauwenhoek 76, 1840 Londerzeel",
-        title: "Interclub PUP en MIN",
-        info: "De interclub is een groepsgebeuren. Een atleet neemt deel aan één of meerdere van de individuele nummers, de geleverde prestaties"
-    },
-    {
-        id: "4",
-        date: Timestamp.fromDate(new Date("2023-05-18")),
-        duration: "11:00 - 18:00",
-        location: "Blauwenhoek 76, 1840 Londerzeel",
-        title: "3de Pegasus jeugdmeeting",
-        info: "Inschrijvingen via 'Atletiek.nu'"
-    },
-]
+export const CALENDAR_EVENT: CalendarEventJson = {
+    id: "0",
+    date: Timestamp.fromDate(new Date("2023-03-19")),
+    duration: "10:30 - 12:00",
+    location: "Blauwenhoek 76, 1840 Londerzeel",
+    title: "Thematraining- Spurt",
+    info: "",
+    endDate: undefined
+}
+
+
+export const CALENDAR_EVENTS_JSON: CalendarEventJson[] = Array(5).fill(CALENDAR_EVENT)
+    .map((e: CalendarEventJson) => {
+        const newObj = Object.assign({}, e)
+        newObj.id += 1
+        return newObj
+    })
+

src/data/ClubRecordsJson.ts

@@ -20,4 +20,4 @@ export const CLUB_RECORDS_JSON = (ClubRecords as any[]).map(record => {
         return { ...recordsInstance, date: newDate, checked: true }
     })
     return { ...record, records: newRecords } as ClubRecordJson
-})
+})

src/data/LinksJson.ts

@@ -3,13 +3,16 @@ import type { LinkGroupJson } from '$lib/domain/Link'
 export const LINKS_JSON: (LinkGroupJson)[] = [
     {
         name: "De Club", order: 0, links: [
-            { title: "Lid worden", order: 0 },
+            { title: "Clubkledij", order: 0 },
             { title: "Werking", order: 1 },
-            { title: "Clubrecords", order: 2, customUrl: "/records" },
+            { title: "Lid worden", order: 2 },
+            { title: "Clubrecords", order: 3, customUrl: "/records" },
+            { title: "Facebook", order: 4, customUrl: "https://fb.com/PegasusLonderzeel" },
         ]
     },
     {
         name: "Trainingen", order: 1, links: [
+            { title: "Trainers", order: 0 },
             { title: "Trainingen", order: 0 },
         ]
     },
@@ -22,24 +25,24 @@ export const LINKS_JSON: (LinkGroupJson)[] = [
     },
     {
         name: "Activiteiten", order: 3, links: [
-            { title: "Clubweekend", order: 0 },
-            { title: "Atletiekstage", order: 1 },
+            { title: "Clubweekend 2023", order: 0 },
+            { title: "Atletiekstage 2023", order: 1 },
             { title: "Pegasusloop", order: 2 },
         ]
     },
     {
-        name: "Kalender", order: 4, links: [
-            { title: "Kalender", order: 0, customUrl: "/events" },
+        name: "Contact", order: 4, links: [
+            { title: "Contact", order: 0 }
         ]
     },
     {
-        name: "Contact", order: 5, links: [
-            { title: "Contact", order: 0 }
+        name: "Kalender", order: 5, links: [
+            { title: "Kalender", order: 0, customUrl: "/events" },
         ]
     },
     {
-        name: "Facebook", order: 6, links: [
-            { title: "Facebook", order: 0, customUrl: "https://fb.com/PegasusLonderzeel" },
+        name: "Foto's", order: 6, links: [
+            { title: "Foto's", order: 0, customUrl: "/photos" },
         ]
-    }
-]
+    },
+]

src/data/MockSponsorsStore.ts

@@ -0,0 +1,11 @@
+import type { SponsorJson } from "$lib/domain/Sponsor"
+
+export const SPONSOR: SponsorJson = {
+    // id: "0",
+    name: "Mock Sponsor",
+    url: "https://www.google.com/",
+    imageUrl: "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
+    visible: true,
+}
+
+export const SPONSORS_JSON: SponsorJson[] = [SPONSOR]

src/data/PagesJson.ts

@@ -11,4 +11,4 @@ export const PAGE: PageJson = {
     content: "<h1><strong>1. Leeftijd</strong></h1><ul><li>Minimum: <strong>5 jaar zijn</strong> (geboren in 2017)</li></ul><ul><li>Maximum:&nbsp;zolang de gezondheid het toelaat</li></ul><h1><br><strong></strong></h1><h1><strong>2. Aansluiting</strong></h1><p>Een aansluiting (&nbsp;01 Nov Y tot 31 Okt Y+1) omvat</p><ul><li>Begeleide trainingen</li><li>Verzekering tegen sportongevallen</li><li>Aansluiting bij de Vlaamse Atletiekliga (VAL), wedstrijdnummer inbegrepen voor wedstrijdatleten</li></ul><h1><br><strong></strong></h1><h1><strong>3. Lidgelden</strong></h1><p>Aansluiting&nbsp;<strong>wedstrijdatleet</strong>:&nbsp;</p><ul><li>kinderen&nbsp;tot en met cadetten (geboortejaar&nbsp;2017 tot 2008) : 100 euro<br></li><li>vanaf scholieren (geboortejaar&nbsp;2007 en vroeger): 115 euro<br></li></ul><p>Aansluiting&nbsp;<strong>recreant/jogger</strong> (<strong>NIET</strong> voor kinderen)</p><ul><li>&nbsp;recreanten (geboortejaar&nbsp;2007 en vroeger) : 80 euro<br></li></ul><p><strong>Familiekorting</strong>:&nbsp;Vanaf 4de aansluiting, –&nbsp;20 euro&nbsp;voor 4de lid, 5de lid, …..(Gedomicilieerd op zelfde adres)</p><p><strong>Atletiekstagekorting</strong>:&nbsp;Nieuwe aansluitingen&nbsp;die  hebben deelgenomen aan de atletiekstage krijgen een éénmalige korting  van&nbsp;10 euro.&nbsp;(NIET van toepassing bij hernieuwing van een bestaand  lidmaatschap)</p><h1><br><strong></strong></h1><h1><strong>4.Inschijving pas definitief als volgende stappen zijn doorlopen!</strong></h1><ol><li>Inschrijven online:&nbsp;inschrijving via dit&nbsp;<a>formulier</a></li><li>Betalen lidgeld:&nbsp;Overschrijving van het lidgeld op het rekeningnummer van AC Pegasus : <ul><li>vzw:&nbsp;BE64&nbsp;9731&nbsp;8193&nbsp;5052&nbsp; BIC :&nbsp;ARSPBE22&nbsp;.</li><li>Vermeld de naam en voornaam van het lid te vermelden bij de betaling.</li></ul></li><li>Vergunningsaanvraag: in te vullen en te ondertekenen, voor minderjarigen&nbsp;dient dit door één van ouders&nbsp;te gebeuren.&nbsp;<br>Dit document kan u downloaden door op deze&nbsp;<a>link</a>&nbsp;te klikken of bij het bestuur worden bekomen.&nbsp;Gelieve dit formulier in gevuld te mailen naar&nbsp;<a>[email protected]</a>, of worden bezorgd aan de trainer.</li></ol>"
 }
 
-export const PAGES_JSON: PageJson[] = [PAGE]
+export const PAGES_JSON: PageJson[] = [PAGE]

src/data/PhotoAlbumsJson.ts

@@ -0,0 +1,15 @@
+import type { PhotoAlbumJson } from "$lib/domain/PhotoAlbum"
+import { Timestamp } from "firebase/firestore"
+
+export const PHOTO_ALBUM: PhotoAlbumJson = {
+    // id: "0",
+    createdAt: new Timestamp(Math.round(Date.now() / 1000), 0),
+    date: new Timestamp(Math.round(Date.now() / 1000), 0),
+    author: "Author",
+    authorUrl: "https://www.google.com/",
+    title: "Mock Photo Album",
+    imageIds: Array(20).fill(0).map((_, i) => i.toString()),
+    visible: true,
+}
+
+export const PHOTO_ALBUMS_JSON: PhotoAlbumJson[] = [PHOTO_ALBUM]

src/lib/domain/CalendarEvent.ts

@@ -10,7 +10,7 @@ export interface CalendarEventJson {
     location: string
     title: string
     info: string
-    endDate: Timestamp|undefined
+    endDate: Timestamp | undefined
 }
 
 export class CalendarEvent {

src/lib/stores/AnnouncementStore.ts

@@ -145,7 +145,7 @@ function createAnnouncementStore() {
 }
 
 const useMock = convertStringToBool(import.meta.env.VITE_USEMOCKING)
-if (useMock) console.warn("Mocking is on")
+if (useMock) console.warn("Mocking is on for AnnouncementStore")
 export const announcementStore = useMock ?
 	createMockAnnouncementStore() :
 	createAnnouncementStore()

src/lib/stores/ArticleStore.ts

@@ -238,7 +238,7 @@ function createArticleStore() {
 }
 
 const useMock = convertStringToBool(import.meta.env.VITE_USEMOCKING)
-if (useMock) console.warn("Mocking is on")
+if (useMock) console.warn("Mocking is on for ArticleStore")
 export const articleStore = useMock ?
 	createMockArticleStore() :
 	createArticleStore()

src/lib/stores/AuthStore.ts

@@ -131,7 +131,7 @@ function createAuthStore() {
 }
 
 const useMock = convertStringToBool(import.meta.env.VITE_USEMOCKING)
-if (useMock) console.warn("Mocking is on")
+if (useMock) console.warn("Mocking is on for AuthStore")
 /**
  * Store that handles authentication, and profile updates for current user
  */

src/lib/stores/CalendarEventStore.ts

@@ -109,7 +109,7 @@ function createCalendarEventStore() {
 }
 
 const useMock = convertStringToBool(import.meta.env.VITE_USEMOCKING)
-if (useMock) console.warn("Mocking is on")
+if (useMock) console.warn("Mocking is on for CalendarEventStore")
 export const calendarEventStore = useMock ?
 	createMockCalendarEventStore() :
 	createCalendarEventStore()

src/lib/stores/ClubRecordStore.ts

@@ -155,7 +155,7 @@ function createClubRecordStore() {
 }
 
 const useMock = convertStringToBool(import.meta.env.VITE_USEMOCKING)
-if (useMock) console.warn("Mocking is on")
+if (useMock) console.warn("Mocking is on for ClubRecordStore")
 export const clubRecordStore = useMock ?
 	createMockClubRecordStore() :
 	createClubRecordStore()

src/lib/stores/NavbarStore.ts

@@ -211,7 +211,7 @@ function createNavbarStore() {
 }
 
 const useMock = convertStringToBool(import.meta.env.VITE_USEMOCKING)
-if (useMock) console.warn("Mocking is on")
+if (useMock) console.warn("Mocking is on for NavbarStore")
 export const navbarStore = useMock ?
 	createMockNavbarStore() :
 	createNavbarStore()

src/lib/stores/PageStore.ts

@@ -165,7 +165,7 @@ function createPageStore() {
 }
 
 const useMock = convertStringToBool(import.meta.env.VITE_USEMOCKING)
-if (useMock) console.warn("Mocking is on")
+if (useMock) console.warn("Mocking is on for PageStore")
 export const pageStore = useMock ?
 	createMockPageStore() :
 	createPageStore()