1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
import { useLoaderData, Link, Form } from "react-router";
import type { Route } from "./+types/venues";
import { getVenues, getLastScrapePerVenue, type ScrapeLog } from "~/lib/db.server";
import { getScraperIds } from "~/lib/venue-meta.server";
export async function loader(_: Route.LoaderArgs) {
const venues = getVenues();
const scraperIds = getScraperIds();
const scrapeStatus = getLastScrapePerVenue();
return { venues, scraperIds, scrapeStatus };
}
export default function Venues() {
const { venues, scraperIds: scraperIdList, scrapeStatus } = useLoaderData<typeof loader>();
const scraperIds = new Set(scraperIdList);
const statusMap = new Map<string, ScrapeLog>(scrapeStatus.map((s) => [s.venue_id, s]));
return (
<div className="min-h-screen bg-gray-950 text-gray-100">
<header className="border-b border-gray-800 px-6 py-4 flex items-center justify-between">
<Link to="/" className="text-xl font-bold tracking-tight text-white">
🎸 東京ライブハウス
</Link>
<nav className="flex gap-6 text-sm text-gray-400">
<Link to="/events" className="hover:text-white transition-colors">イベント</Link>
<Link to="/venues" className="text-white font-medium">会場一覧</Link>
</nav>
</header>
<main className="max-w-4xl mx-auto px-4 py-10">
<div className="mb-8 flex items-start justify-between gap-4 flex-wrap">
<div>
<h1 className="text-2xl font-bold">会場一覧</h1>
<p className="mt-1 text-sm text-gray-400">
現在 {scraperIdList.length} 会場のスクレイパーが登録されています。
</p>
</div>
<Form method="post" action="/api/scrape">
<button
type="submit"
className="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium hover:bg-indigo-500 transition-colors"
>
全会場を更新
</button>
</Form>
</div>
{venues.length === 0 ? (
<p className="text-gray-500">まだ会場データがありません。「全会場を更新」してください。</p>
) : (
<div className="grid gap-3">
{venues.map((v) => {
const log = statusMap.get(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"
>
{/* 会場名 + エリア */}
<div className="flex-1 min-w-0">
<Link
to={`/events?venue_id=${v.id}`}
className="font-semibold hover:text-indigo-300 transition-colors"
>
{v.name}
</Link>
{v.area && <p className="text-xs text-gray-400">{v.area}</p>}
</div>
{/* イベント件数 */}
<span className="text-sm text-gray-400 whitespace-nowrap">
<span className="text-lg font-bold text-gray-200">{v.event_count ?? 0}</span> 件
</span>
{/* 最終スクレイプ状態 */}
{log ? (
<ScrapeStatus log={log} />
) : (
<span className="text-xs text-gray-600 whitespace-nowrap">未実行</span>
)}
{/* 個別更新ボタン */}
{scraperIds.has(v.id) && (
<Form method="post" action="/api/scrape">
<input type="hidden" name="venue_id" value={v.id} />
<button
type="submit"
className="rounded bg-gray-700 px-3 py-1 text-xs hover:bg-gray-600 transition-colors whitespace-nowrap"
>
更新
</button>
</Form>
)}
</div>
);
})}
</div>
)}
</main>
</div>
);
}
function ScrapeStatus({ log }: { log: ScrapeLog }) {
if (log.status === "running") {
return <span className="text-xs text-yellow-400 whitespace-nowrap">⟳ 実行中...</span>;
}
if (log.status === "error") {
return (
<span className="text-xs text-red-400 whitespace-nowrap" title={log.error ?? ""}>
✖ エラー
</span>
);
}
const time = log.finished_at?.slice(0, 16).replace("T", " ") ?? "";
return (
<span className="text-xs text-emerald-400 whitespace-nowrap" title={time}>
✔ {time}
</span>
);
}
|
