deleted old device
parent
0aa71e38a5
commit
309bb2d249
3
App.js
3
App.js
|
|
@ -15,7 +15,6 @@ import { Suspense, lazy, useContext, useEffect } from "react";
|
||||||
import { SafeAreaView } from "react-native-safe-area-context";
|
import { SafeAreaView } from "react-native-safe-area-context";
|
||||||
import "./i18n";
|
import "./i18n";
|
||||||
import DeviceScreen from "./src/Screens/Device";
|
import DeviceScreen from "./src/Screens/Device";
|
||||||
import DeviceOldScreen from "./src/Screens/DeviceOld";
|
|
||||||
import { createStackNavigator } from "@react-navigation/stack";
|
import { createStackNavigator } from "@react-navigation/stack";
|
||||||
import { TouchableOpacity } from "react-native";
|
import { TouchableOpacity } from "react-native";
|
||||||
import MyIcon from "./src/Components/Icon";
|
import MyIcon from "./src/Components/Icon";
|
||||||
|
|
@ -310,8 +309,6 @@ function MyDrawer() {
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
<Drawer.Screen name="Old Turtle" component={DeviceOldScreen} />
|
|
||||||
|
|
||||||
<Drawer.Screen name="Help" component={HelpScreenStack} />
|
<Drawer.Screen name="Help" component={HelpScreenStack} />
|
||||||
<Drawer.Screen name="Settings" component={SettingsScreenStack} />
|
<Drawer.Screen name="Settings" component={SettingsScreenStack} />
|
||||||
</Drawer.Navigator>
|
</Drawer.Navigator>
|
||||||
|
|
|
||||||
|
|
@ -144,11 +144,6 @@ export default function Sidebar(props) {
|
||||||
routeName={device.displayName}
|
routeName={device.displayName}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
<MyDrawerItem
|
|
||||||
label={"Old Device"}
|
|
||||||
onPress={() => props.navigation.navigate("Old Turtle")}
|
|
||||||
/>
|
|
||||||
</DrawerContentScrollView>
|
</DrawerContentScrollView>
|
||||||
|
|
||||||
<View style={{ justifyContent: "flex-end" }}>
|
<View style={{ justifyContent: "flex-end" }}>
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ export default function MyTextInput({
|
||||||
const appContext = useContext(AppContext);
|
const appContext = useContext(AppContext);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={{ padding: 10 }}>
|
<View style={{ paddingLeft: 10, paddingRight: 10 }}>
|
||||||
<Text style={{ color: appContext.appTheme.textSecondary }}>
|
<Text style={{ color: appContext.appTheme.textSecondary }}>
|
||||||
{textTitle}
|
{textTitle}
|
||||||
</Text>
|
</Text>
|
||||||
|
|
|
||||||
|
|
@ -1,78 +0,0 @@
|
||||||
import { View } from "react-native";
|
|
||||||
import Card from "../../Components/Card";
|
|
||||||
import MyIcon from "../../Components/Icon";
|
|
||||||
import { useContext } from "react";
|
|
||||||
import { AppContext } from "../../utils";
|
|
||||||
import { TouchableOpacity } from "react-native-gesture-handler";
|
|
||||||
import MyColorPicker from "../../Components/ColorPicker";
|
|
||||||
|
|
||||||
export default function ColorScenesView({
|
|
||||||
deviceLedsColors,
|
|
||||||
setDeviceLedsColor,
|
|
||||||
selectedDeviceLed,
|
|
||||||
setSelectedDeviceLed,
|
|
||||||
}) {
|
|
||||||
const appContext = useContext(AppContext);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<View style={{ flexDirection: "row" }}>
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={() => {
|
|
||||||
console.log("up");
|
|
||||||
|
|
||||||
setDeviceLedsColor((arr) => {
|
|
||||||
const newArr = [...arr];
|
|
||||||
|
|
||||||
newArr[16] = "red";
|
|
||||||
|
|
||||||
return newArr;
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MyIcon
|
|
||||||
name="arrow-up-bold-box"
|
|
||||||
size={36}
|
|
||||||
color={appContext.appTheme.icon}
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity onPress={() => console.log("down")}>
|
|
||||||
<MyIcon
|
|
||||||
name="arrow-down-bold-box"
|
|
||||||
size={36}
|
|
||||||
color={appContext.appTheme.icon}
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={() => {
|
|
||||||
console.log("left", selectedDeviceLed);
|
|
||||||
|
|
||||||
if (selectedDeviceLed > 0) {
|
|
||||||
setSelectedDeviceLed((prev) => (prev = prev - 1));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MyIcon
|
|
||||||
name="arrow-left-bold-box"
|
|
||||||
size={36}
|
|
||||||
color={appContext.appTheme.icon}
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={() => {
|
|
||||||
console.log("right");
|
|
||||||
setSelectedDeviceLed((prev) => (prev = prev + 1));
|
|
||||||
|
|
||||||
console.log("sel", selectedDeviceLed);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MyIcon
|
|
||||||
name="arrow-right-bold-box"
|
|
||||||
size={36}
|
|
||||||
color={appContext.appTheme.icon}
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,260 +0,0 @@
|
||||||
import { lazy, useContext, useState } from "react";
|
|
||||||
import {
|
|
||||||
Image,
|
|
||||||
ScrollView,
|
|
||||||
StyleSheet,
|
|
||||||
View,
|
|
||||||
Text,
|
|
||||||
TouchableHighlight,
|
|
||||||
TouchableOpacity,
|
|
||||||
Dimensions,
|
|
||||||
ImageBackground,
|
|
||||||
} from "react-native";
|
|
||||||
import LightView from "./light";
|
|
||||||
import { AppContext } from "../../utils";
|
|
||||||
import MyIcon from "../../Components/Icon";
|
|
||||||
|
|
||||||
const MotorView = lazy(() => import("./motor"));
|
|
||||||
const SettingsView = lazy(() => import("./settings"));
|
|
||||||
const ColorScenesView = lazy(() => import("./colorScenes"));
|
|
||||||
|
|
||||||
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 windowDimensions = Dimensions.get("window");
|
|
||||||
|
|
||||||
let data = [];
|
|
||||||
|
|
||||||
const ledLines = 4;
|
|
||||||
const ledsPerLine = 16;
|
|
||||||
|
|
||||||
const deviceLeds = ledLines * ledsPerLine;
|
|
||||||
|
|
||||||
// setting default color for testing
|
|
||||||
for (let i = 0; i < deviceLeds; i++) {
|
|
||||||
data.push("lime");
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function DeviceOldScreen() {
|
|
||||||
const appContext = useContext(AppContext);
|
|
||||||
const [selectedView, setSelectedView] = useState(0);
|
|
||||||
const [deviceLedsColors, setDeviceLedsColor] = useState(data);
|
|
||||||
const [selectedDeviceLed, setSelectedDeviceLed] = useState(2);
|
|
||||||
|
|
||||||
const SelectedView = () => {
|
|
||||||
switch (selectedView) {
|
|
||||||
case 0:
|
|
||||||
return <LightView />;
|
|
||||||
case 2:
|
|
||||||
return <MotorView />;
|
|
||||||
case 3:
|
|
||||||
return <SettingsView />;
|
|
||||||
case 4:
|
|
||||||
return (
|
|
||||||
<ColorScenesView
|
|
||||||
deviceLedsColors={deviceLedsColors}
|
|
||||||
setDeviceLedsColor={setDeviceLedsColor}
|
|
||||||
selectedDeviceLed={selectedDeviceLed}
|
|
||||||
setSelectedDeviceLed={setSelectedDeviceLed}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
default:
|
|
||||||
<Text>Not found</Text>;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const MyButton = ({ selectedViewNumber, top, left, space, iconName }) => {
|
|
||||||
const TouchComponent =
|
|
||||||
appContext.appColorScheme === "dark"
|
|
||||||
? TouchableHighlight
|
|
||||||
: TouchableOpacity;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TouchComponent
|
|
||||||
onPress={() => setSelectedView(selectedViewNumber)}
|
|
||||||
style={[
|
|
||||||
{
|
|
||||||
position: "absolute",
|
|
||||||
backgroundColor: appContext.appTheme.card.backgroundColor,
|
|
||||||
borderRadius: 10,
|
|
||||||
padding: 8,
|
|
||||||
},
|
|
||||||
{ top: top },
|
|
||||||
left === true ? { left: space } : { right: space },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<MyIcon
|
|
||||||
name={iconName}
|
|
||||||
size={30}
|
|
||||||
color={
|
|
||||||
selectedView === selectedViewNumber
|
|
||||||
? appContext.appTheme.colors.primary
|
|
||||||
: appContext.appTheme.icon
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</TouchComponent>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const DeviceLedsColor = () => {
|
|
||||||
let elements = [];
|
|
||||||
let test = 400;
|
|
||||||
|
|
||||||
for (let l = 0; l < ledLines; l++) {
|
|
||||||
let left = 0;
|
|
||||||
let ledsElements = [];
|
|
||||||
|
|
||||||
for (let p = 0; p < ledsPerLine; p++) {
|
|
||||||
left = left + 1.5;
|
|
||||||
|
|
||||||
const ledId = l > 0 ? l * 16 + p : p;
|
|
||||||
|
|
||||||
const deviceLedColor =
|
|
||||||
l > 0 ? deviceLedsColors[l * 16 + p] : deviceLedsColors[p];
|
|
||||||
|
|
||||||
ledsElements.push(
|
|
||||||
<View
|
|
||||||
key={`${l}-${p}`}
|
|
||||||
style={{
|
|
||||||
width: 0.1 * (test / 16),
|
|
||||||
height: 0.1 * (test / 16),
|
|
||||||
backgroundColor:
|
|
||||||
ledId === selectedDeviceLed ? "red" : deviceLedColor,
|
|
||||||
borderRadius: 0.5,
|
|
||||||
left: left,
|
|
||||||
marginRight:
|
|
||||||
windowDimensions.width > 360
|
|
||||||
? 0.27 * (test / 16)
|
|
||||||
: 0.26 * (test / 16),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
elements.push(
|
|
||||||
<View
|
|
||||||
key={`v-${l}`}
|
|
||||||
style={{
|
|
||||||
flexDirection: "row",
|
|
||||||
justifyContent: "center",
|
|
||||||
top: 118.5 + l,
|
|
||||||
right: "8%",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{ledsElements}
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return <>{elements}</>;
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
height: "100%",
|
|
||||||
backgroundColor: appContext.appTheme.backgroundColor,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{selectedView === 4 && (
|
|
||||||
<View>
|
|
||||||
<ImageBackground
|
|
||||||
source={require("../../../assets/image19.png")}
|
|
||||||
resizeMode="contain"
|
|
||||||
style={{ height: 250 }}
|
|
||||||
>
|
|
||||||
<DeviceLedsColor />
|
|
||||||
</ImageBackground>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{appContext.isUserDeveloperModeEnabled ? (
|
|
||||||
<>
|
|
||||||
{selectedView !== 4 && (
|
|
||||||
<Image
|
|
||||||
source={require("../../../assets/device.png")}
|
|
||||||
style={styles.image}
|
|
||||||
resizeMode="contain"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{selectedView !== 4 && (
|
|
||||||
<View style={[styles.image, { backgroundColor: "#ddd" }]} />
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<MyButton
|
|
||||||
iconName={"lightbulb-on-outline"}
|
|
||||||
left
|
|
||||||
selectedViewNumber={0}
|
|
||||||
space={spaceToSide}
|
|
||||||
top={topFirst}
|
|
||||||
/>
|
|
||||||
<MyButton
|
|
||||||
iconName={"television-ambient-light"}
|
|
||||||
left
|
|
||||||
selectedViewNumber={1}
|
|
||||||
space={spaceToSide}
|
|
||||||
top={topSecond}
|
|
||||||
/>
|
|
||||||
<MyButton
|
|
||||||
iconName={"axis-z-rotate-counterclockwise"}
|
|
||||||
left
|
|
||||||
selectedViewNumber={2}
|
|
||||||
space={spaceToSide}
|
|
||||||
top={topThird}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<MyButton
|
|
||||||
iconName={"cog-outline"}
|
|
||||||
left={false}
|
|
||||||
selectedViewNumber={3}
|
|
||||||
space={spaceToSide}
|
|
||||||
top={topFirst}
|
|
||||||
/>
|
|
||||||
<MyButton
|
|
||||||
iconName={"palette-outline"}
|
|
||||||
left={false}
|
|
||||||
selectedViewNumber={4}
|
|
||||||
space={spaceToSide}
|
|
||||||
top={topSecond}
|
|
||||||
/>
|
|
||||||
<MyButton
|
|
||||||
iconName={"rotate-3d-variant"}
|
|
||||||
left={false}
|
|
||||||
selectedViewNumber={5}
|
|
||||||
space={spaceToSide}
|
|
||||||
top={topThird}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,416 +0,0 @@
|
||||||
import { useContext, useState } from "react";
|
|
||||||
import {
|
|
||||||
StyleSheet,
|
|
||||||
Text,
|
|
||||||
TouchableOpacity,
|
|
||||||
View,
|
|
||||||
TouchableHighlight,
|
|
||||||
} from "react-native";
|
|
||||||
import Animated, {
|
|
||||||
useAnimatedStyle,
|
|
||||||
useSharedValue,
|
|
||||||
} from "react-native-reanimated";
|
|
||||||
import ColorPicker, {
|
|
||||||
Swatches,
|
|
||||||
InputWidget,
|
|
||||||
HueCircular,
|
|
||||||
Panel1,
|
|
||||||
Panel3,
|
|
||||||
BrightnessSlider,
|
|
||||||
OpacitySlider,
|
|
||||||
HueSlider,
|
|
||||||
SaturationSlider,
|
|
||||||
} from "reanimated-color-picker";
|
|
||||||
import { AppContext, AppStyles, IsPlatformIos } from "../../utils";
|
|
||||||
import Card from "../../Components/Card";
|
|
||||||
import MySwitch from "../../Components/Switch";
|
|
||||||
import MyIcon from "../../Components/Icon";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import MySlider from "../../Components/Slider";
|
|
||||||
import MyPickerModal from "../../Components/Modal";
|
|
||||||
|
|
||||||
const colorModePickerOptions = [
|
|
||||||
{ label: "Pulse", value: "pulse" },
|
|
||||||
{ label: "Random", value: "random" },
|
|
||||||
{ label: "Rainbow", value: "rainbow" },
|
|
||||||
];
|
|
||||||
|
|
||||||
function ColorLayer({ layerNumber, sharedColor, selected, onPress }) {
|
|
||||||
const backgroundColorStyle = useAnimatedStyle(() => {
|
|
||||||
return {
|
|
||||||
backgroundColor: sharedColor.value,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
const contrastColorText = useAnimatedStyle(() => {
|
|
||||||
const getContrastRatio = (hexColor) => {
|
|
||||||
const hex = hexColor.replace("#", "");
|
|
||||||
const r = parseInt(hex.substr(0, 2), 16);
|
|
||||||
const g = parseInt(hex.substr(2, 2), 16);
|
|
||||||
const b = parseInt(hex.substr(4, 2), 16);
|
|
||||||
const luminance = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
|
|
||||||
return luminance > 0.5 ? "#000000" : "#ffffff";
|
|
||||||
};
|
|
||||||
|
|
||||||
let obj = {};
|
|
||||||
|
|
||||||
obj.color = getContrastRatio(sharedColor.value);
|
|
||||||
|
|
||||||
return obj;
|
|
||||||
});
|
|
||||||
|
|
||||||
const contrastColorBorder = useAnimatedStyle(() => {
|
|
||||||
const getContrastRatio = (hexColor) => {
|
|
||||||
const hex = hexColor.replace("#", "");
|
|
||||||
const r = parseInt(hex.substr(0, 2), 16);
|
|
||||||
const g = parseInt(hex.substr(2, 2), 16);
|
|
||||||
const b = parseInt(hex.substr(4, 2), 16);
|
|
||||||
const luminance = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
|
|
||||||
return luminance > 0.5 ? "#000000" : "#ffffff";
|
|
||||||
};
|
|
||||||
|
|
||||||
let obj = {};
|
|
||||||
|
|
||||||
//obj.color = getContrastRatio(sharedColor.value);
|
|
||||||
|
|
||||||
if (selected === true) {
|
|
||||||
obj.borderColor = getContrastRatio(sharedColor.value);
|
|
||||||
obj.borderBottomWidth = 2;
|
|
||||||
} else {
|
|
||||||
obj.borderBottomWidth = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
return obj;
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TouchableHighlight
|
|
||||||
style={[
|
|
||||||
{
|
|
||||||
width: 30,
|
|
||||||
height: 30,
|
|
||||||
borderRadius: 10,
|
|
||||||
marginRight: 10,
|
|
||||||
elevation: 3,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
onPress={onPress}
|
|
||||||
rippleColor="rgba(0, 0, 0, .32)"
|
|
||||||
>
|
|
||||||
<Animated.View
|
|
||||||
style={[
|
|
||||||
{
|
|
||||||
width: "100%",
|
|
||||||
height: "100%",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
borderRadius: 10,
|
|
||||||
},
|
|
||||||
backgroundColorStyle,
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Animated.View style={contrastColorBorder}>
|
|
||||||
<Animated.Text
|
|
||||||
style={[
|
|
||||||
{
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: "bold",
|
|
||||||
},
|
|
||||||
contrastColorText,
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{layerNumber}
|
|
||||||
</Animated.Text>
|
|
||||||
</Animated.View>
|
|
||||||
</Animated.View>
|
|
||||||
</TouchableHighlight>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function LightView() {
|
|
||||||
const appContext = useContext(AppContext);
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [switchState, setSwitchState] = useState(false);
|
|
||||||
const [selectedGlasLayer, setSelectedGlasLayer] = useState(1);
|
|
||||||
const [colorSwatchesFavorites, setColorSwatchesFavorites] = useState([]);
|
|
||||||
const [modalDeviceColorModeVisible, setModalDeviceColorModeVisible] =
|
|
||||||
useState(false);
|
|
||||||
const [selectedDeviceColorMode, setSelectedDeviceColorMode] = useState("");
|
|
||||||
|
|
||||||
const selectedColorPickerColor = useSharedValue("#ddd");
|
|
||||||
const selectedColorLayer1 = useSharedValue(selectedColorPickerColor.value);
|
|
||||||
const selectedColorLayer2 = useSharedValue(selectedColorPickerColor.value);
|
|
||||||
const selectedColorLayer3 = useSharedValue(selectedColorPickerColor.value);
|
|
||||||
const selectedColorLayer4 = useSharedValue(selectedColorPickerColor.value);
|
|
||||||
|
|
||||||
const [sliderBrightness, setSliderBrightness] = useState(10);
|
|
||||||
|
|
||||||
const onColorSelect = (color) => {
|
|
||||||
selectedColorPickerColor.value = color.hex;
|
|
||||||
|
|
||||||
switch (selectedGlasLayer) {
|
|
||||||
case 1:
|
|
||||||
selectedColorLayer1.value = color.hex;
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
selectedColorLayer2.value = color.hex;
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
selectedColorLayer3.value = color.hex;
|
|
||||||
break;
|
|
||||||
case 4:
|
|
||||||
selectedColorLayer4.value = color.hex;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Card>
|
|
||||||
<TouchableOpacity onPress={() => setModalDeviceColorModeVisible(true)}>
|
|
||||||
<View
|
|
||||||
style={[
|
|
||||||
{
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
},
|
|
||||||
IsPlatformIos() && { marginBottom: 10 },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<View>
|
|
||||||
<Text style={{ color: appContext.appTheme.text }}>
|
|
||||||
{t("screens.device.light.pickerColorModeText")}
|
|
||||||
</Text>
|
|
||||||
<Text style={{ color: appContext.appTheme.colors.primary }}>
|
|
||||||
{selectedDeviceColorMode === ""
|
|
||||||
? t("screens.device.light.pickerColorModePlaceholder")
|
|
||||||
: colorModePickerOptions.find(
|
|
||||||
(item) => item.value === selectedDeviceColorMode
|
|
||||||
).label}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
<MyIcon
|
|
||||||
name="chevron-down"
|
|
||||||
size={24}
|
|
||||||
color={appContext.appTheme.icon}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</TouchableOpacity>
|
|
||||||
|
|
||||||
<MyPickerModal
|
|
||||||
searchFilter
|
|
||||||
isOpen={modalDeviceColorModeVisible}
|
|
||||||
setIsOpen={setModalDeviceColorModeVisible}
|
|
||||||
items={colorModePickerOptions.map((item) => {
|
|
||||||
return {
|
|
||||||
label: item.label,
|
|
||||||
onPress: () => setSelectedDeviceColorMode(item.value),
|
|
||||||
selected: selectedDeviceColorMode === item.value,
|
|
||||||
};
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<View
|
|
||||||
style={[
|
|
||||||
{ flexDirection: "row", alignItems: "center" },
|
|
||||||
IsPlatformIos() && { gap: 10 },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<MySwitch
|
|
||||||
value={switchState}
|
|
||||||
onValueChange={(e) => setSwitchState(e)}
|
|
||||||
/>
|
|
||||||
<MyIcon
|
|
||||||
name={
|
|
||||||
sliderBrightness < 1
|
|
||||||
? "brightness-5"
|
|
||||||
: sliderBrightness < 40
|
|
||||||
? "brightness-4"
|
|
||||||
: sliderBrightness < 80
|
|
||||||
? "brightness-6"
|
|
||||||
: "brightness-7"
|
|
||||||
}
|
|
||||||
color={appContext.appTheme.icon}
|
|
||||||
size={20}
|
|
||||||
/>
|
|
||||||
<MySlider
|
|
||||||
style={{ flex: 1 }}
|
|
||||||
minimumValue={0}
|
|
||||||
maximumValue={100}
|
|
||||||
value={sliderBrightness}
|
|
||||||
onValueChange={(v) => setSliderBrightness(v)}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<Animated.View>
|
|
||||||
<ColorPicker
|
|
||||||
value={selectedColorPickerColor.value}
|
|
||||||
thumbSize={26}
|
|
||||||
onChange={onColorSelect}
|
|
||||||
>
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
justifyContent: "center",
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
marginBottom: 10,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ColorLayer
|
|
||||||
layerNumber={1}
|
|
||||||
sharedColor={selectedColorLayer1}
|
|
||||||
selected={selectedGlasLayer === 1}
|
|
||||||
onPress={() => {
|
|
||||||
setSelectedGlasLayer(1);
|
|
||||||
selectedColorPickerColor.value = selectedColorLayer1.value;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ColorLayer
|
|
||||||
layerNumber={2}
|
|
||||||
sharedColor={selectedColorLayer2}
|
|
||||||
selected={selectedGlasLayer === 2}
|
|
||||||
onPress={() => {
|
|
||||||
setSelectedGlasLayer(2);
|
|
||||||
selectedColorPickerColor.value = selectedColorLayer2.value;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ColorLayer
|
|
||||||
layerNumber={3}
|
|
||||||
sharedColor={selectedColorLayer3}
|
|
||||||
selected={selectedGlasLayer === 3}
|
|
||||||
onPress={() => {
|
|
||||||
setSelectedGlasLayer(3);
|
|
||||||
selectedColorPickerColor.value = selectedColorLayer3.value;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<ColorLayer
|
|
||||||
layerNumber={4}
|
|
||||||
sharedColor={selectedColorLayer4}
|
|
||||||
selected={selectedGlasLayer === 4}
|
|
||||||
onPress={() => {
|
|
||||||
setSelectedGlasLayer(4);
|
|
||||||
selectedColorPickerColor.value = selectedColorLayer4.value;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<TouchableOpacity
|
|
||||||
onPress={() =>
|
|
||||||
setColorSwatchesFavorites([
|
|
||||||
...colorSwatchesFavorites,
|
|
||||||
selectedColorPickerColor.value,
|
|
||||||
])
|
|
||||||
}
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
top: 20,
|
|
||||||
right: 0,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MyIcon
|
|
||||||
name="star-outline"
|
|
||||||
color={appContext.appTheme.icon}
|
|
||||||
size={20}
|
|
||||||
/>
|
|
||||||
</TouchableOpacity>
|
|
||||||
|
|
||||||
<View
|
|
||||||
style={{ flexDirection: "row", justifyContent: "space-evenly" }}
|
|
||||||
>
|
|
||||||
<Panel3 style={{ width: 200 }} />
|
|
||||||
|
|
||||||
<BrightnessSlider style={styles.sliderStyle} vertical reverse />
|
|
||||||
|
|
||||||
<OpacitySlider style={styles.sliderStyle} vertical reverse />
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<Swatches
|
|
||||||
style={styles.swatchesContainer}
|
|
||||||
swatchStyle={styles.swatchStyle}
|
|
||||||
colors={colorSwatchesFavorites}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{appContext.isUserExpertModeEnabled && (
|
|
||||||
<View style={styles.previewTxtContainer}>
|
|
||||||
<InputWidget
|
|
||||||
inputStyle={{
|
|
||||||
color: appContext.appTheme.text,
|
|
||||||
paddingVertical: 2,
|
|
||||||
borderColor: "#707070",
|
|
||||||
fontSize: 12,
|
|
||||||
marginLeft: 5,
|
|
||||||
}}
|
|
||||||
iconColor="#707070"
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
)}
|
|
||||||
</ColorPicker>
|
|
||||||
</Animated.View>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<View style={{ flexDirection: "row", alignItems: "center" }}>
|
|
||||||
<MyIcon
|
|
||||||
name="brightness-6"
|
|
||||||
size={24}
|
|
||||||
color={appContext.appTheme.icon}
|
|
||||||
/>
|
|
||||||
<Text style={{ color: appContext.appTheme.text, marginLeft: 10 }}>
|
|
||||||
Auto brightness
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<MySwitch
|
|
||||||
value={switchState}
|
|
||||||
onValueChange={(e) => setSwitchState(e)}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</Card>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
previewTxtContainer: {
|
|
||||||
paddingTop: 20,
|
|
||||||
marginTop: 20,
|
|
||||||
borderTopWidth: 1,
|
|
||||||
borderColor: "#bebdbe",
|
|
||||||
},
|
|
||||||
panelStyle: {
|
|
||||||
width: "60%",
|
|
||||||
height: "60%",
|
|
||||||
alignSelf: "center",
|
|
||||||
borderRadius: 16,
|
|
||||||
},
|
|
||||||
sliderStyle: {
|
|
||||||
borderRadius: 20,
|
|
||||||
marginTop: 20,
|
|
||||||
width: 10,
|
|
||||||
},
|
|
||||||
swatchesContainer: {
|
|
||||||
borderTopWidth: 1,
|
|
||||||
borderColor: "#bebdbe",
|
|
||||||
marginTop: 20,
|
|
||||||
paddingTop: 20,
|
|
||||||
justifyContent: "center",
|
|
||||||
gap: 10,
|
|
||||||
},
|
|
||||||
swatchStyle: {
|
|
||||||
borderRadius: 20,
|
|
||||||
height: 25,
|
|
||||||
width: 25,
|
|
||||||
margin: 0,
|
|
||||||
marginBottom: 0,
|
|
||||||
marginHorizontal: 0,
|
|
||||||
marginVertical: 0,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
@ -1,33 +0,0 @@
|
||||||
import { View } from "react-native";
|
|
||||||
import Card from "../../Components/Card";
|
|
||||||
import { useContext, useState } from "react";
|
|
||||||
import MySwitch from "../../Components/Switch";
|
|
||||||
import MySlider from "../../Components/Slider";
|
|
||||||
import { AppContext, IsPlatformIos } from "../../utils";
|
|
||||||
import MyIcon from "../../Components/Icon";
|
|
||||||
|
|
||||||
export default function MotorView() {
|
|
||||||
const appContext = useContext(AppContext);
|
|
||||||
const [switchState, setSwitchState] = useState(false);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card>
|
|
||||||
<View
|
|
||||||
style={[
|
|
||||||
{ flexDirection: "row", alignItems: "center" },
|
|
||||||
IsPlatformIos() && { gap: 10 },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<MySwitch
|
|
||||||
value={switchState}
|
|
||||||
onValueChange={(e) => setSwitchState(e)}
|
|
||||||
/>
|
|
||||||
<MyIcon name="fan" color={appContext.appTheme.icon} size={20} />
|
|
||||||
|
|
||||||
<View style={{ flex: 1 }}>
|
|
||||||
<MySlider />
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,174 +0,0 @@
|
||||||
import { Text, TouchableOpacity, View } from "react-native";
|
|
||||||
import Card from "../../Components/Card";
|
|
||||||
import { useContext, useState } from "react";
|
|
||||||
import { AppContext, AppStyles } from "../../utils";
|
|
||||||
import { Divider } from "../../Components/Divider";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import MySwitch from "../../Components/Switch";
|
|
||||||
import MyIcon from "../../Components/Icon";
|
|
||||||
import { MyTextInputModal } from "../../Components/Modal";
|
|
||||||
|
|
||||||
export default function SettingsView() {
|
|
||||||
const appContext = useContext(AppContext);
|
|
||||||
const { t } = useTranslation();
|
|
||||||
const [modalTextInputVisible, setModalTextInputVisible] = useState(false);
|
|
||||||
const [switchState, setSwitchState] = useState(false);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Card>
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
AppStyles.typography20,
|
|
||||||
{
|
|
||||||
color: appContext.appTheme.text,
|
|
||||||
marginBottom: 10,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{t("screens.device.settings.settingsTitle")}
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<View style={{ width: "80%" }}>
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
AppStyles.typography16,
|
|
||||||
{ color: appContext.appTheme.text },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{t("screens.device.settings.wifiStandByTitle")}
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
AppStyles.typography14,
|
|
||||||
{ color: appContext.appTheme.textSecondary },
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{t("screens.device.settings.wifiStandByDescription")}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
<MySwitch
|
|
||||||
value={switchState}
|
|
||||||
onValueChange={(e) => setSwitchState(e)}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
AppStyles.typography20,
|
|
||||||
{
|
|
||||||
color: appContext.appTheme.text,
|
|
||||||
marginBottom: 10,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{t("screens.device.settings.deviceInformationText")}
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<View>
|
|
||||||
<Text
|
|
||||||
style={
|
|
||||||
([AppStyles.typography16], { color: appContext.appTheme.text })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t("screens.device.settings.deviceNameText")}
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
style={
|
|
||||||
([AppStyles.typography14],
|
|
||||||
{ color: appContext.appTheme.textSecondary })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Turtle
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<TouchableOpacity onPress={() => setModalTextInputVisible(true)}>
|
|
||||||
<MyIcon name="pencil" size={18} color={appContext.appTheme.icon} />
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<MyTextInputModal
|
|
||||||
isOpen={modalTextInputVisible}
|
|
||||||
setIsOpen={setModalTextInputVisible}
|
|
||||||
onTextInputSave={() => console.log("save")}
|
|
||||||
modalTitle={t("screens.device.settings.deviceNameText")}
|
|
||||||
inputTitle={t("screens.device.settings.deviceNameText")}
|
|
||||||
inputDescription={t(
|
|
||||||
"screens.device.settings.modalTextInputDeviceNameDescription"
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<Text
|
|
||||||
style={
|
|
||||||
([AppStyles.typography16], { color: appContext.appTheme.text })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t("screens.device.settings.deviceModelText")}
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
style={
|
|
||||||
([AppStyles.typography14],
|
|
||||||
{ color: appContext.appTheme.textSecondary })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Shimmex Aurora
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<Text
|
|
||||||
style={
|
|
||||||
([AppStyles.typography16], { color: appContext.appTheme.text })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t("screens.device.settings.deviceFirmwareVersionText")}
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
style={
|
|
||||||
([AppStyles.typography14],
|
|
||||||
{ color: appContext.appTheme.textSecondary })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
1.0.1
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
<Text
|
|
||||||
style={
|
|
||||||
([AppStyles.typography16], { color: appContext.appTheme.text })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{t("screens.device.settings.deviceLastUpdatedText")}
|
|
||||||
</Text>
|
|
||||||
<Text
|
|
||||||
style={
|
|
||||||
([AppStyles.typography14],
|
|
||||||
{ color: appContext.appTheme.textSecondary })
|
|
||||||
}
|
|
||||||
>
|
|
||||||
11.07.2023 um 20:33 Uhr
|
|
||||||
</Text>
|
|
||||||
</Card>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue