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] 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"));