91 lines
4.6 KiB
HTML
91 lines
4.6 KiB
HTML
<div id="artist-list" hx-swap-oob="true">
|
|
{#if artists.isEmpty()}
|
|
<div class="bg-base-200" style="border:1px solid var(--fallback-b3,oklch(var(--b3)/1));border-radius:0.5rem;padding:2.5rem;text-align:center">
|
|
<svg class="icon-lg text-base-content/20" style="margin:0 auto 0.75rem" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
|
|
</svg>
|
|
<p class="text-lg font-medium text-base-content/60">No artists tracked yet</p>
|
|
<p class="text-sm text-base-content/40 mt-2">Search for artists using the search bar above</p>
|
|
</div>
|
|
{#else}
|
|
<div class="overflow-x-auto rounded-box border border-base-300">
|
|
<table class="table table-pin-rows">
|
|
<thead>
|
|
<tr style="background:var(--fallback-b2,oklch(var(--b2)/1))">
|
|
<th>Artist</th>
|
|
<th>Since</th>
|
|
<th>Release Types</th>
|
|
<th style="width:6rem">Remove</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#for artist in artists}
|
|
<tr style="transition:background 0.15s" onmouseover="this.style.background='var(--fallback-b2,oklch(var(--b2)/1))'" onmouseout="this.style.background=''">
|
|
<td>
|
|
<a href="https://musicbrainz.org/artist/{artist.mbid}" target="_blank" rel="noopener noreferrer" style="font-weight:500;text-decoration:none;color:inherit">{artist.name}</a>
|
|
{#if artist.disambiguation}
|
|
<div class="text-xs text-base-content/50">{artist.disambiguation}</div>
|
|
{/if}
|
|
</td>
|
|
<td class="text-sm text-base-content/50">{artist.createdAt}</td>
|
|
<td>
|
|
<div style="display:flex;flex-wrap:wrap;gap:0.375rem">
|
|
<label class="label cursor-pointer gap-1 p-1">
|
|
<input type="checkbox" class="checkbox checkbox-xs checkbox-primary"
|
|
{#if artist.albumMonitored}checked{/if}
|
|
hx-patch="/api/artists/{artist.mbid}/monitor?type=album"
|
|
hx-target="#artist-list"
|
|
hx-swap="innerHTML">
|
|
<span class="label-text text-xs" style="color:var(--p)">Album</span>
|
|
</label>
|
|
<label class="label cursor-pointer gap-1 p-1">
|
|
<input type="checkbox" class="checkbox checkbox-xs checkbox-secondary"
|
|
{#if artist.singleMonitored}checked{/if}
|
|
hx-patch="/api/artists/{artist.mbid}/monitor?type=single"
|
|
hx-target="#artist-list"
|
|
hx-swap="innerHTML">
|
|
<span class="label-text text-xs" style="color:var(--s)">Single</span>
|
|
</label>
|
|
<label class="label cursor-pointer gap-1 p-1">
|
|
<input type="checkbox" class="checkbox checkbox-xs checkbox-accent"
|
|
{#if artist.epMonitored}checked{/if}
|
|
hx-patch="/api/artists/{artist.mbid}/monitor?type=ep"
|
|
hx-target="#artist-list"
|
|
hx-swap="innerHTML">
|
|
<span class="label-text text-xs" style="color:var(--a)">EP</span>
|
|
</label>
|
|
<label class="label cursor-pointer gap-1 p-1">
|
|
<input type="checkbox" class="checkbox checkbox-xs"
|
|
{#if artist.broadcastMonitored}checked{/if}
|
|
hx-patch="/api/artists/{artist.mbid}/monitor?type=broadcast"
|
|
hx-target="#artist-list"
|
|
hx-swap="innerHTML">
|
|
<span class="label-text text-xs text-base-content/60">Broadcast</span>
|
|
</label>
|
|
<label class="label cursor-pointer gap-1 p-1">
|
|
<input type="checkbox" class="checkbox checkbox-xs"
|
|
{#if artist.otherMonitored}checked{/if}
|
|
hx-patch="/api/artists/{artist.mbid}/monitor?type=other"
|
|
hx-target="#artist-list"
|
|
hx-swap="innerHTML">
|
|
<span class="label-text text-xs text-base-content/60">Other</span>
|
|
</label>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<button class="btn btn-ghost btn-sm btn-square" style="color:var(--er)"
|
|
hx-delete="/api/artists/{artist.mbid}"
|
|
hx-target="#artist-list"
|
|
hx-swap="innerHTML"
|
|
onclick="return confirm('Remove {artist.name}?')">
|
|
<svg class="icon-sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
{/for}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|
|
</div>
|