Merge commit 'c7487d38dba1f34e3f4fbe4a2071c4e7b227fce5' into develop
This commit is contained in:
@@ -25,7 +25,7 @@ export const TrainDataView = ({
|
||||
|
||||
const { width, height } = useWindowDimensions();
|
||||
const { isLandscape } = useDeviceOrientationChange();
|
||||
const { inject } = useCurrentTrain();
|
||||
const { setInjectData } = useCurrentTrain();
|
||||
|
||||
const { allCustomTrainData } = useAllTrainDiagram();
|
||||
const [mapsStationData, setMapsStationData] = useState(undefined);
|
||||
@@ -150,27 +150,18 @@ export const TrainDataView = ({
|
||||
<TouchableOpacity
|
||||
style={{ flex: 1, flexDirection: "row" }}
|
||||
//disabled={!onLine}
|
||||
onLongPress={openEditWindow}
|
||||
//onLongPress={openEditWindow}
|
||||
onLongPress={()=>{
|
||||
if (!onLine) return;
|
||||
setInjectData({ type:"train", value:currentTrainData?.num, fixed:true});
|
||||
navigate("positions", { screen: "Apps" });
|
||||
SheetManager.hide("EachTrainInfo");
|
||||
}}
|
||||
onPress={() => {
|
||||
if (!onLine) return;
|
||||
const test = [];
|
||||
Object.keys(mapsStationData).forEach((d) => {
|
||||
mapsStationData[d].forEach((x) => {
|
||||
if (x.StationNumber == currentPosition[0])
|
||||
test.push({ line: d, station: x });
|
||||
});
|
||||
if (currentPosition[0] == "M12") {
|
||||
test.push({
|
||||
line: "seto",
|
||||
station: { Station_JP: "児島", MyStation: "0" },
|
||||
});
|
||||
}
|
||||
});
|
||||
if (!test.length) return;
|
||||
setInjectData({ type: "station", value: currentPosition[0], fixed: false });
|
||||
|
||||
navigate("positions", { screen: "Apps" });
|
||||
inject(
|
||||
`MoveDisplayStation('${test[0].line}_${test[0].station.MyStation}_${test[0].station.Station_JP}');document.getElementById("disp").insertAdjacentHTML("afterbegin", "<div />");`
|
||||
);
|
||||
SheetManager.hide("EachTrainInfo");
|
||||
}}
|
||||
>
|
||||
|
@@ -42,7 +42,8 @@ export const EachTrainInfoCore = ({
|
||||
from,
|
||||
navigate,
|
||||
}) => {
|
||||
const { currentTrain } = useCurrentTrain();
|
||||
const { currentTrain, getCurrentStationData, getPosition } =
|
||||
useCurrentTrain();
|
||||
const { originalStationList, stationList } = useStationList();
|
||||
const { allTrainDiagram: trainList, allCustomTrainData } =
|
||||
useAllTrainDiagram();
|
||||
@@ -50,13 +51,10 @@ export const EachTrainInfoCore = ({
|
||||
const [currentTrainData, setCurrentTrainData] = useState();
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentTrain.length) return;
|
||||
setCurrentTrainData(
|
||||
checkDuplicateTrainData(
|
||||
currentTrain.filter((d) => d.num == data.trainNum),
|
||||
stationList
|
||||
)
|
||||
);
|
||||
const stationData = getCurrentStationData(data.trainNum);
|
||||
if (stationData) {
|
||||
setCurrentTrainData(stationData);
|
||||
}
|
||||
}, [currentTrain, data.trainNum]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -100,7 +98,7 @@ export const EachTrainInfoCore = ({
|
||||
useEffect(() => {
|
||||
const stopStationList = trainData.map((i) => {
|
||||
const [station, se, time] = i.split(",");
|
||||
if(se == "通編") setHaveThrough(true);
|
||||
if (se == "通編") setHaveThrough(true);
|
||||
return stationList.map((a) => a.filter((d) => d.StationName == station));
|
||||
});
|
||||
const allThroughStationList = stopStationList.map((i, index, array) => {
|
||||
@@ -205,7 +203,10 @@ export const EachTrainInfoCore = ({
|
||||
setHeadStation([]);
|
||||
setTailStation([]);
|
||||
if (!TD) {
|
||||
const specialTrainActualIDs = searchSpecialTrain(data.trainNum, trainList);
|
||||
const specialTrainActualIDs = searchSpecialTrain(
|
||||
data.trainNum,
|
||||
trainList
|
||||
);
|
||||
setTrueTrainID(specialTrainActualIDs || []);
|
||||
setTrainData([]);
|
||||
return;
|
||||
@@ -247,71 +248,8 @@ export const EachTrainInfoCore = ({
|
||||
}, [trainData, data]);
|
||||
|
||||
useEffect(() => {
|
||||
//currentTrainData.Pos = "鴨川~端岡"; //test
|
||||
if (!currentTrainData) return;
|
||||
if (!currentTrainData?.Pos) return;
|
||||
if (currentTrainData?.Pos.match("~")) {
|
||||
const pos = currentTrainData?.Pos.replace("(下り)", "")
|
||||
.replace("(上り)", "")
|
||||
.replace("(徳島線)", "")
|
||||
.replace("(高徳線)", "")
|
||||
.split("~");
|
||||
const direction = parseInt(currentTrainData?.Direction) || 0;
|
||||
if (pos[0] == "児島" && pos[1] == "宇多津") {
|
||||
setCurrentPosition(["M12", "Y09"]);
|
||||
return;
|
||||
} else if (pos[1] == "児島" && pos[0] == "宇多津") {
|
||||
setCurrentPosition(["Y09", "M12"]);
|
||||
return;
|
||||
} else if (pos[0] == "伊予若宮" && pos[1] == "伊予白滝") {
|
||||
setCurrentPosition(["S18", "S14"]);
|
||||
return;
|
||||
} else if (pos[0] == "伊予白滝" && pos[1] == "伊予若宮") {
|
||||
setCurrentPosition(["S14", "S18"]);
|
||||
return;
|
||||
} else if (pos[0] == "伊予大洲" && pos[1] == "伊予若宮") {
|
||||
setCurrentPosition(["U14", "U14"]);
|
||||
return;
|
||||
} else if (pos[0] == "伊予若宮" && pos[1] == "伊予大洲") {
|
||||
setCurrentPosition(["U14", "U14"]);
|
||||
return;
|
||||
}
|
||||
const currentPosID = Object.keys(originalStationList).map((key) => {
|
||||
let firstStation = false;
|
||||
let firstStationID = "";
|
||||
let secondStation = false;
|
||||
let secondStationID = "";
|
||||
originalStationList[key].forEach((station) => {
|
||||
if (station.Station_JP === pos[0]) {
|
||||
firstStation = true;
|
||||
firstStationID = station.StationNumber;
|
||||
}
|
||||
if (station.Station_JP === pos[1]) {
|
||||
secondStation = true;
|
||||
secondStationID = station.StationNumber;
|
||||
}
|
||||
});
|
||||
if (firstStation && secondStation) {
|
||||
return [firstStationID, secondStationID];
|
||||
} else return false;
|
||||
});
|
||||
const currentPos = currentPosID.filter((d) => d != false)[0];
|
||||
if (currentPos) {
|
||||
setCurrentPosition(direction == 0 ? currentPos.reverse() : currentPos);
|
||||
} else if (direction == 0) {
|
||||
setCurrentPosition([
|
||||
getStationID(pos[1], stationList),
|
||||
getStationID(pos[0], stationList),
|
||||
]);
|
||||
} else {
|
||||
setCurrentPosition([
|
||||
getStationID(pos[0], stationList),
|
||||
getStationID(pos[1], stationList),
|
||||
]);
|
||||
}
|
||||
} else {
|
||||
setCurrentPosition([getStationID(currentTrainData?.Pos, stationList)]);
|
||||
}
|
||||
const position = getPosition(currentTrainData);
|
||||
if (position) setCurrentPosition(position);
|
||||
}, [currentTrainData]);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -393,7 +331,12 @@ export const EachTrainInfoCore = ({
|
||||
containerProps={{
|
||||
style: {
|
||||
maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
|
||||
backgroundColor:getTrainType(customTrainDataDetector(data.trainNum, allCustomTrainData).type).data === "notService" ? "#777777ff" :"white"
|
||||
backgroundColor:
|
||||
getTrainType(
|
||||
customTrainDataDetector(data.trainNum, allCustomTrainData).type
|
||||
).data === "notService"
|
||||
? "#777777ff"
|
||||
: "white",
|
||||
},
|
||||
}}
|
||||
shortHeader={
|
||||
@@ -424,7 +367,13 @@ export const EachTrainInfoCore = ({
|
||||
/>
|
||||
}
|
||||
>
|
||||
{getTrainType(customTrainDataDetector(data.trainNum, allCustomTrainData).type).data === "notService" &&<Text style={{backgroundColor:"#ffffffc2",fontWeight:"bold"}}>この列車には乗車できません。</Text>}
|
||||
{getTrainType(
|
||||
customTrainDataDetector(data.trainNum, allCustomTrainData).type
|
||||
).data === "notService" && (
|
||||
<Text style={{ backgroundColor: "#ffffffc2", fontWeight: "bold" }}>
|
||||
この列車には乗車できません。
|
||||
</Text>
|
||||
)}
|
||||
{headStation.length != 0 &&
|
||||
headStation.map((i, index) =>
|
||||
showHeadStation.findIndex((d) => d == index) == -1 ? (
|
||||
@@ -473,10 +422,11 @@ export const EachTrainInfoCore = ({
|
||||
borderWidth: 1,
|
||||
margin: 10,
|
||||
borderRadius: 5,
|
||||
alignItems: "center", backgroundColor:"#ffffffc2"
|
||||
alignItems: "center",
|
||||
backgroundColor: "#ffffffc2",
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 18, fontWeight: "bold", color: "black",}}>
|
||||
<Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
|
||||
Twitterで検索
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
@@ -494,12 +444,14 @@ export const EachTrainInfoCore = ({
|
||||
currentTrainData,
|
||||
openStationACFromEachTrainInfo,
|
||||
showThrew,
|
||||
key: i + "-stop"
|
||||
}}
|
||||
key={i + "-stop"}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
<Text style={{backgroundColor:"#ffffffc2"}}>時刻が斜体,青色になっている時刻はコミュニティで追加されている独自データです。</Text>
|
||||
<Text style={{ backgroundColor: "#ffffffc2" }}>
|
||||
時刻が斜体,青色になっている時刻はコミュニティで追加されている独自データです。
|
||||
</Text>
|
||||
{tailStation.length != 0 &&
|
||||
tailStation.map(({ station, dia }, index) =>
|
||||
showTailStation.findIndex((d) => d == index) == -1 ? (
|
||||
@@ -540,7 +492,7 @@ export const EachTrainInfoCore = ({
|
||||
flexDirection: "row",
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#f0f0f0",
|
||||
backgroundColor:"#ffffffc2",
|
||||
backgroundColor: "#ffffffc2",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
|
@@ -1,6 +1,5 @@
|
||||
import { FC } from "react";
|
||||
import { TouchableOpacity, View, Text, Linking } from "react-native";
|
||||
import { useStationList } from "@/stateBox/useStationList";
|
||||
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
|
||||
import AntDesign from "react-native-vector-icons/AntDesign";
|
||||
type Props = {
|
||||
@@ -10,10 +9,7 @@ type Props = {
|
||||
};
|
||||
export const StationTrainPositionButton: FC<Props> = (props) => {
|
||||
const { stationNumber, onExit, navigate } = props;
|
||||
const {
|
||||
inject,
|
||||
} = useCurrentTrain();
|
||||
const { getInjectJavascriptAddress } = useStationList();
|
||||
const { setInjectData } = useCurrentTrain();
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
@@ -23,12 +19,16 @@ export const StationTrainPositionButton: FC<Props> = (props) => {
|
||||
alignContent: "center",
|
||||
alignItems: "center",
|
||||
margin: 2,
|
||||
flex: 1
|
||||
flex: 1,
|
||||
}}
|
||||
onLongPress={() => {
|
||||
navigate("positions", { screen: "Apps" });
|
||||
setInjectData({ type: "station", value:stationNumber, fixed: true });
|
||||
onExit();
|
||||
}}
|
||||
onPress={() => {
|
||||
navigate("positions", { screen: "Apps" });
|
||||
const script = getInjectJavascriptAddress(stationNumber);
|
||||
inject(script);
|
||||
setInjectData({ type: "station", value: stationNumber, fixed: false });
|
||||
onExit();
|
||||
}}
|
||||
>
|
||||
|
@@ -4,6 +4,7 @@ import {
|
||||
Platform,
|
||||
useWindowDimensions,
|
||||
LayoutAnimation,
|
||||
Text,
|
||||
} from "react-native";
|
||||
import Constants from "expo-constants";
|
||||
import * as Updates from "expo-updates";
|
||||
@@ -23,6 +24,7 @@ import { MapsButton } from "./Apps/MapsButton";
|
||||
import { ReloadButton } from "./Apps/ReloadButton";
|
||||
import { LandscapeBackButton } from "./Apps/LandscapeBackButton";
|
||||
import { useStationList } from "../stateBox/useStationList";
|
||||
import { FixedPositionBox } from "./Apps/FixedPositionBox";
|
||||
/*
|
||||
import StatusbarDetect from '../StatusbarDetect';
|
||||
var Status = StatusbarDetect(); */
|
||||
@@ -30,7 +32,7 @@ var Status = StatusbarDetect(); */
|
||||
const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
|
||||
|
||||
export default function Apps() {
|
||||
const { webview } = useCurrentTrain();
|
||||
const { webview, fixedPosition, setFixedPosition } = useCurrentTrain();
|
||||
const { height, width } = useWindowDimensions();
|
||||
const { navigate } = useNavigation();
|
||||
const { isLandscape } = useDeviceOrientationChange();
|
||||
@@ -125,6 +127,10 @@ export default function Apps() {
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{fixedPosition.type && (
|
||||
<FixedPositionBox />
|
||||
)}
|
||||
|
||||
{mapSwitch == "true" ? (
|
||||
<ReloadButton
|
||||
onPress={() => Updates.reloadAsync()}
|
||||
|
31
components/Apps/FixedPositionBox.tsx
Normal file
31
components/Apps/FixedPositionBox.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
|
||||
import { View, Platform } from "react-native";
|
||||
import Constants from "expo-constants";
|
||||
import { FixedTrain } from "./FixedPositionBox/FixedTrainBox";
|
||||
import { FixedStation } from "./FixedPositionBox/FixedStationBox";
|
||||
|
||||
export const FixedPositionBox = () => {
|
||||
const { fixedPosition, setFixedPosition } = useCurrentTrain();
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
|
||||
borderRadius: 5,
|
||||
zIndex: 1500,
|
||||
width: "100%",
|
||||
height: 50,
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
{fixedPosition.type === "station" && (
|
||||
<FixedStation stationID={fixedPosition.value} />
|
||||
)}
|
||||
{fixedPosition.type === "train" && (
|
||||
<FixedTrain trainID={fixedPosition.value} />
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
354
components/Apps/FixedPositionBox/FixedStationBox.tsx
Normal file
354
components/Apps/FixedPositionBox/FixedStationBox.tsx
Normal file
@@ -0,0 +1,354 @@
|
||||
import lineColorList from "@/assets/originData/lineColorList";
|
||||
import { customTrainDataDetector } from "@/components/custom-train-data";
|
||||
import { StationNumberMaker } from "@/components/駅名表/StationNumberMaker";
|
||||
import { checkDuplicateTrainData } from "@/lib/checkDuplicateTrainData";
|
||||
import { typeID } from "@/lib/getStringConfig";
|
||||
import { getTrainDelayStatus } from "@/lib/getTrainDelayStatus";
|
||||
import { getTrainType } from "@/lib/getTrainType";
|
||||
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";
|
||||
|
||||
export const FixedStation = ({ stationID }) => {
|
||||
const { fixedPosition, setFixedPosition } = useCurrentTrain();
|
||||
const { getStationDataFromId } = useStationList();
|
||||
const [station, setStation] = useState<StationProps[]>([]);
|
||||
useEffect(() => {
|
||||
const data = getStationDataFromId(stationID);
|
||||
setStation(data);
|
||||
}, [stationID]);
|
||||
const lineColor =
|
||||
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;
|
||||
}
|
||||
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 date = dayjs();
|
||||
let targetHour = parseInt(h);
|
||||
|
||||
// 4時を日付変更線として処理
|
||||
if (targetHour < 4) {
|
||||
targetHour += 24;
|
||||
}
|
||||
|
||||
let currentHour = date.hour();
|
||||
if (currentHour < 4) {
|
||||
currentHour += 24;
|
||||
}
|
||||
|
||||
const db = dayjs()
|
||||
.hour(targetHour)
|
||||
.minute(parseInt(m) + parseInt(delay));
|
||||
const currentTime = dayjs().hour(currentHour);
|
||||
|
||||
return !currentTime.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=>!d.isThrough)
|
||||
.filter((d) => d.lastStation != station[0].Station_JP) //最終列車表示設定
|
||||
setSelectedTrain(data);
|
||||
}, [trainTimeAndNumber, currentTrain /*finalSwitch*/]);
|
||||
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={{ flex: 1, flexDirection: "row" }}
|
||||
onPress={() => {
|
||||
setFixedPosition({ type: null, value: null });
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flex: 3,
|
||||
flexDirection: "column",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
height: "100%",
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: lineColor,
|
||||
flexDirection: "row",
|
||||
width: "100%",
|
||||
alignContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<StationNumberMaker
|
||||
currentStation={station}
|
||||
singleSize={18}
|
||||
useEach={true}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 18,
|
||||
textAlignVertical: "center",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
flex: 1,
|
||||
color:"white"
|
||||
}}
|
||||
>
|
||||
{station[0]?.Station_JP}
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: 10,
|
||||
borderLeftColor: lineColor,
|
||||
borderTopColor: lineColor,
|
||||
borderBottomColor: "white",
|
||||
borderBottomWidth: 16,
|
||||
borderLeftWidth: 8,
|
||||
borderRightWidth: 0,
|
||||
borderTopWidth: 5,
|
||||
height: "100%",
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
height: "100%",
|
||||
backgroundColor: "white",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 20 }}>次の発車予定:</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
flex: 5,
|
||||
flexDirection: "column",
|
||||
backgroundColor: "white",
|
||||
borderTopWidth: 5,
|
||||
borderTopColor: lineColor,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{selectedTrain.length > 0 ? (
|
||||
selectedTrain.map((d) => (
|
||||
<FixedStationBoxEachTrain
|
||||
d={d}
|
||||
station={station[0]}
|
||||
key={d.train + "-fixedStationBox"}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<View style={{ backgroundColor: "white", flex: 1 }}>
|
||||
<Text style={{ fontSize: 20 }}>
|
||||
当駅を発着する走行中の列車はありません。
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const FixedStationBoxEachTrain = ({ d, station }) => {
|
||||
const { currentTrain } = useCurrentTrain();
|
||||
const { stationList } = useStationList();
|
||||
const { allCustomTrainData } = useAllTrainDiagram();
|
||||
const currentTrainData = checkDuplicateTrainData(
|
||||
currentTrain.filter((a) => a.num == d.train),
|
||||
stationList
|
||||
);
|
||||
|
||||
const trainDelayStatus = `${getTrainDelayStatus(
|
||||
currentTrainData,
|
||||
station.Station_JP
|
||||
)}`;
|
||||
const getTrainDataFromCurrentTrain = (trainNum: string) => {
|
||||
const customTrainData = customTrainDataDetector(
|
||||
d.train,
|
||||
allCustomTrainData
|
||||
);
|
||||
switch (customTrainData.type) {
|
||||
case "Normal":
|
||||
case "OneMan":
|
||||
const currentTrainData = currentTrain.filter((a) => a.num == trainNum);
|
||||
if (currentTrainData.length == 0) return customTrainData;
|
||||
else if (currentTrainData[0].Type.includes("rapid:")) {
|
||||
const typeText = currentTrainData[0].Type.split(":");
|
||||
const returnData = {
|
||||
type: "Rapid",
|
||||
trainName: typeText[1].replace("\r", ""),
|
||||
trainIcon: null,
|
||||
trainNumDistance: null,
|
||||
info: "",
|
||||
};
|
||||
return returnData;
|
||||
}
|
||||
return customTrainData;
|
||||
default:
|
||||
return customTrainData;
|
||||
}
|
||||
};
|
||||
const [train, setTrain] = useState<{
|
||||
ToData: string;
|
||||
TrainNumber: string;
|
||||
id: string;
|
||||
img: string;
|
||||
isWanman: boolean;
|
||||
trainName: string;
|
||||
trainNumDistance: number;
|
||||
type: typeID;
|
||||
viaData: string;
|
||||
info?: string;
|
||||
uwasa?: string;
|
||||
}>(getTrainDataFromCurrentTrain(d.train));
|
||||
useEffect(() => {
|
||||
setTrain(getTrainDataFromCurrentTrain(d.train));
|
||||
}, [currentTrain, d.train]);
|
||||
const { name, color } = getTrainType(train.type, true);
|
||||
return (
|
||||
<View style={{ backgroundColor: "white", flexDirection: "row",height:"33%",overflow:"visible" }}>
|
||||
<Text style={{ fontSize: 14, flex: 3 }}>{d.time}</Text>
|
||||
<Text style={{ fontSize: 14, flex: 4, color }}>{name}</Text>
|
||||
<Text style={{ fontSize: 14, flex: 4 }}>{d.lastStation}行</Text>
|
||||
<Text style={{ fontSize: 14, flex: 3 }}>{trainDelayStatus}</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
525
components/Apps/FixedPositionBox/FixedTrainBox.tsx
Normal file
525
components/Apps/FixedPositionBox/FixedTrainBox.tsx
Normal file
@@ -0,0 +1,525 @@
|
||||
import lineColorList from "@/assets/originData/lineColorList";
|
||||
import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
|
||||
import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
|
||||
import { useStationList, StationProps } from "@/stateBox/useStationList";
|
||||
import { FC, useEffect, useState } from "react";
|
||||
import { Text, TouchableOpacity, View, Image } from "react-native";
|
||||
import { customTrainDataDetector } from "../../custom-train-data";
|
||||
import { getStringConfig, typeID } from "@/lib/getStringConfig";
|
||||
import { getTrainType } from "@/lib/getTrainType";
|
||||
import { trainPosition } from "@/lib/trainPositionTextArray";
|
||||
import { StationNumberMaker } from "../../駅名表/StationNumberMaker";
|
||||
import { lineListPair, stationIDPair } from "@/lib/getStationList";
|
||||
import { findReversalPoints } from "@/lib/eachTrainInfoCoreLib/findReversalPoints";
|
||||
|
||||
type props = {
|
||||
trainID: string;
|
||||
};
|
||||
|
||||
export const FixedTrain: FC<props> = ({ trainID }) => {
|
||||
const {
|
||||
fixedPosition,
|
||||
setFixedPosition,
|
||||
currentTrain,
|
||||
getCurrentStationData,
|
||||
getPosition,
|
||||
} = useCurrentTrain();
|
||||
const { allCustomTrainData, allTrainDiagram } = useAllTrainDiagram();
|
||||
|
||||
const getTrainDataFromCurrentTrain = (trainNum: string) => {
|
||||
const customTrainData = customTrainDataDetector(
|
||||
trainNum,
|
||||
allCustomTrainData
|
||||
);
|
||||
switch (customTrainData.type) {
|
||||
case "Normal":
|
||||
case "OneMan":
|
||||
const currentTrainData = currentTrain.filter((a) => a.num == trainNum);
|
||||
if (currentTrainData.length == 0) return customTrainData;
|
||||
else if (currentTrainData[0].Type.includes("rapid:")) {
|
||||
const typeText = currentTrainData[0].Type.split(":");
|
||||
const returnData = {
|
||||
type: "Rapid",
|
||||
trainName: typeText[1].replace("\r", ""),
|
||||
trainIcon: null,
|
||||
trainNumDistance: null,
|
||||
info: "",
|
||||
};
|
||||
return returnData;
|
||||
}
|
||||
return customTrainData;
|
||||
default:
|
||||
return customTrainData;
|
||||
}
|
||||
};
|
||||
const [train, setTrain] = useState<{
|
||||
Pos?: string;
|
||||
Direction?: number;
|
||||
Index?: number;
|
||||
Line?: string;
|
||||
PosNum?: number;
|
||||
Type?: string;
|
||||
delay?: string | number;
|
||||
num?: string;
|
||||
}>(null);
|
||||
const [customData, setCustomData] = useState<{
|
||||
ToData: string;
|
||||
TrainNumber: string;
|
||||
id: string;
|
||||
img: string;
|
||||
isWanman: boolean;
|
||||
trainName: string;
|
||||
trainNumDistance: number;
|
||||
type: typeID;
|
||||
viaData: string;
|
||||
info?: string;
|
||||
uwasa?: string;
|
||||
}>(getTrainDataFromCurrentTrain(trainID));
|
||||
useEffect(() => {
|
||||
setCustomData(getTrainDataFromCurrentTrain(trainID));
|
||||
}, [currentTrain, trainID]);
|
||||
useEffect(() => {
|
||||
const stationData = getCurrentStationData(trainID);
|
||||
if (stationData) {
|
||||
setTrain(stationData);
|
||||
}
|
||||
}, [trainID, currentTrain]);
|
||||
|
||||
const { getStationDataFromName, stationList, originalStationList } =
|
||||
useStationList();
|
||||
|
||||
const [trainDataWidhThrough, setTrainDataWithThrough] = useState<string[]>(
|
||||
[]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const trainData = allTrainDiagram[trainID]?.split("#");
|
||||
if (!trainData) return;
|
||||
//let haveThrough = false;
|
||||
//
|
||||
const stopStationList = trainData.map((i) => {
|
||||
const [station, se, time] = i.split(",");
|
||||
//if (se == "通編") setHaveThrough(true);
|
||||
return stationList.map((a) => a.filter((d) => d.StationName == station));
|
||||
});
|
||||
const allThroughStationList = stopStationList.map((i, index, array) => {
|
||||
let allThroughStation = [];
|
||||
if (index == array.length - 1) return;
|
||||
|
||||
const firstItem = array[index];
|
||||
const secondItem = array[index + 1];
|
||||
let betweenStationLine = "";
|
||||
let baseStationNumberFirst = "";
|
||||
let baseStationNumberSecond = "";
|
||||
Object.keys(stationIDPair).forEach((d, index2, array) => {
|
||||
if (!d) return;
|
||||
const haveFirst = firstItem[index2];
|
||||
const haveSecond = secondItem[index2];
|
||||
if (haveFirst.length && haveSecond.length) {
|
||||
betweenStationLine = d;
|
||||
baseStationNumberFirst = haveFirst[0].StationNumber;
|
||||
baseStationNumberSecond = haveSecond[0].StationNumber;
|
||||
}
|
||||
});
|
||||
if (!betweenStationLine) return;
|
||||
let reverse = false;
|
||||
originalStationList[
|
||||
lineListPair[stationIDPair[betweenStationLine]]
|
||||
].forEach((d) => {
|
||||
if (
|
||||
d.StationNumber > baseStationNumberFirst &&
|
||||
d.StationNumber < baseStationNumberSecond
|
||||
) {
|
||||
allThroughStation.push(`${d.Station_JP},通過,`);
|
||||
//setHaveThrough(true);
|
||||
reverse = false;
|
||||
} else {
|
||||
if (
|
||||
d.StationNumber < baseStationNumberFirst &&
|
||||
d.StationNumber > baseStationNumberSecond
|
||||
) {
|
||||
allThroughStation.push(`${d.Station_JP},通過,`);
|
||||
//setHaveThrough(true);
|
||||
reverse = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
if (reverse) allThroughStation.reverse();
|
||||
return allThroughStation;
|
||||
});
|
||||
let mainArray = [...trainData];
|
||||
let indexs = 0;
|
||||
trainData.forEach((d, index, array) => {
|
||||
indexs = indexs + 1;
|
||||
if (!allThroughStationList[index]) return;
|
||||
if (allThroughStationList[index].length == 0) return;
|
||||
mainArray.splice(indexs, 0, ...allThroughStationList[index]);
|
||||
indexs = indexs + allThroughStationList[index].length;
|
||||
});
|
||||
setTrainDataWithThrough(mainArray);
|
||||
}, [allTrainDiagram, stationList, trainID]);
|
||||
const stopStationIDList = trainDataWidhThrough.map((i) => {
|
||||
const [station, se, time] = i.split(",");
|
||||
const Stations = stationList.map((a) =>
|
||||
a.filter((d) => d.StationName == station)
|
||||
);
|
||||
const StationNumbers =
|
||||
Stations &&
|
||||
Stations.reduce((newArray, e) => {
|
||||
return newArray.concat(e);
|
||||
}, []).map((d) => d.StationNumber);
|
||||
return StationNumbers;
|
||||
});
|
||||
const [currentPosition, setCurrentPosition] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const position = getPosition(train);
|
||||
if (position) setCurrentPosition(position);
|
||||
}, [train]);
|
||||
|
||||
const [nextStationData, setNextStationData] = useState<StationProps[]>([]);
|
||||
const [untilStationData, setUntilStationData] = useState<StationProps[]>([]);
|
||||
useEffect(() => {
|
||||
const points = findReversalPoints(currentPosition, stopStationIDList);
|
||||
if (!points) return;
|
||||
if (points.length == 0) return;
|
||||
let searchCountBase = points.findIndex((d) => d == true);
|
||||
for (
|
||||
let searchCount = searchCountBase;
|
||||
searchCount < points.length;
|
||||
searchCount++
|
||||
) {
|
||||
console.log(trainDataWidhThrough[searchCount]);
|
||||
const nextPos = trainDataWidhThrough[searchCount];
|
||||
if (nextPos) {
|
||||
const [station, se, time] = nextPos.split(",");
|
||||
if (se.includes("通")) continue;
|
||||
else {
|
||||
setNextStationData(getStationDataFromName(station));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
let trainList = [];
|
||||
for (
|
||||
let searchCount = searchCountBase - 1;
|
||||
searchCount < points.length;
|
||||
searchCount++
|
||||
) {
|
||||
trainList.push(trainDataWidhThrough[searchCount]);
|
||||
}
|
||||
setUntilStationData(trainList);
|
||||
}, [currentPosition, trainDataWidhThrough]);
|
||||
const [ToData, setToData] = useState("");
|
||||
useEffect(() => {
|
||||
if (customData.ToData && customData.ToData != "") {
|
||||
setToData(customData.ToData);
|
||||
} else {
|
||||
if (trainDataWidhThrough.length == 0) return;
|
||||
setToData(
|
||||
trainDataWidhThrough[trainDataWidhThrough.length - 2].split(",")[0]
|
||||
);
|
||||
}
|
||||
}, [customData, trainDataWidhThrough]);
|
||||
const [stringConfig, setStringConfig] = useState([, ,]);
|
||||
useEffect(() => {
|
||||
const x = getStringConfig(customData.type, customData.TrainNumber);
|
||||
setStringConfig(x);
|
||||
}, [customData]);
|
||||
|
||||
const [station, setStation] = useState<StationProps[]>([]);
|
||||
useEffect(() => {
|
||||
const data = getStationDataFromName(ToData);
|
||||
setStation(data);
|
||||
}, [ToData]);
|
||||
const lineColor =
|
||||
station.length > 0
|
||||
? lineColorList[station[0]?.StationNumber.slice(0, 1)]
|
||||
: "black";
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={{ flex: 1, flexDirection: "row", backgroundColor: "black" }}
|
||||
onPress={() => {
|
||||
setFixedPosition({ type: null, value: null });
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{ flexDirection: "column", flex: 1, backgroundColor: "white" }}
|
||||
>
|
||||
<View style={{ flex: 1, flexDirection: "row" }}>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: getTrainType(customData.type, true).color,
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
source={{ uri: customData.img }}
|
||||
width={14}
|
||||
height={17}
|
||||
style={{ margin: 5 }}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
fontFamily: stringConfig[1] ? "JR-Nishi" : undefined,
|
||||
fontWeight: !stringConfig[1] ? "bold" : undefined,
|
||||
marginTop: stringConfig[1] ? 3 : 0,
|
||||
color: "white",
|
||||
textAlignVertical: "center",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
{stringConfig[0]}
|
||||
</Text>
|
||||
{customData.trainName && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: customData?.trainName?.length > 6 ? 9 : 14,
|
||||
color: "white",
|
||||
maxWidth: 65,
|
||||
textAlignVertical: "center",
|
||||
}}
|
||||
>
|
||||
{customData.trainName}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: getTrainType(customData.type, true).color,
|
||||
width: 10,
|
||||
borderLeftColor: getTrainType(customData.type, true).color,
|
||||
borderTopColor: lineColor,
|
||||
borderBottomColor: lineColor,
|
||||
borderTopWidth: 14,
|
||||
borderBottomWidth: 14,
|
||||
borderLeftWidth: 10,
|
||||
borderRightWidth: 0,
|
||||
}}
|
||||
></View>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
height: "100%",
|
||||
backgroundColor: lineColor,
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<StationNumberMaker
|
||||
currentStation={station}
|
||||
singleSize={20}
|
||||
useEach={true}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 14,
|
||||
color: "white",
|
||||
fontWeight: "bold",
|
||||
textAlignVertical: "center",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{ToData}行
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "black",
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 10,
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
marginHorizontal: 5,
|
||||
}}
|
||||
>
|
||||
{nextStationData[0]?.Station_JP == train?.Pos ? "ただいま" : "次は"}
|
||||
</Text>
|
||||
<StationNumberMaker
|
||||
currentStation={nextStationData}
|
||||
singleSize={20}
|
||||
useEach={true}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{nextStationData[0]?.Station_JP || "不明"}
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: 10,
|
||||
borderLeftColor: "black",
|
||||
borderTopColor: "black",
|
||||
borderBottomColor: "white",
|
||||
borderRightColor: "white",
|
||||
borderTopWidth: 25,
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 10,
|
||||
}}
|
||||
></View>
|
||||
</View>
|
||||
</View>
|
||||
<CurrentPositionBox
|
||||
train={train}
|
||||
lineColor={lineColor}
|
||||
trainDataWithThrough={untilStationData}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const CurrentPositionBox = ({ train, lineColor, trainDataWithThrough }) => {
|
||||
let firstText = "";
|
||||
let secondText = "";
|
||||
let marginText = "";
|
||||
let externalText = "";
|
||||
const { isBetween, Pos: PosData } = trainPosition(train);
|
||||
if (isBetween === true) {
|
||||
const { from, to } = PosData;
|
||||
firstText = from;
|
||||
secondText = to;
|
||||
marginText = "→";
|
||||
} else {
|
||||
const { Pos } = PosData;
|
||||
if (Pos !== "") {
|
||||
firstText = Pos;
|
||||
}
|
||||
}
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: "white", flexDirection: "row" }}>
|
||||
<View style={{ flexDirection: "column", height: "100%" }}>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: 10,
|
||||
borderLeftColor: lineColor,
|
||||
borderTopColor: lineColor,
|
||||
borderBottomColor: "white",
|
||||
borderRightColor: "white",
|
||||
borderTopWidth: 25,
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 10,
|
||||
flex: 1,
|
||||
}}
|
||||
></View>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
width: 10,
|
||||
borderLeftColor: "white",
|
||||
borderTopColor: "white",
|
||||
borderBottomColor: "white",
|
||||
borderRightColor: "white",
|
||||
borderTopWidth: 25,
|
||||
borderBottomWidth: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderRightWidth: 10,
|
||||
flex: 1,
|
||||
}}
|
||||
></View>
|
||||
</View>
|
||||
<View style={{ flex: 1, flexDirection: "row", overflow: "hidden" }}>
|
||||
{trainDataWithThrough.length > 0 &&
|
||||
trainDataWithThrough.map((d, index, array) => {
|
||||
if (!d) return null;
|
||||
if (d == "") return null;
|
||||
const [station, se, time] = d.split(",");
|
||||
return (
|
||||
<>
|
||||
{(index == 0 && secondText == "") || <View
|
||||
style={{
|
||||
flexDirection: "column",
|
||||
backgroundColor: "#6e6e6eff",
|
||||
borderRadius: 10,
|
||||
marginHorizontal: 2,
|
||||
padding: 2,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{station.split("").map((i, index) => {
|
||||
return (
|
||||
<Text
|
||||
key={index}
|
||||
style={{
|
||||
fontSize: 6,
|
||||
color: "white",
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{i}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text style={{ fontSize: 8, color: "white" }}>
|
||||
{se.includes("通") ? "" : "●"}
|
||||
</Text>
|
||||
</View>}
|
||||
{(index == 0 && secondText != "") && (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "column",
|
||||
backgroundColor: "#6e6e6e0e",
|
||||
borderRadius: 10,
|
||||
marginHorizontal: 2,
|
||||
padding: 2,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text style={{ fontSize: 8, color: "black" }}>></Text>
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
@@ -37,6 +37,7 @@ export const MapsButton: FC<MapsButtonProps> = ({ onPress }) => {
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
display: mapSwitch == "true" ? "flex" : "none",
|
||||
zIndex: 1000,
|
||||
},
|
||||
text: {
|
||||
textAlign: "center",
|
||||
|
@@ -38,6 +38,7 @@ export const ReloadButton:FC<ReloadButton> = ({ onPress, right }) => {
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
display: mapSwitch,
|
||||
zIndex: 1000,
|
||||
},
|
||||
text: {
|
||||
textAlign: "center",
|
||||
|
@@ -23,7 +23,8 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
|
||||
const { navigate } = useNavigation();
|
||||
const { favoriteStation } = useFavoriteStation();
|
||||
const { isLandscape } = useDeviceOrientationChange();
|
||||
const { originalStationList, stationList, getInjectJavascriptAddress } = useStationList();
|
||||
const { originalStationList, stationList, getInjectJavascriptAddress } =
|
||||
useStationList();
|
||||
const {
|
||||
setSelectedLine,
|
||||
mapsStationData: stationData,
|
||||
@@ -51,7 +52,6 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const onMessage = (event) => {
|
||||
const { data } = event.nativeEvent;
|
||||
/**
|
||||
@@ -137,7 +137,9 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
|
||||
if (!stationData) return () => {};
|
||||
if (!originalStationList) return () => {};
|
||||
if (favoriteStation.length < 1) return () => {};
|
||||
const string = getInjectJavascriptAddress(favoriteStation[0][0].StationNumber);
|
||||
const string = getInjectJavascriptAddress(
|
||||
favoriteStation[0][0].StationNumber
|
||||
);
|
||||
if (!string) return () => {};
|
||||
webview?.current.injectJavaScript(string);
|
||||
once = true;
|
||||
|
@@ -3,20 +3,7 @@ import { View, Text, TouchableOpacity } from "react-native";
|
||||
import { useInterval } from "../../lib/useInterval";
|
||||
|
||||
import lineColorList from "../../assets/originData/lineColorList";
|
||||
|
||||
type StationProps = {
|
||||
DispNum: string;
|
||||
JrHpUrl: string;
|
||||
MyStation: string;
|
||||
StationMap: string;
|
||||
StationNumber: string | null;
|
||||
StationTimeTable: string;
|
||||
Station_EN: string;
|
||||
Station_JP: string;
|
||||
jslodApi: string;
|
||||
lat: number;
|
||||
lng: number;
|
||||
};
|
||||
import { StationProps } from "@/stateBox/useStationList";
|
||||
type StationNumberProps = {
|
||||
currentStation: StationProps[];
|
||||
active: boolean;
|
||||
|
@@ -197,9 +197,7 @@ export default function Sign(props) {
|
||||
source={require("../../assets/StationSign.json")}
|
||||
/>
|
||||
)}
|
||||
<StationNumberMaker
|
||||
{...{ currentStation: currentStationData, isMatsuyama }}
|
||||
/>
|
||||
<StationNumberMaker {...{ currentStation: currentStationData }} />
|
||||
<StationNameArea
|
||||
{...{ currentStation: currentStationData, isMatsuyama }}
|
||||
/>
|
||||
|
@@ -1,10 +1,16 @@
|
||||
import React from "react";
|
||||
import React, { FC } from "react";
|
||||
import { Text, View } from "react-native";
|
||||
import { useWindowDimensions } from "react-native";
|
||||
import lineColorList from "../../assets/originData/lineColorList";
|
||||
import { StationProps } from "@/stateBox/useStationList";
|
||||
|
||||
export const StationNumberMaker = (props) => {
|
||||
const { currentStation, isMatsuyama } = props;
|
||||
type props = {
|
||||
currentStation: StationProps[];
|
||||
useEach?: boolean;
|
||||
singleSize?: number;
|
||||
};
|
||||
export const StationNumberMaker: FC<props> = (props) => {
|
||||
const { currentStation, useEach = false, singleSize } = props;
|
||||
const { width } = useWindowDimensions();
|
||||
const getTop = (array: number[], index: number) => {
|
||||
if (array.length == 1) return 20;
|
||||
@@ -12,7 +18,7 @@ export const StationNumberMaker = (props) => {
|
||||
else if (index == 1) return 35;
|
||||
else return 20;
|
||||
};
|
||||
return currentStation
|
||||
return <>{currentStation
|
||||
.filter((d) => (d.StationNumber ? true : false))
|
||||
.map((d, index, array) => {
|
||||
const lineID = d.StationNumber.slice(0, 1);
|
||||
@@ -20,29 +26,41 @@ export const StationNumberMaker = (props) => {
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
alignContent: "center",
|
||||
alignItems: "center",
|
||||
top: `${getTop(array, index)}%`,
|
||||
right: "10%",
|
||||
width: (width / 100 * 10),
|
||||
height: (width / 100 * 10),
|
||||
borderColor: lineColorList[lineID],
|
||||
backgroundColor: "white",
|
||||
...(useEach ? {
|
||||
width: singleSize,
|
||||
height: singleSize,
|
||||
borderWidth: parseInt("1%"),
|
||||
borderRadius: parseInt("100%"),
|
||||
} : {
|
||||
width: (width / 100) * 10,
|
||||
height: (width / 100) * 10,
|
||||
borderWidth: parseInt("3%"),
|
||||
borderRadius: parseInt("100%"),
|
||||
position: "absolute",
|
||||
top: `${getTop(array, index)}%`,
|
||||
right: "10%"
|
||||
})
|
||||
}}
|
||||
key={array[index].StationNumber}
|
||||
>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text
|
||||
style={{
|
||||
fontSize: parseInt("13%"),
|
||||
margin: 0,
|
||||
padding: 0,
|
||||
textAlign: "center",
|
||||
color: "black",
|
||||
color: "black",
|
||||
fontWeight: "bold",
|
||||
...(useEach ? {
|
||||
|
||||
fontSize: 6,//singleSize * 0.03,
|
||||
}:{
|
||||
fontSize: parseInt("13%"),
|
||||
})
|
||||
}}
|
||||
>
|
||||
{lineID + "\n" + lineName}
|
||||
@@ -50,5 +68,5 @@ export const StationNumberMaker = (props) => {
|
||||
<View style={{ flex: 1 }} />
|
||||
</View>
|
||||
);
|
||||
});
|
||||
})}</>
|
||||
};
|
||||
|
@@ -51,7 +51,7 @@ export const getTrainType: getTrainType = (nameString, whiteMode) => {
|
||||
};
|
||||
case "Rapid":
|
||||
case "OneManRapid":
|
||||
return { color: whiteMode ? "#00b8d8cc" : "aqua", name: "快速", data: "rapid" };
|
||||
return { color: whiteMode ? "#00a0bdff" : "aqua", name: "快速", data: "rapid" };
|
||||
case "LTDEXP":
|
||||
return { color: "red", name: "特急", data: "express" };
|
||||
case "NightLTDEXP":
|
||||
@@ -66,7 +66,7 @@ export const getTrainType: getTrainType = (nameString, whiteMode) => {
|
||||
case "Party":
|
||||
return { color: "#ff7300ff", name: "団体臨時", data: "normal" };
|
||||
case "Freight":
|
||||
return { color: "#00869ecc", name: "貨物", data: "notService" };
|
||||
return { color: "#007488ff", name: "貨物", data: "notService" };
|
||||
case "Forwarding":
|
||||
return { color: "#727272cc", name: "回送", data: "notService" };
|
||||
case "FreightForwarding":
|
||||
|
@@ -24,6 +24,8 @@ export const useInterval = (fn: Fn, interval: number, autostart = true) => {
|
||||
useEffect(() => {
|
||||
if (autostart) {
|
||||
setState("RUNNING");
|
||||
}else{
|
||||
setState("STOPPED");
|
||||
}
|
||||
}, [autostart]);
|
||||
useEffect(() => {
|
||||
|
@@ -8,6 +8,9 @@ import React, {
|
||||
import { HeaderConfig } from "../lib/HeaderConfig";
|
||||
|
||||
import useInterval from "../lib/useInterval";
|
||||
import { useStationList } from "./useStationList";
|
||||
import { checkDuplicateTrainData } from "@/lib/checkDuplicateTrainData";
|
||||
import { getStationID } from "@/lib/eachTrainInfoCoreLib/getStationData";
|
||||
const initialState = {
|
||||
webview: {},
|
||||
currentTrain: [],
|
||||
@@ -16,6 +19,11 @@ const initialState = {
|
||||
setCurrentTrainLoading: () => {},
|
||||
getCurrentTrain: () => {},
|
||||
inject: (i) => {},
|
||||
fixedPosition: null,
|
||||
setFixedPosition: (e) => {},
|
||||
setInjectData: (e) => {},
|
||||
getCurrentStationData: (e) => {},
|
||||
getPosition: (e) => {},
|
||||
};
|
||||
|
||||
const CurrentTrainContext = createContext(initialState);
|
||||
@@ -27,6 +35,136 @@ export const useCurrentTrain = () => {
|
||||
export const CurrentTrainProvider = ({ children }) => {
|
||||
const [currentTrain, setCurrentTrain] = useState([]); //現在在線中の全列車 { num: 列車番号, delay: 遅延時分(状態), Pos: 位置情報 }
|
||||
const [currentTrainLoading, setCurrentTrainLoading] = useState("loading"); // success, error, loading
|
||||
|
||||
const { getInjectJavascriptAddress, stationList, originalStationList } =
|
||||
useStationList();
|
||||
|
||||
const [fixedPosition, setFixedPosition] = useState({
|
||||
type: null,
|
||||
value: null,
|
||||
});
|
||||
const [_, setIntervalState] = useInterval(
|
||||
() => {
|
||||
if (!webview.current) return;
|
||||
if (fixedPosition.type == "station") {
|
||||
const script = getInjectJavascriptAddress(fixedPosition.value);
|
||||
inject(script);
|
||||
} else if (fixedPosition.type == "train") {
|
||||
const currentTrain = getCurrentStationData(fixedPosition.value);
|
||||
const values = getPosition(currentTrain);
|
||||
if (!values) return;
|
||||
if (values[0] == "M12" || values[1] == "M12") {
|
||||
const script = getInjectJavascriptAddress("M12");
|
||||
inject(script);
|
||||
return;
|
||||
}
|
||||
|
||||
const script = getInjectJavascriptAddress(
|
||||
values[values.length == 2 ? currentTrain.Direction : 0]
|
||||
);
|
||||
inject(script);
|
||||
}
|
||||
},
|
||||
5000, //60000,
|
||||
false
|
||||
);
|
||||
useEffect(() => {
|
||||
if (fixedPosition) {
|
||||
setIntervalState.start();
|
||||
} else {
|
||||
setIntervalState.stop();
|
||||
}
|
||||
}, [fixedPosition]);
|
||||
const getPosition = (currentTrainData) => {
|
||||
//currentTrainData.Pos = "鴨川~端岡"; //test
|
||||
if (!currentTrainData) return;
|
||||
if (!currentTrainData?.Pos) return;
|
||||
if (currentTrainData?.Pos.match("~")) {
|
||||
const pos = currentTrainData?.Pos.replace("(下り)", "")
|
||||
.replace("(上り)", "")
|
||||
.replace("(徳島線)", "")
|
||||
.replace("(高徳線)", "")
|
||||
.split("~");
|
||||
const direction = parseInt(currentTrainData?.Direction) || 0;
|
||||
if (pos[0] == "児島" && pos[1] == "宇多津") {
|
||||
return ["M12", "Y09"];
|
||||
} else if (pos[1] == "児島" && pos[0] == "宇多津") {
|
||||
return ["Y09", "M12"];
|
||||
} else if (pos[0] == "伊予若宮" && pos[1] == "伊予白滝") {
|
||||
return ["S18", "S14"];
|
||||
} else if (pos[0] == "伊予白滝" && pos[1] == "伊予若宮") {
|
||||
return ["S14", "S18"];
|
||||
} else if (pos[0] == "伊予大洲" && pos[1] == "伊予若宮") {
|
||||
return ["U14", "U14"];
|
||||
} else if (pos[0] == "伊予若宮" && pos[1] == "伊予大洲") {
|
||||
return ["U14", "U14"];
|
||||
}
|
||||
const currentPosID = Object.keys(originalStationList).map((key) => {
|
||||
let firstStation = false;
|
||||
let firstStationID = "";
|
||||
let secondStation = false;
|
||||
let secondStationID = "";
|
||||
originalStationList[key].forEach((station) => {
|
||||
if (station.Station_JP === pos[0]) {
|
||||
firstStation = true;
|
||||
firstStationID = station.StationNumber;
|
||||
}
|
||||
if (station.Station_JP === pos[1]) {
|
||||
secondStation = true;
|
||||
secondStationID = station.StationNumber;
|
||||
}
|
||||
});
|
||||
if (firstStation && secondStation) {
|
||||
return [firstStationID, secondStationID];
|
||||
} else return false;
|
||||
});
|
||||
const currentPos = currentPosID.filter((d) => d != false)[0];
|
||||
if (currentPos) {
|
||||
return direction == 0 ? currentPos.reverse() : currentPos;
|
||||
} else if (direction == 0) {
|
||||
return [
|
||||
getStationID(pos[1], stationList),
|
||||
getStationID(pos[0], stationList),
|
||||
];
|
||||
} else {
|
||||
return [
|
||||
getStationID(pos[0], stationList),
|
||||
getStationID(pos[1], stationList),
|
||||
];
|
||||
}
|
||||
} else {
|
||||
return [getStationID(currentTrainData?.Pos, stationList)];
|
||||
}
|
||||
};
|
||||
const getCurrentStationData = (e) => {
|
||||
//e:trainNumber
|
||||
if (!currentTrain.length) return;
|
||||
return checkDuplicateTrainData(
|
||||
currentTrain.filter((d) => d.num == e),
|
||||
stationList
|
||||
);
|
||||
};
|
||||
const setInjectData = ({ type, value, fixed }) => {
|
||||
if (type === "station") {
|
||||
const script = getInjectJavascriptAddress(value);
|
||||
inject(script);
|
||||
} else if (type === "train") {
|
||||
const currentTrain = getCurrentStationData(value);
|
||||
const values = getPosition(currentTrain);
|
||||
if (!values) return;
|
||||
let script;
|
||||
if (values[0] == "M12" || values[1] == "M12") {
|
||||
script = getInjectJavascriptAddress("M12");
|
||||
} else {
|
||||
const valuesIndex = values.length == 2 ? currentTrain.Direction : 0;
|
||||
script = getInjectJavascriptAddress(values[valuesIndex]);
|
||||
}
|
||||
inject(script);
|
||||
}
|
||||
if (fixed) {
|
||||
setFixedPosition({ type, value });
|
||||
}
|
||||
};
|
||||
const getCurrentTrain = () => {
|
||||
fetch("https://n8n.haruk.in/webhook/c501550c-7d1b-4e50-927b-4429fe18931a")
|
||||
.then((response) => response.json())
|
||||
@@ -88,6 +226,11 @@ export const CurrentTrainProvider = ({ children }) => {
|
||||
setCurrentTrainLoading,
|
||||
getCurrentTrain,
|
||||
inject,
|
||||
setInjectData,
|
||||
getCurrentStationData,
|
||||
getPosition,
|
||||
fixedPosition,
|
||||
setFixedPosition,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
|
@@ -18,8 +18,8 @@ export const DeviceOrientationChangeProvider = ({ children }) => {
|
||||
);
|
||||
};
|
||||
useEffect(() => {
|
||||
data();
|
||||
//ScreenOrientation.unlockAsync();
|
||||
//data();
|
||||
ScreenOrientation.unlockAsync();
|
||||
}, []);
|
||||
|
||||
// useEffect(() => {
|
||||
|
@@ -10,12 +10,24 @@ import {
|
||||
getStationList,
|
||||
lineList_LineWebID,
|
||||
} from "../lib/getStationList";
|
||||
|
||||
export type StationProps = {
|
||||
DispNum: string;
|
||||
JrHpUrl: string;
|
||||
MyStation: string;
|
||||
StationMap: string;
|
||||
StationNumber: string | null;
|
||||
StationTimeTable: string;
|
||||
Station_EN: string;
|
||||
Station_JP: string;
|
||||
jslodApi: string;
|
||||
lat: number;
|
||||
lng: number;
|
||||
};
|
||||
type initialStateType = {
|
||||
originalStationList: any[][];
|
||||
setOriginalStationList: React.Dispatch<React.SetStateAction<any[]>>;
|
||||
getStationDataFromName: (id: string) => any[];
|
||||
getStationDataFromId: (id: string) => any[];
|
||||
originalStationList: StationProps[][];
|
||||
setOriginalStationList: React.Dispatch<React.SetStateAction<StationProps[]>>;
|
||||
getStationDataFromName: (id: string) => StationProps[];
|
||||
getStationDataFromId: (id: string) => StationProps[];
|
||||
getStationDataFromNameBase: (name: string) => any[];
|
||||
stationList: any[];
|
||||
getInjectJavascriptAddress: (StationNumber: string) => string;
|
||||
|
@@ -94,7 +94,7 @@ export const TrainMenuProvider = ({ children }) => {
|
||||
//列車アイコンスイッチ
|
||||
ASCore({ k: "iconSwitch", s: setIconSetting, d: "true", u: true });
|
||||
//地図スイッチ
|
||||
ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false", u: true });
|
||||
ASCore({ k: "mapSwitch", s: setMapSwitch, d: "true", u: true });
|
||||
//駅メニュースイッチ
|
||||
ASCore({ k: "stationSwitch", s: setStationMenu, d: "true", u: true });
|
||||
//列車メニュースイッチ
|
||||
|
Reference in New Issue
Block a user