Merge commit '3f8a753abbd5fdde1cc4988d1e763b4dd11d12e8' into develop
This commit is contained in:
harukin-DeskMini
commit
12934f0963
429
menu.js
429
menu.js
@ -87,9 +87,14 @@ export default function Menu(props) {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!(selectedCurrentStation < favoriteStation.length)) {
|
if (!(selectedCurrentStation < favoriteStation.length)) {
|
||||||
|
if (favoriteStation.length == 0) {
|
||||||
|
setSelectedCurrentStation(0);
|
||||||
|
carouselRef.current.snapToItem(0);
|
||||||
|
} else {
|
||||||
setSelectedCurrentStation(favoriteStation.length - 1);
|
setSelectedCurrentStation(favoriteStation.length - 1);
|
||||||
carouselRef.current.snapToItem(favoriteStation.length - 1);
|
carouselRef.current.snapToItem(favoriteStation.length - 1);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}, [favoriteStation]);
|
}, [favoriteStation]);
|
||||||
|
|
||||||
const [stationName, setStationName] = useState(undefined);
|
const [stationName, setStationName] = useState(undefined);
|
||||||
@ -162,24 +167,11 @@ export default function Menu(props) {
|
|||||||
>
|
>
|
||||||
<StatusbarDetect />
|
<StatusbarDetect />
|
||||||
<TitleBar />
|
<TitleBar />
|
||||||
<ScrollView ref={scrollRef} scrollEnabled={isScroll}>
|
<FixedContent
|
||||||
<TopMenuButton />
|
scrollRef={scrollRef}
|
||||||
<TextBox
|
isScroll={isScroll}
|
||||||
backgroundColor="#0099CC"
|
navigate={navigate}
|
||||||
flex={1}
|
|
||||||
onPressButton={() =>
|
|
||||||
Linking.openURL(
|
|
||||||
"https://www.jr-shikoku.co.jp/02_information/suspension/sp/"
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
|
|
||||||
新型コロナウイルスに関するお知らせ
|
|
||||||
</Text>
|
|
||||||
<Text style={{ color: "white", fontSize: 15 }}>
|
|
||||||
列車の運行計画・混雑状況・感染症対策への取り組み
|
|
||||||
</Text>
|
|
||||||
</TextBox>
|
|
||||||
<Carousel
|
<Carousel
|
||||||
ref={carouselRef}
|
ref={carouselRef}
|
||||||
layout={"default"}
|
layout={"default"}
|
||||||
@ -229,6 +221,217 @@ export default function Menu(props) {
|
|||||||
loadingDelayData={loadingDelayData}
|
loadingDelayData={loadingDelayData}
|
||||||
delayData={delayData}
|
delayData={delayData}
|
||||||
/>
|
/>
|
||||||
|
</FixedContent>
|
||||||
|
<StationDeteilView
|
||||||
|
StationBoardAcSR={StationBoardAcSR}
|
||||||
|
currentStation={
|
||||||
|
originalStationList &&
|
||||||
|
(currentStation
|
||||||
|
? [currentStation, ...locationAndFavorite]
|
||||||
|
: locationAndFavorite)[selectedCurrentStation]
|
||||||
|
}
|
||||||
|
originalStationList={originalStationList}
|
||||||
|
favoriteStation={favoriteStation}
|
||||||
|
setFavoriteStation={setFavoriteStation}
|
||||||
|
busAndTrainData={busAndTrainData}
|
||||||
|
/>
|
||||||
|
<JRSTraInfo
|
||||||
|
JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
|
||||||
|
getTime={getTime}
|
||||||
|
loadingDelayData={loadingDelayData}
|
||||||
|
setLoadingDelayData={setLoadingDelayData}
|
||||||
|
delayData={delayData}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const TitleBar = () => {
|
||||||
|
return (
|
||||||
|
<View style={{ alignItems: "center" }}>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
|
||||||
|
>
|
||||||
|
<AutoHeightImage
|
||||||
|
source={require("./assets/Header.png")}
|
||||||
|
resizeMode="contain"
|
||||||
|
width={wp("100%")}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const TopMenuButton = () => {
|
||||||
|
const buttonList = [
|
||||||
|
{
|
||||||
|
backgroundColor: "#F89038",
|
||||||
|
icon: "train-car",
|
||||||
|
onPress: () =>
|
||||||
|
Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"),
|
||||||
|
title: "駅・鉄道情報",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
backgroundColor: "#EA4752",
|
||||||
|
icon: "google-spreadsheet",
|
||||||
|
onPress: () =>
|
||||||
|
Linking.openURL(
|
||||||
|
"https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
|
||||||
|
),
|
||||||
|
title: "運賃表",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
backgroundColor: "#91C31F",
|
||||||
|
icon: "clipboard-list-outline",
|
||||||
|
onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"),
|
||||||
|
title: "予約",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<View style={{ flexDirection: "row" }}>
|
||||||
|
{buttonList.map((d, index) => (
|
||||||
|
<UsefulBox
|
||||||
|
backgroundColor={d.backgroundColor}
|
||||||
|
icon={d.icon}
|
||||||
|
flex={1}
|
||||||
|
onPressButton={d.onPress}
|
||||||
|
key={index + d.icon}
|
||||||
|
>
|
||||||
|
{d.title}
|
||||||
|
</UsefulBox>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const JRSTraInfoBox = (props) => {
|
||||||
|
const {
|
||||||
|
JRSTraInfoEXAcSR,
|
||||||
|
getTime,
|
||||||
|
setLoadingDelayData,
|
||||||
|
loadingDelayData,
|
||||||
|
delayData,
|
||||||
|
} = props;
|
||||||
|
const styles = {
|
||||||
|
touch: {
|
||||||
|
backgroundColor: "#0099CC",
|
||||||
|
borderRadius: 5,
|
||||||
|
margin: 10,
|
||||||
|
borderColor: "black",
|
||||||
|
borderWidth: 2,
|
||||||
|
overflow: "hidden",
|
||||||
|
},
|
||||||
|
scroll: {
|
||||||
|
backgroundColor: "#0099CC",
|
||||||
|
borderRadius: 5,
|
||||||
|
maxHeight: 300,
|
||||||
|
},
|
||||||
|
bottom: {
|
||||||
|
position: "absolute",
|
||||||
|
top: 250,
|
||||||
|
alignItems: "center",
|
||||||
|
width: "100%",
|
||||||
|
height: 50,
|
||||||
|
backgroundColor: "#007FCC88",
|
||||||
|
},
|
||||||
|
box: {
|
||||||
|
padding: 10,
|
||||||
|
backgroundColor: "white",
|
||||||
|
borderBottomLeftRadius: 5,
|
||||||
|
borderBottomRightRadius: 5,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={JRSTraInfoEXAcSR.current?.setModalVisible}
|
||||||
|
style={styles.touch}
|
||||||
|
>
|
||||||
|
<ScrollView scrollEnabled={false} style={styles.scroll}>
|
||||||
|
<View
|
||||||
|
style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
|
||||||
|
>
|
||||||
|
<Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
|
||||||
|
列車遅延速報EX
|
||||||
|
</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
|
||||||
|
{getTime
|
||||||
|
? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
|
||||||
|
":" +
|
||||||
|
getTime.toLocaleTimeString("ja-JP").split(":")[1]
|
||||||
|
: NaN}
|
||||||
|
</Text>
|
||||||
|
<Ionicons
|
||||||
|
name="reload"
|
||||||
|
color="white"
|
||||||
|
size={30}
|
||||||
|
style={{ margin: 5 }}
|
||||||
|
onPress={() => {
|
||||||
|
LayoutAnimation.easeInEaseOut();
|
||||||
|
setLoadingDelayData(true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View style={styles.box}>
|
||||||
|
{loadingDelayData ? (
|
||||||
|
<View style={{ alignItems: "center" }}>
|
||||||
|
<LottieView
|
||||||
|
autoPlay
|
||||||
|
loop
|
||||||
|
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
|
||||||
|
source={require("./assets/51690-loading-diamonds.json")}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
) : delayData ? (
|
||||||
|
delayData.map((d, index) => {
|
||||||
|
let data = d.split(" ");
|
||||||
|
return (
|
||||||
|
<View style={{ flexDirection: "row" }} key={data[1] + "key"}>
|
||||||
|
<Text style={{ flex: 15, fontSize: 20 }}>
|
||||||
|
{data[0].replace("\n", "")}
|
||||||
|
</Text>
|
||||||
|
<Text style={{ flex: 5, fontSize: 20 }}>{data[1]}</Text>
|
||||||
|
<Text style={{ flex: 6, fontSize: 20 }}>{data[3]}</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<Text>現在、5分以上の遅れはありません。</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</ScrollView>
|
||||||
|
<View style={styles.bottom}>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||||||
|
詳細を見る
|
||||||
|
</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const FixedContent = (props) => {
|
||||||
|
return (
|
||||||
|
<ScrollView ref={props.scrollRef} scrollEnabled={props.isScroll}>
|
||||||
|
<TopMenuButton />
|
||||||
|
<TextBox
|
||||||
|
backgroundColor="#0099CC"
|
||||||
|
flex={1}
|
||||||
|
onPressButton={() =>
|
||||||
|
Linking.openURL(
|
||||||
|
"https://www.jr-shikoku.co.jp/02_information/suspension/sp/"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
|
||||||
|
新型コロナウイルスに関するお知らせ
|
||||||
|
</Text>
|
||||||
|
<Text style={{ color: "white", fontSize: 15 }}>
|
||||||
|
列車の運行計画・混雑状況・感染症対策への取り組み
|
||||||
|
</Text>
|
||||||
|
</TextBox>
|
||||||
|
{props.children}
|
||||||
|
|
||||||
<View style={{ flexDirection: "row" }}>
|
<View style={{ flexDirection: "row" }}>
|
||||||
<TicketBox
|
<TicketBox
|
||||||
@ -282,9 +485,7 @@ export default function Menu(props) {
|
|||||||
backgroundColor="#0099CC"
|
backgroundColor="#0099CC"
|
||||||
flex={1}
|
flex={1}
|
||||||
onPressButton={() =>
|
onPressButton={() =>
|
||||||
Linking.openURL(
|
Linking.openURL("https://www.jr-shikoku.co.jp/sp/index.html#menu-box")
|
||||||
"https://www.jr-shikoku.co.jp/sp/index.html#menu-box"
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||||||
@ -493,7 +694,7 @@ export default function Menu(props) {
|
|||||||
<TextBox
|
<TextBox
|
||||||
backgroundColor="black"
|
backgroundColor="black"
|
||||||
flex={1}
|
flex={1}
|
||||||
onPressButton={() => navigate("setting")}
|
onPressButton={() => props.navigate("setting")}
|
||||||
>
|
>
|
||||||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||||||
アプリの設定
|
アプリの設定
|
||||||
@ -509,191 +710,5 @@ export default function Menu(props) {
|
|||||||
source={require("./assets/トレインビジョン関係/1.svg")}
|
source={require("./assets/トレインビジョン関係/1.svg")}
|
||||||
/> */}
|
/> */}
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
<StationDeteilView
|
|
||||||
StationBoardAcSR={StationBoardAcSR}
|
|
||||||
currentStation={
|
|
||||||
originalStationList &&
|
|
||||||
(currentStation
|
|
||||||
? [currentStation, ...locationAndFavorite]
|
|
||||||
: locationAndFavorite)[selectedCurrentStation]
|
|
||||||
}
|
|
||||||
originalStationList={originalStationList}
|
|
||||||
favoriteStation={favoriteStation}
|
|
||||||
setFavoriteStation={setFavoriteStation}
|
|
||||||
busAndTrainData={busAndTrainData}
|
|
||||||
/>
|
|
||||||
<JRSTraInfo
|
|
||||||
JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
|
|
||||||
getTime={getTime}
|
|
||||||
loadingDelayData={loadingDelayData}
|
|
||||||
setLoadingDelayData={setLoadingDelayData}
|
|
||||||
delayData={delayData}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const TitleBar = () => {
|
|
||||||
return (
|
|
||||||
<View style={{ alignItems: "center" }}>
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
|
|
||||||
>
|
|
||||||
<AutoHeightImage
|
|
||||||
source={require("./assets/Header.png")}
|
|
||||||
resizeMode="contain"
|
|
||||||
width={wp("100%")}
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const TopMenuButton = () => {
|
|
||||||
const buttonList = [
|
|
||||||
{
|
|
||||||
backgroundColor: "#F89038",
|
|
||||||
icon: "train-car",
|
|
||||||
onPress: () =>
|
|
||||||
Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"),
|
|
||||||
title: "駅・鉄道情報",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
backgroundColor: "#EA4752",
|
|
||||||
icon: "google-spreadsheet",
|
|
||||||
onPress: () =>
|
|
||||||
Linking.openURL(
|
|
||||||
"https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
|
|
||||||
),
|
|
||||||
title: "運賃表",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
backgroundColor: "#91C31F",
|
|
||||||
icon: "clipboard-list-outline",
|
|
||||||
onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"),
|
|
||||||
title: "予約",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
return (
|
|
||||||
<View style={{ flexDirection: "row" }}>
|
|
||||||
{buttonList.map((d, index) => (
|
|
||||||
<UsefulBox
|
|
||||||
backgroundColor={d.backgroundColor}
|
|
||||||
icon={d.icon}
|
|
||||||
flex={1}
|
|
||||||
onPressButton={d.onPress}
|
|
||||||
key={index + d.icon}
|
|
||||||
>
|
|
||||||
{d.title}
|
|
||||||
</UsefulBox>
|
|
||||||
))}
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const JRSTraInfoBox = (props) => {
|
|
||||||
const {
|
|
||||||
JRSTraInfoEXAcSR,
|
|
||||||
getTime,
|
|
||||||
setLoadingDelayData,
|
|
||||||
loadingDelayData,
|
|
||||||
delayData,
|
|
||||||
} = props;
|
|
||||||
const styles = {
|
|
||||||
touch: {
|
|
||||||
backgroundColor: "#0099CC",
|
|
||||||
borderRadius: 5,
|
|
||||||
margin: 10,
|
|
||||||
borderColor: "black",
|
|
||||||
borderWidth: 2,
|
|
||||||
overflow: "hidden",
|
|
||||||
},
|
|
||||||
scroll: {
|
|
||||||
backgroundColor: "#0099CC",
|
|
||||||
borderRadius: 5,
|
|
||||||
maxHeight: 300,
|
|
||||||
},
|
|
||||||
bottom: {
|
|
||||||
position: "absolute",
|
|
||||||
top: 250,
|
|
||||||
alignItems: "center",
|
|
||||||
width: "100%",
|
|
||||||
height: 50,
|
|
||||||
backgroundColor: "#007FCC88",
|
|
||||||
},
|
|
||||||
box: {
|
|
||||||
padding: 10,
|
|
||||||
backgroundColor: "white",
|
|
||||||
borderBottomLeftRadius: 5,
|
|
||||||
borderBottomRightRadius: 5,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={JRSTraInfoEXAcSR.current?.setModalVisible}
|
|
||||||
style={styles.touch}
|
|
||||||
>
|
|
||||||
<ScrollView scrollEnabled={false} style={styles.scroll}>
|
|
||||||
<View
|
|
||||||
style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
|
|
||||||
>
|
|
||||||
<Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
|
|
||||||
列車遅延速報EX
|
|
||||||
</Text>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
<Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
|
|
||||||
{getTime
|
|
||||||
? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
|
|
||||||
":" +
|
|
||||||
getTime.toLocaleTimeString("ja-JP").split(":")[1]
|
|
||||||
: NaN}
|
|
||||||
</Text>
|
|
||||||
<Ionicons
|
|
||||||
name="reload"
|
|
||||||
color="white"
|
|
||||||
size={30}
|
|
||||||
style={{ margin: 5 }}
|
|
||||||
onPress={() => {
|
|
||||||
LayoutAnimation.easeInEaseOut();
|
|
||||||
setLoadingDelayData(true);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
<View style={styles.box}>
|
|
||||||
{loadingDelayData ? (
|
|
||||||
<View style={{ alignItems: "center" }}>
|
|
||||||
<LottieView
|
|
||||||
autoPlay
|
|
||||||
loop
|
|
||||||
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
|
|
||||||
source={require("./assets/51690-loading-diamonds.json")}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
) : delayData ? (
|
|
||||||
delayData.map((d, index) => {
|
|
||||||
let data = d.split(" ");
|
|
||||||
return (
|
|
||||||
<View style={{ flexDirection: "row" }} key={data[1] + "key"}>
|
|
||||||
<Text style={{ flex: 15, fontSize: 20 }}>
|
|
||||||
{data[0].replace("\n", "")}
|
|
||||||
</Text>
|
|
||||||
<Text style={{ flex: 5, fontSize: 20 }}>{data[1]}</Text>
|
|
||||||
<Text style={{ flex: 6, fontSize: 20 }}>{data[3]}</Text>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
<Text>現在、5分以上の遅れはありません。</Text>
|
|
||||||
)}
|
|
||||||
</View>
|
|
||||||
</ScrollView>
|
|
||||||
<View style={styles.bottom}>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
|
||||||
詳細を見る
|
|
||||||
</Text>
|
|
||||||
<View style={{ flex: 1 }} />
|
|
||||||
</View>
|
|
||||||
</TouchableOpacity>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user