lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

Updated the track editing switch logic

Browse Source
This commit is contained in:
Nicolai Ort 2023-05-01 14:13:40 +02:00
parent 175d86745f
commit a953349c14
Signed by: niggl
GPG Key ID: 13AFA55AF62F269F
1 changed files with 73 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/components/tracks/TracksOverview.svelte
View File

@ -9,6 +9,7 @@
import toast from "svelte-french-toast";
$: trackscache = [];
$: deleteTracks = [];
$: editTracks = [];
tracksstore.subscribe((val) => {
trackscache = val;
});
@ -98,9 +99,13 @@
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
{t.name}
</div>
{#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>
@ -124,53 +129,71 @@
</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={() => {
console.log("TODO:");
}}
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>
{#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>