diff --git a/MenuPage.js b/MenuPage.js index 4db8bef..f258916 100644 --- a/MenuPage.js +++ b/MenuPage.js @@ -4,7 +4,7 @@ import { TransitionPresets, } from "@react-navigation/stack"; import { AS } from "./storageControl"; -import TrainBase from "./trainbaseview"; +import TrainBase from "./components/trainbaseview"; import HowTo from "./howto"; import Menu from "./menu"; import Setting from "./components/Settings/settings"; diff --git a/Top.js b/Top.js index 046b2c0..bb9aa87 100644 --- a/Top.js +++ b/Top.js @@ -4,8 +4,8 @@ import { TransitionPresets, } from "@react-navigation/stack"; import { getStationList2 } from "./lib/getStationList2"; -import Apps from "./Apps"; -import TrainBase from "./trainbaseview"; +import Apps from "./components/Apps"; +import TrainBase from "./components/trainbaseview"; import HowTo from "./howto"; import News from "./components/news.js"; import TrainMenu from "./components/trainMenu.js"; diff --git a/Apps.js b/components/Apps.js similarity index 57% rename from Apps.js rename to components/Apps.js index 4358702..38a188b 100644 --- a/Apps.js +++ b/components/Apps.js @@ -7,43 +7,36 @@ import { useWindowDimensions, LayoutAnimation, } from "react-native"; -import { WebView } from "react-native-webview"; import Constants from "expo-constants"; import { Ionicons } from "@expo/vector-icons"; import * as Updates from "expo-updates"; -import { AS } from "./storageControl"; -import { news } from "./config/newsUpdate"; -import { getStationList, lineList, lineListPair } from "./lib/getStationList"; -import { injectJavascriptData } from "./lib/webViewInjectjavascript"; -import { checkDuplicateTrainData } from "./lib/checkDuplicateTrainData"; -import { useFavoriteStation } from "./stateBox/useFavoriteStation"; -import { useCurrentTrain } from "./stateBox/useCurrentTrain"; -import { useDeviceOrientationChange } from "./stateBox/useDeviceOrientationChange"; +import { AS } from "../storageControl"; +import { news } from "../config/newsUpdate"; +import { getStationList, lineList } from "../lib/getStationList"; +import { injectJavascriptData } from "../lib/webViewInjectjavascript"; +import { useCurrentTrain } from "../stateBox/useCurrentTrain"; +import { useDeviceOrientationChange } from "../stateBox/useDeviceOrientationChange"; import { SheetManager } from "react-native-actions-sheet"; -import TrainMenu from "./components/trainMenu"; -import { EachTrainInfoCore } from "./components/ActionSheetComponents/EachTrainInfoCore"; +import TrainMenu from "../components/trainMenu"; +import { EachTrainInfoCore } from "../components/ActionSheetComponents/EachTrainInfoCore"; import { useNavigation } from "@react-navigation/native"; -import { useTrainMenu } from "./stateBox/useTrainMenu"; -import { stationNamePair } from "./lib/getStationList2"; +import { useTrainMenu } from "../stateBox/useTrainMenu"; +import { AppsWebView } from "./Apps/WebView"; /* -import StatusbarDetect from './StatusbarDetect'; +import StatusbarDetect from '../StatusbarDetect'; var Status = StatusbarDetect(); */ +const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0; + export default function Apps() { - const { webview, currentTrain } = useCurrentTrain(); + const { webview } = useCurrentTrain(); const { height, width } = useWindowDimensions(); const { navigate } = useNavigation(); - var urlcache = ""; - const { favoriteStation } = useFavoriteStation(); - const { isLandscape, setIsLandscape } = useDeviceOrientationChange(); + const { isLandscape } = useDeviceOrientationChange(); const handleLayout = () => {}; - const { - setSelectedLine, - setInjectJavaScript, - mapsStationData: stationData, - } = useTrainMenu(); + const { setInjectJavaScript, mapsStationData: stationData } = useTrainMenu(); //画面表示関連 const [iconSetting, setIconSetting] = useState(undefined); @@ -61,10 +54,7 @@ export default function Apps() { //駅情報画面用 const [originalStationList, setOriginalStationList] = useState(); const [trainMenu, setTrainMenu] = useState("true"); - let once = false; - useEffect(() => { - getStationList().then(setOriginalStationList); - }, []); + useEffect(() => getStationList().then(setOriginalStationList), []); //地図表示テキスト const injectJavascript = injectJavascriptData( @@ -98,130 +88,6 @@ export default function Apps() { ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true" }); }, []); - const onMessage = (event) => { - const { data } = event.nativeEvent; - if (data.includes("train.html")) { - navigate("trainbase", { info: data, from: "Train" }); - return; - } - if (!originalStationList) { - alert("駅名標データを取得中..."); - return; - } - const dataSet = JSON.parse(data); - switch (dataSet.type) { - case "LoadError": { - setLoadError(true); - return; - } - case "PopUpMenu": - { - const selectedStationPDFAddress = dataSet.pdf; - const findStationEachLine = (selectLine) => - selectLine.filter( - (d) => d.StationTimeTable == selectedStationPDFAddress - ); - let returnDataBase = lineList - .map((d) => findStationEachLine(originalStationList[d])) - .filter((d) => d.length > 0) - .reduce((pre, current) => { - pre.push(...current); - return pre; - }, []); - - if (returnDataBase.length) { - const payload = { - currentStation: returnDataBase, - originalStationList: originalStationList, - navigate: navigate, - goTo: "Apps", - useShow: () => - SheetManager.show("StationDetailView", { - payload, - }), - onExit: () => SheetManager.hide("StationDetailView"), - }; - SheetManager.show("StationDetailView", { payload }); - } - } - return; - case "ShowTrainTimeInfo": { - const { trainNum, limited } = dataSet; - //alert(trainNum, limited); - LayoutAnimation.easeInEaseOut(); - setTrainInfo({ - trainNum, - limited, - trainData: checkDuplicateTrainData( - currentTrain.filter((a) => a.num == trainNum) - ), - }); //遅延情報は未実装 - if (isLandscape) return; - const payload = { - data: { - trainNum, - limited, - }, - navigate, - originalStationList, - openStationACFromEachTrainInfo, - }; - SheetManager.show("EachTrainInfo", { - payload, - }); - return; - } - case "currentLines": { - const lineInfo = dataSet.currentLines.split("\n")[0]; - const lineID = stationNamePair[lineInfo]; - - setSelectedLine(lineID); - return; - } - default: { - return; - } - } - }; - - const onNavigationStateChange = (event) => { - if (event.url != urlcache) { - //URL二重判定回避 - urlcache = event.url; - - if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) { - if (Platform.OS === "android") navigate("howto", { info: event.url }); - webview?.current.goBack(); - //Actions.howto(); - } else if ( - event.url.includes("https://train.jr-shikoku.co.jp/train.html") - ) { - //Actions.trainbase({info: event.url}); - if (Platform.OS === "android") - navigate("trainbase", { info: event.url }); - webview?.current.goBack(); - } - } - }; - function sleep(waitSec, callbackFunc) { - // 経過時間（秒） - var spanedSec = 0; - - // 1秒間隔で無名関数を実行 - var id = setInterval(function () { - spanedSec++; - - // 経過時間 >= 待機時間の場合、待機終了。 - if (spanedSec >= waitSec) { - // タイマー停止 - clearInterval(id); - - // 完了時、コールバック関数を実行 - if (callbackFunc) callbackFunc(); - } - }, 1); - } - const openStationACFromEachTrainInfo = async (stationName) => { await SheetManager.hide("EachTrainInfo"); const findStationEachLine = (selectLine) => { @@ -241,17 +107,10 @@ export default function Apps() { originalStationList: originalStationList, navigate: navigate, goTo: "Apps", - useShow: () => - SheetManager.show("StationDetailView", { - payload, - }), - onExit: () => { - SheetManager.hide("StationDetailView"); - }, + useShow: () => SheetManager.show("StationDetailView", { payload }), + onExit: () => SheetManager.hide("StationDetailView"), }; - SheetManager.show("StationDetailView", { - payload, - }); + SheetManager.show("StationDetailView", { payload }); } else { SheetManager.hide("StationDetailView"); } @@ -260,7 +119,7 @@ export default function Apps() { ) : null} {/* {Status} */} - { - if (once) return () => {}; - if (!stationData) return () => {}; - if (favoriteStation.length > 0) { - const getStationLine = (now) => { - const returnData = Object.keys(stationData).filter((d) => { - const cache = stationData[d].findIndex( - (data) => data.Station_JP == now.Station_JP - ); - return cache != -1; - }); - return returnData[0]; - }; - const lineName = getStationLine(favoriteStation[0][0]); - webview.current?.injectJavaScript( - `MoveDisplayStation('${lineName}_${favoriteStation[0][0].MyStation}_${favoriteStation[0][0].Station_JP}')` - ); - once = true; - } + {isLandscape && trainInfo.trainNum && ( @@ -340,7 +172,6 @@ export default function Apps() { setInjectJavaScript(""); navigate("trainMenu", { webview }); }} - top={Platform.OS == "ios" ? Constants.statusBarHeight : 0} mapSwitch={mapSwitch == "true" ? "flex" : "none"} /> )} @@ -354,13 +185,11 @@ export default function Apps() { trainData: undefined, }); }} - top={Platform.OS == "ios" ? Constants.statusBarHeight : 0} /> )} {mapSwitch == "true" ? ( Updates.reloadAsync()} - top={Platform.OS == "ios" ? Constants.statusBarHeight : 0} right={isLandscape && trainInfo.trainNum ? (width / 100) * 40 : 0} LoadError={LoadError} /> @@ -375,15 +204,14 @@ export default function Apps() { ); } - const NewMenu = ({ webview, LoadError }) => { const { width } = useWindowDimensions(); return ( { ); }; -const MapsButton = ({ onPress, top, mapSwitch }) => { +const MapsButton = ({ onPress, mapSwitch }) => { const styles = { touch: { position: "absolute", @@ -496,11 +324,10 @@ const MapsButton = ({ onPress, top, mapSwitch }) => { ); }; -const LandscapeBackButton = ({ onPress, top }) => { +const LandscapeBackButton = ({ onPress }) => { const styles = { touch: { position: "absolute", - top, left: 10, width: 50, height: 50, @@ -532,13 +359,7 @@ const LandscapeBackButton = ({ onPress, top }) => { ); }; -const ReloadButton = ({ - onPress, - top, - mapSwitch, - LoadError = false, - right, -}) => { +const ReloadButton = ({ onPress, mapSwitch, LoadError = false, right }) => { const styles = { touch: { position: "absolute", diff --git a/components/Apps/WebView.jsx b/components/Apps/WebView.jsx new file mode 100644 index 0000000..1a5469f --- /dev/null +++ b/components/Apps/WebView.jsx @@ -0,0 +1,161 @@ +import React from "react"; +import { Platform, LayoutAnimation } from "react-native"; +import { WebView } from "react-native-webview"; + +import { lineList } from "../../lib/getStationList"; +import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData"; +import { useFavoriteStation } from "../../stateBox/useFavoriteStation"; +import { useCurrentTrain } from "../../stateBox/useCurrentTrain"; +import { useDeviceOrientationChange } from "../../stateBox/useDeviceOrientationChange"; +import { SheetManager } from "react-native-actions-sheet"; + +import { useNavigation } from "@react-navigation/native"; +import { useTrainMenu } from "../../stateBox/useTrainMenu"; +import { stationNamePair } from "../../lib/getStationList2"; +export const AppsWebView = ({ + originalStationList, + setLoadError, + setTrainInfo, + openStationACFromEachTrainInfo, + injectJavascript, +}) => { + const { webview, currentTrain } = useCurrentTrain(); + const { navigate } = useNavigation(); + const { favoriteStation } = useFavoriteStation(); + const { isLandscape } = useDeviceOrientationChange(); + const { setSelectedLine, mapsStationData: stationData } = useTrainMenu(); + var urlcache = ""; + let once = false; + + const onNavigationStateChange = ({ url }) => { + if (url == urlcache) return; + //URL二重判定回避 + urlcache = url; + switch (true) { + case url.includes("https://train.jr-shikoku.co.jp/usage.htm"): + if (Platform.OS === "android") navigate("howto", { info: url }); + webview?.current.goBack(); + //Actions.howto(); + break; + case url.includes("https://train.jr-shikoku.co.jp/train.html"): + //Actions.trainbase({info: url}); + if (Platform.OS === "android") navigate("trainbase", { info: url }); + webview?.current.goBack(); + break; + } + }; + + const onMessage = (event) => { + const { data } = event.nativeEvent; + if (data.includes("train.html")) { + navigate("trainbase", { info: data, from: "Train" }); + return; + } + if (!originalStationList) { + alert("駅名標データを取得中..."); + return; + } + const dataSet = JSON.parse(data); + switch (dataSet.type) { + case "LoadError": { + setLoadError(true); + return; + } + case "PopUpMenu": + { + const findStationEachLine = (selectLine) => + selectLine.filter((d) => d.StationTimeTable == dataSet.pdf); + let returnDataBase = lineList + .map((d) => findStationEachLine(originalStationList[d])) + .filter((d) => d.length > 0) + .reduce((pre, current) => { + pre.push(...current); + return pre; + }, []); + + if (returnDataBase.length) { + const payload = { + currentStation: returnDataBase, + originalStationList: originalStationList, + navigate: navigate, + goTo: "Apps", + useShow: () => + SheetManager.show("StationDetailView", { payload }), + onExit: () => SheetManager.hide("StationDetailView"), + }; + SheetManager.show("StationDetailView", { payload }); + } + } + return; + case "ShowTrainTimeInfo": { + const { trainNum, limited } = dataSet; + //alert(trainNum, limited); + LayoutAnimation.easeInEaseOut(); + setTrainInfo({ + trainNum, + limited, + trainData: checkDuplicateTrainData( + currentTrain.filter((a) => a.num == trainNum) + ), + }); //遅延情報は未実装 + if (isLandscape) return; + const payload = { + data: { trainNum, limited }, + navigate, + originalStationList, + openStationACFromEachTrainInfo, + }; + SheetManager.show("EachTrainInfo", { payload }); + return; + } + case "currentLines": { + const lineInfo = dataSet.currentLines.split("\n")[0]; + const lineID = stationNamePair[lineInfo]; + + setSelectedLine(lineID); + return; + } + default: { + return; + } + } + }; + + const onLoadEnd = () => { + if (once) return () => {}; + if (!stationData) return () => {}; + if (favoriteStation.length < 1) return () => {}; + const getStationLine = (now) => { + const returnData = Object.keys(stationData).filter((d) => { + const cache = stationData[d].findIndex( + (data) => data.Station_JP == now.Station_JP + ); + return cache != -1; + }); + return returnData[0]; + }; + const lineName = getStationLine(favoriteStation[0][0]); + webview.current?.injectJavaScript( + `MoveDisplayStation('${lineName}_${favoriteStation[0][0].MyStation}_${favoriteStation[0][0].Station_JP}')` + ); + once = true; + }; + + return ( + + ); +}; diff --git a/trainbaseview.js b/components/trainbaseview.js similarity index 100% rename from trainbaseview.js rename to components/trainbaseview.js