import React, { useState, useEffect } from "react"; import { View, Text, TouchableOpacity } from "react-native"; import { Switch } from "react-native-elements"; import { widthPercentageToDP as wp } from "react-native-responsive-screen"; import LottieView from "lottie-react-native"; import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons"; 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; /** * * 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 HeaderConfig = { headers: { referer: "https://train.jr-shikoku.co.jp/sp.html", }, }; const [trainDiagram, setTrainDiagram] = useState(null); // 全列車のダイヤを列番ベースで整理 const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表 const [currentTrain, setCurrentTrain] = useState(null); //現在在線中の全列車 const [currentTrainLoading, setCurrentTrainLoading] = useState("loading"); 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 ) .then((response) => response.text()) .then((d) => { if (d.indexOf("404 Not Found") != -1) throw Error; setTrainDiagram(parseAllTrainDiagram(d)); }) .catch((d) => { console.log("fallback"); setTrainDiagram(trainList); }); }, []); useEffect(() => { // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報] if (!trainDiagram) { setStationDiagram({}); return; } let returnData = {}; Object.keys(trainDiagram).forEach((key) => { if (trainDiagram[key].match(props.station.Station_JP + ",")) { returnData[key] = trainDiagram[key]; } }); 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((d) => { setCurrentTrain(d); setCurrentTrainLoading("success"); }) .catch((e) => { console.log("えらー"); setCurrentTrainLoading("error"); }); useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得 useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得 const getTime = (stationDiagram, station) => { const returnData = Object.keys(stationDiagram).map((d) => { let a = {}; stationDiagram[d].split("#").forEach((data) => { if (data.match("着")) { a.lastStation = data.split(",着,")[0]; } if (data.split(",")[0] === station.Station_JP) { if (data.match(",発,")) { a.time = data.split(",発,")[1]; } else { a.time = data.split(",着,")[1]; 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]): 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; } }); }; const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null); useEffect(() => { //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット if (objectIsEmpty(stationDiagram)) return () => {}; const getTimeData = getTime(stationDiagram, props.station); setTrainTimeAndNumber(getTimeData); }, [stationDiagram]); const timeFiltering = (d) => { const date = new Date(); const newDate = new Date(); let data = 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; date.setHours(parseInt(data[0])); date.setMinutes(parseInt(data[1]) + parseInt(delay)); if (!(newDate > date)) { return true; } return false; }; const [selectedTrain, setSelectedTrain] = useState([]); useEffect(() => { if (!trainTimeAndNumber) return () => {}; if (!currentTrain) return () => {}; const data = trainTimeAndNumber .filter((d) => currentTrain.map((m) => m.num).includes(d.train)) .filter(timeFiltering) .filter((d) => !!finalSwitch || d.lastStation != "当駅止"); setSelectedTrain(data); }, [trainTimeAndNumber, currentTrain, finalSwitch]); return (
{selectedTrain.map((d, index) => ( ))}