WIP

ui/src/App.svelte

@@ -3,29 +3,58 @@
 </svelte:head>
 
 <script lang="ts">
-    import PackageLists from "./routes/PackageLists.svelte";
     import Home from "./routes/Home.svelte";
+    import PackageLists from "./routes/PackageLists.svelte";
+    import PackageList from "./routes/PackageList.svelte";
 
-    $: {
-        const path = window.location.pathname;
-        console.log(`Routing ${path}`);
+    function normalize(path) {
+        return path.replace(/\/+$/, '') + "/";
+    }
 
-        let component;
+    let currentRoute;
+    let data;
 
-        if (path == "/") {
-            compontent = Home;
-        } else if (path == "/lists/") {
-            console.log("Routing to package lists");
-            component = PackageLists;
-        } else if (path.startswith("/lists/")) {
-            console.log("hm");
+    function route(path) {
+        path = normalize(path);
+        console.log(`Routing path "${path}"`);
+        data = {}
+
+        let urlParts = path.split("/").slice(1, -1);
+
+        if (path === "/") {
+            console.log("=> Home");
+            currentRoute = Home;
+        } else if (urlParts[0] == "lists" && urlParts.length == 1) {
+            console.log("=> PackageLists");
+            currentRoute = PackageLists;
+        } else if (urlParts[0] == "lists" && urlParts.length == 2) {
+            console.log("=> PackageList");
+            currentRoute = PackageList;
+            data = {id: urlParts[1]};
         } else {
             console.log("No matching route found");
         }
     }
 
+    window.onload = e => {
+        route(window.location.pathname);
+    }
+
+    function redirect(path) {
+        history.pushState({id: path}, "", path);
+        route(path);
+    }
+
+    window.addEventListener("locationchange", function() {
+        route(window.location.pathname);
+    });
+
+    window.addEventListener("popstate", event => {
+        route(window.location.pathname);
+    });
+
 </script>
 
 <main>
-    <svelte:component this={component} />
+    <svelte:component this={currentRoute} redirect={redirect} data={data}/>
 </main>