134 lines
3.7 KiB
TypeScript
134 lines
3.7 KiB
TypeScript
import React, { ComponentProps, FC, useEffect, useMemo, useState } from "react";
|
||
import { Ionicons } from "@expo/vector-icons";
|
||
import dayjs from "dayjs";
|
||
import { SheetManager } from "react-native-actions-sheet";
|
||
import { customTrainDataDetector } from "../../custom-train-data";
|
||
import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
|
||
import { useInterval } from "@/lib/useInterval";
|
||
import type { NavigateFunction } from "@/types";
|
||
import { OperationLogs } from "@/lib/CommonTypes";
|
||
import type { IconDisplayMode } from "@/lib/iconDisplayMode";
|
||
import { resolveTrainIconEntries } from "@/lib/trainIconEntries";
|
||
import { TrainIconStack } from "./TrainIconStack";
|
||
|
||
type GlyphNames = ComponentProps<typeof Ionicons>["name"];
|
||
|
||
type Props = {
|
||
data: { trainNum: string; limited: string };
|
||
navigate: NavigateFunction;
|
||
from: string;
|
||
todayOperation: OperationLogs[];
|
||
direction?: boolean;
|
||
iconDisplayMode: IconDisplayMode;
|
||
};
|
||
type apt = {
|
||
name: GlyphNames;
|
||
color: string;
|
||
};
|
||
export const TrainIconStatus: FC<Props> = (props) => {
|
||
const {
|
||
data,
|
||
navigate,
|
||
from,
|
||
todayOperation,
|
||
direction,
|
||
iconDisplayMode,
|
||
} = props;
|
||
const [anpanmanStatus, setAnpanmanStatus] = useState<apt>();
|
||
const { allCustomTrainData } = useAllTrainDiagram();
|
||
const customTrainData = useMemo(
|
||
() => customTrainDataDetector(data.trainNum, allCustomTrainData),
|
||
[data.trainNum, allCustomTrainData],
|
||
);
|
||
const trainIconData = useMemo(
|
||
() =>
|
||
data.trainNum
|
||
? resolveTrainIconEntries({
|
||
trainNum: data.trainNum,
|
||
customTrainData,
|
||
todayOperation,
|
||
iconDisplayMode,
|
||
})
|
||
: [],
|
||
[data.trainNum, customTrainData, todayOperation, iconDisplayMode],
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (!data.trainNum) return;
|
||
let anpanmanApiPath: string | null = null;
|
||
switch (data.trainNum) {
|
||
case "10M":
|
||
case "22M":
|
||
case "9M":
|
||
case "21M":
|
||
case "1010M":
|
||
case "1022M":
|
||
case "1009M":
|
||
case "1021M":
|
||
case "1041M":
|
||
case "1044M":
|
||
case "1058D":
|
||
case "1066D":
|
||
case "1074D":
|
||
case "1053D":
|
||
case "1059D":
|
||
case "1067D":
|
||
anpanmanApiPath = "yosan-anpanman";
|
||
break;
|
||
case "32D":
|
||
case "36D":
|
||
case "44D":
|
||
case "48D":
|
||
case "56D":
|
||
case "33D":
|
||
case "37D":
|
||
case "45D":
|
||
case "49D":
|
||
case "57D":
|
||
anpanmanApiPath = "dosan-anpanman";
|
||
break;
|
||
}
|
||
if (anpanmanApiPath) {
|
||
fetch(
|
||
`https://n8n.haruk.in/webhook/${anpanmanApiPath}?trainNum=${
|
||
data.trainNum
|
||
}&month=${dayjs().format("M")}&day=${dayjs().format("D")}`,
|
||
{ cache: "no-store" },
|
||
)
|
||
.then((d) => d.json())
|
||
.then((d) => {
|
||
if (d.trainStatus == "〇" || d.trainStatus == "○") {
|
||
} else if (d.trainStatus == "▲") {
|
||
setAnpanmanStatus({ name: "warning-outline", color: "yellow" });
|
||
} else if (d.trainStatus == "×") {
|
||
setAnpanmanStatus({ name: "close-circle-outline", color: "red" });
|
||
}
|
||
})
|
||
.catch(() => {});
|
||
}
|
||
}, [data.trainNum, allCustomTrainData, todayOperation, iconDisplayMode]);
|
||
|
||
const [showIcon, setShowIcon] = useState(false);
|
||
useInterval(() => {
|
||
if (anpanmanStatus) {
|
||
setShowIcon((prev) => !prev);
|
||
}
|
||
}, 1000, !!anpanmanStatus);
|
||
|
||
return (
|
||
<TrainIconStack
|
||
entries={trainIconData}
|
||
direction={direction}
|
||
hidden={!!anpanmanStatus && showIcon}
|
||
statusIcon={anpanmanStatus}
|
||
onPressEntry={(entry) => {
|
||
navigate("howto", {
|
||
info: entry.vehicle_info_url,
|
||
goTo: from == "LED" ? "menu" : from,
|
||
});
|
||
SheetManager.hide("EachTrainInfo");
|
||
}}
|
||
/>
|
||
);
|
||
};
|