diff options
Diffstat (limited to 'app/routes/events.$id.tsx')
| -rw-r--r-- | app/routes/events.$id.tsx | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/app/routes/events.$id.tsx b/app/routes/events.$id.tsx index 423cda5..87c5e2d 100644 --- a/app/routes/events.$id.tsx +++ b/app/routes/events.$id.tsx @@ -10,6 +10,55 @@ export async function loader({ params }: Route.LoaderArgs) { return { event }; } +function buildGoogleCalendarUrl(event: Awaited<ReturnType<typeof loader>>["event"]): string { + const dates = (() => { + if (event.start_time && /^\d{1,2}:\d{2}/.test(event.start_time)) { + const [h, m] = event.start_time.split(":").map(Number); + const [y, mo, d] = event.date.split("-").map(Number); + const pad = (n: number) => String(n).padStart(2, "0"); + const startStr = `${event.date.replace(/-/g, "")}T${pad(h)}${pad(m)}00`; + const endH = h + 2; + let endStr: string; + if (endH < 24) { + endStr = `${event.date.replace(/-/g, "")}T${pad(endH)}${pad(m)}00`; + } else { + const next = new Date(y, mo - 1, d + 1); + endStr = + `${next.getFullYear()}${pad(next.getMonth() + 1)}${pad(next.getDate())}` + + `T${pad(endH - 24)}${pad(m)}00`; + } + return `${startStr}/${endStr}`; + } + const [y, mo, d] = event.date.split("-").map(Number); + const next = new Date(y, mo - 1, d + 1); + const pad = (n: number) => String(n).padStart(2, "0"); + const dateStr = event.date.replace(/-/g, ""); + const nextStr = `${next.getFullYear()}${pad(next.getMonth() + 1)}${pad(next.getDate())}`; + return `${dateStr}/${nextStr}`; + })(); + + const details: string[] = []; + if (event.artist) details.push(`出演: ${event.artist}`); + if (event.open_time) details.push(`OPEN: ${event.open_time}`); + if (event.start_time) details.push(`START: ${event.start_time}`); + if (event.price) details.push(`料金: ${event.price}`); + if (event.source_url) details.push(`詳細: ${event.source_url}`); + if (event.ticket_url) details.push(`チケット: ${event.ticket_url}`); + + const location = [event.venue_name, event.venue_area].filter(Boolean).join(" "); + + const params = new URLSearchParams({ + action: "TEMPLATE", + text: event.title, + dates, + location, + ctz: "Asia/Tokyo", + }); + if (details.length > 0) params.set("details", details.join("\n")); + + return `https://calendar.google.com/calendar/render?${params.toString()}`; +} + export default function EventDetail() { const { event } = useLoaderData<typeof loader>(); @@ -99,6 +148,27 @@ export default function EventDetail() { )} </div> + <div className="mt-6 flex flex-col gap-2"> + <p className="text-xs text-gray-500">カレンダーに追加</p> + <div className="flex gap-3 flex-wrap"> + <a + href={buildGoogleCalendarUrl(event)} + target="_blank" + rel="noopener noreferrer" + className="inline-flex items-center gap-2 rounded-md bg-blue-700/50 px-4 py-2 text-sm font-medium hover:bg-blue-700/80 transition-colors" + > + <CalendarIcon /> Google カレンダー + </a> + <a + href={`/api/events/${event.id}/calendar.ics`} + download + className="inline-flex items-center gap-2 rounded-md bg-gray-700/60 px-4 py-2 text-sm font-medium hover:bg-gray-600/80 transition-colors" + > + <CalendarIcon /> .ics ダウンロード + </a> + </div> + </div> + <p className="mt-10 text-xs text-gray-600"> 最終取得: {event.fetched_at} </p> @@ -108,6 +178,17 @@ export default function EventDetail() { ); } +function CalendarIcon() { + return ( + <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> + <rect x="3" y="4" width="18" height="18" rx="2" ry="2" /> + <line x1="16" y1="2" x2="16" y2="6" /> + <line x1="8" y1="2" x2="8" y2="6" /> + <line x1="3" y1="10" x2="21" y2="10" /> + </svg> + ); +} + function Detail({ label, value }: { label: string; value: string }) { return ( <div className="rounded-lg bg-gray-800/60 p-3"> |