729 lines
22 KiB
TypeScript
729 lines
22 KiB
TypeScript
import lineColorList from "@/assets/originData/lineColorList";
|
|
import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
|
|
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
|
|
import { useStationList } from "@/stateBox/useStationList";
|
|
import { StationProps } from "@/lib/CommonTypes";
|
|
import { FC, useEffect, useState } from "react";
|
|
import {
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
Image,
|
|
LayoutAnimation,
|
|
ScrollView,
|
|
} from "react-native";
|
|
import { getTrainType } from "@/lib/getTrainType";
|
|
import { trainPosition } from "@/lib/trainPositionTextArray";
|
|
import { StationNumberMaker } from "@/components/駅名表/StationNumberMaker";
|
|
import { lineListPair, stationIDPair } from "@/lib/getStationList";
|
|
import { findReversalPoints } from "@/lib/eachTrainInfoCoreLib/findReversalPoints";
|
|
import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes";
|
|
import { getCurrentTrainData } from "@/lib/getCurrentTrainData";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
import dayjs from "dayjs";
|
|
|
|
type props = {
|
|
trainID: string;
|
|
displaySize: number;
|
|
setDisplaySize: (e: number) => void;
|
|
};
|
|
|
|
export const FixedTrain: FC<props> = ({
|
|
trainID,
|
|
displaySize,
|
|
setDisplaySize,
|
|
}) => {
|
|
const {
|
|
fixedPosition,
|
|
setFixedPosition,
|
|
currentTrain,
|
|
getCurrentStationData,
|
|
getPosition,
|
|
} = useCurrentTrain();
|
|
const { allCustomTrainData, allTrainDiagram } = useAllTrainDiagram();
|
|
|
|
const [train, setTrain] = useState<{
|
|
Pos?: string;
|
|
Direction?: number;
|
|
Index?: number;
|
|
Line?: string;
|
|
PosNum?: number;
|
|
Type?: string;
|
|
delay?: string | number;
|
|
num?: string;
|
|
}>(null);
|
|
const [customData, setCustomData] = useState<CustomTrainData>(
|
|
getCurrentTrainData(trainID, currentTrain, allCustomTrainData)
|
|
);
|
|
useEffect(() => {
|
|
setCustomData(
|
|
getCurrentTrainData(trainID, currentTrain, allCustomTrainData)
|
|
);
|
|
}, [currentTrain, trainID]);
|
|
useEffect(() => {
|
|
const stationData = getCurrentStationData(trainID);
|
|
if (stationData) {
|
|
setTrain(stationData);
|
|
}
|
|
}, [trainID, currentTrain]);
|
|
|
|
const { getStationDataFromName, stationList, originalStationList } =
|
|
useStationList();
|
|
|
|
const [trainDataWidhThrough, setTrainDataWithThrough] = useState<string[]>(
|
|
[]
|
|
);
|
|
|
|
useEffect(() => {
|
|
const trainData = allTrainDiagram[trainID]?.split("#");
|
|
if (!trainData) return;
|
|
//let haveThrough = false;
|
|
//
|
|
const stopStationList = trainData.map((i) => {
|
|
const [station, se, time] = i.split(",");
|
|
//if (se == "通編") setHaveThrough(true);
|
|
return stationList.map((a) => a.filter((d) => d.StationName == station));
|
|
});
|
|
const allThroughStationList = stopStationList.map((i, index, array) => {
|
|
let allThroughStation = [];
|
|
if (index == array.length - 1) return;
|
|
|
|
const firstItem = array[index];
|
|
const secondItem = array[index + 1];
|
|
let betweenStationLine = "";
|
|
let baseStationNumberFirst = "";
|
|
let baseStationNumberSecond = "";
|
|
Object.keys(stationIDPair).forEach((d, index2, array) => {
|
|
if (!d) return;
|
|
const haveFirst = firstItem[index2];
|
|
const haveSecond = secondItem[index2];
|
|
if (haveFirst.length && haveSecond.length) {
|
|
betweenStationLine = d;
|
|
baseStationNumberFirst = haveFirst[0].StationNumber;
|
|
baseStationNumberSecond = haveSecond[0].StationNumber;
|
|
}
|
|
});
|
|
if (!betweenStationLine) return;
|
|
let reverse = false;
|
|
originalStationList[
|
|
lineListPair[stationIDPair[betweenStationLine]]
|
|
].forEach((d) => {
|
|
if (
|
|
d.StationNumber > baseStationNumberFirst &&
|
|
d.StationNumber < baseStationNumberSecond
|
|
) {
|
|
allThroughStation.push(`${d.Station_JP},通過,`);
|
|
//setHaveThrough(true);
|
|
reverse = false;
|
|
} else {
|
|
if (
|
|
d.StationNumber < baseStationNumberFirst &&
|
|
d.StationNumber > baseStationNumberSecond
|
|
) {
|
|
allThroughStation.push(`${d.Station_JP},通過,`);
|
|
//setHaveThrough(true);
|
|
reverse = true;
|
|
}
|
|
}
|
|
});
|
|
if (reverse) allThroughStation.reverse();
|
|
return allThroughStation;
|
|
});
|
|
let mainArray = [...trainData];
|
|
let indexs = 0;
|
|
trainData.forEach((d, index, array) => {
|
|
indexs = indexs + 1;
|
|
if (!allThroughStationList[index]) return;
|
|
if (allThroughStationList[index].length == 0) return;
|
|
mainArray.splice(indexs, 0, ...allThroughStationList[index]);
|
|
indexs = indexs + allThroughStationList[index].length;
|
|
});
|
|
setTrainDataWithThrough(mainArray);
|
|
}, [allTrainDiagram, stationList, trainID]);
|
|
const stopStationIDList = trainDataWidhThrough.map((i) => {
|
|
const [station, se, time] = i.split(",");
|
|
const Stations = stationList.map((a) =>
|
|
a.filter((d) => d.StationName == station)
|
|
);
|
|
const StationNumbers =
|
|
Stations &&
|
|
Stations.reduce((newArray, e) => {
|
|
return newArray.concat(e);
|
|
}, []).map((d) => d.StationNumber);
|
|
return StationNumbers;
|
|
});
|
|
const [currentPosition, setCurrentPosition] = useState<string[]>([]);
|
|
|
|
useEffect(() => {
|
|
const position = getPosition(train);
|
|
if (position) setCurrentPosition(position);
|
|
}, [train]);
|
|
|
|
const [nextStationData, setNextStationData] = useState<StationProps[]>([]);
|
|
const [untilStationData, setUntilStationData] = useState<StationProps[]>([]);
|
|
useEffect(() => {
|
|
const points = findReversalPoints(currentPosition, stopStationIDList);
|
|
if (!points) return;
|
|
if (points.length == 0) return;
|
|
let searchCountBase = points.findIndex((d) => d == true);
|
|
for (
|
|
let searchCount = searchCountBase;
|
|
searchCount < points.length;
|
|
searchCount++
|
|
) {
|
|
const nextPos = trainDataWidhThrough[searchCount];
|
|
if (nextPos) {
|
|
const [station, se, time] = nextPos.split(",");
|
|
if (se.includes("通")) continue;
|
|
else {
|
|
setNextStationData(getStationDataFromName(station));
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
let trainList = [];
|
|
for (
|
|
let searchCount = searchCountBase - 1;
|
|
searchCount < points.length;
|
|
searchCount++
|
|
) {
|
|
trainList.push(trainDataWidhThrough[searchCount]);
|
|
}
|
|
setUntilStationData(trainList);
|
|
}, [currentPosition, trainDataWidhThrough]);
|
|
const [ToData, setToData] = useState("");
|
|
useEffect(() => {
|
|
if (customData.ToData && customData.ToData != "") {
|
|
setToData(customData.ToData);
|
|
} else {
|
|
if (trainDataWidhThrough.length == 0) return;
|
|
setToData(
|
|
trainDataWidhThrough[trainDataWidhThrough.length - 2].split(",")[0]
|
|
);
|
|
}
|
|
}, [customData, trainDataWidhThrough]);
|
|
|
|
const [station, setStation] = useState<StationProps[]>([]);
|
|
useEffect(() => {
|
|
const data = getStationDataFromName(ToData);
|
|
setStation(data);
|
|
}, [ToData]);
|
|
const lineColor =
|
|
station.length > 0
|
|
? lineColorList[station[0]?.StationNumber.slice(0, 1)]
|
|
: "black";
|
|
//const lineColor = "red";
|
|
const customTrainType = getTrainType({
|
|
type: customData.type,
|
|
whiteMode: true,
|
|
});
|
|
const trainNameText = `${customData.trainName}${
|
|
customData.trainNumDistance !== null
|
|
? ` ${parseInt(customData.TrainNumber) - customData.trainNumDistance}号`
|
|
: ""
|
|
}`;
|
|
return (
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
flexDirection: displaySize === 50 ? "row" : "column",
|
|
backgroundColor: "black",
|
|
borderBottomColor: "black",
|
|
borderBottomWidth: 2,
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
flexDirection: displaySize === 50 ? "column" : "row",
|
|
flex: 1,
|
|
backgroundColor: "white",
|
|
height: displaySize === 50 ? 50 : 200,
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<View
|
|
style={{ flex: displaySize === 50 ? 1 : 5, flexDirection: "row" }}
|
|
>
|
|
<View
|
|
style={{
|
|
backgroundColor: customTrainType.color,
|
|
flexDirection: "row",
|
|
alignContent: "center",
|
|
alignSelf: "center",
|
|
alignItems: "center",
|
|
height: "100%",
|
|
}}
|
|
>
|
|
<Image
|
|
source={{ uri: customData.img }}
|
|
width={displaySize === 50 ? 14 : 23}
|
|
height={displaySize === 50 ? 17 : 26}
|
|
style={{ margin: 5 }}
|
|
/>
|
|
<View
|
|
style={{
|
|
flexDirection: displaySize === 50 ? "row" : "column",
|
|
alignContent: "center",
|
|
alignSelf: "center",
|
|
alignItems: "center",
|
|
maxWidth: displaySize === 50 ? 100 : 60,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 14,
|
|
fontFamily: customTrainType.fontAvailable
|
|
? "JR-Nishi"
|
|
: undefined,
|
|
fontWeight: !customTrainType.fontAvailable
|
|
? "bold"
|
|
: undefined,
|
|
marginTop: customTrainType.fontAvailable ? 3 : 0,
|
|
color: "white",
|
|
textAlignVertical: "center",
|
|
textAlign: "left",
|
|
}}
|
|
>
|
|
{customTrainType.shortName}
|
|
</Text>
|
|
{customData.trainName && (
|
|
<Text
|
|
style={{
|
|
fontSize: trainNameText.length > 6 ? 8 : 14,
|
|
color: "white",
|
|
maxWidth: displaySize === 50 ? 60 : 200,
|
|
textAlignVertical: "center",
|
|
}}
|
|
>
|
|
{trainNameText}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
<View
|
|
style={{
|
|
backgroundColor: customTrainType.color,
|
|
width: 10,
|
|
borderLeftColor: customTrainType.color,
|
|
borderTopColor: lineColor,
|
|
borderBottomColor: lineColor,
|
|
borderTopWidth: displaySize === 50 ? 14 : 50,
|
|
borderBottomWidth: displaySize === 50 ? 14 : 50,
|
|
borderLeftWidth: displaySize === 50 ? 10 : 30,
|
|
borderRightWidth: 0,
|
|
//height: displaySize === 50 ? 20 : 100,
|
|
height: "100%",
|
|
}}
|
|
></View>
|
|
</View>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
alignContent: "center",
|
|
alignSelf: "center",
|
|
height: "100%",
|
|
backgroundColor: lineColor,
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
alignContent: "center",
|
|
alignSelf: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<StationNumberMaker
|
|
currentStation={station}
|
|
singleSize={18}
|
|
useEach={true}
|
|
/>
|
|
<Text
|
|
style={{
|
|
fontSize: customData?.ToData?.length > 4 ? 9 : 12,
|
|
color: "white",
|
|
fontWeight: "bold",
|
|
textAlignVertical: "center",
|
|
margin: 0,
|
|
padding: 0,
|
|
height: "100%",
|
|
}}
|
|
>
|
|
{ToData}行
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
{displaySize === 200 && (
|
|
<View
|
|
style={{
|
|
backgroundColor: "white",
|
|
width: 10,
|
|
borderLeftColor: "black",
|
|
borderTopColor: lineColor,
|
|
borderBottomColor: "white",
|
|
borderRightColor: "black",
|
|
borderTopWidth: 50,
|
|
borderBottomWidth: 0,
|
|
borderLeftWidth: 0,
|
|
borderRightWidth: 20,
|
|
}}
|
|
></View>
|
|
)}
|
|
<View
|
|
style={{
|
|
backgroundColor: "black",
|
|
flex: displaySize === 50 ? 1 : 4,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 10,
|
|
fontWeight: "bold",
|
|
color: "white",
|
|
marginHorizontal: 5,
|
|
}}
|
|
>
|
|
{nextStationData[0]?.Station_JP == train?.Pos ? "ただいま" : "次は"}
|
|
</Text>
|
|
<StationNumberMaker
|
|
currentStation={nextStationData}
|
|
singleSize={20}
|
|
useEach={true}
|
|
/>
|
|
<Text
|
|
style={{
|
|
fontSize: 18,
|
|
fontWeight: "bold",
|
|
color: "white",
|
|
flex: 1,
|
|
}}
|
|
>
|
|
{nextStationData[0]?.Station_JP || "不明"}
|
|
</Text>
|
|
{displaySize === 50 && (
|
|
<View
|
|
style={{
|
|
backgroundColor: "white",
|
|
width: 10,
|
|
borderLeftColor: "black",
|
|
borderTopColor: "black",
|
|
borderBottomColor: "white",
|
|
borderRightColor: "white",
|
|
borderTopWidth: 21,
|
|
borderBottomWidth: 0,
|
|
borderLeftWidth: 0,
|
|
borderRightWidth: 7,
|
|
}}
|
|
></View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
<CurrentPositionBox
|
|
train={train}
|
|
lineColor={lineColor}
|
|
trainDataWithThrough={untilStationData}
|
|
isSmall={displaySize === 50}
|
|
/>
|
|
<TouchableOpacity
|
|
style={{
|
|
position: "absolute",
|
|
top: "100%",
|
|
left: 0,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
}}
|
|
onPress={() => {
|
|
setFixedPosition({ type: null, value: null });
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: "black",
|
|
paddingHorizontal: 5,
|
|
height: 26,
|
|
}}
|
|
>
|
|
<Ionicons name="lock-closed" size={15} color="white" />
|
|
<Text
|
|
style={{
|
|
color: "white",
|
|
fontSize: 15,
|
|
paddingRight: 5,
|
|
}}
|
|
>
|
|
列車追跡中
|
|
</Text>
|
|
<Ionicons name="close" size={15} color="white" />
|
|
</View>
|
|
|
|
<View
|
|
style={{
|
|
backgroundColor: "#0000",
|
|
width: 6,
|
|
borderLeftColor: "black",
|
|
borderTopColor: "black",
|
|
borderBottomColor: "#0000",
|
|
borderRightColor: "#0000",
|
|
borderBottomWidth: 26,
|
|
borderLeftWidth: 10,
|
|
borderRightWidth: 0,
|
|
borderTopWidth: 0,
|
|
height: 26,
|
|
}}
|
|
/>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={{
|
|
position: "absolute",
|
|
top: "100%",
|
|
right: 0,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
}}
|
|
onPress={() => {
|
|
LayoutAnimation.configureNext({
|
|
duration: 500,
|
|
update: { type: "spring", springDamping: 0.7 },
|
|
});
|
|
if (displaySize === 50) {
|
|
setDisplaySize(200);
|
|
} else {
|
|
setDisplaySize(50);
|
|
}
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
backgroundColor: "#0000",
|
|
width: 6,
|
|
borderLeftColor: "#0000",
|
|
borderTopColor: "black",
|
|
borderBottomColor: "#0000",
|
|
borderRightColor: "black",
|
|
borderBottomWidth: 26,
|
|
borderLeftWidth: 0,
|
|
borderRightWidth: 10,
|
|
borderTopWidth: 0,
|
|
height: 26,
|
|
}}
|
|
/>
|
|
<View
|
|
style={{
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: "black",
|
|
paddingHorizontal: 5,
|
|
height: 26,
|
|
}}
|
|
pointerEvents="none"
|
|
>
|
|
<Ionicons
|
|
name={displaySize == 50 ? "chevron-down" : "chevron-up"}
|
|
size={15}
|
|
color="white"
|
|
/>
|
|
<Text
|
|
style={{
|
|
color: "white",
|
|
paddingRight: 5,
|
|
backgroundColor: "black",
|
|
fontSize: 15,
|
|
}}
|
|
>
|
|
{displaySize == 50 ? "列車情報展開" : "列車情報縮小"}
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const CurrentPositionBox = ({
|
|
train,
|
|
lineColor,
|
|
trainDataWithThrough,
|
|
isSmall,
|
|
}) => {
|
|
let firstText = "";
|
|
let secondText = "";
|
|
let marginText = "";
|
|
let externalText = "";
|
|
const { isBetween, Pos: PosData } = trainPosition(train);
|
|
if (isBetween === true) {
|
|
const { from, to } = PosData;
|
|
firstText = from;
|
|
secondText = to;
|
|
marginText = "→";
|
|
} else {
|
|
const { Pos } = PosData;
|
|
if (Pos !== "") {
|
|
firstText = Pos;
|
|
}
|
|
}
|
|
const delayTime = train?.delay == "入線" ? 0 : parseInt(train?.delay);
|
|
return (
|
|
<View
|
|
style={{
|
|
flex: isSmall ? 1 : 3,
|
|
backgroundColor: "white",
|
|
flexDirection: "row",
|
|
}}
|
|
>
|
|
{isSmall && (
|
|
<View style={{ flexDirection: "column" }}>
|
|
<View
|
|
style={{
|
|
backgroundColor: "white",
|
|
width: 10,
|
|
borderLeftColor: lineColor,
|
|
borderTopColor: lineColor,
|
|
borderBottomColor: "white",
|
|
borderRightColor: "white",
|
|
borderTopWidth: 28,
|
|
borderBottomWidth: 0,
|
|
borderLeftWidth: 0,
|
|
borderRightWidth: 10,
|
|
}}
|
|
></View>
|
|
<View
|
|
style={{
|
|
backgroundColor: "white",
|
|
width: 10,
|
|
borderLeftColor: "white",
|
|
borderTopColor: "white",
|
|
borderBottomColor: "white",
|
|
borderRightColor: "white",
|
|
borderTopWidth: 18,
|
|
borderBottomWidth: 0,
|
|
borderLeftWidth: 0,
|
|
borderRightWidth: 10,
|
|
}}
|
|
></View>
|
|
</View>
|
|
)}
|
|
<ScrollView
|
|
style={{ flex: 1, flexDirection: "row" }}
|
|
horizontal
|
|
overScrollMode="always"
|
|
>
|
|
{trainDataWithThrough.length > 0 &&
|
|
trainDataWithThrough.map((d, index, array) => {
|
|
if (!d) return null;
|
|
if (d == "") return null;
|
|
const [station, se, time] = d.split(",");
|
|
let distanceMinute = 0;
|
|
if (time != "") {
|
|
const now = dayjs();
|
|
const hour = parseInt(time.split(":")[0]);
|
|
const distanceTime = now
|
|
.hour(hour < 4 ? hour + 24 : hour)
|
|
.minute(time.split(":")[1]);
|
|
distanceMinute = distanceTime.diff(now, "minute") + delayTime;
|
|
if (now.hour() < 4) {
|
|
if (hour < 4) {
|
|
distanceMinute = distanceMinute - 1440;
|
|
}
|
|
}
|
|
}
|
|
return (
|
|
<>
|
|
<View
|
|
style={{
|
|
flexDirection: "column",
|
|
backgroundColor: "#6e6e6eff",
|
|
borderRadius: 30,
|
|
marginHorizontal: isSmall ? 2 : 4,
|
|
marginVertical: isSmall ? 0 : 2,
|
|
padding: isSmall ? 2 : 4,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
overflow: "hidden",
|
|
}}
|
|
key={d + "CurrentPositionBox"}
|
|
>
|
|
{station.split("").map((i, index) => {
|
|
return (
|
|
<Text
|
|
key={i + index}
|
|
style={{
|
|
fontSize: isSmall ? 5 : 12,
|
|
color: "white",
|
|
margin: 0,
|
|
padding: 0,
|
|
fontWeight: "bold",
|
|
}}
|
|
>
|
|
{i}
|
|
</Text>
|
|
);
|
|
})}
|
|
<View style={{ flex: 1 }} />
|
|
{isSmall ||
|
|
(time != "" && (
|
|
<Text
|
|
style={{
|
|
fontSize: isSmall ? 8 : 12,
|
|
color: "black",
|
|
backgroundColor: "white",
|
|
fontWeight: "bold",
|
|
}}
|
|
>
|
|
{distanceMinute}
|
|
</Text>
|
|
))}
|
|
<Text
|
|
style={{
|
|
fontSize: isSmall ? 8 : 14,
|
|
color: se.includes("通")
|
|
? "#020202ff"
|
|
: index == 1 && secondText == ""
|
|
? "#ffe852ff"
|
|
: "white",
|
|
marginTop: isSmall ? 0 : 3,
|
|
height: isSmall ? "auto" : 17,
|
|
fontWeight: "bold",
|
|
}}
|
|
>
|
|
{se.includes("通")
|
|
? null
|
|
: index == 1 && secondText == ""
|
|
? "→"
|
|
: "●"}
|
|
</Text>
|
|
</View>
|
|
{index == 0 && secondText != "" && (
|
|
<View
|
|
style={{
|
|
flexDirection: "column",
|
|
backgroundColor: "#6e6e6e0e",
|
|
borderRadius: 10,
|
|
marginHorizontal: isSmall ? 2 : 4,
|
|
padding: isSmall ? 2 : 4,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Ionicons
|
|
name="arrow-forward"
|
|
size={isSmall ? 8 : 14}
|
|
color="black"
|
|
style={{ marginTop: isSmall ? 0 : 3 }}
|
|
/>
|
|
</View>
|
|
)}
|
|
</>
|
|
);
|
|
})}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|