Merge commit 'ba65389596851e99fe0a3f4fad95b4fd6ea0448c' into develop
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
|
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
|
||||||
import { View, Platform } from "react-native";
|
import { View, Platform } from "react-native";
|
||||||
|
import { useKeepAwake } from "expo-keep-awake";
|
||||||
import Constants from "expo-constants";
|
import Constants from "expo-constants";
|
||||||
import { FixedTrain } from "./FixedPositionBox/FixedTrainBox";
|
import { FixedTrain } from "./FixedPositionBox/FixedTrainBox";
|
||||||
import { FixedStation } from "./FixedPositionBox/FixedStationBox";
|
import { FixedStation } from "./FixedPositionBox/FixedStationBox";
|
||||||
@@ -7,8 +8,9 @@ import { useState } from "react";
|
|||||||
|
|
||||||
export const FixedPositionBox = () => {
|
export const FixedPositionBox = () => {
|
||||||
const { fixedPosition, setFixedPosition } = useCurrentTrain();
|
const { fixedPosition, setFixedPosition } = useCurrentTrain();
|
||||||
const [displaySize, setDisplaySize] = useState(50);
|
const [displaySize, setDisplaySize] = useState(76);
|
||||||
|
|
||||||
|
useKeepAwake();
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
@@ -20,6 +22,7 @@ export const FixedPositionBox = () => {
|
|||||||
height: displaySize,
|
height: displaySize,
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
}}
|
}}
|
||||||
|
pointerEvents="box-none"
|
||||||
>
|
>
|
||||||
{fixedPosition.type === "station" && (
|
{fixedPosition.type === "station" && (
|
||||||
<FixedStation
|
<FixedStation
|
||||||
|
@@ -97,234 +97,243 @@ export const FixedStation: FC<props> = ({
|
|||||||
}, [trainTimeAndNumber, currentTrain /*finalSwitch*/]);
|
}, [trainTimeAndNumber, currentTrain /*finalSwitch*/]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity
|
<View
|
||||||
style={{
|
style={{ display: "flex", flexDirection: "column", flex: 1 }}
|
||||||
flex: 1,
|
pointerEvents="box-none"
|
||||||
flexDirection: "row",
|
|
||||||
borderBottomColor: lineColor,
|
|
||||||
borderBottomWidth: 2,
|
|
||||||
position: "relative",
|
|
||||||
}}
|
|
||||||
activeOpacity={1}
|
|
||||||
onPress={() => {
|
|
||||||
const payload = {
|
|
||||||
currentStation: station,
|
|
||||||
navigate,
|
|
||||||
goTo: "menu",
|
|
||||||
onExit: () => SheetManager.hide("StationDetailView"),
|
|
||||||
};
|
|
||||||
//@ts-ignore
|
|
||||||
SheetManager.show("StationDetailView", { payload });
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<View
|
<TouchableOpacity
|
||||||
style={{
|
style={{
|
||||||
flex: 3,
|
flex: 1,
|
||||||
flexDirection: "column",
|
flexDirection: "row",
|
||||||
alignContent: "center",
|
borderBottomColor: lineColor,
|
||||||
alignSelf: "center",
|
borderBottomWidth: 2,
|
||||||
alignItems: "center",
|
position: "relative",
|
||||||
height: "100%",
|
}}
|
||||||
backgroundColor: "white",
|
activeOpacity={1}
|
||||||
|
onPress={() => {
|
||||||
|
const payload = {
|
||||||
|
currentStation: station,
|
||||||
|
navigate,
|
||||||
|
goTo: "menu",
|
||||||
|
onExit: () => SheetManager.hide("StationDetailView"),
|
||||||
|
};
|
||||||
|
//@ts-ignore
|
||||||
|
SheetManager.show("StationDetailView", { payload });
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: lineColor,
|
flex: 3,
|
||||||
flexDirection: "row",
|
flexDirection: "column",
|
||||||
width: "100%",
|
|
||||||
alignContent: "center",
|
alignContent: "center",
|
||||||
|
alignSelf: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
height: 22,
|
height: "100%",
|
||||||
overflow: "hidden",
|
backgroundColor: "white",
|
||||||
paddingLeft: 5,
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<StationNumberMaker
|
|
||||||
currentStation={station}
|
|
||||||
singleSize={18}
|
|
||||||
useEach={true}
|
|
||||||
/>
|
|
||||||
<Text
|
|
||||||
style={{
|
|
||||||
fontSize: 14,
|
|
||||||
textAlignVertical: "center",
|
|
||||||
margin: 0,
|
|
||||||
padding: 0,
|
|
||||||
paddingLeft: 5,
|
|
||||||
flex: 1,
|
|
||||||
color: "white",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{station[0]?.Station_JP}
|
|
||||||
</Text>
|
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
|
backgroundColor: lineColor,
|
||||||
|
flexDirection: "row",
|
||||||
|
width: "100%",
|
||||||
|
alignContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
height: 22,
|
||||||
|
overflow: "hidden",
|
||||||
|
paddingLeft: 5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<StationNumberMaker
|
||||||
|
currentStation={station}
|
||||||
|
singleSize={18}
|
||||||
|
useEach={true}
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 14,
|
||||||
|
textAlignVertical: "center",
|
||||||
|
margin: 0,
|
||||||
|
padding: 0,
|
||||||
|
paddingLeft: 5,
|
||||||
|
flex: 1,
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{station[0]?.Station_JP}
|
||||||
|
</Text>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: "white",
|
||||||
|
width: 6,
|
||||||
|
borderLeftColor: lineColor,
|
||||||
|
borderTopColor: lineColor,
|
||||||
|
borderBottomColor: "white",
|
||||||
|
borderRightColor: "white",
|
||||||
|
borderBottomWidth: 18,
|
||||||
|
borderLeftWidth: 10,
|
||||||
|
borderRightWidth: 0,
|
||||||
|
borderTopWidth: 5,
|
||||||
|
height: 20,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
height: "100%",
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
|
flex: 1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Text style={{ fontSize: 18 }}>次の発車予定:</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flex: 5,
|
||||||
|
flexDirection: "column",
|
||||||
|
backgroundColor: "white",
|
||||||
|
borderTopWidth: 5,
|
||||||
|
borderTopColor: lineColor,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{selectedTrain.length > 0 ? (
|
||||||
|
selectedTrain.map((d) => (
|
||||||
|
<FixedStationBoxEachTrain
|
||||||
|
d={d}
|
||||||
|
station={station[0]}
|
||||||
|
displaySize={displaySize}
|
||||||
|
key={d.train + "-fixedStationBox"}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<View style={{ backgroundColor: "white", flex: 1 }}>
|
||||||
|
<Text style={{ fontSize: parseInt("11%") }}>
|
||||||
|
当駅を発着する走行中の列車はありません。
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
borderTopColor: lineColor,
|
||||||
|
borderTopWidth: 2,
|
||||||
|
}}
|
||||||
|
pointerEvents="box-none"
|
||||||
|
>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={{
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
onPress={() => {
|
||||||
|
setFixedPosition({ type: null, value: null });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
backgroundColor: lineColor,
|
||||||
|
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,
|
width: 6,
|
||||||
borderLeftColor: lineColor,
|
borderLeftColor: lineColor,
|
||||||
borderTopColor: lineColor,
|
borderTopColor: lineColor,
|
||||||
borderBottomColor: "white",
|
borderBottomColor: "#0000",
|
||||||
borderRightColor: "white",
|
borderRightColor: "#0000",
|
||||||
borderBottomWidth: 18,
|
borderBottomWidth: 26,
|
||||||
borderLeftWidth: 10,
|
borderLeftWidth: 10,
|
||||||
borderRightWidth: 0,
|
borderRightWidth: 0,
|
||||||
borderTopWidth: 5,
|
borderTopWidth: 0,
|
||||||
height: 20,
|
height: 26,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</View>
|
</TouchableOpacity>
|
||||||
<View
|
<TouchableOpacity
|
||||||
style={{
|
style={{
|
||||||
height: "100%",
|
flexDirection: "row",
|
||||||
backgroundColor: "white",
|
alignItems: "center",
|
||||||
flex: 1,
|
}}
|
||||||
|
onPress={() => {
|
||||||
|
LayoutAnimation.configureNext({
|
||||||
|
duration: 500,
|
||||||
|
update: { type: "spring", springDamping: 0.7 },
|
||||||
|
});
|
||||||
|
if (displaySize === 76) {
|
||||||
|
setDisplaySize(226);
|
||||||
|
} else {
|
||||||
|
setDisplaySize(76);
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Text style={{ fontSize: 18 }}>次の発車予定:</Text>
|
<View
|
||||||
</View>
|
style={{
|
||||||
</View>
|
backgroundColor: "#0000",
|
||||||
|
width: 6,
|
||||||
<View
|
borderLeftColor: "#0000",
|
||||||
style={{
|
borderTopColor: lineColor,
|
||||||
flex: 5,
|
borderBottomColor: "#0000",
|
||||||
flexDirection: "column",
|
borderRightColor: lineColor,
|
||||||
backgroundColor: "white",
|
borderBottomWidth: 26,
|
||||||
borderTopWidth: 5,
|
borderLeftWidth: 0,
|
||||||
borderTopColor: lineColor,
|
borderRightWidth: 10,
|
||||||
overflow: "hidden",
|
borderTopWidth: 0,
|
||||||
}}
|
height: 26,
|
||||||
>
|
}}
|
||||||
{selectedTrain.length > 0 ? (
|
/>
|
||||||
selectedTrain.map((d) => (
|
<View
|
||||||
<FixedStationBoxEachTrain
|
style={{
|
||||||
d={d}
|
flexDirection: "row",
|
||||||
station={station[0]}
|
alignItems: "center",
|
||||||
displaySize={displaySize}
|
backgroundColor: lineColor,
|
||||||
key={d.train + "-fixedStationBox"}
|
paddingHorizontal: 5,
|
||||||
|
height: 26,
|
||||||
|
}}
|
||||||
|
pointerEvents="none"
|
||||||
|
>
|
||||||
|
<Ionicons
|
||||||
|
name={displaySize == 76 ? "chevron-down" : "chevron-up"}
|
||||||
|
size={15}
|
||||||
|
color="white"
|
||||||
/>
|
/>
|
||||||
))
|
<Text
|
||||||
) : (
|
style={{
|
||||||
<View style={{ backgroundColor: "white", flex: 1 }}>
|
color: "white",
|
||||||
<Text style={{ fontSize: parseInt("11%") }}>
|
paddingRight: 5,
|
||||||
当駅を発着する走行中の列車はありません。
|
backgroundColor: lineColor,
|
||||||
|
fontSize: 15,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{displaySize == 76 ? "時刻表を展開する" : "時刻表を縮小する"}
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
)}
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
<TouchableOpacity
|
</View>
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
top: "100%",
|
|
||||||
left: 0,
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
}}
|
|
||||||
onPress={() => {
|
|
||||||
setFixedPosition({ type: null, value: null });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
backgroundColor: lineColor,
|
|
||||||
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: lineColor,
|
|
||||||
borderTopColor: lineColor,
|
|
||||||
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: lineColor,
|
|
||||||
borderBottomColor: "#0000",
|
|
||||||
borderRightColor: lineColor,
|
|
||||||
borderBottomWidth: 26,
|
|
||||||
borderLeftWidth: 0,
|
|
||||||
borderRightWidth: 10,
|
|
||||||
borderTopWidth: 0,
|
|
||||||
height: 26,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
backgroundColor: lineColor,
|
|
||||||
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: lineColor,
|
|
||||||
fontSize: 15,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{displaySize == 50 ? "時刻表を展開する" : "時刻表を縮小する"}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</TouchableOpacity>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -353,7 +362,7 @@ const FixedStationBoxEachTrain = ({ d, station, displaySize }) => {
|
|||||||
style={{
|
style={{
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
height: displaySize == 50 ? "33%" : "7.5%",
|
height: displaySize == 76 ? "33%" : "7.5%",
|
||||||
overflow: "visible",
|
overflow: "visible",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@@ -215,322 +215,331 @@ export const FixedTrain: FC<props> = ({
|
|||||||
}`;
|
}`;
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{ display: "flex", flexDirection: "column", flex: 1 }}
|
||||||
flex: 1,
|
pointerEvents="box-none"
|
||||||
flexDirection: displaySize === 50 ? "row" : "column",
|
|
||||||
backgroundColor: "black",
|
|
||||||
borderBottomColor: "black",
|
|
||||||
borderBottomWidth: 2,
|
|
||||||
position: "relative",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
flexDirection: displaySize === 50 ? "column" : "row",
|
|
||||||
flex: 1,
|
flex: 1,
|
||||||
backgroundColor: "white",
|
flexDirection: displaySize === 76 ? "row" : "column",
|
||||||
height: displaySize === 50 ? 50 : 200,
|
backgroundColor: "black",
|
||||||
overflow: "hidden",
|
//borderBottomColor: "black",
|
||||||
|
//borderBottomWidth: 2,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<View
|
<View
|
||||||
style={{ flex: displaySize === 50 ? 1 : 5, flexDirection: "row" }}
|
style={{
|
||||||
|
flexDirection: displaySize === 76 ? "column" : "row",
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: "white",
|
||||||
|
height: displaySize === 76 ? 50 : 200,
|
||||||
|
overflow: "hidden",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{ flex: displaySize === 76 ? 1 : 5, flexDirection: "row" }}
|
||||||
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
|
<View
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: customTrainType.color,
|
backgroundColor: customTrainType.color,
|
||||||
width: 10,
|
flexDirection: "row",
|
||||||
borderLeftColor: customTrainType.color,
|
alignContent: "center",
|
||||||
borderTopColor: lineColor,
|
alignSelf: "center",
|
||||||
borderBottomColor: lineColor,
|
alignItems: "center",
|
||||||
borderTopWidth: displaySize === 50 ? 14 : 50,
|
|
||||||
borderBottomWidth: displaySize === 50 ? 14 : 50,
|
|
||||||
borderLeftWidth: displaySize === 50 ? 10 : 30,
|
|
||||||
borderRightWidth: 0,
|
|
||||||
//height: displaySize === 50 ? 20 : 100,
|
|
||||||
height: "100%",
|
height: "100%",
|
||||||
}}
|
}}
|
||||||
></View>
|
>
|
||||||
</View>
|
<Image
|
||||||
<View
|
source={{ uri: customData.img }}
|
||||||
style={{
|
width={displaySize === 76 ? 14 : 23}
|
||||||
flexDirection: "row",
|
height={displaySize === 76 ? 17 : 26}
|
||||||
alignContent: "center",
|
style={{ margin: 5 }}
|
||||||
alignSelf: "center",
|
/>
|
||||||
height: "100%",
|
<View
|
||||||
backgroundColor: lineColor,
|
style={{
|
||||||
flex: 1,
|
flexDirection: displaySize === 76 ? "row" : "column",
|
||||||
}}
|
alignContent: "center",
|
||||||
>
|
alignSelf: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
maxWidth: displaySize === 76 ? 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 === 76 ? 60 : 200,
|
||||||
|
textAlignVertical: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{trainNameText}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
backgroundColor: customTrainType.color,
|
||||||
|
width: 10,
|
||||||
|
borderLeftColor: customTrainType.color,
|
||||||
|
borderTopColor: lineColor,
|
||||||
|
borderBottomColor: lineColor,
|
||||||
|
borderTopWidth: displaySize === 76 ? 14 : 50,
|
||||||
|
borderBottomWidth: displaySize === 76 ? 14 : 50,
|
||||||
|
borderLeftWidth: displaySize === 76 ? 10 : 30,
|
||||||
|
borderRightWidth: 0,
|
||||||
|
//height: displaySize === 76 ? 20 : 100,
|
||||||
|
height: "100%",
|
||||||
|
}}
|
||||||
|
></View>
|
||||||
|
</View>
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
flexDirection: "row",
|
flexDirection: "row",
|
||||||
alignContent: "center",
|
alignContent: "center",
|
||||||
alignSelf: "center",
|
alignSelf: "center",
|
||||||
alignItems: "center",
|
height: "100%",
|
||||||
|
backgroundColor: lineColor,
|
||||||
|
flex: 1,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<StationNumberMaker
|
<View
|
||||||
currentStation={station}
|
|
||||||
singleSize={18}
|
|
||||||
useEach={true}
|
|
||||||
/>
|
|
||||||
<Text
|
|
||||||
style={{
|
style={{
|
||||||
fontSize: customData?.ToData?.length > 4 ? 9 : 12,
|
flexDirection: "row",
|
||||||
color: "white",
|
alignContent: "center",
|
||||||
fontWeight: "bold",
|
alignSelf: "center",
|
||||||
textAlignVertical: "center",
|
alignItems: "center",
|
||||||
margin: 0,
|
|
||||||
padding: 0,
|
|
||||||
height: "100%",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{ToData}行
|
<StationNumberMaker
|
||||||
</Text>
|
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>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
{displaySize === 226 && (
|
||||||
{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
|
<View
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "white",
|
backgroundColor: "white",
|
||||||
width: 10,
|
width: 10,
|
||||||
borderLeftColor: "black",
|
borderLeftColor: "black",
|
||||||
borderTopColor: "black",
|
borderTopColor: lineColor,
|
||||||
borderBottomColor: "white",
|
borderBottomColor: "white",
|
||||||
borderRightColor: "white",
|
borderRightColor: "black",
|
||||||
borderTopWidth: 21,
|
borderTopWidth: 50,
|
||||||
borderBottomWidth: 0,
|
borderBottomWidth: 0,
|
||||||
borderLeftWidth: 0,
|
borderLeftWidth: 0,
|
||||||
borderRightWidth: 7,
|
borderRightWidth: 20,
|
||||||
}}
|
}}
|
||||||
></View>
|
></View>
|
||||||
)}
|
)}
|
||||||
</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={{
|
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",
|
backgroundColor: "black",
|
||||||
fontSize: 15,
|
flex: displaySize === 76 ? 1 : 4,
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{displaySize == 50 ? "列車情報展開" : "列車情報縮小"}
|
<Text
|
||||||
</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 === 76 && (
|
||||||
|
<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>
|
</View>
|
||||||
</TouchableOpacity>
|
<CurrentPositionBox
|
||||||
|
train={train}
|
||||||
|
lineColor={lineColor}
|
||||||
|
trainDataWithThrough={untilStationData}
|
||||||
|
isSmall={displaySize === 76}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flexDirection: "row",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
borderTopColor: "black",
|
||||||
|
borderTopWidth: 2,
|
||||||
|
}}
|
||||||
|
pointerEvents="box-none"
|
||||||
|
>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={{
|
||||||
|
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={{
|
||||||
|
flexDirection: "row",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
onPress={() => {
|
||||||
|
LayoutAnimation.configureNext({
|
||||||
|
duration: 200,
|
||||||
|
update: { type: "easeInEaseOut", springDamping: 0.4 },
|
||||||
|
});
|
||||||
|
if (displaySize === 76) {
|
||||||
|
setDisplaySize(226);
|
||||||
|
} else {
|
||||||
|
setDisplaySize(76);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Ionicons
|
||||||
|
name={displaySize == 76 ? "chevron-down" : "chevron-up"}
|
||||||
|
size={15}
|
||||||
|
color="white"
|
||||||
|
/>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
color: "white",
|
||||||
|
paddingRight: 5,
|
||||||
|
backgroundColor: "black",
|
||||||
|
fontSize: 15,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{displaySize == 76 ? "列車情報展開" : "列車情報縮小"}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Reference in New Issue
Block a user