列車種別フィルタリングを実装するための準備

2025-09-04 18:14:33 +00:00
parent 92b5052f3b
commit cafb5b04f5
3 changed files with 104 additions and 47 deletions
--- a/components/StationDiagram/ExGridView.tsx
+++ b/components/StationDiagram/ExGridView.tsx
@@ -24,22 +24,22 @@ import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { ExGridViewTimePositionItem } from "./ExGridViewTimePositionItem";
 import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
 import dayjs from "dayjs";
-
+type hoge = {
+  trainNumber: string;
+  array: string;
+  name: string;
+  timeType: string;
+  time: string;
+}[];
 export const ExGridView: FC<{
-  data: {
-    trainNumber: string;
-    array: string;
-    name: string;
-    type: string;
-    time: string;
-  }[];
+  data: hoge;
 }> = ({ data }) => {
  const groupedData: {
    [d: number]: {
      trainNumber: string;
      array: string;
      name: string;
-      type: string;
+      timeType: string;
      time: string;
      isOperating: boolean;
    }[];
@@ -69,7 +69,7 @@ export const ExGridView: FC<{
    "2": [],
    "3": [],
  };
-  const groupKeys: string[] = [
+  const groupKeys = [
    "4",
    "5",
    "6",
--- a/components/StationDiagram/ExGridViewItem.tsx
+++ b/components/StationDiagram/ExGridViewItem.tsx
@@ -24,7 +24,7 @@ export const ExGridViewItem: FC<{
    trainNumber: string;
    array: string;
    name: string;
-    type: string;
+    timeType: string;
    time: string;
    isOperating: boolean;
  };
@@ -108,7 +108,7 @@ export const ExGridViewItem: FC<{
        ];
      default:
        // 行先がある場合は、行先を取得
-        const trainName = (d.type == "着" || d.type == "着編") ? trainData[0].split(",")[0] : trainData[trainData.length - 1].split(",")[0]
+        const trainName = (d.timeType == "着" || d.timeType == "着編") ? trainData[0].split(",")[0] : trainData[trainData.length - 1].split(",")[0]
        return [
          typeString,
          migrateTrainName(trainName),
@@ -225,7 +225,7 @@ export const ExGridViewItem: FC<{
            //borderBottomWidth: 0.5,
            borderStyle: "solid",
            borderColor: "darkgray",
-            opacity: d.type.includes("通") ? 0.5 : 1,
+            opacity: d.timeType.includes("通") ? 0.5 : 1,
            position: "absolute",
            height: "100%",
            width: 28,
@@ -246,7 +246,7 @@ export const ExGridViewItem: FC<{
                fontWeight: "bold",
              }}
            >
-              {d.type}
+              {d.timeType}
            </Text>
          </View>
          <View style={{ flex: 1, flexDirection: "column" }}>
--- a/components/StationDiagram/StationDiagramView.tsx
+++ b/components/StationDiagram/StationDiagramView.tsx
@@ -7,6 +7,7 @@ import {
  Keyboard,
  KeyboardAvoidingView,
  Platform,
+  TouchableOpacity,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { BigButton } from "../atom/BigButton";
@@ -14,7 +15,9 @@ import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
 import { ListView } from "@/components/StationDiagram/ListView";
 import dayjs from "dayjs";
 import { ExGridView } from "./ExGridView";
-import { Switch, Input } from "react-native-elements";
+import { Switch } from "react-native-elements";
+import { customTrainDataDetector } from "../custom-train-data";
+import { typeID } from "@/lib/getStringConfig";

 type props = {
  route: {
@@ -45,16 +48,17 @@ export const StationDiagramView: FC<props> = ({ route }) => {
  // 表示モード：縦並びリスト、横並びグリッド(時刻分割)、横並び単純左詰め
  // フィルタリング：終点路線、種別、行先、関係停車駅

-  const { allTrainDiagram } = useAllTrainDiagram();
+  const { keyList, allTrainDiagram, allCustomTrainData } = useAllTrainDiagram();

  const { navigate, addListener, goBack, canGoBack } = useNavigation();
  const [keyBoardVisible, setKeyBoardVisible] = useState(false);
  const [input, setInput] = useState("");
+  const [selectedTypeList, setSelectedTypeList] = useState<typeID[]>([]);
  type hoge = {
    trainNumber: string;
    array: string;
    name: string;
-    type: string;
+    timeType: string;
    time: string;
  }[];
  const [showLastStop, setShowLastStop] = useState(false);
@@ -65,14 +69,8 @@ export const StationDiagramView: FC<props> = ({ route }) => {
  useEffect(() => {
    if (allTrainDiagram && currentStation.length > 0) {
      const stationName = currentStation[0].Station_JP;
-      let returnDataArray: {
-        trainNumber: string;
-        array: any;
-        name: any;
-        type: any;
-        time: any;
-      }[] = [];
-      Object.keys(allTrainDiagram)
+      let returnDataArray: hoge = [];
+      keyList
        .filter((s) => {
          const boolData = allTrainDiagram[s];
          let isStop = false;
@@ -81,7 +79,8 @@ export const StationDiagramView: FC<props> = ({ route }) => {
          boolData.split("#").forEach((d) => {
            const [station, type, time] = d.split(",");
            if (station === stationName) isStop = true;
-            if (station === input && type && !type.includes("通")) isInput = true;
+            if (station === input && type && !type.includes("通"))
+              isInput = true;
          });
          if (input && input.length > 0) {
            return isInput && isStop;
@@ -96,20 +95,28 @@ export const StationDiagramView: FC<props> = ({ route }) => {
              return station === stationName;
            })
            .forEach((x) => {
-              const [name, type, time] = x.split(",");
-              if (!name || !type || !time) return;
+              const [name, timeType, time] = x.split(",");
+              if (!name || !timeType || !time) return;
+
+              const { img, trainName, type, trainNumDistance, infogram } =
+                customTrainDataDetector(d, allCustomTrainData);
              const arrayData = {
                trainNumber: d,
                array: allTrainDiagram[d],
                name,
-                type,
+                timeType,
                time,
              };
              // //条件によってフィルタリング
-              if (!threw && type && type.includes("通")) return;
+              if (
+                selectedTypeList.length > 0 &&
+                selectedTypeList.findIndex((item) => item === type) !== -1
+              )
+                return;
+              if (!threw && timeType && timeType.includes("通")) return;
              if (!isOutOfService && !!d.match(/[A,B,R,H,E,T,L]/)) return;
              if (!isSpecial && !!d.match(/9\d\d\d[D,M,S]/)) return;
-              if (!showLastStop && type && type.includes("着")) return;
+              if (!showLastStop && timeType && timeType.includes("着")) return;
              returnDataArray.push(arrayData);
            });
        });
@@ -174,24 +181,74 @@ export const StationDiagramView: FC<props> = ({ route }) => {
        keyboardVerticalOffset={80}
        enabled={Platform.OS === "ios"}
      >
-        <View style={{ height: 35, flexDirection: "row" }}>
-          <Switch value={showLastStop} onValueChange={setShowLastStop}
+        <ScrollView horizontal style={{ height: 35, flexDirection: "row" }}>
+          <TouchableOpacity
+            style={{
+              alignItems: "center",
+              marginHorizontal: 5,
+              backgroundColor: threw ? "white" : "#ffffff00",
+              alignSelf: "center",
+              borderColor: "white",
+              borderWidth: 1,
+              borderRadius: 100,
+            }}
+            onPress={() => {
+              setIsThrew(!threw);
+            }}
+          >
+            <Text
+              style={{
+                color: threw ? "#0099CC" : "white",
+                fontSize: 14,
+                margin: 5,
+              }}
+            >
+              通過
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={{
+              alignItems: "center",
+              marginHorizontal: 5,
+              backgroundColor: showLastStop ? "white" : "#ffffff00",
+              alignSelf: "center",
+              borderColor: "white",
+              borderWidth: 1,
+              borderRadius: 100,
+            }}
+            onPress={() => {
+              setShowLastStop(!showLastStop);
+            }}
+          >
+            <Text
+              style={{
+                color: showLastStop ? "#0099CC" : "white",
+                fontSize: 14,
+                margin: 5,
+              }}
+            >
+              当駅止
+            </Text>
+          </TouchableOpacity>
+          <Switch
+            value={isSpecial}
+            onValueChange={setIsSpecial}
            color="red"
-            style={{ marginVertical: 5 }} />
-          <Text style={{ color: "white", fontSize: 20, marginVertical: 5 }}>当駅止</Text>
-          <Switch value={isSpecial} onValueChange={setIsSpecial}
+            style={{ marginVertical: 5 }}
+          />
+          <Text style={{ color: "white", fontSize: 20, marginVertical: 5 }}>
+            臨時
+          </Text>
+          <Switch
+            value={isOutOfService}
+            onValueChange={setIsOutOfService}
            color="red"
-            style={{ marginVertical: 5 }} />
-          <Text style={{ color: "white", fontSize: 20, marginVertical: 5 }}>臨時</Text>
-          <Switch value={isOutOfService} onValueChange={setIsOutOfService}
-            color="red"
-            style={{ marginVertical: 5 }} />
-          <Text style={{ color: "white", fontSize: 20, marginVertical: 5 }}>回送</Text>
-          <Switch value={threw} onValueChange={setIsThrew}
-            color="red"
-            style={{ marginVertical: 5 }} />
-          <Text style={{ color: "white", fontSize: 20, marginVertical: 5 }}>通過</Text>
-        </View>
+            style={{ marginVertical: 5 }}
+          />
+          <Text style={{ color: "white", fontSize: 20, marginVertical: 5 }}>
+            回送
+          </Text>
+        </ScrollView>
        <View
          style={{
            height: 35,