Updated the track editing switch logic

src/components/tracks/TracksOverview.svelte

@@ -8,6 +8,8 @@
   import { tracks as tracksstore } from "../../store.js";
   import toast from "svelte-french-toast";
   $: trackscache = [];
+  $: deleteTracks = [];
+  $: editTracks = [];
   tracksstore.subscribe((val) => {
     trackscache = val;
   });
@@ -71,6 +73,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">
@@ -91,9 +99,13 @@
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="flex items-center">
                     <div class="ml-4">
+                      {#if editTracks.includes(t.id)}
+                        <input class="shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-0.5" type="text" value={t.name} />
+                      {:else}
                         <div class="text-sm font-medium text-gray-900">
                           {t.name}
                         </div>
+                      {/if}
                     </div>
                   </div>
                 </td>
@@ -115,6 +127,75 @@
                     </div>
                   </div>
                 </td>
+                <td class="px-6 py-4 whitespace-nowrap">
+                  <div class="flex items-center">
+                    {#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 if editTracks.findIndex((tr)=>tr.id === t.id) !== -1}
+                      <button
+                        tabindex="0"
+                        on:click={() => {
+                          editTracks = editTracks.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 () => {
+                          console.log("TODO:");
+                        }}
+                        class="ml-4 text-green-600 hover:text-green-900 cursor-pointer"
+                        >{$_("save")}</button
+                      >
+                    {:else}
+                      <button
+                        tabindex="0"
+                        on:click={() => {
+                          editTracks.push(t);
+                          editTracks = editTracks;
+                        }}
+                        class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer"
+                        >{$_("edit")}</button
+                      >
+                      <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>
+                </td>
               </tr>
             {/each}
           </tbody>