jrshikoku/components/発車時刻表/LED_vidion.js

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 { objectIsEmpty } from "../../lib/objectIsEmpty";
import { getTrainType } from "../../lib/getTrainType";
import { HeaderConfig } from "../../lib/HeaderConfig";
import { getTrainDelayStatus } from "../../lib/getTrainDelayStatus";
import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";

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 {
    station,
    setTrainInfo,
    EachTrainInfoAsSR,
    trainDiagram,
    currentTrainState,
    currentTrainLoadingState,
    getCurrentTrain,
  } = props;
  const { currentTrain, setCurrentTrain } = currentTrainState;
  const { currentTrainLoading, setCurrentTrainLoading } =
    currentTrainLoadingState;
  const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
  const [finalSwitch, setFinalSwitch] = useState(false);
  const [trainIDSwitch, setTrainIDSwitch] = useState(false);
  const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);

  useEffect(() => {
    // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報]
    if (!trainDiagram) {
      setStationDiagram({});
      return;
    }
    let returnData = {};
    Object.keys(trainDiagram).forEach((key) => {
      if (trainDiagram[key].match(station.Station_JP + ",")) {
        returnData[key] = trainDiagram[key];
      }
    });
    setStationDiagram(returnData);
  }, [trainDiagram, station]);

  const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);

  useEffect(() => {
    //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
    if (objectIsEmpty(stationDiagram)) return () => {};
    const getTimeData = getTime(stationDiagram, station);
    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))
      .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 {
            trainData.time = data.split(",着,")[1];
            trainData.lastStation = "当駅止";
          }
        }
      });
      return {
        train: trainNum,
        time: trainData.time,
        lastStation: trainData.lastStation,
      };
    });
    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 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;
  };

  return (
    <View
      style={{
        width: wp("98%"),
        /*  height: wp("98%")/10*9, */ backgroundColor: "#432",
        borderWidth: 1,
        margin: 10,
        marginHorizontal: wp("1%"),
      }}
    >
      <Header
        currentTrainLoading={currentTrainLoading}
        setCurrentTrainLoading={setCurrentTrainLoading}
        getCurrentTrain={getCurrentTrain}
      />
      {selectedTrain.map((d, index) => (
        <EachData
          d={d}
          trainIDSwitch={trainIDSwitch}
          trainDescriptionSwitch={trainDescriptionSwitch}
          station={station}
          currentTrain={currentTrain}
          customTrainDataDetector={customTrainDataDetector}
          setTrainInfo={setTrainInfo}
          EachTrainInfoAsSR={EachTrainInfoAsSR}
        />
      ))}
      <Footer
        trainIDSwitch={trainIDSwitch}
        setTrainIDSwitch={setTrainIDSwitch}
        trainDescriptionSwitch={trainDescriptionSwitch}
        setTrainDescriptionSwitch={setTrainDescriptionSwitch}
        finalSwitch={finalSwitch}
        setFinalSwitch={setFinalSwitch}
      />
    </View>
  );
}
const Header = ({
  currentTrainLoading,
  setCurrentTrainLoading,
  getCurrentTrain,
}) => (
  <View
    style={{
      alignContent: "center",
      alignItems: "center",
      width: "100%",
      marginVertical: 10,
      flexDirection: "row",
    }}
  >
    <View style={{ flex: 1 }}></View>
    <View style={{}}>
      <Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
        次の列車
      </Text>
      <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
    </View>
    <View style={{ flex: 1, flexDirection: "row-reverse" }}>
      {currentTrainLoading == "loading" ? (
        <LottieView
          autoPlay
          loop
          style={{ width: 40, height: 40, marginRight: 30 }}
          source={require("../../assets/51690-loading-diamonds.json")}
        />
      ) : currentTrainLoading == "error" ? (
        <Ionicons
          name="reload"
          color="white"
          size={30}
          style={{ marginRight: 30 }}
          onPress={() => {
            setCurrentTrainLoading("loading");
            getCurrentTrain();
          }}
        />
      ) : null}
    </View>
  </View>
);

const Footer = (props) => {
  const {
    trainIDSwitch,
    setTrainIDSwitch,
    trainDescriptionSwitch,
    setTrainDescriptionSwitch,
    finalSwitch,
    setFinalSwitch,
  } = props;

  const textStyle = {
    alignItems: "center",
    alignContent: "center",
    textAlign: "center",
    textAlignVertical: "center",
    color: "white",
  };

  return (
    <View style={{ flexDirection: "row", padding: 10, alignItems: "center" }}>
      <Text style={textStyle}>種別名 / 列番</Text>
      <Switch value={trainIDSwitch} onValueChange={setTrainIDSwitch} />
      <View style={{ flex: 1 }} />
      <Text style={textStyle}>列車情報</Text>
      <Switch
        value={trainDescriptionSwitch}
        onValueChange={setTrainDescriptionSwitch}
      />
      <View style={{ flex: 1 }} />
      <Text style={textStyle}>当駅止表示</Text>
      <Switch value={finalSwitch} onValueChange={setFinalSwitch} />
    </View>
  );
};

