harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FooterとHeaderを移動、コードの整理

Browse Source
This commit is contained in:
harukin-expo-dev-env 2024-08-19 14:07:27 +00:00
parent a4030a8e4c
commit 4907186b55
3 changed files with 99 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/発車時刻表/LED_Vision_Component/Footer.js Normal file
View File

@ -0,0 +1,38 @@
import { View } from "react-native";
import { SwitchBox } from "./SwitchBox";
export const Footer = (props) => {
const {
trainIDSwitch,
setTrainIDSwitch,
trainDescriptionSwitch,
setTrainDescriptionSwitch,
finalSwitch,
setFinalSwitch,
} = props;
return (
<View style={{ flexDirection: "row", padding: 10, alignItems: "center" }}>
<SwitchBox
value={trainIDSwitch}
setValue={setTrainIDSwitch}
setKey="LEDSettings/trainIDSwitch"
title="種別名 / 列番"
/>
<View style={{ flex: 1 }} />
<SwitchBox
value={trainDescriptionSwitch}
setValue={setTrainDescriptionSwitch}
setKey="LEDSettings/trainDescriptionSwitch"
title="列車情報"
/>
<View style={{ flex: 1 }} />
<SwitchBox
value={finalSwitch}
setValue={setFinalSwitch}
setKey="LEDSettings/finalSwitch"
title="当駅止表示"
/>
</View>
);
};

48
components/発車時刻表/LED_Vision_Component/Header.js Normal file
View File

@ -0,0 +1,48 @@
import { View, Text } from "react-native";
import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
import LottieView from "lottie-react-native";
import { Ionicons } from "@expo/vector-icons";
export const Header = ({ getCurrentTrain }) => {
const { currentTrainLoading, setCurrentTrainLoading } = useCurrentTrain();
return (
<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>
);
};

110
components/発車時刻表/LED_vidion.js
View File

@ -1,8 +1,6 @@
import React, { useState, useEffect } from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
import LottieView from "lottie-react-native";
import { Ionicons } from "@expo/vector-icons";
import { customTrainDataDetector } from "../custom-train-data";
import { useInterval } from "../../lib/useInterval";
import { objectIsEmpty } from "../../lib/objectIsEmpty";
@ -13,7 +11,9 @@ import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
import { useAreaInfo } from "../../stateBox/useAreaInfo";
import { SheetManager } from "react-native-actions-sheet";
import { AS } from "../../storageControl";
import { SwitchBox } from "./LED_Vision_Component/SwitchBox";
import { Footer } from "./LED_Vision_Component/Footer";
import { Header } from "./LED_Vision_Component/Header";
/**
*
@ -155,11 +155,7 @@ export default function LED_vision(props) {
date.setHours(parseInt(data[0]));
date.setMinutes(parseInt(data[1]) + parseInt(delay));
if (!(newDate > date)) {
return true;
}
return false;
return !(newDate > date);
};
const [areaString, setAreaString] = useState("");
@ -168,11 +164,7 @@ export default function LED_vision(props) {
useInterval(
() => {
if (areaInfo != "") {
if (areaStringLength < move) {
setMove(0);
} else {
setMove(move + 1);
}
setMove(areaStringLength < move ? 0 : move + 1);
}
},
350,
@ -230,96 +222,20 @@ export default function LED_vision(props) {
)}
<Footer
trainIDSwitch={trainIDSwitch}
setTrainIDSwitch={setTrainIDSwitch}
trainDescriptionSwitch={trainDescriptionSwitch}
setTrainDescriptionSwitch={setTrainDescriptionSwitch}
finalSwitch={finalSwitch}
setFinalSwitch={setFinalSwitch}
{...{
trainIDSwitch,
setTrainIDSwitch,
trainDescriptionSwitch,
setTrainDescriptionSwitch,
finalSwitch,
setFinalSwitch,
}}
/>
</View>
);
}
const Header = ({ getCurrentTrain }) => {
const { currentTrainLoading, setCurrentTrainLoading } = useCurrentTrain();
return (
<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;
return (
<View style={{ flexDirection: "row", padding: 10, alignItems: "center" }}>
<SwitchBox
value={trainIDSwitch}
setValue={setTrainIDSwitch}
setKey="LEDSettings/trainIDSwitch"
title="種別名 / 列番"
/>
<View style={{ flex: 1 }} />
<SwitchBox
value={trainDescriptionSwitch}
setValue={setTrainDescriptionSwitch}
setKey="LEDSettings/trainDescriptionSwitch"
title="列車情報"
/>
<View style={{ flex: 1 }} />
<SwitchBox
value={finalSwitch}
setValue={setFinalSwitch}
setKey="LEDSettings/finalSwitch"
title="当駅止表示"
/>
</View>
);
};
const EachData = (props) => {
const {