122 lines
4.8 KiB
PHP
122 lines
4.8 KiB
PHP
@extends('layouts.nova')
|
|
|
|
@php
|
|
$headerBreadcrumbs = collect([
|
|
(object) ['name' => $page_title ?? 'Daily Uploads', 'url' => route('legacy.daily_uploads')],
|
|
]);
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<x-nova-page-header
|
|
section="Uploads"
|
|
:title="$page_title ?? 'Daily Uploads'"
|
|
icon="fa-calendar-day"
|
|
:breadcrumbs="$headerBreadcrumbs"
|
|
description="Browse all artworks uploaded on a specific date."
|
|
headerClass="pb-6"
|
|
>
|
|
<x-slot name="actions">
|
|
<a
|
|
href="{{ route('uploads.latest') }}"
|
|
class="inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium border border-white/[0.08] bg-white/[0.04] text-white/70 hover:bg-white/[0.08] hover:text-white transition-colors"
|
|
>
|
|
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
|
</svg>
|
|
Latest Uploads
|
|
</a>
|
|
</x-slot>
|
|
</x-nova-page-header>
|
|
|
|
{{-- ── Date strip ── --}}
|
|
<div class="px-6 pt-8 md:px-10 pb-5">
|
|
<div class="flex items-center gap-1.5 overflow-x-auto pb-1 scrollbar-none" id="dateStrip">
|
|
@foreach($dates as $i => $d)
|
|
<button type="button"
|
|
data-iso="{{ $d['iso'] }}"
|
|
id="tab-{{ $i+1 }}"
|
|
class="flex-shrink-0 rounded-lg px-3.5 py-1.5 text-xs font-medium border transition-colors
|
|
{{ $i === 0
|
|
? 'bg-sky-500/15 text-sky-300 border-sky-500/30 active-date-tab'
|
|
: 'border-white/[0.08] bg-white/[0.03] text-white/50 hover:text-white hover:bg-white/[0.07]' }}">
|
|
@if ($i === 0)
|
|
Today
|
|
@elseif ($i === 1)
|
|
Yesterday
|
|
@else
|
|
{{ \Carbon\Carbon::parse($d['iso'])->format('M j') }}
|
|
@endif
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ── Active date label ── --}}
|
|
<div class="px-6 md:px-10 mb-4">
|
|
<p id="activeDateLabel" class="text-sm text-white/40">
|
|
Showing uploads from <strong class="text-white/70">{{ $dates[0]['label'] ?? 'today' }}</strong>
|
|
</p>
|
|
</div>
|
|
|
|
{{-- ── Grid container ── --}}
|
|
<div id="myContent" class="px-6 pb-16 md:px-10 min-h-48">
|
|
@include('web.partials.daily-uploads-grid', ['arts' => $recent])
|
|
</div>
|
|
|
|
{{-- ── Loading overlay (hidden) ── --}}
|
|
<template id="loadingTpl">
|
|
<div class="flex items-center justify-center py-20 text-white/30 text-sm gap-2">
|
|
<svg class="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
|
|
</svg>
|
|
Loading artworks…
|
|
</div>
|
|
</template>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
(function () {
|
|
var endpoint = '/uploads/daily';
|
|
var strip = document.getElementById('dateStrip');
|
|
var content = document.getElementById('myContent');
|
|
var dateLabel = document.getElementById('activeDateLabel');
|
|
var loadingTpl = document.getElementById('loadingTpl');
|
|
|
|
function setActive(btn) {
|
|
strip.querySelectorAll('button').forEach(function (b) {
|
|
b.classList.remove('bg-sky-500/15', 'text-sky-300', 'border-sky-500/30', 'active-date-tab');
|
|
b.classList.add('border-white/[0.08]', 'bg-white/[0.03]', 'text-white/50');
|
|
});
|
|
btn.classList.add('bg-sky-500/15', 'text-sky-300', 'border-sky-500/30', 'active-date-tab');
|
|
btn.classList.remove('border-white/[0.08]', 'bg-white/[0.03]', 'text-white/50');
|
|
}
|
|
|
|
function loadDate(iso, label) {
|
|
content.innerHTML = loadingTpl.innerHTML;
|
|
dateLabel.innerHTML = 'Showing uploads from <strong class="text-white/70">' + label + '</strong>';
|
|
|
|
fetch(endpoint + '?ajax=1&datum=' + encodeURIComponent(iso), {
|
|
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
|
})
|
|
.then(function (r) { return r.text(); })
|
|
.then(function (html) { content.innerHTML = html; })
|
|
.catch(function () {
|
|
content.innerHTML = '<p class="text-center text-white/30 py-16 text-sm">Failed to load artworks.</p>';
|
|
});
|
|
}
|
|
|
|
strip.addEventListener('click', function (e) {
|
|
var btn = e.target.closest('button[data-iso]');
|
|
if (!btn || btn.classList.contains('active-date-tab')) return;
|
|
setActive(btn);
|
|
var label = btn.textContent.trim();
|
|
loadDate(btn.getAttribute('data-iso'), label);
|
|
});
|
|
})();
|
|
</script>
|
|
@endpush
|
|
|
|
@endsection
|