路線表示に駅名標を追加

Apps.js

@@ -27,6 +27,7 @@ export default function Apps(props) {
   //画面表示関連
   const [iconSetting, setIconSetting] = useState(undefined);
   const [mapSwitch, setMapSwitch] = useState(undefined);
+  const [stationMenu, setStationMenu] = useState(undefined);
 
   //地図用
   const [mapsStationData, setMapsStationData] = useState(undefined);
@@ -41,46 +42,14 @@ export default function Apps(props) {
   const [stationBoardData, setStationBoardData] = useState(undefined);
   const [originalStationList, setOriginalStationList] = useState();
   const [selectedStation, setSelectedStation] = useState(undefined);
-  useEffect(() => {
+  useEffect(() => getStationList().then(setOriginalStationList), []);
-    getStationList().then(setOriginalStationList);
-  }, []);
-
-  useEffect(() => {
-    if (!originalStationList) return () => {};
-    const findStationEachLine = (selectLine) =>
-      selectLine.filter((d) => d.Station_JP == selectedStation);
-
-    const lineList = [
-      "予讃線",
-      "松宇線",
-      "伊予灘線",
-      "土讃線",
-      "窪川線",
-      "高徳線",
-      "徳島線",
-      "鳴門線",
-    ];
-    let returnDataBase = lineList
-      .map((d) => findStationEachLine(originalStationList[d]))
-      .filter((d) => d.length > 0)
-      .reduce((pre, current) => {
-        pre.push(...current);
-        return pre;
-      }, []);
-    if (returnDataBase.length) {
-      let currentStation = currentStation == undefined ? [] : currentStation;
-      if (currentStation.toString() != returnDataBase.toString()) {
-        setStationBoardData(returnDataBase);
-        StationBoardAcSR.current?.setModalVisible();
-      }
-    } else {
-      setStationBoardData(undefined);
-      StationBoardAcSR.current?.hide();
-    }
-  }, [originalStationList, selectedStation]);
 
   //地図表示テキスト
-  const injectJavascript = injectJavascriptData(mapSwitch, iconSetting);
+  const injectJavascript = injectJavascriptData(
+    mapSwitch,
+    iconSetting,
+    stationMenu
+  );
 
   useEffect(() => {
     //ニュース表示
@@ -123,6 +92,22 @@ export default function Apps(props) {
           Updates.reloadAsync()
         )
       );
+    //駅メニュースイッチ
+    AsyncStorage.getItem("stationSwitch")
+      .then((d) => {
+        if (d) {
+          setStationMenu(d);
+        } else {
+          AsyncStorage.setItem("stationSwitch", "true").then(() =>
+            Updates.reloadAsync()
+          );
+        }
+      })
+      .catch((d) =>
+        AsyncStorage.setItem("stationSwitch", "true").then(() =>
+          Updates.reloadAsync()
+        )
+      );
   }, []);
 
   return (
@@ -146,7 +131,6 @@ export default function Apps(props) {
         allowsBackForwardNavigationGestures={true}
         setSupportMultipleWindows={true}
         onNavigationStateChange={(event) => {
-          console.log(event);
           if (event.url != urlcache) {
             //URL二重判定回避
             urlcache = event.url;
@@ -168,7 +152,50 @@ export default function Apps(props) {
           }
         }}
         onMessage={(event) => {
-          console.log(event.nativeEvent.data);
+          if (event.nativeEvent.data.includes("PopUpMenu")) {
+            const selectedStationPDFAddress = event.nativeEvent.data
+              .split(",")[3]
+              .replace("'", "")
+              .replace("'", "");
+
+            if (!originalStationList) alert("originalStationListがありません");
+            const findStationEachLine = (selectLine) => {
+              let NearStation = selectLine.filter(
+                (d) => d.StationTimeTable == selectedStationPDFAddress
+              );
+              return NearStation;
+            };
+
+            const lineList = [
+              "予讃線",
+              "松宇線",
+              "伊予灘線",
+              "土讃線",
+              "窪川線",
+              "高徳線",
+              "徳島線",
+              "鳴門線",
+              "瀬戸大橋線",
+            ];
+            let returnDataBase = lineList
+              .map((d) => findStationEachLine(originalStationList[d]))
+              .filter((d) => d.length > 0)
+              .reduce((pre, current) => {
+                pre.push(...current);
+                return pre;
+              }, []);
+            if (returnDataBase.length) {
+              let currentStation =
+                currentStation == undefined ? [] : currentStation;
+              setStationBoardData(returnDataBase);
+              StationBoardAcSR.current?.setModalVisible();
+            } else {
+              setStationBoardData(undefined);
+              StationBoardAcSR.current?.hide();
+            }
+
+            return;
+          }
           navigate("trainbase", { info: event.nativeEvent.data });
         }}
         injectedJavaScript={injectJavascript}

TestArea.js

@@ -11,7 +11,6 @@ export default function TestArea(props) {
   useEffect(() => {
     data == null
       ? test().then((res) => {
-          //console.log(res);
           setdata(res);
         })
       : null;
@@ -44,7 +43,6 @@ async function test() {
     .then((D) => {
       let d = [];
       D.forEach((element) => {
-        console.log(element);
         d.push(
           <ListItem
             title={

components/ActionSheetComponents/StationDeteilView.js

@@ -41,6 +41,7 @@ import { TextBox } from "../atom/TextBox";
 
 export const StationDeteilView = (props) => {
   const { StationBoardAcSR, currentStation, originalStationList } = props;
+
   return (
     <ActionSheet
       ref={StationBoardAcSR}

components/settings.js

@@ -12,6 +12,7 @@ export default function Setting(props) {
   } = props;
   const [iconSetting, setIconSetting] = useState(undefined);
   const [mapSwitch, setMapSwitch] = useState(undefined);
+  const [stationMenu, setStationMenu] = useState(undefined);
   useEffect(() => {
     AsyncStorage.getItem("iconSwitch").then((d) => {
       setIconSetting(d);
@@ -19,8 +20,10 @@ export default function Setting(props) {
     AsyncStorage.getItem("mapSwitch").then((d) => {
       setMapSwitch(d);
     });
+    AsyncStorage.getItem("stationSwitch").then((d) => {
+      setStationMenu(d);
+    });
   }, []);
-  console.log(iconSetting);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <View style={{ flex: 1, backgroundColor: "white" }}>
@@ -76,6 +79,25 @@ export default function Setting(props) {
               onValueChange={(value) => setMapSwitch(value.toString())}
             />
           </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={stationMenu == "true" ? true : false}
+              color={stationMenu == "true" ? "red" : null}
+              onValueChange={(value) => setStationMenu(value.toString())}
+            />
+          </View>
           <View style={{ flexDirection: "row", padding: 10 }}>
             <Text
               style={{
@@ -120,6 +142,7 @@ export default function Setting(props) {
           Promise.all([
             AsyncStorage.setItem("iconSwitch", iconSetting.toString()),
             AsyncStorage.setItem("mapSwitch", mapSwitch.toString()),
+            AsyncStorage.setItem("stationSwitch", stationMenu.toString()),
           ]).then(() => {
             Updates.reloadAsync();
           });

components/発車時刻表/LED_vidion.js

@@ -60,7 +60,6 @@ export default function LED_vision(props) {
   const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
 
   useEffect(() => {
-    console.log("LED");
     fetch(
       "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=traintimeinfo&arg3=dia",
       HeaderConfig

components/駅名表/Sign.js

@@ -25,6 +25,7 @@ export default function Sign(props) {
       "高徳線",
       "徳島線",
       "鳴門線",
+      "瀬戸大橋線",
     ];
     let returnData;
     lineList.forEach((d) => {
@@ -66,9 +67,8 @@ export default function Sign(props) {
         margin: 10,
         marginHorizontal: wp("10%"),
       }}
-      /* onPress={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)}  */ onPress={
+      /* onPress={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)}  */
-        oP
+      onPress={oP}
-      }
     >
       <View
         style={{
@@ -92,32 +92,34 @@ export default function Sign(props) {
       >
         JR
       </Text>
-      {currentStation.map((d, index, array) => (
+      {currentStation
-        <View
+        .filter((d) => (d.StationNumber != " " ? true : false))
-          style={{
+        .map((d, index, array) => (
-            position: "absolute",
+          <View
-            alignContent: "center",
+            style={{
-            alignItems: "center",
+              position: "absolute",
-            top:
+              alignContent: "center",
-              (() => {
+              alignItems: "center",
-                if (array.length == 1) return 20;
+              top:
-                else if (index == 0) return 5;
+                (() => {
-                else if (index == 1) return 35;
+                  if (array.length == 1) return 20;
-                else return 20;
+                  else if (index == 0) return 5;
-              })() + "%",
+                  else if (index == 1) return 35;
-            right: "10%",
+                  else return 20;
-            width: wp("10%"),
+                })() + "%",
-            height: wp("10%"),
+              right: "10%",
-            borderColor: "#2E94BB",
+              width: wp("10%"),
-            borderWidth: parseInt("2%"),
+              height: wp("10%"),
-            borderRadius: parseInt("100%"),
+              borderColor: "#2E94BB",
-          }}
+              borderWidth: parseInt("2%"),
-        >
+              borderRadius: parseInt("100%"),
-          <View style={{ flex: 1 }} />
+            }}
-          <Text style={{ fontSize: parseInt("20%") }}>{d.StationNumber}</Text>
+          >
-          <View style={{ flex: 1 }} />
+            <View style={{ flex: 1 }} />
-        </View>
+            <Text style={{ fontSize: parseInt("20%") }}>{d.StationNumber}</Text>
-      ))}
+            <View style={{ flex: 1 }} />
+          </View>
+        ))}
       <View
         style={{
           position: "absolute",
@@ -160,8 +162,8 @@ export default function Sign(props) {
           flexDirection: "column",
         }}
       >
-        {(() => {
+        {
-          return currentStation.map((currentStation) => {
+          currentStation.map((currentStation) => {
             let [preStation, nexStation] = getPreNextStation(currentStation);
             return (
               <View
@@ -190,26 +192,28 @@ export default function Sign(props) {
                     >
                       ◀
                     </Text>,
-                    <View
+                    preStation.StationNumber != " " && (
-                      style={{
+                      <View
-                        alignContent: "center",
+                        style={{
-                        alignItems: "center",
+                          alignContent: "center",
-                        width: wp("8%"),
+                          alignItems: "center",
-                        height: wp("8%"),
+                          width: wp("8%"),
-                        margin: wp("1%"),
+                          height: wp("8%"),
-                        borderColor: "white",
+                          margin: wp("1%"),
-                        borderWidth: parseInt("2%"),
+                          borderColor: "white",
-                        borderRadius: parseInt("100%"),
+                          borderWidth: parseInt("2%"),
-                      }}
+                          borderRadius: parseInt("100%"),
-                    >
+                        }}
-                      <View style={{ flex: 1 }} />
-                      <Text
-                        style={{ fontSize: parseInt("10%"), color: "white" }}
                       >
-                        {preStation.StationNumber}
+                        <View style={{ flex: 1 }} />
-                      </Text>
+                        <Text
-                      <View style={{ flex: 1 }} />
+                          style={{ fontSize: parseInt("10%"), color: "white" }}
-                    </View>,
+                        >
+                          {preStation.StationNumber}
+                        </Text>
+                        <View style={{ flex: 1 }} />
+                      </View>
+                    ),
                     <View style={{ flex: 1, alignItems: "flex-start" }}>
                       <Text
                         style={{
@@ -303,8 +307,8 @@ export default function Sign(props) {
                 </View>
               </View>
             );
-          })[nexPrePosition];
+          })[nexPrePosition]
-        })()}
+        }
       </View>
     </TouchableOpacity>
   );

lib/getStationList.js

@@ -48,6 +48,10 @@ export const getStationList = async (props) => {
       "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=naruto",
       HeaderConfig
     ).then((response) => response.json()),
+    fetch(
+      "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=seto",
+      HeaderConfig
+    ).then((response) => response.json()),
     fetch(
       "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=between",
       HeaderConfig
@@ -67,6 +71,7 @@ export const getStationList = async (props) => {
       stationList.高徳線,
       stationList.徳島線,
       stationList.鳴門線,
+      stationList.瀬戸大橋線,
       stationList.駅間リスト,
       stationList.日英対応表,
     ] = values;
@@ -120,7 +125,6 @@ export const getStationList = async (props) => {
         return data;
       });
     };
-    console.log(stationList.予讃線);
     stationList.予讃線 = addStationPosition(
       concatBetweenStations(stationList.予讃線),
       予讃線,
@@ -160,7 +164,22 @@ export const getStationList = async (props) => {
       concatBetweenStations(stationList.鳴門線),
       鳴門線,
       stationList.日英対応表
-    );
+    ); /* 
+    stationList.瀬戸大橋線 = [
+      {
+        Station_JP: "児島",
+        Station_EN: "Kojima",
+        MyStation: "0",
+        StationNumber: "M12",
+        DispNum: "3",
+        StationTimeTable:
+          "http://www.jr-odekake.net/eki/timetable.php?id=0651304",
+        StationMap: "https://www.google.co.jp/maps/place/34.462562,133.807809",
+        JrHpUrl: "http://www.jr-odekake.net/eki/top.php?id=0651304",
+        lat: 34.462562,
+        lng: 133.807809,
+      },
+    ]; */
     status = stationList;
     return stationList;
   });

lib/webViewInjectjavascript.js

@@ -1,4 +1,4 @@
-export const injectJavascriptData = (mapSwitch, iconSetting) => {
+export const injectJavascriptData = (mapSwitch, iconSetting, stationMenu) => {
   const topMenu =
     mapSwitch != "true"
       ? `
@@ -693,7 +693,7 @@ observer.observe(target, {
 });
 `;
 
-  const modal_content = `
+  const makeTrainView = `
 
 const modal_content = document.getElementById('modal_content'); // body要素を監視
 const modal_observer = new MutationObserver( (mutations) => {
@@ -714,6 +714,44 @@ modal_observer.observe(modal_content, {
   //subtree: true // 子孫ノードも監視対象に含める
 });
 `;
+  const makeStationMenu =
+    stationMenu == "true"
+      ? `
+const setStationMenuDialog = () =>{
+  document.querySelector('#pMENU_2').style.display='none';
+document.querySelector('#pMENU_3').style.display='none';
+document.querySelector('#pMENU_2').style.display='none';
+const data =[];
+document.querySelectorAll('#disp div div').forEach(d=>d.id.indexOf("st")!= -1 && data.push(d));
 
-  return bootData + modal_content + trainIconMaker + textInsert;
+for(let d of data ){
+    if(!d.offclick){
+      d.offclick = d.onclick.toString();
+    }
+    d.onclick = () =>{ 
+      window.ReactNativeWebView.postMessage(d.offclick);
+    }
+  }
+}
+
+
+const observer3 = new MutationObserver( (mutations) => {
+// observer3.disconnect(); // 監視を終了
+setStationMenuDialog();
+});
+
+// 監視を開始
+observer3.observe(target, {
+  attributes: true, // 属性変化の監視
+  //attributeOldValue: true, // 変化前の属性値を matation.oldValue に格納する
+  //characterData: true, // テキストノードの変化を監視
+  //characterDataOldValue: true, // 変化前のテキストを matation.oldValue に格納する
+  childList: true, // 子ノードの変化を監視
+  //subtree: true // 子孫ノードも監視対象に含める
+});
+`
+      : ``;
+  return (
+    bootData + makeTrainView + trainIconMaker + textInsert + makeStationMenu
+  );
 };

menu.js

@@ -80,7 +80,6 @@ export default function Menu(props) {
   const [originalStationList, setOriginalStationList] = useState();
   useEffect(() => {
     getStationList().then((stationList) => {
-      console.log(stationList);
       setOriginalStationList(stationList);
     });
   }, []);
@@ -116,6 +115,7 @@ export default function Menu(props) {
       "高徳線",
       "徳島線",
       "鳴門線",
+      "瀬戸大橋線",
     ];
     let returnDataBase = lineList
       .map((d) => findStationEachLine(originalStationList[d]))

trainbaseview.js

@@ -11,7 +11,6 @@ export default function TrainBase({ route }) {
     `document.getElementsByTagName("html")[0].style['font-size'] = '11px';`
   }`;
   //const jss = `alert("ほげ")`;
-  console.log(info);
   return (
     <View style={{ height: "100%" }}>
       {Platform.OS == "ios" && <StatusBar barStyle="dark-content" />}