From 67a2d0be1e3c8d19be54e947cf19faed1c0870fa Mon Sep 17 00:00:00 2001
From: Matthieu Morin <matthieu.bernard.morin@gmail.com>
Date: Fri, 5 Apr 2024 14:37:03 +0200
Subject: [PATCH] Services layouts update + filling empty routing pages

---
 .../components/services/ServiceCard.svelte    | 21 +++---
 .../components/services/ServicesLayout.svelte | 33 +++------
 src/routes/o-mne/+page.svelte                 |  3 +
 src/routes/sluzby/+page.svelte                | 72 +++----------------
 src/routes/sluzby/[categoryId]/+page.svelte   |  0
 .../[categoryId]/[serviceId]/+page.svelte     | 12 ++++
 6 files changed, 44 insertions(+), 97 deletions(-)
 create mode 100644 src/routes/sluzby/[categoryId]/+page.svelte
 create mode 100644 src/routes/sluzby/[categoryId]/[serviceId]/+page.svelte

diff --git a/src/lib/components/services/ServiceCard.svelte b/src/lib/components/services/ServiceCard.svelte
index a25bde3..fa2c4f6 100644
--- a/src/lib/components/services/ServiceCard.svelte
+++ b/src/lib/components/services/ServiceCard.svelte
@@ -3,26 +3,27 @@
 	import type { Service } from '$lib/types/service';
     import convertMinutesToHours from '$lib/utils/minToH';
 
-    export let item: Service['items'][number];
+    export let service: Service[][number];
 
 </script>
 
-<a href="/sluzby/{item.id}" id="{item.id}"class="w-72 card variant-glass-secondary mx-2 my-4 duration-500 hover:scale-105 hover:shadow-xl shadow-md">
+<a href="/sluzby/{service.id}" id="{service.id}"class="w-72 card variant-glass-secondary mx-2 my-4 duration-500 hover:scale-105 hover:shadow-xl shadow-md">
     <header>
-        <img src={getImageLink({id: item.id, w: 288, h: 320 })} class="bg-black/50 object-cover aspect-[9/10] rounded-t-xl" alt="Post" loading="lazy" />
+        // getImageLink maps all image links based on the services id, needs cloudinary implementation to work. 
+        <!-- <img src={getImageLink({id: service.id, w: 288, h: 320 })} class="bg-black/50 object-cover aspect-[9/10] rounded-t-xl" alt="Post" loading="lazy" /> -->
     </header>
-    <!-- <div class="img" style="background-image: url('/images/services/{item.id}.jpg');"/>                -->
+    <!-- <div class="img" style="background-image: url('/images/services/{service.id}.jpg');"/>                -->
     <div class="flex flex-col px-4 py-3 w-72 h-full">
         <div class="flex flex-row justify-between px-2 gap-y-2">
-            <h3 class="h3 font-semibold w-full">{item.name}</h3>
+            <h3 class="h3 font-semibold w-full">{service.title}</h3>
             
         </div>
         <article>
             <p class="text-gray-800 font-medium hidden md:block mb-4">
-                {item.description}
+                {service.description}
             </p>
             <a 
-                href="/sluzby/{item.id}" 
+                href="/sluzby/{service.id}" 
                 class="text-primary-600 hover:text-primary-800 underline mb-2 md:mb-0">
                 ...Zjistěte více
                 </a>
@@ -32,11 +33,11 @@
         <footer class="justify-self-end align-bottom">
             <div class="flex flex-col md:flex-row md:justify-between items-center">
                 <p class=" text-lg text-surface-900 font-semibold text-right">
-                    {typeof item.price === 'number' ? `${item.price},-` : item.price}
-                    {typeof item.duration === 'number' ? `/${convertMinutesToHours(item.duration)}` : ''}
+                    {typeof service.price === 'number' ? `${service.price},-` : service.price}
+                    {typeof service.duration === 'number' ? `/${convertMinutesToHours(service.duration)}` : ''}
                 </p>
                 <a 
