feat: Add Upcoming Shows feature (backend+frontend) and Special Features section
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
Some checks are pending
Deploy Elmeg / deploy (push) Waiting to run
This commit is contained in:
fullsizemalt
parent
e4dc00fb4d
commit
c9a22de2a9
4 changed files with 184 additions and 4 deletions
|
|
@ -48,6 +48,17 @@ def read_recent_shows(
|
|||
shows = session.exec(query).all()
|
||||
return shows
|
||||
|
||||
@router.get("/upcoming", response_model=List[ShowRead])
|
||||
def read_upcoming_shows(
|
||||
limit: int = Query(default=50, le=100),
|
||||
session: Session = Depends(get_session)
|
||||
):
|
||||
"""Get upcoming shows ordered by date ascending"""
|
||||
from datetime import datetime
|
||||
query = select(Show).where(Show.date > datetime.now()).order_by(Show.date.asc()).limit(limit)
|
||||
shows = session.exec(query).all()
|
||||
return shows
|
||||
|
||||
@router.get("/{slug}", response_model=ShowRead)
|
||||
def read_show(slug: str, session: Session = Depends(get_session)):
|
||||
show = session.exec(select(Show).where(Show.slug == slug)).first()
|
||||
|
|
|
|||
|
|
@ -76,10 +76,20 @@ function ShowsContent() {
|
|||
return (
|
||||
<div className="container py-10 space-y-8 animate-in fade-in duration-700">
|
||||
<div className="flex flex-col gap-2">
|
||||
<h1 className="text-3xl font-bold tracking-tight">Shows</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Browse the complete archive of performances.
|
||||
</p>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Shows</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Browse the complete archive of performances.
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/shows/upcoming">
|
||||
<Button variant="outline" className="gap-2">
|
||||
<Calendar className="h-4 w-4" />
|
||||
Upcoming Shows
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
|
|
|
|||
121
frontend/app/shows/upcoming/page.tsx
Normal file
121
frontend/app/shows/upcoming/page.tsx
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
"use client"
|
||||
|
||||
import { useEffect, useState, Suspense } from "react"
|
||||
import { getApiUrl } from "@/lib/api-config"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import Link from "next/link"
|
||||
import { Calendar, MapPin, Loader2, ArrowLeft } from "lucide-react"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
interface Show {
|
||||
id: number
|
||||
slug?: string
|
||||
date: string
|
||||
venue: {
|
||||
id: number
|
||||
name: string
|
||||
city: string
|
||||
state: string
|
||||
}
|
||||
}
|
||||
|
||||
function UpcomingShowsContent() {
|
||||
const [shows, setShows] = useState<Show[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
// Fetch upcoming shows
|
||||
fetch(`${getApiUrl()}/shows/upcoming?limit=100`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
// Already sorted ascending by backend, but ensure just in case
|
||||
setShows(data)
|
||||
})
|
||||
.catch(console.error)
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="container py-10 space-y-8">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Skeleton className="h-10 w-48" />
|
||||
<Skeleton className="h-5 w-96" />
|
||||
</div>
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<Skeleton key={i} className="h-40 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container py-10 space-y-8 animate-in fade-in duration-700">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link href="/shows">
|
||||
<Button variant="ghost" size="icon">
|
||||
<ArrowLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
</Link>
|
||||
<div className="flex flex-col gap-1">
|
||||
<h1 className="text-3xl font-bold tracking-tight">Upcoming Shows</h1>
|
||||
<p className="text-muted-foreground">
|
||||
See where the flock is headed next.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{shows.length === 0 ? (
|
||||
<div className="text-center py-20 bg-muted/20 rounded-lg">
|
||||
<h3 className="text-lg font-medium text-muted-foreground">No upcoming shows found.</h3>
|
||||
<p className="text-sm text-muted-foreground/70 mt-1">Check back later for tour announcements!</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{shows.map((show) => (
|
||||
<Card key={show.id} className="h-full border-primary/20 hover:border-primary/50 transition-colors">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Calendar className="h-5 w-5 text-primary" />
|
||||
{new Date(show.date).toLocaleDateString(undefined, {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<MapPin className="h-4 w-4" />
|
||||
<span>
|
||||
{show.venue?.name}, {show.venue?.city}, {show.venue?.state}
|
||||
</span>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function LoadingFallback() {
|
||||
return (
|
||||
<div className="container py-10 flex items-center justify-center min-h-[400px]">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function UpcomingShowsPage() {
|
||||
return (
|
||||
<Suspense fallback={<LoadingFallback />}>
|
||||
<UpcomingShowsContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
|
|
@ -141,6 +141,44 @@ export default function VideosPage() {
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* Special Features Section */}
|
||||
<div className="bg-muted/30 rounded-lg p-6 border border-primary/20">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Film className="h-5 w-5 text-purple-600" />
|
||||
<h2 className="text-xl font-semibold">Special Features</h2>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="flex flex-col gap-2 p-4 bg-background rounded-md border hover:border-primary/50 transition-colors">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold text-lg">Show Upon Time</h3>
|
||||
<Badge variant="secondary">Documentary</Badge>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
An intimate look behind the scenes of Goose's journey.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => toggleVideo("doc-show-upon-time")}
|
||||
className="text-primary hover:underline text-sm font-medium text-left mt-2 flex items-center gap-2"
|
||||
>
|
||||
<Youtube className="h-4 w-4" />
|
||||
Watch Now
|
||||
</button>
|
||||
{expandedVideoId === "doc-show-upon-time" && (
|
||||
<div className="mt-4 aspect-video w-full rounded-lg overflow-hidden shadow-lg bg-black">
|
||||
<iframe
|
||||
width="100%"
|
||||
height="100%"
|
||||
src={`https://www.youtube.com/embed/JdWnhOIWh-I?autoplay=1`}
|
||||
title="Show Upon Time"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row gap-4 justify-between items-start md:items-center">
|
||||
{/* Filter Tabs */}
|
||||
<div className="flex gap-2">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue