88 lines
3.4 KiB
PHP
88 lines
3.4 KiB
PHP
|
<div wire:poll.5s="refreshSongs" class="space-y-6 p-4">
|
||
|
|
|
||
|
|
<x-table bordered striped size="sm" class="w-full">
|
||
|
|
<x-slot name="header">
|
||
|
|
<tr>
|
||
|
|
<th class="px-4 py-2 w-16 text-center">編號</th>
|
||
|
|
<th class="px-4 py-2">歌曲</th>
|
||
|
|
<th class="px-4 py-2 w-24 text-center">狀態</th>
|
||
|
|
</tr>
|
||
|
|
</x-slot>
|
||
|
|
|
||
|
|
{{-- 正在播放 --}}
|
||
|
|
<tr>
|
||
|
|
<td class="px-4 py-2 text-center text-blue-600 font-semibold" colspan="3">
|
||
|
|
🎵 正在播放
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
@forelse($playing as $song)
|
||
|
|
<tr class="hover:bg-gray-50 cursor-pointer">
|
||
|
|
<td class="px-4 py-2 text-center">{{ $song->song_id }}</td>
|
||
|
|
<td class="px-4 py-2">
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-lg font-semibold">{{ $song->song_name }}</span>
|
||
|
|
<span class="text-xs text-gray-500 self-end">{{ $song->artist_name }}</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td class="px-4 py-2 text-blue-500 text-center">{{ $song->status->labels() }}</td>
|
||
|
|
</tr>
|
||
|
|
@empty
|
||
|
|
<tr>
|
||
|
|
<td class="px-4 py-4 text-center text-gray-400" colspan="3">
|
||
|
|
目前沒有正在播放的歌曲
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
@endforelse
|
||
|
|
|
||
|
|
{{-- 待播 / 插播 --}}
|
||
|
|
<tr>
|
||
|
|
<td class="px-4 py-2 text-center text-yellow-600 font-semibold" colspan="3">
|
||
|
|
⏳ 待播 / 插播
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
@forelse($nextSong as $song)
|
||
|
|
<tr class="hover:bg-gray-50 cursor-pointer">
|
||
|
|
<td class="px-4 py-2 text-center">{{ $song->song_id }}</td>
|
||
|
|
<td class="px-4 py-2">
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-lg font-semibold">{{ $song->song_name }}</span>
|
||
|
|
<span class="text-xs text-gray-500 self-end">{{ $song->artist_name }}</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td class="px-4 py-2 text-yellow-500 text-center">{{ $song->status->labels() }}</td>
|
||
|
|
</tr>
|
||
|
|
@empty
|
||
|
|
<tr>
|
||
|
|
<td class="px-4 py-4 text-center text-gray-400" colspan="3">
|
||
|
|
目前沒有待播歌曲
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
@endforelse
|
||
|
|
|
||
|
|
{{-- 已結束播放 --}}
|
||
|
|
<tr>
|
||
|
|
<td class="px-4 py-2 text-center text-gray-600 font-semibold" colspan="3">
|
||
|
|
✅ 已結束播放
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
@forelse($finished as $song)
|
||
|
|
<tr class="hover:bg-gray-50 cursor-pointer">
|
||
|
|
<td class="px-4 py-2 text-center">{{ $song->song_id }}</td>
|
||
|
|
<td class="px-4 py-2">
|
||
|
|
<div class="flex flex-col">
|
||
|
|
<span class="text-lg font-semibold">{{ $song->song_name }}</span>
|
||
|
|
<span class="text-xs text-gray-500 self-end">{{ $song->artist_name }}</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td class="px-4 py-2 text-gray-500 text-center">{{ $song->status->labels() }}</td>
|
||
|
|
</tr>
|
||
|
|
@empty
|
||
|
|
<tr>
|
||
|
|
<td class="px-4 py-4 text-center text-gray-400" colspan="3">
|
||
|
|
尚無結束播放的歌曲
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
@endforelse
|
||
|
|
|
||
|
|
</x-table>
|
||
|
|
</div>
|