Merge commit 'd36195df697d4ba9f356c0c9840f1af494eda2e4' into develop

Apps.js

@@ -28,6 +28,7 @@ export function AppContainer() {
     "JR-Nishi": require("./assets/fonts/jr-nishi.otf"),
     Zou: require("./assets/fonts/DelaGothicOne-Regular.ttf"),
     "JNR-font": require("./assets/fonts/JNRfont_pict.ttf"),
+    "DiaPro": require("./assets/fonts/DiaPro-Regular.otf"),
   });
   return (
     <NavigationContainer ref={navigationRef}>

components/ActionSheetComponents/StationDeteilView.js

@@ -135,11 +135,11 @@ export const StationDeteilView = (props) => {
                     onExit={onExit}
                   />
                 )}
-                  {updatePermission &&<StationDiagramButton
+                <StationDiagramButton
                   navigate={navigate}
                   onExit={onExit}
                   currentStation={currentStation}
-                  />}
+                />
                 {!currentStation[0].StationTimeTable || (
                   <StationTimeTableButton
                     info={info}

components/Apps/FixedPositionBox/FixedTrainBox.tsx

@@ -13,7 +13,7 @@ import {
   ScrollView,
 } from "react-native";
 import { getTrainType } from "@/lib/getTrainType";
-import { trainPosition } from "@/lib/trainPositionTextArray";
+import { trainDataType, trainPosition } from "@/lib/trainPositionTextArray";
 import { StationNumberMaker } from "@/components/駅名表/StationNumberMaker";
 import { lineListPair, stationIDPair } from "@/lib/getStationList";
 import { findReversalPoints } from "@/lib/eachTrainInfoCoreLib/findReversalPoints";
@@ -42,16 +42,7 @@ export const FixedTrain: FC<props> = ({
   } = useCurrentTrain();
   const { allCustomTrainData, allTrainDiagram } = useAllTrainDiagram();
 
-  const [train, setTrain] = useState<{
+  const [train, setTrain] = useState<trainDataType>(null);
-    Pos?: string;
-    Direction?: number;
-    Index?: number;
-    Line?: string;
-    PosNum?: number;
-    Type?: string;
-    delay?: string | number;
-    num?: string;
-  }>(null);
   const [customData, setCustomData] = useState<CustomTrainData>(
     getCurrentTrainData(trainID, currentTrain, allCustomTrainData)
   );

components/StationDiagram/ListView.tsx

@@ -1,17 +1,17 @@
 import { FC } from "react";
 import { ListViewItem } from "@/components/StationDiagram/ListViewItem";
 import { View, Text, ScrollView } from "react-native";
-
+type hoge = {
-export const ListView: FC<{
-  data: {
   trainNumber: string;
   array: string;
   name: string;
-    type: string;
+  timeType: string;
   time: string;
-  }[];
+};
+export const ListView: FC<{
+  data: hoge[];
 }> = ({ data }) => {
-  const groupedData = {};
+  const groupedData: Record<string, hoge[]> = {};
   const groupKeys = [];
   data.forEach((item) => {
     const hour = item.time.split(":")[0];

components/StationDiagram/ListViewItem.tsx

@@ -11,13 +11,16 @@ import { useNavigation } from "@react-navigation/native";
 import { lineList } from "@/lib/getStationList";
 import { useStationList } from "@/stateBox/useStationList";
 import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes";
+import { StationNumberMaker } from "../駅名表/StationNumberMaker";
+import { getStationID } from "@/lib/eachTrainInfoCoreLib/getStationData";
+import lineColorList from "@/assets/originData/lineColorList";
 
 export const ListViewItem: FC<{
   d: {
     trainNumber: string;
     array: string;
     name: string;
-    type: string;
+    timeType: string;
     time: string;
   };
 }> = ({ d }) => {
@@ -33,9 +36,13 @@ export const ListViewItem: FC<{
       });
     }
   }, []);
-  const { color, name, data } = getTrainType({ type: trainData?.type, whiteMode: true });
+  const { color, name, data } = getTrainType({
-  const { originalStationList } = useStationList();
+    type: trainData?.type,
+    whiteMode: true,
+  });
   // 列車名、種別、フォントの取得
+    const { getStationDataFromName, stationList, originalStationList } =
+    useStationList();
   const [
     typeString,
     trainName,
@@ -45,7 +52,7 @@ export const ListViewItem: FC<{
     isEdit,
     uwasa,
     vehicleFormation,
-    trainInfoUrl,
+    trainInfoUrl,lineColor
   ] = useMemo(() => {
     const {
       type,
@@ -62,6 +69,11 @@ export const ListViewItem: FC<{
       d.trainNumber
     );
     const trainData = d.array.split("#").filter((d) => d !== "");
+    const station = getStationDataFromName(trainData[trainData.length - 1].split(",")[0]);
+    const lineColor =
+        station.length > 0
+          ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
+          : "black";
     switch (true) {
       case trainData[trainData.length - 1] === undefined:
         return [
@@ -73,7 +85,7 @@ export const ListViewItem: FC<{
           isEdit,
           uwasa,
           vehicleFormation,
-          trainInfoUrl,
+          trainInfoUrl,lineColor
         ];
       default:
         // 行先がある場合は、行先を取得
@@ -88,7 +100,7 @@ export const ListViewItem: FC<{
           isEdit,
           uwasa,
           vehicleFormation,
-          trainInfoUrl,
+          trainInfoUrl,lineColor
         ];
     }
   }, [d.array]);
@@ -118,7 +130,7 @@ export const ListViewItem: FC<{
         //@ts-ignore
         useShow: () => SheetManager.show("StationDetailView", { payload }),
         onExit: () => SheetManager.hide("StationDetailView"),
-      };//@ts-ignore
+      }; //@ts-ignore
       setTimeout(() => SheetManager.show("StationDetailView", { payload }), 50);
     } else {
       SheetManager.hide("StationDetailView");
@@ -159,12 +171,14 @@ export const ListViewItem: FC<{
         borderStyle: "solid",
         borderColor: "darkgray",
         padding: 10,
-        opacity: d.type.includes("通") ? 0.5 : 1,
+        opacity: d.timeType?.includes("通") ? 0.5 : 1,
       }}
       onPress={() => openTrainInfo()}
     >
-      <View style={{ position: "relative" }}>
+      <View style={{ position: "relative", flex: 3 }}>
-        <Text style={{ fontSize: 30 }}>{formattedTime}</Text>
+        <Text style={{ fontSize: 30, fontFamily: "DiaPro" }}>
+          {formattedTime}
+        </Text>
         <Text
           style={{
             fontSize: 10,
@@ -174,10 +188,10 @@ export const ListViewItem: FC<{
             fontWeight: "bold",
           }}
         >
-          {d.type}
+          {d.timeType}
         </Text>
       </View>
-      <View style={{ flex: 1, flexDirection: "column" }}>
+      <View style={{ flex: 10, flexDirection: "column" }}>
         <View style={{ flexDirection: "row" }}>
           <Text
             style={{
@@ -214,17 +228,20 @@ export const ListViewItem: FC<{
             {trainData?.TrainNumber}
           </Text>
         </View>
+        <View style={{ flexDirection: "row", alignItems: "center", flex: 1 }}>
           <Text
             style={{
               fontSize: 15,
               flex: 1,
               paddingHorizontal: 10,
               fontWeight: "bold",
+              color: lineColor
             }}
           >
             {trainName}
           </Text>
         </View>
+      </View>
     </TouchableOpacity>
   );
 };

components/StationDiagram/SearchBox/SearchInputSuggestBox.tsx

@@ -0,0 +1,164 @@
+import lineColorList from "@/assets/originData/lineColorList";
+import { useStationList } from "@/stateBox/useStationList";
+import { FC, useEffect, useState } from "react";
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  LayoutAnimation,
+} from "react-native";
+
+type hoge = {
+  trainNumber: string;
+  array: string;
+  name: string;
+  timeType: string;
+  time: string;
+}[];
+
+export const SearchInputSuggestBox: FC<{
+  input: string;
+  setInput: (f: string) => void;
+  currentStationDiagram: hoge;
+}> = ({ input, setInput, currentStationDiagram }) => {
+  const { getStationDataFromName } = useStationList();
+  const [stationList, setStationList] = useState<
+    {
+      stationName: string;
+      number: string[];
+    }[]
+  >([]);
+  const [listFiltered, setListFiltered] = useState<string>("");
+  const [filteredStationLine, setFilteredStationLine] = useState<string[]>([]);
+  useEffect(() => {
+    const x: { stationName: string; number: string[] }[] = [];
+    currentStationDiagram.forEach((d) => {
+      d.array.split("#").forEach((s) => {
+        if (s == "") return;
+        const [stationName, type, time] = s.split(",");
+        if (!x.find((item) => item.stationName === stationName)) {
+          if (!type?.includes("通")) {
+            const stationData = getStationDataFromName(stationName);
+            if (listFiltered === "その他") {
+              if (stationData.length === 0) {
+                x.push({
+                  stationName,
+                  number: stationData.map((item) => item.StationNumber),
+                });
+                return;
+              }
+            }
+            const filter = stationData.filter((s) => {
+              if (listFiltered === "") return true;
+              if (listFiltered === "その他") {
+                return !(
+                  s.StationNumber ? s.StationNumber.slice(0, 1) : ""
+                ).match(/[A-Z]/);
+              }
+              return (
+                s.StationNumber ? s.StationNumber.slice(0, 1) : ""
+              ).includes(listFiltered);
+            });
+            if (filter.length === 0) return;
+            x.push({
+              stationName,
+              number: stationData.map((item) => item.StationNumber),
+            });
+          }
+        }
+      });
+    });
+    setStationList(x);
+  }, [currentStationDiagram, listFiltered]);
+  useEffect(() => {
+    const filtered = stationList
+      .map((s) => s.number?.map((r) => (r ? r.slice(0, 1) : "")))
+      .flat();
+    const arrayB = Array.from(new Set(filtered));
+    setFilteredStationLine(arrayB.map((r) => (r !== "" ? r : "その他")));
+  }, [stationList]);
+  return (
+    <View
+      style={{
+        maxHeight: 200,
+        width: "100%",
+        backgroundColor: "#0099CC",
+        zIndex: 100,
+      }}
+    >
+      <Text>{input}</Text>
+      <ScrollView keyboardShouldPersistTaps="handled">
+        <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
+          {stationList.map(({ stationName, number }) => (
+            <TouchableOpacity
+              style={{
+                margin: 5,
+                padding: 5,
+                backgroundColor: "#eee",
+                borderRadius: 20,
+              }}
+              key={stationName + number.join(",")}
+              onPress={() => setInput(stationName)}
+            >
+              <Text>{stationName}</Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </ScrollView>
+      <View
+        style={{
+          flexDirection: "row",
+          flexWrap: "wrap",
+          borderTopColor: "#ccc",
+          borderTopWidth: 0.5,
+          paddingTop: 0,
+          marginTop: 10,
+        }}
+      >
+        <TouchableOpacity
+          style={{
+            margin: 5,
+            padding: 5,
+            backgroundColor: "#eee",
+            borderRadius: 5,
+          }}
+          key={"empty"}
+          onPress={() => {
+            LayoutAnimation.configureNext({
+              duration: 400,
+              update: { type: "easeInEaseOut", springDamping: 0.6 },
+            });
+            setListFiltered("");
+          }}
+        >
+          <Text>全て</Text>
+        </TouchableOpacity>
+        {filteredStationLine.map((line) => (
+          <TouchableOpacity
+            style={{
+              margin: 5,
+              padding: 5,
+              backgroundColor: lineColorList[line]
+                ? `${lineColorList[line]}`
+                : "#eee",
+              borderRadius: 5,
+            }}
+            key={line}
+            onPress={() => {
+              LayoutAnimation.configureNext({
+                duration: 400,
+                update: { type: "easeInEaseOut", springDamping: 0.6 },
+              });
+              setListFiltered(line);
+            }}
+          >
+            <Text style={{ color: lineColorList[line] ? `white` : "black" }}>
+              {line}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};

components/StationDiagram/StationDiagramView.tsx

@@ -20,6 +20,7 @@ import { Switch } from "react-native-elements";
 import { customTrainDataDetector } from "../custom-train-data";
 import { getTrainType } from "@/lib/getTrainType";
 import { trainTypeID } from "@/lib/CommonTypes";
+import { SearchInputSuggestBox } from "./SearchBox/SearchInputSuggestBox";
 
 type props = {
   route: {
@@ -55,6 +56,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
   const { navigate, addListener, goBack, canGoBack } = useNavigation();
   const [keyBoardVisible, setKeyBoardVisible] = useState(false);
   const [input, setInput] = useState("");
+  const [displayMode, setDisplayMode] = useState<"list" | "grid">("list");
   const [selectedTypeList, setSelectedTypeList] = useState<trainTypeID[]>([
     "Normal",
     "OneMan",
@@ -82,16 +84,26 @@ export const StationDiagramView: FC<props> = ({ route }) => {
         .filter((s) => {
           const boolData = allTrainDiagram[s];
           let isStop = false;
+          let isStopPos = -1;
           let isInput = false;
+          let isInputPos = -1;
 
-          boolData.split("#").forEach((d) => {
+          boolData.split("#").forEach((d, index, array) => {
             const [station, type, time] = d.split(",");
-            if (station === stationName) isStop = true;
+            if (station === stationName) {
-            if (station === input && type && !type.includes("通"))
+              isStop = true;
+              isStopPos = index;
+            }
+            if (station === input && type && !type.includes("通")) {
               isInput = true;
+              isInputPos = index;
+            }
           });
           if (input && input.length > 0) {
-            return isInput && isStop;
+            if (isInput && isStop) {
+              return isInputPos > isStopPos;
+            }
+            return false;
           }
           return isStop;
         })
@@ -118,6 +130,11 @@ export const StationDiagramView: FC<props> = ({ route }) => {
               // //条件によってフィルタリング
               if (!threw && timeType && timeType.includes("通")) return;
               if (!showLastStop && timeType && timeType.includes("着")) return;
+              if (
+                selectedTypeList.findIndex((item) => item === "SPCL") === -1
+              ) {
+                if (d.match(/9\d\d\d[D,M,S]/)) return;
+              }
               if (
                 selectedTypeList.length > 0 &&
                 selectedTypeList.findIndex((item) => item === type) === -1
@@ -160,9 +177,17 @@ export const StationDiagramView: FC<props> = ({ route }) => {
 
   useEffect(() => {
     const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
+      LayoutAnimation.configureNext({
+        duration: 600,
+        update: { type: "spring", springDamping: 0.6 },
+      });
       setKeyBoardVisible(true);
     });
     const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
+      LayoutAnimation.configureNext({
+        duration: 600,
+        update: { type: "spring", springDamping: 0.6 },
+      });
       setKeyBoardVisible(false);
     });
 
@@ -184,8 +209,11 @@ export const StationDiagramView: FC<props> = ({ route }) => {
       >
         {currentStation[0].Station_JP}駅 時刻表
       </Text>
-      {/* <ListView data={currentStationDiagram} /> */}
+      {displayMode === "list" ? (
+        <ListView data={currentStationDiagram} />
+      ) : (
         <ExGridView data={currentStationDiagram} />
+      )}
       {/* <Text
         style={{
           backgroundColor: "white",
@@ -200,7 +228,15 @@ export const StationDiagramView: FC<props> = ({ route }) => {
         keyboardVerticalOffset={80}
         enabled={Platform.OS === "ios"}
       >
-        <ScrollView horizontal style={{ height: 35, flexDirection: "row" }}>
+        {!keyBoardVisible ? (
+          <ScrollView
+            horizontal
+            style={{
+              height: 35,
+              flexDirection: "row",
+              display: "flex",
+            }}
+          >
             <TouchableOpacity
               style={{
                 alignItems: "center",
@@ -281,7 +317,12 @@ export const StationDiagramView: FC<props> = ({ route }) => {
                   selectedTypeList={selectedTypeList}
                   setSelectedTypeList={setSelectedTypeList}
                   typeID="SPCL"
-                relativeID={["SPCL_Normal", "SPCL_Rapid", "SPCL_EXP", "Party"]}
+                  relativeID={[
+                    "SPCL_Normal",
+                    "SPCL_Rapid",
+                    "SPCL_EXP",
+                    "Party",
+                  ]}
                 />
                 <TypeSelectorBox
                   selectedTypeList={selectedTypeList}
@@ -351,7 +392,41 @@ export const StationDiagramView: FC<props> = ({ route }) => {
                 </Text>
               </TouchableOpacity>
             )}
+
+            <TouchableOpacity
+              style={{
+                alignItems: "center",
+                marginHorizontal: 5,
+                backgroundColor: "#ffffff00",
+                alignSelf: "center",
+                borderColor: "white",
+                borderWidth: 1,
+                borderRadius: 100,
+              }}
+              onPress={() => {
+                setDisplayMode(displayMode === "list" ? "grid" : "list");
+              }}
+            >
+              <Text
+                style={{
+                  color: "white",
+                  fontSize: 14,
+                  margin: 5,
+                }}
+              >
+                {displayMode === "list" ? "横並びモード" : "リストモード"}
+              </Text>
+            </TouchableOpacity>
           </ScrollView>
+        ) : (
+          <View style={{ position: "relative", display: "flex" }}>
+            <SearchInputSuggestBox
+              input={input}
+              setInput={setInput}
+              currentStationDiagram={currentStationDiagram}
+            />
+          </View>
+        )}
         <View
           style={{
             height: 35,