AllTrainDiagramViewの強化

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -44,7 +44,7 @@ export const EachTrainInfoCore = ({
 }) => {
   const { currentTrain } = useCurrentTrain();
   const { originalStationList, stationList } = useStationList();
-  const { allTrainDiagram: trainList, allCustonTrainData } =
+  const { allTrainDiagram: trainList, allCustomTrainData } =
     useAllTrainDiagram();
   const { setTrainInfo } = useTrainMenu();
   const [currentTrainData, setCurrentTrainData] = useState();
@@ -323,7 +323,7 @@ export const EachTrainInfoCore = ({
   }, []);
 
   const openTrainInfo = (d) => {
-    const train = customTrainDataDetector(d, allCustonTrainData);
+    const train = customTrainDataDetector(d, allCustomTrainData);
     let TrainNumber = "";
     if (train.trainNumDistance != undefined) {
       const timeInfo =

components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx

@@ -44,7 +44,7 @@ export const HeaderText: FC<Props> = ({
   const { limited, trainNum } = data;
 
   const { updatePermission } = useTrainMenu();
-  const { allCustonTrainData } = useAllTrainDiagram();
+  const { allCustomTrainData } = useAllTrainDiagram();
   const { expoPushToken } = useNotification();
 
   // 列車名、種別、フォントの取得
@@ -52,7 +52,7 @@ export const HeaderText: FC<Props> = ({
     useMemo(() => {
       const customTrainData = customTrainDataDetector(
         trainNum,
-        allCustonTrainData
+        allCustomTrainData
       );
       const [type, fontAvailable, isOneMan] = (() => {
         switch (customTrainData.type) {

components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx

@@ -23,12 +23,12 @@ export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
   const [trainIcon, setTrainIcon] = useState(null);
   const [anpanmanStatus, setAnpanmanStatus] = useState<apt>();
   const [address, setAddress] = useState("");
-  const { allCustonTrainData } = useAllTrainDiagram();
+  const { allCustomTrainData } = useAllTrainDiagram();
   useEffect(() => {
     if (!data.trainNum) return;
     const { img, infoUrl } = customTrainDataDetector(
       data.trainNum,
-      allCustonTrainData
+      allCustomTrainData
     );
     if (img) setTrainIcon(img);
     if (infoUrl) setAddress(infoUrl);

components/AllTrainDiagramView.js

@@ -10,6 +10,7 @@ import {
   Keyboard,
   ScrollView,
   Linking,
+  Image,
 } from "react-native";
 import { useAllTrainDiagram } from "../stateBox/useAllTrainDiagram";
 
@@ -19,9 +20,11 @@ import { SheetManager } from "react-native-actions-sheet";
 import { useNavigation } from "@react-navigation/native";
 import { BigButton } from "./atom/BigButton";
 import { Switch } from "react-native-elements";
+import { migrateTrainName } from "@/lib/eachTrainInfoCoreLib/migrateTrainName";
+import { OneManText } from "./ActionSheetComponents/EachTrainInfoCore/HeaderTextParts/OneManText";
 export default function AllTrainDiagramView() {
   const { goBack, navigate } = useNavigation();
-  const { keyList, allTrainDiagram, allCustonTrainData } = useAllTrainDiagram();
+  const { keyList, allTrainDiagram, allCustomTrainData } = useAllTrainDiagram();
   const [input, setInput] = useState(""); // 文字入力
   const [keyBoardVisible, setKeyBoardVisible] = useState(false);
   const [useStationName, setUseStationName] = useState(false);
@@ -53,7 +56,7 @@ export default function AllTrainDiagramView() {
   }, []);
 
   const openTrainInfo = (d) => {
-    const train = customTrainDataDetector(d, allCustonTrainData);
+    const train = customTrainDataDetector(d, allCustomTrainData);
     let TrainNumber = "";
     if (train.trainNumDistance != undefined) {
       const timeInfo =
@@ -71,6 +74,119 @@ export default function AllTrainDiagramView() {
       payload,
     });
   };
+
+  const getStringConfig = (type, id) => {
+    switch (type) {
+      case "Normal":
+        return ["普通", true, false];
+      case "OneMan":
+        return ["普通", true, true];
+      case "Rapid":
+        return ["快速", true, false];
+      case "OneManRapid":
+        return ["快速", true, true];
+      case "LTDEXP":
+        return ["特急", true, false];
+      case "NightLTDEXP":
+        return ["特急", true, false];
+      case "SPCL":
+        return ["臨時", true, false];
+      case "SPCL_Normal":
+        return ["臨時", true, false];
+      case "SPCL_Rapid":
+        return ["臨時快速", true, false];
+      case "SPCL_EXP":
+        return ["臨時特急", true, false];
+      case "Freight":
+        return ["貨物", false, false];
+      case "Forwarding":
+        return ["回送", false, false];
+      case "FreightForwarding":
+        return ["単機回送", false, false];
+      case "Other":
+        switch (true) {
+          case !!id.includes("T"):
+            return ["単機回送", false, false];
+          case !!id.includes("R"):
+          case !!id.includes("E"):
+          case !!id.includes("L"):
+          case !!id.includes("A"):
+          case !!id.includes("B"):
+            return ["回送", false, false];
+          case !!id.includes("H"):
+            return ["試運転", false, false];
+        }
+        return ["", false, false];
+    }
+  };
+  const Item = ({ id, openTrainInfo }) => {
+    const { img, trainName, type, trainNumDistance, infogram } =
+      customTrainDataDetector(id, allCustomTrainData);
+
+    const [typeString, fontAvailable, isOneMan] = getStringConfig(type, id);
+    const trainNameString = (() => {
+      switch (true) {
+        case trainName !== "":
+          // 特急の場合は、列車名を取得
+          // 列番対称データがある場合はそれから列車番号を取得
+          const distance = trainNumDistance;
+          const number =
+            distance !== null ? ` ${parseInt(id) - distance}号` : "";
+          return trainName + number;
+        case allTrainDiagram[id] === undefined:
+          return "";
+        default:
+          // 行先がある場合は、行先を取得
+          const s = allTrainDiagram[id].split("#");
+          const hoge = s[s.length - 2].split(",")[0];
+          return migrateTrainName(hoge + "行き");
+      }
+    })();
+    return (
+      <TouchableOpacity
+        style={{
+          padding: 5,
+          flexDirection: "row",
+          borderColor: "white",
+          borderWidth: 1,
+          margin: 5,
+          borderRadius: 5,
+          alignItems: "center",
+        }}
+        onPress={() => openTrainInfo(id)}
+      >
+        {img && (
+          <Image
+            source={{ uri: img }}
+            style={{ width: 20, height: 20, marginLeft: 10, marginRight: 10 }}
+          />
+        )}
+        {typeString && (
+          <Text
+            style={{
+              fontSize: 20,
+              color: "white",
+              fontFamily: fontAvailable ? "JR-Nishi" : undefined,
+              fontWeight: !fontAvailable ? "bold" : undefined,
+              marginRight: 5,
+            }}
+          >
+            {typeString}
+          </Text>
+        )}
+        {isOneMan && <OneManText />}
+        {trainNameString && (
+          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+            {trainNameString}
+          </Text>
+        )}
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+          {id}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
   return (
     <View style={{ backgroundColor: "#0099CC", height: "100%" }}>
       <FlatList
@@ -101,7 +217,6 @@ export default function AllTrainDiagramView() {
             </Text>
           </View>
         }
-        
         keyExtractor={(item) => item}
         //initialNumToRender={100}
       />
@@ -225,25 +340,3 @@ export default function AllTrainDiagramView() {
     </View>
   );
 }
-const Item = ({ id, openTrainInfo }) => {
-  return (
-    <TouchableOpacity
-      style={{
-        padding: 5,
-        flexDirection: "row",
-        borderColor: "white",
-        borderWidth: 1,
-        margin: 5,
-        borderRadius: 5,
-        alignItems: "center",
-      }}
-      onPress={() => openTrainInfo(id)}
-    >
-      <View style={{ flex: 1 }} />
-      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-        {id}
-      </Text>
-      <View style={{ flex: 1 }} />
-    </TouchableOpacity>
-  );
-};

components/custom-train-data.ts

@@ -1,10 +1,10 @@
 import dayjs from "dayjs";
 export const customTrainDataDetector = (
   TrainNumber: string,
-  allCustonTrainData?: any[]
+  allCustomTrainData?: any[]
 ) => {
-  if (allCustonTrainData && allCustonTrainData.length > 0) {
+  if (allCustomTrainData && allCustomTrainData.length > 0) {
-    const customTrain = allCustonTrainData.find(
+    const customTrain = allCustomTrainData.find(
       (train) => train.TrainNumber === TrainNumber
     );
     if (customTrain) {

components/発車時刻表/EachData.tsx

@@ -46,7 +46,7 @@ export const EachData: FC<Props> = (props) => {
   } = props;
   const { currentTrain } = useCurrentTrain();
   const { stationList } = useStationList();
-  const { allCustonTrainData } = useAllTrainDiagram();
+  const { allCustomTrainData } = useAllTrainDiagram();
   const openTrainInfo = (d: {
     train: string;
     lastStation: string;
@@ -78,7 +78,7 @@ export const EachData: FC<Props> = (props) => {
   const getTrainDataFromCurrentTrain = (trainNum: string) => {
     const customTrainData = customTrainDataDetector(
       d.train,
-      allCustonTrainData
+      allCustomTrainData
     );
     switch (customTrainData.type) {
       case "Normal":

stateBox/useAllTrainDiagram.js

@@ -5,7 +5,7 @@ import React, { createContext, useContext, useEffect, useState } from "react";
 const initialState = {
   allTrainDiagram: undefined,
   setAllTrainDiagram: () => {},
-  allCustonTrainData: [],
+  allCustomTrainData: [],
 };
 
 const AllTrainDiagramContext = createContext(initialState);
@@ -14,7 +14,7 @@ export const useAllTrainDiagram = () => useContext(AllTrainDiagramContext);
 
 export const AllTrainDiagramProvider = ({ children }) => {
   const [allTrainDiagram, setAllTrainDiagram] = useState(trainList);
-  const [allCustonTrainData, setAllCustonTrainData] = useState([]); // カスタム列車データ
+  const [allCustomTrainData, setAllCustomTrainData] = useState([]); // カスタム列車データ
   const [keyList, setKeyList] = useState(); // 第二要素
   useEffect(() => {
     if (allTrainDiagram && Object.keys(allTrainDiagram).length > 0)
@@ -54,7 +54,7 @@ export const AllTrainDiagramProvider = ({ children }) => {
     fetch("https://n8n.haruk.in/webhook/jr-shikoku-position-custom-datalist")
       .then((res) => res.json())
       .then((res) => {
-        setAllCustonTrainData(res[0].data);
+        setAllCustomTrainData(res[0].data);
       })
       .catch(() => {
         alert("カスタム列車データの取得に失敗しました。");
@@ -72,7 +72,7 @@ export const AllTrainDiagramProvider = ({ children }) => {
       value={{
         allTrainDiagram,
         setAllTrainDiagram,
-        allCustonTrainData,
+        allCustomTrainData,
         keyList,
       }}
     >