駅時刻表のコア情報を作成

components/StationDiagram/StationDiagramView.tsx

@@ -0,0 +1,114 @@
+import { FC, useEffect, useState } from "react";
+import { View, Text, ScrollView } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import { BigButton } from "../atom/BigButton";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { ListView } from "@/components/StationDiagram/ListView";
+import dayjs from "dayjs";
+
+type props = {
+  route: {
+    params: {
+      currentStation: {
+        Station_JP: string;
+        Station_EN: string;
+        StationName?: string;
+        MyStation?: string;
+        StationNumber: string;
+        DispNum?: string;
+        StationTimeTable: string;
+        StationMap?: string;
+        JrHpUrl?: string;
+        lat: number;
+        lng: number;
+        jslodApi: string;
+      }[];
+    };
+  };
+};
+export const StationDiagramView: FC<props> = ({ route }) => {
+  if (!route.params) {
+    return null;
+  }
+  const { currentStation } = route.params;
+  // 必要な情報：駅情報、全ダイヤ、カスタム列車情報
+  // 表示モード：縦並びリスト、横並びグリッド(時刻分割)、横並び単純左詰め
+  // フィルタリング：終点路線、種別、行先、関係停車駅
+
+  const { allTrainDiagram } = useAllTrainDiagram();
+
+  const { navigate, addListener, goBack, canGoBack } = useNavigation();
+  type hoge = {
+    trainNumber: string;
+    array: string;
+    name: string;
+    type: string;
+    time: string;
+  }[];
+  const [currentStationDiagram, setCurrentStationDiagram] = useState<hoge>([]);
+  useEffect(() => {
+    if (allTrainDiagram && currentStation.length > 0) {
+      const stationName = currentStation[0].Station_JP;
+      let returnDataArray = [];
+      Object.keys(allTrainDiagram).forEach((d) => {
+        if (allTrainDiagram[d].includes(stationName)) {
+          allTrainDiagram[d]
+            .split("#")
+            .filter((d) => d.includes(stationName))
+            .forEach((x) => {
+              const [name, type, time] = x.split(",");
+              if (!name || !type || !time) return;
+              const arrayData = {
+                trainNumber: d,
+                array: allTrainDiagram[d],
+                name,
+                type,
+                time,
+              };
+              returnDataArray.push(arrayData);
+            });
+        }
+      });
+      setCurrentStationDiagram(returnDataArray.sort((a, b) => {
+        const adjustTime = (t: string) => {
+          const [h, m] = t.split(":").map(Number);
+          // 4時未満は翌日の時刻とみなして+24時間
+          return h < 4 ? dayjs().add(1, "day").hour(h).minute(m) : dayjs().hour(h).minute(m);
+        };
+        const aa = adjustTime(a.time);
+        const bb = adjustTime(b.time);
+        const x = aa.isAfter(bb);
+        return x ? 1 : -1;
+        //return true;
+    }));
+    }
+  }, []);
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      <Text
+        style={{
+          textAlign: "center",
+          fontSize: 20,
+          color: "white",
+          fontWeight: "bold",
+          paddingVertical: 10,
+        }}
+      >
+        {currentStation[0].Station_JP}駅 時刻表
+      </Text>
+      <ScrollView style={{ backgroundColor: "white" }}>
+        <ListView data={currentStationDiagram} />
+      </ScrollView>
+      {/* <Text
+        style={{
+          backgroundColor: "white",
+          borderWidth: 1,
+          borderStyle: "solid",
+        }}
+      >
+        お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
+      </Text> */}
+      <BigButton onPress={() => goBack()} string="閉じる" />
+    </View>
+  );
+};