minimal ui

frontend/src/App.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
   import "./app.css";
-  import logo from "./assets/images/logo-universal.png";
-  import { Greet } from "../wailsjs/go/main/App.js";
+  import { onMount } from "svelte";
+  import {
+    GetThings,
+    DeleteThing,
+    NewThing,
+  } from "../wailsjs/go/things/Service";
+  import { things } from "../wailsjs/go/models";
   import {
     Navbar,
     NavBrand,
@@ -9,17 +14,37 @@
     Label,
     Input,
     Button,
+    Table,
+    TableHead,
+    TableHeadCell,
+    TableBody,
+    TableBodyRow,
+    TableBodyCell,
   } from "flowbite-svelte";
 
-  let resultText: string = "Please enter your name below 👇";
   let name: string;
+  let thingsList: things.Thing[] = [];
 
-  function greet(): void {
-    Greet(name).then((result) => (resultText = result));
+  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 items-center bg-white dark:bg-gray-900">
+<main class="flex-col h-screen items-center bg-white dark:bg-gray-900">
   <Navbar>
     <NavBrand>
       <span>Wails</span>
@@ -27,16 +52,37 @@
     <DarkMode />
   </Navbar>
 
-  <form class="max-w-96 grid-cols-1 gap-6" on:submit={console.log}>
-    <div>
+  <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" id="first_name" placeholder="John" required />
+      <Input type="text" placeholder="John" bind:value={name} required />
     </div>
-    <div>
-      <Label for="first_name" class="mb-2">First name</Label>
-      <Input type="text" id="first_name" placeholder="John" required />
+    <div class="m-5">
+      <Button type="submit">Submit</Button>
     </div>
-
-    <Button type="submit">Submit</Button>
   </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>