diff --git a/components/ActionSheetComponents/EachTrainInfo/PositionBox.tsx b/components/ActionSheetComponents/EachTrainInfo/PositionBox.tsx new file mode 100644 index 0000000..ed962e5 --- /dev/null +++ b/components/ActionSheetComponents/EachTrainInfo/PositionBox.tsx @@ -0,0 +1,122 @@ +import { trainPosition } from "@/lib/trainPositionTextArray"; +import React, { FC } from "react"; +import { View, Text, TextStyle, ViewStyle } from "react-native"; + +type stateBox = { + currentTrainData: any; + platformNumber: any; + title: string; + style?: ViewStyle; + mode?: number; + platformDescription: string; + lineNumber: string; +}; +export const PositionBox: FC = (props) => { + const { + currentTrainData, + platformNumber, + title, + style, + mode, + platformDescription, + lineNumber, + } = props; + let firstText = ""; + let secondText = ""; + let marginText = ""; + let externalText = ""; + const { isBetween, Pos: PosData } = trainPosition(currentTrainData); + if (isBetween === true) { + const { from, to } = PosData; + firstText = from; + secondText = to; + marginText = mode == 2 ? "→" : "↓"; + } else { + const { Pos } = PosData; + if (Pos !== "") { + firstText = Pos; + if (platformNumber) { + secondText = `${platformNumber}番乗り場`; + if (lineNumber) { + externalText = `${lineNumber}番線`; + } + } else if (lineNumber) { + secondText = `${lineNumber}番線`; + } + } + } + return ( + + {title} + + + {firstText && ( + + {firstText} + + )} + {marginText && ( + + {marginText} + + )} + {secondText && ( + + {secondText} + + )} + + {(platformDescription || externalText) && ( + + + {" " + externalText} + {" " + platformDescription} + + + )} + + ); +}; +const boxStyle: ViewStyle = { + flex: 1, + backgroundColor: "white", + borderRadius: 10, + padding: 10, + margin: 10, +}; +const boxStyle2: ViewStyle = { + flex: 1, + backgroundColor: "white", + borderRadius: 10, + padding: 5, + margin: 5, +}; +const boxTextStyle2: TextStyle = { + fontSize: 18, + color: "#0099CC", + textAlign: "right", +}; +const boxTextStyleBig: TextStyle = { + fontSize: 28, + color: "#0099CC", + textAlign: "right", +}; + + +const boxTextStyleMini: TextStyle = { + fontSize: 16, + color: "#0099CC", + textAlign: "right", +}; + + +const boxTextStyle: TextStyle = { + fontSize: 25, + color: "#0099CC", + textAlign: "right", +}; diff --git a/components/ActionSheetComponents/EachTrainInfo/StateBox.tsx b/components/ActionSheetComponents/EachTrainInfo/StateBox.tsx index fa5f65c..c124e32 100644 --- a/components/ActionSheetComponents/EachTrainInfo/StateBox.tsx +++ b/components/ActionSheetComponents/EachTrainInfo/StateBox.tsx @@ -15,21 +15,7 @@ export const StateBox: FC = (props) => { {title} - {text?.match("～") ? ( - <> - - {text.split("～")[0]} - - - {mode == 2 ? "→" : "↓"} - - - {text.split("～")[1]} - - - ) : ( - {text} - )} + {text} {endText && ( diff --git a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js index 120af56..9dd81fa 100644 --- a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js +++ b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js @@ -1,6 +1,7 @@ import React, { useState, useEffect } from "react"; import { View, TouchableOpacity, useWindowDimensions } from "react-native"; import { StateBox } from "./StateBox"; +import { PositionBox } from "./PositionBox"; import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientationChange"; import { getStationList2 } from "../../../lib/getStationList"; import { useCurrentTrain } from "../../../stateBox/useCurrentTrain"; @@ -26,54 +27,58 @@ export const TrainDataView = ({ const [mapsStationData, setMapsStationData] = useState(undefined); const [platformNumber, setPlatformNumber] = useState(); + const [lineNumber, setLineNumber] = useState(); const [platformDescription, setPlatformDescription] = useState(); useEffect(() => { //currentTrainData.Pos = "鴨川～端岡"; //test if (!currentTrainData) return; fetch( - `https://n8n.haruk.in/webhook/JR-shikoku-PosID?PosNum=${currentTrainData?.PosNum}&Line=${currentTrainData?.Line}` + `https://n8n.haruk.in/webhook/JR-shikoku-PosID-v3?PosId=${currentTrainData?.PosNum}&lineName=${currentTrainData?.Line}&StationName=${currentTrainData?.Pos}` ) .then((res) => res.json()) .then((data) => { - setPlatformNumber(data?.type == "Station" ? data?.platform : undefined); - setPlatformDescription( - data?.type == "Station" ? data?.description : undefined - ); + if (!data) return; + const { + type, + stationName, + lineNumber, + platformNumber, + position, + description, + } = data; + if (type == "Station") { + setLineNumber(lineNumber); + setPlatformNumber(platformNumber); + setPlatformDescription(description); + } else { + setLineNumber(undefined); + setPlatformNumber(undefined); + setPlatformDescription(undefined); + } }); }, [currentTrainData]); useEffect(() => { getStationList2().then(setMapsStationData); }, []); const onLine = !!currentPosition?.toString().length; - const trainPositionText = (trainData) => { - const { isBetween, Pos: PosData } = trainPosition(trainData); - const { from, to, Pos } = PosData; - if (isBetween === true) return `${from}～${to}`; - if (Pos == "") return ""; - return `${Pos}${platformNumber ? ` ${platformNumber}番線` : ""}`; - }; const [dialog, setDialog] = useState(false); - const [deleteDialog, setDeleteDialog] = useState(false); const [posInput, setPosInput] = useState(""); const [descInput, setDescInput] = useState(""); - const [stationInput, setStationInput] = useState(""); const [stationNumberInput, setStationNumberInput] = useState(""); + const [lineInput, setLineInput] = useState(""); return ( <> - = ({ const { expoPushToken } = useNotification(); // 列車名、種別、フォントの取得 - const [typeName, trainName, fontAvailable, isOneMan, infogram, isEdit] = - useMemo(() => { - const { type, trainName, trainNumDistance, infogram, isEdit } = - customTrainDataDetector(trainNum, allCustomTrainData); - const [typeString, fontAvailable, isOneMan] = getStringConfig( - type, - trainNum - ); - switch (true) { - case trainName !== "": - // 特急の場合は、列車名を取得 - // 列番対称データがある場合はそれから列車番号を取得 - return [ - typeString, - trainName + - (trainNumDistance !== null - ? ` ${parseInt(trainNum) - trainNumDistance}号` - : ""), - fontAvailable, - isOneMan, - infogram, - isEdit, - ]; - case trainData[trainData.length - 1] === undefined: - return [typeString, "", fontAvailable, isOneMan, infogram, isEdit]; - default: - // 行先がある場合は、行先を取得 - return [ - typeString, - migrateTrainName( - trainData[trainData.length - 1].split(",")[0] + "行き" - ), - fontAvailable, - isOneMan, - infogram, - isEdit - ]; - } - }, [trainData]); + const [ + typeName, + trainName, + fontAvailable, + isOneMan, + infogram, + isEdit, + uwasa, + vehicleFormation, + ] = useMemo(() => { + const { type, trainName, trainNumDistance, infogram, isEdit, uwasa, vehicleFormation } = + customTrainDataDetector(trainNum, allCustomTrainData); + const [typeString, fontAvailable, isOneMan] = getStringConfig( + type, + trainNum + ); + switch (true) { + case trainName !== "": + // 特急の場合は、列車名を取得 + // 列番対称データがある場合はそれから列車番号を取得 + return [ + typeString, + trainName + + (trainNumDistance !== null + ? ` ${parseInt(trainNum) - trainNumDistance}号` + : ""), + fontAvailable, + isOneMan, + infogram, + isEdit, + uwasa, + vehicleFormation + ]; + case trainData[trainData.length - 1] === undefined: + return [ + typeString, + "", + fontAvailable, + isOneMan, + infogram, + isEdit, + uwasa, + vehicleFormation + ]; + default: + // 行先がある場合は、行先を取得 + return [ + typeString, + migrateTrainName( + trainData[trainData.length - 1].split(",")[0] + "行き" + ), + fontAvailable, + isOneMan, + infogram, + isEdit, + uwasa, + vehicleFormation + ]; + } + }, [trainData]); return ( = ({ {isOneMan && } {trainName} - {isEdit &&alert("このアイコン、列車データはコミュニティによってリアルタイム追加されています。")} />} + {isEdit && ( + + alert( + `[このアイコン、列車データはコミュニティによってリアルタイム追加されています。]\n使用車両情報:\n${vehicleFormation}\n投稿者メモ:\n${uwasa || "なし"}` + ) + } + /> + )} diff --git a/components/Menu/FixedContentBottom.js b/components/Menu/FixedContentBottom.js index c900df6..1f08cb2 100644 --- a/components/Menu/FixedContentBottom.js +++ b/components/Menu/FixedContentBottom.js @@ -197,6 +197,19 @@ export const FixedContentBottom = (props) => { その他 + Linking.openURL("https://twitter.com/Xprocess_main/status/1955242437817012300")} + + > + + 公式Discordのご案内 + + + 皆さんの目撃情報をアプリに反映しませんか？Discordに登録して運用を報告しましょう！ + + = (props) => { const [dialog, setDialog] = useState(false); const [deleteDialog, setDeleteDialog] = useState(false); const [posInput, setPosInput] = useState(""); + const [lineInput, setLineInput] = useState(""); const [descInput, setDescInput] = useState(""); const [stationInput, setStationInput] = useState(""); const [stationNumberInput, setStationNumberInput] = useState(""); @@ -157,13 +157,13 @@ export const EachData: FC = (props) => { setDialog={setDialog} {...{ currentTrainData, - stationInput, stationNumberInput, + lineInput, + setLineInput, posInput, - descInput, setPosInput, - setDescInput, - station, + descInput, + setDescInput }} /> = (props) => { setPlatformNumber={setPlatformNumber} platformDescription={platformDescription} platformNumber={platformNumber} + lineInput={lineInput} + setLineInput={setLineInput} key={d.train + "-trainPosition"} /> )} diff --git a/components/発車時刻表/LED_inside_Component/TrainPosition.tsx b/components/発車時刻表/LED_inside_Component/TrainPosition.tsx index 5f830a0..a371f7c 100644 --- a/components/発車時刻表/LED_inside_Component/TrainPosition.tsx +++ b/components/発車時刻表/LED_inside_Component/TrainPosition.tsx @@ -1,4 +1,4 @@ -import React, { FC, useEffect } from "react"; +import React, { FC, useEffect, useState } from "react"; import { Text, TextStyle, View, TouchableOpacity } from "react-native"; import { useStationList } from "../../../stateBox/useStationList"; import { @@ -24,9 +24,11 @@ type Props = { setDialog: (dialog: boolean) => void; setDeleteDialog: (dialog: boolean) => void; platformDescription: string; - platformNumber: number; + platformNumber: string; setPlatformDescription: (desc: string) => void; - setPlatformNumber: (num: number) => void; + setPlatformNumber: (num: string) => void; + lineInput: string; + setLineInput: (line: string) => void; }; export const TrainPosition: FC = ({ @@ -43,28 +45,55 @@ export const TrainPosition: FC = ({ setPlatformNumber, platformDescription, platformNumber, + setLineInput, }) => { - const { currentTrain } = useCurrentTrain(); const { stationList } = useStationList(); - + type data = { + type: string; + lineNumber: string; + platformNumber: string; + position: string; + stationName: string; + description: string; + }; + const [database, setDatabase] = useState(null); + const [text, setText] = useState(""); + const [masterText, setMasterText] = useState(""); + useEffect(() => { + const text = `${currentTrainData?.PosNum} ${currentTrainData?.Line} ${currentTrainData?.Pos}`; + setText(trainIDSwitch ? text : masterText); + return () => { + setText(""); + }; + }, [masterText, trainIDSwitch]); useEffect(() => { fetch( - `https://n8n.haruk.in/webhook/JR-shikoku-PosID?PosNum=${currentTrainData?.PosNum}&Line=${currentTrainData?.Line}` + `https://n8n.haruk.in/webhook/JR-shikoku-PosID-v3?PosId=${currentTrainData?.PosNum}&lineName=${currentTrainData?.Line}&StationName=${currentTrainData?.Pos}` ) .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 - ); + .then((data: data) => { + const { type, platformNumber, description, lineNumber } = data; + setDatabase(data); + const { isBetween, Pos } = trainPosition(currentTrainData); + if (isBetween === true) { + // 移動中 + setMasterText(`現在地：${Pos.from}→${Pos.to}間を走行中`); + } else { + if (Pos.Pos) { + let platform = platformNumber ? `${platformNumber}番乗り場` : ""; + let line = lineNumber ? `${lineNumber}番線` : ""; + setMasterText( + `現在地：${Pos.Pos} ${platform || line} ${description || ""}` + ); + } else { + setMasterText(""); + } + } }); - }, [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 () => { + setMasterText(""); + }; + }, [currentTrainData?.PosNum, currentTrainData?.Line, currentTrainData?.Pos]); return ( = ({ }} onLongPress={() => { const { isBetween, Pos } = trainPosition(currentTrainData); + setStationNumberInput(getStationID(currentTrainData?.Pos, stationList)); + setPosInput(database?.platformNumber?.toString() || ""); if (isBetween === true) { - if (platformNumber == undefined && platformDescription == undefined) + if (database?.platformNumber == undefined && database?.description == undefined) return; setStationInput(`${Pos.from}→${Pos.to}間`); - setStationNumberInput( - getStationID(currentTrainData?.Pos, stationList) - ); - setPosInput(platformNumber?.toString() || ""); setDeleteDialog(true); } else { - setStationInput(Pos.Pos); - setStationNumberInput( - getStationID(currentTrainData?.Pos, stationList) - ); - setDescInput(platformDescription || ""); - setPosInput(platformNumber?.toString() || ""); + setStationInput(currentTrainData?.Pos); + setDescInput(database?.description || ""); + setLineInput(database?.lineNumber?.toString() || ""); + setPlatformNumber(database?.platformNumber?.toString() || ""); setDialog(true); } }} @@ -105,13 +130,7 @@ export const TrainPosition: FC = ({ style={{ ...descriptionStyle, color: "green" }} numberOfLines={numberOfLines} > - {`${ - trainIDSwitch - ? currentTrainData?.PosNum + currentTrainData?.Line - : trainPositionText(currentTrainData) - } ${platformNumber ? platformNumber + "番線" : ""} ${ - platformDescription ? "(" + platformDescription + ")" : "" - }`} + {text} diff --git a/components/発車時刻表/LED_inside_Component/TrainPositionDataDelete.tsx b/components/発車時刻表/LED_inside_Component/TrainPositionDataDelete.tsx index b266d6c..439d989 100644 --- a/components/発車時刻表/LED_inside_Component/TrainPositionDataDelete.tsx +++ b/components/発車時刻表/LED_inside_Component/TrainPositionDataDelete.tsx @@ -17,7 +17,7 @@ export const TrainPositionDataDelete: FC = ({ stationNumberInput, }) => { const sendPlatformData = () => { - fetch(`https://n8n.haruk.in/webhook/JR-shikoku-PosID`, { + fetch(`https://n8n.haruk.in/webhook/JR-shikoku-PosID-v3`, { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ diff --git a/components/発車時刻表/LED_inside_Component/TrainPositionDataPush.tsx b/components/発車時刻表/LED_inside_Component/TrainPositionDataPush.tsx index 7bf8be2..7145ef1 100644 --- a/components/発車時刻表/LED_inside_Component/TrainPositionDataPush.tsx +++ b/components/発車時刻表/LED_inside_Component/TrainPositionDataPush.tsx @@ -1,46 +1,47 @@ -import React, { FC, useState } from "react"; +import React, { FC } 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"; +import { getStationID } from "@/lib/eachTrainInfoCoreLib/getStationData"; +import { useStationList } from "@/stateBox/useStationList"; type Props = { dialog: boolean; setDialog: (dialog: boolean) => void; currentTrainData: trainDataType; - stationInput: string; stationNumberInput: string; posInput: string; descInput: string; + lineInput: string; setPosInput: (pos: string) => void; setDescInput: (desc: string) => void; - station: { - Station_JP: string; - StationNumber: string; - }; + setLineInput: (line: string) => void; + }; export const TrainPositionDataPush: FC = ({ dialog, setDialog, currentTrainData, - stationInput, stationNumberInput, + lineInput, + setLineInput, posInput, - descInput, setPosInput, + descInput, setDescInput, - station, }) => { + const { stationList } = useStationList(); const sendPlatformData = () => { - fetch(`https://n8n.haruk.in/webhook/JR-shikoku-PosID`, { + fetch(`https://n8n.haruk.in/webhook/JR-shikoku-PosID-v3`, { 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, + PosId: currentTrainData?.PosNum, //自動：位置情報ID + StationId: getStationID(currentTrainData?.Pos, stationList), //自動：駅ID + StationName: currentTrainData?.Pos, //自動：駅名、漢字 + lineName: currentTrainData?.Line, //自動：位置情報路線ID(koutoku/yosan) + Description: descInput, //手動入力、参考情報 + platformNumber: parseInt(posInput), //手動入力、乗り場表記 + lineNumber: parseInt(lineInput), //手動入力、番線表記 }), }) .then(() => { @@ -55,22 +56,30 @@ export const TrainPositionDataPush: FC = ({ }; return ( setDialog(false)}> + 駅番線情報投稿機能 路線: {currentTrainData?.Line} 地点ID: {currentTrainData?.PosNum} - 駅名: {stationInput} + 駅名: {currentTrainData?.Pos} 駅ナンバー: {stationNumberInput} + + この機能は駅の停車位置に関する情報を投稿する機能です。列車の遅れ、運行情報を投稿するフォームではありませんのでご注意ください。 );