From b0cf70262065bafcd775b7a1218347a6cc1eb8b0 Mon Sep 17 00:00:00 2001 From: harukin-expo-dev-env Date: Mon, 8 Sep 2025 12:28:10 +0000 Subject: [PATCH] =?UTF-8?q?=E3=81=A8=E3=82=8A=E3=81=82=E3=81=88=E3=81=9A?= =?UTF-8?q?=E6=9C=80=E4=BD=8E=E9=99=90=E3=81=AE=E9=A7=85=E7=99=BA=E8=BB=8A?= =?UTF-8?q?=E6=83=85=E5=A0=B1=E3=81=8C=E5=8B=95=E4=BD=9C=E3=81=8C=E3=81=99?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Apps/FixedPositionBox/FixedStationBox.tsx | 190 ++++++++++++++++-- 1 file changed, 176 insertions(+), 14 deletions(-) diff --git a/components/Apps/FixedPositionBox/FixedStationBox.tsx b/components/Apps/FixedPositionBox/FixedStationBox.tsx index c5b9e4b..d27e505 100644 --- a/components/Apps/FixedPositionBox/FixedStationBox.tsx +++ b/components/Apps/FixedPositionBox/FixedStationBox.tsx @@ -1,7 +1,12 @@ import lineColorList from "@/assets/originData/lineColorList"; import { StationNumberMaker } from "@/components/駅名表/StationNumberMaker"; +import { objectIsEmpty } from "@/lib/objectIsEmpty"; +import { trainPosition } from "@/lib/trainPositionTextArray"; +import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram"; +import { useAreaInfo } from "@/stateBox/useAreaInfo"; import { useCurrentTrain } from "@/stateBox/useCurrentTrain"; import { useStationList, StationProps } from "@/stateBox/useStationList"; +import dayjs from "dayjs"; import { useEffect, useState } from "react"; import { Text, TouchableOpacity, View } from "react-native"; @@ -17,6 +22,151 @@ export const FixedStation = ({ stationID }) => { station.length > 0 ? lineColorList[station[0]?.StationNumber.slice(0, 1)] : "white"; + //// + + const timeFiltering = (d) => { + const baseTime = 2; + if (currentTrain.filter((t) => t.num == d.train).length == 0) { + const date = dayjs(); + const trainTime = date + .hour(parseInt(d.time.split(":")[0])) + .minute(parseInt(d.time.split(":")[1])); + + if (date.isAfter(trainTime)) { + return false; + } else if (trainTime.diff(date) < baseTime * 60 * 60 * 1000) { + return true; + } + return false; + } else { + const Pos = trainPosition( + currentTrain.filter((t) => t.num == d.train)[0] + ); + const nextPos = Pos.isBetween ? Pos.Pos.to : Pos.Pos.Pos; + const PrePos = Pos.isBetween ? Pos.Pos.from : ""; + if (station[0].Station_JP == nextPos) { + if (d.lastStation != station[0].Station_JP) return true; + } else if (station[0].Station_JP == PrePos) { + return false; + } + const date = dayjs(); + let [h, m] = d.time.split(":"); + let delay = isNaN(currentTrain.filter((t) => t.num == d.train)[0].delay) + ? 0 + : currentTrain.filter((t) => t.num == d.train)[0].delay; + const db = date.hour(parseInt(h)).minute(parseInt(m) + parseInt(delay)); + return !date.isAfter(db); + } + }; + type trainDataProps = { + train?: string; + lastStation?: string; + time?: string; + isThrough?: boolean; + }; + const getTime = (stationDiagram, station) => { + const returnData = Object.keys(stationDiagram) + .map((trainNum) => { + let trainData: trainDataProps = {}; + stationDiagram[trainNum].split("#").forEach((data) => { + if (data.match("着")) { + trainData.lastStation = data.split(",着,")[0]; + } + if (data.match("着編")) { + trainData.lastStation = data.split(",着編,")[0]; + } + if (data.split(",")[0] === station.Station_JP) { + if (data.match(",発,")) { + trainData.time = data.split(",発,")[1]; + } else if (data.match(",発編,")) { + trainData.time = data.split(",発編,")[1]; + } else if (data.match(",通編,")) { + trainData.time = data.split(",通編,")[1]; + trainData.isThrough = true; + } else if (data.match(",着,")) { + trainData.time = data.split(",着,")[1]; + } else if (data.match(",着編,")) { + trainData.time = data.split(",着編,")[1]; + } + } + }); + return { + train: trainNum, + time: trainData.time, + lastStation: trainData.lastStation, + isThrough: trainData.isThrough, + }; + }) + .filter((d) => d.time); + return returnData.sort((a, b) => { + switch (true) { + case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]): + return -1; + case parseInt(a.time.split(":")[0]) > parseInt(b.time.split(":")[0]): + return 1; + case parseInt(a.time.split(":")[1]) < parseInt(b.time.split(":")[1]): + return -1; + case parseInt(a.time.split(":")[1]) > parseInt(b.time.split(":")[1]): + return 1; + default: + return 0; + } + }); + }; + + const { allTrainDiagram } = useAllTrainDiagram(); + const { areaInfo, areaStationID } = useAreaInfo(); + const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表 + const [isInfoArea, setIsInfoArea] = useState(false); + const { currentTrain } = useCurrentTrain(); + + useEffect(() => { + // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報] + if (!allTrainDiagram) { + setStationDiagram({}); + return; + } + if (station.length == 0) { + setStationDiagram({}); + return; + } + let returnData = {}; + Object.keys(allTrainDiagram).forEach((key) => { + if (allTrainDiagram[key].match(station[0].Station_JP + ",")) { + returnData[key] = allTrainDiagram[key]; + } + }); + setStationDiagram(returnData); + setIsInfoArea(station.some((s) => areaStationID.includes(s.StationNumber))); + }, [allTrainDiagram, station]); + + const [trainTimeAndNumber, setTrainTimeAndNumber] = useState([]); + + useEffect(() => { + //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット + if (objectIsEmpty(stationDiagram)) return () => {}; + const getTimeData = getTime(stationDiagram, station[0]); + setTrainTimeAndNumber(getTimeData); + }, [stationDiagram]); + const [selectedTrain, setSelectedTrain] = useState< + { + isThrough?: boolean; + train?: string; + lastStation?: string; + time?: string; + }[] + >([]); + useEffect(() => { + if (!trainTimeAndNumber) return () => {}; + if (!currentTrain) return () => {}; + const data = trainTimeAndNumber + .filter((d) => currentTrain.map((m) => m.num).includes(d.train)) //現在の列車に絞る[ToDo] + .filter(timeFiltering); + //.filter((d) => !!finalSwitch || d.lastStation != station[0].Station_JP) //最終列車表示設定 + setSelectedTrain(data); + }, [trainTimeAndNumber, currentTrain /*finalSwitch*/]); + + console.log(selectedTrain); return ( { backgroundColor: lineColor, flexDirection: "row", width: "100%", - }} > { textAlignVertical: "center", margin: 0, padding: 0, - flex:1 + flex: 1, }} > {station[0]?.Station_JP} @@ -64,14 +213,15 @@ export const FixedStation = ({ stationID }) => { backgroundColor: "white", width: 10, borderLeftColor: lineColor, + borderTopColor: lineColor, borderBottomColor: "white", - borderBottomWidth: 24, - borderLeftWidth: 10, + borderBottomWidth: 16, + borderLeftWidth: 8, borderRightWidth: 0, - borderTopWidth: 0, + borderTopWidth: 5, height: "100%", }} - /> + /> { flex: 1, }} > - 駅情報固定中 + 次の発車予定: @@ -89,15 +239,27 @@ export const FixedStation = ({ stationID }) => { flex: 5, flexDirection: "column", backgroundColor: lineColor, + borderTopWidth: 5, + borderTopColor: lineColor, }} > - - - 次:15:00 快速マリン 岡山 - - - 次:15:00 快速マリン 岡山 - + {selectedTrain.length > 0 ? ( + selectedTrain.map((d) => ( + + {d.time} + {d.train} + {d.lastStation} + 定刻 + + )) + ) : ( + + 次:15:00 快速マリン 岡山 + + )} );