const EachData = ({
  d,
  trainIDSwitch,
  trainDescriptionSwitch,
  station,
  currentTrain,
  customTrainDataDetector,
  setTrainInfo,
  EachTrainInfoAsSR,
}) => {
  const openTrainInfo = (d) => {
    let TrainNumber = "";
    if (train.trainNumDistance != undefined) {
      const timeInfo =
        parseInt(d.train.replace("M", "").replace("D", "")) -
        train.trainNumDistance;
      TrainNumber = timeInfo + "号";
    }
    setTrainInfo({
      trainNum: d.train,
      limited: `${getTrainType(train.type).data}:${
        train.trainName
      }${TrainNumber}`,
      trainData: checkDuplicateTrainData(
        currentTrain.filter((a) => a.num == d.train)
      ),
    });
    EachTrainInfoAsSR.current?.show();
  };
  const [train, setTrain] = useState(customTrainDataDetector(d.train));
  useEffect(() => {
    setTrain(customTrainDataDetector(d.train));
  }, [currentTrain, d.train, trainDescriptionSwitch]);
  // 土讃線複数存在対策
  const trainDelayStatus = getTrainDelayStatus(
    checkDuplicateTrainData(currentTrain.filter((a) => a.num == d.train)),
    station.Station_JP
  );
  return (
    <>
      <TouchableOpacity
        style={{
          alignContent: "center",
          alignItems: "center",
          width: "94%",
          marginVertical: 5,
          marginHorizontal: "3%",
          backgroundColor: "#000",
          flexDirection: "row",
        }}
        onPress={() => openTrainInfo(d)}
      >
        <TrainName
          trainName={train.trainName}
          trainNumDistance={train.trainNumDistance}
          trainIDSwitch={trainIDSwitch}
          trainID={d.train}
          type={train.type}
        />
        <LastStation lastStation={d.lastStation} />
        <DependTime time={d.time} />
        <StatusAndDelay trainDelayStatus={trainDelayStatus} />
      </TouchableOpacity>
      {trainDescriptionSwitch && !!train.info && (
        <Description info={train.info} />
      )}
    </>
  );
};

const TrainName = ({
  trainName,
  trainNumDistance,
  trainIDSwitch,
  trainID,
  type,
}) => {
  const { name, color } = getTrainType(type);
  let TrainNumber =
    trainNumDistance != undefined
      ? `${
          parseInt(trainID.replace("M", "").replace("D", "")) - trainNumDistance
        }号`
      : "";
  return (
    <View style={{ flex: 9 }}>
      <Text
        style={{
          fontSize: trainName.length > 6 ? parseInt("13%") : parseInt("18%"),
          color: color,
          fontWeight: "bold",
        }}
      >
        {trainIDSwitch ? trainID : `${name} ${trainName}${TrainNumber}`}
      </Text>
    </View>
  );
};

const LastStation = ({ lastStation }) => {
  return (
    <View style={{ flex: 4, flexDirection: "row" }}>
      <Text
        style={{
          fontSize: lastStation.length > 4 ? parseInt("13%") : parseInt("18%"),
          color: "white",
          fontWeight: "bold",
        }}
      >
        {lastStation}
      </Text>
    </View>
  );
};

const DependTime = ({ time }) => (
  <View style={{ flex: 3 }}>
    <Text
      style={{
        fontSize: parseInt("18%"),
        color: "white",
        fontWeight: "bold",
      }}
    >
      {time}
    </Text>
  </View>
);

const StatusAndDelay = ({ trainDelayStatus }) => {
  return (
    <View style={{ flex: 4 }}>
      <Text
        style={{
          fontSize: parseInt("18%"),
          color: "white",
          fontWeight: "bold",
          paddingLeft: 1,
        }}
      >
        {trainDelayStatus}
      </Text>
    </View>
  );
};

const Description = ({ info }) => (
  <View
    style={{
      alignContent: "center",
      alignItems: "center",
      width: "94%",
      marginVertical: 5,
      marginHorizontal: "3%",
      backgroundColor: "#000",
      flexDirection: "row",
    }}
  >
    <View style={{ flex: 4 }}>
      <Text
        style={{
          fontSize: parseInt("18%"),
          color: "green",
          fontWeight: "bold",
        }}
      >
        {" "}
        &gt; {info}
      </Text>
    </View>
  </View>
);