src/components/AddTrackModal.svelte

@@ -1,6 +1,5 @@
 <script>
   import { _ } from "svelte-i18n";
-  import { tracks as tracksstore } from "../store.js";
   let trackname_input;
   let trackname_input_value;
   let tracklength;
@@ -21,18 +20,13 @@
         name: trackname_input_value,
       })
         .then((result) => {
+          console.log(result);
           Toastify({
             text: $_("track-added"),
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
           modal_open = false;
-          let storeval = [];
-          tracksstore.subscribe((val) => {
-            storeval = val;
-          });
-          storeval.push(result);
-          tracksstore.set(storeval);
         })
         .catch((err) => {
           //
@@ -107,7 +101,7 @@
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
                       bind:value={tracklength}
-                      type="number"
+                      type="tel"
                       name="track_length_m"
                       class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border-gray-300"
                       placeholder="1000" />

src/components/Tracks.svelte

@@ -6,28 +6,11 @@
   import { getlang } from "./datatable_i18n";
   import { Grid, html } from "gridjs";
   import "gridjs/dist/theme/mermaid.css";
-  import { tracks as tracksstore } from "../store.js";
-  let trackscache = [];
+  //
   let table;
-  let datatable;
-  let datatable_inited = false;
-  let initial_load_done = false;
   tracks_promise.then((data) => {
-    tracksstore.set(data);
-    tracksstore.subscribe((val) => {
-      trackscache = val;
-      if (initial_load_done === false) {
-        initial_load_done = true;
-      }
-      setTimeout(() => {
-        renderdatatable();
-      }, 100);
-    });
-    table_visible = true;
-  });
-  function renderdatatable() {
     let tabledata = [];
-    trackscache.forEach((track) => {
+    data.forEach((track) => {
       tabledata.push([
         track.name,
         track.distance,
@@ -37,8 +20,7 @@
       `),
       ]);
     });
-    if (datatable_inited === false) {
-      datatable = new Grid({
+    const datatable = new Grid({
       columns: [$_("track-name"), $_("track-length-in-m"), "Action"],
       language: getlang($json("datatable")),
       sort: true,
@@ -49,12 +31,12 @@
         limit: 25,
         summary: false,
       },
-      }).render(table);
-      datatable_inited = true;
-    } else {
-      datatable.updateConfig({ data: tabledata }).forceRender();
-    }
-  }
+    });
+    table_visible = true;
+    setTimeout(() => {
+      datatable.render(table);
+    }, 10);
+  });
   let table_visible = false;
 </script>
 
@@ -65,8 +47,8 @@
   <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>
+    <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}

src/components/TracksOverview.svelte

@@ -17,7 +17,7 @@
       Create Track
     </button>
   </span>
-  <p class="mb-8 text-lg text-gray-500">
+  <p class="mb-16 text-lg text-gray-500">
     configure the tracks/ min-max lap times
   </p>
   <Tracks />

src/store.js

@@ -1,6 +1,5 @@
 import { writable } from 'svelte/store';
 
-export let tracks = writable([]);
 const store = () => {
 	const state = {
 		access_token: undefined,