From cce30c72354b32698e3f08f7ca64c5ca25d953dd Mon Sep 17 00:00:00 2001 From: hiro0908 Date: Mon, 24 Nov 2025 23:25:54 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=E6=99=82=E5=88=BB=E8=A1=A8=E3=81=AE?= =?UTF-8?q?=E6=A4=9C=E7=B4=A2=E8=A1=A8=E7=A4=BA=E3=81=AE=E6=94=B9=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/(app)/timetable/page.tsx | 12 +- .../components/timetable/timetable-filter.tsx | 666 ++++++++++-------- 2 files changed, 357 insertions(+), 321 deletions(-) diff --git a/apps/web/app/(app)/timetable/page.tsx b/apps/web/app/(app)/timetable/page.tsx index de940aa..4d83da1 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' @@ -261,18 +260,9 @@ function TimetableContent() { endTime={endTime} setEndTime={setEndTime} swapStations={swapStations} - busStopGroups={busStopGroups} + busStopGroups={busStopGroups} filteredTimetable={[]} /> - ) diff --git a/apps/web/components/timetable/timetable-filter.tsx b/apps/web/components/timetable/timetable-filter.tsx index f3f5221..66ea6dd 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="到着時間を入力" - /> - )} -
-
- + + + + + + + + + + + + + + + ) } From a27c013eabd7515baad95331856918b89d94c34f Mon Sep 17 00:00:00 2001 From: hiro0908 Date: Tue, 25 Nov 2025 00:00:21 +0900 Subject: [PATCH 2/2] =?UTF-8?q?=E3=83=91=E3=82=BD=E3=82=B3=E3=83=B3?= =?UTF-8?q?=E3=81=AB=E3=81=8A=E3=81=91=E3=82=8BUI=E3=81=AE=E8=AA=BF?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/(app)/timetable/page.tsx | 2 +- apps/web/components/timetable/timetable-filter.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/app/(app)/timetable/page.tsx b/apps/web/app/(app)/timetable/page.tsx index 4d83da1..dd0123d 100644 --- a/apps/web/app/(app)/timetable/page.tsx +++ b/apps/web/app/(app)/timetable/page.tsx @@ -243,7 +243,7 @@ function TimetableContent() { return (
-
+
- +