トップメニューのデザイン改修と地図表示の最適化
This commit is contained in:
harukin-DeskMini
parent
6b280a51d7
commit
b234b056c3
318
Apps.js
318
Apps.js
@ -1,28 +1,102 @@
|
|||||||
import React, { useEffect, useRef, useState } from 'react';
|
import React, { useEffect, useRef, useState } from "react";
|
||||||
import {View, Platform,ToastAndroid, Text, TouchableOpacity} from 'react-native';
|
import {
|
||||||
import {WebView} from 'react-native-webview';
|
View,
|
||||||
import Constants from 'expo-constants';
|
Platform,
|
||||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
ToastAndroid,
|
||||||
|
Text,
|
||||||
|
TouchableOpacity,
|
||||||
|
} from "react-native";
|
||||||
|
import { WebView } from "react-native-webview";
|
||||||
|
import Constants from "expo-constants";
|
||||||
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||||
/*
|
/*
|
||||||
import StatusbarDetect from './StatusbarDetect';
|
import StatusbarDetect from './StatusbarDetect';
|
||||||
var Status = StatusbarDetect(); */
|
var Status = StatusbarDetect(); */
|
||||||
|
|
||||||
export var webview = null;
|
export var webview = null;
|
||||||
|
|
||||||
export default function Apps (props) {
|
export default function Apps(props) {
|
||||||
const { navigation: { navigate } } = props;
|
const {
|
||||||
var urlcache="";
|
navigation: { navigate },
|
||||||
|
} = props;
|
||||||
|
var urlcache = "";
|
||||||
const webview = useRef();
|
const webview = useRef();
|
||||||
const [iconSetting, setIconSetting] = useState(undefined)
|
const [iconSetting, setIconSetting] = useState(undefined);
|
||||||
const [mapSwitch, setMapSwitch] = useState(undefined);
|
const [mapSwitch, setMapSwitch] = useState(undefined);
|
||||||
|
|
||||||
|
const [stationData, setStationData] = useState(undefined);
|
||||||
|
useEffect(() => {
|
||||||
|
const HeaderConfig = {
|
||||||
|
headers: { referer: "https://train.jr-shikoku.co.jp/sp.html" },
|
||||||
|
};
|
||||||
|
|
||||||
const bootData = `
|
Promise.all([
|
||||||
document.getElementById('header').querySelector('a').style.display = 'none';
|
fetch(
|
||||||
document.getElementById('header').style.height = '50px';
|
"https://train.jr-shikoku.co.jp/g?arg1=station&arg2=yosan",
|
||||||
document.getElementById('main').style.paddingTop = '54px';
|
HeaderConfig
|
||||||
|
).then((response) => response.json()),
|
||||||
|
fetch(
|
||||||
|
"https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima",
|
||||||
|
HeaderConfig
|
||||||
|
).then((response) => response.json()),
|
||||||
|
fetch(
|
||||||
|
"https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima2",
|
||||||
|
HeaderConfig
|
||||||
|
).then((response) => response.json()),
|
||||||
|
fetch(
|
||||||
|
"https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan",
|
||||||
|
HeaderConfig
|
||||||
|
).then((response) => response.json()),
|
||||||
|
fetch(
|
||||||
|
"https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan2",
|
||||||
|
HeaderConfig
|
||||||
|
).then((response) => response.json()),
|
||||||
|
fetch(
|
||||||
|
"https://train.jr-shikoku.co.jp/g?arg1=station&arg2=koutoku",
|
||||||
|
HeaderConfig
|
||||||
|
).then((response) => response.json()),
|
||||||
|
fetch(
|
||||||
|
"https://train.jr-shikoku.co.jp/g?arg1=station&arg2=tokushima",
|
||||||
|
HeaderConfig
|
||||||
|
).then((response) => response.json()),
|
||||||
|
fetch(
|
||||||
|
"https://train.jr-shikoku.co.jp/g?arg1=station&arg2=naruto",
|
||||||
|
HeaderConfig
|
||||||
|
).then((response) => response.json()),
|
||||||
|
]).then((values) => {
|
||||||
|
let stationList = {};
|
||||||
|
[
|
||||||
|
stationList.yosan,
|
||||||
|
stationList.uwajima,
|
||||||
|
stationList.uwajima2,
|
||||||
|
stationList.dosan,
|
||||||
|
stationList.dosan2,
|
||||||
|
stationList.koutoku,
|
||||||
|
stationList.tokushima,
|
||||||
|
stationList.naruto,
|
||||||
|
] = values;
|
||||||
|
setStationData(stationList);
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
document.getElementById('headerStr').style.display = 'none';
|
const topMenu =
|
||||||
|
mapSwitch != "true"
|
||||||
|
? `
|
||||||
|
document.getElementById('header').querySelector('a').style.display = 'none';
|
||||||
|
document.getElementById('header').style.height = '50px';
|
||||||
|
document.getElementById('main').style.paddingTop = '54px';
|
||||||
|
|
||||||
|
document.getElementById('headerStr').style.display = 'none';
|
||||||
|
`
|
||||||
|
: `
|
||||||
|
document.getElementsByClassName('accordionClass')[0].style.display = 'none';
|
||||||
|
document.getElementById('header').style.display = 'none';
|
||||||
|
document.getElementById('main').style.paddingTop = '0px';
|
||||||
|
document.getElementById('headerStr').style.display = 'none';
|
||||||
|
`;
|
||||||
|
const bootData =
|
||||||
|
topMenu +
|
||||||
|
`
|
||||||
const setReload = () =>{
|
const setReload = () =>{
|
||||||
try{
|
try{
|
||||||
document.getElementById('refreshIcon').click();
|
document.getElementById('refreshIcon').click();
|
||||||
@ -35,7 +109,7 @@ export default function Apps (props) {
|
|||||||
setReload();
|
setReload();
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const trainIconMaker = `
|
const trainIconMaker = `
|
||||||
const setStationIcon = (行き先アイコン,img) =>{
|
const setStationIcon = (行き先アイコン,img) =>{
|
||||||
let newItem = document.createElement("div");
|
let newItem = document.createElement("div");
|
||||||
if(行き先アイコン.getAttribute("style").includes("left")){
|
if(行き先アイコン.getAttribute("style").includes("left")){
|
||||||
@ -46,11 +120,11 @@ const trainIconMaker = `
|
|||||||
}
|
}
|
||||||
行き先アイコン.remove();
|
行き先アイコン.remove();
|
||||||
}
|
}
|
||||||
`
|
`;
|
||||||
|
|
||||||
|
const trainIcon =
|
||||||
|
iconSetting == "true"
|
||||||
const trainIcon = iconSetting == "true" ? `
|
? `
|
||||||
switch(列番データ){
|
switch(列番データ){
|
||||||
//しおかぜメイン
|
//しおかぜメイン
|
||||||
//8000 ノーマル
|
//8000 ノーマル
|
||||||
@ -467,12 +541,16 @@ switch(列番データ){
|
|||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
` : ``;
|
`
|
||||||
|
: ``;
|
||||||
|
|
||||||
const JRF_icon = iconSetting == "true" ? `
|
const JRF_icon =
|
||||||
|
iconSetting == "true"
|
||||||
|
? `
|
||||||
JRF || setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/ef210a.png');
|
JRF || setStationIcon(element.getElementsByTagName("img")[0],'http://www.trainfrontview.net/f/ef210a.png');
|
||||||
` : ``;
|
`
|
||||||
const normal_train_name = `
|
: ``;
|
||||||
|
const normal_train_name = `
|
||||||
if(new RegExp(/^4[1-9]\\d\\d[DM]$/).test(列番データ) || new RegExp(/^5[1-7]\\d\\d[DM]$/).test(列番データ)){
|
if(new RegExp(/^4[1-9]\\d\\d[DM]$/).test(列番データ) || new RegExp(/^5[1-7]\\d\\d[DM]$/).test(列番データ)){
|
||||||
行き先情報.innerText = "ワンマン\\n"+行き先情報.innerText;
|
行き先情報.innerText = "ワンマン\\n"+行き先情報.innerText;
|
||||||
flag=true;
|
flag=true;
|
||||||
@ -492,8 +570,9 @@ const normal_train_name = `
|
|||||||
else if(列番データ.indexOf("S") != -1){
|
else if(列番データ.indexOf("S") != -1){
|
||||||
行き先情報.innerText = 行き先情報.innerText+"臨時列車\\n";
|
行き先情報.innerText = 行き先情報.innerText+"臨時列車\\n";
|
||||||
}
|
}
|
||||||
`
|
`;
|
||||||
const JRF_name = `
|
const JRF_name =
|
||||||
|
`
|
||||||
let JRF = false;
|
let JRF = false;
|
||||||
switch(列番データ){
|
switch(列番データ){
|
||||||
case "71":
|
case "71":
|
||||||
@ -538,7 +617,7 @@ const JRF_name = `
|
|||||||
default:
|
default:
|
||||||
JRF = true;
|
JRF = true;
|
||||||
}
|
}
|
||||||
`+JRF_icon;
|
` + JRF_icon;
|
||||||
|
|
||||||
const TKT_name = `
|
const TKT_name = `
|
||||||
//安芸行と併結列車を個別に表示、それ以外をdefaultで下りなら既定の行き先を、上りなら奈半利行を設定
|
//安芸行と併結列車を個別に表示、それ以外をdefaultで下りなら既定の行き先を、上りなら奈半利行を設定
|
||||||
@ -575,9 +654,10 @@ const JRF_name = `
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
`
|
`;
|
||||||
|
|
||||||
const textInsert = `
|
const textInsert =
|
||||||
|
`
|
||||||
const setStrings = () =>{
|
const setStrings = () =>{
|
||||||
try {
|
try {
|
||||||
var elements = document.querySelectorAll('[onclick]');
|
var elements = document.querySelectorAll('[onclick]');
|
||||||
@ -588,7 +668,12 @@ const setStrings = () =>{
|
|||||||
var flag=false;
|
var flag=false;
|
||||||
var TrainType = undefined;
|
var TrainType = undefined;
|
||||||
if(行き先情報.innerText.includes(列番データ))continue; //回避
|
if(行き先情報.innerText.includes(列番データ))continue; //回避
|
||||||
`+trainIcon+normal_train_name+JRF_name+TKT_name+`
|
` +
|
||||||
|
trainIcon +
|
||||||
|
normal_train_name +
|
||||||
|
JRF_name +
|
||||||
|
TKT_name +
|
||||||
|
`
|
||||||
//列番付与
|
//列番付与
|
||||||
行き先情報.innerText = 行き先情報.innerText+列番データ+(JRF ? "":"レ");
|
行き先情報.innerText = 行き先情報.innerText+列番データ+(JRF ? "":"レ");
|
||||||
}
|
}
|
||||||
@ -686,89 +771,134 @@ observer.observe(target, {
|
|||||||
childList: true, // 子ノードの変化を監視
|
childList: true, // 子ノードの変化を監視
|
||||||
//subtree: true // 子孫ノードも監視対象に含める
|
//subtree: true // 子孫ノードも監視対象に含める
|
||||||
});
|
});
|
||||||
`
|
`;
|
||||||
|
|
||||||
const injectJavascriptData = bootData+trainIconMaker+textInsert;
|
const injectJavascriptData = bootData + trainIconMaker + textInsert;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
useEffect(()=>{
|
|
||||||
AsyncStorage.getItem("status")
|
AsyncStorage.getItem("status")
|
||||||
.then(d=>{
|
.then((d) => {
|
||||||
if(d != "2022/06/11"){
|
if (d != "2022/06/11") {
|
||||||
navigate('news');
|
navigate("news");
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(e=>{
|
.catch((e) => {
|
||||||
navigate('news');
|
navigate("news");
|
||||||
})
|
});
|
||||||
},[])
|
}, []);
|
||||||
useEffect(()=>{
|
useEffect(() => {
|
||||||
AsyncStorage.getItem("iconSwitch").then( d =>{
|
AsyncStorage.getItem("iconSwitch")
|
||||||
if(d){
|
.then((d) => {
|
||||||
setIconSetting(d);
|
if (d) {
|
||||||
}
|
setIconSetting(d);
|
||||||
else{
|
} else {
|
||||||
AsyncStorage.setItem("iconSwitch","true").then(()=>Updates.reloadAsync())
|
AsyncStorage.setItem("iconSwitch", "true").then(() =>
|
||||||
}
|
Updates.reloadAsync()
|
||||||
|
);
|
||||||
|
}
|
||||||
}).catch(d=>AsyncStorage.setItem("iconSwitch","true").then(()=>Updates.reloadAsync()))
|
})
|
||||||
|
.catch((d) =>
|
||||||
|
AsyncStorage.setItem("iconSwitch", "true").then(() =>
|
||||||
AsyncStorage.getItem("mapSwitch").then( d =>{
|
Updates.reloadAsync()
|
||||||
if(d){
|
)
|
||||||
setMapSwitch(d);
|
);
|
||||||
}
|
|
||||||
else{
|
|
||||||
AsyncStorage.setItem("mapSwitch","false").then(()=>Updates.reloadAsync())
|
|
||||||
}
|
|
||||||
}).catch(d=>AsyncStorage.setItem("mapSwitch","false").then(()=>Updates.reloadAsync()))
|
|
||||||
|
|
||||||
},[])
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
AsyncStorage.getItem("mapSwitch")
|
||||||
|
.then((d) => {
|
||||||
|
if (d) {
|
||||||
|
setMapSwitch(d);
|
||||||
|
} else {
|
||||||
|
AsyncStorage.setItem("mapSwitch", "false").then(() =>
|
||||||
|
Updates.reloadAsync()
|
||||||
|
);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((d) =>
|
||||||
|
AsyncStorage.setItem("mapSwitch", "false").then(() =>
|
||||||
|
Updates.reloadAsync()
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={{height:"100%",paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight: 0,}}>
|
<View
|
||||||
|
style={{
|
||||||
|
height: "100%",
|
||||||
|
paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
{/* {Status} */}
|
{/* {Status} */}
|
||||||
<WebView
|
<WebView
|
||||||
useWebKit={true}
|
useWebKit={true}
|
||||||
ref={webview}
|
ref={webview}
|
||||||
source={{uri: 'https://train.jr-shikoku.co.jp/sp.html'}}
|
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']}
|
originWhitelist={[
|
||||||
mixedContentMode={'compatibility'}
|
"https://train.jr-shikoku.co.jp",
|
||||||
javaScriptEnabled={true}
|
"https://train.jr-shikoku.co.jp/sp.html",
|
||||||
allowsBackForwardNavigationGestures={true}
|
]}
|
||||||
setSupportMultipleWindows={false}
|
mixedContentMode={"compatibility"}
|
||||||
onNavigationStateChange={
|
javaScriptEnabled={true}
|
||||||
event =>{
|
allowsBackForwardNavigationGestures={true}
|
||||||
|
setSupportMultipleWindows={false}
|
||||||
|
onNavigationStateChange={(event) => {
|
||||||
console.log(event);
|
console.log(event);
|
||||||
if(event.url != urlcache){//URL二重判定回避
|
if (event.url != urlcache) {
|
||||||
|
//URL二重判定回避
|
||||||
urlcache = event.url;
|
urlcache = event.url;
|
||||||
|
|
||||||
if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) {
|
if (
|
||||||
if(Platform.OS==="android")navigate('howto');
|
event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")
|
||||||
|
) {
|
||||||
|
if (Platform.OS === "android") navigate("howto");
|
||||||
webview?.current.goBack();
|
webview?.current.goBack();
|
||||||
//Actions.howto();
|
//Actions.howto();
|
||||||
}
|
} else if (
|
||||||
else if (event.url.includes("https://train.jr-shikoku.co.jp/train.html")) {
|
event.url.includes("https://train.jr-shikoku.co.jp/train.html")
|
||||||
|
) {
|
||||||
//Actions.trainbase({info: event.url});
|
//Actions.trainbase({info: event.url});
|
||||||
if(Platform.OS==="android")navigate('trainbase', {info: event.url});
|
if (Platform.OS === "android")
|
||||||
|
navigate("trainbase", { info: event.url });
|
||||||
webview?.current.goBack();
|
webview?.current.goBack();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}}
|
||||||
}
|
onMessage={(event) => {}}
|
||||||
onMessage={(event)=>{}}
|
injectedJavaScript={injectJavascriptData}
|
||||||
injectedJavaScript={injectJavascriptData}/>
|
/>
|
||||||
<TouchableOpacity onPress={()=>navigate('trainMenu', {webview: webview})} style={{position:"absolute",bottom:0,right:0,width:50,height:50,backgroundColor:"white",borderColor:"blue",borderStyle:"solid",borderWidth:1,borderRadius:50,alignContent:"center",alignSelf:"center",alignItems:"center",margin:10,display:mapSwitch == "true" ? "flex": "none"}}>
|
<TouchableOpacity
|
||||||
<View style={{flex:1}}/>
|
onPress={() => navigate("trainMenu", { webview, stationData })}
|
||||||
<Text style={{textAlign:"center",width:"auto",height:"auto",textAlignVertical:"center"}}>線</Text>
|
style={{
|
||||||
<View style={{flex:1}}/>
|
position: "absolute",
|
||||||
|
top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
|
||||||
|
right: 10,
|
||||||
|
width: 50,
|
||||||
|
height: 50,
|
||||||
|
backgroundColor: "#0099CC",
|
||||||
|
borderColor: "white",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 50,
|
||||||
|
alignContent: "center",
|
||||||
|
alignSelf: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
display: mapSwitch == "true" ? "flex" : "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
textAlign: "center",
|
||||||
|
width: "auto",
|
||||||
|
height: "auto",
|
||||||
|
textAlignVertical: "center",
|
||||||
|
fontWeight: "bold",
|
||||||
|
color: "white",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
三
|
||||||
|
</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -1,19 +1,44 @@
|
|||||||
import React, { } from 'react';
|
import React from "react";
|
||||||
import {View,Text,TouchableOpacity } from 'react-native';
|
import { View, Text, TouchableOpacity } from "react-native";
|
||||||
import {WebView} from 'react-native-webview';
|
import { WebView } from "react-native-webview";
|
||||||
import StatusbarDetect from '../StatusbarDetect';
|
import StatusbarDetect from "../StatusbarDetect";
|
||||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||||
var Status = StatusbarDetect();
|
var Status = StatusbarDetect();
|
||||||
export default function News(props){
|
export default function News(props) {
|
||||||
const { navigation: { navigate } } = props;
|
const {
|
||||||
return(
|
navigation: { navigate },
|
||||||
<View style={{height:"100%",backgroundColor:"#0099CC"}}>
|
} = props;
|
||||||
<WebView useWebKit={true} source={{uri: 'https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/2022-6-11'}} mixedContentMode={'compatibility'} javaScriptEnabled={true}/>
|
return (
|
||||||
<TouchableOpacity style={{padding:10,flexDirection:"row",borderColor:"white",borderWidth:1,margin:10,borderRadius:5,alignItems:"center"}} onPress={()=>{AsyncStorage.setItem('status', "2022/04/14");navigate('Apps');}}>
|
<View style={{ height: "100%", backgroundColor: "#0099CC" }}>
|
||||||
<View style={{flex:1}} />
|
<WebView
|
||||||
<Text style={{fontSize:25,fontWeight:"bold",color:"white"}}>更新情報を閉じる</Text>
|
useWebKit={true}
|
||||||
<View style={{flex:1}} />
|
source={{
|
||||||
</TouchableOpacity>
|
uri: "https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/2022-6-11",
|
||||||
</View>
|
}}
|
||||||
)
|
mixedContentMode={"compatibility"}
|
||||||
|
javaScriptEnabled={true}
|
||||||
|
/>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={{
|
||||||
|
padding: 10,
|
||||||
|
flexDirection: "row",
|
||||||
|
borderColor: "white",
|
||||||
|
borderWidth: 1,
|
||||||
|
margin: 10,
|
||||||
|
borderRadius: 5,
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
onPress={() => {
|
||||||
|
AsyncStorage.setItem("status", "2022/06/11");
|
||||||
|
navigate("Apps");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
|
||||||
|
更新情報を閉じる
|
||||||
|
</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
@ -1,66 +1,137 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from "react";
|
||||||
import {View,Text,TouchableOpacity } from 'react-native';
|
import { View, Text, TouchableOpacity } from "react-native";
|
||||||
import * as Updates from 'expo-updates';
|
import * as Updates from "expo-updates";
|
||||||
import StatusbarDetect from '../StatusbarDetect';
|
import StatusbarDetect from "../StatusbarDetect";
|
||||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||||
var Status = StatusbarDetect();
|
var Status = StatusbarDetect();
|
||||||
import { Switch } from 'react-native-elements';
|
import { Switch } from "react-native-elements";
|
||||||
|
|
||||||
export default function Setting(props){
|
export default function Setting(props) {
|
||||||
const { navigation: { navigate } } = props;
|
const {
|
||||||
const [iconSetting, setIconSetting] = useState(undefined)
|
navigation: { navigate },
|
||||||
const [mapSwitch, setMapSwitch] = useState(undefined)
|
} = props;
|
||||||
useEffect(()=>{
|
const [iconSetting, setIconSetting] = useState(undefined);
|
||||||
AsyncStorage.getItem("iconSwitch").then( d =>{
|
const [mapSwitch, setMapSwitch] = useState(undefined);
|
||||||
setIconSetting(d)
|
useEffect(() => {
|
||||||
})
|
AsyncStorage.getItem("iconSwitch").then((d) => {
|
||||||
AsyncStorage.getItem("mapSwitch").then( d =>{
|
setIconSetting(d);
|
||||||
setMapSwitch(d)
|
});
|
||||||
})
|
AsyncStorage.getItem("mapSwitch").then((d) => {
|
||||||
},[])
|
setMapSwitch(d);
|
||||||
console.log(iconSetting);
|
});
|
||||||
return(
|
}, []);
|
||||||
<View style={{height:"100%",backgroundColor:"#0099CC"}}>
|
console.log(iconSetting);
|
||||||
<View style={{flex:1,backgroundColor:"white"}}>
|
return (
|
||||||
<View style={{backgroundColor:"#0099CC"}}>
|
<View style={{ height: "100%", backgroundColor: "#0099CC" }}>
|
||||||
<Text style={{fontSize:30,fontWeight:"bold",textAlign:"center",color:"white",padding:10}}>設定画面</Text>
|
<View style={{ flex: 1, backgroundColor: "white" }}>
|
||||||
</View>
|
<View style={{ backgroundColor: "#0099CC" }}>
|
||||||
<View style={{flex:1}} >
|
<Text
|
||||||
<View style={{flexDirection:"row",padding:10}}>
|
style={{
|
||||||
<Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>列車アイコンを表示する</Text>
|
fontSize: 30,
|
||||||
<View style={{flex:1}} />
|
fontWeight: "bold",
|
||||||
<Switch value={iconSetting == "true" ? true : false} color={iconSetting == "true" ? "red": null} onValueChange={(value)=>setIconSetting(value.toString())}/>
|
textAlign: "center",
|
||||||
</View>
|
color: "white",
|
||||||
<View style={{flexDirection:"row",padding:10}}>
|
padding: 10,
|
||||||
<Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>channel: {Updates.channel}</Text>
|
}}
|
||||||
<View style={{flex:1}} />
|
>
|
||||||
</View>
|
設定画面
|
||||||
<View style={{flexDirection:"row",padding:10}}>
|
</Text>
|
||||||
<Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>releaseChannel: {Updates.releaseChannel}</Text>
|
|
||||||
<View style={{flex:1}} />
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={{flexDirection:"row",padding:10}}>
|
|
||||||
<Text style={{fontSize:25,alignItems:"center",alignContent:"center",textAlign:"center",textAlignVertical:"center"}}>マップを表示する(beta)</Text>
|
|
||||||
<View style={{flex:1}} />
|
|
||||||
<Switch value={mapSwitch == "true" ? true : false} color={mapSwitch == "true" ? "red": null} onValueChange={(value)=>setMapSwitch(value.toString())}/>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
<TouchableOpacity style={{padding:10,flexDirection:"row",borderColor:"white",borderWidth:1,margin:10,borderRadius:5,alignItems:"center"}} onPress={()=>{
|
|
||||||
Promise.all([
|
|
||||||
AsyncStorage.setItem("iconSwitch",iconSetting.toString()),
|
|
||||||
AsyncStorage.setItem("mapSwitch",mapSwitch.toString())
|
|
||||||
])
|
|
||||||
.then(()=>{
|
|
||||||
Updates.reloadAsync()
|
|
||||||
})
|
|
||||||
}}>
|
|
||||||
<View style={{flex:1}} />
|
|
||||||
<Text style={{fontSize:25,fontWeight:"bold",color:"white"}}>設定を保存して再読み込み</Text>
|
|
||||||
<View style={{flex:1}} />
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
</View>
|
||||||
)
|
<View style={{ flex: 1 }}>
|
||||||
|
<View style={{ flexDirection: "row", padding: 10 }}>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 25,
|
||||||
|
alignItems: "center",
|
||||||
|
alignContent: "center",
|
||||||
|
textAlign: "center",
|
||||||
|
textAlignVertical: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
列車アイコンを表示する
|
||||||
|
</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<Switch
|
||||||
|
value={iconSetting == "true" ? true : false}
|
||||||
|
color={iconSetting == "true" ? "red" : null}
|
||||||
|
onValueChange={(value) => setIconSetting(value.toString())}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
<View style={{ flexDirection: "row", padding: 10 }}>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 25,
|
||||||
|
alignItems: "center",
|
||||||
|
alignContent: "center",
|
||||||
|
textAlign: "center",
|
||||||
|
textAlignVertical: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
内部バージョン: 4.3.1
|
||||||
|
</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
</View>
|
||||||
|
<View style={{ flexDirection: "row", padding: 10 }}>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 25,
|
||||||
|
alignItems: "center",
|
||||||
|
alignContent: "center",
|
||||||
|
textAlign: "center",
|
||||||
|
textAlignVertical: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
releaseChannel: {Updates.releaseChannel}
|
||||||
|
</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{ flexDirection: "row", padding: 10 }}>
|
||||||
|
<Text
|
||||||
|
style={{
|
||||||
|
fontSize: 25,
|
||||||
|
alignItems: "center",
|
||||||
|
alignContent: "center",
|
||||||
|
textAlign: "center",
|
||||||
|
textAlignVertical: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
マップを表示する(beta)
|
||||||
|
</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<Switch
|
||||||
|
value={mapSwitch == "true" ? true : false}
|
||||||
|
color={mapSwitch == "true" ? "red" : null}
|
||||||
|
onValueChange={(value) => setMapSwitch(value.toString())}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={{
|
||||||
|
padding: 10,
|
||||||
|
flexDirection: "row",
|
||||||
|
borderColor: "white",
|
||||||
|
borderWidth: 1,
|
||||||
|
margin: 10,
|
||||||
|
borderRadius: 5,
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
onPress={() => {
|
||||||
|
Promise.all([
|
||||||
|
AsyncStorage.setItem("iconSwitch", iconSetting.toString()),
|
||||||
|
AsyncStorage.setItem("mapSwitch", mapSwitch.toString()),
|
||||||
|
]).then(() => {
|
||||||
|
Updates.reloadAsync();
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
|
||||||
|
設定を保存して再読み込み
|
||||||
|
</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
@ -1,82 +1,151 @@
|
|||||||
import React, { useState, useEffect, useRef } from 'react';
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
import {View,Text,TouchableOpacity } from 'react-native';
|
import { View, Text, TouchableOpacity, Linking } from "react-native";
|
||||||
import {WebView} from 'react-native-webview';
|
import { WebView } from "react-native-webview";
|
||||||
import StatusbarDetect from '../StatusbarDetect';
|
import StatusbarDetect from "../StatusbarDetect";
|
||||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||||
import MapView,{ Marker, Geojson, PROVIDER_GOOGLE } from 'react-native-maps';
|
import MapView, { Marker, Geojson, PROVIDER_GOOGLE } from "react-native-maps";
|
||||||
import { FontAwesome, Fontisto, Foundation, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
|
import {
|
||||||
|
FontAwesome,
|
||||||
|
Fontisto,
|
||||||
|
Foundation,
|
||||||
|
Ionicons,
|
||||||
|
MaterialCommunityIcons,
|
||||||
|
} from "@expo/vector-icons";
|
||||||
var Status = StatusbarDetect();
|
var Status = StatusbarDetect();
|
||||||
export default function trainMenu({route:{params: {webview}}, navigation:{ navigate }}){
|
export default function trainMenu({
|
||||||
const [stationData,setStationData] = useState(undefined);
|
route: {
|
||||||
const mapRef = useRef();
|
params: { webview, stationData },
|
||||||
useEffect(()=>{
|
},
|
||||||
const HeaderConfig = {headers:{'referer':'https://train.jr-shikoku.co.jp/sp.html'}}
|
navigation: { navigate },
|
||||||
|
}) {
|
||||||
Promise.all([
|
const mapRef = useRef();
|
||||||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=yosan', HeaderConfig).then(response => response.json()),
|
return (
|
||||||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima',HeaderConfig).then(response => response.json()),
|
<View style={{ height: "100%", backgroundColor: "#0099CC" }}>
|
||||||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima2',HeaderConfig).then(response => response.json()),
|
<MapView
|
||||||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan',HeaderConfig).then(response => response.json()),
|
style={{ flex: 1, width: "100%", height: "100%" }}
|
||||||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan2',HeaderConfig).then(response => response.json()),
|
showsUserLocation={true}
|
||||||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=koutoku',HeaderConfig).then(response => response.json()),
|
loadingEnabled={true}
|
||||||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=tokushima',HeaderConfig).then(response => response.json()),
|
showsMyLocationButton={false}
|
||||||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=naruto',HeaderConfig).then(response => response.json())
|
moveOnMarkerPress={false}
|
||||||
]).then(values =>{
|
showsCompass={false}
|
||||||
let stationList = {};
|
ref={mapRef}
|
||||||
[stationList.yosan, stationList.uwajima, stationList.uwajima2, stationList.dosan, stationList.dosan2, stationList.koutoku, stationList.tokushima, stationList.naruto] = values;
|
//provider={PROVIDER_GOOGLE}
|
||||||
setStationData(stationList);
|
initialRegion={{
|
||||||
})
|
latitude: 33.774519,
|
||||||
},[]);
|
longitude: 133.533306,
|
||||||
return(
|
latitudeDelta: 1.8, //小さくなるほどズーム
|
||||||
<View style={{height:"100%",backgroundColor:"#0099CC"}}>
|
longitudeDelta: 1.8,
|
||||||
<MapView style={{flex:1,width:"100%",height: "100%"}}
|
}}
|
||||||
showsUserLocation={true}
|
>
|
||||||
loadingEnabled={true}
|
{stationData &&
|
||||||
showsMyLocationButton={false}
|
Object.keys(stationData).map((d) =>
|
||||||
moveOnMarkerPress={false}
|
stationData[d].map((D, index) => {
|
||||||
showsCompass={false}
|
if (!D.StationMap) return null;
|
||||||
ref={mapRef}
|
const latlng = D.StationMap.replace(
|
||||||
//provider={PROVIDER_GOOGLE}
|
"https://www.google.co.jp/maps/place/",
|
||||||
initialRegion={{
|
""
|
||||||
latitude: 34.194594,
|
).split(",");
|
||||||
longitude: 133.679633,
|
if (latlng.length == 0) return null;
|
||||||
latitudeDelta: 0.5, //小さくなるほどズーム
|
return (
|
||||||
longitudeDelta: 0.5,}}>
|
<Marker
|
||||||
{stationData && Object.keys(stationData).map(d=>
|
key={index}
|
||||||
stationData[d].map((D,index)=>{
|
coordinate={{
|
||||||
if(!D.StationMap)return null;
|
latitude: parseFloat(latlng[0]),
|
||||||
const latlng = D.StationMap.replace("https://www.google.co.jp/maps/place/","").split(",");
|
longitude: parseFloat(latlng[1]),
|
||||||
if(latlng.length == 0)return null;
|
}}
|
||||||
return(
|
onPress={() => {
|
||||||
<Marker key={index} coordinate={{latitude: parseFloat(latlng[0]),longitude: parseFloat(latlng[1])}}
|
webview.current?.injectJavaScript(
|
||||||
onPress={()=>{
|
"MoveDisplayStation('" +
|
||||||
webview.current?.injectJavaScript("MoveDisplayStation('"+d+"_"+D.MyStation+"_"+D.Station_JP+"')");
|
d +
|
||||||
navigate('Apps');
|
"_" +
|
||||||
}}>
|
D.MyStation +
|
||||||
</Marker>
|
"_" +
|
||||||
)
|
D.Station_JP +
|
||||||
})
|
"')"
|
||||||
) }
|
);
|
||||||
</MapView>
|
navigate("Apps");
|
||||||
<View style={{flexDirection:"row"}}>
|
}}
|
||||||
<UsefulBox backgroundColor={"#F89038"} icon="train-car" flex={1} onPressButton={()=>navigate('howto')}>使い方</UsefulBox>
|
></Marker>
|
||||||
<UsefulBox backgroundColor={"#EA4752"} icon="star" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box")}>お気に入り</UsefulBox>
|
);
|
||||||
<UsefulBox backgroundColor={"#91C31F"} icon="clipboard-list-outline" flex={1} onPressButton={()=>Linking.openURL("https://www.jr-shikoku.co.jp/e5489/")}>予約</UsefulBox>
|
})
|
||||||
</View>
|
)}
|
||||||
<TouchableOpacity style={{padding:10,flexDirection:"row",borderColor:"white",borderWidth:1,margin:10,borderRadius:5,alignItems:"center"}} onPress={()=>{AsyncStorage.setItem('status', "2022/04/14");navigate('Apps');}}>
|
</MapView>
|
||||||
<View style={{flex:1}} />
|
<View style={{ flexDirection: "row" }}>
|
||||||
<Text style={{fontSize:25,fontWeight:"bold",color:"white"}}>閉じる</Text>
|
<UsefulBox
|
||||||
<View style={{flex:1}} />
|
backgroundColor={"#F89038"}
|
||||||
</TouchableOpacity>
|
icon="train-car"
|
||||||
</View>
|
flex={1}
|
||||||
)
|
onPressButton={() => navigate("howto")}
|
||||||
|
>
|
||||||
|
使い方
|
||||||
|
</UsefulBox>
|
||||||
|
<UsefulBox
|
||||||
|
backgroundColor={"#EA4752"}
|
||||||
|
icon="star"
|
||||||
|
flex={1}
|
||||||
|
onPressButton={() =>
|
||||||
|
/* Linking.openURL(
|
||||||
|
"https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
|
||||||
|
) */
|
||||||
|
alert("お気に入り駅登録機能は現在開発中です！レイアウト募集中！")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
お気に入り
|
||||||
|
</UsefulBox>
|
||||||
|
<UsefulBox
|
||||||
|
backgroundColor={"#91C31F"}
|
||||||
|
icon="clipboard-list-outline"
|
||||||
|
flex={1}
|
||||||
|
onPressButton={() =>
|
||||||
|
Linking.openURL(
|
||||||
|
"https://nexcloud.haruk.in/apps/forms/ZRHjWFF7znr5Xjr2"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
この機能のフィードバック
|
||||||
|
</UsefulBox>
|
||||||
|
</View>
|
||||||
|
<TouchableOpacity
|
||||||
|
style={{
|
||||||
|
padding: 10,
|
||||||
|
flexDirection: "row",
|
||||||
|
borderColor: "white",
|
||||||
|
borderWidth: 1,
|
||||||
|
margin: 10,
|
||||||
|
borderRadius: 5,
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
onPress={() => {
|
||||||
|
AsyncStorage.setItem("status", "2022/04/14");
|
||||||
|
navigate("Apps");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
<Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
|
||||||
|
閉じる
|
||||||
|
</Text>
|
||||||
|
<View style={{ flex: 1 }} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
const UsefulBox = (props) =>{
|
const UsefulBox = (props) => {
|
||||||
const { icon, backgroundColor, flex, onPressButton, children } = props;
|
const { icon, backgroundColor, flex, onPressButton, children } = props;
|
||||||
return(
|
return (
|
||||||
<TouchableOpacity style={{flex:flex,backgroundColor:backgroundColor,padding:10,alignItems:"center",margin:2}} onPress={onPressButton}>
|
<TouchableOpacity
|
||||||
<MaterialCommunityIcons name={icon} color="white" size={50}/>
|
style={{
|
||||||
<Text style={{color:"white",fontWeight:"bold",fontSize:18}}>{children}</Text>
|
flex: flex,
|
||||||
|
backgroundColor: backgroundColor,
|
||||||
|
padding: 10,
|
||||||
|
alignItems: "center",
|
||||||
|
margin: 2,
|
||||||
|
}}
|
||||||
|
onPress={onPressButton}
|
||||||
|
>
|
||||||
|
<MaterialCommunityIcons name={icon} color="white" size={50} />
|
||||||
|
<Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
|
||||||
|
{children}
|
||||||
|
</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
)
|
);
|
||||||
}
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user