98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
import lineColorList from "@/assets/originData/lineColorList";
|
||
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
|
||
import { useStationList, StationProps } from "@/stateBox/useStationList";
|
||
import { useEffect, useState } from "react";
|
||
import { Text, TouchableOpacity, View } from "react-native";
|
||
|
||
export const FixedStation = ({ stationID }) => {
|
||
const { fixedPosition, setFixedPosition } = useCurrentTrain();
|
||
const { getStationDataFromId } = useStationList();
|
||
const [station, setStation] = useState<StationProps[]>([]);
|
||
useEffect(() => {
|
||
const data = getStationDataFromId(stationID);
|
||
setStation(data);
|
||
}, [stationID]);
|
||
console.log(station);
|
||
const lineColor =
|
||
station.length > 0
|
||
? lineColorList[station[0]?.StationNumber.slice(0, 1)]
|
||
: "white";
|
||
return (
|
||
<TouchableOpacity
|
||
style={{ flex: 1, flexDirection: "column" }}
|
||
onPress={() => {
|
||
setFixedPosition({ type: null, value: null });
|
||
}}
|
||
>
|
||
<View style={{ flex: 1, flexDirection: "row" }}>
|
||
<View
|
||
style={{
|
||
paddingHorizontal: 5,
|
||
backgroundColor: lineColor,
|
||
flexDirection: "row",
|
||
}}
|
||
>
|
||
{station.map((s) => {
|
||
if (s.StationNumber === null) return null;
|
||
return (
|
||
<View
|
||
key={s.StationNumber}
|
||
style={{
|
||
flexDirection: "column",
|
||
alignItems: "center",
|
||
borderColor: lineColor,
|
||
backgroundColor: "white",
|
||
borderWidth: 1,
|
||
borderRadius: 30,
|
||
width: 25,
|
||
height: 25,
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 10, margin: 0, padding: 0 }}>
|
||
{s.StationNumber?.slice(0, 1)}
|
||
</Text>
|
||
<Text style={{ fontSize: 10, margin: 0, padding: 0 }}>
|
||
{s.StationNumber?.slice(1)}
|
||
</Text>
|
||
</View>
|
||
);
|
||
})}
|
||
</View>
|
||
<View
|
||
style={{
|
||
backgroundColor: lineColor,
|
||
}}
|
||
>
|
||
<Text style={{ fontSize: 20 }}>{station[0]?.Station_JP}</Text>
|
||
</View>
|
||
<View
|
||
style={{
|
||
backgroundColor: lineColor,
|
||
width: 10,
|
||
borderLeftColor: lineColor,
|
||
borderBottomColor: "white",
|
||
borderBottomWidth: 25,
|
||
borderLeftWidth: 10,
|
||
borderRightWidth: 0,
|
||
borderTopWidth: 0,
|
||
}}
|
||
></View>
|
||
<View style={{ backgroundColor: "white", flex: 1 }}>
|
||
<Text style={{ fontSize: 20 }}>駅情報固定中</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<View
|
||
style={{
|
||
flex: 1,
|
||
flexDirection: "row",
|
||
backgroundColor: lineColor,
|
||
}}
|
||
>
|
||
<View style={{ backgroundColor: "white", flex: 1 }}>
|
||
<Text style={{ fontSize: 20 }}>次：15:00 快速マリン 岡山</Text>
|
||
</View>
|
||
</View>
|
||
</TouchableOpacity>
|
||
);
|
||
}; |