-                href="https://app.cal.com/kkosmetickysalon/{item.id}" 
+                href="https://app.cal.com/kkosmetickysalon/{service.id}" 
                 class="btn btn-md variant-filled-primary">
                 Rezervace
                 </a>
diff --git a/src/lib/components/services/ServicesLayout.svelte b/src/lib/components/services/ServicesLayout.svelte
index 12fc421..1859885 100644
--- a/src/lib/components/services/ServicesLayout.svelte
+++ b/src/lib/components/services/ServicesLayout.svelte
@@ -1,43 +1,30 @@
-
 <script lang="ts">
-    import type { Service } from '$lib/types/service'; 
+    import type { Category } from '$lib/types/service'; 
     import ServiceCard from '$lib/components/services/ServiceCard.svelte';
     import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
 
-    export let services: Service[] = [];
+    export let category: Category[] = [];
 </script>
 
-
+<section>
     <Accordion class="bg-surface-100 w-full md:card p-4 md:max-w-[75%]">
-        {#each services as service}
+        {#each category as c}
             <AccordionItem on>
                 <svelte:fragment slot="lead">
-                    <i class="fa-solid fa-wand-magic-sparkles text-xl w-6 text-center" />
+                    <i class="fa-solid fa-wand-magic-sparkles text-xl w-6 text-center" /> 
+                    <h2 class="h2 text-bold">{c.title}</h2>
                 </svelte:fragment>
                 <svelte:fragment slot="summary">
-                    <p class="text-lg font-bold">{service.category}</p>
+                    <p class="text-base">{c.description}</p>
                 </svelte:fragment>
                 <svelte:fragment slot="content">
                     <div class="w-fit mx-auto flex flex-wrap justify-center justify-items-center gap-y-6 gap-x-8 mt-8 mb-5">
-                        {#each service.items as item} 
-                                <ServiceCard {item} />
+                        {#each c.services as service} 
+                                <ServiceCard {service} />
                         {/each}
                     </div>
                 </svelte:fragment>
             </AccordionItem>
         {/each}
     </Accordion>
-
-    
-
-<style lang="postcss">
-    /* .services-container {
-        @apply grid md:grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 p-4;
-    } 
-    @media (max-width: 768px) {
-        .services-container {
-            @apply grid-cols-1;
-        }
-    }*/ 
-    
-</style>
+</section>
diff --git a/src/routes/o-mne/+page.svelte b/src/routes/o-mne/+page.svelte
index e69de29..220a4ef 100644
--- a/src/routes/o-mne/+page.svelte
+++ b/src/routes/o-mne/+page.svelte
@@ -0,0 +1,3 @@
+<script lang="ts">
+
+</script>
diff --git a/src/routes/sluzby/+page.svelte b/src/routes/sluzby/+page.svelte
index a693eba..9afa9d9 100644
--- a/src/routes/sluzby/+page.svelte
+++ b/src/routes/sluzby/+page.svelte
@@ -1,73 +1,17 @@
 <script lang="ts">
+    import Spinner from '$lib/components/Spinner.svelte';
     import ServicesLayout from '$lib/components/services/ServicesLayout.svelte';
     import type { Service } from '$lib/types/service';
-    export const id = '';
-
-    // Locally populated services
-    let services: Service[] = [
-        {
-            category: 'Permanentní make-up',
-            items: [
-                { name: 'Obočí Pudrové, Ombré', description: 'Diagnostika pleti, odlíčení tonizace', id: 'oboci',price: 3000, duration: 2.5 },
-                { name: 'Horní linky - meziřasové přirozené', description: 'Diagnostika pleti, odlíčení tonizace', id: 'linky', price: 2000, duration: 2 },
-                { name: 'Klasické linky - s ocáskem', description: 'Diagnostika pleti, odlíčení tonizace', id: 'classic-linky', price: 3000, duration: 2.5 },
-                { name: 'Klasické linky - s ocáskem + spodní linky', description: 'Diagnostika pleti, odlíčení tonizace', id: 'classic-linky+spodni', price: 3500, duration: 2.5 },
-                { name: 'Rty - kontura', description: 'Diagnostika pleti, odlíčení tonizace', id: 'rty', price: 2500, duration: 2 },
-                { name: '3D Rty (kontura a stínování), Full Lips (plné rty)', description: 'Diagnostika pleti, odlíčení tonizace', id: '3d-rty', price: 3500, duration: 2.5 },
-                { name: 'Aquarelle Lips (přirodní stínování, bez kontury)', description: 'Diagnostika pleti, odlíčení tonizace', id: 'aquarelle', price: 3000, duration: 2 },
-                { name: 'První korekce po aplikaci pmu max. do 3 měsíců', description: 'Diagnostika pleti, odlíčení tonizace', id: 'korekce', price: 1000, duration: 1.5 },
-                { name: 'Oprava práce obočí jiného salonu', description: 'Diagnostika pleti, odlíčení tonizace', id: 'oprava-oboci', price: 'na domluvě', duration: 'na domluvě' }
-            ],
-        },
-        {
-            category: 'Kosmetické ošetření',
-            items: [
-                { name: 'ZÁKLADNÍ CALM', description: 'Diagnostika pleti, odlíčení tonizace, enzymatický peeling, kavitační peeling -ultarzvuková špachtle, séra dle typu pleti, masky (tvář,krk,dekolt), závěrečná péče (oční a denní krém)', id: 'zakladni-calm', price: 500, duration: 1 },
-                { name: 'ZÁKLADNÍ + CALM PLUS', description:'Diagnostika pleti, odlíčení tonizace, úprava obočí (vosk+pinzeta), barvení řas a obočí, depilace horní ret/brada, enzymatický peeling, kavitační peeling -ultarzvuková špachtle, séra dle typu pleti, masky (tvář,krk,dekolt), závěrečná péče (oční a denní krém)', id: 'zakladni-calm-plus', price: 600, duration: 1 },
-                { name: 'RELAXAČNÍ', id: 'relaxacni', description:'Diagnostika pleti, odlíčení tonizace, úprava obočí (vosk+pinzeta), barvení řas a obočí, depilace horní ret/brada, enzymatický peeling, kavitační peeling -ultarzvuková špachtle, séra, masáž relaxační (tvář,krk dekolt), masky (tvář,krk,dekolt), závěrečná péče (oční a denní krém)', price: 690, duration: 1.5 },
-                { name: 'LIFTINGOVÉ - ANTI AGE', description:'Diagnostika pleti, odlíčení tonizace, úprava obočí (vosk+pinzeta), barvení řas a obočí, depilace horní ret/brada, enzymatický peeling, kavitační peeling -ultarzvuková špachtle, vacupres ošetření – lifting obličeje krku a dekoltu, séra, masky (tvář,krk,dekolt), alginátová maska, závěrečná péče (oční a denní krém)', id: 'liftingove-anti-age', price: 690, duration: 1.5 },
-                { name: 'CLEAR + ANTI AKNÉ', description: 'Diagnostika pleti, odlíčení tonizace', id: 'clear-anti-akne', price: 690, duration: 1.5 },
-                { name: 'Odlíčení + sérum + alginátová maska (PROJASNĚNÍ)', description: 'Diagnostika pleti, odlíčení tonizace', id: 'odliceni-serum-alginatova-maska', price: 300, duration: 1 },
-            ]
-        },
-        {
-            category: 'DALŠÍ VELMI OBLÍBENÉ SLUŽBY',
-            items: [
-                { name: 'Lifting řas booster (botox)', description: 'Diagnostika pleti, odlíčení tonizace', id: 'lifting-ras-booster', price: 500, duration: 1 },
-                { name: 'Laminace obočí + výživa', description: 'Diagnostika pleti, odlíčení tonizace', id: 'laminace-oboci-vyziva', price: 500, duration: 1 },
-                { name: 'Úprava obočí (tvar + barva)', description: 'Diagnostika pleti, odlíčení tonizace', id: 'uprava-oboci-tvar-barva', price: 250, duration: 1 },
-                { name: 'Úprava obočí + řasy (tvar + barvení)', description: 'Diagnostika pleti, odlíčení tonizace', id: 'uprava-oboci-rasy-tvar-barveni', price: 300, duration: 1 },
-            ]
-        },
-        {
-            category: 'Depilace',
-            items: [
-                { name: 'Depilace Horní ret', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-horni-ret', price: 80, duration: 0.5 },
-                { name: 'Depilace Brada', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-brada', price: 80, duration: 0.5 },
-                { name: 'Depilace Obočí', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-oboci', price: 150, duration: 0.5 },
-                { name: 'Depilace Tváře', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-tvare', price: 150, duration: 0.5 },
-                { name: 'Depilace Podpaží', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-podpazi', price: 150, duration: 0.5 },
-                { name: 'Depilace Předloktí', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-predlokti', price: 200, duration: 0.5 },
-                { name: 'Depilace Celé ruce', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-cele-ruce', price: 350, duration: 1 },
-                { name: 'Depilace Lýtka', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-lytka', price: 350, duration: 1 },
-                { name: 'Depilace Celé nohy', description: 'Diagnostika pleti, odlíčení tonizace', id: 'depilace-cele-nohy', price: 500, duration: 1 }
-            ]
-        },
-        {
-            category: 'Vakuslim 48 - zeštíhlující procedura',
-            items: [
-                { name: 'Ošetření horních končetin', description: 'Diagnostika pleti, odlíčení tonizace', id: 'vakuslim-48-zestihlujici-procedura-horni-koncetiny', price: 600, duration: 2 },
-                { name: '1 ošetření spodní části těla (břicho, boky, dolní končetiny)', description: 'Diagnostika pleti, odlíčení tonizace', id: 'vakuslim-48-zestihlujici-procedura-spodni-cast-tela', price: 800, duration: 2 },
-                { name: '1 ošetření komplet horní-dolní části', description: 'Diagnostika pleti, odlíčení tonizace', id: 'vakuslim-48-zestihlujici-procedura-komplet-horni-dolni-cast', price: 1200, duration: 2 },
-                { name: '6 ošetření předplatné kompet', description: 'Diagnostika pleti, odlíčení tonizace', id: 'vakuslim-48-zestihlujici-procedura-6-o-setreni-predplatne-kompet', price: 6600, duration: 2 },
-                { name: '12 ošetření předplatné komplet', description: 'Diagnostika pleti, odlíčení tonizace', id: 'vakuslim-48-zestihlujici-procedura-12-o-setreni-predplatne-komplet', price: 11000, duration: 2 }
-            ]
-        }
-    ];
+    export let services: Service[] = []
 </script>
 
+{#if props.services.length === 0}
+  <Spinner/>
+  <p>Loading services...</p>
+{:else}
 <div class="flex flex-col items-center py-8">
     <h1 class="h1 m-4">Ceník služeb</h1>
     <p class="text-lg text-center font-semibold m-4 pb-8">Koukněte se jak vás mohu zkrášlit a rezervujte si termín</p>
     <ServicesLayout {services} />
-</div>
\ No newline at end of file
+</div>
+{/if}
diff --git a/src/routes/sluzby/[categoryId]/+page.svelte b/src/routes/sluzby/[categoryId]/+page.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/sluzby/[categoryId]/[serviceId]/+page.svelte b/src/routes/sluzby/[categoryId]/[serviceId]/+page.svelte
new file mode 100644
index 0000000..ab9e9eb
--- /dev/null
+++ b/src/routes/sluzby/[categoryId]/[serviceId]/+page.svelte
@@ -0,0 +1,12 @@
+<!-- src/routes/[categoryId]/[serviceId]/+page.svelte -->
+<script lang="ts">
+  import * as conf from '$lib/config'
+  import type { PageData } from './$types';
+  import { SEO } from '$lib/components/SEO.svelte';
+
+  export let data: PageData;
+</script>
+
+<SEO seoData={data}/>
+
+<!-- Your service content goes here -->