281 lines
8.9 KiB
TypeScript
281 lines
8.9 KiB
TypeScript
import { FC, useEffect, useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
ScrollView,
|
|
TextInput,
|
|
Keyboard,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
TouchableOpacity,
|
|
} 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";
|
|
import { Switch } from "react-native-elements";
|
|
import { customTrainDataDetector } from "../custom-train-data";
|
|
import { typeID } from "@/lib/getStringConfig";
|
|
|
|
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 { keyList, allTrainDiagram, allCustomTrainData } = useAllTrainDiagram();
|
|
|
|
const { navigate, addListener, goBack, canGoBack } = useNavigation();
|
|
const [keyBoardVisible, setKeyBoardVisible] = useState(false);
|
|
const [input, setInput] = useState("");
|
|
const [selectedTypeList, setSelectedTypeList] = useState<typeID[]>([]);
|
|
type hoge = {
|
|
trainNumber: string;
|
|
array: string;
|
|
name: string;
|
|
timeType: string;
|
|
time: string;
|
|
}[];
|
|
const [showLastStop, setShowLastStop] = useState(false);
|
|
const [isSpecial, setIsSpecial] = useState(false);
|
|
const [threw, setIsThrew] = useState(false);
|
|
const [isOutOfService, setIsOutOfService] = useState(false);
|
|
const [currentStationDiagram, setCurrentStationDiagram] = useState<hoge>([]);
|
|
useEffect(() => {
|
|
if (allTrainDiagram && currentStation.length > 0) {
|
|
const stationName = currentStation[0].Station_JP;
|
|
let returnDataArray: hoge = [];
|
|
keyList
|
|
.filter((s) => {
|
|
const boolData = allTrainDiagram[s];
|
|
let isStop = false;
|
|
let isInput = false;
|
|
|
|
boolData.split("#").forEach((d) => {
|
|
const [station, type, time] = d.split(",");
|
|
if (station === stationName) isStop = true;
|
|
if (station === input && type && !type.includes("通"))
|
|
isInput = true;
|
|
});
|
|
if (input && input.length > 0) {
|
|
return isInput && isStop;
|
|
}
|
|
return isStop;
|
|
})
|
|
.forEach((d) => {
|
|
allTrainDiagram[d]
|
|
.split("#")
|
|
.filter((d) => {
|
|
const [station, type, time] = d.split(",");
|
|
return station === stationName;
|
|
})
|
|
.forEach((x) => {
|
|
const [name, timeType, time] = x.split(",");
|
|
if (!name || !timeType || !time) return;
|
|
|
|
const { img, trainName, type, trainNumDistance, infogram } =
|
|
customTrainDataDetector(d, allCustomTrainData);
|
|
const arrayData = {
|
|
trainNumber: d,
|
|
array: allTrainDiagram[d],
|
|
name,
|
|
timeType,
|
|
time,
|
|
};
|
|
// //条件によってフィルタリング
|
|
if (
|
|
selectedTypeList.length > 0 &&
|
|
selectedTypeList.findIndex((item) => item === type) !== -1
|
|
)
|
|
return;
|
|
if (!threw && timeType && timeType.includes("通")) return;
|
|
if (!isOutOfService && !!d.match(/[A,B,R,H,E,T,L]/)) return;
|
|
if (!isSpecial && !!d.match(/9\d\d\d[D,M,S]/)) return;
|
|
if (!showLastStop && timeType && timeType.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, showLastStop, isSpecial, isOutOfService, threw, input]);
|
|
|
|
useEffect(() => {
|
|
const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
|
|
setKeyBoardVisible(true);
|
|
});
|
|
const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
|
|
setKeyBoardVisible(false);
|
|
});
|
|
|
|
return () => {
|
|
showSubscription.remove();
|
|
hideSubscription.remove();
|
|
};
|
|
}, []);
|
|
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> */}
|
|
<KeyboardAvoidingView
|
|
behavior="padding"
|
|
keyboardVerticalOffset={80}
|
|
enabled={Platform.OS === "ios"}
|
|
>
|
|
<ScrollView horizontal style={{ height: 35, flexDirection: "row" }}>
|
|
<TouchableOpacity
|
|
style={{
|
|
alignItems: "center",
|
|
marginHorizontal: 5,
|
|
backgroundColor: threw ? "white" : "#ffffff00",
|
|
alignSelf: "center",
|
|
borderColor: "white",
|
|
borderWidth: 1,
|
|
borderRadius: 100,
|
|
}}
|
|
onPress={() => {
|
|
setIsThrew(!threw);
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
color: threw ? "#0099CC" : "white",
|
|
fontSize: 14,
|
|
margin: 5,
|
|
}}
|
|
>
|
|
通過
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={{
|
|
alignItems: "center",
|
|
marginHorizontal: 5,
|
|
backgroundColor: showLastStop ? "white" : "#ffffff00",
|
|
alignSelf: "center",
|
|
borderColor: "white",
|
|
borderWidth: 1,
|
|
borderRadius: 100,
|
|
}}
|
|
onPress={() => {
|
|
setShowLastStop(!showLastStop);
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
color: showLastStop ? "#0099CC" : "white",
|
|
fontSize: 14,
|
|
margin: 5,
|
|
}}
|
|
>
|
|
当駅止
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<Switch
|
|
value={isSpecial}
|
|
onValueChange={setIsSpecial}
|
|
color="red"
|
|
style={{ marginVertical: 5 }}
|
|
/>
|
|
<Text style={{ color: "white", fontSize: 20, marginVertical: 5 }}>
|
|
臨時
|
|
</Text>
|
|
<Switch
|
|
value={isOutOfService}
|
|
onValueChange={setIsOutOfService}
|
|
color="red"
|
|
style={{ marginVertical: 5 }}
|
|
/>
|
|
<Text style={{ color: "white", fontSize: 20, marginVertical: 5 }}>
|
|
回送
|
|
</Text>
|
|
</ScrollView>
|
|
<View
|
|
style={{
|
|
height: 35,
|
|
margin: 5,
|
|
alignItems: "center",
|
|
backgroundColor: "#F4F4F4",
|
|
flexDirection: "row",
|
|
paddingLeft: 10,
|
|
paddingRight: 10,
|
|
borderRadius: 25,
|
|
borderColor: "#F4F4F4",
|
|
}}
|
|
>
|
|
<TextInput
|
|
placeholder="列番・列車名を入力してフィルタリングします。"
|
|
onFocus={() => setKeyBoardVisible(true)}
|
|
onEndEditing={() => {}}
|
|
onChange={(ret) => setInput(ret.nativeEvent.text)}
|
|
value={input}
|
|
style={{ flex: 1 }}
|
|
/>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
{keyBoardVisible || (
|
|
<BigButton onPress={() => goBack()} string="閉じる" />
|
|
)}
|
|
</View>
|
|
);
|
|
};
|