時刻表フィルタリング機能一通り完成

components/StationDiagram/StationDiagramView.tsx

@@ -8,6 +8,7 @@ import {
   KeyboardAvoidingView,
   Platform,
   TouchableOpacity,
+  LayoutAnimation,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { BigButton } from "../atom/BigButton";
@@ -18,6 +19,7 @@ import { ExGridView } from "./ExGridView";
 import { Switch } from "react-native-elements";
 import { customTrainDataDetector } from "../custom-train-data";
 import { typeID } from "@/lib/getStringConfig";
+import { colorString } from "@/lib/getTrainType";
 
 type props = {
   route: {
@@ -53,7 +55,14 @@ export const StationDiagramView: FC<props> = ({ route }) => {
   const { navigate, addListener, goBack, canGoBack } = useNavigation();
   const [keyBoardVisible, setKeyBoardVisible] = useState(false);
   const [input, setInput] = useState("");
-  const [selectedTypeList, setSelectedTypeList] = useState<typeID[]>([]);
+  const [selectedTypeList, setSelectedTypeList] = useState<typeID[]>([
+    "Normal",
+    "OneMan",
+    "Rapid",
+    "OneManRapid",
+    "LTDEXP",
+    "NightLTDEXP",
+  ]);
   type hoge = {
     trainNumber: string;
     array: string;
@@ -61,10 +70,9 @@ export const StationDiagramView: FC<props> = ({ route }) => {
     timeType: string;
     time: string;
   }[];
+  const [showTypeFiltering, setShowTypeFiltering] = useState(false);
   const [showLastStop, setShowLastStop] = useState(false);
-  const [isSpecial, setIsSpecial] = useState(false);
   const [threw, setIsThrew] = useState(false);
-  const [isOutOfService, setIsOutOfService] = useState(false);
   const [currentStationDiagram, setCurrentStationDiagram] = useState<hoge>([]);
   useEffect(() => {
     if (allTrainDiagram && currentStation.length > 0) {
@@ -108,15 +116,29 @@ export const StationDiagramView: FC<props> = ({ route }) => {
                 time,
               };
               // //条件によってフィルタリング
+              if (!threw && timeType && timeType.includes("通")) return;
+              if (!showLastStop && timeType && timeType.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 && timeType && timeType.includes("着")) return;
+                selectedTypeList.findIndex((item) => item === type) === -1
+              ) {
+                if (
+                  selectedTypeList.findIndex(
+                    (item) => item === "Forwarding"
+                  ) !== -1
+                ) {
+                  console.log("回送");
+                  console.log(d);
+                  console.log(!d.match(/[A,B,R,H,E,T,L]/));
+                  if (!d.match(/[A,B,R,H,E,T,L]/)) return;
+                }
+                else if (
+                  selectedTypeList.findIndex((item) => item === "SPCL") !== -1
+                ) {
+                  if (!d.match(/9\d\d\d[D,M,S]/)) return;
+                }
+                else{ return; }
+              }
               returnDataArray.push(arrayData);
             });
         });
@@ -137,7 +159,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
         })
       );
     }
