diff --git a/components/ActionSheetComponents/EachTrainInfoCore.js b/components/ActionSheetComponents/EachTrainInfoCore.js index 828e66e..5d76848 100644 --- a/components/ActionSheetComponents/EachTrainInfoCore.js +++ b/components/ActionSheetComponents/EachTrainInfoCore.js @@ -8,6 +8,7 @@ import { useWindowDimensions, BackHandler, Linking, + Image, } from "react-native"; import { Ionicons } from "@expo/vector-icons"; import { SheetManager } from "react-native-actions-sheet"; @@ -34,6 +35,8 @@ import { searchSpecialTrain } from "../../lib/eachTrainInfoCoreLib/searchSpecial import { openBackTrainInfo } from "../../lib/eachTrainInfoCoreLib/openBackTrainInfo"; import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain"; import { useNavigation } from "@react-navigation/native"; +import { useInterval } from "../../lib/useInterval"; +import dayjs from "dayjs"; export const EachTrainInfoCore = ({ actionSheetRef, @@ -81,6 +84,51 @@ export const EachTrainInfoCore = ({ const [currentPosition, setCurrentPosition] = useState([]); const [trainData, setTrainData] = useState([]); + const [trainIcon, setTrainIcon] = useState(null); + const [anpanmanStatus, setAnpanmanStatus] = useState({name:"warning-outline",color:"yellow"}); + useEffect(() => { + if (!data.trainNum) return; + switch (data.trainNum) { + case "32D": + case "36D": + case "44D": + case "48D": + case "56D": + case "33D": + case "37D": + case "45D": + case "49D": + case "57D": + setTrainIcon( + "https://n8n.haruk.in/webhook/dosan-anpanman-pictures.png?trainNum=" + + data.trainNum + ); + fetch(`https://n8n.haruk.in/webhook/dosan-anpanman?month=${dayjs().format("M")}&day=${dayjs().format("D")}&trainNum=${data.trainNum}`) + .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 (Object.keys(anpanmanStatus).length > 0 ) setMove(!move); + }, + 1000, + true + ); + const stationList = originalStationList && lineList.map((d) => @@ -280,6 +328,19 @@ export const EachTrainInfoCore = ({ )} + {trainIcon && ( + + {move ? ( + + ) : ( + + )} + + )} {trainName}