From 35a9aa40cbbb86bd004cf18792951dd3f81fc859 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 18:31:26 +0100
Subject: [PATCH 01/16] =?UTF-8?q?basic=20track=20deletion=20working=20?=
 =?UTF-8?q?=E2=9C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #11
---
 src/components/Tracks.svelte | 65 +++++++++++++++++++++++-------------
 1 file changed, 42 insertions(+), 23 deletions(-)

diff --git a/src/components/Tracks.svelte b/src/components/Tracks.svelte
index ccacf79b..ca09781c 100644
--- a/src/components/Tracks.svelte
+++ b/src/components/Tracks.svelte
@@ -23,8 +23,25 @@
         renderdatatable();
       }, 100);
     });
-    table_visible = true;
+    if (trackscache.length > 0) {
+      table_visible = true;
+    }
   });
+  window.track__delete_handler = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    // const track = trackscache.find((e) => e.id == trackid);
+    // console.log(track);
+    // -----
+    // TODO: modal or double click confirmation?
+    TrackService.trackControllerRemove(trackid)
+      .then((resp) => {
+        const newStoreVal = trackscache.filter((obj) => obj.id !== trackid);
+        tracksstore.set(newStoreVal);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  };
   function renderdatatable() {
     let tabledata = [];
     trackscache.forEach((track) => {
@@ -34,31 +51,33 @@
         track.minimumLapTime || 0,
         html(`
         <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm">Edit</button>
-        <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm">Delete</button>
+        <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_handler()">Delete</button>
       `),
       ]);
     });
