129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
import React, { ComponentProps, FC, useEffect, useState } from "react";
|
||
import { View, Image, TouchableOpacity } from "react-native";
|
||
import { Ionicons } from "@expo/vector-icons";
|
||
import dayjs from "dayjs";
|
||
import { useInterval } from "../../../lib/useInterval";
|
||
import { Icon } from "@expo/vector-icons/build/createIconSet";
|
||
import { SheetManager } from "react-native-actions-sheet";
|
||
import { customTrainDataDetector } from "../../custom-train-data";
|
||
import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
|
||
|
||
type GlyphNames = ComponentProps<typeof Ionicons>["name"];
|
||
|
||
type Props = {
|
||
data: { trainNum: string; limited: string };
|
||
navigate: any;
|
||
from: string;
|
||
};
|
||
type apt = {
|
||
name: GlyphNames;
|
||
color: string;
|
||
};
|
||
export const TrainIconStatus: FC<Props> = ({ data, navigate, from }) => {
|
||
const [trainIcon, setTrainIcon] = useState(null);
|
||
const [anpanmanStatus, setAnpanmanStatus] = useState<apt>();
|
||
const [address, setAddress] = useState("");
|
||
const { allCustomTrainData } = useAllTrainDiagram();
|
||
useEffect(() => {
|
||
if (!data.trainNum) return;
|
||
const { img, infoUrl } = customTrainDataDetector(
|
||
data.trainNum,
|
||
allCustomTrainData
|
||
);
|
||
if (img) setTrainIcon(img);
|
||
if (infoUrl) setAddress(infoUrl);
|
||
|
||
switch (data.trainNum) {
|
||
case "32D":
|
||
case "36D":
|
||
case "44D":
|
||
case "48D":
|
||
case "56D":
|
||
case "33D":
|
||
case "37D":
|
||
case "45D":
|
||
case "49D":
|
||
case "57D":
|
||
fetch(
|
||
`https://n8n.haruk.in/webhook/dosan-anpanman?trainNum=${
|
||
data.trainNum
|
||
}&month=${dayjs().format("M")}&day=${dayjs().format("D")}`
|
||
)
|
||
.then((d) => d.json())
|
||
.then((d) => {
|
||
if (d.trainStatus == "〇") {
|
||
//setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
|
||
} else if (d.trainStatus == "▲") {
|
||
setAnpanmanStatus({ name: "warning-outline", color: "yellow" });
|
||
} else if (d.trainStatus == "×") {
|
||
setAnpanmanStatus({ name: "close-circle-outline", color: "red" });
|
||
}
|
||
});
|
||
break;
|
||
case "2074D":
|
||
case "2076D":
|
||
case "2080D":
|
||
case "2082D":
|
||
case "2071D":
|
||
case "2073D":
|
||
case "2079D":
|
||
case "2081D":
|
||
fetch(
|
||
`https://n8n.haruk.in/webhook/dosan-anpanman-first?trainNum=${
|
||
data.trainNum
|
||
}&month=${dayjs().format("M")}&day=${dayjs().format("D")}`
|
||
)
|
||
.then((d) => d.json())
|
||
.then((d) => {
|
||
if (d.trainStatus == "〇") {
|
||
//setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
|
||
} else if (d.trainStatus == "▲") {
|
||
setAnpanmanStatus({ name: "warning-outline", color: "yellow" });
|
||
} else if (d.trainStatus == "×") {
|
||
//setAnpanmanStatus({ name: "close-circle-outline", color: "red" });
|
||
}
|
||
});
|
||
break;
|
||
}
|
||
}, [data.trainNum]);
|
||
const [move, setMove] = useState(true);
|
||
useInterval(
|
||
() => {
|
||
// anpanmanStatusがデータを持っているなら実行
|
||
if (anpanmanStatus) setMove(!move);
|
||
},
|
||
1000,
|
||
true
|
||
);
|
||
return (
|
||
<>
|
||
{trainIcon && (
|
||
<TouchableOpacity
|
||
onPress={() => {
|
||
navigate("howto", {
|
||
info: address,
|
||
goTo: from == "LED" ? "menu" : from,
|
||
});
|
||
SheetManager.hide("EachTrainInfo");
|
||
}}
|
||
disabled={!address}
|
||
>
|
||
{move ? (
|
||
<Image
|
||
source={{ uri: trainIcon }}
|
||
style={{ height: 34, width: 30, marginRight: 5 }}
|
||
resizeMethod="scale"
|
||
/>
|
||
) : (
|
||
<Ionicons
|
||
{...anpanmanStatus}
|
||
size={30}
|
||
style={{ marginRight: 5 }}
|
||
/>
|
||
)}
|
||
</TouchableOpacity>
|
||
)}
|
||
</>
|
||
);
|
||
};
|