From 081a141218ab7de2620f7b06083697368d44bf6c Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Mon, 1 May 2023 14:03:46 +0200
Subject: [PATCH] Implemented delete for new track table

---
 src/components/tracks/TracksOverview.svelte | 48 +++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/components/tracks/TracksOverview.svelte b/src/components/tracks/TracksOverview.svelte
index 9d491309..bc7629ff 100644
--- a/src/components/tracks/TracksOverview.svelte
+++ b/src/components/tracks/TracksOverview.svelte
@@ -8,6 +8,7 @@
   import { tracks as tracksstore } from "../../store.js";
   import toast from "svelte-french-toast";
   $: trackscache = [];
+  $: deleteTracks = [];
   tracksstore.subscribe((val) => {
     trackscache = val;
   });
@@ -71,6 +72,12 @@
               >
                 {$_("minimum-lap-time-in-s")}
               </th>
+              <th
+                scope="col"
+                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+              >
+                {$_("action")}
+              </th>
             </tr>
           </thead>
           <tbody class="divide-y divide-gray-200">
@@ -115,6 +122,47 @@
                     </div>
                   </div>
                 </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    <div class="ml-4">
+                      {#if deleteTracks.includes(t.id)}
+                        <button
+                          tabindex="0"
+                          on:click={() => {
+                            deleteTracks = deleteTracks.filter((tr) => {
+                              tr.id !== t.id;
+                            });
+                          }}
+                          class="ml-4 text-gray-600 hover:text-gray-900 cursor-pointer"
+                          >{$_("cancel")}</button
+                        >
+                        <button
+                          tabindex="0"
+                          on:click={async () => {
+                            TrackService.trackControllerRemove(t.id);
+                            deleteTracks = deleteTracks.filter((tr) => {
+                              tr.id !== t.id;
+                            });
+                            tracksstore.set($tracksstore.filter((tr)=>tr.id !== t.id))
+                            toast($_("runner-deleted"));
+                          }}
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                          >{$_("confirm-delete")}</button
+                        >
+                      {:else}
+                        <button
+                          tabindex="0"
+                          on:click={() => {
+                            deleteTracks.push(t.id);
+                            deleteTracks = deleteTracks;
+                          }}
+                          class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
+                          >{$_("delete")}</button
+                        >
+                      {/if}
+                    </div>
+                  </div>
+                </td>
               </tr>
             {/each}
           </tbody>