231 lines
7.8 KiB
JavaScript
231 lines
7.8 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { View, useWindowDimensions } from "react-native";
|
|
import dayjs from "dayjs";
|
|
import { useInterval } from "../../lib/useInterval";
|
|
import { objectIsEmpty } from "../../lib/objectIsEmpty";
|
|
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
|
|
import { useAreaInfo } from "../../stateBox/useAreaInfo";
|
|
import { AS } from "../../storageControl";
|
|
import { Footer } from "./LED_Vision_Component/Footer";
|
|
import { Header } from "./LED_Vision_Component/Header";
|
|
import { Description } from "./LED_inside_Component/Description";
|
|
import { EachData } from "./EachData";
|
|
import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
|
|
import { trainPosition } from "@/lib/trainPositionTextArray";
|
|
import { AreaDescription } from "./LED_inside_Component/AreaDescription";
|
|
|
|
/**
|
|
*
|
|
* 1-30M しおかぜ
|
|
* 31-58D 南風
|
|
* 1001-1030M いしづち(併結)
|
|
* 1041-1046M いしづち(単独)
|
|
* 1051-1082D 宇和海
|
|
* 1091M MX松山
|
|
* 1092M MX高松
|
|
* 2001-2010D しまんと
|
|
* 2071-2086D あしずり
|
|
* 3001-3033D うずしお
|
|
* 3101-3177M マリンライナー
|
|
* 4001-4011D 剣山
|
|
* 5006,13,22,29 うずしお(岡山直通南風併結)
|
|
* 5831-5843D 土佐くろしお鉄道ごめん・なはり線直通快速
|
|
* 5853-5892D 土佐くろしお鉄道ごめん・なはり線直通普通
|
|
* 8011,8012D 四国まんなか千年ものがたり
|
|
* 8031,(8041) サンライズ瀬戸, 琴平(延長)
|
|
* 8053,8054D トキの夜明けのものがたり
|
|
* 8176,8179D アンパントロッコタカマツ
|
|
* 8277,8278D アンパントロッココトヒラ
|
|
* 8451,8452D よしの川トロッコ
|
|
* 8814,8819D しまんトロッコ
|
|
* 8911-8914D 伊予灘ものがたり
|
|
* 9001-9030* いしづち(リレー)
|
|
* 9031M サンライズ瀬戸琴平(延長)(臨時？)
|
|
* 9062D 四国まんなか千年ものがたり(臨時？)
|
|
*/
|
|
export default function LED_vision(props) {
|
|
const { station, navigate, openStationACFromEachTrainInfo } = props;
|
|
const { currentTrain } = useCurrentTrain();
|
|
const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
|
|
const [finalSwitch, setFinalSwitch] = useState(false);
|
|
const [trainIDSwitch, setTrainIDSwitch] = useState(false);
|
|
const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
|
|
const [isInfoArea, setIsInfoArea] = useState(false);
|
|
const { areaInfo, areaStationID } = useAreaInfo();
|
|
const { allTrainDiagram } = useAllTrainDiagram();
|
|
|
|
useEffect(() => {
|
|
AS.getItem("LEDSettings/trainIDSwitch").then((data) => {
|
|
setTrainIDSwitch(data === "true");
|
|
});
|
|
AS.getItem("LEDSettings/trainDescriptionSwitch").then((data) => {
|
|
setTrainDescriptionSwitch(data === "true");
|
|
});
|
|
AS.getItem("LEDSettings/finalSwitch").then((data) => {
|
|
setFinalSwitch(data === "true");
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
// 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報]
|
|
if (!allTrainDiagram) {
|
|
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]);
|
|
|
|
/*
|
|
{lastStation: "当駅止", time: "12:34", train: "1234M"}
|
|
*/
|
|
const [trainTimeAndNumber, setTrainTimeAndNumber] = useState([]);
|
|
|
|
useEffect(() => {
|
|
//現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
|
|
if (objectIsEmpty(stationDiagram)) return () => {};
|
|
const getTimeData = getTime(stationDiagram, station[0]);
|
|
setTrainTimeAndNumber(getTimeData);
|
|
}, [stationDiagram]);
|
|
|
|
const [selectedTrain, setSelectedTrain] = useState([]);
|
|
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 != "当駅止");
|
|
setSelectedTrain(data);
|
|
}, [trainTimeAndNumber, currentTrain, finalSwitch]);
|
|
|
|
const getTime = (stationDiagram, station) => {
|
|
const returnData = Object.keys(stationDiagram)
|
|
.map((trainNum) => {
|
|
let trainData = {};
|
|
stationDiagram[trainNum].split("#").forEach((data) => {
|
|
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];
|
|
trainData.lastStation = "当駅止";
|
|
}
|
|
}
|
|
});
|
|
return {
|
|
train: trainNum,
|
|
time: trainData.time,
|
|
lastStation: trainData.lastStation,
|
|
};
|
|
})
|
|
.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 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 != "当駅止") 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);
|
|
}
|
|
};
|
|
const { width } = useWindowDimensions();
|
|
const adjustedWidth = width * 0.98;
|
|
return (
|
|
<View
|
|
style={{
|
|
width: adjustedWidth,
|
|
/* height: wp("98%")/10*9, */ backgroundColor: "#432",
|
|
borderWidth: 1,
|
|
margin: 10,
|
|
marginHorizontal: width * 0.01,
|
|
}}
|
|
>
|
|
<Header station={station[0]} />
|
|
{selectedTrain.map((d) => (
|
|
<EachData
|
|
{...{
|
|
d,
|
|
trainIDSwitch,
|
|
trainDescriptionSwitch,
|
|
navigate,
|
|
openStationACFromEachTrainInfo,
|
|
}}
|
|
station={station[0]}
|
|
key={d.train}
|
|
/>
|
|
))}
|
|
{areaInfo != "" && isInfoArea && (
|
|
<AreaDescription
|
|
numberOfLines={1}
|
|
areaInfo={areaInfo}
|
|
onClick={() => alert(areaInfo)}
|
|
/>
|
|
)}
|
|
|
|
<Footer
|
|
{...{
|
|
trainIDSwitch,
|
|
setTrainIDSwitch,
|
|
trainDescriptionSwitch,
|
|
setTrainDescriptionSwitch,
|
|
finalSwitch,
|
|
setFinalSwitch,
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|