駅名標の動作が不完全だった問題を修正

This commit is contained in:
harukin-OneMix4 2022-11-19 00:36:56 +09:00
parent 06c5102225
commit 448b0696ac
4 changed files with 150 additions and 79 deletions

View File

@ -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();

View File

@ -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={{

View File

@ -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
View 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;