AllTrainDiagramViewの強化

2025-08-08 08:49:25 +00:00 · 2025-08-08 08:49:25 +00:00 · 7216392c9b
commit 7216392c9b
parent 913a198a93
7 changed files with 133 additions and 40 deletions
--- a/components/ActionSheetComponents/EachTrainInfoCore.js
+++ b/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 =
--- a/components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx
+++ b/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) {
--- a/components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx
+++ b/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);
--- a/components/AllTrainDiagramView.js
+++ b/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>
-  );
-};
--- a/components/custom-train-data.ts
+++ b/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) {
-    const customTrain = allCustonTrainData.find(
+  if (allCustomTrainData && allCustomTrainData.length > 0) {
+    const customTrain = allCustomTrainData.find(
      (train) => train.TrainNumber === TrainNumber
    );
    if (customTrain) {
--- a/components/発車時刻表/EachData.tsx
+++ b/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":
--- a/stateBox/useAllTrainDiagram.js
+++ b/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,
      }}
    >