列車位置のレイアウトを調整
This commit is contained in:
harukin-expo-dev-env
@@ -9,6 +9,8 @@ import { customTrainDataDetector } from "../custom-train-data";
|
||||
import { getStringConfig, typeID } from "@/lib/getStringConfig";
|
||||
import { getTrainType } from "@/lib/getTrainType";
|
||||
import Constants from "expo-constants";
|
||||
import { trainPosition } from "@/lib/trainPositionTextArray";
|
||||
import { StationNumberMaker } from "../駅名表/StationNumberMaker";
|
||||
|
||||
export const FixedPositionBox = () => {
|
||||
const { fixedPosition, setFixedPosition } = useCurrentTrain();
|
||||
@@ -19,20 +21,18 @@ export const FixedPositionBox = () => {
|
||||
position: "absolute",
|
||||
top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
|
||||
borderRadius: 5,
|
||||
zIndex: 500,
|
||||
zIndex: 1500,
|
||||
width: "100%",
|
||||
height: 50,
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<View style={{ width: 60 }} />
|
||||
{fixedPosition.type === "station" && (
|
||||
<FixedStation stationID={fixedPosition.value} />
|
||||
)}
|
||||
{fixedPosition.type === "train" && (
|
||||
<FixedTrain trainID={fixedPosition.value} />
|
||||
)}
|
||||
<View style={{ width: 60 }} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
@@ -161,14 +161,14 @@ export const FixedTrain = ({ trainID }) => {
|
||||
}
|
||||
};
|
||||
const [train, setTrain] = useState<{
|
||||
Index: string;
|
||||
num: string;
|
||||
delay: string;
|
||||
Pos: string;
|
||||
PosNum: string;
|
||||
Direction: number;
|
||||
Type: string;
|
||||
Line: string;
|
||||
Pos?: string;
|
||||
Direction?: number;
|
||||
Index?: number;
|
||||
Line?: string;
|
||||
PosNum?: number;
|
||||
Type?: string;
|
||||
delay?: string | number;
|
||||
num?: string;
|
||||
}>(null);
|
||||
const [customData, setCustomData] = useState<{
|
||||
ToData: string;
|
||||
@@ -208,62 +208,221 @@ export const FixedTrain = ({ trainID }) => {
|
||||
const x = getStringConfig(customData.type, customData.TrainNumber);
|
||||
setStringConfig(x);
|
||||
}, [customData]);
|
||||
|
||||
const { getStationDataFromName } = useStationList();
|
||||
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";
|
||||
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;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={{ flex: 1, flexDirection: "row" }}
|
||||
style={{ flex: 1, flexDirection: "row", backgroundColor: "black" }}
|
||||
onPress={() => {
|
||||
setFixedPosition({ type: null, value: null });
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1, flexDirection: "row" }}>
|
||||
<View
|
||||
style={{
|
||||
padding: 5,
|
||||
backgroundColor: getTrainType(customData.type).color,
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Image source={{ uri: customData.img }} width={30} height={35} />
|
||||
<View
|
||||
style={{ flexDirection: "column", flex: 1, backgroundColor: "white" }}
|
||||
>
|
||||
<View style={{ flex: 1, flexDirection: "row" }}>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "column",
|
||||
backgroundColor: getTrainType(customData.type, true).color,
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
<Image
|
||||
source={{ uri: customData.img }}
|
||||
width={14}
|
||||
height={17}
|
||||
style={{ margin: 5 }}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
fontSize: 15,
|
||||
fontFamily: stringConfig[1] ? "JR-Nishi" : undefined,
|
||||
fontWeight: !stringConfig[1] ? "bold" : undefined,
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
>
|
||||
{stringConfig[0]}
|
||||
</Text>
|
||||
<Text style={{ fontSize: 10 }}>{ToData}行</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
fontFamily: stringConfig[1] ? "JR-Nishi" : undefined,
|
||||
fontWeight: !stringConfig[1] ? "bold" : undefined,
|
||||
marginTop: stringConfig[1] ? 3 : 0,
|
||||
color: "white",
|
||||
textAlignVertical: "center",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{stringConfig[0]}
|
||||
</Text>
|
||||
{customData.trainName && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: customData?.trainName?.length > 6 ? 9 : 14,
|
||||
color: "white",
|
||||
maxWidth: 70,
|
||||
textAlignVertical: "center",
|
||||
}}
|
||||
>
|
||||
{customData.trainName}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: getTrainType(customData.type, true).color,
|
||||
width: 10,
|
||||
borderLeftColor: getTrainType(customData.type, true).color,
|
||||
borderTopColor: lineColor,
|
||||
borderBottomColor: lineColor,
|
||||
borderTopWidth: 14,
|
||||
borderBottomWidth: 14,
|
||||
borderLeftWidth: 10,
|
||||
borderRightWidth: 0,
|
||||
}}
|
||||
></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={20}
|
||||
useEach={true}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
textAlignVertical: "center",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{ToData}行
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: getTrainType(customData.type).color,
|
||||
width: 10,
|
||||
borderLeftColor: getTrainType(customData.type).color,
|
||||
borderTopColor: "white",
|
||||
borderBottomColor: "white",
|
||||
borderTopWidth: 25,
|
||||
borderBottomWidth: 25,
|
||||
borderLeftWidth: 10,
|
||||
borderRightWidth: 0,
|
||||
backgroundColor: "black",
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
}}
|
||||
></View>
|
||||
<View style={{ backgroundColor: "white", flex: 1 }}>
|
||||
<Text style={{ fontSize: 20 }}>列車情報追跡中</Text>
|
||||
<Text style={{ fontSize: 20 }}>次は どこですか</Text>
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
fontStyle: "italic",
|
||||
color: "white",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
次は 新居浜
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: 10,
|
||||
borderLeftColor: "black",
|
||||
borderTopColor: "black",
|
||||
borderBottomColor: "white",
|
||||
borderRightColor: "white",
|
||||
borderTopWidth: 25,
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 10,
|
||||
flex: 1,
|
||||
}}
|
||||
></View>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{ flex: 1, backgroundColor: "white", flexDirection: "row" }}>
|
||||
<View style={{ flexDirection: "column", height: "100%" }}>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: 10,
|
||||
borderLeftColor: lineColor,
|
||||
borderTopColor: lineColor,
|
||||
borderBottomColor: "white",
|
||||
borderRightColor: "white",
|
||||
borderTopWidth: 25,
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 10,
|
||||
flex: 1,
|
||||
}}
|
||||
></View>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: 10,
|
||||
borderLeftColor: "white",
|
||||
borderTopColor: "white",
|
||||
borderBottomColor: "white",
|
||||
borderRightColor: "white",
|
||||
borderTopWidth: 25,
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 10,
|
||||
flex: 1,
|
||||
}}
|
||||
></View>
|
||||
</View>
|
||||
<Text style={{ color: "black", fontSize: 10, alignSelf: "flex-end" }}>
|
||||
現在地：
|
||||
</Text>
|
||||
<Text style={{ color: "black", fontSize: 30, alignSelf: "center" }}>
|
||||
{marginText == "→" ? firstText + marginText + secondText : firstText}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user