-  }, [currentStation, showLastStop, isSpecial, isOutOfService, threw, input]);
+  }, [currentStation, showLastStop, threw, input, selectedTypeList]);
 
   useEffect(() => {
     const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
@@ -230,24 +252,113 @@ export const StationDiagramView: FC<props> = ({ route }) => {
               当駅止
             </Text>
           </TouchableOpacity>
-          <Switch
-            value={isSpecial}
-            onValueChange={setIsSpecial}
-            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>
+          <View style={{ height: "auto", borderLeftWidth: 1, margin: 5, borderColor: "white" }} />
+          {showTypeFiltering ? (
+            <>
+              <TypeSelectorBox
+                selectedTypeList={selectedTypeList}
+                setSelectedTypeList={setSelectedTypeList}
+                typeName="普通"
+                typeID="Normal"
+                color="black"
+                relativeID={["OneMan"]}
+              />
+              <TypeSelectorBox
+                selectedTypeList={selectedTypeList}
+                setSelectedTypeList={setSelectedTypeList}
+                typeName="快速"
+                typeID="Rapid"
+                color="#00b8d8cc"
+                relativeID={["OneManRapid"]}
+              />
+              <TypeSelectorBox
+                selectedTypeList={selectedTypeList}
+                setSelectedTypeList={setSelectedTypeList}
+                typeName="特急"
+                typeID="LTDEXP"
+                color="red"
+                relativeID={["NightLTDEXP"]}
+              />
+              <TypeSelectorBox
+                selectedTypeList={selectedTypeList}
+                setSelectedTypeList={setSelectedTypeList}
+                typeName="臨時"
+                typeID="SPCL"
+                color="#297bff"
+                relativeID={["SPCL_Normal", "SPCL_Rapid", "SPCL_EXP", "Party"]}
+              />
+              <TypeSelectorBox
+                selectedTypeList={selectedTypeList}
+                setSelectedTypeList={setSelectedTypeList}
+                typeName="貨物"
+                typeID="Freight"
+                color="#00869ecc"
+              />
+              <TypeSelectorBox
+                selectedTypeList={selectedTypeList}
+                setSelectedTypeList={setSelectedTypeList}
+                typeName="回送"
+                typeID="Forwarding"
+                color="#727272cc"
+                relativeID={["FreightForwarding"]}
+              />
+              <TouchableOpacity
+                style={{
+                  alignItems: "center",
+                  marginHorizontal: 5,
+                  backgroundColor: "#ffffff00",
+                  alignSelf: "center",
+                  borderColor: "white",
+                  borderWidth: 1,
+                  borderRadius: 100,
+                }}
+                onPress={() => {
+                  LayoutAnimation.configureNext(
+                    LayoutAnimation.Presets.easeInEaseOut
+                  );
+                  setShowTypeFiltering(false);
+                }}
+              >
+                <Text
+                  style={{
+                    color: "white",
+                    fontSize: 14,
+                    margin: 5,
+                  }}
+                >
+                  ＜
+                </Text>
+              </TouchableOpacity>
+            </>
+          ) : (
+            <TouchableOpacity
+              style={{
+                alignItems: "center",
+                marginHorizontal: 5,
+                backgroundColor: "#ffffff00",
+                alignSelf: "center",
+                borderColor: "white",
+                borderWidth: 1,
+                borderRadius: 100,
+              }}
+              onPress={() => {
+                  LayoutAnimation.configureNext(
+                    LayoutAnimation.Presets.easeInEaseOut
+                  );
+                setShowTypeFiltering(true);
+              }}
+            >
+              <Text
+                style={{
+                  color: "white",
+                  fontSize: 14,
+                  margin: 5,
+                }}
+              >
+                ＞
+              </Text>
+            </TouchableOpacity>
+          )}
         </ScrollView>
         <View
           style={{
@@ -263,7 +374,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
           }}
         >
           <TextInput
-            placeholder="列番・列車名を入力してフィルタリングします。"
+            placeholder="駅名を入力して停車駅でフィルタリングします。"
             onFocus={() => setKeyBoardVisible(true)}
             onEndEditing={() => {}}
             onChange={(ret) => setInput(ret.nativeEvent.text)}
@@ -278,3 +389,66 @@ export const StationDiagramView: FC<props> = ({ route }) => {
     </View>
   );
 };
+
+export const TypeSelectorBox: FC<{
+  selectedTypeList: typeID[];
+  setSelectedTypeList: (list: typeID[]) => void;
+  typeName: string;
+  typeID: typeID;
+  color: colorString;
+  relativeID?: typeID[];
+}> = (props) => {
+  const {
+    selectedTypeList,
+    setSelectedTypeList,
+    typeName,
+    typeID,
+    relativeID,
+    color
+  } = props;
+  return (
+    <TouchableOpacity
+      style={{
+        alignItems: "center",
+        marginHorizontal: 5,
+        opacity: selectedTypeList.findIndex((item) => item === typeID) !== -1 ? 1 : 0.8,
+        backgroundColor:
+          selectedTypeList.findIndex((item) => item === typeID) !== -1
+            ? "white"
+            : color,
+        alignSelf: "center",
+        borderColor: color,
+        borderWidth: 1,
+        borderRadius: 100,
+      }}
+      onPress={() => {
+        if (selectedTypeList.findIndex((item) => item === typeID) === -1) {
+          setSelectedTypeList([
+            ...selectedTypeList,
+            typeID,
+            ...(relativeID ?? []),
+          ]);
+        } else {
+          setSelectedTypeList(
+            selectedTypeList.filter(
+              (item) => item !== typeID && !relativeID?.includes(item)
+            )
+          );
+        }
+      }}
+    >
+      <Text
+        style={{
+          color:
+            selectedTypeList.findIndex((item) => item === typeID) !== -1
+              ? color
+              : "white",
+          fontSize: 14,
+          margin: 5,
+        }}
+      >
+        {typeName}
+      </Text>
+    </TouchableOpacity>
+  );
+};

lib/getTrainType.ts

@@ -1,6 +1,6 @@
 import { typeID } from "./getStringConfig";
 
-type colorString =
+export type colorString =
   | "aqua"
   | "red"
   | "#297bff"