路線表示に駅名標を追加

2022-11-05 19:11:14 +09:00 · 2022-11-05 19:11:14 +09:00 · 8d5ad6e50e
commit 8d5ad6e50e
parent 673f7d94cf
10 changed files with 211 additions and 103 deletions
--- a/Apps.js
+++ b/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(() => {
-    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]);
+  useEffect(() => getStationList().then(setOriginalStationList), []);

  //地図表示テキスト
-  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}
--- a/TestArea.js
+++ b/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={
--- a/components/ActionSheetComponents/StationDeteilView.js
+++ b/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}
--- a/components/settings.js
+++ b/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();
          });
--- a/components/発車時刻表/LED_vidion.js
+++ b/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
--- a/components/駅名表/Sign.js
+++ b/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={
-        oP
-      }
+      /* onPress={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)}  */
+      onPress={oP}
    >
      <View
        style={{
@ -92,32 +92,34 @@ export default function Sign(props) {
      >
        JR
      </Text>
-      {currentStation.map((d, index, array) => (
-        <View
-          style={{
-            position: "absolute",
-            alignContent: "center",
-            alignItems: "center",
-            top:
-              (() => {
-                if (array.length == 1) return 20;
-                else if (index == 0) return 5;
-                else if (index == 1) return 35;
-                else return 20;
-              })() + "%",
-            right: "10%",
-            width: wp("10%"),
-            height: wp("10%"),
-            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>
-      ))}
+      {currentStation
+        .filter((d) => (d.StationNumber != " " ? true : false))
+        .map((d, index, array) => (
+          <View
+            style={{
+              position: "absolute",
+              alignContent: "center",
+              alignItems: "center",
+              top:
+                (() => {
+                  if (array.length == 1) return 20;
+                  else if (index == 0) return 5;
+                  else if (index == 1) return 35;
+                  else return 20;
+                })() + "%",
+              right: "10%",
+              width: wp("10%"),
+              height: wp("10%"),
+              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>
+        ))}
      <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
-                      style={{
-                        alignContent: "center",
-                        alignItems: "center",
-                        width: wp("8%"),
-                        height: wp("8%"),
-                        margin: wp("1%"),
-                        borderColor: "white",
-                        borderWidth: parseInt("2%"),
-                        borderRadius: parseInt("100%"),
-                      }}
-                    >
-                      <View style={{ flex: 1 }} />
-                      <Text
-                        style={{ fontSize: parseInt("10%"), color: "white" }}
+                    preStation.StationNumber != " " && (
+                      <View
+                        style={{
+                          alignContent: "center",
+                          alignItems: "center",
+                          width: wp("8%"),
+                          height: wp("8%"),
+                          margin: wp("1%"),
+                          borderColor: "white",
+                          borderWidth: parseInt("2%"),
+                          borderRadius: parseInt("100%"),
+                        }}
                      >
-                        {preStation.StationNumber}
-                      </Text>
-                      <View style={{ flex: 1 }} />
-                    </View>,
+                        <View style={{ flex: 1 }} />
+                        <Text
+                          style={{ fontSize: parseInt("10%"), color: "white" }}
+                        >
+                          {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>
  );
--- a/lib/getStationList.js
+++ b/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;
  });
--- a/lib/webViewInjectjavascript.js
+++ b/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
+  );
 };
--- a/menu.js
+++ b/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]))
--- a/trainbaseview.js
+++ b/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" />}