frontend/src/components/Tracks.svelte
2020-12-19 19:00:54 +01:00

35 lines
971 B
Svelte

<script>
import { _ } from "svelte-i18n";
import store from "../store.js";
import { TrackService } from "@odit/lfk-client-js";
let tracks_promise = TrackService.trackControllerGetAll();
</script>
<h1>{$_('tracks')}</h1>
{#await tracks_promise}
<div
class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
role="alert">
<p class="font-bold">track data is being loaded...</p>
<p class="text-sm">This might take a moment 👀</p>
</div>
{:then tracks}
{#if tracks.length > 0}
<h4>{tracks.length}</h4>
<hr />
<ul>
{#each tracks as item}
<li>{item.name}</li>
<li>{item.distance}</li>
{/each}
</ul>
{:else}keine Tracks{/if}
{:catch error}
<div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
<span class="inline-block align-middle mr-8">
<b class="capitalize">😢 Error</b>
{error}
</span>
</div>
{/await}