dave/calorie-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
Fractal-Tess
2023-05-12 23:30:22 +03:00
parent cd8f3885d8
commit 357a739470
14 changed files with 108 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/router/Router.svelte
View File

@@ -1,19 +1,15 @@
<script lang="ts">
import { Route, router } from 'tinro';
router.mode.hash();
import Router from 'svelte-spa-router';
import Index from '$lib/router/routes/Index.svelte';
import CallTauri from '$router/routes/CallTauri.svelte';
import HashString from '$router/routes/HashString.svelte';
import Versions from '$router/routes/Versions.svelte';
import Transition from '$lib/components/transition/Transition.svelte';
const routes = {
'/': Index,
'/#call_tauri': CallTauri,
'/#versions': Versions
};
</script>
<!-- Fix for linting errors: ->
https://github.com/AlexxNB/tinro/pull/121/commits/d2251ffed630aac6e76e71856204ead5dd2f6661 -->
<Transition>
<Route path="/"><Index /></Route>
<Route path="/call-tauri"><CallTauri /></Route>
<Route path="/hash-string"><HashString /></Route>
<Route path="/versions"><Versions /></Route>
</Transition>
<Router {routes} />

51
src/lib/router/routes/CallTauri.svelte
View File

@@ -2,6 +2,12 @@
import { fade } from 'svelte/transition';
import { invoke } from '@tauri-apps/api';
let hashInput = 'Hello world';
let hashOutput = '';
$: (async () => {
hashOutput = await invoke('hash256sum', { hashInput });
})();
let message = '';
async function callTauri() {
@@ -9,20 +15,33 @@
}
</script>
<div class="h-full flex flex-col items-center justify-center">
<button
on:click={callTauri}
class="font-extrabold btn btn-outline btn-primary btn-md">Call Tauri</button
>
<div class="h-20 flex items-center">
{#key message}
<p
class="border-b-2 border-accent text-2xl
whitespace-nowrap"
in:fade={{ duration: 300 }}
>
{message}
</p>
{/key}
</div>
<div
class="form-control h-full flex-1 items-center justify-center gap-y-8
[&>section]:form-control [&>section]:items-center [&>section]:justify-center [&>section]:gap-y-4">
<section class="">
<button
on:click={callTauri}
class="btn-outline btn-primary btn-md btn font-extrabold"
>Call Tauri</button>
<div class="flex h-20 items-center">
{#key message}
<p
class="whitespace-nowrap border-b-2 border-accent
text-2xl"
in:fade={{ duration: 300 }}>
{message}
</p>
{/key}
</div>
</section>
<section>
<label class="input-group flex max-w-max">
<span>Hash string</span>
<input
bind:value={hashInput}
type="text"
class="input-bordered input-secondary input focus:border-secondary focus:outline-none focus:ring-secondary" />
</label>
<p class="text-center text-lg">{hashOutput}</p>
</section>
</div>

23
src/lib/router/routes/HashString.svelte
View File

@@ -1,23 +0,0 @@
<script lang="ts">
import { invoke } from '@tauri-apps/api';
let hashInput = 'Hello world';
let hashOutput = '';
$: (async () => {
hashOutput = await invoke('hash256sum', { hashInput });
})();
</script>
<div class="h-full flex flex-col space-y-8 items-center justify-center">
<div class="form-control">
<label class="input-group">
<span>Hash string</span>
<input
bind:value={hashInput}
type="text"
class="input input-bordered input-secondary focus:ring-secondary focus:border-secondary focus:outline-none"
/>
</label>
</div>
<p class="text-center text-lg">{hashOutput}</p>
</div>

11
src/lib/router/routes/Index.svelte
View File

@@ -1,20 +1,17 @@
<script lang="ts">
import svelte_logo from '$assets/svelte_logo.svg';
import tauri_logo from '$assets/tauri_logo.svg';
</script>
<div
class="flex flex-col space-y-6 items-center justify-center font-bold drop-shadow-ft h-full"
>
class="form-control flex-1 items-center justify-center space-y-6 text-center font-bold">
<h1 class="text-6xl">Welcome</h1>
<h2 class="text-3xl flex items-center">
<h2 class="flex items-center text-3xl [&_img]:h-12">
This is a &#160
<span>
<img src={svelte_logo} alt="svelte logo" class="h-12" />
<img src={'/svelte_logo.svg'} alt="svelte logo" />
</span>
&#160-&#160
<span>
<img src={tauri_logo} alt="svelte logo" class="h-12" />
<img src={'/tauri_logo.svg'} alt="svelte logo" />
</span>
&#160 Template
</h2>

16
src/lib/router/routes/Versions.svelte
View File

@@ -8,9 +8,9 @@
const getVersions = async (): Promise<Versions> => {
const [tauri, app, name] = await Promise.all([
getName(),
getTauriVersion(),
getVersion(),
getName()
getVersion()
]);
return {
tauri,
@@ -21,15 +21,15 @@
</script>
<div
class="h-full flex flex-col space-y-8 items-center justify-center text-xl font-bold"
>
<h1 class="text-2xl">Versions</h1>
class="form-control flex-1 items-center justify-center space-y-8 text-2xl font-bold">
<h1 class="text-5xl text-primary">Versions</h1>
<div>
<ul class="flex flex-col space-y-4">
<ul class="form-control space-y-4">
{#await getVersions() then versions}
{#each Object.entries(versions) as [key, val], i (i)}
{#each Object.entries(versions) as [key, val]}
<li>
{key} - {val}
<span class="text-secondary"> {key}</span> -
<span class="text-primary"> {val}</span>
</li>
{/each}
{/await}