From 1246c8382c8734dc705f96bf9fa6b5efdd3819bc Mon Sep 17 00:00:00 2001 From: yyamashita Date: Fri, 8 May 2026 08:38:32 +0900 Subject: Fix all TODO bugs and implement feature additions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - SCRAPE_TARGETS.md: add 5 missing venues (nine-spices, nishieifuku-jam, fever-shindaita, moon-step-nakano, mod-shibasaki) - Navigation: add 日付別 link to venues.tsx and events.$id.tsx headers - venues.tsx: add official site external links per venue card - ScrapeButton: new component with useFetcher-based trigger + 2s polling progress UI showing per-venue status and event count - venues.tsx / events._index.tsx: wire in ScrapeButton - FilterBar + db.server.ts: add area filter derived from venues, threaded through queryEvents Co-Authored-By: Claude Sonnet 4.6 --- SCRAPE_TARGETS.md | 5 ++ TODO.md | 12 ++--- app/components/FilterBar.tsx | 24 ++++++++- app/components/ScrapeButton.tsx | 115 ++++++++++++++++++++++++++++++++++++++++ app/lib/db.server.ts | 7 ++- app/routes/events.$id.tsx | 1 + app/routes/events._index.tsx | 14 +++-- app/routes/venues.tsx | 29 +++++++--- 8 files changed, 188 insertions(+), 19 deletions(-) create mode 100644 app/components/ScrapeButton.tsx diff --git a/SCRAPE_TARGETS.md b/SCRAPE_TARGETS.md index ab94f39..461573f 100644 --- a/SCRAPE_TARGETS.md +++ b/SCRAPE_TARGETS.md @@ -19,6 +19,11 @@ | `fad-yokohama` | F.A.D YOKOHAMA | 横浜 | http://www.fad-music.com/fad/?page_id=3 | [fad-yokohama.ts](app/scrapers/fad-yokohama.ts) | ✅ | | `navey-floor` | navey floor | 赤坂 | https://navey-floor.com/event/ | [navey-floor.ts](app/scrapers/navey-floor.ts) | ✅ | | `shimokitazawa-era` | 下北沢ERA | 下北沢 | http://s-era.jp/schedule | [shimokitazawa-era.ts](app/scrapers/shimokitazawa-era.ts) | ✅ | +| `nine-spices` | Nine Spices | 新宿 | https://9spices.rinky.info/schedule/ | [nine-spices.ts](app/scrapers/nine-spices.ts) | ✅ | +| `nishieifuku-jam` | 西永福JAM | 西永福 | https://jam.rinky.info/events | [nishieifuku-jam.ts](app/scrapers/nishieifuku-jam.ts) | ✅ | +| `fever-shindaita` | 新代田 FEVER | 新代田 | https://www.fever-popo.com | [fever-shindaita.ts](app/scrapers/fever-shindaita.ts) | ✅ | +| `moon-step-nakano` | 中野 MOON STEP | 中野 | https://nakano-dynamite.com/moonstep | [moon-step-nakano.ts](app/scrapers/moon-step-nakano.ts) | ✅ | +| `mod-shibasaki` | shibasaki mod | 柴崎 | https://shibasakimod.com/schedule | [mod-shibasaki.ts](app/scrapers/mod-shibasaki.ts) | ✅ | ### 状態凡例 - ✅ 動作中 diff --git a/TODO.md b/TODO.md index 2c076a4..c576d7c 100644 --- a/TODO.md +++ b/TODO.md @@ -2,24 +2,24 @@ ## バグ・不整合 -- [ ] **SCRAPE_TARGETS.md が古い** — `index.ts` には17会場登録済みだが、MD には12会場しか掲載されていない。未掲載5会場： +- [x] **SCRAPE_TARGETS.md が古い** — `index.ts` には17会場登録済みだが、MD には12会場しか掲載されていない。未掲載5会場： - `nine-spices`（Nine Spices） - `nishieifuku-jam`（西永福JAM） - `fever-shindaita`（新代田FEVER） - `moon-step-nakano`（MOON STEP 中野） - `mod-shibasaki`（MOD 芝崎） -- [ ] **ナビゲーションの不一致** — `venues.tsx` と `events.$id.tsx` のヘッダーナビに「日付別」リンクがない（`events._index.tsx` には存在する） +- [x] **ナビゲーションの不一致** — `venues.tsx` と `events.$id.tsx` のヘッダーナビに「日付別」リンクがない（`events._index.tsx` には存在する） ## 機能追加 -- [ ] **スクレイプ実行ボタン** — 会場一覧ページ・イベント一覧ページからUIで `/api/scrape` を叩けるようにする（現在はCLIか直接APIアクセスのみ） +- [x] **スクレイプ実行ボタン** — 会場一覧ページ・イベント一覧ページからUIで `/api/scrape` を叩けるようにする（現在はCLIか直接APIアクセスのみ） -- [ ] **会場公式サイトリンク** — 会場一覧ページの各会場に、公式スケジュールページへの外部リンクを追加する +- [x] **会場公式サイトリンク** — 会場一覧ページの各会場に、公式スケジュールページへの外部リンクを追加する -- [ ] **エリアフィルター** — FilterBar に `area` 絞り込みを追加する（渋谷・下北沢・新宿など） +- [x] **エリアフィルター** — FilterBar に `area` 絞り込みを追加する（渋谷・下北沢・新宿など） -- [ ] **スクレイプ進捗UI** — `/api/scrape-status` をポーリングしてスクレイプの進捗・結果をUIに表示する +- [x] **スクレイプ進捗UI** — `/api/scrape-status` をポーリングしてスクレイプの進捗・結果をUIに表示する ## スクレイパー diff --git a/app/components/FilterBar.tsx b/app/components/FilterBar.tsx index 7b8ca0c..7a95d2c 100644 --- a/app/components/FilterBar.tsx +++ b/app/components/FilterBar.tsx @@ -3,11 +3,12 @@ import type { Venue } from "~/lib/db.server"; interface Props { venues: Venue[]; + areas?: string[]; defaultDateFrom?: string; defaultDateTo?: string; } -export default function FilterBar({ venues, defaultDateFrom, defaultDateTo }: Props) { +export default function FilterBar({ venues, areas, defaultDateFrom, defaultDateTo }: Props) { const [searchParams] = useSearchParams(); return ( @@ -63,6 +64,25 @@ export default function FilterBar({ venues, defaultDateFrom, defaultDateTo }: Pr /> + {/* Area */} + {areas && areas.length > 0 && ( +
+ + +
+ )} + {/* Capacity */}
@@ -98,5 +118,5 @@ export default function FilterBar({ venues, defaultDateFrom, defaultDateTo }: Pr } function hasFilters(params: URLSearchParams): boolean { - return ["keyword", "venue_id", "date_from", "date_to", "capacity_range"].some((k) => params.get(k)); + return ["keyword", "venue_id", "date_from", "date_to", "capacity_range", "area"].some((k) => params.get(k)); } diff --git a/app/components/ScrapeButton.tsx b/app/components/ScrapeButton.tsx new file mode 100644 index 0000000..75e48b1 --- /dev/null +++ b/app/components/ScrapeButton.tsx @@ -0,0 +1,115 @@ +import { useState, useEffect, useRef } from "react"; +import { useFetcher } from "react-router"; + +interface ScrapeLog { + id: number; + run_id: string; + venue_id: string; + venue_name: string; + status: "running" | "ok" | "error"; + events_saved: number; + error: string | null; +} + +interface StatusData { + running: boolean; + results: ScrapeLog[]; +} + +interface ScrapeStartData { + run_id: string; + status: string; +} + +export default function ScrapeButton({ venueId }: { venueId?: string }) { + const triggerFetcher = useFetcher(); + const statusFetcher = useFetcher(); + const statusFetcherRef = useRef(statusFetcher); + useEffect(() => { statusFetcherRef.current = statusFetcher; }); + + const [runId, setRunId] = useState(null); + const [polling, setPolling] = useState(false); + const [done, setDone] = useState(false); + + useEffect(() => { + const data = triggerFetcher.data; + if (data?.run_id) { + setRunId(data.run_id); + setPolling(true); + setDone(false); + } + }, [triggerFetcher.data]); + + useEffect(() => { + if (!polling || !runId) return; + const id = setInterval(() => { + statusFetcherRef.current.load(`/api/scrape-status?run_id=${runId}`); + }, 2000); + return () => clearInterval(id); + }, [polling, runId]); + + useEffect(() => { + const data = statusFetcher.data; + if (data && !data.running) { + setPolling(false); + setDone(true); + } + }, [statusFetcher.data]); + + const results: ScrapeLog[] = statusFetcher.data?.results ?? []; + const running = statusFetcher.data?.running ?? false; + const isActive = triggerFetcher.state !== "idle" || polling; + const okCount = results.filter((r) => r.status === "ok").length; + const errCount = results.filter((r) => r.status === "error").length; + const apiUrl = venueId ? `/api/scrape?venue_id=${venueId}` : "/api/scrape"; + + return ( +
+ + + {(isActive || done) && results.length > 0 && ( +
+

+ {running + ? `スクレイプ中... ${okCount + errCount} / ${results.length} 完了` + : `完了 — ✔ ${okCount}件成功 / ✖ ${errCount}件失敗`} +

+ {results.map((r) => ( +
+ + {r.status === "ok" ? "✔" : r.status === "error" ? "✖" : "⟳"} + + {r.venue_name} + {r.status === "ok" && ( + {r.events_saved}件 + )} + {r.status === "error" && ( + + エラー + + )} +
+ ))} +
+ )} +
+ ); +} diff --git a/app/lib/db.server.ts b/app/lib/db.server.ts index a4671b4..82a0025 100644 --- a/app/lib/db.server.ts +++ b/app/lib/db.server.ts @@ -172,12 +172,13 @@ export interface QueryEventsParams { venue_id?: string; keyword?: string; capacity_range?: CapacityRange; + area?: string; limit?: number; offset?: number; } export function queryEvents(params: QueryEventsParams = {}): Event[] { - const { date_from, date_to, venue_id, keyword, capacity_range, limit = 60, offset = 0 } = + const { date_from, date_to, venue_id, keyword, capacity_range, area, limit = 60, offset = 0 } = params; const clauses: string[] = []; @@ -206,6 +207,10 @@ export function queryEvents(params: QueryEventsParams = {}): Event[] { } else if (capacity_range === "large") { clauses.push("v.capacity >= 300"); } + if (area) { + clauses.push("v.area = ?"); + args.push(area); + } const where = clauses.length ? `WHERE ${clauses.join(" AND ")}` : ""; diff --git a/app/routes/events.$id.tsx b/app/routes/events.$id.tsx index 4a84308..423cda5 100644 --- a/app/routes/events.$id.tsx +++ b/app/routes/events.$id.tsx @@ -21,6 +21,7 @@ export default function EventDetail() { diff --git a/app/routes/events._index.tsx b/app/routes/events._index.tsx index cb1a019..890e0fd 100644 --- a/app/routes/events._index.tsx +++ b/app/routes/events._index.tsx @@ -4,6 +4,7 @@ import { queryEvents, getVenues, type CapacityRange } from "~/lib/db.server"; import EventCard from "~/components/EventCard"; import EventListRow from "~/components/EventListRow"; import FilterBar from "~/components/FilterBar"; +import ScrapeButton from "~/components/ScrapeButton"; function defaultWindow() { const today = new Date(); @@ -24,18 +25,20 @@ export async function loader({ request }: Route.LoaderArgs) { const venue_id = url.searchParams.get("venue_id") ?? undefined; const keyword = url.searchParams.get("keyword") ?? undefined; const capacity_range = (url.searchParams.get("capacity_range") ?? undefined) as CapacityRange | undefined; + const area = url.searchParams.get("area") ?? undefined; const page = Math.max(1, parseInt(url.searchParams.get("page") ?? "1", 10)); const limit = 30; const offset = (page - 1) * limit; - const events = queryEvents({ date_from, date_to, venue_id, keyword, capacity_range, limit, offset }); + const events = queryEvents({ date_from, date_to, venue_id, keyword, capacity_range, area, limit, offset }); const venues = getVenues(); + const areas = [...new Set(venues.filter((v) => v.area).map((v) => v.area as string))].sort(); - return { events, venues, page, hasMore: events.length === limit, date_from, date_to }; + return { events, venues, areas, page, hasMore: events.length === limit, date_from, date_to }; } export default function EventsIndex() { - const { events, venues, page, hasMore, date_from, date_to } = useLoaderData(); + const { events, venues, areas, page, hasMore, date_from, date_to } = useLoaderData(); const [searchParams, setSearchParams] = useSearchParams(); const view = (searchParams.get("view") ?? "card") as "card" | "list"; @@ -62,6 +65,8 @@ export default function EventsIndex() {

イベント一覧

+
+
+
- + {events.length === 0 ? (
diff --git a/app/routes/venues.tsx b/app/routes/venues.tsx index b027707..f2a7d54 100644 --- a/app/routes/venues.tsx +++ b/app/routes/venues.tsx @@ -1,6 +1,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"; export async function loader(_: Route.LoaderArgs) { const venues = getVenues(); @@ -20,16 +21,20 @@ export default function Venues() {
-
-

会場一覧

-

- 現在 {venues.length} 会場が登録されています。 -

+
+
+

会場一覧

+

+ 現在 {venues.length} 会場が登録されています。 +

+
+
{venues.length === 0 ? ( @@ -51,7 +56,19 @@ export default function Venues() { > {v.name} - {v.area &&

{v.area}

} +
+ {v.area && {v.area}} + {v.url && ( + + 公式サイト ↗ + + )} +
{/* イベント件数 */} -- cgit v1.2.3