jessikitty/ScratchingPost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

v1.0.0: Playlist management with drag-and-drop

Browse Source
This commit is contained in:
jessikitty
2026-05-20 15:25:42 +10:00
parent bc6fc83c90
commit 4a2caa6421
1 changed files with 81 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Views/Devices/Playlist.cshtml
+81
View File
@@ -0,0 +1,81 @@
@model Device
@{
ViewData["Title"] = $"PURR — {Model.Name}";
var availableSlides = ViewBag.AvailableSlides as List<Slide>;
}
@section HeaderActions {
<a href="/@Model.Slug" target="_blank" class="btn btn-success"><i class="bi bi-box-arrow-up-right me-1"></i>View Display</a>
}
<div class="row g-4">
<div class="col-lg-8">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0"><i class="bi bi-music-note-list me-2"></i>Playlist <small class="text-muted ms-2">Drag to reorder</small></h5>
<span class="badge bg-secondary" id="totalDuration"></span>
</div>
<div class="card-body p-0">
@if (Model.DeviceSlides.Any())
{
<div id="playlistItems" class="list-group list-group-flush">
@foreach (var ds in Model.DeviceSlides)
{
<div class="list-group-item playlist-item d-flex align-items-center gap-3" data-id="@ds.Id" data-duration="@ds.DurationSeconds">
<div class="drag-handle" title="Drag to reorder"><i class="bi bi-grip-vertical"></i></div>
<div class="flex-grow-1">
<div class="d-flex align-items-center gap-2">
<strong>@ds.Slide.Name</strong>
@switch (ds.Slide.SlideType) {
case SlideType.Content: <span class="badge bg-info badge-sm">Content</span> break;
case SlideType.Embed: <span class="badge bg-warning text-dark badge-sm">Embed</span> break;
case SlideType.IcsCalendar: <span class="badge bg-success badge-sm">Calendar</span> break;
}
</div>
</div>
<div class="d-flex align-items-center gap-2">
<div class="form-check form-switch"><input class="form-check-input toggle-enabled" type="checkbox" data-id="@ds.Id" @(ds.Enabled ? "checked" : "") /></div>
<div class="input-group input-group-sm duration-input" style="width:120px;"><input type="number" class="form-control text-center duration-value" value="@ds.DurationSeconds" min="5" max="3600" data-id="@ds.Id" /><span class="input-group-text">sec</span></div>
<form asp-action="RemoveFromPlaylist" method="post" class="d-inline" onsubmit="return confirm('Remove this meow?');">
<input type="hidden" name="id" value="@Model.Id" /><input type="hidden" name="deviceSlideId" value="@ds.Id" />
<button type="submit" class="btn btn-sm btn-outline-danger"><i class="bi bi-x-lg"></i></button>
</form>
</div>
</div>
}
</div>
}
else
{
<div class="p-4 text-center text-muted"><i class="bi bi-music-note-list" style="font-size:2em;"></i><p class="mt-2">No meows in this PURR yet.</p></div>
}
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card mb-4"><div class="card-header"><h6 class="mb-0">Kitten Info</h6></div><div class="card-body"><p class="mb-1"><strong>@Model.Name</strong></p><p class="mb-1 text-muted"><code>/@Model.Slug</code></p><p class="mb-0 text-muted">@(Model.ResolutionWidth)x@(Model.ResolutionHeight) · @Model.Transition</p></div></div>
<div class="card"><div class="card-header"><h6 class="mb-0"><i class="bi bi-plus-circle me-1"></i>Add Meow</h6></div><div class="card-body">
@if (availableSlides != null && availableSlides.Any())
{
<form asp-action="AddToPlaylist" method="post"><input type="hidden" name="id" value="@Model.Id" />
<div class="mb-3"><label class="form-label">Select Slide</label><select name="slideId" class="form-select" required><option value="">— Choose a meow —</option>@foreach (var slide in availableSlides){<option value="@slide.Id">@slide.Name (@slide.SlideType)</option>}</select></div>
<div class="mb-3"><label class="form-label">Duration (seconds)</label><input type="number" name="durationSeconds" class="form-control" value="30" min="5" max="3600" /></div>
<button type="submit" class="btn btn-primary w-100"><i class="bi bi-plus-lg me-1"></i>Add to PURR</button>
</form>
}
else { <p class="text-muted mb-2">All meows assigned.</p><a href="/admin/slides/create" class="btn btn-outline-primary btn-sm"><i class="bi bi-plus-lg me-1"></i>Create New Meow</a> }
</div></div>
</div>
</div>
@section Scripts {
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.3/Sortable.min.js"></script>
<script>
function updateTotalDuration(){var t=0;document.querySelectorAll('.duration-value').forEach(function(e){t+=parseInt(e.value)||0;});var m=Math.floor(t/60),s=t%60;document.getElementById('totalDuration').textContent='Total: '+(m>0?m+'m ':'')+s+'s loop';}
updateTotalDuration();
var list=document.getElementById('playlistItems');
if(list){Sortable.create(list,{handle:'.drag-handle',animation:200,onEnd:function(){var ids=[];list.querySelectorAll('.playlist-item').forEach(function(e){ids.push(parseInt(e.dataset.id));});fetch('/admin/devices/reorderplaylist',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({itemIds:ids})});}});}
document.querySelectorAll('.duration-value').forEach(function(e){e.addEventListener('change',function(){fetch('/admin/devices/updateduration',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({deviceSlideId:parseInt(this.dataset.id),durationSeconds:parseInt(this.value)})});updateTotalDuration();});});
document.querySelectorAll('.toggle-enabled').forEach(function(e){e.addEventListener('change',function(){fetch('/admin/devices/toggleenabled',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({deviceSlideId:parseInt(this.dataset.id),enabled:this.checked})});});});
</script>
}