add a route

frontend/src/App.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
   import "./app.css";
   import { Router, Route, Link, navigate } from "svelte-routing";
-  import Home from "./routes/Home.svelte";
+  import Things from "./routes/Things.svelte";
   import "./app.css";
-  import { Navbar, DarkMode, Heading } from "flowbite-svelte";
+  import { Navbar, DarkMode } from "flowbite-svelte";
   import { HomeOutline } from "flowbite-svelte-icons";
+  import Thing from "./routes/Thing.svelte";
   let url: string = $state("/");
+  $effect(() => {
+    console.log(url);
+  });
 </script>
 
 <div
@@ -23,7 +27,10 @@
       <DarkMode />
     </Navbar>
     <main class="size-full max-h-full max-w-full overflow-scroll">
-      <Route path="/"><Home /></Route>
+      <Route path="/"><Things /></Route>
+      <Route path="/things/:id" let:params>
+        <Thing thingID={parseInt(params.id)} />
+      </Route>
     </main>
   </Router>
 </div>

frontend/src/routes/Thing.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { GetThings } from "../../wailsjs/go/things/Service";
+  import { model } from "../../wailsjs/go/models";
+  import { onMount } from "svelte";
+  import { Heading } from "flowbite-svelte";
+
+  let { thingID }: { thingID: number } = $props();
+  let thing: model.Thing = $state(new model.Thing());
+
+  function update() {
+    GetThings().then((ts) => {
+      ts.forEach((t) => {
+        if (t.ID === thingID) {
+          thing = t;
+        }
+      });
+    });
+  }
+  onMount(update);
+</script>
+
+<div class="m-5">
+  <Heading>
+    {thing.Name}
+  </Heading>
+</div>

frontend/src/routes/Things.svelte

@@ -17,6 +17,7 @@
     TableBodyRow,
     TableBodyCell,
   } from "flowbite-svelte";
+  import { navigate } from "svelte-routing";
 
   let name: string = $state();
   let thingsList: model.Thing[] = $state([]);
@@ -33,10 +34,6 @@
     name = "";
   }
 
-  function deleteEvent(id: number) {
-    DeleteThing(id).then(update);
-  }
-
   onMount(update);
 </script>
 
@@ -53,6 +50,7 @@
   <TableHead>
     <TableHeadCell>ID</TableHeadCell>
     <TableHeadCell>Name</TableHeadCell>
+    <TableHeadCell>View</TableHeadCell>
     <TableHeadCell>Delete</TableHeadCell>
   </TableHead>
   <TableBody>
@@ -65,8 +63,13 @@
         <TableBodyCell>
           {t.Name}
         </TableBodyCell>
+
         <TableBodyCell>
-          <Button on:click={(_) => deleteEvent(t.ID)}>Delete</Button>
+          <Button onclick={() => navigate(`/things/${t.ID}`)}>View</Button>
+        </TableBodyCell>
+
+        <TableBodyCell>
+          <Button onclick={() => DeleteThing(t.ID).then(update)}>Delete</Button>
         </TableBodyCell>
       </TableBodyRow>
     {/each}

setup.sh

@@ -4,7 +4,7 @@
 CURRENT_DIR_NAME=$(basename "$PWD")
 
 # Define the files to be updated
-FILES=("main.go" "go.mod" "wails.json")
+FILES=("main.go" "go.mod" "wails.json" "things/resource.go")
 
 # String to be replaced
 OLD_STRING="wails-template"