Full track table editing

src/components/tracks/TracksOverview.svelte

@@ -99,8 +99,18 @@
                 <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} />
+                      {#if editTracks.findIndex((tr) => tr.id === t.id) !== -1}
+                        <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}
+                          on:input={(e) => {
+                            const i = editTracks.findIndex(
+                              (tr) => tr.id === t.id
+                            );
+                            editTracks[i].name = e.target.value;
+                          }}
+                        />
                       {:else}
                         <div class="text-sm font-medium text-gray-900">
                           {t.name}
@@ -112,18 +122,46 @@
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="flex items-center">
                     <div class="ml-4">
+                      {#if editTracks.findIndex((tr) => tr.id === t.id) !== -1}
+                      <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="number"
+                          value={t.distance}
+                          on:input={(e) => {
+                            const i = editTracks.findIndex(
+                              (tr) => tr.id === t.id
+                            );
+                            editTracks[i].distance = parseInt(e.target.value);
+                          }}
+                        />
+                      {:else}
                       <div class="text-sm font-medium text-gray-900">
                         {t.distance}
                       </div>
+                      {/if}
                     </div>
                   </div>
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="flex items-center">
                     <div class="ml-4">
+                      {#if editTracks.findIndex((tr) => tr.id === t.id) !== -1}
+                      <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="number"
+                          value={t.minimumLapTime}
+                          on:input={(e) => {
+                            const i = editTracks.findIndex(
+                              (tr) => tr.id === t.id
+                            );
+                            editTracks[i].minimumLapTime = parseInt(e.target.value);
+                          }}
+                        />
+                      {:else}
                       <div class="text-sm font-medium text-gray-900">
                         {t.minimumLapTime}
                       </div>
+                      {/if}
                     </div>
                   </div>
                 </td>
@@ -155,7 +193,7 @@
                         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}
+                    {:else if editTracks.findIndex((tr) => tr.id === t.id) !== -1}
                       <button
                         tabindex="0"
                         on:click={() => {
@@ -169,7 +207,23 @@
                       <button
                         tabindex="0"
                         on:click={async () => {
-                          console.log("TODO:");
+                          toast.loading($_("track-is-being-updated"));
+                          const i = editTracks.findIndex(
+                            (tr) => tr.id === t.id
+                          );
+                          const res = await TrackService.trackControllerPut(
+                            t.id,
+                            editTracks[i]
+                          );
+                          tracksstore.set(
+                            $tracksstore.filter((tr) => tr.id !== t.id)
+                          );
+                          $tracksstore.push(res)
+                          editTracks = editTracks.filter((tr) => {
+                            tr.id !== t.id;
+                          });
+                          toast.dismiss();
+                          toast.success($_("track-updated"));
                         }}
                         class="ml-4 text-green-600 hover:text-green-900 cursor-pointer"
                         >{$_("save")}</button