felix/packlist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: sort trips by start date and highlight the next upcoming trip in TripsPage

Browse source
This commit is contained in:
Felix Zett 2025-08-31 19:30:07 +02:00
parent d385e40171
commit aa25701e03
2 changed files with 53 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
backend/routes/trips.py
View file

@ -17,6 +17,7 @@ def list_trips(db: Session = Depends(get_db)):
joinedload(models.Trip.selected_tags),
joinedload(models.Trip.marked_tags),
)
.order_by(models.Trip.start_date.asc())
.all()
)
return [

79
frontend/src/pages/TripsPage.tsx
View file

@ -41,6 +41,13 @@ export default function TripsPage() {
loadTrips();
}, []);
// Markiere nächsten anstehenden Trip
const today = new Date().toISOString().slice(0, 10);
const nextTripIdx = trips.findIndex(
(trip) => trip.start_date >= today
);
const nextTripId = nextTripIdx !== -1 ? trips[nextTripIdx].id : null;
return (
<div>
<h1 className="text-2xl font-bold mb-4">Packlist</h1>
@ -76,34 +83,52 @@ export default function TripsPage() {
</button>
</form>
{trips.map(trip => (
<Link
to={`/trips/${trip.id}`}
key={trip.id}
className="block border rounded p-2 mb-4 hover:bg-blue-50 transition"
style={{ textDecoration: "none", color: "inherit" }}
>
<div className="flex justify-between items-center">
<div>
<h2 className="font-bold">{trip.name}</h2>
<p>
{trip.start_date} – {trip.end_date}
</p>
{trips.map(trip => {
const isPast = trip.start_date < today;
const isNext = trip.id === nextTripId;
return (
<Link
to={`/trips/${trip.id}`}
key={trip.id}
className={
"block border rounded p-2 mb-4 transition " +
(isPast
? "bg-gray-100 text-gray-400"
: isNext
? "border-yellow-400 bg-yellow-50"
: "hover:bg-blue-50")
}
style={{ textDecoration: "none", color: "inherit" }}
>
<div className="flex justify-between items-center">
<div>
<h2 className="font-bold">
{trip.name}
{isNext && (
<span className="ml-2 text-xs bg-yellow-300 text-yellow-900 px-2 py-0.5 rounded">
Nächster Trip
</span>
)}
</h2>
<p>
{trip.start_date} – {trip.end_date}
</p>
</div>
<div className="flex gap-2">
<button
className="text-sm text-red-500 underline"
onClick={e => {
e.preventDefault();
handleDeleteTrip(trip.id);
}}
>
Löschen
</button>
</div>
</div>
<div className="flex gap-2">
<button
className="text-sm text-red-500 underline"
onClick={e => {
e.preventDefault();
handleDeleteTrip(trip.id);
}}
>
Löschen
</button>
</div>
</div>
</Link>
))}
</Link>
);
})}
</div>
);
}