From 7321f6d514cf240a35aadec5525c7a73f6b11533 Mon Sep 17 00:00:00 2001 From: harukin-DeskMini Date: Sat, 28 Jan 2023 03:27:41 +0900 Subject: [PATCH] =?UTF-8?q?LED=E8=A1=A8=E7=A4=BA=E6=A9=9F=E8=83=BD?= =?UTF-8?q?=E7=AC=AC=E4=B8=80=E6=AE=B5=E3=83=AA=E3=83=95=E3=82=A1=E3=82=AF?= =?UTF-8?q?=E3=82=BF=E3=83=AA=E3=83=B3=E3=82=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/発車時刻表/LED_vidion.js | 517 +++++++++++++---------- lib/objectIsEmpty.js | 3 + 2 files changed, 297 insertions(+), 223 deletions(-) create mode 100644 lib/objectIsEmpty.js diff --git a/components/発車時刻表/LED_vidion.js b/components/発車時刻表/LED_vidion.js index 3dcb4d5..8f8f8f4 100644 --- a/components/発車時刻表/LED_vidion.js +++ b/components/発車時刻表/LED_vidion.js @@ -5,6 +5,7 @@ import { widthPercentageToDP as wp } from "react-native-responsive-screen"; import { customTrainDataDetector } from "../custom-train-data"; import { useInterval } from "../../lib/useInterval"; import trainList from "../../assets/originData/trainList"; +import { objectIsEmpty } from "../../lib/objectIsEmpty"; let diagramData = undefined; @@ -43,14 +44,27 @@ export default function LED_vision(props) { referer: "https://train.jr-shikoku.co.jp/sp.html", }, }; - const [trainDiagram, setTrainDiagram] = useState(null); - const [stationDiagram, setStationDiagram] = useState(null); - const [currentTrain, setCurrentTrain] = useState(null); + const [trainDiagram, setTrainDiagram] = useState(null); // 全列車のダイヤを列番ベースで整理 + const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表 + const [currentTrain, setCurrentTrain] = useState(null); //現在在線中の全列車 const [finalSwitch, setFinalSwitch] = useState(false); const [trainIDSwitch, setTrainIDSwitch] = useState(false); const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false); + const parseAllTrainDiagram = (text) => { + const val = text.replace("[\r\n", "").split(",\r\n"); + let trainDiagram = {}; + val.forEach((element) => { + try { + let data = JSON.parse(element); + Object.keys(data).forEach((key) => (trainDiagram[key] = data[key])); + } catch (e) {} + }); + return trainDiagram; + }; + useEffect(() => { + //全列車リストを生成する副作用 fetch( "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=traintimeinfo&arg3=dia", HeaderConfig @@ -58,56 +72,57 @@ export default function LED_vision(props) { .then((response) => response.text()) .then((d) => { if (d.indexOf("404 Not Found") != -1) throw Error; - const val = d.replace("[\r\n", "").split(",\r\n"); - let trainDiagram = {}; - val.forEach((element) => { - try { - let data = JSON.parse(element); - Object.keys(data).forEach((key) => (trainDiagram[key] = data[key])); - } catch (e) {} - }); - setTrainDiagram(trainDiagram); - return trainDiagram; - }) - .then((trainDiagram) => { - let returnData = {}; - if (!trainDiagram) { - setStationDiagram(returnData); - return; - } - Object.keys(trainDiagram).forEach((key) => { - if (trainDiagram[key].match(props.station.Station_JP)) { - returnData[key] = trainDiagram[key]; - } - }); - setStationDiagram(returnData); + setTrainDiagram(parseAllTrainDiagram(d)); }) .catch((d) => { console.log("fallback"); setTrainDiagram(trainList); - let returnData = {}; - if (!trainList) { - setStationDiagram(returnData); - return; - } - Object.keys(trainList).forEach((key) => { - if (trainList[key].match(props.station.Station_JP)) { - returnData[key] = trainList[key]; - } - }); - setStationDiagram(returnData); }); }, []); - const getTime = () => { - const returnData = []; - Object.keys(stationDiagram).forEach((d) => { + useEffect(() => { + //駅の情報を作成する副作用 + if (!trainDiagram) { + setStationDiagram({}); + return; + } + let returnData = {}; + Object.keys(trainDiagram).forEach((key) => { + if (trainDiagram[key].match(props.station.Station_JP)) { + returnData[key] = trainDiagram[key]; + } + }); + console.log(returnData); + setStationDiagram(returnData); + }, [trainDiagram, props.station]); + + const getCurrentTrain = () => + fetch( + "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train", + HeaderConfig + ) + .then((response) => response.json()) + .then((d) => + d.map((x) => ({ num: x.TrainNum, delay: x.delay, Pos: x.Pos })) + ) + .then(setCurrentTrain) + .catch((e) => { + console.log(e); + }); + + useEffect(getCurrentTrain, []); + + useInterval(getCurrentTrain, 15000); + + const getTime = (stationDiagram, station) => { + console.log(stationDiagram); + const returnData = Object.keys(stationDiagram).map((d) => { let a = {}; stationDiagram[d].split("#").forEach((data) => { if (data.match("着")) { a.lastStation = data.split(",着,")[0]; } - if (data.match(props.station.Station_JP)) { + if (data.match(station.Station_JP)) { if (data.match(",発,")) { a.time = data.split(",発,")[1]; } else { @@ -116,9 +131,9 @@ export default function LED_vision(props) { } } }); - returnData.push({ train: d, time: a.time, lastStation: a.lastStation }); + return { train: d, time: a.time, lastStation: a.lastStation }; }); - + console.log(returnData); return returnData.sort((a, b) => { switch (true) { case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]): @@ -132,23 +147,14 @@ export default function LED_vision(props) { } }); }; - const trainTimeAndNumber = stationDiagram != null ? getTime() : null; - const getCurrentTrain = () => - fetch( - "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train", - HeaderConfig - ) - .then((response) => response.json()) - .then((d) => - d.map((x) => ({ num: x.TrainNum, delay: x.delay, Pos: x.Pos })) - ) - .then(setCurrentTrain); + const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null); useEffect(() => { - getCurrentTrain(); - }, []); - - useInterval(getCurrentTrain, 15000); + if (objectIsEmpty(stationDiagram)) return () => {}; + console.log(stationDiagram); + const getTimeData = getTime(stationDiagram, props.station); + setTrainTimeAndNumber(getTimeData); + }, [stationDiagram]); const timeFiltering = (d) => { const date = new Date(); @@ -188,24 +194,7 @@ export default function LED_vision(props) { marginHorizontal: wp("1%"), }} > - - - - - 次の列車 - - Next Train - - - +
{trainTimeAndNumber ? currentTrain && trainTimeAndNumber @@ -214,96 +203,8 @@ export default function LED_vision(props) { .filter((d) => !!finalSwitch || d.lastStation != "当駅止") .map((d, index) => { const train = customTrainDataDetector(d.train); - return [ - - - 6 ? 15 : 20, - color: getTrainType(train.type).color, - fontWeight: "bold", - }} - > - {trainIDSwitch - ? d.train - : getTrainType(train.type).name + - " " + - train.trainName + - (train.trainNumDistance == undefined - ? "" - : parseInt( - d.train.replace("M", "").replace("D", "") - ) - - train.trainNumDistance + - "号")} - - - - 4 ? 15 : 20, - color: "white", - fontWeight: "bold", - }} - > - {d.lastStation} - - - - - {d.time} - - - - - {(() => { - const current = currentTrain.filter( - (a) => a.num == d.train - )[0]; - const delay = current.delay; - switch (true) { - case delay == "入線": - if (current.Pos == props.station.Station_JP) { - return "当駅始発"; - } else { - return "発車前"; - } - - case isNaN(delay): - return delay; - case delay == 0: - return "定刻通り"; - default: - return delay + "分遅れ"; - } - })()} - - - , - trainDescriptionSwitch && !!train.info && ( + return ( + <> - - - {" "} - > {train.info} - - + + + + - ), - ]; + {trainDescriptionSwitch && !!train.info && ( + + )} + + ); }) : null} - - - 種別名 / 列番 - - - - - 列車情報 - - - - - 当駅止表示 - - - +