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 { onMount } from "svelte";
-  import { Greet } from "../wailsjs/go/main/App.js";
+  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 {
+  function update() {
-    Greet(name).then((result) => (resultText = result));
+    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}>
+  <form class="max-w-96 m-5 grid-cols-1 gap-10" on:submit={submit}>
-    <div>
+    <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>
+    <div class="m-5">
-      <Label for="first_name" class="mb-2">First name</Label>
+      <Button type="submit">Submit</Button>
-      <Input type="text" id="first_name" placeholder="John" required />
     </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>

frontend/wailsjs/go/models.ts

@@ -0,0 +1,19 @@
+export namespace things {
+	
+	export class Thing {
+	    ID: number;
+	    Name: string;
+	
+	    static createFrom(source: any = {}) {
+	        return new Thing(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.ID = source["ID"];
+	        this.Name = source["Name"];
+	    }
+	}
+
+}
+

frontend/wailsjs/go/things/Service.d.ts

@@ -0,0 +1,9 @@
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+import {things} from '../models';
+
+export function DeleteThing(arg1:number):Promise<void>;
+
+export function GetThings():Promise<Array<things.Thing>>;
+
+export function NewThing(arg1:string):Promise<void>;

frontend/wailsjs/go/things/Service.js

@@ -0,0 +1,15 @@
+// @ts-check
+// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
+// This file is automatically generated. DO NOT EDIT
+
+export function DeleteThing(arg1) {
+  return window['go']['things']['Service']['DeleteThing'](arg1);
+}
+
+export function GetThings() {
+  return window['go']['things']['Service']['GetThings']();
+}
+
+export function NewThing(arg1) {
+  return window['go']['things']['Service']['NewThing'](arg1);
+}

main.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"embed"
+	"wails-svelte-tailwind-ts/things"
 
 	"github.com/wailsapp/wails/v2"
 	"github.com/wailsapp/wails/v2/pkg/options"
@@ -14,6 +15,7 @@ var assets embed.FS
 func main() {
 	// Create an instance of the app structure
 	app := NewApp()
+	things := things.NewThingsService()
 
 	// Create application with options
 	err := wails.Run(&options.App{
@@ -27,6 +29,7 @@ func main() {
 		OnStartup:        app.startup,
 		Bind: []interface{}{
 			app,
+			things,
 		},
 	})
 

things/resource.go

@@ -0,0 +1,43 @@
+package things
+
+import "slices"
+
+type Thing struct {
+	ID   int
+	Name string
+}
+
+type Service struct {
+	things map[int]Thing
+	maxID  int
+}
+
+func NewThingsService() *Service {
+	return &Service{
+		things: make(map[int]Thing),
+	}
+}
+
+func (s *Service) NewThing(name string) {
+	s.maxID++
+	s.things[s.maxID] = Thing{
+		Name: name,
+		ID:   s.maxID,
+	}
+
+	print(name)
+}
+
+func (s *Service) GetThings() []Thing {
+	things := make([]Thing, 0, len(s.things))
+	for _, t := range s.things {
+		things = append(things, t)
+	}
+	slices.SortFunc(things, func(a, b Thing) int { return a.ID - b.ID })
+	return things
+}
+
+func (s *Service) DeleteThing(id int) {
+	delete(s.things, id)
+
+}