lfk/frontend
2
0
Fork 0
Code Issues 4 Pull Requests Actions Projects Releases Wiki Activity

drop gridjs (TracksOverview Actions will need to be re-implemented)

Browse Source
This commit is contained in:
Philipp Dormann
2023-04-26 23:26:07 +02:00
parent 4c81e3c432
commit 8b922309b9
9 changed files with 1127 additions and 2896 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/components/tracks/TracksOverview.svelte
View File

@@ -2,7 +2,18 @@
import { _ } from "svelte-i18n";
import AddTrackModal from "./AddTrackModal.svelte";
let modal_open = false;
import Tracks from "./Tracks.svelte";
import TracksEmptyState from "./TracksEmptyState.svelte";
import { TrackService } from "@odit/lfk-client-js";
const tracks_promise = TrackService.trackControllerGetAll();
import { tracks as tracksstore } from "../../store.js";
import toast from "svelte-french-toast";
$: trackscache = [];
tracksstore.subscribe((val) => {
trackscache = val;
});
tracks_promise.then((data) => {
tracksstore.set(data);
});
</script>
<section class="container p-5">
@@ -18,9 +29,105 @@
{$_("create-track")}
</button>
</span>
<p class="mb-8 text-lg text-gray-500">
{$_("configure-the-tracks-and-minimum-lap-times")}
</p>
<Tracks />
{#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}
{#if trackscache.length === 0}
<TracksEmptyState />
{:else}
<div
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll mt-4"
>
<table class="divide-y divide-gray-200 w-full">
<thead class="bg-gray-50">
<tr class="odd:bg-white even:bg-gray-100">
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
ID
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
{$_("track-name")}
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
{$_("distance")}
</th>
<th
scope="col"
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
{$_("minimum-lap-time-in-s")}
</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
{#each trackscache as t}
<tr
class="odd:bg-white even:bg-gray-100"
data-rowid="station_{t.id}"
>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
#{t.id}
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
{t.name}
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
{t.distance}
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
{t.minimumLapTime}
</div>
</div>
</div>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{/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">{$_("general_promise_error")}</b>
{error}
</span>
</div>
{/await}
</section>
<AddTrackModal bind:modal_open />