add router

frontend/package.json

@@ -19,6 +19,7 @@
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.10.7",
+    "svelte-routing": "^2.13.0",
     "tailwindcss": "^3.4.9",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4",

frontend/package.json.md5

@@ -1 +1 @@
-7af4c5f1467cf72f836d6b1c3881a5a4
+a5a8c3695f34d6c9bafb2ee7f70bf99a

frontend/pnpm-lock.yaml

@@ -35,6 +35,9 @@ importers:
       svelte-preprocess:
         specifier: ^4.10.7
         version: 4.10.7(postcss-load-config@4.0.2(postcss@8.5.1))(postcss@8.5.1)(sass@1.83.4)(svelte@3.59.2)(typescript@4.9.5)
+      svelte-routing:
+        specifier: ^2.13.0
+        version: 2.13.0
       tailwindcss:
         specifier: ^3.4.9
         version: 3.4.17
@@ -979,6 +982,9 @@ packages:
       typescript:
         optional: true
 
+  svelte-routing@2.13.0:
+    resolution: {integrity: sha512-/NTxqTwLc7Dq306hARJrH2HLXOBtKd7hu8nxgoFDlK0AC4SOKnzisiX/9m8Uksei1QAWtlAEdF91YphNM8iDMg==}
+
   svelte@3.59.2:
     resolution: {integrity: sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==}
     engines: {node: '>= 8'}
@@ -1928,6 +1934,8 @@ snapshots:
       sass: 1.83.4
       typescript: 4.9.5
 
+  svelte-routing@2.13.0: {}
+
   svelte@3.59.2: {}
 
   svg.draggable.js@2.2.2:

frontend/src/App.svelte

@@ -1,47 +1,10 @@
 <script lang="ts">
   import "./app.css";
-  import { onMount } from "svelte";
+  import { Navbar, NavBrand, DarkMode } from "flowbite-svelte";
-  import {
+  import { Router, Route } from "svelte-routing";
-    GetThings,
+  import Home from "./routes/Home.svelte";
-    DeleteThing,
+  import "./app.css";
-    NewThing,
+  export let url = "";
-  } from "../wailsjs/go/things/Service";
-  import { things } from "../wailsjs/go/models";
-  import {
-    Navbar,
-    NavBrand,
-    DarkMode,
-    Label,
-    Input,
-    Button,
-    Table,
-    TableHead,
-    TableHeadCell,
-    TableBody,
-    TableBodyRow,
-    TableBodyCell,
-  } from "flowbite-svelte";
-
-  let name: string;
-  let thingsList: things.Thing[] = [];
-
-  function update() {
-    GetThings().then((ts) => {
-      thingsList = ts;
-    });
-  }
-
-  function submit(e: Event) {
-    e.preventDefault();
-    NewThing(name).then(update);
-    name = "";
-  }
-
-  function deleteEvent(id: number) {
-    DeleteThing(id).then(update);
-  }
-
-  onMount(update);
 </script>
 
 <main class="flex-col h-screen items-center bg-gray-50 dark:bg-gray-800">
@@ -51,38 +14,9 @@
     </NavBrand>
     <DarkMode />
   </Navbar>
-
+  <Router {url}>
-  <form class="max-w-96 m-5 grid-cols-1 gap-10" on:submit={submit}>
+    <div>
-    <div class="m-5">
+      <Route path="/"><Home /></Route>
-      <Label for="first_name" class="mb-2">First name</Label>
-      <Input type="text" placeholder="John" bind:value={name} required />
     </div>
-    <div class="m-5">
+  </Router>
-      <Button type="submit">Submit</Button>
-    </div>
-  </form>
-  <Table>
-    <TableHead>
-      <TableHeadCell>ID</TableHeadCell>
-      <TableHeadCell>Name</TableHeadCell>
-
-      <TableHeadCell>Delete</TableHeadCell>
-    </TableHead>
-    <TableBody>
-      {#each thingsList as t}
-        <TableBodyRow>
-          <TableBodyCell>
-            {t.ID}
-          </TableBodyCell>
-
-          <TableBodyCell>
-            {t.Name}
-          </TableBodyCell>
-          <TableBodyCell>
-            <Button on:click={(_) => deleteEvent(t.ID)}>Delete</Button>
-          </TableBodyCell>
-        </TableBodyRow>
-      {/each}
-    </TableBody>
-  </Table>
 </main>

frontend/src/routes/Home.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import {
+    GetThings,
+    DeleteThing,
+    NewThing,
+  } from "../../wailsjs/go/things/Service";
+  import { things } from "../../wailsjs/go/models";
+  import {
+    Label,
+    Input,
+    Button,
+    Table,
+    TableHead,
+    TableHeadCell,
+    TableBody,
+    TableBodyRow,
+    TableBodyCell,
+  } from "flowbite-svelte";
+
+  let name: string;
+  let thingsList: things.Thing[] = [];
+
+  function update() {
+    GetThings().then((ts) => {
+      thingsList = ts;
+    });
+  }
+
+  function submit(e: Event) {
+    e.preventDefault();
+    NewThing(name).then(update);
+    name = "";
+  }
+
+  function deleteEvent(id: number) {
+    DeleteThing(id).then(update);
+  }
+
+  onMount(update);
+</script>
+
+<form class="max-w-96 m-5 grid-cols-1 gap-10" on:submit={submit}>
+  <div class="m-5">
+    <Label for="first_name" class="mb-2">First name</Label>
+    <Input type="text" placeholder="John" bind:value={name} required />
+  </div>
+  <div class="m-5">
+    <Button type="submit">Submit</Button>
+  </div>
+</form>
+<Table>
+  <TableHead>
+    <TableHeadCell>ID</TableHeadCell>
+    <TableHeadCell>Name</TableHeadCell>
+
+    <TableHeadCell>Delete</TableHeadCell>
+  </TableHead>
+  <TableBody>
+    {#each thingsList as t}
+      <TableBodyRow>
+        <TableBodyCell>
+          {t.ID}
+        </TableBodyCell>
+
+        <TableBodyCell>
+          {t.Name}
+        </TableBodyCell>
+        <TableBodyCell>
+          <Button on:click={(_) => deleteEvent(t.ID)}>Delete</Button>
+        </TableBodyCell>
+      </TableBodyRow>
+    {/each}
+  </TableBody>
+</Table>