diff options
Diffstat (limited to 'app/routes')
| -rw-r--r-- | app/routes/events._index.tsx | 23 | ||||
| -rw-r--r-- | app/routes/venues.tsx | 27 |
2 files changed, 46 insertions, 4 deletions
diff --git a/app/routes/events._index.tsx b/app/routes/events._index.tsx index 890e0fd..33568df 100644 --- a/app/routes/events._index.tsx +++ b/app/routes/events._index.tsx @@ -5,6 +5,7 @@ import EventCard from "~/components/EventCard"; import EventListRow from "~/components/EventListRow"; import FilterBar from "~/components/FilterBar"; import ScrapeButton from "~/components/ScrapeButton"; +import { useVenueFilter } from "~/lib/venue-filter"; function defaultWindow() { const today = new Date(); @@ -41,6 +42,13 @@ export default function EventsIndex() { const { events, venues, areas, page, hasMore, date_from, date_to } = useLoaderData<typeof loader>(); const [searchParams, setSearchParams] = useSearchParams(); const view = (searchParams.get("view") ?? "card") as "card" | "list"; + const { hiddenIds } = useVenueFilter(); + + const venueFiltered = searchParams.get("venue_id"); + const visibleEvents = venueFiltered + ? events + : events.filter((e) => !hiddenIds.has(e.venue_id)); + const hiddenEventCount = events.length - visibleEvents.length; function switchView(next: "card" | "list") { const next_params = new URLSearchParams(searchParams); @@ -88,20 +96,29 @@ export default function EventsIndex() { <FilterBar venues={venues} areas={areas} defaultDateFrom={date_from} defaultDateTo={date_to} /> - {events.length === 0 ? ( + {hiddenEventCount > 0 && ( + <p className="mt-3 text-xs text-gray-500"> + {hiddenIds.size} 会場が非表示のため {hiddenEventCount} 件を除外中 —{" "} + <Link to="/venues" className="text-indigo-400 hover:text-indigo-300 underline"> + 会場一覧で変更 + </Link> + </p> + )} + + {visibleEvents.length === 0 ? ( <div className="mt-16 text-center text-gray-500"> <p className="text-lg">イベントが見つかりません</p> <p className="mt-2 text-sm">スクレイパーを実行してデータを取得してください: <code>npm run scrape</code></p> </div> ) : view === "list" ? ( <div className="mt-6 flex flex-col gap-1.5"> - {events.map((event) => ( + {visibleEvents.map((event) => ( <EventListRow key={event.id} event={event} /> ))} </div> ) : ( <div className="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3"> - {events.map((event) => ( + {visibleEvents.map((event) => ( <EventCard key={event.id} event={event} /> ))} </div> diff --git a/app/routes/venues.tsx b/app/routes/venues.tsx index f2a7d54..9b8093a 100644 --- a/app/routes/venues.tsx +++ b/app/routes/venues.tsx @@ -2,6 +2,7 @@ import { useLoaderData, Link } from "react-router"; import type { Route } from "./+types/venues"; import { getVenues, getLastScrapePerVenue, type ScrapeLog } from "~/lib/db.server"; import ScrapeButton from "~/components/ScrapeButton"; +import { useVenueFilter } from "~/lib/venue-filter"; export async function loader(_: Route.LoaderArgs) { const venues = getVenues(); @@ -12,6 +13,8 @@ export async function loader(_: Route.LoaderArgs) { export default function Venues() { const { venues, scrapeStatus } = useLoaderData<typeof loader>(); const statusMap = new Map<string, ScrapeLog>(scrapeStatus.map((s) => [s.venue_id, s])); + const { hiddenIds, toggle } = useVenueFilter(); + const hiddenCount = hiddenIds.size; return ( <div className="min-h-screen bg-gray-950 text-gray-100"> @@ -32,6 +35,9 @@ export default function Venues() { <h1 className="text-2xl font-bold">会場一覧</h1> <p className="mt-1 text-sm text-gray-400"> 現在 {venues.length} 会場が登録されています。 + {hiddenCount > 0 && ( + <span className="ml-2 text-yellow-400">{hiddenCount} 会場が非表示</span> + )} </p> </div> <ScrapeButton /> @@ -43,10 +49,15 @@ export default function Venues() { <div className="grid gap-3"> {venues.map((v) => { const log = statusMap.get(v.id); + const hidden = hiddenIds.has(v.id); return ( <div key={v.id} - className="flex items-center gap-4 rounded-xl bg-gray-800/60 border border-gray-700/40 p-4" + className={`flex items-center gap-4 rounded-xl border p-4 transition-opacity ${ + hidden + ? "bg-gray-900/40 border-gray-800/40 opacity-50" + : "bg-gray-800/60 border-gray-700/40" + }`} > {/* 会場名 + エリア */} <div className="flex-1 min-w-0"> @@ -83,6 +94,20 @@ export default function Venues() { <span className="text-xs text-gray-600 whitespace-nowrap">未実行</span> )} + {/* 表示トグル */} + <button + onClick={() => toggle(v.id)} + aria-label={hidden ? `${v.name}を表示する` : `${v.name}を非表示にする`} + className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-900 ${ + hidden ? "bg-gray-700" : "bg-indigo-600" + }`} + > + <span + className={`inline-block h-4 w-4 rounded-full bg-white shadow transition-transform ${ + hidden ? "translate-x-1" : "translate-x-6" + }`} + /> + </button> </div> ); })} |