全時間帯表示、種別フィルタリング機能を追加

components/StationDiagram/ExGridView.tsx

@@ -43,14 +43,42 @@ export const ExGridView: FC<{
       time: string;
       isOperating: boolean;
     }[];
-  } = {};
-  const groupKeys: string[] = [];
+  } = {"4":[],
+    "5":[],
+    "6":[],
+    "7":[],
+    "8":[],
+    "9":[],
+    "10":[],
+    "11":[],
+    "12":[],
+    "13":[],
+    "14":[],
+    "15":[],
+    "16":[],
+    "17":[],
+    "18":[],
+    "19":[],
+    "20":[],
+    "21":[],
+    "22":[],
+    "23":[],
+    "0":[],
+    "1":[],
+    "2":[],
+    "3":[]
+  };
+  const groupKeys: string[] = ["4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","0","1","2","3"];
 
   const { width } = useWindowDimensions();
   const { currentTrain } = useCurrentTrain();
   data.forEach((item) => {
     let isOperating = false;
-    let [hour, minute] = item.time.split(":");
+    let [hour, minute] = dayjs()
+          .hour(parseInt(item.time.split(":")[0]))
+          .minute(parseInt(item.time.split(":")[1]))
+          .format("H:m")
+          .split(":");
     if (currentTrain.findIndex((x) => x.num == item.trainNumber) != -1) {
       const currentTrainTime = currentTrain.find(
         (x) => x.num == item.trainNumber
@@ -65,10 +93,10 @@ export const ExGridView: FC<{
       }
       isOperating = true;
     }
-    if (!groupedData[hour]) {
-      groupedData[hour] = [];
-      groupKeys.push(hour);
-    }
+    // if (!groupedData[hour]) {
+    //   groupedData[hour] = [];
+    //   groupKeys.push(hour);
+    // }
     groupedData[hour].push({ ...item, time: `${hour}:${minute}`, isOperating });
   });
   // ドラッグ位置を保持する共有値
@@ -265,7 +293,7 @@ export const ExGridView: FC<{
                   {hour}時台
                 </Animated.Text>
               </View>,
-              <View style={{ flexDirection: "row", position: "relative" }}>
+              <View style={{ flexDirection: "row", position: "relative", height: 50  }}>
                 {groupedData[hour].map((d, i, array) => (
                   <ExGridViewItem
                     key={d.trainNumber + i}

components/StationDiagram/ExGridViewItem.tsx

@@ -236,7 +236,7 @@ export const ExGridViewItem: FC<{
       >
         <TouchableOpacity style={{ flex: 1 }} onPress={() => openTrainInfo()}>
           <View style={{ position: "relative" }}>
-            <Text style={{ fontSize: 20, color: color, opacity: isSameTimeBefore ? 0 : 1, fontWeight:d.isOperating ? "bold" : "normal", fontStyle:d.isOperating? "italic" :"normal" }}>{formattedTime}</Text>
+            <Text style={{ fontSize: 20, color: color, opacity: isSameTimeBefore ? 0 : 1, fontWeight:d.isOperating ? "bold" : "thin", fontStyle:d.isOperating? "italic" :"normal" }}>{formattedTime}</Text>
             <Text
               style={{
                 fontSize: 10,

components/StationDiagram/StationDiagramView.tsx

@@ -6,6 +6,7 @@ import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
 import { ListView } from "@/components/StationDiagram/ListView";
 import dayjs from "dayjs";
 import { ExGridView } from "./ExGridView";
+import { Switch } from "react-native-elements";
 
 type props = {
   route: {
@@ -46,6 +47,10 @@ export const StationDiagramView: FC<props> = ({ route }) => {
     type: string;
     time: string;
   }[];
+  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) {
@@ -75,8 +80,10 @@ export const StationDiagramView: FC<props> = ({ route }) => {
               time,
             };
             // //条件によってフィルタリング
-            // if(type && type.includes("通")) return;
-            // if(type && type.includes("着")) return;
+            if(!threw &&type && type.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;
             returnDataArray.push(arrayData);
           });
       });
@@ -97,7 +104,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
         })
       );
     }
-  }, [currentStation]);
+  }, [currentStation, showLastStop, isSpecial, isOutOfService, threw]);
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <Text
@@ -122,6 +129,16 @@ export const StationDiagramView: FC<props> = ({ route }) => {
       >
         お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
       </Text> */}
+      <View style={{ height: 20, flexDirection: "row" }}>
+        <Switch value={showLastStop} onValueChange={setShowLastStop} />
+        <Text>当駅止</Text>
+        <Switch value={isSpecial} onValueChange={setIsSpecial} />
+        <Text>臨時</Text>
+        <Switch value={isOutOfService} onValueChange={setIsOutOfService} />
+        <Text>回送</Text>
+        <Switch value={threw} onValueChange={setIsThrew} />
+        <Text>通過</Text>
+      </View>
       <BigButton onPress={() => goBack()} string="閉じる" />
     </View>
   );