AllTrainDiagramViewの強化

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>
-  );
-};