123 lines
4.0 KiB
TypeScript
123 lines
4.0 KiB
TypeScript
import { FC, useEffect, useState } from "react";
|
|
import { View, Text, ScrollView } from "react-native";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import { BigButton } from "../atom/BigButton";
|
|
import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
|
|
import { ListView } from "@/components/StationDiagram/ListView";
|
|
import dayjs from "dayjs";
|
|
import { ExGridView } from "./ExGridView";
|
|
|
|
type props = {
|
|
route: {
|
|
params: {
|
|
currentStation: {
|
|
Station_JP: string;
|
|
Station_EN: string;
|
|
StationName?: string;
|
|
MyStation?: string;
|
|
StationNumber: string;
|
|
DispNum?: string;
|
|
StationTimeTable: string;
|
|
StationMap?: string;
|
|
JrHpUrl?: string;
|
|
lat: number;
|
|
lng: number;
|
|
jslodApi: string;
|
|
}[];
|
|
};
|
|
};
|
|
};
|
|
export const StationDiagramView: FC<props> = ({ route }) => {
|
|
if (!route.params) {
|
|
return null;
|
|
}
|
|
const { currentStation } = route.params;
|
|
// 必要な情報：駅情報、全ダイヤ、カスタム列車情報
|
|
// 表示モード：縦並びリスト、横並びグリッド(時刻分割)、横並び単純左詰め
|
|
// フィルタリング：終点路線、種別、行先、関係停車駅
|
|
|
|
const { allTrainDiagram } = useAllTrainDiagram();
|
|
|
|
const { navigate, addListener, goBack, canGoBack } = useNavigation();
|
|
type hoge = {
|
|
trainNumber: string;
|
|
array: string;
|
|
name: string;
|
|
type: string;
|
|
time: string;
|
|
}[];
|
|
const [currentStationDiagram, setCurrentStationDiagram] = useState<hoge>([]);
|
|
useEffect(() => {
|
|
if (allTrainDiagram && currentStation.length > 0) {
|
|
const stationName = currentStation[0].Station_JP;
|
|
let returnDataArray = [];
|
|
Object.keys(allTrainDiagram).forEach((d) => {
|
|
allTrainDiagram[d]
|
|
.split("#")
|
|
.filter((d) => {
|
|
const [station,type,time] = d.split(",");
|
|
return station === stationName;
|
|
})
|
|
.forEach((x) => {
|
|
const [name, type, time] = x.split(",");
|
|
if (!name || !type || !time) return;
|
|
const arrayData = {
|
|
trainNumber: d,
|
|
array: allTrainDiagram[d],
|
|
name,
|
|
type,
|
|
time,
|
|
};
|
|
// //条件によってフィルタリング
|
|
// if(type && type.includes("通")) return;
|
|
// if(type && type.includes("着")) return;
|
|
returnDataArray.push(arrayData);
|
|
});
|
|
});
|
|
setCurrentStationDiagram(
|
|
returnDataArray.sort((a, b) => {
|
|
const adjustTime = (t: string) => {
|
|
const [h, m] = t.split(":").map(Number);
|
|
// 4時未満は翌日の時刻とみなして+24時間
|
|
return h < 4
|
|
? dayjs().add(1, "day").hour(h).minute(m)
|
|
: dayjs().hour(h).minute(m);
|
|
};
|
|
const aa = adjustTime(a.time);
|
|
const bb = adjustTime(b.time);
|
|
const x = aa.isAfter(bb);
|
|
return x ? 1 : -1;
|
|
//return true;
|
|
})
|
|
);
|
|
}
|
|
}, [currentStation]);
|
|
return (
|
|
<View style={{ height: "100%", backgroundColor: "#0099CC" }}>
|
|
<Text
|
|
style={{
|
|
textAlign: "center",
|
|
fontSize: 20,
|
|
color: "white",
|
|
fontWeight: "bold",
|
|
paddingVertical: 10,
|
|
}}
|
|
>
|
|
{currentStation[0].Station_JP}駅 時刻表
|
|
</Text>
|
|
{/* <ListView data={currentStationDiagram} /> */}
|
|
<ExGridView data={currentStationDiagram} />
|
|
{/* <Text
|
|
style={{
|
|
backgroundColor: "white",
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
}}
|
|
>
|
|
お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
|
|
</Text> */}
|
|
<BigButton onPress={() => goBack()} string="閉じる" />
|
|
</View>
|
|
);
|
|
};
|