schreifuchs/wails-template
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add router

Browse Source
This commit is contained in:
u80864958 2025-02-07 09:20:00 +01:00
parent e7b89e4ef7
commit a0d3821eaf
5 changed files with 94 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/package.json
View File

@ -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",

2
frontend/package.json.md5
View File

@ -1 +1 @@
7af4c5f1467cf72f836d6b1c3881a5a4
a5a8c3695f34d6c9bafb2ee7f70bf99a

8
frontend/pnpm-lock.yaml
View File

@ -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:

84
frontend/src/App.svelte
View File

@ -1,47 +1,10 @@
<script lang="ts">
import "./app.css";
import { onMount } from "svelte";
import {
GetThings,
DeleteThing,
NewThing,
} 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);
import { Navbar, NavBrand, DarkMode } from "flowbite-svelte";
import { Router, Route } from "svelte-routing";
import Home from "./routes/Home.svelte";
import "./app.css";
export let url = "";
</script>
<main class="flex-col h-screen items-center bg-gray-50 dark:bg-gray-800">
@ -51,38 +14,9 @@
</NavBrand>
<DarkMode />
</Navbar>
<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 />
<Router {url}>
<div>
<Route path="/"><Home /></Route>
</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>
</Router>
</main>

75
frontend/src/routes/Home.svelte Normal file
View File

@ -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>