アプリ側に複数アイコン化対応

This commit is contained in:
harukin-expo-dev-env
2025-12-20 10:04:14 +00:00
parent b40280d099
commit f261ff981a
2 changed files with 87 additions and 22 deletions
@@ -34,12 +34,54 @@ export const TrainIconStatus: FC<Props> = (props) => {
const { train_info_img: vehicle_info_img, vehicle_info_url } =
customTrainDataDetector(data.trainNum, allCustomTrainData);
if (todayOperation.length !== 0) {
const data =
todayOperation.map((op) => ({
vehicle_info_img: op.vehicle_img || vehicle_info_img,
vehicle_info_url: op.vehicle_info_url,
})) || [];
setTrainIcon(data);
const returnData =
todayOperation
.sort((a, b) => {
// trainIdからカンマ以降の数字を抽出する関数
const extractOrderNumber = (trainId: string): number => {
const parts = trainId.split(',');
if (parts.length > 1) {
const num = parseInt(parts[1].trim(), 10);
return isNaN(num) ? Infinity : num;
}
return Infinity; // カンマなし = 末尾に移動
};
// data.trainNumと一致するtrainIdを探す関数
const findMatchingTrainId = (operation: OperationLogs): string | null => {
const allTrainIds = [
...(operation.train_ids || []),
...(operation.related_train_ids || []),
];
// data.trainNumの接頭辞と一致するものを探す
for (const trainId of allTrainIds) {
const prefix = trainId.split(',')[0]; // カンマ前の部分
if (prefix === data.trainNum) {
return trainId;
}
}
return null;
};
const aTrainId = findMatchingTrainId(a);
const bTrainId = findMatchingTrainId(b);
// マッチしたものがない場合は元の順序を保持
if (!aTrainId || !bTrainId) {
return aTrainId ? -1 : bTrainId ? 1 : 0;
}
const aOrder = extractOrderNumber(aTrainId);
const bOrder = extractOrderNumber(bTrainId);
return aOrder - bOrder;
})
.map((op) => ({
vehicle_info_img: op.vehicle_img || vehicle_info_img,
vehicle_info_url: op.vehicle_info_url,
})) || [];
setTrainIcon(returnData);
} else if (vehicle_info_img) {
setTrainIcon([{ vehicle_info_img, vehicle_info_url }]);
}
@@ -124,10 +166,12 @@ export const TrainIconStatus: FC<Props> = (props) => {
<Image
source={{ uri: trainIcon }}
style={{
height: 30,
width: 24,
height: index > 0 ? 15 : 30,
width: index > 0 ? 12 : 24,
marginRight: 5,
display: index == 0 ? "flex" : "none", //暫定対応:複数アイコンがある場合は最初のアイコンのみ表示
marginLeft: index > 0 ? -10 : 0,
marginTop: index > 0 ? 10 : 0,
//display: index == 0 ? "flex" : "none", //暫定対応:複数アイコンがある場合は最初のアイコンのみ表示
}}
resizeMethod="resize"
/>
+34 -13
View File
@@ -2,7 +2,13 @@ import trainList from "@/assets/originData/trainList";
import { CustomTrainData, OperationLogs } from "@/lib/CommonTypes";
import useInterval from "@/lib/useInterval";
import { AS } from "@/storageControl";
import React, { createContext, FC, useContext, useEffect, useState } from "react";
import React, {
createContext,
FC,
useContext,
useEffect,
useState,
} from "react";
import { API_ENDPOINTS, STORAGE_KEYS } from "@/constants";
const initialState = {
allTrainDiagram: {},
@@ -27,9 +33,13 @@ export const useAllTrainDiagram = () => useContext(AllTrainDiagramContext);
type Props = {
children: React.ReactNode;
};
export const AllTrainDiagramProvider:FC<Props> = ({ children }) => {
const [allTrainDiagram, setAllTrainDiagram] = useState<{ [key: string]: string }>(trainList);
const [allCustomTrainData, setAllCustomTrainData] = useState<CustomTrainData[]>([]); // カスタム列車データ
export const AllTrainDiagramProvider: FC<Props> = ({ children }) => {
const [allTrainDiagram, setAllTrainDiagram] = useState<{
[key: string]: string;
}>(trainList);
const [allCustomTrainData, setAllCustomTrainData] = useState<
CustomTrainData[]
>([]); // カスタム列車データ
const [keyList, setKeyList] = useState<string[]>([]); // 第二要素
useEffect(() => {
if (allTrainDiagram && Object.keys(allTrainDiagram).length > 0)
@@ -47,7 +57,11 @@ export const AllTrainDiagramProvider:FC<Props> = ({ children }) => {
});
//dataのkeyで並び替え
const sortedData = Object.keys(data)
.sort((a, b) => parseInt(a.replace(/[D,M]/, "")) - parseInt(b.replace(/[D,M]/, "")))
.sort(
(a, b) =>
parseInt(a.replace(/[D,M]/, "")) -
parseInt(b.replace(/[D,M]/, ""))
)
.reduce((acc, key) => {
acc[key] = data[key];
return acc;
@@ -87,7 +101,7 @@ export const AllTrainDiagramProvider:FC<Props> = ({ children }) => {
getCustomTrainData();
}, []);
useInterval(getCustomTrainData, 30000); // 30秒毎にカスタム列車データ取得
const [todayOperation, setTodayOperation] = useState<OperationLogs[]>([]); // 本日の運行情報
const getTodayOperation = () => {
fetch(API_ENDPOINTS.OPERATION_LOGS)
@@ -109,15 +123,22 @@ export const AllTrainDiagramProvider:FC<Props> = ({ children }) => {
getTodayOperation();
}, []);
useInterval(getTodayOperation, 30000); // 30秒毎にカスタム列車データ取得
const getTodayOperationByTrainId = (train_id: string) => {
const returnData: OperationLogs[] = [];
todayOperation.forEach((operation) => {
if (operation.train_ids?.includes(train_id.toString())) {
returnData.push(operation);
}
else if (operation.related_train_ids?.includes(train_id.toString())) {
returnData.push(operation);
if (operation.train_ids?.length > 0) {
const trainIds = operation.train_ids.map((x) => x.split(",")[0]);
if (trainIds.includes(train_id.toString())) {
returnData.push(operation);
}
} else if (operation.related_train_ids?.length > 0) {
const trainIds = operation.related_train_ids.map(
(x) => x.split(",")[0]
);
if (trainIds.includes(train_id.toString())) {
returnData.push(operation);
}
}
});
return returnData.length > 0 ? returnData : [];
@@ -131,7 +152,7 @@ export const AllTrainDiagramProvider:FC<Props> = ({ children }) => {
allCustomTrainData,
keyList,
todayOperation,
getTodayOperationByTrainId
getTodayOperationByTrainId,
}}
>
{children}