送信機能を新型に置き換え

components/発車時刻表/EachData.tsx

@@ -12,10 +12,8 @@ import { LastStation } from "./LED_inside_Component/LastStation";
 import { StatusAndDelay } from "./LED_inside_Component/StatusAndDelay";
 import { TrainName } from "./LED_inside_Component/TrainName";
 import { customTrainDataDetector } from "../custom-train-data";
-import { trainDataType, trainPosition } from "../../lib/trainPositionTextArray";
+import { TrainPosition } from "./LED_inside_Component/TrainPosition";
-import { getStationID } from "../../lib/eachTrainInfoCoreLib/getStationData";
+import { TrainPositionDataPush } from "./LED_inside_Component/TrainPositionDataPush";
-import { useStationList } from "../../stateBox/useStationList";
-import { lineList } from "../../lib/getStationList";
 
 type Props = {
   d: {
@@ -42,15 +40,6 @@ export const EachData: FC<Props> = (props) => {
     openStationACFromEachTrainInfo,
   } = props;
   const { currentTrain } = useCurrentTrain();
-  const { originalStationList } = useStationList();
-  const stationList =
-    originalStationList &&
-    lineList.map((d) =>
-      originalStationList[d].map((a) => ({
-        StationNumber: a.StationNumber,
-        StationName: a.Station_JP,
-      }))
-    );
   const openTrainInfo = (d: {
     train: string;
     lastStation: string;
@@ -97,6 +86,7 @@ export const EachData: FC<Props> = (props) => {
     }
     return customTrainData;
   };
+
   const [train, setTrain] = useState(getTrainDataFromCurrentTrain(d.train));
   useEffect(() => {
     setTrain(getTrainDataFromCurrentTrain(d.train));
@@ -109,26 +99,9 @@ export const EachData: FC<Props> = (props) => {
     currentTrainData,
     station.Station_JP
   )}`;
-  const trainPositionText = (trainData: trainDataType) => {
-    const { isBetween, Pos } = trainPosition(trainData);
-    if (isBetween === true) return `現在地：${Pos.from}→${Pos.to}間を走行中`;
-    else return Pos.Pos == "" ? "" : `現在地：${Pos.Pos}`;
-  };
 
   const [platformNumber, setPlatformNumber] = useState<number>();
   const [platformDescription, setPlatformDescription] = useState<string>();
-  useEffect(() => {
-    fetch(
-      `https://n8n.haruk.in/webhook/JR-shikoku-PosID?PosNum=${currentTrainData?.PosNum}&Line=${currentTrainData?.Line}`
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        setPlatformNumber(data?.type == "Station" ? data?.platform : undefined);
-        setPlatformDescription(
-          data?.type == "Station" ? data?.description : undefined
-        );
-      });
-  }, [currentTrainData, currentTrain]);
 
   const [dialog, setDialog] = useState(false);
   const [posInput, setPosInput] = useState("");
