Files
SpotiParty/SpotiParty.Web/Components/Pages/EnqueuePage.razor
2025-11-30 11:52:48 +01:00

50 lines
1.6 KiB
Plaintext

@page "/enqueue"
@using SpotiParty.Web.Components.Components
@rendermode InteractiveServer
<header>
<h1>🎵 SpotiParty</h1>
<p>Suche ein Lied und füge es zur Warteschlange hinzu</p>
</header>
<main>
<form class="search-section" @onsubmit="ExecuteSearch">
<input type="text" id="searchInput" placeholder="Song oder Künstler suchen..." @onchange="e => _searchText = e.Value!.ToString()!">
<button class="button-primary" type="submit" disabled=@_isLoading>Suchen</button>
</form>
<section class="results-section">
<h2>Suchergebnisse</h2>
<div class="results">
@foreach (var track in _tracks) {
<SpotifyTrack Track="track" OnClick="@OnTrackClick" />
}
</div>
@if (_isLoading) {
<p>Lade...</p>
}
</section>
</main>
<footer>
<p>SpotiParty © @_currentYear</p>
</footer>
<dialog class="confirm-dialog" style="display: @(_selectedTrack is null ? "none" : "block")">
@if (!_success) {
<h3>Bestätigung</h3>
<p>Möchtest du den Titel zur Warteschlange hinzufügen?</p>
@if (_selectedTrack is not null) {
<SpotifyTrack Track="_selectedTrack" />
}
<div class="dialog-buttons">
<button class="button-primary" @onclick="DialogAccept" disabled=@_isAdding>Ja</button>
<button class="button-secondary" @onclick="DialogDismiss" disabled=@_isAdding>Nein</button>
</div>
}
else {
<h3>Bestätigung</h3>
<p>Der Titel wurde zur Warteschlange hinzugefügt!</p>
}
</dialog>