駅名標の動作が不完全だった問題を修正
This commit is contained in:
parent
06c5102225
commit
448b0696ac
@ -14,6 +14,7 @@ import {
|
||||
heightPercentageToDP as hp,
|
||||
} from "react-native-responsive-screen";
|
||||
import { customTrainDataDetector } from "../custom-train-data";
|
||||
import { useInterval } from "../../lib/useInterval";
|
||||
|
||||
let diagramData = undefined;
|
||||
|
||||
@ -126,19 +127,18 @@ export default function LED_vision(props) {
|
||||
});
|
||||
};
|
||||
const trainTimeAndNumber = stationDiagram != null ? getTime() : null;
|
||||
useEffect(() => {
|
||||
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 })))
|
||||
.then((d) => setCurrentTrain(d));
|
||||
getCurrentTrain();
|
||||
const currentTrainInterval = setInterval(getCurrentTrain, 15000);
|
||||
return () => clearInterval(currentTrainInterval);
|
||||
}, []);
|
||||
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 })))
|
||||
.then(setCurrentTrain);
|
||||
|
||||
useEffect(getCurrentTrain, []);
|
||||
|
||||
useInterval(getCurrentTrain, 15000);
|
||||
|
||||
const timeFiltering = (d) => {
|
||||
const date = new Date();
|
||||
|
@ -12,6 +12,7 @@ import {
|
||||
widthPercentageToDP as wp,
|
||||
heightPercentageToDP as hp,
|
||||
} from "react-native-responsive-screen";
|
||||
import { useInterval } from "../../lib/useInterval";
|
||||
|
||||
export default function Sign(props) {
|
||||
const { currentStation, originalStationList, oP } = props;
|
||||
@ -42,21 +43,12 @@ export default function Sign(props) {
|
||||
return returnData;
|
||||
};
|
||||
const [nexPrePosition, setNexPrePosition] = useState(0);
|
||||
useEffect(() => {
|
||||
if (currentStation) {
|
||||
if (currentStation.length > 1) {
|
||||
let stationCount = setInterval(() => {
|
||||
LayoutAnimation.easeInEaseOut();
|
||||
if (nexPrePosition + 1 == currentStation.length) {
|
||||
setNexPrePosition(0);
|
||||
} else {
|
||||
setNexPrePosition(nexPrePosition + 1);
|
||||
}
|
||||
}, 1000);
|
||||
return () => clearInterval(stationCount);
|
||||
}
|
||||
}
|
||||
}, [currentStation]);
|
||||
useInterval(() => {
|
||||
LayoutAnimation.easeInEaseOut();
|
||||
setNexPrePosition(
|
||||
nexPrePosition + 1 == currentStation.length ? 0 : nexPrePosition + 1
|
||||
);
|
||||
}, 2000);
|
||||
return (
|
||||
<TouchableOpacity style={styleSheet.外枠} onPress={oP}>
|
||||
<StationNumberMaker currentStation={currentStation} />
|
||||
@ -64,43 +56,45 @@ export default function Sign(props) {
|
||||
<Text style={styleSheet.JRStyle}>JR</Text>
|
||||
<View style={styleSheet.下帯} />
|
||||
<View style={styleSheet.下帯内容}>
|
||||
{
|
||||
currentStation.map((currentStation) => {
|
||||
let [preStation, nexStation] = getPreNextStation(currentStation);
|
||||
return (
|
||||
{(() => {
|
||||
let [preStation, nexStation] = getPreNextStation(
|
||||
currentStation[nexPrePosition]
|
||||
);
|
||||
return (
|
||||
<View style={styleSheet.下枠フレーム}>
|
||||
<View style={styleSheet.下枠フレーム}>
|
||||
<View style={styleSheet.下枠フレーム}>
|
||||
{preStation && (
|
||||
<>
|
||||
<Text style={styleSheet.下枠左右マーク}>◀</Text>
|
||||
{preStation.StationNumber != " " && (
|
||||
<View style={styleSheet.下枠駅ナンバー}>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text
|
||||
style={{
|
||||
fontSize: parseInt("10%"),
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
{preStation.StationNumber}
|
||||
</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
</View>
|
||||
)}
|
||||
<StationName
|
||||
stringData={preStation}
|
||||
ss={{ flex: 1, alignItems: "flex-start" }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
<View style={styleSheet.下枠フレーム}>
|
||||
{nexStation && (
|
||||
<>
|
||||
<StationName
|
||||
stringData={nexStation}
|
||||
ss={{ flex: 1, alignItems: "flex-end" }}
|
||||
/>
|
||||
{preStation && (
|
||||
<>
|
||||
<Text style={styleSheet.下枠左右マーク}>◀</Text>
|
||||
{preStation.StationNumber && (
|
||||
<View style={styleSheet.下枠駅ナンバー}>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text
|
||||
style={{
|
||||
fontSize: parseInt("10%"),
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
{preStation.StationNumber}
|
||||
</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
</View>
|
||||
)}
|
||||
<StationName
|
||||
stringData={preStation}
|
||||
ss={{ flex: 1, alignItems: "flex-start" }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
<View style={styleSheet.下枠フレーム}>
|
||||
{nexStation && (
|
||||
<>
|
||||
<StationName
|
||||
stringData={nexStation}
|
||||
ss={{ flex: 1, alignItems: "flex-end" }}
|
||||
/>
|
||||
{nexStation.StationNumber && (
|
||||
<View style={styleSheet.下枠駅ナンバー}>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text
|
||||
@ -110,14 +104,14 @@ export default function Sign(props) {
|
||||
</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
</View>
|
||||
<Text style={styleSheet.下枠左右マーク}>▶</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
<Text style={styleSheet.下枠左右マーク}>▶</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
})[nexPrePosition]
|
||||
}
|
||||
</View>
|
||||
);
|
||||
})()}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
@ -125,7 +119,7 @@ export default function Sign(props) {
|
||||
|
||||
const StationNumberMaker = (props) => {
|
||||
return props.currentStation
|
||||
.filter((d) => (d.StationNumber != " " ? true : false))
|
||||
.filter((d) => (d.StationNumber ? true : false))
|
||||
.map((d, index, array) => (
|
||||
<View
|
||||
style={{
|
||||
|
@ -155,17 +155,36 @@ export const getStationList = async (props) => {
|
||||
高徳線,
|
||||
stationList.日英対応表
|
||||
);
|
||||
stationList.徳島線 = addStationPosition(
|
||||
concatBetweenStations(stationList.徳島線),
|
||||
徳島線,
|
||||
stationList.日英対応表
|
||||
);
|
||||
stationList.鳴門線 = addStationPosition(
|
||||
concatBetweenStations(stationList.鳴門線),
|
||||
鳴門線,
|
||||
stationList.日英対応表
|
||||
); /*
|
||||
);
|
||||
const tokushimaCurrent = addStationPosition(
|
||||
concatBetweenStations(stationList.徳島線),
|
||||
徳島線,
|
||||
stationList.日英対応表
|
||||
);
|
||||
stationList.徳島線 = [
|
||||
tokushimaCurrent[tokushimaCurrent.length - 1],
|
||||
...tokushimaCurrent,
|
||||
];
|
||||
stationList.徳島線.pop();
|
||||
stationList.瀬戸大橋線 = [
|
||||
{
|
||||
Station_JP: "坂出",
|
||||
Station_EN: "Sakaide",
|
||||
MyStation: "3",
|
||||
StationNumber: null,
|
||||
DispNum: "3",
|
||||
StationTimeTable:
|
||||
"http://www.jr-shikoku.co.jp/01_trainbus/jikoku/pdf/sakaide.pdf",
|
||||
StationMap: "https://www.google.co.jp/maps/place/34.313222,133.856325",
|
||||
JrHpUrl: "http://www.jr-shikoku.co.jp/01_trainbus/kakueki/sakaide/",
|
||||
lat: 34.313222,
|
||||
lng: 133.856325,
|
||||
},
|
||||
|
||||
{
|
||||
Station_JP: "児島",
|
||||
Station_EN: "Kojima",
|
||||
@ -179,7 +198,20 @@ export const getStationList = async (props) => {
|
||||
lat: 34.462562,
|
||||
lng: 133.807809,
|
||||
},
|
||||
]; */
|
||||
{
|
||||
Station_JP: "宇多津",
|
||||
Station_EN: "Utazu",
|
||||
MyStation: "0",
|
||||
StationNumber: null,
|
||||
DispNum: "3",
|
||||
StationTimeTable:
|
||||
"http://www.jr-shikoku.co.jp/01_trainbus/jikoku/pdf/utazu.pdf",
|
||||
StationMap: "https://www.google.co.jp/maps/place/34.306379,133.813784",
|
||||
JrHpUrl: "http://www.jr-shikoku.co.jp/01_trainbus/kakueki/utazu/",
|
||||
lat: 34.306379,
|
||||
lng: 133.813784,
|
||||
},
|
||||
];
|
||||
status = stationList;
|
||||
return stationList;
|
||||
});
|
||||
|
45
lib/useInterval.js
Normal file
45
lib/useInterval.js
Normal file
@ -0,0 +1,45 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
// type Control = {
|
||||
// start: () => void;
|
||||
// stop: () => void;
|
||||
// };
|
||||
|
||||
// type State = 'RUNNING' | 'STOPPED';
|
||||
|
||||
// type Fn = () => void;
|
||||
|
||||
export const useInterval = (fn, interval, autostart = true) => {
|
||||
const onUpdateRef = useRef();
|
||||
const [state, setState] = useState("RUNNING");
|
||||
const start = () => {
|
||||
setState("RUNNING");
|
||||
};
|
||||
const stop = () => {
|
||||
setState("STOPPED");
|
||||
};
|
||||
useEffect(() => {
|
||||
onUpdateRef.current = fn;
|
||||
}, [fn]);
|
||||
useEffect(() => {
|
||||
if (autostart) {
|
||||
setState("RUNNING");
|
||||
}
|
||||
}, [autostart]);
|
||||
useEffect(() => {
|
||||
let timerId;
|
||||
if (state === "RUNNING") {
|
||||
timerId = setInterval(() => {
|
||||
onUpdateRef.current?.();
|
||||
}, interval);
|
||||
} else {
|
||||
timerId && clearInterval(timerId);
|
||||
}
|
||||
return () => {
|
||||
timerId && clearInterval(timerId);
|
||||
};
|
||||
}, [interval, state]);
|
||||
return [state, { start, stop }];
|
||||
};
|
||||
|
||||
export default useInterval;
|
Loading…
Reference in New Issue
Block a user