@@ -137,50 +110,18 @@ export const EachData: FC<Props> = (props) => {
   const [stationNumberInput, setStationNumberInput] = useState("");
   return (
     <>
-      <Dialog isVisible={dialog} onBackdropPress={() => setDialog(false)}>
+      <TrainPositionDataPush
-        <Text>路線: {currentTrainData?.Line}</Text>
+        dialog={dialog}
-        <Text>地点ID: {currentTrainData?.PosNum}</Text>
+        setDialog={setDialog}
-        <Text>駅名: {stationInput}</Text>
+        currentTrainData={currentTrainData}
-        <Text>駅ナンバー: {stationNumberInput}</Text>
+        stationInput={stationInput}
-        <Input
+        stationNumberInput={stationNumberInput}
-          label="番線"
+        posInput={posInput}
-          inputMode="numeric"
+        descInput={descInput}
-          value={posInput}
+        setPosInput={setPosInput}
-          onChangeText={setPosInput}
+        setDescInput={setDescInput}
+        station={station}
       />
-        <Input
-          label="参考情報"
-          inputMode="text"
-          value={descInput}
-          onChangeText={setDescInput}
-        />
-        <Button
-          title="送信"
-          onPress={() => {
-            fetch(`https://n8n.haruk.in/webhook/JR-shikoku-PosID`, {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({
-                PosId: currentTrainData?.PosNum,
-                lineName: currentTrainData?.Line,
-                PlatformNum: parseInt(posInput),
-                Description: descInput,
-                StationName: station.Station_JP,
-                StationId: station.StationNumber,
-              }),
-            })
-              .then(() => {
-                alert("位置情報データを送信しました。");
-                setDialog(false);
-                setPosInput("");
-                setDescInput("");
-              })
-              .catch(() => {
-                alert("位置情報データの送信に失敗しました。");
-              });
-          }}
-        />
-      </Dialog>
       <TouchableOpacity
         style={{
           alignContent: "center",
@@ -205,25 +146,19 @@ export const EachData: FC<Props> = (props) => {
         <StatusAndDelay trainDelayStatus={trainDelayStatus} />
       </TouchableOpacity>
       {trainDescriptionSwitch && (
-        <Description
+        <TrainPosition
-          info={`${
+          trainIDSwitch={trainIDSwitch}
-            trainIDSwitch
+          currentTrainData={currentTrainData}
-              ? currentTrainData?.PosNum + currentTrainData?.Line
+          setStationInput={setStationInput}
-              : trainPositionText(currentTrainData)
+          setStationNumberInput={setStationNumberInput}
-          } ${platformNumber ? platformNumber + "番線" : ""} ${
+          setDescInput={setDescInput}
-            platformDescription ? "(" + platformDescription + ")" : ""
+          setPosInput={setPosInput}
-          }`}
+          setDialog={setDialog}
-          onLongClick={() => {
+          setPlatformDescription={setPlatformDescription}
-            const { isBetween, Pos } = trainPosition(currentTrainData);
+          setPlatformNumber={setPlatformNumber}
-            if (isBetween === true) return;
+          platformDescription={platformDescription}
-            setStationInput(Pos.Pos);
+          platformNumber={platformNumber}
-            setStationNumberInput(
+          key={d.train+"-trainPosition"}
-              getStationID(currentTrainData?.Pos, stationList)
-            );
-            setDescInput(platformDescription || "");
-            setPosInput(platformNumber?.toString() || "");
-            setDialog(true);
-          }}
         />
       )}
       {trainDescriptionSwitch && !!train.info && (

components/発車時刻表/LED_inside_Component/TrainPosition.tsx

@@ -0,0 +1,113 @@
+import React, { FC, useEffect } from "react";
+import { Text, TextStyle, View, TouchableOpacity } from "react-native";
+import { useStationList } from "../../../stateBox/useStationList";
+import {
+  trainDataType,
+  trainPosition,
+} from "../../../lib/trainPositionTextArray";
+import { lineList } from "../../../lib/getStationList";
+import { getStationID } from "../../../lib/eachTrainInfoCoreLib/getStationData";
+import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
+
+const descriptionStyle: TextStyle = {
+  fontSize: parseInt("16%"),
+  fontWeight: "bold",
+};
+
+type Props = {
+  numberOfLines?: number;
+  trainIDSwitch: boolean;
+  currentTrainData: trainDataType;
+  setStationInput: (station: string) => void;
+  setStationNumberInput: (station: string) => void;
+  setDescInput: (desc: string) => void;
+  setPosInput: (pos: string) => void;
+  setDialog: (dialog: boolean) => void;
+  platformDescription: string;
+  platformNumber: number;
+  setPlatformDescription: (desc: string) => void;
+  setPlatformNumber: (num: number) => void;
+};
+
+export const TrainPosition: FC<Props> = ({
+  numberOfLines = 0,
+  trainIDSwitch,
+  currentTrainData,
+  setStationInput,
+  setStationNumberInput,
+  setDescInput,
+  setPosInput,
+  setDialog,
+  setPlatformDescription,
+  setPlatformNumber,
+  platformDescription,
+  platformNumber,
+}) => {
+  const { currentTrain } = useCurrentTrain();
+  const { originalStationList } = useStationList();
+  const stationList =
+    originalStationList &&
+    lineList.map((d) =>
+      originalStationList[d].map((a) => ({
+        StationNumber: a.StationNumber,
+        StationName: a.Station_JP,
+      }))
+    );
+  useEffect(() => {
+    fetch(
+      `https://n8n.haruk.in/webhook/JR-shikoku-PosID?PosNum=${currentTrainData?.PosNum}&Line=${currentTrainData?.Line}`
+    )
+      .then((res) => res.json())
+      .then((data: { type: string; platform: number; description: string }) => {
+        setPlatformNumber(data?.type == "Station" ? data?.platform : undefined);
+        setPlatformDescription(
+          data?.type == "Station" ? data?.description : undefined
+        );
+      });
+  }, [currentTrainData, currentTrain]);
+
+  const trainPositionText = (trainData: trainDataType) => {
+    const { isBetween, Pos } = trainPosition(trainData);
+    if (isBetween === true) return `現在地：${Pos.from}→${Pos.to}間を走行中`;
+    else return Pos.Pos == "" ? "" : `現在地：${Pos.Pos}`;
+  };
+
+  return (
+    <TouchableOpacity
+      style={{
+        alignContent: "center",
+        alignItems: "center",
+        width: "94%",
+        marginVertical: 5,
+        marginHorizontal: "3%",
+        backgroundColor: "#000",
+        flexDirection: "row",
+        overflow: "hidden",
+      }}
+      onLongPress={() => {
+        const { isBetween, Pos } = trainPosition(currentTrainData);
+        if (isBetween === true) return;
+        setStationInput(Pos.Pos);
+        setStationNumberInput(getStationID(currentTrainData?.Pos, stationList));
+        setDescInput(platformDescription || "");
+        setPosInput(platformNumber?.toString() || "");
+        setDialog(true);
+      }}
+    >
+      <View style={{ flex: 4, flexDirection: "row" }}>
+        <Text
+          style={{ ...descriptionStyle, color: "green" }}
+          numberOfLines={numberOfLines}
+        >
+          {`${
+            trainIDSwitch
+              ? currentTrainData?.PosNum + currentTrainData?.Line
+              : trainPositionText(currentTrainData)
+          } ${platformNumber ? platformNumber + "番線" : ""} ${
+            platformDescription ? "(" + platformDescription + ")" : ""
+          }`}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};

components/発車時刻表/LED_inside_Component/TrainPositionDataPush.tsx

@@ -0,0 +1,77 @@
+import React, { FC, useState } from "react";
+import { Text } from "react-native";
+import { Dialog, Input, Button } from "react-native-elements";
+import { trainDataType } from "../../../lib/trainPositionTextArray";
+import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
+type Props = {
+  dialog: boolean;
+  setDialog: (dialog: boolean) => void;
+  currentTrainData: trainDataType;
+  stationInput: string;
+  stationNumberInput: string;
+  posInput: string;
+  descInput: string;
+  setPosInput: (pos: string) => void;
+  setDescInput: (desc: string) => void;
+  station: {
+    Station_JP: string;
+    StationNumber: string;
+  };
+};
+export const TrainPositionDataPush: FC<Props> = ({
+  dialog,
+  setDialog,
+  currentTrainData,
+  stationInput,
+  stationNumberInput,
+  posInput,
+  descInput,
+  setPosInput,
+  setDescInput,
+  station,
+}) => {
+  const sendPlatformData = () => {
+    fetch(`https://n8n.haruk.in/webhook/JR-shikoku-PosID`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        PosId: currentTrainData?.PosNum,
+        lineName: currentTrainData?.Line,
+        PlatformNum: parseInt(posInput),
+        Description: descInput,
+        StationName: station.Station_JP,
+        StationId: station.StationNumber,
+      }),
+    })
+      .then(() => {
+        alert("位置情報データを送信しました。");
+        setDialog(false);
+        setPosInput("");
+        setDescInput("");
+      })
+      .catch(() => {
+        alert("位置情報データの送信に失敗しました。");
+      });
+  };
+  return (
+    <Dialog isVisible={dialog} onBackdropPress={() => setDialog(false)}>
+      <Text>路線: {currentTrainData?.Line}</Text>
+      <Text>地点ID: {currentTrainData?.PosNum}</Text>
+      <Text>駅名: {stationInput}</Text>
+      <Text>駅ナンバー: {stationNumberInput}</Text>
+      <Input
+        label="番線"
+        inputMode="numeric"
+        value={posInput}
+        onChangeText={setPosInput}
+      />
+      <Input
+        label="参考情報"
+        inputMode="text"
+        value={descInput}
+        onChangeText={setDescInput}
+      />
+      <Button title="送信" onPress={sendPlatformData} />
+    </Dialog>
+  );
+};

components/発車時刻表/LED_vidion.js

@@ -206,6 +206,7 @@ export default function LED_vision(props) {
             openStationACFromEachTrainInfo,
           }}
           station={station[0]}
+          key={d.train}
         />
       ))}
       {areaString != "" && isInfoArea && (