Merge branch 'v2' of https://git.server.flayks.com/cetrucflotte/housesof into v2

# Conflicts:
#	src/routes/photos.svelte

src/components/atoms/DiscoverText.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+
+    const { count }: any = getContext('global')
+</script>
+
+<p class="discover">
+    Discover <strong>{count.photos} homes</strong><br>
+    from <strong>{count.locations} cities</strong>
+    of <strong>{count.countries} countries</strong>
+</p>

src/components/molecules/Select.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    interface Option {
+        value: string
+        name: string
+    }
+
+    export let id: string
+    export let name: string
+    export let base: Option
+    export let options: Option[]
+
+    const dispatch = createEventDispatcher()
+
+    let current: number = 0
+    let currentOptionEl: HTMLElement
+    $: currentOption = options[current]
+
+
+    /**
+     * When changing select value
+     */
+    const handleChange = ({ target: { value }}: any) => {
+        current = options.findIndex(option => option.value === value)
+
+        // Dispatch event to parent
+        dispatch('change', options[current].value)
+    }
+</script>
+
+<div class="select">
+    <slot />
+
+    <span bind:this={currentOptionEl}>
+        {currentOption.name}
+    </span>
+
+    <select {name} {id} on:change={handleChange}>
+        {#each options as { value, name }}
+            <option {value}>
+                {name}
+            </option>
+        {/each}
+    </select>
+</div>

src/modules/globe/index.js

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { Renderer } from './beam'
 import { Camera } from './beam'
 import { vec2, vec3, mat4 } from './beam'

src/routes/__layout.svelte

@@ -28,7 +28,7 @@
     export async function load ({ page, session, fetch, context }) {
         const res = await fetchAPI(`
             query {
-                location {
+                location (filter: { status: { _eq: "published" }}) {
                     name
                     slug
                     coordinates
@@ -48,7 +48,7 @@
                     }
                 }
 
-                country {
+                country (filter: { status: { _eq: "published" }}) {
                     name
                     slug
                     flag {

src/routes/index.svelte

@@ -5,6 +5,7 @@
     import Metas from '$components/Metas.svelte'
     import Button from '$components/atoms/Button.svelte'
     import BoxCTA from '$components/atoms/BoxCTA.svelte'
+    import DiscoverText from '$components/atoms/DiscoverText.svelte'
     import PhotoCard from '$components/molecules/PhotoCard.svelte'
     import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
     import Locations from '$components/organisms/Locations.svelte'
@@ -13,7 +14,7 @@
 
     export let photos: any
 
-    const { settings, location, count }: any = getContext('global')
+    const { settings, location }: any = getContext('global')
     const { path } = $page
 </script>
 
@@ -43,11 +44,7 @@
     </section>
 
     <div class="homepage__ctas" id="ctas">
-        <p class="discover">
-            Discover <strong>{count.photos} homes</strong><br>
-            from <strong>{count.locations} cities</strong>
-            of <strong>{count.countries} countries</strong>
-        </p>
+        <DiscoverText />
 
         <div class="cards">
             <BoxCTA

src/routes/photos.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
     import { getContext } from 'svelte'
-    import { page } from '$app/stores'
     // Components
     import Metas from '$components/Metas.svelte'
     import Button from '$components/atoms/Button.svelte'
@@ -11,8 +10,25 @@
 
     export let photos: any
 
-    const { settings, location, count }: any = getContext('global')
-    const { path } = $page
+    const { country: countries }: any = getContext('global')
+
+    let filtered: boolean = false
+    let buttonReset: HTMLElement
+    let buttonShuffle: HTMLElement
+
+
+    /**
+     * Select change events
+     */
+    // Location select
+    const handleLocationChange = ({ detail: value }) => {
+        console.log(value)
+    }
+
+    // Sort select
+    const handleSortChange = ({ detail: value }) => {
+        console.log(value)
+    }
 </script>
 
 <Metas
@@ -24,11 +40,8 @@
 <main class="photos">
     <section class="photos__intro">
         <h1 class="title-huge">Houses</h1>
-        <p class="discover">
-            Discover <strong>{count.photos} homes</strong><br>
-            from <strong>{count.locations} cities</strong>
-            of <strong>{count.countries} countries</strong>
-        </p>
+
+        <DiscoverText />
 
         <div class="filter">
             <span class="text-label filter__label">Filter photos</span>
@@ -36,29 +49,44 @@
             <div class="filter__bar">
                 <ul>
                     <li>
-                        <div class="select">
+                        <Select
+                            name="location" id="filter_location"
+                            base={{ value: 'all', name: 'Worldwide' }}
+                            options={[
+                                { value: 'all', name: 'Worldwide' },
+                                ...countries.map(({ slug, name }) => ({
+                                    value: slug,
+                                    name
+                                }))
+                            ]}
+                            on:change={handleLocationChange}
+                        >
                             <img src="/images/icons/earth.svg" alt="Earth">
-                            <span>Worldwide</span>
-                            <select name="location" id="filter_location">
-                                <option value="worldwide">Worldwide</option>
-                            </select>
-                        </div>
+                        </Select>
                     </li>
                     <li>
-                        <div class="select">
+                        <Select
+                            name="sort" id="filter_sort"
+                            base={{ value: 'all', name: 'Worldwide' }}
+                            options={[
+                                { value: 'latest', name: 'Latest photos' },
+                                { value: 'oldest', name: 'Oldest photos' },
+                            ]}
+                            on:change={handleSortChange}
+                        >
                             <img src="/images/icons/sort.svg" alt="Sort">
-                            <span>Worldwide</span>
-                            <select name="location" id="filter_location">
-                                <option value="worldwide">Worldwide</option>
-                            </select>
-                        </div>
+                        </Select>
                     </li>
                 </ul>
             </div>
 
             <div class="filter__actions">
-                <a href="#">Reset</a>
-                <button class="shuffle">
+                {#if filtered}
+                    <button class="reset button-link" bind:this={buttonReset}>
+                        Reset
+                    </button>
+                {/if}
+                <button class="shuffle" bind:this={buttonShuffle}>
                     <img src="/images/icons/shuffle.svg" alt="">
                 </button>
             </div>

src/style/pages/_photos.scss

@@ -44,7 +44,7 @@
             @include bp (sm) {
                 position: absolute;
                 left: 64px;
-                top: 50%;
+                top: 52%;
                 transform: translateY(-50%);
                 margin-bottom: 0;
             }
@@ -54,8 +54,9 @@
             display: flex;
             justify-content: center;
             align-items: center;
+            height: 72px;
             margin: 20px 0;
-            padding: 20px 22px;
+            padding: 0 22px;
             background: $color-primary-darker;
             border-radius: 50vh;
 
@@ -76,7 +77,7 @@
                 color: #fff;
 
                 @include bp (sm) {
-                    margin: 0 16px;
+                    margin: 0 2px;
                 }
             }
             img {
@@ -90,7 +91,12 @@
 
             .select {
                 position: relative;
+                display: flex;
+                align-items: center;
+                padding: 8px 16px;
                 font-weight: 900;
+                border-radius: 100vh;
+                transition: background-color 0.2s;
 
                 select {
                     opacity: 0;
@@ -101,6 +107,10 @@
                     height: 100%;
                     cursor: pointer;
                 }
+
+                &:hover {
+                    background-color: $color-primary-tertiary20;
+                }
             }
         }
 
@@ -112,8 +122,8 @@
 
             @include bp (sm) {
                 position: absolute;
-                right: 64px;
                 top: 50%;
+                right: 56px;
                 transform: translateY(-50%);
             }
 
@@ -129,6 +139,17 @@
                     display: block;
                 }
             }
+
+            // Reset link
+            .reset {
+                transition: color 0.3s;
+
+                &:hover {
+                    color: $color-tertiary;
+                }
+            }
+
+            // Shuffle button
             .shuffle {
                 display: flex;
                 align-items: center;