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"; import toast from "svelte-french-toast";
$: trackscache = []; $: trackscache = [];
$: deleteTracks = []; $: deleteTracks = [];
$: editTracks = [];
tracksstore.subscribe((val) => { tracksstore.subscribe((val) => {
trackscache = val; trackscache = val;
}); });
@ -98,9 +99,13 @@
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center"> <div class="flex items-center">
<div class="ml-4"> <div class="ml-4">
<div class="text-sm font-medium text-gray-900"> {#if editTracks.includes(t.id)}
{t.name} <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} />
</div> {:else}
<div class="text-sm font-medium text-gray-900">
{t.name}
</div>
{/if}
</div> </div>
</div> </div>
</td> </td>
@ -124,53 +129,71 @@
</td> </td>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center"> <div class="flex items-center">
<div class="ml-4"> {#if deleteTracks.includes(t.id)}
{#if deleteTracks.includes(t.id)} <button
<button tabindex="0"
tabindex="0" on:click={() => {
on:click={() => { deleteTracks = deleteTracks.filter((tr) => {
deleteTracks = deleteTracks.filter((tr) => { tr.id !== t.id;
tr.id !== t.id; });
}); }}
}} class="ml-4 text-gray-600 hover:text-gray-900 cursor-pointer"
class="ml-4 text-gray-600 hover:text-gray-900 cursor-pointer" >{$_("cancel")}</button
>{$_("cancel")}</button >
> <button
<button tabindex="0"
tabindex="0" on:click={async () => {
on:click={async () => { TrackService.trackControllerRemove(t.id);
TrackService.trackControllerRemove(t.id); deleteTracks = deleteTracks.filter((tr) => {
deleteTracks = deleteTracks.filter((tr) => { tr.id !== t.id;
tr.id !== t.id; });
}); tracksstore.set(
tracksstore.set( $tracksstore.filter((tr) => tr.id !== t.id)
$tracksstore.filter((tr) => tr.id !== t.id) );
); toast($_("runner-deleted"));
toast($_("runner-deleted")); }}
}} class="ml-4 text-red-600 hover:text-red-900 cursor-pointer"
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer" >{$_("confirm-delete")}</button
>{$_("confirm-delete")}</button >
> {:else if editTracks.findIndex((tr)=>tr.id === t.id) !== -1}
{:else} <button
<button tabindex="0"
tabindex="0" on:click={() => {
on:click={() => { editTracks = editTracks.filter((tr) => {
console.log("TODO:"); tr.id !== t.id;
}} });
class="ml-4 text-indigo-600 hover:text-indigo-900 cursor-pointer" }}
>{$_("edit")}</button class="ml-4 text-gray-600 hover:text-gray-900 cursor-pointer"
> >{$_("cancel")}</button
<button >
tabindex="0" <button
on:click={() => { tabindex="0"
deleteTracks.push(t.id); on:click={async () => {
deleteTracks = deleteTracks; console.log("TODO:");
}} }}
class="ml-4 text-red-600 hover:text-red-900 cursor-pointer" class="ml-4 text-green-600 hover:text-green-900 cursor-pointer"
>{$_("delete")}</button >{$_("save")}</button
> >
{/if} {:else}
</div> <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> </div>
</td> </td>
</tr> </tr>