diff --git a/apps/web/app/(app)/timetable/page.tsx b/apps/web/app/(app)/timetable/page.tsx index de940aa..dd0123d 100644 --- a/apps/web/app/(app)/timetable/page.tsx +++ b/apps/web/app/(app)/timetable/page.tsx @@ -1,6 +1,5 @@ 'use client' -import { TimetableDisplay } from '@/components/timetable/timetable-display' import { TimetableFilter } from '@/components/timetable/timetable-filter' import type { components, operations } from '@/generated/oas' import { client } from '@/lib/client' @@ -244,7 +243,7 @@ function TimetableContent() { return (
-
+
-
) diff --git a/apps/web/components/timetable/timetable-filter.tsx b/apps/web/components/timetable/timetable-filter.tsx index f3f5221..0f44f3b 100644 --- a/apps/web/components/timetable/timetable-filter.tsx +++ b/apps/web/components/timetable/timetable-filter.tsx @@ -1,6 +1,14 @@ import { Button } from '@/components/ui/button' import { Calendar } from '@/components/ui/calendar' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' +import { TimetableDisplay } from './timetable-display' +import { + Drawer, + DrawerClose, + DrawerContent, + DrawerFooter, + DrawerTrigger, +} from '@/components/ui/drawer' import { Dialog, DialogContent, @@ -25,6 +33,8 @@ import { ja } from 'date-fns/locale' import { useMemo, useState } from 'react' import { FaCalendarAlt, FaClock, FaExchangeAlt, FaMapMarkerAlt, FaTimes } from 'react-icons/fa' +type DisplayBusInfo = components['schemas']['Models.BusStopGroupTimetable'] + interface TimetableFilterProps { selectedDeparture: number | null setSelectedDeparture: (value: number | null) => void @@ -62,8 +72,15 @@ export function TimetableFilter({ endTime, setEndTime, swapStations, - busStopGroups, // 追加 -}: TimetableFilterProps) { + busStopGroups, + filteredTimetable, + timetableData, + isLoading = false, +}: TimetableFilterProps & { + filteredTimetable: any[] + timetableData?: components['schemas']['Models.BusStopGroupTimetable'] | null + isLoading?: boolean +}) { // 日付タブの設定 const dateTabs = useMemo( () => [ @@ -80,329 +97,358 @@ export function TimetableFilter({ return ( - - - - 検索条件 - - - -
- {/* 日付選択 */}{' '} -
-
- -
-
- { - if (value === 'today') { - // 「今日」タブを選択した場合は、今日の日付に設定 - setSelectedDate(new Date()) - } else if (value === 'tomorrow') { - // 「明日」タブを選択した場合は、明日の日付に設定 - setSelectedDate(addDays(new Date(), 1)) - } else if (value === 'custom') { - // 「日付指定」タブを選択した場合は、カレンダーを表示 - setCalendarOpen(true) - } - }} - > - - {dateTabs.map((tab) => ( - - {tab.value === 'today' && ( - - - {tab.label} - - )} - {tab.value === 'tomorrow' && ( - - - {tab.label} - - )} - {tab.value === 'custom' && ( - - - - + + + + 検索条件 + + + +
+ {/* 日付選択 */}{' '} +
+
+ +
+
+ { + if (value === 'today') { + // 「今日」タブを選択した場合は、今日の日付に設定 + setSelectedDate(new Date()) + } else if (value === 'tomorrow') { + // 「明日」タブを選択した場合は、明日の日付に設定 + setSelectedDate(addDays(new Date(), 1)) + } else if (value === 'custom') { + // 「日付指定」タブを選択した場合は、カレンダーを表示 + setCalendarOpen(true) + } + }} + > + + {dateTabs.map((tab) => ( + + {tab.value === 'today' && ( + + {tab.label} - {selectedDate && - now && - format(selectedDate, 'yyyy-MM-dd') !== format(now, 'yyyy-MM-dd') && - format(selectedDate, 'yyyy-MM-dd') !== - format(addDays(now, 1), 'yyyy-MM-dd') && ( - - )} - - - - 日付を選択 - -
- { - if (date) { - setSelectedDate(date) - // 日付選択後にダイアログを閉じる - setCalendarOpen(false) - } - }} - initialFocus - locale={ja} - className="mx-auto" - /> -
- -
- )} - - ))} - - + )} + {tab.value === 'tomorrow' && ( + + + {tab.label} + + )} + {tab.value === 'custom' && ( + + + + + {tab.label} + {selectedDate && + now && + format(selectedDate, 'yyyy-MM-dd') !== format(now, 'yyyy-MM-dd') && + format(selectedDate, 'yyyy-MM-dd') !== + format(addDays(now, 1), 'yyyy-MM-dd') && ( + + )} + + + + + 日付を選択 + +
+ { + if (date) { + setSelectedDate(date) + // 日付選択後にダイアログを閉じる + setCalendarOpen(false) + } + }} + initialFocus + locale={ja} + className="mx-auto" + /> +
+ + + )} + + ))} + + - {selectedDate && now && ( -
+ + {format(selectedDate, 'yyyy-MM-dd') === format(now, 'yyyy-MM-dd') + ? `今日 ${format(selectedDate, 'M月d日(E)', { locale: ja })}` + : format(selectedDate, 'yyyy-MM-dd') === format(addDays(now, 1), 'yyyy-MM-dd') + ? `明日 ${format(selectedDate, 'M月d日(E)', { locale: ja })}` + : format(selectedDate, 'yyyy年M月d日(E)', { locale: ja })} +
)} +
+
+ {/* 区切り線 */} +
+ {/* 出発地と目的地 */} +
+
+ + {(selectedDeparture !== null || selectedDestination !== null) && ( + + )} +
+ +
+
+
+ + {selectedDeparture && selectedDestination && ( + + )} +
{' '} + { - setSelectedDeparture(value === '' ? null : Number(value)) - }} - disabled={isLoadingBusStopGroups} - > - -
- + +
+ +
+ + + {isLoadingBusStopGroups ? ( + + 読み込み中... + + ) : ( + <> + {selectedDeparture && ( + 未選択 + )} + {busStopGroups + .filter( + (group) => selectedDeparture === null || group.id !== selectedDeparture + ) + .map((group) => ( + + {group.name} + + ))} + + )} + + +
+ {/* 区切り線 */} +
+ {/* 時間帯設定（簡略化）*/} +
+
+
- - - {isLoadingBusStopGroups ? ( - - 読み込み中... - - ) : ( - busStopGroups.map((group) => ( - - {group.name} - - )) - )} - - -
-
-
- - {selectedDeparture && selectedDestination && ( - - )} -
{' '} - + + {timeFilter === 'departure' && ( + setStartTime(e.target.value)} + className="rounded-md h-10 w-full cursor-pointer" + placeholder="出発時間を入力" + /> )} - disabled={isLoadingBusStopGroups} - > -
- setEndTime(e.target.value)} + className="rounded-md h-10 w-full cursor-pointer" + placeholder="到着時間を入力" /> -
- - - {isLoadingBusStopGroups ? ( - - 読み込み中... - - ) : ( - <> - {selectedDeparture && ( - 未選択 - )} - {busStopGroups - .filter( - (group) => selectedDeparture === null || group.id !== selectedDeparture - ) - .map((group) => ( - - {group.name} - - ))} - )} - - -
- {/* 区切り線 */} -
- {/* 時間帯設定（簡略化）*/} -
-
- +
- - - - {timeFilter === 'departure' && ( - setStartTime(e.target.value)} - className="rounded-md h-10 w-full cursor-pointer" - placeholder="出発時間を入力" - /> - )} - - {timeFilter === 'arrival' && ( - setEndTime(e.target.value)} - className="rounded-md h-10 w-full cursor-pointer" - placeholder="到着時間を入力" - /> - )} -
-
- + + + + + + + + + + + + + + + ) }