leon.hoppe/SpotiParty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished enqueue site

Browse Source
This commit is contained in:
Leon Hoppe
2025-11-30 11:52:48 +01:00
parent 2cb06c5154
commit ad7c50a988
66 changed files with 457 additions and 60023 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
SpotiParty.Web/Components/Pages/Counter.razor
View File

@@ -1,19 +0,0 @@
@page "/counter"
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount() {
currentCount++;
}
}

49
SpotiParty.Web/Components/Pages/EnqueuePage.razor Normal file
View File

@@ -0,0 +1,49 @@
@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>

66
SpotiParty.Web/Components/Pages/EnqueuePage.razor.cs Normal file
View File

@@ -0,0 +1,66 @@
using Microsoft.AspNetCore.Components;
using SpotifyAPI.Web;
using SpotiParty.Web.Services;
namespace SpotiParty.Web.Components.Pages;
public partial class EnqueuePage(AuthorizationHandler authHandler) : ComponentBase {
private readonly int _currentYear = DateTime.Now.Year;
private SpotifyClient _client = null!;
private string _searchText = string.Empty;
private List<FullTrack> _tracks = new();
private bool _isLoading;
private FullTrack? _selectedTrack;
private bool _isAdding;
private bool _success;
protected override async Task OnInitializedAsync() {
await base.OnInitializedAsync();
_client = await authHandler.ConfigureClient();
}
private async Task ExecuteSearch() {
if (_isLoading) return;
if (string.IsNullOrWhiteSpace(_searchText)) return;
_isLoading = true;
_tracks.Clear();
StateHasChanged();
var request = new SearchRequest(SearchRequest.Types.Track, _searchText);
var response = await _client.Search.Item(request);
var responseTracks = response.Tracks.Items ?? [];
foreach (var track in responseTracks) {
_tracks.Add(track);
}
_isLoading = false;
}
private void OnTrackClick(FullTrack track) {
if (_selectedTrack is not null) return;
_selectedTrack = track;
}
private void DialogDismiss() {
if (_isAdding) return;
_selectedTrack = null;
}
private async Task DialogAccept() {
if (_selectedTrack is null || _isAdding) return;
_isAdding = true;
/*var request = new PlayerAddToQueueRequest(_selectedTrack.Uri);
await _client.Player.AddToQueue(request);*/
await Task.Delay(3000); //TODO: Simulate adding
_isAdding = false;
_success = true;
StateHasChanged();
await Task.Delay(2000);
_success = false;
_selectedTrack = null;
}
}

120
SpotiParty.Web/Components/Pages/EnqueuePage.razor.css Normal file
View File

@@ -0,0 +1,120 @@
header {
text-align: center;
padding: 1rem;
background: var(--color-primary);
color: var(--color-text);
}
header h1 {
margin: 0;
font-size: 2rem;
&:focus {
outline: none;
}
}
main {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
flex-grow: 1;
min-height: 0;
}
.search-section {
display: flex;
gap: 0.5rem;
}
.search-section input {
padding: 0.5rem;
flex-grow: 1;
border-radius: 5px;
border: none;
&:focus {
outline: none;
}
}
section, form {
width: 100%;
padding: 1rem;
border-radius: 10px;
background: var(--color-background-light);
}
.results-section {
flex: 1;
margin-inline: auto;
overflow-y: auto;
}
h2 {
border-bottom: 1px solid var(--color-accent);
padding-bottom: 0.5rem;
margin-top: 0;
}
footer {
margin-top: auto;
text-align: center;
padding: 0.5rem;
background: var(--color-primary);
}
.confirm-dialog {
border: none;
border-radius: 10px;
padding: 1.5rem;
background: var(--color-background);
color: var(--color-text);
width: 320px;
max-width: 90%;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
top: 50%;
translate: 0 -50%;
}
.confirm-dialog::backdrop {
background: rgba(0,0,0,0.6);
}
.confirm-dialog h3 {
margin-top: 0;
margin-bottom: 0.5rem;
font-size: 1.2rem;
border-bottom: 1px solid var(--color-accent);
padding-bottom: 0.5rem;
}
.confirm-dialog p {
margin: 1rem 0;
}
.dialog-buttons {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
.dialog-buttons button:disabled {
background: var(--color-background-light) !important;
}
.button-secondary {
padding: 0.6rem 1rem;
border: none;
border-radius: 5px;
background: var(--color-accent);
color: var(--color-text);
cursor: pointer;
}
.button-secondary:hover {
background: #555555;
}

35
SpotiParty.Web/Components/Pages/Error.razor
View File

@@ -1,35 +0,0 @@
@page "/Error"
@using System.Diagnostics
<PageTitle>Error</PageTitle>
<h1 class="text-danger">Error.</h1>
<h2 class="text-danger">An error occurred while processing your request.</h2>
@if (ShowRequestId) {
<p>
<strong>Request ID:</strong> <code>@RequestId</code>
</p>
}
<h3>Development Mode</h3>
<p>
Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
</p>
<p>
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
It can result in displaying sensitive information from exceptions to end users.
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
and restarting the app.
</p>
@code{
[CascadingParameter] private HttpContext? HttpContext { get; set; }
private string? RequestId { get; set; }
private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
protected override void OnInitialized() =>
RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
}

7
SpotiParty.Web/Components/Pages/Home.razor
View File

@@ -1,7 +0,0 @@
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.

13
SpotiParty.Web/Components/Pages/NotFound.razor
View File

@@ -1,5 +1,12 @@
@page "/not-found"
@layout MainLayout
<h3>Not Found</h3>
<p>Sorry, the content you are looking for does not exist.</p>
@inject NavigationManager Navigator
@code {
protected override void OnInitialized() {
base.OnInitialized();
Navigator.NavigateTo("/enqueue", forceLoad: true);
}
}

61
SpotiParty.Web/Components/Pages/Weather.razor
View File

@@ -1,61 +0,0 @@
@page "/weather"
@attribute [StreamRendering]
<PageTitle>Weather</PageTitle>
<h1>Weather</h1>
<p>This component demonstrates showing data.</p>
@if (forecasts == null) {
<p>
<em>Loading...</em>
</p>
}
else {
<table class="table">
<thead>
<tr>
<th>Date</th>
<th aria-label="Temperature in Celsius">Temp. (C)</th>
<th aria-label="Temperature in Fahrenheit">Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
@foreach (var forecast in forecasts) {
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
</tbody>
</table>
}
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync() {
// Simulate asynchronous loading to demonstrate streaming rendering
await Task.Delay(500);
var startDate = DateOnly.FromDateTime(DateTime.Now);
var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast {
Date = startDate.AddDays(index),
TemperatureC = Random.Shared.Next(-20, 55),
Summary = summaries[Random.Shared.Next(summaries.Length)]
}).ToArray();
}
private class WeatherForecast {
public DateOnly Date { get; set; }
public int TemperatureC { get; set; }
public string? Summary { get; set; }
public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}
}