新松山駅表示を追加
This commit is contained in:
harukin-expo-dev-env
parent
e62ae0fc2d
commit
09e123222f
@ -99,10 +99,96 @@ export default function Sign(props) {
|
||||
setNexStation(returnData[1]);
|
||||
};
|
||||
const lottieRef = useRef();
|
||||
const isMatsuyama = currentStation[0].StationNumber == "Y55";
|
||||
//const isMatsuyama = true;
|
||||
if (isMatsuyama) {
|
||||
return (
|
||||
<TouchableOpacity style={styleSheet.外枠} onPress={oP} onLongPress={oLP}>
|
||||
<StationNumberMaker currentStation={currentStation} />
|
||||
<StationNameArea currentStation={currentStation} />
|
||||
<LottieView
|
||||
autoPlay
|
||||
loop
|
||||
style={{
|
||||
width: wp("80%"),
|
||||
height: (wp("80%") / 20) * 9,
|
||||
backgroundColor: "#fff",
|
||||
}}
|
||||
source={{ uri: "https://cdn.lottielab.com/l/D4m3dmEqsjVN77.json?s" }}
|
||||
/>
|
||||
<StationNumberMaker
|
||||
currentStation={currentStation}
|
||||
isMatsuyama={isMatsuyama}
|
||||
/>
|
||||
<StationNameArea
|
||||
currentStation={currentStation}
|
||||
isMatsuyama={isMatsuyama}
|
||||
/>
|
||||
{isCurrentStation ? (
|
||||
<TouchableOpacity style={{ position: "absolute", right: 0, top: 0 }}>
|
||||
<MaterialCommunityIcons
|
||||
name="crosshairs-gps"
|
||||
style={{ padding: 5 }}
|
||||
color="#2E94BB"
|
||||
size={30}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<TouchableOpacity
|
||||
style={{ position: "absolute", right: -15, top: -20 }}
|
||||
onPress={() => {
|
||||
if (testButtonStatus) {
|
||||
const otherData = favoriteStation.filter((d) => {
|
||||
const compare = JSON.stringify(d);
|
||||
const current = JSON.stringify(currentStation);
|
||||
if (compare !== current) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
AS.setItem("favoriteStation", JSON.stringify(otherData));
|
||||
setFavoriteStation(otherData);
|
||||
} else {
|
||||
let ret = favoriteStation;
|
||||
ret.push(currentStation);
|
||||
AS.setItem("favoriteStation", JSON.stringify(ret));
|
||||
setFavoriteStation(ret);
|
||||
}
|
||||
setTestButtonStatus(!testButtonStatus);
|
||||
}}
|
||||
>
|
||||
<LottieDelayView
|
||||
progress={testButtonStatus ? 1 : 0}
|
||||
speed={1.4}
|
||||
style={{ width: 80, height: 80 }}
|
||||
source={require("../../assets/939-star.json")}
|
||||
lottieRef={lottieRef}
|
||||
loop={false}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
<Text style={styleSheet.JRStyle}>JR</Text>
|
||||
<View style={styleSheet.下帯B} />
|
||||
<View style={styleSheet.下帯内容B}>
|
||||
<NexPreStationLine
|
||||
preStation={preStation}
|
||||
nexStation={nexStation}
|
||||
isMatsuyama={isMatsuyama}
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<TouchableOpacity style={styleSheet.外枠} onPress={oP} onLongPress={oLP}>
|
||||
<StationNumberMaker
|
||||
currentStation={currentStation}
|
||||
isMatsuyama={isMatsuyama}
|
||||
/>
|
||||
<StationNameArea
|
||||
currentStation={currentStation}
|
||||
isMatsuyama={isMatsuyama}
|
||||
/>
|
||||
{isCurrentStation ? (
|
||||
<TouchableOpacity style={{ position: "absolute", right: 0, top: 0 }}>
|
||||
<MaterialCommunityIcons
|
||||
@ -151,11 +237,16 @@ export default function Sign(props) {
|
||||
<Text style={styleSheet.JRStyle}>JR</Text>
|
||||
<View style={styleSheet.下帯} />
|
||||
<View style={styleSheet.下帯内容}>
|
||||
<NexPreStationLine preStation={preStation} nexStation={nexStation} />
|
||||
<NexPreStationLine
|
||||
preStation={preStation}
|
||||
nexStation={nexStation}
|
||||
isMatsuyama={isMatsuyama}
|
||||
/>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const LottieDelayView = ({
|
||||
progress,
|
||||
@ -187,20 +278,26 @@ const LottieDelayView = ({
|
||||
/>
|
||||
);
|
||||
};
|
||||
const NexPreStationLine = ({ nexStation, preStation }) => {
|
||||
const NexPreStationLine = ({ nexStation, preStation, isMatsuyama }) => {
|
||||
return (
|
||||
<View style={styleSheet.下枠フレーム}>
|
||||
<View style={styleSheet.下枠フレーム}>
|
||||
{preStation ? (
|
||||
<>
|
||||
<Text style={styleSheet.下枠左右マーク}>◀</Text>
|
||||
{!isMatsuyama && <Text style={styleSheet.下枠左右マーク}>◀</Text>}
|
||||
{preStation.StationNumber ? (
|
||||
<View style={styleSheet.下枠駅ナンバー}>
|
||||
<View
|
||||
style={
|
||||
isMatsuyama
|
||||
? styleSheet.下枠駅ナンバーB
|
||||
: styleSheet.下枠駅ナンバー
|
||||
}
|
||||
>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text
|
||||
style={{
|
||||
fontSize: parseInt("10%"),
|
||||
color: "white",
|
||||
color: isMatsuyama ? "black" : "white",
|
||||
}}
|
||||
>
|
||||
{preStation.StationNumber}
|
||||
@ -227,9 +324,20 @@ const NexPreStationLine = ({ nexStation, preStation }) => {
|
||||
ss={{ flex: 1, alignItems: "flex-end" }}
|
||||
/>
|
||||
{nexStation.StationNumber ? (
|
||||
<View style={styleSheet.下枠駅ナンバー}>
|
||||
<View
|
||||
style={
|
||||
isMatsuyama
|
||||
? styleSheet.下枠駅ナンバーB
|
||||
: styleSheet.下枠駅ナンバー
|
||||
}
|
||||
>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text style={{ fontSize: parseInt("10%"), color: "white" }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: parseInt("10%"),
|
||||
color: isMatsuyama ? "black" : "white",
|
||||
}}
|
||||
>
|
||||
{nexStation.StationNumber}
|
||||
</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
@ -237,7 +345,7 @@ const NexPreStationLine = ({ nexStation, preStation }) => {
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<Text style={styleSheet.下枠左右マーク}>▶</Text>
|
||||
{!isMatsuyama && <Text style={styleSheet.下枠左右マーク}>▶</Text>}
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
@ -247,11 +355,6 @@ const NexPreStationLine = ({ nexStation, preStation }) => {
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const styleSheet = {
|
||||
外枠: {
|
||||
width: wp("80%"),
|
||||
@ -268,6 +371,14 @@ const styleSheet = {
|
||||
height: "30%",
|
||||
backgroundColor: "#2E94BB",
|
||||
},
|
||||
下帯B: {
|
||||
position: "absolute",
|
||||
bottom: "0%",
|
||||
left: "0%",
|
||||
width: "100%",
|
||||
height: "25%",
|
||||
backgroundColor: "#454545",
|
||||
},
|
||||
JRStyle: {
|
||||
position: "absolute",
|
||||
top: "2%",
|
||||
@ -284,6 +395,14 @@ const styleSheet = {
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
},
|
||||
下帯内容B: {
|
||||
position: "absolute",
|
||||
bottom: "0%",
|
||||
height: "25%",
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
},
|
||||
下枠フレーム: {
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
@ -307,4 +426,15 @@ const styleSheet = {
|
||||
borderWidth: parseInt("2%"),
|
||||
borderRadius: parseInt("100%"),
|
||||
},
|
||||
下枠駅ナンバーB: {
|
||||
alignContent: "center",
|
||||
alignItems: "center",
|
||||
width: wp("7%"),
|
||||
height: wp("7%"),
|
||||
margin: wp("2%"),
|
||||
borderColor: "black",
|
||||
backgroundColor: "white",
|
||||
borderWidth: parseInt("2%"),
|
||||
borderRadius: parseInt("100%"),
|
||||
},
|
||||
};
|
||||
|
||||
@ -2,7 +2,24 @@ import React, { CSSProperties } from "react";
|
||||
import { Text, TextStyle, View, ViewStyle } from "react-native";
|
||||
|
||||
export const StationNameArea = (props) => {
|
||||
const { currentStation } = props;
|
||||
const { currentStation, isMatsuyama } = props;
|
||||
|
||||
const stationNameAreaOverWrap: ViewStyle = {
|
||||
position: "absolute",
|
||||
top: "10%",
|
||||
alignContent: "center",
|
||||
flexDirection: "row",
|
||||
};
|
||||
const Station_JP: TextStyle = {
|
||||
fontWeight: "bold",
|
||||
fontSize: parseInt("40%"),
|
||||
color: isMatsuyama ? "white" : "#005170",
|
||||
};
|
||||
const Station_EN: TextStyle = {
|
||||
fontWeight: "bold",
|
||||
fontSize: parseInt("15%"),
|
||||
color: isMatsuyama ? "white" : "#005170",
|
||||
};
|
||||
return (
|
||||
<View style={stationNameAreaOverWrap}>
|
||||
<View style={{ flex: 1 }} />
|
||||
@ -15,19 +32,3 @@ export const StationNameArea = (props) => {
|
||||
</View>
|
||||
);
|
||||
};
|
||||
const stationNameAreaOverWrap: ViewStyle = {
|
||||
position: "absolute",
|
||||
top: "10%",
|
||||
alignContent: "center",
|
||||
flexDirection: "row",
|
||||
};
|
||||
const Station_JP: TextStyle = {
|
||||
fontWeight: "bold",
|
||||
fontSize: parseInt("40%"),
|
||||
color: "#005170",
|
||||
};
|
||||
const Station_EN: TextStyle = {
|
||||
fontWeight: "bold",
|
||||
fontSize: parseInt("15%"),
|
||||
color: "#005170",
|
||||
};
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
|
||||
import React from "react";
|
||||
import { Text, View } from "react-native";
|
||||
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
|
||||
import lineColorList from "../../assets/originData/lineColorList";
|
||||
|
||||
export const StationNumberMaker = (props) => {
|
||||
const { currentStation, isMatsuyama } = props;
|
||||
const getTop = (array: number[], index: number) => {
|
||||
if (array.length == 1) return 20;
|
||||
else if (index == 0) return 5;
|
||||
else if (index == 1) return 35;
|
||||
else return 20;
|
||||
};
|
||||
return props.currentStation
|
||||
return currentStation
|
||||
.filter((d) => (d.StationNumber ? true : false))
|
||||
.map((d, index, array) => {
|
||||
const lineID = d.StationNumber.slice(0, 1);
|
||||
@ -27,6 +27,7 @@ export const StationNumberMaker = (props) => {
|
||||
width: wp("10%"),
|
||||
height: wp("10%"),
|
||||
borderColor: lineColorList[lineID],
|
||||
backgroundColor: "white",
|
||||
borderWidth: parseInt("3%"),
|
||||
borderRadius: parseInt("100%"),
|
||||
}}
|
||||
@ -39,6 +40,7 @@ export const StationNumberMaker = (props) => {
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
textAlign: "center",
|
||||
color: "black",
|
||||
}}
|
||||
>
|
||||
{lineID + "\n" + lineName}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user