Tracks sample page w/ modal

ref #23

src/components/Tracks.svelte

@@ -1,11 +1,45 @@
 <script>
-  import { _ } from "svelte-i18n";
+  import { _, json } from "svelte-i18n";
+  import TracksEmptyState from "./TracksEmptyState.svelte";
   import store from "../store.js";
   import { TrackService } from "@odit/lfk-client-js";
   let tracks_promise = TrackService.trackControllerGetAll();
+  //
+  import { getlang } from "./datatable_i18n";
+  import { Grid } from "gridjs";
+  import "gridjs/dist/theme/mermaid.css";
+  //
+  let table;
+  tracks_promise.then((data) => {
+    let tabledata = [];
+    data.forEach((track) => {
+      tabledata.push([track.name, track.distance, "blablub"]);
+    });
+    console.log(tabledata);
+    // console.log(data);
+    const datatable = new Grid({
+      columns: ["Name", "Track Length in m", "Action"],
+      language: getlang($json("datatable")),
+      sort: true,
+      search: { enabled: true },
+      data: tabledata,
+      pagination: {
+        enabled: true,
+        limit: 25,
+        summary: false,
+      },
+    });
+    setTimeout(() => {
+      datatable.render(table);
+    }, 150);
+    table_visible = true;
+  });
+  let table_visible = false;
 </script>
 
-<h1>{$_('tracks')}</h1>
+{#if table_visible}
+  <div bind:this={table} />
+{/if}
 {#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"
@@ -23,7 +57,9 @@
         <li>{item.distance}</li>
       {/each}
     </ul>
-  {:else}keine Tracks{/if}
+  {:else}
+    <TracksEmptyState />
+  {/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">