とりあえず最低限の駅発車情報が動作がするように作成
This commit is contained in:
harukin-expo-dev-env
@@ -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 (
|
||||
<TouchableOpacity
|
||||
style={{ flex: 1, flexDirection: "row" }}
|
||||
@@ -40,7 +190,6 @@ export const FixedStation = ({ stationID }) => {
|
||||
backgroundColor: lineColor,
|
||||
flexDirection: "row",
|
||||
width: "100%",
|
||||
|
||||
}}
|
||||
>
|
||||
<StationNumberMaker
|
||||
@@ -54,7 +203,7 @@ export const FixedStation = ({ stationID }) => {
|
||||
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%",
|
||||
}}
|
||||
/>
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
@@ -80,7 +230,7 @@ export const FixedStation = ({ stationID }) => {
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 20 }}>駅情報固定中</Text>
|
||||
<Text style={{ fontSize: 20 }}>次の発車予定：</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@@ -89,15 +239,27 @@ export const FixedStation = ({ stationID }) => {
|
||||
flex: 5,
|
||||
flexDirection: "column",
|
||||
backgroundColor: lineColor,
|
||||
borderTopWidth: 5,
|
||||
borderTopColor: lineColor,
|
||||
}}
|
||||
>
|
||||
|
||||
<View style={{ backgroundColor: "white", flex: 1 }}>
|
||||
<Text style={{ fontSize: 20 }}>次：15:00 快速マリン 岡山</Text>
|
||||
</View>
|
||||
<View style={{ backgroundColor: "white", flex: 1 }}>
|
||||
<Text style={{ fontSize: 20 }}>次：15:00 快速マリン 岡山</Text>
|
||||
</View>
|
||||
{selectedTrain.length > 0 ? (
|
||||
selectedTrain.map((d) => (
|
||||
<View
|
||||
style={{ backgroundColor: "white", flexDirection: "row" }}
|
||||
key={d.train + "-fixedStationBox"}
|
||||
>
|
||||
<Text style={{ fontSize: 20, flex: 1 }}>{d.time}</Text>
|
||||
<Text style={{ fontSize: 20, flex: 1 }}>{d.train}</Text>
|
||||
<Text style={{ fontSize: 20, flex: 1 }}>{d.lastStation}</Text>
|
||||
<Text style={{ fontSize: 20, flex: 1 }}>定刻</Text>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<View style={{ backgroundColor: "white", flex: 1 }}>
|
||||
<Text style={{ fontSize: 20 }}>次：15:00 快速マリン 岡山</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user