ファイル移動
This commit is contained in:
harukin-expo-dev-env
568
components/Apps.js
Normal file
568
components/Apps.js
Normal file
@@ -0,0 +1,568 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Platform,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
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 { SheetManager } from "react-native-actions-sheet";
|
||||
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 StatusbarDetect from '../StatusbarDetect';
|
||||
var Status = StatusbarDetect(); */
|
||||
|
||||
export default function Apps() {
|
||||
const { webview, currentTrain } = useCurrentTrain();
|
||||
const { height, width } = useWindowDimensions();
|
||||
const { navigate } = useNavigation();
|
||||
var urlcache = "";
|
||||
const { favoriteStation } = useFavoriteStation();
|
||||
const { isLandscape, setIsLandscape } = useDeviceOrientationChange();
|
||||
const handleLayout = () => {};
|
||||
const {
|
||||
setSelectedLine,
|
||||
setInjectJavaScript,
|
||||
mapsStationData: stationData,
|
||||
} = useTrainMenu();
|
||||
|
||||
//画面表示関連
|
||||
const [iconSetting, setIconSetting] = useState(undefined);
|
||||
const [mapSwitch, setMapSwitch] = useState(undefined);
|
||||
const [stationMenu, setStationMenu] = useState(undefined);
|
||||
const [LoadError, setLoadError] = useState(false);
|
||||
|
||||
//列車情報表示関連
|
||||
const [trainInfo, setTrainInfo] = useState({
|
||||
trainNum: undefined,
|
||||
limited: undefined,
|
||||
trainData: undefined,
|
||||
});
|
||||
|
||||
//駅情報画面用
|
||||
const [originalStationList, setOriginalStationList] = useState();
|
||||
const [trainMenu, setTrainMenu] = useState("true");
|
||||
let once = false;
|
||||
useEffect(() => {
|
||||
getStationList().then(setOriginalStationList);
|
||||
}, []);
|
||||
|
||||
//地図表示テキスト
|
||||
const injectJavascript = injectJavascriptData(
|
||||
mapSwitch,
|
||||
iconSetting,
|
||||
stationMenu,
|
||||
trainMenu
|
||||
);
|
||||
const ASCore = ({ k, s, d }) =>
|
||||
AS.getItem(k)
|
||||
.then((d) => (d ? s(d) : AS.setItem(k, d).then(Updates.reloadAsync)))
|
||||
.catch(() => AS.setItem(k, d).then(Updates.reloadAsync));
|
||||
|
||||
useEffect(() => {
|
||||
//ニュース表示
|
||||
AS.getItem("status")
|
||||
.then((d) => {
|
||||
if (d != news) navigate("news");
|
||||
})
|
||||
.catch(() => navigate("news"));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
//列車アイコンスイッチ
|
||||
ASCore({ k: "iconSwitch", s: setIconSetting, d: "true" });
|
||||
//地図スイッチ
|
||||
ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false" });
|
||||
//駅メニュースイッチ
|
||||
ASCore({ k: "stationSwitch", s: setStationMenu, d: "true" });
|
||||
//列車メニュースイッチ
|
||||
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) => {
|
||||
let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
|
||||
return NearStation;
|
||||
};
|
||||
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 });
|
||||
} else {
|
||||
SheetManager.hide("StationDetailView");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
height: "100%",
|
||||
paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
|
||||
flexDirection: isLandscape ? "row" : "column",
|
||||
}}
|
||||
onLayout={handleLayout}
|
||||
>
|
||||
{!trainInfo.trainNum && isLandscape ? (
|
||||
<TrainMenu
|
||||
webview={webview}
|
||||
stationData={stationData}
|
||||
navigation={{ navigate: null }}
|
||||
style={{
|
||||
width: (width / 100) * 40,
|
||||
height: "100%",
|
||||
flexDirection: "column-reverse",
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
{/* {Status} */}
|
||||
<WebView
|
||||
useWebKit
|
||||
ref={webview}
|
||||
source={{ uri: "https://train.jr-shikoku.co.jp/sp.html" }}
|
||||
originWhitelist={[
|
||||
"https://train.jr-shikoku.co.jp",
|
||||
"https://train.jr-shikoku.co.jp/sp.html",
|
||||
]}
|
||||
mixedContentMode={"compatibility"}
|
||||
javaScriptEnabled
|
||||
allowsBackForwardNavigationGestures
|
||||
setSupportMultipleWindows
|
||||
onNavigationStateChange={onNavigationStateChange}
|
||||
onMessage={onMessage}
|
||||
injectedJavaScript={injectJavascript}
|
||||
onLoadEnd={() => {
|
||||
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 && (
|
||||
<View
|
||||
style={{
|
||||
width: (width / 100) * 40,
|
||||
height: height,
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<EachTrainInfoCore
|
||||
{...{
|
||||
data: trainInfo.trainNum ? trainInfo : undefined,
|
||||
originalStationList,
|
||||
openStationACFromEachTrainInfo,
|
||||
from: "Train",
|
||||
setTrainInfo,
|
||||
navigate,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
{isLandscape || (
|
||||
<MapsButton
|
||||
onPress={() => {
|
||||
setInjectJavaScript("");
|
||||
navigate("trainMenu", { webview });
|
||||
}}
|
||||
top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
|
||||
mapSwitch={mapSwitch == "true" ? "flex" : "none"}
|
||||
/>
|
||||
)}
|
||||
{isLandscape && trainInfo.trainNum && (
|
||||
<LandscapeBackButton
|
||||
onPress={() => {
|
||||
LayoutAnimation.easeInEaseOut();
|
||||
setTrainInfo({
|
||||
trainNum: undefined,
|
||||
limited: undefined,
|
||||
trainData: undefined,
|
||||
});
|
||||
}}
|
||||
top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
|
||||
/>
|
||||
)}
|
||||
{mapSwitch == "true" ? (
|
||||
<ReloadButton
|
||||
onPress={() => Updates.reloadAsync()}
|
||||
top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
|
||||
right={isLandscape && trainInfo.trainNum ? (width / 100) * 40 : 0}
|
||||
LoadError={LoadError}
|
||||
/>
|
||||
) : (
|
||||
<NewMenu
|
||||
webview={webview}
|
||||
isLandscape={isLandscape}
|
||||
LoadError={LoadError}
|
||||
mapSwitch={mapSwitch}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const NewMenu = ({ webview, LoadError }) => {
|
||||
const { width } = useWindowDimensions();
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
|
||||
width: width,
|
||||
height: 54,
|
||||
backgroundColor: "#0099CC",
|
||||
borderColor: "white",
|
||||
borderStyle: "solid",
|
||||
borderWidth: 1,
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity
|
||||
activeOpacity={1}
|
||||
style={{
|
||||
flex: 1,
|
||||
height: 54,
|
||||
backgroundColor: "#0099CC",
|
||||
borderColor: "white",
|
||||
borderStyle: "solid",
|
||||
borderWidth: 1,
|
||||
borderRightWidth: 0,
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
onPress={() => {
|
||||
webview.current?.injectJavaScript(`AccordionClassEvent()`);
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<View
|
||||
style={{
|
||||
width: 54,
|
||||
height: 54,
|
||||
backgroundColor: "#0099CC",
|
||||
borderColor: "white",
|
||||
borderStyle: "solid",
|
||||
borderWidth: 1,
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Ionicons name="menu" color="white" size={30} />
|
||||
<View style={{ flex: 1 }} />
|
||||
</View>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text style={{ color: "white", fontSize: 20 }}>メニュー</Text>
|
||||
<View style={{ flex: 1 }}></View>
|
||||
</>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => Updates.reloadAsync()}
|
||||
style={{
|
||||
width: 54,
|
||||
height: 54,
|
||||
backgroundColor: LoadError ? "red" : "#0099CC",
|
||||
borderColor: "white",
|
||||
borderStyle: "solid",
|
||||
borderWidth: 1,
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Ionicons name="reload" color="white" size={30} />
|
||||
<View style={{ flex: 1 }} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
const MapsButton = ({ onPress, top, mapSwitch }) => {
|
||||
const styles = {
|
||||
touch: {
|
||||
position: "absolute",
|
||||
top,
|
||||
left: 10,
|
||||
width: 50,
|
||||
height: 50,
|
||||
backgroundColor: "#0099CC",
|
||||
borderColor: "white",
|
||||
borderStyle: "solid",
|
||||
borderWidth: 1,
|
||||
borderRadius: 50,
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
display: mapSwitch,
|
||||
},
|
||||
text: {
|
||||
textAlign: "center",
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
textAlignVertical: "center",
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
fontSize: 20,
|
||||
},
|
||||
};
|
||||
return (
|
||||
<TouchableOpacity onPress={onPress} style={styles.touch}>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text style={styles.text}>≡</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const LandscapeBackButton = ({ onPress, top }) => {
|
||||
const styles = {
|
||||
touch: {
|
||||
position: "absolute",
|
||||
top,
|
||||
left: 10,
|
||||
width: 50,
|
||||
height: 50,
|
||||
backgroundColor: "#0099CC",
|
||||
borderColor: "white",
|
||||
borderStyle: "solid",
|
||||
borderWidth: 1,
|
||||
borderRadius: 50,
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
display: "flex",
|
||||
},
|
||||
text: {
|
||||
textAlign: "center",
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
textAlignVertical: "center",
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
},
|
||||
};
|
||||
return (
|
||||
<TouchableOpacity onPress={onPress} style={styles.touch}>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Ionicons name="arrow-back" color="white" size={30} />
|
||||
<View style={{ flex: 1 }} />
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const ReloadButton = ({
|
||||
onPress,
|
||||
top,
|
||||
mapSwitch,
|
||||
LoadError = false,
|
||||
right,
|
||||
}) => {
|
||||
const styles = {
|
||||
touch: {
|
||||
position: "absolute",
|
||||
top,
|
||||
right: 10 + right,
|
||||
width: 50,
|
||||
height: 50,
|
||||
backgroundColor: LoadError ? "red" : "#0099CC",
|
||||
borderColor: "white",
|
||||
borderStyle: "solid",
|
||||
borderWidth: 1,
|
||||
borderRadius: 50,
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
display: mapSwitch,
|
||||
},
|
||||
text: {
|
||||
textAlign: "center",
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
textAlignVertical: "center",
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
},
|
||||
};
|
||||
return (
|
||||
<TouchableOpacity onPress={onPress} style={styles.touch}>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Ionicons name="reload" color="white" size={30} />
|
||||
<View style={{ flex: 1 }} />
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user