トップメニューのデザイン改修と地図表示の最適化

2022-09-27 13:28:26 +09:00
parent 6b280a51d7
commit b234b056c3
4 changed files with 552 additions and 257 deletions
--- a/Apps.js
+++ b/Apps.js
@@ -1,28 +1,102 @@
-import React, { useEffect, useRef, useState } from 'react';
-import {View, Platform,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 React, { useEffect, useRef, useState } from "react";
+import {
+  View,
+  Platform,
+  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';
 var Status = StatusbarDetect(); */

 export var webview = null;

-export default function Apps (props) {
-  const { navigation: { navigate } } = props;
-  var urlcache="";
+export default function Apps(props) {
+  const {
+    navigation: { navigate },
+  } = props;
+  var urlcache = "";
  const webview = useRef();
-  const [iconSetting, setIconSetting] = useState(undefined)
+  const [iconSetting, setIconSetting] = 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 = `
-  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';
+    Promise.all([
+      fetch(
+        "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=yosan",
+        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);
+    });
+  }, []);
+
+  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 = () =>{
    try{
      document.getElementById('refreshIcon').click();
@@ -35,7 +109,7 @@ export default function Apps (props) {
  setReload();
 `;

-const trainIconMaker = `
+  const trainIconMaker = `
  const setStationIcon = (行き先アイコン,img) =>{
    let newItem = document.createElement("div");
    if(行き先アイコン.getAttribute("style").includes("left")){
@@ -46,11 +120,11 @@ const trainIconMaker = `
    }
    行き先アイコン.remove();
  }
-`
+`;

-
-
-const trainIcon = iconSetting == "true" ?  `
+  const trainIcon =
+    iconSetting == "true"
+      ? `
 switch(列番データ){
  //しおかぜメイン
  //8000 ノーマル
@@ -467,12 +541,16 @@ switch(列番データ){
  default:
    break;
 }
-` : ``;
+`
+      : ``;

-const JRF_icon  = iconSetting == "true" ? `
+  const JRF_icon =
+    iconSetting == "true"
+      ? `
  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(列番データ)){
    行き先情報.innerText = "ワンマン\\n"+行き先情報.innerText;
    flag=true;
@@ -492,8 +570,9 @@ const normal_train_name = `
  else if(列番データ.indexOf("S") != -1){
    行き先情報.innerText = 行き先情報.innerText+"臨時列車\\n";
  }
-`
-const JRF_name = `
+`;
+  const JRF_name =
+    `
  let JRF = false;
  switch(列番データ){
    case "71":
@@ -538,7 +617,7 @@ const JRF_name = `
    default:
      JRF = true;
  }
-  `+JRF_icon;
+  ` + JRF_icon;

  const TKT_name = `
    //安芸行と併結列車を個別に表示、それ以外をdefaultで下りなら既定の行き先を、上りなら奈半利行を設定
@@ -575,9 +654,10 @@ const JRF_name = `
        break;
    }
  
-`
+`;

-const textInsert = `
+  const textInsert =
+    `
 const setStrings = () =>{
  try {
  var elements = document.querySelectorAll('[onclick]');
@@ -588,7 +668,12 @@ const setStrings = () =>{
    var flag=false;
    var TrainType = undefined;
    if(行き先情報.innerText.includes(列番データ))continue; //回避
-    `+trainIcon+normal_train_name+JRF_name+TKT_name+`
+    ` +
+    trainIcon +
+    normal_train_name +
+    JRF_name +
+    TKT_name +
+    `
    //列番付与
    行き先情報.innerText = 行き先情報.innerText+列番データ+(JRF ? "":"レ");
  }
@@ -686,89 +771,134 @@ observer.observe(target, {
    childList: true, // 子ノードの変化を監視
    //subtree: true // 子孫ノードも監視対象に含める
 });
-`
+`;

-const injectJavascriptData = bootData+trainIconMaker+textInsert;
+  const injectJavascriptData = bootData + trainIconMaker + textInsert;

-
-
-  useEffect(()=>{
+  useEffect(() => {
    AsyncStorage.getItem("status")
-    .then(d=>{
-      if(d != "2022/06/11"){
-        navigate('news');
-      }
-    })
-    .catch(e=>{
-      navigate('news');
-    })
-  },[])
-  useEffect(()=>{
-    AsyncStorage.getItem("iconSwitch").then( d =>{
-      if(d){
-        setIconSetting(d);
-      }
-      else{
-        AsyncStorage.setItem("iconSwitch","true").then(()=>Updates.reloadAsync())
-      }
-      
-       
-    }).catch(d=>AsyncStorage.setItem("iconSwitch","true").then(()=>Updates.reloadAsync()))
+      .then((d) => {
+        if (d != "2022/06/11") {
+          navigate("news");
+        }
+      })
+      .catch((e) => {
+        navigate("news");
+      });
+  }, []);
+  useEffect(() => {
+    AsyncStorage.getItem("iconSwitch")
+      .then((d) => {
+        if (d) {
+          setIconSetting(d);
+        } else {
+          AsyncStorage.setItem("iconSwitch", "true").then(() =>
+            Updates.reloadAsync()
+          );
+        }
+      })
+      .catch((d) =>
+        AsyncStorage.setItem("iconSwitch", "true").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()))
-
-  },[])
-
-
-  
+    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 (
-    <View style={{height:"100%",paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight: 0,}}>
+    <View
+      style={{
+        height: "100%",
+        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+      }}
+    >
      {/* {Status} */}
-      <WebView 
-      useWebKit={true}
-      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={true}
-      allowsBackForwardNavigationGestures={true}
-      setSupportMultipleWindows={false}
-      onNavigationStateChange={
-        event =>{
+      <WebView
+        useWebKit={true}
+        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={true}
+        allowsBackForwardNavigationGestures={true}
+        setSupportMultipleWindows={false}
+        onNavigationStateChange={(event) => {
          console.log(event);
-          if(event.url != urlcache){//URL二重判定回避
+          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');
+
+            if (
+              event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")
+            ) {
+              if (Platform.OS === "android") navigate("howto");
              webview?.current.goBack();
              //Actions.howto();
-            }
-            else if (event.url.includes("https://train.jr-shikoku.co.jp/train.html")) {
+            } 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});
+              if (Platform.OS === "android")
+                navigate("trainbase", { info: event.url });
              webview?.current.goBack();
            }
          }
-        }
-      } 
-      onMessage={(event)=>{}}
-      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"}}>
-        <View style={{flex:1}}/>
-        <Text style={{textAlign:"center",width:"auto",height:"auto",textAlignVertical:"center"}}>線</Text>
-        <View style={{flex:1}}/>
+        }}
+        onMessage={(event) => {}}
+        injectedJavaScript={injectJavascriptData}
+      />
+      <TouchableOpacity
+        onPress={() => navigate("trainMenu", { webview, stationData })}
+        style={{
+          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>
-      
    </View>
  );
-}
+}