WIP

ui/src/App.svelte

@@ -3,38 +3,28 @@
 </svelte:head>
 
 <script lang="ts">
-    import PackageList from "./PackageList.svelte"
-	export let name: string;
+    import PackageLists from "./routes/PackageLists.svelte";
 
-    async function getUsers() {
-        let response = await fetch("http://localhost:9000/v1/lists", {
-            method: "GET",
-            headers: {
-                "Accept": "application/json"
-            },
-            cache: "no-store",
-        });
-        let users = await response.json();
-        return users;
+    $: {
+        const path = window.location.pathname;
+        console.log(`Routing ${path}`);
+
+        let component;
+
+        if (path == "/") {
+            window.location.replace("/lists/");
+        } else if (path == "/lists/") {
+            console.log("Routing to package lists");
+            component = PackageLists;
+        } else if (path.startswith("/lists/")) {
+            console.log("hm");
+        } else {
+            console.log("No matching route found");
+        }
     }
 
-    const promise = getUsers()
 </script>
 
 <main>
-    <div>
-        {#await promise}
-            <p>Loading</p>
-        {:then lists}
-            <div class="m-2 grid grid-cols-3 gap-5 items-start grid-flow-row">
-                {#each lists as list}
-                    <div class="p-3 border rounded-lg border-gray-300 shadow hover:shadow-xl bg-gradient-to-br bg-blue-300 bg-opacity-50 hover:bg-opacity-100">
-                        <PackageList data={list} />
-                    </div>
-                {/each}
-            </div>
-        {:catch error}
-            <p>Something went wrong</p>
-        {/await}
-    </div>
+    <svelte:component this={component} />
 </main>

ui/src/components/PackageList.svelte

@@ -2,7 +2,9 @@
     import PackageItem from "./PackageItem.svelte"
     import { fade, fly, draw } from 'svelte/transition';
 
-    export let data;
+    export let name;
+    export let items;
+    export let id;
 
     let active = false;
     let shown_items = [];
@@ -15,17 +17,21 @@
         active = false
     }
 
-    $: if (data.items.length <= 4) {
-        shown_items = data.items
+    $: if (items.length <= 4) {
+        shown_items = items
         ellipsed = false
     } else {
-        shown_items = data.items.slice(0, !active && 3 || data.items.length)
+        shown_items = items.slice(0, !active && 3 || items.length)
         ellipsed = true
     }
+
+    function onClick(e) {
+        window.location = `/lists/${e}`;
+    }
 </script>
 
-<main on:mouseenter={enter} on:mouseleave={leave}>
-    <h2 class="text-lg font-semibold text-center mb-5 mt-3">{data.name}</h2>
+<main on:mouseenter={enter} on:mouseleave={leave} on:click={onClick(id)}>
+    <h2 class="text-lg font-semibold text-center mb-5 mt-3">{name}</h2>
     <ul class="list-disc ml-5">
     {#each shown_items as item}
         <li in:fade|local={{duration: 200}} out:fade|local={{duration: 100, delay: 100}}><PackageItem data={item} /></li>

ui/src/main.ts

@@ -3,7 +3,6 @@ import App from './App.svelte';
 const app = new App({
 	target: document.body,
 	props: {
-		name: 'world'
 	}
 });
 

ui/src/routes/PackageLists.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import PackageList from "../components/PackageList.svelte"
+
+    async function getUsers() {
+        let response = await fetch("http://localhost:9000/v1/lists", {
+            method: "GET",
+            headers: {
+                "Accept": "application/json"
+            },
+            cache: "no-store",
+        });
+        let users = await response.json();
+        return users;
+    }
+</script>
+
+<main>
+    <div>
+        {#await getUsers()}
+            <p>Loading</p>
+        {:then lists}
+            <div class="m-2 grid grid-cols-3 gap-5 items-start grid-flow-row">
+                {#each lists as list}
+                    <div class="p-3 border rounded-lg border-gray-300 shadow hover:shadow-xl bg-gray-100 bg-opacity-30 hover:bg-opacity-100">
+                        <PackageList id={list.id} name={list.name} items={list.items}/>
+                    </div>
+                {/each}
+            </div>
+        {:catch error}
+            <p>Something went wrong</p>
+        {/await}
+    </div>
+</main>