782 lines
23 KiB
JavaScript
782 lines
23 KiB
JavaScript
import React, { useEffect, useState, useRef } from "react";
|
||
import {
|
||
View,
|
||
LayoutAnimation,
|
||
ScrollView,
|
||
Linking,
|
||
Text,
|
||
TouchableOpacity,
|
||
TouchableWithoutFeedback,
|
||
TouchableHighlight,
|
||
Platform,
|
||
} from "react-native";
|
||
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
|
||
import ActionSheet, {
|
||
SheetManager,
|
||
useScrollHandlers,
|
||
} from "react-native-actions-sheet";
|
||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||
import { AS } from "../../storageControl";
|
||
import LottieView from "lottie-react-native";
|
||
import trainList from "../../assets/originData/trainList";
|
||
import { lineList } from "../../lib/getStationList";
|
||
import {
|
||
heightPercentageToDP,
|
||
widthPercentageToDP,
|
||
} from "react-native-responsive-screen";
|
||
import lineColorList from "../../assets/originData/lineColorList";
|
||
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
|
||
import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
|
||
import dayjs from "dayjs";
|
||
import { getTrainType } from "../../lib/getTrainType";
|
||
import { customTrainDataDetector } from "../custom-train-data";
|
||
|
||
export const EachTrainInfo = (props) => {
|
||
if (!props.payload) return <></>;
|
||
const {
|
||
data,
|
||
navigate,
|
||
originalStationList,
|
||
openStationACFromEachTrainInfo = () => {},
|
||
from,
|
||
} = props.payload;
|
||
const [trainData, setTrainData] = useState([]);
|
||
const [currentPosition, setCurrentPosition] = useState([]);
|
||
|
||
const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
|
||
|
||
const { currentTrain } = useCurrentTrain();
|
||
|
||
const [currentTrainData, setCurrentTrainData] = useState([]);
|
||
const [nearTrainIDList, setNearTrainIDList] = useState([]);
|
||
|
||
useEffect(() => {
|
||
const returnArray = [];
|
||
if (!data.trainNum) return;
|
||
if (
|
||
new RegExp(/^4[1-9]\d\d[DM]$/).test(data.trainNum) ||
|
||
new RegExp(/^5[1-7]\d\d[DM]$/).test(data.trainNum)
|
||
) {
|
||
if (trainList[data.trainNum.substring(1)]) {
|
||
returnArray.push(data.trainNum.substring(1));
|
||
}
|
||
}
|
||
if (new RegExp(/^[1-9]\d\d[DM]$/).test(data.trainNum)) {
|
||
if (trainList["4" + data.trainNum]) {
|
||
returnArray.push("4" + data.trainNum);
|
||
}
|
||
if (trainList["5" + data.trainNum]) {
|
||
returnArray.push("5" + data.trainNum);
|
||
}
|
||
}
|
||
setNearTrainIDList(returnArray);
|
||
}, [data]);
|
||
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}`,
|
||
},
|
||
navigate,
|
||
originalStationList,
|
||
from: "AllTrainDiagramView",
|
||
};
|
||
SheetManager.show("EachTrainInfo", {
|
||
payload,
|
||
});
|
||
};
|
||
useEffect(() => {
|
||
setCurrentTrainData(
|
||
checkDuplicateTrainData(
|
||
currentTrain.filter((d) => d.num == data.trainNum)
|
||
)
|
||
);
|
||
}, [currentTrain]);
|
||
|
||
useEffect(() => {
|
||
//列車現在地アイコン表示スイッチ
|
||
AS.getItem("trainPositionSwitch")
|
||
.then((d) => {
|
||
if (d) {
|
||
setTrainPositionSwitch(d);
|
||
} else {
|
||
}
|
||
})
|
||
.catch((d) => AS.setItem("trainPositionSwitch", "false"));
|
||
}, []);
|
||
//bconst insets = useSafeAreaInsets();
|
||
const getStationData = (stationName) => {
|
||
const Stations = stationList.map((a) =>
|
||
a.filter((d) => d.StationName == stationName)
|
||
);
|
||
const Station =
|
||
Stations &&
|
||
Stations.reduce((newArray, e) => {
|
||
return newArray.concat(e);
|
||
}, []);
|
||
if (!Station[0]) return [];
|
||
return Station.map((d) => d.StationNumber)[0];
|
||
};
|
||
useEffect(() => {
|
||
//currentTrainData.Pos = "鴨川～端岡"; //test
|
||
if (!currentTrainData?.Pos) return;
|
||
if (currentTrainData?.Pos.match("～")) {
|
||
const pos = currentTrainData?.Pos.replace("（下り）", "")
|
||
.replace("（上り）", "")
|
||
.split("～");
|
||
setCurrentPosition([getStationData(pos[0]), getStationData(pos[1])]);
|
||
} else {
|
||
setCurrentPosition([getStationData(currentTrainData?.Pos)]);
|
||
}
|
||
}, [currentTrainData]);
|
||
|
||
const stationList =
|
||
originalStationList &&
|
||
lineList.map((d) =>
|
||
originalStationList[d].map((a) => ({
|
||
StationNumber: a.StationNumber,
|
||
StationName: a.Station_JP,
|
||
}))
|
||
);
|
||
const stopStationIDList = trainData.map((i, index) => {
|
||
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);
|
||
}, [])
|
||
.filter((d) => d.StationNumber)
|
||
.map((d) => d.StationNumber);
|
||
return StationNumbers[0];
|
||
});
|
||
function findReversalPoints(array) {
|
||
try {
|
||
// arrayは現在位置の駅ID(駅在宅の場合は1つの配列、駅間の場合は2つの配列)
|
||
// stopStationIDListは停車駅の駅IDの配列
|
||
if (!stopStationIDList.length) return [];
|
||
// arrayが二次元配列だったら早期リターン
|
||
if (!array instanceof Array) return [];
|
||
if (!array.length) return [];
|
||
if (array[0] instanceof Array) return [];
|
||
const arrayNumber = array.map((d) => ({
|
||
line: d
|
||
.split("")
|
||
.filter((s) => "A" < s && s < "Z")
|
||
.join(""),
|
||
ID: d
|
||
.split("")
|
||
.filter((s) => "0" <= s && s <= "9")
|
||
.join(""),
|
||
}));
|
||
const stopStationIDListNumber = stopStationIDList.map((d) => {
|
||
if (!d) return { line: [], ID: [] };
|
||
return {
|
||
line: d
|
||
.split("")
|
||
.filter((s) => "A" < s && s < "Z")
|
||
.join(""),
|
||
ID: d
|
||
.split("")
|
||
.filter((s) => "0" <= s && s <= "9")
|
||
.join(""),
|
||
};
|
||
});
|
||
// 完全一致
|
||
if (array.length == 1) {
|
||
const index = stopStationIDList.indexOf(array[0]);
|
||
if (index != -1) return [index];
|
||
// 通過駅の場合
|
||
for (let i = 0; i < stopStationIDListNumber.length - 1; i++) {
|
||
if (stopStationIDListNumber[i].ID < arrayNumber[0].ID) {
|
||
if (stopStationIDListNumber[i + 1].ID > arrayNumber[0].ID) {
|
||
return [i + 1];
|
||
}
|
||
}
|
||
if (stopStationIDListNumber[i].ID > arrayNumber[0].ID) {
|
||
if (stopStationIDListNumber[i + 1].ID < arrayNumber[0].ID) {
|
||
return [i + 1];
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 駅間の場合
|
||
if (array.length == 2) {
|
||
const index1 = stopStationIDList.indexOf(array[0]);
|
||
const index2 = stopStationIDList.indexOf(array[1]);
|
||
if (index1 != -1 && index2 != -1) {
|
||
// 駅間で通過駅も無い場合
|
||
if (index1 < index2) {
|
||
if (index1 + 1 == index2) {
|
||
return [index2];
|
||
} else {
|
||
const returnArray = [];
|
||
for (let i = index1 + 1; i <= index2; i++) {
|
||
returnArray.push(i);
|
||
}
|
||
return returnArray;
|
||
}
|
||
}
|
||
if (index1 > index2) {
|
||
if (index2 + 1 == index1) return [index1];
|
||
else {
|
||
const returnArray = [];
|
||
for (let i = index2 + 1; i <= index1; i++) {
|
||
returnArray.push(i);
|
||
}
|
||
return returnArray;
|
||
}
|
||
}
|
||
} else {
|
||
const getNearStationID = (stationID) => {
|
||
for (let i = 0; i <= stopStationIDListNumber.length; i++) {
|
||
if (stopStationIDListNumber[i].ID < stationID) {
|
||
if (stopStationIDListNumber[i + 1].ID > stationID) {
|
||
return i + 1;
|
||
}
|
||
}
|
||
if (stopStationIDListNumber[i].ID > stationID) {
|
||
if (stopStationIDListNumber[i + 1].ID < stationID) {
|
||
return i + 1;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
let newIndex1 = index1;
|
||
let newIndex2 = index2;
|
||
if (index1 == -1) {
|
||
newIndex1 = getNearStationID(arrayNumber[0].ID);
|
||
}
|
||
if (index2 == -1) {
|
||
newIndex2 = getNearStationID(arrayNumber[1].ID);
|
||
}
|
||
if (newIndex1 && newIndex2) {
|
||
return [newIndex1, newIndex2];
|
||
}
|
||
|
||
// 通過駅の場合
|
||
}
|
||
|
||
return [];
|
||
}
|
||
} catch (e) {
|
||
console.log(e);
|
||
}
|
||
}
|
||
// 使用例
|
||
const points =
|
||
trainPositionSwitch == "true" ? findReversalPoints(currentPosition) : [];
|
||
|
||
useEffect(() => {
|
||
if (!data.trainNum) return;
|
||
const TD = trainList[data.trainNum];
|
||
if (!TD) {
|
||
setTrainData([]);
|
||
return;
|
||
}
|
||
setTrainData(TD.split("#").filter((d) => d != ""));
|
||
}, [data]);
|
||
const getType = (string) => {
|
||
switch (string) {
|
||
case "express":
|
||
return "特急";
|
||
case "rapid":
|
||
return "快速";
|
||
default:
|
||
return "";
|
||
}
|
||
};
|
||
|
||
const migrateTrainName = (string) => {
|
||
return string
|
||
.replace("マリン", "マリンライナー")
|
||
.replace("ライナーライナー", "ライナー");
|
||
};
|
||
const actionSheetRef = useRef(null);
|
||
const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
|
||
return (
|
||
<ActionSheet
|
||
gestureEnabled={true}
|
||
CustomHeaderComponent={<></>}
|
||
ref={actionSheetRef}
|
||
drawUnderStatusBar={false}
|
||
isModal={Platform.OS == "ios"}
|
||
//useBottomSafeAreaPadding={Platform.OS == "android"}
|
||
>
|
||
<View
|
||
style={{
|
||
backgroundColor: "#0099CC",
|
||
borderTopRadius: 5,
|
||
borderColor: "dark",
|
||
borderWidth: 1,
|
||
}}
|
||
>
|
||
<View style={{ height: 26, width: "100%" }}>
|
||
<View
|
||
style={{
|
||
height: 6,
|
||
width: 45,
|
||
borderRadius: 100,
|
||
backgroundColor: "#f0f0f0",
|
||
marginVertical: 10,
|
||
alignSelf: "center",
|
||
}}
|
||
/>
|
||
</View>
|
||
<View
|
||
style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
|
||
>
|
||
<Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
|
||
{data.limited
|
||
? getType(data.limited.split(":")[0]) +
|
||
migrateTrainName(
|
||
data.limited.split(":")[1] ||
|
||
(trainData.length > 0
|
||
? trainData[trainData.length - 1].split(",")[0] + "行き"
|
||
: " ")
|
||
)
|
||
: ""}
|
||
</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<TouchableOpacity
|
||
onPress={() => {
|
||
nearTrainIDList.length && openTrainInfo(nearTrainIDList[0]);
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
|
||
{data.trainNum}
|
||
{nearTrainIDList.length ? "..." : ""}
|
||
</Text>
|
||
</TouchableOpacity>
|
||
|
||
{data.limited != undefined &&
|
||
getType(data.limited.split(":")[0]) &&
|
||
!data.limited.split(":")[1].match("サンポート") && (
|
||
<Ionicons
|
||
name="subway"
|
||
color="white"
|
||
size={30}
|
||
style={{ margin: 5 }}
|
||
onPress={() => {
|
||
LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
|
||
navigate("trainbase", {
|
||
info: "train.html?tn=" + data.trainNum,
|
||
from,
|
||
});
|
||
SheetManager.hide("EachTrainInfo");
|
||
}}
|
||
/>
|
||
)}
|
||
</View>
|
||
{from == "AllTrainDiagramView" || (
|
||
<ScrollView
|
||
style={{
|
||
flexDirection: "row",
|
||
//width: widthPercentageToDP("200%"),
|
||
minHeight: 200,
|
||
height: heightPercentageToDP("20%"),
|
||
}}
|
||
horizontal
|
||
pagingEnabled
|
||
>
|
||
<TrainDataView
|
||
currentTrainData={currentTrainData}
|
||
currentPosition={currentPosition}
|
||
/>
|
||
{/* <View
|
||
style={{
|
||
flexDirection: "column",
|
||
height: heightPercentageToDP("20%"),
|
||
flex: 1,
|
||
width: widthPercentageToDP("100%"),
|
||
}}
|
||
>
|
||
<View style={{ flex: 1, flexDirection: "row" }}>
|
||
<View
|
||
style={{
|
||
flex: 1,
|
||
backgroundColor: "white",
|
||
borderRadius: 10,
|
||
padding: 10,
|
||
margin: 10,
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Text
|
||
style={{
|
||
fontSize: 20,
|
||
color: "#0099CC",
|
||
textAlign: "right",
|
||
}}
|
||
>
|
||
岡山
|
||
</Text>
|
||
</View>
|
||
|
||
<View
|
||
style={{
|
||
flex: 3,
|
||
backgroundColor: "white",
|
||
borderRadius: 10,
|
||
padding: 10,
|
||
margin: 10,
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 15, color: "#0099CC" }}>
|
||
車両案内
|
||
</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Text
|
||
style={{
|
||
fontSize: 20,
|
||
color: "#0099CC",
|
||
textAlign: "right",
|
||
}}
|
||
>
|
||
宇多津でうずしお号と連結
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
<View style={{ flex: 1, flexDirection: "row" }}>
|
||
<View
|
||
style={{
|
||
flex: 1,
|
||
backgroundColor: "white",
|
||
borderRadius: 10,
|
||
padding: 10,
|
||
margin: 10,
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 15, color: "#0099CC" }}>
|
||
編成(使用車両：2700系)
|
||
</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Text
|
||
style={{
|
||
fontSize: 20,
|
||
color: "#0099CC",
|
||
textAlign: "left",
|
||
}}
|
||
>
|
||
{"[<自][自>][アン自|指>][アン指|G>]"}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</View> */}
|
||
</ScrollView>
|
||
)}
|
||
<View
|
||
style={{
|
||
alignItems: "center",
|
||
backgroundColor: "white",
|
||
flexDirection: "row",
|
||
}}
|
||
>
|
||
<View
|
||
style={{
|
||
padding: 8,
|
||
flexDirection: "row",
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: "#f0f0f0",
|
||
flex: 1,
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 20 }}>停車駅</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<View style={{ flexDirection: "row" }}>
|
||
{!isNaN(currentTrainData?.delay) &&
|
||
currentTrainData?.delay != 0 && (
|
||
<Text
|
||
style={{
|
||
fontSize: 15,
|
||
color: "black",
|
||
position: "absolute",
|
||
right: 110,
|
||
textAlign: "right",
|
||
textDecorationLine: "line-through",
|
||
}}
|
||
>
|
||
(定刻)
|
||
</Text>
|
||
)}
|
||
<Text
|
||
style={{
|
||
fontSize: 20,
|
||
color: isNaN(currentTrainData?.delay)
|
||
? "black"
|
||
: currentTrainData?.delay == 0
|
||
? "black"
|
||
: "red",
|
||
width: 60,
|
||
}}
|
||
>
|
||
見込
|
||
</Text>
|
||
<Text style={{ fontSize: 20, width: 50 }}></Text>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
<ScrollView
|
||
{...scrollHandlers}
|
||
style={{
|
||
maxHeight: heightPercentageToDP(
|
||
from == "AllTrainDiagramView" ? "70%" : "50%"
|
||
),
|
||
backgroundColor: "white",
|
||
}}
|
||
>
|
||
{/* <LottieView
|
||
autoPlay
|
||
loop
|
||
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
|
||
source={require("../../assets/51690-loading-diamonds.json")}
|
||
/>
|
||
<Text>ほげほげふがふが</Text> */}
|
||
|
||
{trainData.map((i, index) => (
|
||
<StationButton
|
||
i={i}
|
||
index={index}
|
||
stationList={stationList}
|
||
points={points}
|
||
currentTrainData={currentTrainData}
|
||
openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
|
||
/>
|
||
))}
|
||
|
||
<View style={{ flexDirection: "row" }}>
|
||
<View
|
||
style={{
|
||
padding: 8,
|
||
flexDirection: "row",
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: "#f0f0f0",
|
||
flex: 1,
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 20 }}> </Text>
|
||
<View style={{ flex: 1 }} />
|
||
</View>
|
||
</View>
|
||
</ScrollView>
|
||
</View>
|
||
</ActionSheet>
|
||
);
|
||
};
|
||
|
||
const StationButton = ({
|
||
i,
|
||
index,
|
||
stationList,
|
||
points,
|
||
currentTrainData,
|
||
openStationACFromEachTrainInfo,
|
||
}) => {
|
||
const [station, se, time] = i.split(","); // 阿波池田,発,6:21
|
||
const Stations = stationList
|
||
.map((a) => a.filter((d) => d.StationName == station))
|
||
.reduce((newArray, e) => newArray.concat(e), []);
|
||
/*Array [
|
||
Object {
|
||
"StationName": "佐古",
|
||
"StationNumber": "T01",
|
||
},
|
||
Object {
|
||
"StationName": "佐古",
|
||
"StationNumber": "B01",
|
||
},
|
||
] */
|
||
const StationNumbers =
|
||
Stations &&
|
||
Stations.filter((d) => d.StationNumber).map((d) => d.StationNumber);
|
||
// Array [ "T01", "B01",]
|
||
const lineIDs = [];
|
||
const EachIDs = [];
|
||
StationNumbers.forEach((d) => {
|
||
const textArray = d.split("");
|
||
lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
|
||
EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
|
||
});
|
||
// Array [ "T", "B",]
|
||
// Array [ "01", "01",]
|
||
|
||
const dates = dayjs()
|
||
.set("hour", parseInt(time.split(":")[0]))
|
||
.set("minute", parseInt(time.split(":")[1]));
|
||
if (!isNaN(currentTrainData?.delay)) {
|
||
dates.add(currentTrainData?.delay, "minute");
|
||
}
|
||
const timeString = dates.format("HH:mm").split(":");
|
||
|
||
return (
|
||
<TouchableWithoutFeedback
|
||
onPress={() => openStationACFromEachTrainInfo(station)}
|
||
key={station}
|
||
>
|
||
<View style={{ flexDirection: "row" }}>
|
||
<View
|
||
style={{
|
||
width: 35,
|
||
position: "relative",
|
||
marginHorizontal: 15,
|
||
flexDirection: "row",
|
||
height: "101%",
|
||
}}
|
||
>
|
||
{lineIDs.map((lineID, index) => (
|
||
<View
|
||
style={{
|
||
backgroundColor: lineColorList[lineID],
|
||
flex: 1,
|
||
}}
|
||
key={lineID}
|
||
>
|
||
<View style={{ flex: 1 }} />
|
||
<Text
|
||
style={{
|
||
color: "white",
|
||
textAlign: "center",
|
||
fontSize: 10,
|
||
fontWeight: "bold",
|
||
}}
|
||
>
|
||
{lineIDs[index]}
|
||
{"\n"}
|
||
{EachIDs[index]}
|
||
</Text>
|
||
<View style={{ flex: 1 }} />
|
||
</View>
|
||
))}
|
||
</View>
|
||
<View
|
||
style={{
|
||
padding: 8,
|
||
flexDirection: "row",
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: "#f0f0f0",
|
||
flex: 1,
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 20 }}>{station}</Text>
|
||
<View style={{ flex: 1 }} />
|
||
{points && points.findIndex((d) => d == index) >= 0 ? (
|
||
<Text style={{ fontSize: 20, marginRight: 70 }}>🚊</Text>
|
||
) : null}
|
||
{!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
|
||
<Text
|
||
style={{
|
||
fontSize: 15,
|
||
color: "black",
|
||
width: 60,
|
||
position: "absolute",
|
||
right: 120,
|
||
textAlign: "right",
|
||
textDecorationLine: "line-through",
|
||
}}
|
||
>
|
||
{time}
|
||
</Text>
|
||
)}
|
||
<Text
|
||
style={{
|
||
fontSize: 20,
|
||
color: isNaN(currentTrainData?.delay)
|
||
? "black"
|
||
: currentTrainData?.delay == 0
|
||
? "black"
|
||
: "red",
|
||
width: 60,
|
||
}}
|
||
>
|
||
{timeString[0]}:{timeString[1]}
|
||
</Text>
|
||
<Text style={{ fontSize: 18, width: 50 }}>
|
||
{se?.replace("発", "出発").replace("着", "到着")}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
</TouchableWithoutFeedback>
|
||
);
|
||
};
|
||
|
||
const TrainDataView = ({ currentTrainData, currentPosition }) => {
|
||
return (
|
||
<View
|
||
style={{
|
||
flexDirection: "row",
|
||
minHeight: 200,
|
||
height: heightPercentageToDP("20%"),
|
||
width: widthPercentageToDP("100%"),
|
||
}}
|
||
>
|
||
<StateBox
|
||
title={`現在地 ${currentPosition.toString()}`}
|
||
text={
|
||
currentTrainData?.Pos.match("～")
|
||
? `${
|
||
currentTrainData?.Pos.replace("（下り）", "")
|
||
.replace("（上り）", "")
|
||
.split("～")[0]
|
||
}～${
|
||
currentTrainData?.Pos.replace("（下り）", "")
|
||
.replace("（上り）", "")
|
||
.split("～")[1]
|
||
}`
|
||
: currentTrainData?.Pos
|
||
}
|
||
/>
|
||
<View style={{ flex: 1, flexDirection: "column" }}>
|
||
<StateBox
|
||
title={isNaN(currentTrainData?.delay) ? "状態" : "遅延時分"}
|
||
text={`${currentTrainData?.delay}${
|
||
isNaN(currentTrainData?.delay) ? "" : "分"
|
||
}`}
|
||
/>
|
||
<StateBox title="列番" text={currentTrainData?.num} />
|
||
</View>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
const StateBox = ({ text, title }) => (
|
||
<View style={boxStyle}>
|
||
<Text style={{ fontSize: 15, color: "#0099CC" }}>{title}</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Text style={{ fontSize: 32, color: "#0099CC", textAlign: "right" }}>
|
||
{text?.match("～") ? (
|
||
<>
|
||
<Text style={boxTextStyle}>{text.split("～")[0]}</Text>
|
||
<Text style={{ color: "#0099CC", textAlign: "right" }}>～</Text>
|
||
<Text style={boxTextStyle}>{text.split("～")[1]}</Text>
|
||
</>
|
||
) : (
|
||
<Text style={boxTextStyle}>{text}</Text>
|
||
)}
|
||
</Text>
|
||
</View>
|
||
);
|
||
const boxStyle = {
|
||
flex: 1,
|
||
backgroundColor: "white",
|
||
borderRadius: 10,
|
||
padding: 10,
|
||
margin: 10,
|
||
};
|
||
const boxTextStyle = {
|
||
fontSize: 28,
|
||
color: "#0099CC",
|
||
textAlign: "right",
|
||
};
|