125 lines
3.8 KiB
JavaScript
125 lines
3.8 KiB
JavaScript
import React, { useRef, useState, useEffect } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
Linking,
|
|
ScrollView,
|
|
} from "react-native";
|
|
import MapView, { Marker } from "react-native-maps";
|
|
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
|
import { useCurrentTrain } from "../stateBox/useCurrentTrain";
|
|
import { useAreaInfo } from "../stateBox/useAreaInfo";
|
|
import { useAllTrainDiagram } from "../stateBox/useAllTrainDiagram";
|
|
import { EachTrainInfo } from "./ActionSheetComponents/EachTrainInfo";
|
|
|
|
import { customTrainDataDetector } from "./custom-train-data";
|
|
import { getStationList, lineList } from "../lib/getStationList";
|
|
import { getTrainType } from "../lib/getTrainType";
|
|
import { checkDuplicateTrainData } from "../lib/checkDuplicateTrainData";
|
|
import { SheetManager } from "react-native-actions-sheet";
|
|
export default function AllTrainDiagramView({ navigation: { navigate } }) {
|
|
const { currentTrain } = useCurrentTrain();
|
|
const { areaInfo } = useAreaInfo();
|
|
const { allTrainDiagram } = useAllTrainDiagram();
|
|
const [originalStationList, setOriginalStationList] = useState(); // 第一要素
|
|
useEffect(() => getStationList().then(setOriginalStationList), []);
|
|
|
|
const openTrainInfo = (d) => {
|
|
const train = customTrainDataDetector(d);
|
|
let TrainNumber = "";
|
|
if (train.trainNumDistance != undefined) {
|
|
const timeInfo =
|
|
parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
|
|
TrainNumber = timeInfo + "号";
|
|
}
|
|
const payload = {
|
|
data: {
|
|
trainNum: d,
|
|
limited: `${getTrainType(train.type).data}:${
|
|
train.trainName
|
|
}${TrainNumber}`,
|
|
trainData: checkDuplicateTrainData(
|
|
currentTrain.filter((a) => a.num == d)
|
|
),
|
|
},
|
|
navigate,
|
|
originalStationList,
|
|
from: "LED",
|
|
};
|
|
SheetManager.show("EachTrainInfo", {
|
|
payload,
|
|
});
|
|
};
|
|
return (
|
|
<View style={{ backgroundColor: "#0099CC", height: "100%" }}>
|
|
<ScrollView>
|
|
{allTrainDiagram &&
|
|
Object.keys(allTrainDiagram).map((key) => {
|
|
return (
|
|
<TouchableOpacity
|
|
style={{
|
|
padding: 10,
|
|
flexDirection: "row",
|
|
borderColor: "white",
|
|
borderWidth: 1,
|
|
margin: 10,
|
|
borderRadius: 5,
|
|
alignItems: "center",
|
|
}}
|
|
onPress={() => openTrainInfo(key)}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Text
|
|
style={{ fontSize: 25, fontWeight: "bold", color: "white" }}
|
|
>
|
|
{key}
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</ScrollView>
|
|
|
|
<TouchableOpacity
|
|
style={{
|
|
padding: 10,
|
|
flexDirection: "row",
|
|
borderColor: "white",
|
|
borderWidth: 1,
|
|
margin: 10,
|
|
borderRadius: 5,
|
|
alignItems: "center",
|
|
}}
|
|
onPress={() => navigate("menu")}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
|
|
閉じる
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
const UsefulBox = (props) => {
|
|
const { icon, backgroundColor, flex, onPressButton, children } = props;
|
|
return (
|
|
<TouchableOpacity
|
|
style={{
|
|
flex: flex,
|
|
backgroundColor: backgroundColor,
|
|
padding: 10,
|
|
alignItems: "center",
|
|
margin: 2,
|
|
}}
|
|
onPress={onPressButton}
|
|
>
|
|
<MaterialCommunityIcons name={icon} color="white" size={50} />
|
|
<Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
|
|
{children}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|