Compare commits

...

3 Commits

Author SHA1 Message Date
harukin-OneMix4
4f540d89c7 LEDと看板のロジック変更 2023-03-02 19:42:46 +09:00
harukin-OneMix4
2e535c2685 locationAndFavoriteの位置変更 2023-03-02 18:53:08 +09:00
harukin-OneMix4
23927a3f16 menuの固定データを分割 2023-03-02 18:31:59 +09:00
5 changed files with 350 additions and 342 deletions

View File

@ -34,7 +34,6 @@ export default function FavoriteList({
{favoriteStation
.filter((d) => d[0].StationMap)
.map((currentStation) => {
console.log(currentStation);
return (
<ListItem
onPress={() => {

View File

@ -138,7 +138,6 @@ export default function LED_vision(props) {
});
return { train: d, time: a.time, lastStation: a.lastStation };
});
console.log(returnData);
return returnData.sort((a, b) => {
switch (true) {
case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]):

View File

@ -112,7 +112,6 @@ export default function Sign(props) {
setFavoriteStation(otherData);
} else {
let ret = favoriteStation;
console.log(currentStation);
ret.push(currentStation);
AS.setItem("favoriteStation", JSON.stringify(ret));
setFavoriteStation(ret);
@ -164,7 +163,6 @@ const LottieDelayView = ({
ref={lottieRef}
loop={loop}
onAnimationFinish={(isCanceled) => {
console.log("finish");
setProgressState(progress);
}}
/>

687
menu.js
View File

@ -1,4 +1,4 @@
import React, { useRef, useState, useEffect } from "react";
import React, { useRef, useState, useEffect, useMemo } from "react";
import Carousel from "react-native-snap-carousel";
import {
Platform,
@ -47,7 +47,7 @@ export default function Menu(props) {
const StationBoardAcSR = useRef(null);
const navigation = useNavigation();
//位置情報
//ここから位置情報
const [location, setLocation] = useState(null);
const [locationStatus, setLocationStatus] = useState(null);
useEffect(() => {
@ -70,30 +70,16 @@ export default function Menu(props) {
if (locationStatus !== "granted") return () => {};
getCurrentPosition();
}, 5000);
//ここまで位置情報
//基礎駅情報取得
const [originalStationList, setOriginalStationList] = useState();
useEffect(() => {
getStationList().then(setOriginalStationList);
}, []);
const [locationAndFavorite, setLocationAndFavorite] = useState([]);
useEffect(() => {
if (!favoriteStation) return () => {};
const data = favoriteStation.filter((d) =>
JSON.stringify(d) === JSON.stringify(currentStation) ? false : true
);
setLocationAndFavorite(data);
}, [currentStation, favoriteStation]);
useEffect(() => {
if (!(selectedCurrentStation < favoriteStation.length)) {
setSelectedCurrentStation(favoriteStation.length - 1);
carouselRef.current.snapToItem(favoriteStation.length - 1);
}
}, [favoriteStation]);
const [stationName, setStationName] = useState(undefined);
const [currentStation, setCurrentStation] = useState(undefined);
//ここから現在地付近の駅情報整理
const [currentAreaStation, setCurrentAreaStation] = useState([]);
useEffect(() => {
if (!location) return () => {};
if (!originalStationList) return () => {};
@ -123,15 +109,43 @@ export default function Menu(props) {
}, []);
LayoutAnimation.easeInEaseOut();
if (returnDataBase.length) {
let currentStation = currentStation == undefined ? [] : currentStation;
if (currentStation.toString() != returnDataBase.toString()) {
setCurrentStation(returnDataBase);
if (currentAreaStation.toString() != returnDataBase.toString()) {
setCurrentAreaStation(returnDataBase);
}
} else {
setCurrentStation(undefined);
setCurrentAreaStation([]);
}
}, [location, originalStationList]);
//Favoriteから現在地を排除し現在地を最初に持ってくるバージョン
//const [locationAndFavorite, setLocationAndFavorite] = useState([]);
const locationAndFavorite = useMemo(() => {
const data = favoriteStation.filter((d) =>
JSON.stringify(d) === JSON.stringify(currentAreaStation) ? false : true
);
return [...currentAreaStation, ...data];
}, [currentAreaStation, favoriteStation]);
// useEffect(() => {
// if (!favoriteStation) return () => {};
// const data = favoriteStation.filter((d) =>
// JSON.stringify(d) === JSON.stringify(currentAreaStation) ? false : true
// );
// setLocationAndFavorite([...currentAreaStation, ...data]);
// }, [currentAreaStation, favoriteStation]);
const [selectedCurrentStation, setSelectedCurrentStation] = useState(0);
useEffect(() => {
console.log(selectedCurrentStation > locationAndFavorite.length);
if (locationAndFavorite.length == 0) {
//carouselRef.current.snapToItem(0);
setSelectedCurrentStation(0);
}
if (selectedCurrentStation > locationAndFavorite.length - 1) {
//carouselRef.current.snapToItem(locationAndFavorite.length - 1);
setSelectedCurrentStation(locationAndFavorite.length - 1);
}
}, [locationAndFavorite]);
const [count, setCount] = useState(0);
const [delayData, setDelayData] = useState(undefined);
const [getTime, setGetTime] = useState(new Date());
@ -139,7 +153,6 @@ export default function Menu(props) {
const carouselRef = useRef();
const scrollRef = useRef();
const [isScroll, setIsScroll] = useState(true);
const [selectedCurrentStation, setSelectedCurrentStation] = useState(0);
useEffect(() => {
fetch(
@ -162,33 +175,15 @@ export default function Menu(props) {
>
<StatusbarDetect />
<TitleBar />
<ScrollView ref={scrollRef} scrollEnabled={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>
<FixedContent
scrollRef={scrollRef}
isScroll={isScroll}
navigate={navigate}
>
<Carousel
ref={carouselRef}
layout={"default"}
data={
originalStationList &&
(currentStation
? [currentStation, ...locationAndFavorite]
: locationAndFavorite)
}
data={originalStationList && locationAndFavorite}
sliderWidth={wp("100%")}
itemWidth={wp("80%")}
enableMomentum
@ -211,13 +206,11 @@ export default function Menu(props) {
);
}}
/>
{locationAndFavorite.length != 0 && originalStationList && (
{originalStationList && locationAndFavorite[selectedCurrentStation] && (
<LED_vision
station={
originalStationList &&
(currentStation
? [currentStation, ...locationAndFavorite]
: locationAndFavorite)[selectedCurrentStation][0]
locationAndFavorite[selectedCurrentStation][0]
}
navigate={navigate}
/>
@ -229,293 +222,11 @@ export default function Menu(props) {
loadingDelayData={loadingDelayData}
delayData={delayData}
/>
<View style={{ flexDirection: "row" }}>
<TicketBox
backgroundColor={"#AD7FA8"}
icon={<Foundation name="ticket" color="white" size={50} />}
flex={1}
onPressButton={() =>
Linking.openURL("https://www.jr-eki.com/ticket/brand")
}
>
トクトク切符
</TicketBox>
<TicketBox
backgroundColor={"#8F5902"}
icon={<FontAwesome name="first-order" color="white" size={50} />}
flex={1}
onPressButton={() =>
Linking.openURL(
"https://www.jr-shikoku.co.jp/01_trainbus/event_train/sp/"
)
}
>
観光列車
</TicketBox>
<TicketBox
backgroundColor={"#888A85"}
icon={<Ionicons name="flag" color="white" size={50} />}
flex={1}
onPressButton={() =>
Linking.openURL("https://www.jr-eki.com/tour/brand")
}
>
旅行ツアー
</TicketBox>
</View>
<TextBox
backgroundColor="#0099CC"
flex={1}
onPressButton={() =>
Linking.openURL("https://www.jr-eki.com/smart-eki/index.html")
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
スマートえきちゃん
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
JR四国のチケットレススマホアプリです
</Text>
</TextBox>
<TextBox
backgroundColor="#0099CC"
flex={1}
onPressButton={() =>
Linking.openURL(
"https://www.jr-shikoku.co.jp/sp/index.html#menu-box"
)
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
臨時列車などのお知らせ
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
区間縮小計画運休イベント季節臨時列車など
</Text>
</TextBox>
<TextBox
backgroundColor="#0099CC"
flex={1}
onPressButton={() =>
Linking.openURL("https://www.jr-shikoku.co.jp/03_news/press/")
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
ニュースリリース
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
公式プレス記事はこちら
</Text>
</TextBox>
<TextBox
backgroundColor="#0099CC"
flex={1}
onPressButton={() =>
Linking.openURL("https://www.jr-shikoku.co.jp/teiki/")
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
定期運賃計算
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
通常/学生/快てき等はこちら
</Text>
</TextBox>
<TextBox
backgroundColor="#0099CC"
flex={1}
onPressButton={() =>
Linking.openURL("https://www.jr-shikoku.co.jp/04_company/group/sp/")
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
JR四国のお店サービス
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
JR四国グループの施設をご案内
</Text>
</TextBox>
<View style={{ flexDirection: "row" }}>
<TouchableOpacity
style={{
flex: 1,
backgroundColor: "#729FCF",
borderColor: "#0099CC",
padding: 10,
borderWidth: 1,
margin: 2,
alignItems: "center",
}}
onPress={() => Linking.openURL("https://www.jr-odekake.net/smt/")}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
時刻運賃計算
</Text>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
(マイダイヤ)
</Text>
<Foundation name="yen" color="white" size={50} />
<Text style={{ color: "white" }}>
マイダイヤはJR西日本提供のサービスです
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 1,
backgroundColor: "#8AE234",
borderColor: "#0099CC",
padding: 10,
borderWidth: 1,
margin: 2,
alignItems: "center",
}}
onPress={() => Linking.openURL("tel:0570-00-4592")}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
JR四国案内センター
</Text>
<Foundation name="telephone" color="white" size={50} />
<Text style={{ color: "white" }}>0570-00-4592</Text>
<Text style={{ color: "white" }}>(8:00~20:00 年中無休)</Text>
<Text style={{ color: "white" }}>(通話料がかかります)</Text>
</TouchableOpacity>
</View>
<View
style={{
backgroundColor: "#0099CC",
borderRadius: 10,
margin: 10,
borderColor: "black",
borderWidth: 2,
}}
>
<View
style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
>
<MaterialCommunityIcons
name="twitter"
style={{ padding: 5 }}
color="white"
size={30}
/>
<Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
JR四国公式Twitter一族
</Text>
</View>
<View
style={{
padding: 10,
backgroundColor: "white",
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
}}
>
{((data) =>
data.map((d) => (
<ListItem onPress={() => Linking.openURL(d.url)}>
<Text>{d.name}</Text>
<View style={{ flex: 1 }} />
<Icon name="chevron-right" size={20} />
</ListItem>
)))([
{
url: "https://twitter.com/JRshikoku_eigyo",
name: "JR四国営業部【公式】",
},
{
url: "https://twitter.com/JRshikoku_tokyo",
name: "JR四国 東京営業情報【公式】",
},
{
url: "https://twitter.com/JRshikoku_osaka",
name: "JR四国 大阪営業部【公式】",
},
{
url: "https://twitter.com/jr_shikoku_info",
name: "JR四国列車運行情報【公式】",
},
{
url: "https://twitter.com/Smile_Eki_Chan",
name: "すまいるえきちゃん♡JR四国【公式】",
},
{
url: "https://twitter.com/jrs_matsuyama",
name: "JR四国 松山駅 【公式】",
},
{
url: "https://twitter.com/jrshikoku_kochi",
name: "JR四国 高知駅【公式】",
},
{
url: "https://twitter.com/jr_tokust",
name: "JR四国 徳島駅【公式】",
},
{
url: "https://twitter.com/jrshikoku_uwjm",
name: "JR四国 宇和島駅【公式】",
},
{
url: "https://twitter.com/JRshikoku_wkoch",
name: "JR四国 ワープ高知支店【公式】",
},
{
url: "https://twitter.com/jrshikoku_nihaw",
name: "JR四国 ワープ新居浜営業所【公式】",
},
{
url: "https://twitter.com/Yoakemonogatari",
name: "志国土佐 時代の夜明けのものがたり【公式】",
},
])}
</View>
</View>
<Text style={{ fontWeight: "bold", fontSize: 20 }}>
このアプリについて
</Text>
<Text>
このアプリはXprocess(HARUKIN)が製作しているJR四国の完全非公式アシストアプリケーションですこのアプリに関することでのJR四国公式へ問合せすることはお控えください以下のTwitterよりお願いします
</Text>
<TextBox
backgroundColor="#CC0000"
flex={1}
onPressButton={() =>
Linking.openURL("https://twitter.com/Xprocess_main")
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
XprocessのTwitter
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
制作運営のTwitterです
</Text>
</TextBox>
<TextBox
backgroundColor="black"
flex={1}
onPressButton={() => navigate("setting")}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
アプリの設定
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
アプリの設定画面を表示します
</Text>
</TextBox>
{/*
<SvgUri
width="200"
height="200"
source={require("./assets/トレインビジョン関係/1.svg")}
/> */}
</ScrollView>
</FixedContent>
<StationDeteilView
StationBoardAcSR={StationBoardAcSR}
currentStation={
originalStationList &&
(currentStation
? [currentStation, ...locationAndFavorite]
: locationAndFavorite)[selectedCurrentStation]
originalStationList && locationAndFavorite[selectedCurrentStation]
}
originalStationList={originalStationList}
favoriteStation={favoriteStation}
@ -697,3 +408,305 @@ const JRSTraInfoBox = (props) => {
</TouchableOpacity>
);
};
const FixedContent = (props) => (
<>
<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" }}>
<TicketBox
backgroundColor={"#AD7FA8"}
icon={<Foundation name="ticket" color="white" size={50} />}
flex={1}
onPressButton={() =>
Linking.openURL("https://www.jr-eki.com/ticket/brand")
}
>
トクトク切符
</TicketBox>
<TicketBox
backgroundColor={"#8F5902"}
icon={<FontAwesome name="first-order" color="white" size={50} />}
flex={1}
onPressButton={() =>
Linking.openURL(
"https://www.jr-shikoku.co.jp/01_trainbus/event_train/sp/"
)
}
>
観光列車
</TicketBox>
<TicketBox
backgroundColor={"#888A85"}
icon={<Ionicons name="flag" color="white" size={50} />}
flex={1}
onPressButton={() =>
Linking.openURL("https://www.jr-eki.com/tour/brand")
}
>
旅行ツアー
</TicketBox>
</View>
<TextBox
backgroundColor="#0099CC"
flex={1}
onPressButton={() =>
Linking.openURL("https://www.jr-eki.com/smart-eki/index.html")
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
スマートえきちゃん
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
JR四国のチケットレススマホアプリです
</Text>
</TextBox>
<TextBox
backgroundColor="#0099CC"
flex={1}
onPressButton={() =>
Linking.openURL("https://www.jr-shikoku.co.jp/sp/index.html#menu-box")
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
臨時列車などのお知らせ
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
区間縮小計画運休イベント季節臨時列車など
</Text>
</TextBox>
<TextBox
backgroundColor="#0099CC"
flex={1}
onPressButton={() =>
Linking.openURL("https://www.jr-shikoku.co.jp/03_news/press/")
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
ニュースリリース
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
公式プレス記事はこちら
</Text>
</TextBox>
<TextBox
backgroundColor="#0099CC"
flex={1}
onPressButton={() =>
Linking.openURL("https://www.jr-shikoku.co.jp/teiki/")
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
定期運賃計算
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
通常/学生/快てき等はこちら
</Text>
</TextBox>
<TextBox
backgroundColor="#0099CC"
flex={1}
onPressButton={() =>
Linking.openURL("https://www.jr-shikoku.co.jp/04_company/group/sp/")
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
JR四国のお店サービス
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
JR四国グループの施設をご案内
</Text>
</TextBox>
<View style={{ flexDirection: "row" }}>
<TouchableOpacity
style={{
flex: 1,
backgroundColor: "#729FCF",
borderColor: "#0099CC",
padding: 10,
borderWidth: 1,
margin: 2,
alignItems: "center",
}}
onPress={() => Linking.openURL("https://www.jr-odekake.net/smt/")}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
時刻運賃計算
</Text>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
(マイダイヤ)
</Text>
<Foundation name="yen" color="white" size={50} />
<Text style={{ color: "white" }}>
マイダイヤはJR西日本提供のサービスです
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
flex: 1,
backgroundColor: "#8AE234",
borderColor: "#0099CC",
padding: 10,
borderWidth: 1,
margin: 2,
alignItems: "center",
}}
onPress={() => Linking.openURL("tel:0570-00-4592")}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
JR四国案内センター
</Text>
<Foundation name="telephone" color="white" size={50} />
<Text style={{ color: "white" }}>0570-00-4592</Text>
<Text style={{ color: "white" }}>(8:00~20:00 年中無休)</Text>
<Text style={{ color: "white" }}>(通話料がかかります)</Text>
</TouchableOpacity>
</View>
<View
style={{
backgroundColor: "#0099CC",
borderRadius: 10,
margin: 10,
borderColor: "black",
borderWidth: 2,
}}
>
<View
style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
>
<MaterialCommunityIcons
name="twitter"
style={{ padding: 5 }}
color="white"
size={30}
/>
<Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
JR四国公式Twitter一族
</Text>
</View>
<View
style={{
padding: 10,
backgroundColor: "white",
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
}}
>
{((data) =>
data.map((d) => (
<ListItem onPress={() => Linking.openURL(d.url)}>
<Text>{d.name}</Text>
<View style={{ flex: 1 }} />
<Icon name="chevron-right" size={20} />
</ListItem>
)))([
{
url: "https://twitter.com/JRshikoku_eigyo",
name: "JR四国営業部【公式】",
},
{
url: "https://twitter.com/JRshikoku_tokyo",
name: "JR四国 東京営業情報【公式】",
},
{
url: "https://twitter.com/JRshikoku_osaka",
name: "JR四国 大阪営業部【公式】",
},
{
url: "https://twitter.com/jr_shikoku_info",
name: "JR四国列車運行情報【公式】",
},
{
url: "https://twitter.com/Smile_Eki_Chan",
name: "すまいるえきちゃん♡JR四国【公式】",
},
{
url: "https://twitter.com/jrs_matsuyama",
name: "JR四国 松山駅 【公式】",
},
{
url: "https://twitter.com/jrshikoku_kochi",
name: "JR四国 高知駅【公式】",
},
{
url: "https://twitter.com/jr_tokust",
name: "JR四国 徳島駅【公式】",
},
{
url: "https://twitter.com/jrshikoku_uwjm",
name: "JR四国 宇和島駅【公式】",
},
{
url: "https://twitter.com/JRshikoku_wkoch",
name: "JR四国 ワープ高知支店【公式】",
},
{
url: "https://twitter.com/jrshikoku_nihaw",
name: "JR四国 ワープ新居浜営業所【公式】",
},
{
url: "https://twitter.com/Yoakemonogatari",
name: "志国土佐 時代の夜明けのものがたり【公式】",
},
])}
</View>
</View>
<Text style={{ fontWeight: "bold", fontSize: 20 }}>
このアプリについて
</Text>
<Text>
このアプリはXprocess(HARUKIN)が製作しているJR四国の完全非公式アシストアプリケーションですこのアプリに関することでのJR四国公式へ問合せすることはお控えください以下のTwitterよりお願いします
</Text>
<TextBox
backgroundColor="#CC0000"
flex={1}
onPressButton={() =>
Linking.openURL("https://twitter.com/Xprocess_main")
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
XprocessのTwitter
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
制作運営のTwitterです
</Text>
</TextBox>
<TextBox
backgroundColor="black"
flex={1}
onPressButton={() => props.navigate("setting")}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
アプリの設定
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
アプリの設定画面を表示します
</Text>
</TextBox>
{/*
<SvgUri
width="200"
height="200"
source={require("./assets/トレインビジョン関係/1.svg")}
/> */}
</ScrollView>
</>
);

View File

@ -12,7 +12,6 @@ import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
export default function TrainBase({ route, navigation }) {
const { info, from } = route.params;
const { navigate } = navigation;
console.log(info);
const webview = useRef();
const jss = `document.getElementById('Footer').style.display = 'none';
${