493 lines
14 KiB
JavaScript
493 lines
14 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import {
|
|
StatusBar,
|
|
View,
|
|
LayoutAnimation,
|
|
ScrollView,
|
|
Linking,
|
|
Text,
|
|
TouchableOpacity,
|
|
} from "react-native";
|
|
import AutoHeightImage from "react-native-auto-height-image";
|
|
import { FontAwesome, Foundation, Ionicons } from "@expo/vector-icons";
|
|
import ActionSheet from "react-native-actions-sheet";
|
|
import Sign from "../../components/駅名表/Sign";
|
|
import { useInterval } from "../../lib/useInterval";
|
|
|
|
import { TicketBox } from "../atom/TicketBox";
|
|
import {
|
|
widthPercentageToDP as wp,
|
|
heightPercentageToDP as hp,
|
|
} from "react-native-responsive-screen";
|
|
import lineColorList from "../../assets/originData/lineColorList";
|
|
import { getPDFViewURL } from "../../lib/getPdfViewURL";
|
|
|
|
export const StationDeteilView = (props) => {
|
|
const {
|
|
StationBoardAcSR,
|
|
currentStation,
|
|
originalStationList,
|
|
favoriteStation,
|
|
setFavoriteStation,
|
|
busAndTrainData,
|
|
navigate,
|
|
onExit,
|
|
} = props;
|
|
const [trainBus, setTrainBus] = useState();
|
|
useEffect(() => {
|
|
if (!currentStation) return () => {};
|
|
const data = busAndTrainData.filter((d) => {
|
|
return d.name === currentStation[0].Station_JP;
|
|
});
|
|
if (data.length == 0) {
|
|
setTrainBus();
|
|
}
|
|
setTrainBus(data[0]);
|
|
}, [currentStation]);
|
|
const info =
|
|
currentStation &&
|
|
(currentStation[0].StationTimeTable.match(".pdf")
|
|
? getPDFViewURL(currentStation[0].StationTimeTable)
|
|
: currentStation[0].StationTimeTable);
|
|
return (
|
|
<ActionSheet
|
|
ref={StationBoardAcSR}
|
|
gestureEnabled
|
|
CustomHeaderComponent={<></>}
|
|
>
|
|
<View
|
|
key={currentStation}
|
|
style={{
|
|
backgroundColor: "white",
|
|
borderRadius: 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>
|
|
{currentStation && (
|
|
<View
|
|
style={{
|
|
margin: 10,
|
|
marginHorizontal: wp("10%"),
|
|
}}
|
|
>
|
|
<Sign
|
|
currentStation={currentStation}
|
|
originalStationList={originalStationList}
|
|
favoriteStation={favoriteStation}
|
|
setFavoriteStation={setFavoriteStation}
|
|
oP={() => {
|
|
navigate("howto", {
|
|
info,
|
|
onExit,
|
|
});
|
|
StationBoardAcSR.current?.hide();
|
|
}}
|
|
oLP={() => Linking.openURL(currentStation[0].StationTimeTable)}
|
|
/>
|
|
</View>
|
|
)}
|
|
{currentStation &&
|
|
currentStation.map((d) => (
|
|
<NexPreStationLine
|
|
currentStation={d}
|
|
originalStationList={originalStationList}
|
|
favoriteStation={favoriteStation}
|
|
setFavoriteStation={setFavoriteStation}
|
|
/>
|
|
))}
|
|
{currentStation &&
|
|
currentStation[0].JrHpUrl &&
|
|
currentStation[0].StationNumber != "M12" && (
|
|
<駅構内図 //高松/阿波池田&後免&須崎kounai.png児島例外/
|
|
oP={() => {
|
|
navigate("howto", {
|
|
info:
|
|
currentStation[0].JrHpUrl.replace("/index.html", "/") +
|
|
"/kounai_map.html",
|
|
onExit,
|
|
});
|
|
StationBoardAcSR.current?.hide();
|
|
}}
|
|
oLP={() => {
|
|
Linking.openURL(
|
|
currentStation[0].JrHpUrl.replace("/index.html", "/") +
|
|
"/kounai_map.html"
|
|
);
|
|
}}
|
|
uri={currentStation[0].JrHpUrl.replace("/index.html", "/")}
|
|
/>
|
|
)}
|
|
{currentStation && (
|
|
<View style={{ flexDirection: "row" }}>
|
|
{!currentStation[0].JrHpUrl || (
|
|
<TicketBox
|
|
backgroundColor={"#AD7FA8"}
|
|
icon={<Foundation name="web" color="white" size={50} />}
|
|
flex={1}
|
|
onPressButton={() => {
|
|
navigate("howto", {
|
|
info: currentStation[0].JrHpUrl,
|
|
onExit,
|
|
});
|
|
StationBoardAcSR.current?.hide();
|
|
}}
|
|
onLongPressButton={() =>
|
|
Linking.openURL(currentStation[0].JrHpUrl)
|
|
}
|
|
>
|
|
web
|
|
</TicketBox>
|
|
)}
|
|
{!currentStation[0].StationTimeTable || (
|
|
<TicketBox
|
|
backgroundColor={"#8F5902"}
|
|
icon={<FontAwesome name="table" color="white" size={50} />}
|
|
flex={1}
|
|
onPressButton={() => {
|
|
navigate("howto", {
|
|
info,
|
|
onExit,
|
|
});
|
|
StationBoardAcSR.current?.hide();
|
|
}}
|
|
onLongPressButton={() =>
|
|
Linking.openURL(currentStation[0].StationTimeTable)
|
|
}
|
|
>
|
|
時刻表
|
|
</TicketBox>
|
|
)}
|
|
{!currentStation[0].StationMap || (
|
|
<TicketBox
|
|
backgroundColor={"#888A85"}
|
|
icon={<Ionicons name="map" color="white" size={50} />}
|
|
flex={1}
|
|
onPressButton={() =>
|
|
Linking.openURL(currentStation[0].StationMap)
|
|
}
|
|
>
|
|
Map
|
|
</TicketBox>
|
|
)}
|
|
{!trainBus || (
|
|
<TicketBox
|
|
backgroundColor={"#CE5C00"}
|
|
icon={<Ionicons name="bus" color="white" size={50} />}
|
|
flex={1}
|
|
onPressButton={() => {
|
|
navigate("howto", {
|
|
info: trainBus.address,
|
|
onExit,
|
|
});
|
|
StationBoardAcSR.current?.hide();
|
|
}}
|
|
onLongPressButton={() => Linking.openURL(trainBus.address)}
|
|
>
|
|
並行バス
|
|
</TicketBox>
|
|
)}
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
</ActionSheet>
|
|
);
|
|
};
|
|
|
|
const StationName = (props) => {
|
|
const { stringData, ss } = props;
|
|
return (
|
|
<View style={ss}>
|
|
<Text style={styleSheet.下枠駅名}>{stringData.Station_JP}</Text>
|
|
<Text style={styleSheet.下枠駅名}>{stringData.Station_EN}</Text>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const NexPreStationLine = ({
|
|
currentStation,
|
|
originalStationList,
|
|
oP,
|
|
favoriteStation,
|
|
setFavoriteStation,
|
|
}) => {
|
|
const [preStation, setPreStation] = useState();
|
|
const [nexStation, setNexStation] = useState();
|
|
const [lineName, setLineName] = useState();
|
|
|
|
useEffect(() => {
|
|
getPreNextStation(currentStation);
|
|
}, [currentStation]);
|
|
|
|
useEffect(() => {
|
|
if (!currentStation) return () => {};
|
|
getPreNextStation(currentStation);
|
|
}, []);
|
|
const getPreNextStation = (now) => {
|
|
const lineList = [
|
|
"予讃線(高松-松山間)[Y]",
|
|
"予讃線(松山-宇和島間)[U]",
|
|
"予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]",
|
|
"土讃線(多度津-高知間)[D]",
|
|
"土讃線(高知-窪川間)[K]",
|
|
"高徳線(高松-徳島間)[T]",
|
|
"徳島線(徳島-阿波池田)[B]",
|
|
"鳴門線(池谷-鳴門間)[N]",
|
|
"瀬戸大橋線(宇多津-児島間)[M]",
|
|
];
|
|
let returnData;
|
|
lineList.forEach((d) => {
|
|
let cache = originalStationList[d].findIndex(
|
|
(data) => data.StationNumber == now.StationNumber
|
|
);
|
|
if (cache != -1) {
|
|
returnData = [
|
|
originalStationList[d][cache - 1],
|
|
originalStationList[d][cache + 1],
|
|
d,
|
|
];
|
|
}
|
|
});
|
|
setPreStation(returnData[0]);
|
|
setNexStation(returnData[1]);
|
|
setLineName(returnData[2]);
|
|
};
|
|
return (
|
|
<View
|
|
style={{
|
|
height: 50,
|
|
backgroundColor: lineName
|
|
? lineColorList[lineName.split("[")[1].replace("]", "")]
|
|
: "red",
|
|
flexDirection: "row",
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<View style={styleSheet.下枠フレーム}>
|
|
{preStation ? (
|
|
<>
|
|
<Text style={styleSheet.下枠左右マーク}>◀</Text>
|
|
{preStation.StationNumber ? (
|
|
<View style={styleSheet.下枠駅ナンバー}>
|
|
<View style={{ flex: 1 }} />
|
|
<Text
|
|
style={{
|
|
fontSize: parseInt("10%"),
|
|
color: "white",
|
|
}}
|
|
>
|
|
{preStation.StationNumber}
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</View>
|
|
) : (
|
|
<></>
|
|
)}
|
|
<StationName
|
|
stringData={preStation}
|
|
ss={{ flex: 1, alignItems: "flex-start" }}
|
|
/>
|
|
</>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</View>
|
|
|
|
<Text
|
|
style={{
|
|
fontSize: parseInt("10%"),
|
|
color: "white",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
{lineName &&
|
|
lineName
|
|
.split("(")
|
|
.map((d, index) => (index == 1 ? "(" + d : d))
|
|
.join("\n")}
|
|
</Text>
|
|
<View style={styleSheet.下枠フレーム}>
|
|
{nexStation ? (
|
|
<>
|
|
<StationName
|
|
stringData={nexStation}
|
|
ss={{ flex: 1, alignItems: "flex-end" }}
|
|
/>
|
|
{nexStation.StationNumber ? (
|
|
<View style={styleSheet.下枠駅ナンバー}>
|
|
<View style={{ flex: 1 }} />
|
|
<Text style={{ fontSize: parseInt("15%"), color: "white" }}>
|
|
{nexStation.StationNumber}
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</View>
|
|
) : (
|
|
<></>
|
|
)}
|
|
<Text style={styleSheet.下枠左右マーク}>▶</Text>
|
|
</>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const 駅構内図 = (props) => {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<>
|
|
<TouchableOpacity
|
|
style={{
|
|
height: 50,
|
|
backgroundColor: "#888A85",
|
|
flexDirection: "column",
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
margin: 2,
|
|
}}
|
|
onPress={props.oP}
|
|
onLongPress={props.oLP}
|
|
//onPress={() => setOpen(!open)}
|
|
>
|
|
<View style={{ flex: 1 }} />
|
|
<Text
|
|
style={{
|
|
color: "white",
|
|
textAlign: "center",
|
|
textAlignVertical: "center",
|
|
flex: 1,
|
|
}}
|
|
>
|
|
{open ? "駅構内図を非表示" : "駅構内図を表示"}
|
|
</Text>
|
|
<View style={{ flex: 1 }} />
|
|
</TouchableOpacity>
|
|
<View>
|
|
{open && (
|
|
<>
|
|
<AutoHeightImage
|
|
source={{ uri: props.uri + "images/kounai.gif" }}
|
|
resizeMode="contain"
|
|
width={wp("100%")}
|
|
/>
|
|
<AutoHeightImage
|
|
source={{ uri: props.uri + "images/kounai.png" }}
|
|
resizeMode="contain"
|
|
width={wp("100%")}
|
|
/>
|
|
<AutoHeightImage
|
|
source={{ uri: props.uri + "images/kounai_1f.gif" }}
|
|
resizeMode="contain"
|
|
width={wp("100%")}
|
|
/>
|
|
<AutoHeightImage
|
|
source={{ uri: props.uri + "images/kounai_2f.png" }}
|
|
resizeMode="contain"
|
|
width={wp("100%")}
|
|
/>
|
|
</>
|
|
)}
|
|
</View>
|
|
</>
|
|
);
|
|
};
|
|
|
|
const styleSheet = {
|
|
外枠: {
|
|
width: wp("80%"),
|
|
height: (wp("80%") / 20) * 9,
|
|
borderColor: "#2E94BB",
|
|
borderWidth: 1,
|
|
backgroundColor: "white",
|
|
},
|
|
下帯: {
|
|
position: "absolute",
|
|
bottom: "0%",
|
|
left: "0%",
|
|
width: "100%",
|
|
height: "30%",
|
|
backgroundColor: "#2E94BB",
|
|
},
|
|
JRStyle: {
|
|
position: "absolute",
|
|
top: "2%",
|
|
left: "2%",
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("30%"),
|
|
color: "#2E94BB",
|
|
},
|
|
stationNameAreaOverWrap: {
|
|
position: "absolute",
|
|
top: "10%",
|
|
alignContent: "center",
|
|
flexDirection: "row",
|
|
},
|
|
Station_JP: {
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("40%"),
|
|
color: "#005170",
|
|
},
|
|
Station_EN: {
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("15%"),
|
|
color: "#005170",
|
|
},
|
|
下帯内容: {
|
|
position: "absolute",
|
|
bottom: "0%",
|
|
height: "30%",
|
|
width: "100%",
|
|
alignItems: "center",
|
|
flexDirection: "column",
|
|
},
|
|
下枠フレーム: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignContent: "center",
|
|
height: wp("10%"),
|
|
},
|
|
下枠左右マーク: {
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("20%"),
|
|
color: "white",
|
|
paddingHorizontal: 10,
|
|
textAlignVertical: "center",
|
|
},
|
|
下枠駅ナンバー: {
|
|
alignContent: "center",
|
|
alignItems: "center",
|
|
width: wp("8%"),
|
|
height: wp("8%"),
|
|
margin: wp("1%"),
|
|
borderColor: "white",
|
|
borderWidth: parseInt("2%"),
|
|
borderRadius: parseInt("100%"),
|
|
},
|
|
下枠駅名: {
|
|
fontWeight: "bold",
|
|
fontSize: parseInt("15%"),
|
|
color: "white",
|
|
flex: 1,
|
|
paddingHorizontal: 0,
|
|
marginVertical: 0,
|
|
textAlignVertical: "center",
|
|
},
|
|
};
|