reactivity on adding a new Track

ref #11

src/components/AddTrackModal.svelte

@@ -1,5 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
+  import { tracks as tracksstore } from "../store.js";
   let trackname_input;
   let trackname_input_value;
   let tracklength;
@@ -20,13 +21,18 @@
         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) => {
           //
@@ -101,7 +107,7 @@
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
                       bind:value={tracklength}
-                      type="tel"
+                      type="number"
                       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,11 +6,28 @@
   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 = [];
-    data.forEach((track) => {
+    trackscache.forEach((track) => {
       tabledata.push([
         track.name,
         track.distance,
@@ -20,23 +37,24 @@
       `),
       ]);
     });
-    const datatable = new Grid({
-      columns: [$_("track-name"), $_("track-length-in-m"), "Action"],
-      language: getlang($json("datatable")),
-      sort: true,
-      search: { enabled: true },
-      data: tabledata,
-      pagination: {
-        enabled: true,
-        limit: 25,
-        summary: false,
-      },
-    });
-    table_visible = true;
-    setTimeout(() => {
-      datatable.render(table);
-    }, 10);
-  });
+    if (datatable_inited === false) {
+      datatable = new Grid({
+        columns: [$_("track-name"), $_("track-length-in-m"), "Action"],
+        language: getlang($json("datatable")),
+        sort: true,
+        search: { enabled: true },
+        data: tabledata,
+        pagination: {
+          enabled: true,
+          limit: 25,
+          summary: false,
+        },
+      }).render(table);
+      datatable_inited = true;
+    } else {
+      datatable.updateConfig({ data: tabledata }).forceRender();
+    }
+  }
   let table_visible = false;
 </script>
 
@@ -47,8 +65,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}