列番を並び替え、列車リンク表示機能等を実装

components/ActionSheetComponents/EachTrainInfo/TrainDataView.tsx

@@ -10,6 +10,8 @@ import { trainPosition } from "../../../lib/trainPositionTextArray";
 import { StationPosPushDialog } from "../../発車時刻表/LED_inside_Component/TrainPositionDataPush";
 import { getStationID } from "../../../lib/eachTrainInfoCoreLib/getStationData";
 import { useStationList } from "../../../stateBox/useStationList";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { customTrainDataDetector } from "@/components/custom-train-data";
 
 export const TrainDataView = ({
   currentTrainData,
@@ -24,6 +26,8 @@ export const TrainDataView = ({
   const { width, height } = useWindowDimensions();
   const { isLandscape } = useDeviceOrientationChange();
   const { inject } = useCurrentTrain();
+
+  const { allCustomTrainData } = useAllTrainDiagram();
   const [mapsStationData, setMapsStationData] = useState(undefined);
 
   const [platformNumber, setPlatformNumber] = useState();
@@ -72,6 +76,14 @@ export const TrainDataView = ({
   }, []);
   const onLine = !!currentPosition?.toString().length;
 
+  const [trainNumber, setTrainNumber] = useState(currentTrainData?.num);
+  useEffect(() => {
+    const {
+      TrainNumberOverride,
+    } = customTrainDataDetector(currentTrainData?.num, allCustomTrainData);
+    if (!TrainNumberOverride) return;
+    setTrainNumber(TrainNumberOverride);
+  }, [currentTrainData?.num, allCustomTrainData]);
   // 投稿システム関係
   // Dialog表示関係
   const [dialog, setDialog] = useState(false);
@@ -88,7 +100,6 @@ export const TrainDataView = ({
   const [descInput, setDescInput] = useState<string>("");
 
   const openEditWindow = () => {
-
     const { isBetween, Pos } = trainPosition(currentTrainData);
     if (isBetween === true) return;
     //固定値
@@ -193,7 +204,7 @@ export const TrainDataView = ({
             }}
           >
             {nearTrainIDList.length == 0 ? (
-              <StateBox mode={mode} title="列番" text={currentTrainData?.num} />
+              <StateBox mode={mode} title="列番" text={trainNumber} />
             ) : (
               <StateBox
                 mode={mode}

components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx

@@ -12,6 +12,7 @@ import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
 import { useNotification } from "@/stateBox/useNotifications";
 import { getStringConfig } from "@/lib/getStringConfig";
 import { FontAwesome } from "@expo/vector-icons";
+import { getPDFViewURL } from "@/lib/getPdfViewURL";
 
 type Props = {
   data: { trainNum: string; limited: string };
@@ -59,9 +60,18 @@ export const HeaderText: FC<Props> = ({
     isEdit,
     uwasa,
     vehicleFormation,
+    trainInfoUrl,
   ] = useMemo(() => {
-    const { type, trainName, trainNumDistance, infogram, isEdit, uwasa, vehicleFormation } =
-      customTrainDataDetector(trainNum, allCustomTrainData);
+    const {
+      type,
+      trainName,
+      trainNumDistance,
+      infogram,
+      isEdit,
+      uwasa,
+      vehicleFormation,
+      trainInfoUrl,
+    } = customTrainDataDetector(trainNum, allCustomTrainData);
     const [typeString, fontAvailable, isOneMan] = getStringConfig(
       type,
       trainNum
@@ -81,7 +91,8 @@ export const HeaderText: FC<Props> = ({
           infogram,
           isEdit,
           uwasa,
-          vehicleFormation
+          vehicleFormation,
+          trainInfoUrl,
         ];
       case trainData[trainData.length - 1] === undefined:
         return [
@@ -92,7 +103,8 @@ export const HeaderText: FC<Props> = ({
           infogram,
           isEdit,
           uwasa,
-          vehicleFormation
+          vehicleFormation,
+          trainInfoUrl,
         ];
       default:
         // 行先がある場合は、行先を取得
@@ -106,7 +118,8 @@ export const HeaderText: FC<Props> = ({
           infogram,
           isEdit,
           uwasa,
-          vehicleFormation
+          vehicleFormation,
+          trainInfoUrl,
         ];
     }
   }, [trainData]);
@@ -122,11 +135,20 @@ export const HeaderText: FC<Props> = ({
       <TouchableOpacity
         style={{ borderRadius: 5, flexDirection: "row", alignItems: "center" }}
         onLongPress={() => {
+          if (!updatePermission) return;
           const uri = `https://jr-shikoku-data-post-system.pages.dev?trainNum=${trainNum}&token=${expoPushToken}`;
           navigate("generalWebView", { uri, useExitButton: false });
           SheetManager.hide("EachTrainInfo");
         }}
-        disabled={!updatePermission}
+        onPress={() => {
+          if (!trainInfoUrl) return;
+          const uri = trainInfoUrl.includes("pdf")
+            ? getPDFViewURL(trainInfoUrl)
+            : trainInfoUrl;
+          navigate("generalWebView", { uri, useExitButton: true });
+          SheetManager.hide("EachTrainInfo");
+        }}
+        disabled={!(!!updatePermission || !!trainInfoUrl)}
       >
         <Text
           style={{
@@ -142,20 +164,22 @@ export const HeaderText: FC<Props> = ({
         {isOneMan && <OneManText />}
         <Text style={textConfig}>{trainName}</Text>
         <InfogramText infogram={infogram} />
-        {isEdit && (
-          <FontAwesome
-            name="commenting-o"
-            size={20}
-            color="white"
-            style={{ marginLeft: 5 }}
-            onPress={() =>
-              alert(
-                `[このアイコン、列車データはコミュニティによってリアルタイム追加されています。]\n使用車両情報:\n${vehicleFormation}\n投稿者メモ:\n${uwasa || "なし"}`
-              )
-            }
-          />
-        )}
       </TouchableOpacity>
+      {isEdit && (
+        <FontAwesome
+          name="commenting-o"
+          size={20}
+          color="white"
+          style={{ marginLeft: 5 }}
+          onPress={() =>
+            alert(
+              `[このアイコン、列車データはコミュニティによってリアルタイム追加されています。]\n使用車両情報:\n${vehicleFormation}\n投稿者メモ:\n${
+                uwasa || "なし"
+              }`
+            )
+          }
+        />
+      )}
 
       <View style={{ flex: 1 }} />
       <Text style={textConfig}>

stateBox/useAllTrainDiagram.js

@@ -31,7 +31,14 @@ export const AllTrainDiagramProvider = ({ children }) => {
           const keys = Object.keys(d);
           data[keys] = d[keys];
         });
-        return data;
+        //dataのkeyで並び替え
+        const sortedData = Object.keys(data)
+          .sort((a, b) => a.replace(/[D,M]/, "") - b.replace(/[D,M]/, ""))
+          .reduce((acc, key) => {
+            acc[key] = data[key];
+            return acc;
+          }, {});
+        return sortedData;
       })
       .then((res) => {
         setAllTrainDiagram(res);