-    if (datatable_inited === false) {
-      datatable = new Grid({
-        columns: [
-          $_("track-name"),
-          $_("track-length-in-m"),
-          $_("minimum-lap-time-in-s"),
-          $_("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();
+    if (trackscache.length > 0) {
+      if (datatable_inited === false) {
+        datatable = new Grid({
+          columns: [
+            $_("track-name"),
+            $_("track-length-in-m"),
+            $_("minimum-lap-time-in-s"),
+            $_("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;

From 6e00ac8f1f9bcc9ac714177c5ab2d1d04854aaa5 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 18:31:36 +0100
Subject: [PATCH 02/16] improved empty state

ref #11
---
 src/components/TracksEmptyState.svelte | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/components/TracksEmptyState.svelte b/src/components/TracksEmptyState.svelte
index 8037b1fa..af1a7220 100644
--- a/src/components/TracksEmptyState.svelte
+++ b/src/components/TracksEmptyState.svelte
@@ -253,17 +253,7 @@
       d="M714.88 703.47l18.16-4.26v4.26l-18.16 4.26v-4.26zM931.72 628.54l18.16-4.26v4.26l-18.16 4.25v-4.25z" /></svg>
   <p class="mb-16 text-lg text-gray-500">
     <span class="font-bold">{$_('no-tracks-added-yet')}</span><br />
-    <span
-      on:click={() => {
-        modal_open = true;
-      }}
-      class="underline text-blue-500 cursor-pointer">{$_('add-your-first-track')}</span>
-    <br />
-    <span
-      on:click={() => {
-        modal_open = true;
-      }}
-      class="cursor-pointer inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">{$_('add-your-first-track')}</span>
+    <span>{$_('add-your-first-track')}</span>
   </p>
 </div>
 

From 10bf88e4ba2390dbf78925f0541c49a4abe3041d Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 20:27:06 +0100
Subject: [PATCH 03/16] fixed datatable-emptystate transition

ref #11
---
 src/components/Tracks.svelte | 85 +++++++++++++++---------------------
 1 file changed, 36 insertions(+), 49 deletions(-)

diff --git a/src/components/Tracks.svelte b/src/components/Tracks.svelte
index ca09781c..bad8d43e 100644
--- a/src/components/Tracks.svelte
+++ b/src/components/Tracks.svelte
@@ -7,36 +7,29 @@
   import { Grid, html } from "gridjs";
   import "gridjs/dist/theme/mermaid.css";
   import { tracks as tracksstore } from "../store.js";
-  let trackscache = [];
+  $: trackscache = [];
   let table;
   let datatable;
   let datatable_inited = false;
-  let initial_load_done = false;
+  tracksstore.subscribe((val) => {
+    trackscache = val;
+    setTimeout(() => {
+      if (val.length > 0) {
+        renderdatatable();
+      }
+    }, 100);
+  });
   tracks_promise.then((data) => {
     tracksstore.set(data);
-    tracksstore.subscribe((val) => {
-      trackscache = val;
-      if (initial_load_done === false) {
-        initial_load_done = true;
-      }
-      setTimeout(() => {
-        renderdatatable();
-      }, 100);
-    });
-    if (trackscache.length > 0) {
-      table_visible = true;
-    }
   });
   window.track__delete_handler = () => {
     const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
-    // const track = trackscache.find((e) => e.id == trackid);
-    // console.log(track);
-    // -----
     // TODO: modal or double click confirmation?
     TrackService.trackControllerRemove(trackid)
-      .then((resp) => {
+      .then(() => {
         const newStoreVal = trackscache.filter((obj) => obj.id !== trackid);
         tracksstore.set(newStoreVal);
+        renderdatatable();
       })
       .catch((err) => {
         console.log(err);
@@ -55,36 +48,36 @@
       `),
       ]);
     });
-    if (trackscache.length > 0) {
-      if (datatable_inited === false) {
-        datatable = new Grid({
-          columns: [
-            $_("track-name"),
-            $_("track-length-in-m"),
-            $_("minimum-lap-time-in-s"),
-            $_("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();
-      }
+
+    if (datatable_inited === false) {
+      datatable = new Grid({
+        columns: [
+          $_("track-name"),
+          $_("track-length-in-m"),
+          $_("minimum-lap-time-in-s"),
+          $_("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>
 
-{#if table_visible}
+{#if trackscache.length > 0}
   <div bind:this={table} />
+{:else}
+  <TracksEmptyState />
 {/if}
 {#await tracks_promise}
   <div
@@ -93,12 +86,6 @@
     <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}
-    <!--  -->
-  {: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">

From 02bfecd54015ad6c6de25c246552feeab5c084ef Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 20:34:10 +0100
Subject: [PATCH 04/16] EmptyState fixup

ref #11
---
 src/components/Tracks.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Tracks.svelte b/src/components/Tracks.svelte
index bad8d43e..46d549b3 100644
--- a/src/components/Tracks.svelte
+++ b/src/components/Tracks.svelte
@@ -76,8 +76,6 @@
 
 {#if trackscache.length > 0}
   <div bind:this={table} />
-{:else}
-  <TracksEmptyState />
 {/if}
 {#await tracks_promise}
   <div
@@ -86,6 +84,10 @@
     <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 />
+  {/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">

From 039fd8f90ebccf8594c608c4cd7c8fe5178c66d0 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 21:16:50 +0100
Subject: [PATCH 05/16] basic edit logic in table

ref #11
---
 src/components/Tracks.svelte | 57 ++++++++++++++++++++++++++++++++++--
 1 file changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/components/Tracks.svelte b/src/components/Tracks.svelte
index 46d549b3..34014f33 100644
--- a/src/components/Tracks.svelte
+++ b/src/components/Tracks.svelte
@@ -22,6 +22,34 @@
   tracks_promise.then((data) => {
     tracksstore.set(data);
   });
+  window.track__edit_cancel = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    //
+    const elem = document.querySelector(
+      `[data-id="triggered_table_actions_${trackid}"]`
+    ).parentNode.parentNode.parentNode;
+    console.log(elem.childNodes[1].childNodes[0].value);
+    //
+    elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
+    elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
+    elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
+    //
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+    document
+      .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+  };
+  window.track__edit_save = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+    document
+      .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+  };
   window.track__delete_handler = () => {
     const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
     // TODO: modal or double click confirmation?
@@ -35,6 +63,25 @@
         console.log(err);
       });
   };
+  window.track__edit_handler = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+    document
+      .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+    const elem = document.querySelector(
+      `[data-id="triggered_table_actions_${trackid}"]`
+    ).parentNode.parentNode.parentNode;
+    const trackname = elem.childNodes[0].textContent;
+    const tracklength = parseInt(elem.childNodes[1].textContent);
+    const trackmintime = parseInt(elem.childNodes[2].textContent);
+    elem.childNodes[0].innerHTML = `<input type="text" value="${trackname}" name="trackname" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
+    elem.childNodes[1].innerHTML = `<input type="text" value="${tracklength}" name="tracklength" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
+    elem.childNodes[2].innerHTML = `<input type="text" value="${trackmintime}" name="trackmintime" class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">`;
+  };
+  //
   function renderdatatable() {
     let tabledata = [];
     trackscache.forEach((track) => {
@@ -43,8 +90,14 @@
         track.distance,
         track.minimumLapTime || 0,
         html(`
-        <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm">Edit</button>
-        <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_handler()">Delete</button>
+        <div class="hidden" data-id="triggered_table_actions_${track.id}">
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_save()">Save</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_cancel()">Cancel</button>
+        </div>
+        <div data-id="default_table_actions_${track.id}">
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_handler()">Edit</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_handler()">Delete</button>
+        </div>
       `),
       ]);
     });

From 68de0762271eb9dbe0e7135f6457cf0b09d889d6 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 21:30:01 +0100
Subject: [PATCH 06/16] =?UTF-8?q?edit=20is=20working=20=F0=9F=8E=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #11
---
 src/components/Tracks.svelte | 38 ++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/Tracks.svelte b/src/components/Tracks.svelte
index 34014f33..91fee3ce 100644
--- a/src/components/Tracks.svelte
+++ b/src/components/Tracks.svelte
@@ -22,25 +22,7 @@
   tracks_promise.then((data) => {
     tracksstore.set(data);
   });
-  window.track__edit_cancel = () => {
-    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
-    //
-    const elem = document.querySelector(
-      `[data-id="triggered_table_actions_${trackid}"]`
-    ).parentNode.parentNode.parentNode;
-    console.log(elem.childNodes[1].childNodes[0].value);
-    //
-    elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
-    elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
-    elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
-    //
-    document
-      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
-      .classList.remove("hidden");
-    document
-      .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
-      .classList.add("hidden");
-  };
+  window.track__edit_cancel = () => renderdatatable();
   window.track__edit_save = () => {
     const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
     document
@@ -49,6 +31,24 @@
     document
       .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
       .classList.add("hidden");
+    //
+    const elem = document.querySelector(
+      `[data-id="triggered_table_actions_${trackid}"]`
+    ).parentNode.parentNode.parentNode;
+    TrackService.trackControllerPut(trackid, {
+      id: trackid,
+      name: elem.childNodes[0].childNodes[0].value,
+      distance: parseInt(elem.childNodes[1].childNodes[0].value),
+      minimumLapTime: parseInt(elem.childNodes[2].childNodes[0].value),
+    })
+      .then((r) => {
+        elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
+        elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
+        elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
+      })
+      .catch((err) => {
+        console.error(err);
+      });
   };
   window.track__delete_handler = () => {
     const trackid = parseInt(window.event.target.getAttribute("data-trackid"));

From 34ecb8b2fb19d243db35bd59f98d93f08d522f25 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 21:38:47 +0100
Subject: [PATCH 07/16] move toastify css to app base

ref #11
---
 src/App.svelte              | 1 +
 src/components/Login.svelte | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.svelte b/src/App.svelte
index 68a8f420..8c828204 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,5 +1,6 @@
 <script>
   // import TailwindStyles from "./TailwindStyles.svelte";
+  import "toastify-js/src/toastify.css";
   import { Route, router } from "tinro";
   router.subscribe((routeInfo) => {
     // console.log(routeInfo.path);
diff --git a/src/components/Login.svelte b/src/components/Login.svelte
index eb1a8a88..a0810a74 100644
--- a/src/components/Login.svelte
+++ b/src/components/Login.svelte
@@ -6,7 +6,6 @@
   import { OpenAPI, AuthService } from "@odit/lfk-client-js";
   OpenAPI.BASE = config.baseurl;
   import Toastify from "toastify-js";
-  import "toastify-js/src/toastify.css";
   // ------
   let username = "demo";
   let password = "demo";

From e5fcb2ef68cdbc55875d5bf7f97ddfe297abe7e1 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 21:38:57 +0100
Subject: [PATCH 08/16] Track edit animation

ref #11
---
 src/components/Tracks.svelte | 63 +++++++++++++++++++++++-------------
 1 file changed, 40 insertions(+), 23 deletions(-)

diff --git a/src/components/Tracks.svelte b/src/components/Tracks.svelte
index 91fee3ce..fccb285b 100644
--- a/src/components/Tracks.svelte
+++ b/src/components/Tracks.svelte
@@ -1,5 +1,6 @@
 <script>
   import { _, json } from "svelte-i18n";
+  import Toastify from "toastify-js";
   import TracksEmptyState from "./TracksEmptyState.svelte";
   import { TrackService } from "@odit/lfk-client-js";
   const tracks_promise = TrackService.trackControllerGetAll();
@@ -8,6 +9,7 @@
   import "gridjs/dist/theme/mermaid.css";
   import { tracks as tracksstore } from "../store.js";
   $: trackscache = [];
+  $: blocked = [];
   let table;
   let datatable;
   let datatable_inited = false;
@@ -25,30 +27,45 @@
   window.track__edit_cancel = () => renderdatatable();
   window.track__edit_save = () => {
     const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
-    document
-      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
-      .classList.remove("hidden");
-    document
-      .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
-      .classList.add("hidden");
-    //
-    const elem = document.querySelector(
-      `[data-id="triggered_table_actions_${trackid}"]`
-    ).parentNode.parentNode.parentNode;
-    TrackService.trackControllerPut(trackid, {
-      id: trackid,
-      name: elem.childNodes[0].childNodes[0].value,
-      distance: parseInt(elem.childNodes[1].childNodes[0].value),
-      minimumLapTime: parseInt(elem.childNodes[2].childNodes[0].value),
-    })
-      .then((r) => {
-        elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
-        elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
-        elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
+    if (blocked.includes(trackid)) {
+      //
+    } else {
+      blocked.push(trackid);
+      const elem = document.querySelector(
+        `[data-id="triggered_table_actions_${trackid}"]`
+      ).parentNode.parentNode.parentNode;
+      Toastify({
+        text: "Track is being updated...",
+        duration: 500,
+      }).showToast();
+      TrackService.trackControllerPut(trackid, {
+        id: trackid,
+        name: elem.childNodes[0].childNodes[0].value,
+        distance: parseInt(elem.childNodes[1].childNodes[0].value),
+        minimumLapTime: parseInt(elem.childNodes[2].childNodes[0].value),
       })
-      .catch((err) => {
-        console.error(err);
-      });
+        .then((r) => {
+          Toastify({
+            text: "Track was updated!",
+            backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+            duration: 1000,
+          }).showToast();
+          blocked = blocked.filter((e) => e !== trackid);
+          document
+            .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+            .classList.remove("hidden");
+          document
+            .querySelector(`[data-id="triggered_table_actions_${trackid}"]`)
+            .classList.add("hidden");
+          //
+          elem.childNodes[0].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[0].childNodes[0].value}</td>`;
+          elem.childNodes[1].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[1].childNodes[0].value}</td>`;
+          elem.childNodes[2].innerHTML = `<td data-column-id="trackName" class="gridjs-td">${elem.childNodes[2].childNodes[0].value}</td>`;
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    }
   };
   window.track__delete_handler = () => {
     const trackid = parseInt(window.event.target.getAttribute("data-trackid"));

From 7d1b51918f5fee8791d1bd4e36056c4d979a2a96 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 21:42:42 +0100
Subject: [PATCH 09/16] delete confirmation

ref #11
---
 src/components/Tracks.svelte | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/Tracks.svelte b/src/components/Tracks.svelte
index fccb285b..8a9a2bdd 100644
--- a/src/components/Tracks.svelte
+++ b/src/components/Tracks.svelte
@@ -69,7 +69,24 @@
   };
   window.track__delete_handler = () => {
     const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
-    // TODO: modal or double click confirmation?
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+    document
+      .querySelector(`[data-id="deleteconfirmation_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+  };
+  window.track__delete_cancel = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
+    document
+      .querySelector(`[data-id="default_table_actions_${trackid}"]`)
+      .classList.remove("hidden");
+    document
+      .querySelector(`[data-id="deleteconfirmation_table_actions_${trackid}"]`)
+      .classList.add("hidden");
+  };
+  window.track__delete_confirm = () => {
+    const trackid = parseInt(window.event.target.getAttribute("data-trackid"));
     TrackService.trackControllerRemove(trackid)
       .then(() => {
         const newStoreVal = trackscache.filter((obj) => obj.id !== trackid);
@@ -115,6 +132,10 @@
           <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__edit_handler()">Edit</button>
           <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_handler()">Delete</button>
         </div>
+        <div class="hidden" data-id="deleteconfirmation_table_actions_${track.id}">
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-400 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_cancel()">Cancel</button>
+          <button class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm" data-trackid="${track.id}" onclick="track__delete_confirm()">Confirm</button>
+        </div>
       `),
       ]);
     });

From 591dc09228408f4fff0349a42807c1d6268a59e3 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 21:53:06 +0100
Subject: [PATCH 10/16] AddTrackModal - basic validation w/ class + layout
 responses

ref #11
---
 src/components/AddTrackModal.svelte  | 36 ++++++++++++++++++++++------
 src/components/OrgDetail.svelte      |  2 +-
 src/components/TracksOverview.svelte |  2 +-
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/AddTrackModal.svelte b/src/components/AddTrackModal.svelte
index 0a5c16b1..d2048956 100644
--- a/src/components/AddTrackModal.svelte
+++ b/src/components/AddTrackModal.svelte
@@ -1,15 +1,15 @@
 <script>
   import { _ } from "svelte-i18n";
   import { tracks as tracksstore } from "../store.js";
-  let trackname_input;
-  let trackname_input_value;
-  let track_min_duration;
-  let tracklength;
   import { TrackService } from "@odit/lfk-client-js";
-  export let modal_open;
-  let processed_last_submit = true;
   import Toastify from "toastify-js";
   import "toastify-js/src/toastify.css";
+  export let modal_open;
+  let trackname_input;
+  $: trackname_input_value = "";
+  $: track_min_duration = 0;
+  $: tracklength = 0;
+  $: processed_last_submit = true;
   $: smart_track_min_duration_placeholder = parseInt(tracklength || 0) * 0.369;
   function submit() {
     if (processed_last_submit === true) {
@@ -24,12 +24,16 @@
         minimumLapTime: track_min_duration,
       })
         .then((result) => {
+          trackname_input_value = "";
+          track_min_duration = 0;
+          tracklength = 0;
+          modal_open = false;
+          //
           Toastify({
             text: $_("track-added"),
             duration: 500,
             backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
           }).showToast();
-          modal_open = false;
           let storeval = [];
           tracksstore.subscribe((val) => {
             storeval = val;
@@ -97,11 +101,20 @@
                     for="trackname"
                     class="block text-sm font-medium text-gray-700">{$_('track-name')}</label>
                   <input
+                    class:border-red-500={trackname_input_value.trim().length === 0}
+                    class:focus:border-red-500={trackname_input_value.trim().length === 0}
+                    class:focus:ring-red-500={trackname_input_value.trim().length === 0}
                     bind:value={trackname_input_value}
                     bind:this={trackname_input}
                     type="text"
                     name="trackname"
                     class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
+                  {#if trackname_input_value.trim().length === 0}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Track name must not be empty
+                    </span>
+                  {/if}
                 </div>
                 <div class="col-span-6">
                   <label
@@ -109,6 +122,9 @@
                     class="block text-sm font-medium text-gray-700">{$_('track-length-in-m')}</label>
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
+                      class:border-red-500={tracklength <= 0}
+                      class:focus:border-red-500={tracklength <= 0}
+                      class:focus:ring-red-500={tracklength <= 0}
                       bind:value={tracklength}
                       type="number"
                       name="track_length_m"
@@ -117,6 +133,12 @@
                     <span
                       class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
                   </div>
+                  {#if tracklength <= 0}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      Track length must be greater than 0
+                    </span>
+                  {/if}
                 </div>
                 <div class="col-span-6">
                   <label
diff --git a/src/components/OrgDetail.svelte b/src/components/OrgDetail.svelte
index f101a0c9..c6def973 100644
--- a/src/components/OrgDetail.svelte
+++ b/src/components/OrgDetail.svelte
@@ -7,7 +7,7 @@
     Orgs
   </span>
   <p class="mb-8 text-lg text-gray-500">
-    configure the tracks/ min-max lap times
+    configure the tracks & minimum lap times
   </p>
   <div class="flex flex-row mb-4">
     <div class="w-full">
diff --git a/src/components/TracksOverview.svelte b/src/components/TracksOverview.svelte
index f79946ae..48734737 100644
--- a/src/components/TracksOverview.svelte
+++ b/src/components/TracksOverview.svelte
@@ -18,7 +18,7 @@
     </button>
   </span>
   <p class="mb-8 text-lg text-gray-500">
-    configure the tracks/ min-max lap times
+    configure the tracks & minimum lap times
   </p>
   <Tracks />
 </section>

From fe297f67795c35f3ea0e9a88b8453b27a4de05e0 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 22:02:41 +0100
Subject: [PATCH 11/16] AddTrackModal - more input validation response

ref #11
---
 src/components/AddTrackModal.svelte | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/AddTrackModal.svelte b/src/components/AddTrackModal.svelte
index d2048956..a1732ace 100644
--- a/src/components/AddTrackModal.svelte
+++ b/src/components/AddTrackModal.svelte
@@ -7,6 +7,9 @@
   export let modal_open;
   let trackname_input;
   $: trackname_input_value = "";
+  $: isTracknameValid = trackname_input_value.trim().length === 0;
+  $: isTracklengthValid = tracklength <= 0;
+  $: createbtnenabled = !isTracknameValid && !isTracklengthValid;
   $: track_min_duration = 0;
   $: tracklength = 0;
   $: processed_last_submit = true;
@@ -101,15 +104,15 @@
                     for="trackname"
                     class="block text-sm font-medium text-gray-700">{$_('track-name')}</label>
                   <input
-                    class:border-red-500={trackname_input_value.trim().length === 0}
-                    class:focus:border-red-500={trackname_input_value.trim().length === 0}
-                    class:focus:ring-red-500={trackname_input_value.trim().length === 0}
+                    class:border-red-500={isTracknameValid}
+                    class:focus:border-red-500={isTracknameValid}
+                    class:focus:ring-red-500={isTracknameValid}
                     bind:value={trackname_input_value}
                     bind:this={trackname_input}
                     type="text"
                     name="trackname"
                     class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
-                  {#if trackname_input_value.trim().length === 0}
+                  {#if isTracknameValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
                       Track name must not be empty
@@ -122,9 +125,9 @@
                     class="block text-sm font-medium text-gray-700">{$_('track-length-in-m')}</label>
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
-                      class:border-red-500={tracklength <= 0}
-                      class:focus:border-red-500={tracklength <= 0}
-                      class:focus:ring-red-500={tracklength <= 0}
+                      class:border-red-500={isTracklengthValid}
+                      class:focus:border-red-500={isTracklengthValid}
+                      class:focus:ring-red-500={isTracklengthValid}
                       bind:value={tracklength}
                       type="number"
                       name="track_length_m"
@@ -133,7 +136,7 @@
                     <span
                       class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">m</span>
                   </div>
-                  {#if tracklength <= 0}
+                  {#if isTracklengthValid}
                     <span
                       class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
                       Track length must be greater than 0
@@ -161,6 +164,8 @@
         </div>
         <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
           <button
+            disabled={!createbtnenabled}
+            class:opacity-50={!createbtnenabled}
             on:click={submit}
             type="button"
             class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">

From 7bb5a18527994f4fe3f23a87106a431f1ebfe7d1 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 22:05:06 +0100
Subject: [PATCH 12/16] AddTrackModal - add track icon

ref #11
---
 src/components/AddTrackModal.svelte | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/AddTrackModal.svelte b/src/components/AddTrackModal.svelte
index a1732ace..33687dd2 100644
--- a/src/components/AddTrackModal.svelte
+++ b/src/components/AddTrackModal.svelte
@@ -77,17 +77,13 @@
               class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">
               <svg
                 class="h-6 w-6 text-blue-600"
-                xmlns="http://www.w3.org/2000/svg"
                 fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                aria-hidden="true">
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-              </svg>
+                width="24"
+                height="24"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 640 512"><path
+                  fill="currentColor"
+                  d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
             </div>
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 class="text-lg leading-6 font-medium text-gray-900">

From d45eec94ab7386ef29170b03e73c7683b36a3a0d Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 22:05:22 +0100
Subject: [PATCH 13/16] AddTrackModal - placeholder input

ref #11
---
 src/components/AddTrackModal.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/AddTrackModal.svelte b/src/components/AddTrackModal.svelte
index 33687dd2..6861905f 100644
--- a/src/components/AddTrackModal.svelte
+++ b/src/components/AddTrackModal.svelte
@@ -100,6 +100,7 @@
                     for="trackname"
                     class="block text-sm font-medium text-gray-700">{$_('track-name')}</label>
                   <input
+                    placeholder={$_('track-name')}
                     class:border-red-500={isTracknameValid}
                     class:focus:border-red-500={isTracknameValid}
                     class:focus:ring-red-500={isTracknameValid}

From 0e7640bf86b6710d01cd6c553f205cad934f58bb Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 22:07:38 +0100
Subject: [PATCH 14/16] AddTrackModal - trap focus if active

ref #11
---
 package.json                        | 1 +
 src/components/AddTrackModal.svelte | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bca8a1d3..29026e93 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
 		"gridjs": "^3.2.1",
 		"localforage": "^1.9.0",
 		"svelte-filepond": "^0.0.1",
+		"svelte-focus-trap": "^1.0.1",
 		"svelte-i18n": "^3.3.0",
 		"tailwindcss": "^2.0.2",
 		"tinro": "^0.5.3",
diff --git a/src/components/AddTrackModal.svelte b/src/components/AddTrackModal.svelte
index 6861905f..e374c4e7 100644
--- a/src/components/AddTrackModal.svelte
+++ b/src/components/AddTrackModal.svelte
@@ -1,5 +1,6 @@
 <script>
   import { _ } from "svelte-i18n";
+  import { focusTrap } from "svelte-focus-trap";
   import { tracks as tracksstore } from "../store.js";
   import { TrackService } from "@odit/lfk-client-js";
   import Toastify from "toastify-js";
@@ -57,7 +58,7 @@
 </script>
 
 {#if modal_open}
-  <div class="fixed z-10 inset-0 overflow-y-auto">
+  <div class="fixed z-10 inset-0 overflow-y-auto" use:focusTrap>
     <div
       class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
       <div class="fixed inset-0 transition-opacity" aria-hidden="true">

From 388fc8f239560be221687c69bfbffd9e1b3e56e1 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 22:11:06 +0100
Subject: [PATCH 15/16] AddTrackModal - autofocus on modal open

ref #11
---
 src/components/AddTrackModal.svelte | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/AddTrackModal.svelte b/src/components/AddTrackModal.svelte
index e374c4e7..68efa120 100644
--- a/src/components/AddTrackModal.svelte
+++ b/src/components/AddTrackModal.svelte
@@ -7,6 +7,9 @@
   import "toastify-js/src/toastify.css";
   export let modal_open;
   let trackname_input;
+  function focus(el) {
+    el.focus();
+  }
   $: trackname_input_value = "";
   $: isTracknameValid = trackname_input_value.trim().length === 0;
   $: isTracklengthValid = tracklength <= 0;
@@ -101,6 +104,7 @@
                     for="trackname"
                     class="block text-sm font-medium text-gray-700">{$_('track-name')}</label>
                   <input
+                    use:focus
                     placeholder={$_('track-name')}
                     class:border-red-500={isTracknameValid}
                     class:focus:border-red-500={isTracknameValid}

From bb0eb6d1e276186af2c1e5d26abda4413c278981 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 5 Jan 2021 22:15:20 +0100
Subject: [PATCH 16/16] AddTrackModal - minlaptime validation

ref #11
---
 src/components/AddTrackModal.svelte | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/AddTrackModal.svelte b/src/components/AddTrackModal.svelte
index 68efa120..0c11df23 100644
--- a/src/components/AddTrackModal.svelte
+++ b/src/components/AddTrackModal.svelte
@@ -11,13 +11,14 @@
     el.focus();
   }
   $: trackname_input_value = "";
-  $: isTracknameValid = trackname_input_value.trim().length === 0;
-  $: isTracklengthValid = tracklength <= 0;
-  $: createbtnenabled = !isTracknameValid && !isTracklengthValid;
   $: track_min_duration = 0;
   $: tracklength = 0;
   $: processed_last_submit = true;
   $: smart_track_min_duration_placeholder = parseInt(tracklength || 0) * 0.369;
+  $: isTracknameValid = trackname_input_value.trim().length === 0;
+  $: isTracklengthValid = tracklength <= 0;
+  $: trackMintimevalid = track_min_duration >= 0;
+  $: createbtnenabled = !isTracknameValid && !isTracklengthValid;
   function submit() {
     if (processed_last_submit === true) {
       processed_last_submit = false;
@@ -105,6 +106,7 @@
                     class="block text-sm font-medium text-gray-700">{$_('track-name')}</label>
                   <input
                     use:focus
+                    autocomplete="off"
                     placeholder={$_('track-name')}
                     class:border-red-500={isTracknameValid}
                     class:focus:border-red-500={isTracknameValid}
@@ -127,6 +129,7 @@
                     class="block text-sm font-medium text-gray-700">{$_('track-length-in-m')}</label>
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
+                      autocomplete="off"
                       class:border-red-500={isTracklengthValid}
                       class:focus:border-red-500={isTracklengthValid}
                       class:focus:ring-red-500={isTracklengthValid}
@@ -151,6 +154,10 @@
                     class="block text-sm font-medium text-gray-700">{$_('minimum-lap-time-in-s')}</label>
                   <div class="mt-1 flex rounded-md shadow-sm">
                     <input
+                      autocomplete="off"
+                      class:border-red-500={!trackMintimevalid}
+                      class:focus:border-red-500={!trackMintimevalid}
+                      class:focus:ring-red-500={!trackMintimevalid}
                       bind:value={track_min_duration}
                       type="number"
                       name="track_min_duration"
@@ -159,6 +166,12 @@
                     <span
                       class="inline-flex items-center px-3 rounded-r-md border border-gray-300 bg-gray-50 text-gray-500 text-sm">s</span>
                   </div>
+                  {#if !trackMintimevalid}
+                    <span
+                      class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">
+                      minimum lap time must be a positive number or 0
+                    </span>
+                  {/if}
                 </div>
               </div>
             </div>