Add dashboard features

package.json

@@ -26,7 +26,7 @@
 	"type": "module",
 	"dependencies": {
 		"axios": "^1.5.1",
+		"svelte-geolocation": "^0.3.0",
 		"svelte-maplibre": "^0.5.0"
-
 	}
 }

src/lib/components/Map.svelte

@@ -1,40 +1,23 @@
 <script>
-    import MapMarker from "$lib/components/MapMarker.svelte"
-    import {MapLibre, Marker} from 'svelte-maplibre';
-    
-    import MapIcon from "$lib/assets/map-fill.svg"
-    
-    let cep_input;
-    
-    export let creches;
+    import {MapLibre} from 'svelte-maplibre';
+    import MapMarker from "$lib/components/MapMarker.svelte";
 
+    export let schools = [];
+    export let userCoords;
+    let centerCoords = [userCoords.longitude, userCoords.latitude]
 </script>
 
 <div class=" bg-white border rounded border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
-    <MapLibre 
-        center={[-22.4187,-42.9713]}
-        zoom={2}
-        class="map rounded-xl"
-        standardControls
-        style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json">
-        {#each creches as  creche }
-            <MapMarker {creche}/>
+    <MapLibre
+            center={centerCoords}
+            zoom={10}
+            style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
+            class="relative w-full aspect-[9/16] max-h-[70vh] sm:max-h-full sm:aspect-video"
+            standardControls>
+
+        {#each schools  as school}
+            <MapMarker {school}/>
         {/each}
     </MapLibre>
-    <div class="">
-        <div class="flex mt-6 mb-2 mr-6 ml-6">
-            <label for="default-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Distância</label>
-            <input id="default-range" type="range" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
-        </div>
-        <div class="flex  m-6" >
-            <div class="relative z-0 w-full group">
-                <input type="password" name="floating_password" id="cep-input" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
-                <label for="cep-input" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">CEP</label>
-            </div>
-            <button class="w-full inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Ver escolas proximas</button>
-
-        </div>
-    </div>
-</div>
 
-<style></style>
+</div>

src/lib/components/MapMarker.svelte

@@ -2,17 +2,18 @@
     import("$lib/../app.css")
     import MapIcon from "$lib/assets/book-half.svg"
     import {Marker, Popup} from 'svelte-maplibre';
-    export let creche
-    let lngLat = [creche.logintude,  creche.latitude]
+    export let school
+    let lngLat = [school.longitude,  school.latitude]
+
 </script>
 
 
 
-<Marker {lngLat} class="grid place-items-center bg-">
-    <a href="/escola/{creche.id}">
-        <div class="flex justify-center items-center">
-            <img alt="Marcador {creche.name}" src={MapIcon}/>
-        </div>
-        <div><b>{creche.name}</b></div>
-    </a>
+<Marker
+        {lngLat}
+        class="border-gray-200 border shadow-2xl focus:outline-2 focus:outline-black w-8 h-8 bg-red-300 text-black rounded-full grid place-items-center"
+>
+    <Popup openOn="hover" offset={[0, -10]}>
+        <div class="text-lg font-bold">{school.name}</div>
+    </Popup>
 </Marker>

src/lib/components/Sidebar.svelte

@@ -0,0 +1,91 @@
+<script>
+    import {dashboardSelected} from "../../stores.js";
+</script>
+
+
+<button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="inline-flex items-center p-2 mt-2 ml-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
+    <span class="sr-only">Open sidebar</span>
+    <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
+    </svg>
+</button>
+
+<aside id="logo-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen transition-transform -translate-x-full sm:translate-x-0" aria-label="Sidebar">
+    <div class="h-full px-3 py-4 overflow-y-auto bg-gray-50 dark:bg-gray-800">
+        <a href="https://flowbite.com/" class="flex items-center pl-2.5 mb-5">
+            <img src="./src/lib/assets/logo.png" class="h-6 mr-3 sm:h-7" alt="Lorem Logo">
+            <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Lorem</span>
+        </a>
+        <ul class="space-y-2 font-medium">
+            <li>
+                <a href="#" on:click={() => dashboardSelected.set('Maps')} class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                    <svg class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 22 21">
+                        <path d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"/>
+                        <path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"/>
+                    </svg>
+                    <span class="ml-3">Maps</span>
+                </a>
+            </li>
+            <li>
+                <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                    <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
+                        <path d="M6.143 0H1.857A1.857 1.857 0 0 0 0 1.857v4.286C0 7.169.831 8 1.857 8h4.286A1.857 1.857 0 0 0 8 6.143V1.857A1.857 1.857 0 0 0 6.143 0Zm10 0h-4.286A1.857 1.857 0 0 0 10 1.857v4.286C10 7.169 10.831 8 11.857 8h4.286A1.857 1.857 0 0 0 18 6.143V1.857A1.857 1.857 0 0 0 16.143 0Zm-10 10H1.857A1.857 1.857 0 0 0 0 11.857v4.286C0 17.169.831 18 1.857 18h4.286A1.857 1.857 0 0 0 8 16.143v-4.286A1.857 1.857 0 0 0 6.143 10Zm10 0h-4.286A1.857 1.857 0 0 0 10 11.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 18 16.143v-4.286A1.857 1.857 0 0 0 16.143 10Z"/>
+                    </svg>
+                    <span class="flex-1 ml-3 whitespace-nowrap">Kanban</span>
+                    <span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
+                </a>
+            </li>
+            <li>
+                <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                    <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"/>
+                    </svg>
+                    <span class="flex-1 ml-3 whitespace-nowrap">Inbox</span>
+                    <span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
+                </a>
+            </li>
+            <li>
+                <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                    <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
+                        <path d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z"/>
+                    </svg>
+                    <span class="flex-1 ml-3 whitespace-nowrap">Users</span>
+                </a>
+            </li>
+            <li>
+                <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                    <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 20">
+                        <path d="M17 5.923A1 1 0 0 0 16 5h-3V4a4 4 0 1 0-8 0v1H2a1 1 0 0 0-1 .923L.086 17.846A2 2 0 0 0 2.08 20h13.84a2 2 0 0 0 1.994-2.153L17 5.923ZM7 9a1 1 0 0 1-2 0V7h2v2Zm0-5a2 2 0 1 1 4 0v1H7V4Zm6 5a1 1 0 1 1-2 0V7h2v2Z"/>
+                    </svg>
+                    <span class="flex-1 ml-3 whitespace-nowrap">Products</span>
+                </a>
+            </li>
+            <li>
+                <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                    <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 16">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"/>
+                    </svg>
+                    <span class="flex-1 ml-3 whitespace-nowrap">Sign In</span>
+                </a>
+            </li>
+            <li>
+                <a href="#" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+                    <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.96 2.96 0 0 0 .13 5H5Z"/>
+                        <path d="M6.737 11.061a2.961 2.961 0 0 1 .81-1.515l6.117-6.116A4.839 4.839 0 0 1 16 2.141V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H0v11a1.969 1.969 0 0 0 1.933 2h12.134A1.97 1.97 0 0 0 16 18v-3.093l-1.546 1.546c-.413.413-.94.695-1.513.81l-3.4.679a2.947 2.947 0 0 1-1.85-.227 2.96 2.96 0 0 1-1.635-3.257l.681-3.397Z"/>
+                        <path d="M8.961 16a.93.93 0 0 0 .189-.019l3.4-.679a.961.961 0 0 0 .49-.263l6.118-6.117a2.884 2.884 0 0 0-4.079-4.078l-6.117 6.117a.96.96 0 0 0-.263.491l-.679 3.4A.961.961 0 0 0 8.961 16Zm7.477-9.8a.958.958 0 0 1 .68-.281.961.961 0 0 1 .682 1.644l-.315.315-1.36-1.36.313-.318Zm-5.911 5.911 4.236-4.236 1.359 1.359-4.236 4.237-1.7.339.341-1.699Z"/>
+                    </svg>
+                    <span class="flex-1 ml-3 whitespace-nowrap">Sign Up</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+</aside>
+
+<div class="p-4 sm:ml-64">
+    <div class="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700">
+        <slot name="main">
+
+        </slot>
+    </div>
+</div>

src/routes/dashboard/+page.server.js

@@ -0,0 +1,40 @@
+import {get} from "svelte/store";
+import {userStore} from "../../stores.js";
+import axios from "axios";
+
+export async function load({ params }) {
+    const user = get(userStore);
+    async function getSchools() {
+        let config = {
+            method: 'get',
+            maxBodyLength: Infinity,
+            url: 'http://10.0.7.10:8080/api/v1/school/distance/' + user.Id + '?distance=100',
+            headers: {
+                'Authorization': 'Bearer ' + user.token,
+                'Content-Type': 'application/json'
+            },
+        };
+
+        let result = await axios.request(config);
+        return result.data;
+    }
+    async function getUserCoords() {
+        let config = {
+            method: 'get',
+            maxBodyLength: Infinity,
+            url: 'http://10.0.7.10:8080/api/v1/users/' + user.Id,
+            headers: {
+                'Authorization': 'Bearer ' + user.token,
+                'Content-Type': 'application/json'
+            },
+        };
+
+        let result = await axios.request(config);
+
+        return { latitude: result.data.latitude, longitude: result.data.longitude}
+    }
+    return {
+        userCoords: getUserCoords(),
+        schools: getSchools()
+    }
+}

src/routes/dashboard/+page.svelte

@@ -0,0 +1,16 @@
+<script>
+    import Map from "$lib/components/Map.svelte"
+    import Sidebar from "$lib/components/Sidebar.svelte";
+
+    import {dashboardSelected} from "../../stores.js";
+    export let data;
+
+</script>
+
+<Sidebar>
+    <span slot="main">
+        {#if $dashboardSelected === 'Maps'}
+        <Map userCoords={data.userCoords} schools={data.schools}/>
+        {/if}
+    </span>
+</Sidebar>

src/stores.js

@@ -1,3 +1,4 @@
 import {writable} from "svelte/store";
 
-export let userStore  = writable({})
+export let userStore  = writable({})
+export let dashboardSelected = writable('Maps');