アンパンマン列車のアイコンを列車情報に追加

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 = ({
         </View>
       )}
       <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
+        {trainIcon && (
+          <View
+            style={{
+            }}
+          >
+            {move ? (
+              <Image source={{ uri: trainIcon }} style={{ height: 30,width:30,margin:5 }} resizeMethod="resize" />
+            ) : (
+              <Ionicons {...anpanmanStatus} size={30}
+              style={{ margin: 5 }} />
+            )}
+          </View>
+        )}
         <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
           {trainName}
         </Text>