140 lines
3.7 KiB
JavaScript
140 lines
3.7 KiB
JavaScript
import { useContext, useEffect, useState } from "react";
|
|
import { Image, ScrollView, StyleSheet, View, Text } from "react-native";
|
|
import { IconButton } from "react-native-paper";
|
|
import { Colors } from "react-native-ui-lib";
|
|
import LightView from "./light";
|
|
import { AppContext, GetData } from "../../utils";
|
|
import MotorView from "./motor";
|
|
import SettingsView from "./settings";
|
|
|
|
const spaceToSide = 10; // left and right
|
|
const top = 35;
|
|
const spaceBetweenButtons = 60;
|
|
|
|
const topFirst = top;
|
|
const topSecond = top + spaceBetweenButtons;
|
|
const topThird = top + 2 * spaceBetweenButtons;
|
|
|
|
const iconButtonActiveColor = "#e67e22";
|
|
const iconButtonNotActiveColor = "#fff";
|
|
|
|
export default function DeviceScreen() {
|
|
const appContext = useContext(AppContext);
|
|
const [selectedView, setSelectedView] = useState(0);
|
|
|
|
const SelectedView = () => {
|
|
switch (selectedView) {
|
|
case 0:
|
|
return <LightView />;
|
|
case 2:
|
|
return <MotorView />;
|
|
case 3:
|
|
return <SettingsView />;
|
|
default:
|
|
<Text>Not found</Text>;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
height: "100%",
|
|
backgroundColor: appContext.appTheme.backgroundColor,
|
|
}}
|
|
>
|
|
{appContext.isUserDeveloperModeEnabled ? (
|
|
<Image
|
|
source={require("../../../assets/image.png")}
|
|
style={styles.image}
|
|
/>
|
|
) : (
|
|
<View style={[styles.image, { backgroundColor: "#ddd" }]} />
|
|
)}
|
|
|
|
<IconButton
|
|
icon="lightbulb-on-outline"
|
|
iconColor={
|
|
selectedView === 0 ? iconButtonActiveColor : iconButtonNotActiveColor
|
|
}
|
|
style={[styles.iconButton, { top: topFirst, left: spaceToSide }]}
|
|
size={30}
|
|
onPress={() => setSelectedView(0)}
|
|
/>
|
|
<IconButton
|
|
icon="television-ambient-light"
|
|
iconColor={
|
|
selectedView === 1 ? iconButtonActiveColor : iconButtonNotActiveColor
|
|
}
|
|
style={[styles.iconButton, { top: topSecond, left: spaceToSide }]}
|
|
size={30}
|
|
onPress={() => setSelectedView(1)}
|
|
/>
|
|
<IconButton
|
|
icon="axis-z-rotate-counterclockwise"
|
|
iconColor={
|
|
selectedView === 2 ? iconButtonActiveColor : iconButtonNotActiveColor
|
|
}
|
|
style={[styles.iconButton, { top: topThird, left: spaceToSide }]}
|
|
size={30}
|
|
onPress={() => setSelectedView(2)}
|
|
/>
|
|
|
|
<IconButton
|
|
icon="cog-outline"
|
|
iconColor={
|
|
selectedView === 3 ? iconButtonActiveColor : iconButtonNotActiveColor
|
|
}
|
|
style={[styles.iconButton, { top: topFirst, right: spaceToSide }]}
|
|
size={30}
|
|
onPress={() => setSelectedView(3)}
|
|
/>
|
|
<IconButton
|
|
icon="palette-outline"
|
|
iconColor={"#fff"}
|
|
style={[styles.iconButton, { top: topSecond, right: spaceToSide }]}
|
|
size={30}
|
|
onPress={() => {
|
|
console.log("Pressed light");
|
|
Colors.setScheme("light");
|
|
}}
|
|
/>
|
|
<IconButton
|
|
icon="rotate-3d-variant"
|
|
iconColor={"#fff"}
|
|
style={[styles.iconButton, { top: topThird, right: spaceToSide }]}
|
|
size={30}
|
|
onPress={() => {
|
|
console.log("Pressed dark");
|
|
Colors.setScheme("dark");
|
|
}}
|
|
/>
|
|
|
|
<ScrollView style={{ height: "100%" }}>
|
|
<SelectedView />
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: "#2e2e30",
|
|
},
|
|
scrollView: {
|
|
width: "100%",
|
|
padding: 20,
|
|
},
|
|
image: {
|
|
width: "100%",
|
|
height: 250,
|
|
},
|
|
iconButton: {
|
|
position: "absolute",
|
|
backgroundColor: "#333333",
|
|
borderRadius: 10,
|
|
},
|
|
});
|