diff --git a/App.js b/App.js index bee5a0d..8a4557c 100644 --- a/App.js +++ b/App.js @@ -110,6 +110,18 @@ function menuPage() { }} /> + ); } diff --git a/Apps.js b/Apps.js index 1d5855e..3310aed 100644 --- a/Apps.js +++ b/Apps.js @@ -8,7 +8,7 @@ import { } from "react-native"; import { WebView } from "react-native-webview"; import Constants from "expo-constants"; -import AsyncStorage from "@react-native-async-storage/async-storage"; +import { AS } from "./storageControl"; import { news } from "./config/newsUpdate"; import { getStationList, lineList } from "./lib/getStationList"; import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView"; @@ -53,7 +53,7 @@ export default function Apps(props) { useEffect(() => { //ニュース表示 - AsyncStorage.getItem("status") + AS.getItem("status") .then((d) => { if (d != news) navigate("news"); }) @@ -62,54 +62,48 @@ export default function Apps(props) { useEffect(() => { //列車アイコンスイッチ - AsyncStorage.getItem("iconSwitch") + AS.getItem("iconSwitch") .then((d) => { if (d) { setIconSetting(d); } else { - AsyncStorage.setItem("iconSwitch", "true").then(Updates.reloadAsync); + AS.setItem("iconSwitch", "true").then(Updates.reloadAsync); } }) - .catch((d) => - AsyncStorage.setItem("iconSwitch", "true").then(Updates.reloadAsync) - ); + .catch((d) => AS.setItem("iconSwitch", "true").then(Updates.reloadAsync)); }, []); useEffect(() => { //地図スイッチ - AsyncStorage.getItem("mapSwitch") + AS.getItem("mapSwitch") .then((d) => { if (d) { setMapSwitch(d); } else { - AsyncStorage.setItem("mapSwitch", "false").then(Updates.reloadAsync); + AS.setItem("mapSwitch", "false").then(Updates.reloadAsync); } }) - .catch((d) => - AsyncStorage.setItem("mapSwitch", "false").then(Updates.reloadAsync) - ); + .catch((d) => AS.setItem("mapSwitch", "false").then(Updates.reloadAsync)); }, []); useEffect(() => { //駅メニュースイッチ - AsyncStorage.getItem("stationSwitch") + AS.getItem("stationSwitch") .then((d) => { if (d) { setStationMenu(d); } else { - AsyncStorage.setItem("stationSwitch", "true").then( - Updates.reloadAsync - ); + AS.setItem("stationSwitch", "true").then(Updates.reloadAsync); } }) .catch((d) => - AsyncStorage.setItem("stationSwitch", "true").then(Updates.reloadAsync) + AS.setItem("stationSwitch", "true").then(Updates.reloadAsync) ); }, []); const onMessage = (event) => { if (!event.nativeEvent.data.includes("PopUpMenu")) { - navigate("trainbase", { info: event.nativeEvent.data }); + navigate("trainbase", { info: event.nativeEvent.data, from: "Train" }); return; } if (!originalStationList) { diff --git a/components/ActionSheetComponents/JRSTraInfo.js b/components/ActionSheetComponents/JRSTraInfo.js index 1d30174..9fb0d7e 100644 --- a/components/ActionSheetComponents/JRSTraInfo.js +++ b/components/ActionSheetComponents/JRSTraInfo.js @@ -22,7 +22,7 @@ export const JRSTraInfo = (props) => { <>} + CustomHeaderComponent={<>} > { <>} + CustomHeaderComponent={<>} > { - AsyncStorage.setItem("status", news); + AS.setItem("status", news); navigate("Apps"); }} > diff --git a/components/settings.js b/components/settings.js index 7d567b0..51fc69e 100644 --- a/components/settings.js +++ b/components/settings.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react"; import { View, Text, TouchableOpacity } from "react-native"; import * as Updates from "expo-updates"; import StatusbarDetect from "../StatusbarDetect"; -import AsyncStorage from "@react-native-async-storage/async-storage"; +import { AS } from "../storageControl"; var Status = StatusbarDetect(); import { Switch } from "react-native-elements"; @@ -14,9 +14,9 @@ export default function Setting(props) { const [mapSwitch, setMapSwitch] = useState(undefined); const [stationMenu, setStationMenu] = useState(undefined); useEffect(() => { - AsyncStorage.getItem("iconSwitch").then(setIconSetting); - AsyncStorage.getItem("mapSwitch").then(setMapSwitch); - AsyncStorage.getItem("stationSwitch").then(setStationMenu); + AS.getItem("iconSwitch").then(setIconSetting); + AS.getItem("mapSwitch").then(setMapSwitch); + AS.getItem("stationSwitch").then(setStationMenu); }, []); return ( @@ -102,7 +102,7 @@ export default function Setting(props) { textAlignVertical: "center", }} > - 内部バージョン: 4.4.2.6 + 内部バージョン: 4.4.2.7 @@ -134,9 +134,9 @@ export default function Setting(props) { }} onPress={() => { Promise.all([ - AsyncStorage.setItem("iconSwitch", iconSetting.toString()), - AsyncStorage.setItem("mapSwitch", mapSwitch.toString()), - AsyncStorage.setItem("stationSwitch", stationMenu.toString()), + AS.setItem("iconSwitch", iconSetting.toString()), + AS.setItem("mapSwitch", mapSwitch.toString()), + AS.setItem("stationSwitch", stationMenu.toString()), ]).then(() => { Updates.reloadAsync(); }); diff --git a/components/trainMenu.js b/components/trainMenu.js index 7e9f0e9..4c9d001 100644 --- a/components/trainMenu.js +++ b/components/trainMenu.js @@ -1,6 +1,5 @@ import React, { useRef } from "react"; import { View, Text, TouchableOpacity, Linking } from "react-native"; -import AsyncStorage from "@react-native-async-storage/async-storage"; import MapView, { Marker } from "react-native-maps"; import { MaterialCommunityIcons } from "@expo/vector-icons"; export default function trainMenu({ @@ -101,7 +100,6 @@ export default function trainMenu({ alignItems: "center", }} onPress={() => { - AsyncStorage.setItem("status", "2022/04/14"); navigate("Apps"); }} > diff --git a/components/発車時刻表/LED_vidion.js b/components/発車時刻表/LED_vidion.js index 3dcb4d5..ce30a62 100644 --- a/components/発車時刻表/LED_vidion.js +++ b/components/発車時刻表/LED_vidion.js @@ -1,10 +1,11 @@ import React, { useState, useEffect } from "react"; -import { View, Text } from "react-native"; +import { View, Text, TouchableOpacity } from "react-native"; import { Switch } from "react-native-elements"; import { widthPercentageToDP as wp } from "react-native-responsive-screen"; import { customTrainDataDetector } from "../custom-train-data"; import { useInterval } from "../../lib/useInterval"; import trainList from "../../assets/originData/trainList"; +import { objectIsEmpty } from "../../lib/objectIsEmpty"; let diagramData = undefined; @@ -43,14 +44,27 @@ export default function LED_vision(props) { referer: "https://train.jr-shikoku.co.jp/sp.html", }, }; - const [trainDiagram, setTrainDiagram] = useState(null); - const [stationDiagram, setStationDiagram] = useState(null); - const [currentTrain, setCurrentTrain] = useState(null); + const [trainDiagram, setTrainDiagram] = useState(null); // 全列車のダイヤを列番ベースで整理 + const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表 + const [currentTrain, setCurrentTrain] = useState(null); //現在在線中の全列車 const [finalSwitch, setFinalSwitch] = useState(false); const [trainIDSwitch, setTrainIDSwitch] = useState(false); const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false); + const parseAllTrainDiagram = (text) => { + const val = text.replace("[\r\n", "").split(",\r\n"); + let trainDiagram = {}; + val.forEach((element) => { + try { + let data = JSON.parse(element); + Object.keys(data).forEach((key) => (trainDiagram[key] = data[key])); + } catch (e) {} + }); + return trainDiagram; + }; + useEffect(() => { + //全列車リストを生成する副作用[無条件初回実行] fetch( "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=traintimeinfo&arg3=dia", HeaderConfig @@ -58,56 +72,55 @@ export default function LED_vision(props) { .then((response) => response.text()) .then((d) => { if (d.indexOf("404 Not Found") != -1) throw Error; - const val = d.replace("[\r\n", "").split(",\r\n"); - let trainDiagram = {}; - val.forEach((element) => { - try { - let data = JSON.parse(element); - Object.keys(data).forEach((key) => (trainDiagram[key] = data[key])); - } catch (e) {} - }); - setTrainDiagram(trainDiagram); - return trainDiagram; - }) - .then((trainDiagram) => { - let returnData = {}; - if (!trainDiagram) { - setStationDiagram(returnData); - return; - } - Object.keys(trainDiagram).forEach((key) => { - if (trainDiagram[key].match(props.station.Station_JP)) { - returnData[key] = trainDiagram[key]; - } - }); - setStationDiagram(returnData); + setTrainDiagram(parseAllTrainDiagram(d)); }) .catch((d) => { console.log("fallback"); setTrainDiagram(trainList); - let returnData = {}; - if (!trainList) { - setStationDiagram(returnData); - return; - } - Object.keys(trainList).forEach((key) => { - if (trainList[key].match(props.station.Station_JP)) { - returnData[key] = trainList[key]; - } - }); - setStationDiagram(returnData); }); }, []); - const getTime = () => { - const returnData = []; - Object.keys(stationDiagram).forEach((d) => { + useEffect(() => { + // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報] + if (!trainDiagram) { + setStationDiagram({}); + return; + } + let returnData = {}; + Object.keys(trainDiagram).forEach((key) => { + if (trainDiagram[key].match(props.station.Station_JP)) { + returnData[key] = trainDiagram[key]; + } + }); + setStationDiagram(returnData); + }, [trainDiagram, props.station]); + + const getCurrentTrain = () => + fetch( + "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train", + HeaderConfig + ) + .then((response) => response.json()) + .then((d) => + d.map((x) => ({ num: x.TrainNum, delay: x.delay, Pos: x.Pos })) + ) + .then(setCurrentTrain) + .catch((e) => { + console.log(e); + }); + + useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得 + + useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得 + + const getTime = (stationDiagram, station) => { + const returnData = Object.keys(stationDiagram).map((d) => { let a = {}; stationDiagram[d].split("#").forEach((data) => { if (data.match("着")) { a.lastStation = data.split(",着,")[0]; } - if (data.match(props.station.Station_JP)) { + if (data.match(station.Station_JP)) { if (data.match(",発,")) { a.time = data.split(",発,")[1]; } else { @@ -116,9 +129,8 @@ export default function LED_vision(props) { } } }); - returnData.push({ train: d, time: a.time, lastStation: a.lastStation }); + return { train: d, time: a.time, lastStation: a.lastStation }; }); - return returnData.sort((a, b) => { switch (true) { case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]): @@ -132,23 +144,15 @@ export default function LED_vision(props) { } }); }; - const trainTimeAndNumber = stationDiagram != null ? getTime() : null; - const getCurrentTrain = () => - fetch( - "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train", - HeaderConfig - ) - .then((response) => response.json()) - .then((d) => - d.map((x) => ({ num: x.TrainNum, delay: x.delay, Pos: x.Pos })) - ) - .then(setCurrentTrain); + + const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null); useEffect(() => { - getCurrentTrain(); - }, []); - - useInterval(getCurrentTrain, 15000); + //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット + if (objectIsEmpty(stationDiagram)) return () => {}; + const getTimeData = getTime(stationDiagram, props.station); + setTrainTimeAndNumber(getTimeData); + }, [stationDiagram]); const timeFiltering = (d) => { const date = new Date(); @@ -166,6 +170,135 @@ export default function LED_vision(props) { return false; }; + + const [selectedTrain, setSelectedTrain] = useState([]); + useEffect(() => { + if (!trainTimeAndNumber) return () => {}; + if (!currentTrain) return () => {}; + const data = trainTimeAndNumber + .filter((d) => currentTrain.map((m) => m.num).includes(d.train)) + .filter(timeFiltering) + .filter((d) => !!finalSwitch || d.lastStation != "当駅止"); + setSelectedTrain(data); + }, [trainTimeAndNumber, currentTrain, finalSwitch]); + return ( + +
+ {selectedTrain.map((d, index) => ( + + ))} +