全列番検索機能の実装

MenuPage.js

@@ -10,6 +10,8 @@ import Menu from "./menu";
 import Setting from "./components/settings.js";
 import { useFavoriteStation } from "./stateBox/useFavoriteStation";
 import { optionData } from "./lib/stackOption.js";
+import CurrentTrainListView from "./components/CurrentTrainListView.js";
+import AllTrainDiagramView from "./components/AllTrainDiagramView.js";
 const Stack = createStackNavigator();
 
 export function MenuPage({ navigation, getCurrentTrain }) {
@@ -56,6 +58,30 @@ export function MenuPage({ navigation, getCurrentTrain }) {
       >
         {(props) => <TrainBase {...props} />}
       </Stack.Screen>
+      <Stack.Screen
+        name="currentTrainIDList"
+        options={{
+          ...TransitionPresets.ModalPresentationIOS,
+          cardOverlayEnabled: true,
+          headerShown: false,
+          gestureEnabled: true,
+          headerTransparent: true,
+          gestureResponseDistance: { vertical: 300 },
+        }}
+      >
+        {(props) => <CurrentTrainListView {...props} />}
+      </Stack.Screen>
+      <Stack.Screen
+        name="AllTrainIDList"
+        options={{
+          ...TransitionPresets.ModalPresentationIOS,
+          cardOverlayEnabled: true,
+          headerShown: false,
+          headerTransparent: true,
+        }}
+      >
+        {(props) => <AllTrainDiagramView {...props} />}
+      </Stack.Screen>
       <Stack.Screen
         name="howto"
         options={{

components/AllTrainDiagramView.js

@@ -0,0 +1,124 @@
+import React, { useRef, useState, useEffect } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Linking,
+  ScrollView,
+} from "react-native";
+import MapView, { Marker } from "react-native-maps";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useCurrentTrain } from "../stateBox/useCurrentTrain";
+import { useAreaInfo } from "../stateBox/useAreaInfo";
+import { useAllTrainDiagram } from "../stateBox/useAllTrainDiagram";
+import { EachTrainInfo } from "./ActionSheetComponents/EachTrainInfo";
+
+import { customTrainDataDetector } from "./custom-train-data";
+import { getStationList, lineList } from "../lib/getStationList";
+import { getTrainType } from "../lib/getTrainType";
+import { checkDuplicateTrainData } from "../lib/checkDuplicateTrainData";
+import { SheetManager } from "react-native-actions-sheet";
+export default function AllTrainDiagramView({ navigation: { navigate } }) {
+  const { currentTrain } = useCurrentTrain();
+  const { areaInfo } = useAreaInfo();
+  const { allTrainDiagram } = useAllTrainDiagram();
+  const [originalStationList, setOriginalStationList] = useState(); // 第一要素
+  useEffect(() => getStationList().then(setOriginalStationList), []);
+
+  const openTrainInfo = (d) => {
+    const train = customTrainDataDetector(d);
+    let TrainNumber = "";
+    if (train.trainNumDistance != undefined) {
+      const timeInfo =
+        parseInt(d.replace("M", "").replace("D", "")) - train.trainNumDistance;
+      TrainNumber = timeInfo + "号";
+    }
+    const payload = {
+      data: {
+        trainNum: d,
+        limited: `${getTrainType(train.type).data}:${
+          train.trainName
+        }${TrainNumber}`,
+        trainData: checkDuplicateTrainData(
+          currentTrain.filter((a) => a.num == d)
+        ),
+      },
+      navigate,
+      originalStationList,
+      from: "LED",
+    };
+    SheetManager.show("EachTrainInfo", {
+      payload,
+    });
+  };
+  return (
+    <View style={{ backgroundColor: "#0099CC", height: "100%" }}>
+      <ScrollView>
+        {allTrainDiagram &&
+          Object.keys(allTrainDiagram).map((key) => {
+            return (
+              <TouchableOpacity
+                style={{
+                  padding: 10,
+                  flexDirection: "row",
+                  borderColor: "white",
+                  borderWidth: 1,
+                  margin: 10,
+                  borderRadius: 5,
+                  alignItems: "center",
+                }}
+                onPress={() => openTrainInfo(key)}
+              >
+                <View style={{ flex: 1 }} />
+                <Text
+                  style={{ fontSize: 25, fontWeight: "bold", color: "white" }}
+                >
+                  {key}
+                </Text>
+                <View style={{ flex: 1 }} />
+              </TouchableOpacity>
+            );
+          })}
+      </ScrollView>
+
+      <TouchableOpacity
+        style={{
+          padding: 10,
+          flexDirection: "row",
+          borderColor: "white",
+          borderWidth: 1,
+          margin: 10,
+          borderRadius: 5,
+          alignItems: "center",
+        }}
+        onPress={() => navigate("menu")}
+      >
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          閉じる
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+    </View>
+  );
+}
+const UsefulBox = (props) => {
+  const { icon, backgroundColor, flex, onPressButton, children } = props;
+  return (
+    <TouchableOpacity
+      style={{
+        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>
+  );
+};

components/CurrentTrainListView.js

@@ -0,0 +1,51 @@
+import React, { useRef } from "react";
+import { View, Text, TouchableOpacity, Linking } from "react-native";
+import MapView, { Marker } from "react-native-maps";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useCurrentTrain } from "../stateBox/useCurrentTrain";
+export default function CurrentTrainListView({ navigation: { navigate } }) {
+  const { currentTrain } = useCurrentTrain();
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      {currentTrain && currentTrain.map((d) => <Text>{d.num}</Text>)}
+      <TouchableOpacity
+        style={{
+          padding: 10,
+          flexDirection: "row",
+          borderColor: "white",
+          borderWidth: 1,
+          margin: 10,
+          borderRadius: 5,
+          alignItems: "center",
+        }}
+        onPress={() => navigate("menu")}
+      >
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          閉じる
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+    </View>
+  );
+}
+const UsefulBox = (props) => {
+  const { icon, backgroundColor, flex, onPressButton, children } = props;
+  return (
+    <TouchableOpacity
+      style={{
+        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>
+  );
+};

stateBox/useAllTrainDiagram.js

@@ -0,0 +1,38 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+const initialState = {
+  allTrainDiagram: undefined,
+  setAllTrainDiagram: () => {},
+};
+
+const AllTrainDiagramContext = createContext(initialState);
+
+export const useAllTrainDiagram = () => {
+  return useContext(AllTrainDiagramContext);
+};
+
+export const AllTrainDiagramProvider = ({ children }) => {
+  const [allTrainDiagram, setAllTrainDiagram] = useState();
+  useEffect(() => {
+    fetch(
+      "https://script.google.com/macros/s/AKfycbx_s7RB-xTy-iAslFJg7LfplLV09-hjDXEjdi9kCP_JT45wq17Af_IPOKIOqIfaNDg/exec"
+    )
+      .then((res) => res.json())
+      .then((res) => {
+        const data = {};
+        res.forEach((d) => {
+          const keys = Object.keys(d);
+          data[keys] = d[keys];
+        });
+        return data;
+      })
+      .then((res) => setAllTrainDiagram(res));
+  }, []);
+
+  return (
+    <AllTrainDiagramContext.Provider
+      value={{ allTrainDiagram, setAllTrainDiagram }}
+    >
+      {children}
+    </AllTrainDiagramContext.Provider>
+  );
+};