modal
parent
315281c202
commit
5adb288565
76
App.js
76
App.js
|
|
@ -11,47 +11,16 @@ import {
|
|||
AppContext,
|
||||
AppProvider,
|
||||
Constants,
|
||||
GetData,
|
||||
GetDataFromList,
|
||||
GetMultipleData,
|
||||
Theme,
|
||||
} from "./src/utils";
|
||||
import DeviceOldScreen from "./src/Screens/DeviceOld";
|
||||
import DeviceScreen from "./src/Screens/Device";
|
||||
import { Colors } from "react-native-ui-lib";
|
||||
import SettingsScreen from "./src/Screens/Settings";
|
||||
import { useContext, useEffect } from "react";
|
||||
|
||||
Colors.loadSchemes({
|
||||
light: {
|
||||
screenBG: "transparent",
|
||||
textColor: Colors.grey10,
|
||||
moonOrSun: Colors.yellow30,
|
||||
mountainForeground: Colors.green30,
|
||||
mountainBackground: Colors.green50,
|
||||
$backgroundSuccess: Colors.green40,
|
||||
$backgroundSuccessLight: Colors.green70,
|
||||
},
|
||||
dark: {
|
||||
screenBG: Colors.grey10,
|
||||
textColor: Colors.white,
|
||||
moonOrSun: Colors.grey80,
|
||||
mountainForeground: Colors.violet10,
|
||||
mountainBackground: Colors.violet20,
|
||||
$backgroundSuccess: Colors.green40,
|
||||
$backgroundSuccessLight: Colors.green20,
|
||||
},
|
||||
});
|
||||
|
||||
Colors.setScheme("dark");
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
|
||||
const Drawer = createDrawerNavigator();
|
||||
|
||||
/*
|
||||
PRIMARY: "#e67e22",
|
||||
SECONDARY: "#9b59b6",
|
||||
*/
|
||||
|
||||
export function MyApp() {
|
||||
const appContext = useContext(AppContext);
|
||||
|
||||
|
|
@ -89,26 +58,31 @@ export function MyApp() {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<PaperProvider theme={Theme}>
|
||||
<NavigationContainer>
|
||||
<Drawer.Navigator
|
||||
screenOptions={{
|
||||
drawerStyle: {
|
||||
backgroundColor: appContext.appTheme.drawer.backgroundColor,
|
||||
},
|
||||
}}
|
||||
drawerContent={(props) => <SideBar {...props} />}
|
||||
>
|
||||
<Drawer.Screen name="Splash X3" component={DeviceScreen} />
|
||||
<Drawer.Screen name="Spinner V6" component={DeviceOldScreen} />
|
||||
<Drawer.Screen name="FAQ" component={FaqScreen} />
|
||||
<Drawer.Screen name="Feedback" component={FeedbackScreen} />
|
||||
<Drawer.Screen name="Settings" component={SettingsScreen} />
|
||||
</Drawer.Navigator>
|
||||
</NavigationContainer>
|
||||
<SafeAreaView style={{ height: "100%" }}>
|
||||
<PaperProvider>
|
||||
<NavigationContainer>
|
||||
<Drawer.Navigator
|
||||
screenOptions={{
|
||||
headerShown: false,
|
||||
drawerStyle: {
|
||||
backgroundColor: appContext.appTheme.drawer.backgroundColor,
|
||||
},
|
||||
}}
|
||||
drawerContent={(props) => <SideBar {...props} />}
|
||||
>
|
||||
<Drawer.Screen name="Turtle" component={DeviceScreen} />
|
||||
<Drawer.Screen name="FAQ" component={FaqScreen} />
|
||||
<Drawer.Screen name="Feedback" component={FeedbackScreen} />
|
||||
<Drawer.Screen name="Settings" component={SettingsScreen} />
|
||||
</Drawer.Navigator>
|
||||
</NavigationContainer>
|
||||
</PaperProvider>
|
||||
|
||||
<StatusBar style="dark" />
|
||||
</PaperProvider>
|
||||
<StatusBar
|
||||
backgroundColor={appContext.appTheme.backgroundColor}
|
||||
style={appContext.appColorScheme === "dark" ? "light" : "dark"}
|
||||
/>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
"name": "app",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@react-native-async-storage/async-storage": "^1.19.0",
|
||||
"@react-native-async-storage/async-storage": "1.17.11",
|
||||
"@react-navigation/drawer": "^6.6.3",
|
||||
"@react-navigation/native": "^6.1.7",
|
||||
"@react-navigation/native-stack": "^6.9.13",
|
||||
|
|
@ -3681,14 +3681,14 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@react-native-async-storage/async-storage": {
|
||||
"version": "1.19.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.19.0.tgz",
|
||||
"integrity": "sha512-xOFkz/FaQctD6yNJDur+WnHdSTigOs3pTz6HmfC8X8PYwcnnN3R9UxuWiwsfK8vvT2WioAxUkQt3lB7GySNA2w==",
|
||||
"version": "1.17.11",
|
||||
"resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.17.11.tgz",
|
||||
"integrity": "sha512-bzs45n5HNcDq6mxXnSsOHysZWn1SbbebNxldBXCQs8dSvF8Aor9KCdpm+TpnnGweK3R6diqsT8lFhX77VX0NFw==",
|
||||
"dependencies": {
|
||||
"merge-options": "^3.0.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react-native": "^0.0.0-0 || 0.60 - 0.72 || 1000.0.0"
|
||||
"react-native": "^0.0.0-0 || 0.60 - 0.71 || 1000.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@react-native-community/cli": {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
"web": "expo start --web"
|
||||
},
|
||||
"dependencies": {
|
||||
"@react-native-async-storage/async-storage": "^1.19.0",
|
||||
"@react-native-async-storage/async-storage": "1.17.11",
|
||||
"@react-navigation/drawer": "^6.6.3",
|
||||
"@react-navigation/native": "^6.1.7",
|
||||
"@react-navigation/native-stack": "^6.9.13",
|
||||
|
|
|
|||
|
|
@ -1,11 +1,19 @@
|
|||
import { useContext } from "react";
|
||||
import { View } from "react-native";
|
||||
import { AppContext } from "../../utils";
|
||||
|
||||
export function Divider({ style }) {
|
||||
const appContext = useContext(AppContext);
|
||||
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
style,
|
||||
{ height: 1, backgroundColor: "gray", marginVertical: 10 },
|
||||
{
|
||||
height: 1,
|
||||
backgroundColor: appContext.appTheme.divider,
|
||||
marginVertical: 10,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,19 +1,92 @@
|
|||
import { DrawerContentScrollView, DrawerItem } from "@react-navigation/drawer";
|
||||
import { useContext } from "react";
|
||||
import { Image, Text, View } from "react-native";
|
||||
import { Image, Text, TouchableOpacity, View } from "react-native";
|
||||
import { AppContext, AppStyles } from "../../utils";
|
||||
import { Divider } from "../Divider";
|
||||
import Icon from "@expo/vector-icons/MaterialCommunityIcons";
|
||||
import { useIsFocused } from "@react-navigation/native";
|
||||
|
||||
export default function Sidebar(props) {
|
||||
const appContext = useContext(AppContext);
|
||||
|
||||
const MyDrawerItem = ({ label, onPress }) => {
|
||||
const MyDrawerItem = ({
|
||||
label,
|
||||
onPress,
|
||||
iconName,
|
||||
isDevice,
|
||||
deviceName,
|
||||
deviceModel,
|
||||
routeName,
|
||||
}) => {
|
||||
const isFocused =
|
||||
props.state.index ===
|
||||
props.state.routes.findIndex((e) => e.name === routeName);
|
||||
|
||||
const focusedColor = isFocused
|
||||
? appContext.appTheme.drawer.item.activeTintColor
|
||||
: appContext.appTheme.drawer.item.inactiveTintColor;
|
||||
|
||||
return (
|
||||
<DrawerItem
|
||||
label={label}
|
||||
label={() =>
|
||||
isDevice ? (
|
||||
<>
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<View>
|
||||
<Text
|
||||
style={{
|
||||
color: focusedColor,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{deviceName}
|
||||
</Text>
|
||||
<Text style={{ color: appContext.appTheme.textSecondary }}>
|
||||
{deviceModel}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={() => console.log("Pressed")}
|
||||
style={{ right: -30 }}
|
||||
>
|
||||
<Icon
|
||||
name="power"
|
||||
color={appContext.appTheme.drawer.item.iconColor}
|
||||
size={24}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</>
|
||||
) : (
|
||||
<Text
|
||||
style={{
|
||||
color: focusedColor,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
onPress={onPress}
|
||||
icon={({ size }) => (
|
||||
<Icon
|
||||
name={iconName}
|
||||
color={appContext.appTheme.drawer.item.iconColor}
|
||||
size={size}
|
||||
/>
|
||||
)}
|
||||
inactiveTintColor={appContext.appTheme.drawer.item.inactiveTintColor}
|
||||
activeTintColor={appContext.appTheme.drawer.item.activeTintColor}
|
||||
activeBackgroundColor={
|
||||
appContext.appTheme.drawer.item.activeBackgroundColor
|
||||
}
|
||||
focused={isFocused}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -48,11 +121,15 @@ export default function Sidebar(props) {
|
|||
Geräte
|
||||
</Text>
|
||||
<DrawerContentScrollView contentContainerStyle={{ paddingTop: 0 }}>
|
||||
{["Splash X3", "Spinner V6"].map((item, i) => (
|
||||
{["Turtle"].map((item, i) => (
|
||||
<MyDrawerItem
|
||||
key={i}
|
||||
label={item}
|
||||
isDevice
|
||||
deviceName={item}
|
||||
deviceModel={"Aurora"}
|
||||
onPress={() => props.navigation.navigate(item)}
|
||||
iconName={"glass-stange"}
|
||||
routeName={item}
|
||||
/>
|
||||
))}
|
||||
</DrawerContentScrollView>
|
||||
|
|
@ -62,14 +139,20 @@ export default function Sidebar(props) {
|
|||
<MyDrawerItem
|
||||
label={"FAQ"}
|
||||
onPress={() => props.navigation.navigate("FAQ")}
|
||||
iconName="frequently-asked-questions"
|
||||
routeName="FAQ"
|
||||
/>
|
||||
<MyDrawerItem
|
||||
label={"Feedback geben"}
|
||||
onPress={() => props.navigation.navigate("Feedback")}
|
||||
iconName="comment-quote"
|
||||
routeName="Feedback"
|
||||
/>
|
||||
<MyDrawerItem
|
||||
label={"Einstellungen"}
|
||||
onPress={() => props.navigation.navigate("Settings")}
|
||||
iconName="cog"
|
||||
routeName="Settings"
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,6 @@ export default function DeviceScreen() {
|
|||
size={30}
|
||||
onPress={() => {
|
||||
console.log("Pressed light");
|
||||
Colors.setScheme("light");
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
|
|
@ -105,7 +104,6 @@ export default function DeviceScreen() {
|
|||
size={30}
|
||||
onPress={() => {
|
||||
console.log("Pressed dark");
|
||||
Colors.setScheme("dark");
|
||||
}}
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -57,7 +57,15 @@ function ColorLayer({ layerNumber, sharedColor, selected, onPress }) {
|
|||
return (
|
||||
<TouchableRipple
|
||||
borderless
|
||||
style={[{ width: 30, height: 30, borderRadius: 10, marginRight: 10 }]}
|
||||
style={[
|
||||
{
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderRadius: 10,
|
||||
marginRight: 10,
|
||||
elevation: 3,
|
||||
},
|
||||
]}
|
||||
onPress={onPress}
|
||||
rippleColor="rgba(0, 0, 0, .32)"
|
||||
>
|
||||
|
|
@ -116,11 +124,7 @@ export default function LightView() {
|
|||
const [selectedGlasLayer, setSelectedGlasLayer] = useState(1);
|
||||
const [colorSwatchesFavorites, setColorSwatchesFavorites] = useState([]);
|
||||
|
||||
/*const customSwatches = new Array(12)
|
||||
.fill("#fff")
|
||||
.map(() => colorKit.randomRgbColor().hex()); */
|
||||
|
||||
const selectedColorPickerColor = useSharedValue("#fff");
|
||||
const selectedColorPickerColor = useSharedValue("#ddd");
|
||||
const selectedColorLayer1 = useSharedValue(selectedColorPickerColor.value);
|
||||
const selectedColorLayer2 = useSharedValue(selectedColorPickerColor.value);
|
||||
const selectedColorLayer3 = useSharedValue(selectedColorPickerColor.value);
|
||||
|
|
@ -175,7 +179,11 @@ export default function LightView() {
|
|||
|
||||
<View style={{ flexDirection: "row", alignItems: "center" }}>
|
||||
<Switch value={switchState} onValueChange={(e) => setSwitchState(e)} />
|
||||
<IconButton icon="brightness-7" iconColor={"#fff"} size={20} />
|
||||
<IconButton
|
||||
icon="brightness-7"
|
||||
iconColor={appContext.appTheme.icon}
|
||||
size={20}
|
||||
/>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Incubator.Slider
|
||||
value={sliderValue}
|
||||
|
|
@ -192,7 +200,7 @@ export default function LightView() {
|
|||
</View>
|
||||
</View>
|
||||
|
||||
<Animated.View style={styles.animatedViewContainer}>
|
||||
<Animated.View>
|
||||
<ColorPicker
|
||||
value={selectedColorPickerColor.value}
|
||||
sliderThickness={25}
|
||||
|
|
@ -258,7 +266,13 @@ export default function LightView() {
|
|||
/>
|
||||
|
||||
<View style={{ marginLeft: 30, marginRight: 30 }}>
|
||||
<HueCircular containerStyle={styles.hueContainer} thumbShape="pill">
|
||||
<HueCircular
|
||||
containerStyle={{
|
||||
justifyContent: "center",
|
||||
backgroundColor: appContext.appTheme.backgroundColor,
|
||||
}}
|
||||
thumbShape="pill"
|
||||
>
|
||||
<Panel1 style={styles.panelStyle} />
|
||||
</HueCircular>
|
||||
</View>
|
||||
|
|
@ -272,7 +286,13 @@ export default function LightView() {
|
|||
{appContext.isUserExpertModeEnabled && (
|
||||
<View style={styles.previewTxtContainer}>
|
||||
<InputWidget
|
||||
inputStyle={styles.inputWidget}
|
||||
inputStyle={{
|
||||
color: appContext.appTheme.text,
|
||||
paddingVertical: 2,
|
||||
borderColor: "#707070",
|
||||
fontSize: 12,
|
||||
marginLeft: 5,
|
||||
}}
|
||||
iconColor="#707070"
|
||||
/>
|
||||
</View>
|
||||
|
|
@ -302,70 +322,21 @@ export default function LightView() {
|
|||
// <BrightnessSlider style={styles.sliderStyle} /> <Panel3 style={styles.panelStyle} />
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "#2e2e30",
|
||||
},
|
||||
scrollView: {
|
||||
width: "100%",
|
||||
padding: 20,
|
||||
},
|
||||
listAccordion: {
|
||||
borderRadius: 20,
|
||||
backgroundColor: "#3f4042",
|
||||
marginBottom: 20,
|
||||
elevation: 5,
|
||||
},
|
||||
previewTxtContainer: {
|
||||
paddingTop: 20,
|
||||
marginTop: 20,
|
||||
borderTopWidth: 1,
|
||||
borderColor: "#bebdbe",
|
||||
},
|
||||
pickerContainer: {
|
||||
alignSelf: "center",
|
||||
width: "100%",
|
||||
backgroundColor: "#3f4042",
|
||||
padding: 20,
|
||||
borderRadius: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 5,
|
||||
},
|
||||
shadowOpacity: 0.34,
|
||||
shadowRadius: 6.27,
|
||||
elevation: 5,
|
||||
},
|
||||
hueContainer: {
|
||||
justifyContent: "center",
|
||||
backgroundColor: "#3f4042",
|
||||
},
|
||||
panelStyle: {
|
||||
width: "60%",
|
||||
height: "60%",
|
||||
alignSelf: "center",
|
||||
borderRadius: 16,
|
||||
},
|
||||
/*
|
||||
panelStyle: {
|
||||
margin: 10,
|
||||
marginLeft: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 3.84,
|
||||
elevation: 5,
|
||||
},*/
|
||||
sliderStyle: {
|
||||
borderRadius: 20,
|
||||
marginTop: 20,
|
||||
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
|
|
@ -392,11 +363,4 @@ const styles = StyleSheet.create({
|
|||
marginHorizontal: 0,
|
||||
marginVertical: 0,
|
||||
},
|
||||
inputWidget: {
|
||||
color: "#fff",
|
||||
paddingVertical: 2,
|
||||
borderColor: "#707070",
|
||||
fontSize: 12,
|
||||
marginLeft: 5,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,193 +0,0 @@
|
|||
import { useState } from "react";
|
||||
import { StyleSheet, View } from "react-native";
|
||||
import { Button, IconButton, List, Switch } from "react-native-paper";
|
||||
import Animated, {
|
||||
useAnimatedStyle,
|
||||
useSharedValue,
|
||||
} from "react-native-reanimated";
|
||||
import ColorPicker, {
|
||||
Panel3,
|
||||
Swatches,
|
||||
colorKit,
|
||||
BrightnessSlider,
|
||||
InputWidget,
|
||||
} from "reanimated-color-picker";
|
||||
import MyListAccordion from "../../Components/ListAccordion";
|
||||
|
||||
export function AcrylView() {
|
||||
const customSwatches = new Array(12)
|
||||
.fill("#fff")
|
||||
.map(() => colorKit.randomRgbColor().hex());
|
||||
|
||||
const selectedColor = useSharedValue(customSwatches[0]);
|
||||
const backgroundColorStyle = useAnimatedStyle(() => ({
|
||||
backgroundColor: selectedColor.value,
|
||||
}));
|
||||
|
||||
const onColorSelect = (color) => {
|
||||
selectedColor.value = color.hex;
|
||||
};
|
||||
|
||||
const [isSwitchOn, setIsSwitchOn] = useState(false);
|
||||
|
||||
const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
|
||||
|
||||
return (
|
||||
<MyListAccordion
|
||||
listAccordions={[
|
||||
{
|
||||
title: "Farbsteuerung",
|
||||
icon: "palette",
|
||||
children: (
|
||||
<View style={{ paddingBottom: 20 }}>
|
||||
<Animated.View style={styles.animatedViewContainer}>
|
||||
<View style={styles.pickerContainer}>
|
||||
<Switch value={isSwitchOn} onValueChange={onToggleSwitch} />
|
||||
<IconButton
|
||||
icon="star-outline"
|
||||
onPress={() => console.log("press star")}
|
||||
/>
|
||||
|
||||
<ColorPicker
|
||||
value={selectedColor.value}
|
||||
sliderThickness={25}
|
||||
thumbSize={27}
|
||||
onChange={onColorSelect}
|
||||
>
|
||||
<Panel3 style={styles.panelStyle} />
|
||||
|
||||
<BrightnessSlider style={styles.sliderStyle} />
|
||||
|
||||
<Swatches
|
||||
style={styles.swatchesContainer}
|
||||
swatchStyle={styles.swatchStyle}
|
||||
colors={customSwatches}
|
||||
/>
|
||||
|
||||
<View style={styles.previewTxtContainer}>
|
||||
<InputWidget
|
||||
inputStyle={styles.inputWidget}
|
||||
iconColor="#707070"
|
||||
/>
|
||||
</View>
|
||||
</ColorPicker>
|
||||
</View>
|
||||
</Animated.View>
|
||||
</View>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Zeitsteuerung",
|
||||
icon: "clock-time-eight-outline",
|
||||
},
|
||||
{
|
||||
title: "Einstellungen",
|
||||
icon: "cog",
|
||||
children: (
|
||||
<>
|
||||
<Button
|
||||
icon="power"
|
||||
mode="contained"
|
||||
onPress={() => console.log("Pressed")}
|
||||
>
|
||||
Power1
|
||||
</Button>
|
||||
<List.Item title="Second item"></List.Item>
|
||||
</>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "#2e2e30",
|
||||
},
|
||||
scrollView: {
|
||||
width: "100%",
|
||||
padding: 20,
|
||||
},
|
||||
listAccordion: {
|
||||
borderRadius: 20,
|
||||
backgroundColor: "#3f4042",
|
||||
marginBottom: 20,
|
||||
elevation: 5,
|
||||
},
|
||||
previewTxtContainer: {
|
||||
paddingTop: 20,
|
||||
marginTop: 20,
|
||||
borderTopWidth: 1,
|
||||
borderColor: "#bebdbe",
|
||||
},
|
||||
pickerContainer: {
|
||||
alignSelf: "center",
|
||||
width: "100%",
|
||||
backgroundColor: "#3f4042",
|
||||
padding: 20,
|
||||
borderRadius: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 5,
|
||||
},
|
||||
shadowOpacity: 0.34,
|
||||
shadowRadius: 6.27,
|
||||
elevation: 5,
|
||||
},
|
||||
panelStyle: {
|
||||
margin: 10,
|
||||
marginLeft: 20,
|
||||
borderRadius: 16,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 3.84,
|
||||
elevation: 5,
|
||||
},
|
||||
sliderStyle: {
|
||||
borderRadius: 20,
|
||||
marginTop: 20,
|
||||
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 3.84,
|
||||
elevation: 5,
|
||||
},
|
||||
swatchesContainer: {
|
||||
borderTopWidth: 1,
|
||||
borderColor: "#bebdbe",
|
||||
marginTop: 20,
|
||||
paddingTop: 20,
|
||||
alignItems: "center",
|
||||
//flexWrap: "nowrap",
|
||||
gap: 10,
|
||||
},
|
||||
swatchStyle: {
|
||||
borderRadius: 20,
|
||||
height: 30,
|
||||
width: 30,
|
||||
margin: 0,
|
||||
marginBottom: 0,
|
||||
marginHorizontal: 0,
|
||||
marginVertical: 0,
|
||||
},
|
||||
inputWidget: {
|
||||
color: "#fff",
|
||||
paddingVertical: 2,
|
||||
borderColor: "#707070",
|
||||
fontSize: 12,
|
||||
marginLeft: 5,
|
||||
},
|
||||
});
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
export function AmbilightView() {
|
||||
return <></>;
|
||||
}
|
||||
|
|
@ -1,190 +0,0 @@
|
|||
import { useState } from "react";
|
||||
import {
|
||||
StyleSheet,
|
||||
SafeAreaView,
|
||||
ScrollView,
|
||||
useWindowDimensions,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { List, SegmentedButtons, useTheme } from "react-native-paper";
|
||||
import { AcrylView } from "./acryl";
|
||||
import { AmbilightView } from "./ambilight";
|
||||
import { MotorView } from "./motor";
|
||||
import { SceneMap, TabView } from "react-native-tab-view";
|
||||
|
||||
const FirstRoute = () => <AcrylView />;
|
||||
|
||||
const SecondRoute = () => (
|
||||
<View style={{ flex: 1, backgroundColor: "#673ab7" }} />
|
||||
);
|
||||
|
||||
const renderScene = SceneMap({
|
||||
first: FirstRoute,
|
||||
second: SecondRoute,
|
||||
});
|
||||
|
||||
export default function DeviceOldScreen() {
|
||||
const theme = useTheme();
|
||||
const [segmentedButtonValue, setSegmentedButtons] = useState("");
|
||||
|
||||
const layout = useWindowDimensions();
|
||||
|
||||
const [index, setIndex] = useState(0);
|
||||
const [routes] = useState([
|
||||
{ key: "first", title: "First" },
|
||||
{ key: "second", title: "Second" },
|
||||
]);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<ScrollView style={styles.scrollView}>
|
||||
<SegmentedButtons
|
||||
value={segmentedButtonValue}
|
||||
onValueChange={setSegmentedButtons}
|
||||
buttons={[
|
||||
{
|
||||
value: "acryl",
|
||||
label: "Acryl",
|
||||
checkedColor: theme.colors.mySegmentedButtonsCheckedColor,
|
||||
},
|
||||
{
|
||||
value: "ambilight",
|
||||
label: "Ambilight",
|
||||
checkedColor: theme.colors.mySegmentedButtonsCheckedColor,
|
||||
},
|
||||
{
|
||||
value: "motor",
|
||||
label: "Motor",
|
||||
checkedColor: theme.colors.mySegmentedButtonsCheckedColor,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
{segmentedButtonValue === "acryl" ? (
|
||||
<AcrylView />
|
||||
) : segmentedButtonValue === "ambilight" ? (
|
||||
<AcrylView />
|
||||
) : (
|
||||
<MotorView />
|
||||
)}
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
{segmentedButtonValue === "acryl" ? (
|
||||
<AcrylView />
|
||||
) : segmentedButtonValue === "ambilight" ? (
|
||||
<AcrylView />
|
||||
) : (
|
||||
<MotorView />
|
||||
)}
|
||||
*/
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "#2e2e30",
|
||||
},
|
||||
scrollView: {
|
||||
width: "100%",
|
||||
padding: 20,
|
||||
},
|
||||
listAccordion: {
|
||||
borderRadius: 20,
|
||||
backgroundColor: "#3f4042",
|
||||
marginBottom: 20,
|
||||
elevation: 5,
|
||||
},
|
||||
previewTxtContainer: {
|
||||
paddingTop: 20,
|
||||
marginTop: 20,
|
||||
borderTopWidth: 1,
|
||||
borderColor: "#bebdbe",
|
||||
},
|
||||
pickerContainer: {
|
||||
alignSelf: "center",
|
||||
width: "100%",
|
||||
backgroundColor: "#3f4042",
|
||||
padding: 20,
|
||||
borderRadius: 20,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 5,
|
||||
},
|
||||
shadowOpacity: 0.34,
|
||||
shadowRadius: 6.27,
|
||||
elevation: 5,
|
||||
},
|
||||
panelStyle: {
|
||||
margin: 10,
|
||||
marginLeft: 20,
|
||||
borderRadius: 16,
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 3.84,
|
||||
elevation: 5,
|
||||
},
|
||||
sliderStyle: {
|
||||
borderRadius: 20,
|
||||
marginTop: 20,
|
||||
|
||||
shadowColor: "#000",
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 2,
|
||||
},
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 3.84,
|
||||
elevation: 5,
|
||||
},
|
||||
swatchesContainer: {
|
||||
borderTopWidth: 1,
|
||||
borderColor: "#bebdbe",
|
||||
marginTop: 20,
|
||||
paddingTop: 20,
|
||||
alignItems: "center",
|
||||
//flexWrap: "nowrap",
|
||||
gap: 10,
|
||||
},
|
||||
swatchStyle: {
|
||||
borderRadius: 20,
|
||||
height: 30,
|
||||
width: 30,
|
||||
margin: 0,
|
||||
marginBottom: 0,
|
||||
marginHorizontal: 0,
|
||||
marginVertical: 0,
|
||||
},
|
||||
inputWidget: {
|
||||
color: "#fff",
|
||||
paddingVertical: 2,
|
||||
borderColor: "#707070",
|
||||
fontSize: 12,
|
||||
marginLeft: 5,
|
||||
},
|
||||
});
|
||||
|
||||
/*
|
||||
<View style={styles.container}>
|
||||
<Avatar.Icon size={82} icon="help" />
|
||||
<Text fontSize="xl" style={{ marginBottom: 10 }}>
|
||||
Kein Gerät gefunden
|
||||
</Text>
|
||||
<Button
|
||||
icon="plus"
|
||||
mode="contained-tonal"
|
||||
onPress={() => console.log("Pressed")}
|
||||
>
|
||||
Gerät verbinden
|
||||
</Button>
|
||||
</View>
|
||||
*/
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { Text } from "react-native";
|
||||
import { List } from "react-native-paper";
|
||||
import MyListAccordion from "../../Components/ListAccordion";
|
||||
|
||||
export function MotorView() {
|
||||
return (
|
||||
<MyListAccordion
|
||||
listAccordions={[{ title: "Geschwindigkeit", icon: "speedometer-slow" }]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,3 +1,16 @@
|
|||
import { useContext } from "react";
|
||||
import { AppContext } from "../../utils";
|
||||
import { View } from "react-native";
|
||||
|
||||
export default function FaqScreen() {
|
||||
return <></>;
|
||||
const appContext = useContext(AppContext);
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: appContext.appTheme.backgroundColor,
|
||||
height: "100%",
|
||||
}}
|
||||
></View>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,16 @@
|
|||
import { Fragment, createRef, useState } from "react";
|
||||
import { Slider, Switch, Text, View, Incubator } from "react-native-ui-lib";
|
||||
import { useContext } from "react";
|
||||
import { AppContext } from "../../utils";
|
||||
import { View } from "react-native";
|
||||
|
||||
export default function FeedbackScreen() {
|
||||
const [switchState, setSwitchState] = useState(false);
|
||||
const [sliderValue, setSliderValue] = useState(0);
|
||||
const appContext = useContext(AppContext);
|
||||
|
||||
return (
|
||||
<View row centerV margin-20>
|
||||
<Switch
|
||||
value={switchState}
|
||||
onValueChange={(e) => {
|
||||
setSwitchState(e);
|
||||
}}
|
||||
/>
|
||||
<View style={{ marginLeft: 20, marginRight: 20, flex: 1 }}>
|
||||
<Incubator.Slider
|
||||
value={sliderValue}
|
||||
step={1}
|
||||
disableActiveStyling
|
||||
initialMinimumValue={0}
|
||||
minimumValue={0}
|
||||
maximumValue={100}
|
||||
onValueChange={(v) => setSliderValue(v)}
|
||||
containerStyle={{
|
||||
flex: 1,
|
||||
marginHorizontal: 8,
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<Text textColor>{sliderValue}%</Text>
|
||||
</View>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: appContext.appTheme.backgroundColor,
|
||||
height: "100%",
|
||||
}}
|
||||
></View>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,14 @@
|
|||
import { useContext, useEffect, useState } from "react";
|
||||
import { Text, View } from "react-native";
|
||||
import { ScrollView } from "react-native-gesture-handler";
|
||||
import { useContext, useState } from "react";
|
||||
import { Modal, Text, TouchableOpacity, View } from "react-native";
|
||||
import { Picker, Switch } from "react-native-ui-lib";
|
||||
import Card from "../../Components/Card";
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import {
|
||||
AppContext,
|
||||
AppStyles,
|
||||
GetData,
|
||||
GetMultipleData,
|
||||
StoreData,
|
||||
} from "../../utils";
|
||||
import { AppContext, AppStyles } from "../../utils";
|
||||
import { Divider } from "../../Components/Divider";
|
||||
import Icon from "@expo/vector-icons/MaterialCommunityIcons";
|
||||
|
||||
export default function SettingsScreen() {
|
||||
const appContext = useContext(AppContext);
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
|
||||
return (
|
||||
<View
|
||||
|
|
@ -111,6 +105,31 @@ export default function SettingsScreen() {
|
|||
onValueChange={(e) => appContext.setUserIsDeveloperModeEnabled(e)}
|
||||
/>
|
||||
</View>
|
||||
<Text onPress={() => setModalVisible(true)}>Test</Text>
|
||||
|
||||
<Modal
|
||||
visible={modalVisible}
|
||||
animationType="slide"
|
||||
onRequestClose={() => {
|
||||
Alert.alert("Modal has been closed.");
|
||||
setModalVisible(!modalVisible);
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity onPress={() => setModalVisible(false)}>
|
||||
<Icon
|
||||
name="window-close"
|
||||
size={24}
|
||||
style={{ marginLeft: 10, marginTop: 20 }}
|
||||
/>
|
||||
<Text style={([AppStyles.typography16])}>
|
||||
System default
|
||||
</Text>
|
||||
<Divider />
|
||||
<Text style={[AppStyles.typography16]}>Dark</Text>
|
||||
<Divider />
|
||||
<Text style={[AppStyles.typography16]}>Light</Text>
|
||||
</TouchableOpacity>
|
||||
</Modal>
|
||||
</Card>
|
||||
</View>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,9 +0,0 @@
|
|||
import { Text, View } from "react-native";
|
||||
|
||||
export default function TestScreen() {
|
||||
return (
|
||||
<View>
|
||||
<Text>Test Screen</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
74
src/utils.js
74
src/utils.js
|
|
@ -1,7 +1,7 @@
|
|||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import { createContext, useState } from "react";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { DefaultTheme } from "react-native-paper";
|
||||
import { Colors } from "react-native-ui-lib";
|
||||
|
||||
export const Constants = {
|
||||
defaultLanguage: "de",
|
||||
|
|
@ -30,17 +30,22 @@ const DarkAppTheme = {
|
|||
},
|
||||
text: "#fff",
|
||||
textSecondary: "#ddd",
|
||||
backgroundColor: "#2e2e30",
|
||||
backgroundColor: "#21252a",
|
||||
card: {
|
||||
backgroundColor: "#3f4042",
|
||||
backgroundColor: "#2b3139",
|
||||
},
|
||||
drawer: {
|
||||
backgroundColor: "#2e2e30",
|
||||
backgroundColor: "#2b3139",
|
||||
icon: "#fff",
|
||||
item: {
|
||||
inactiveTintColor: "#fff",
|
||||
activeTintColor: "lime",
|
||||
activeTintColor: "#e67e22",
|
||||
iconColor: "#fff",
|
||||
activeBackgroundColor: "rgba(0, 0, 0, 0.1)",
|
||||
},
|
||||
},
|
||||
divider: "#ddd",
|
||||
icon: "#fff",
|
||||
};
|
||||
|
||||
const LightAppTheme = {
|
||||
|
|
@ -50,64 +55,21 @@ const LightAppTheme = {
|
|||
},
|
||||
text: "#000",
|
||||
textSecondary: "#555",
|
||||
backgroundColor: "#fff",
|
||||
backgroundColor: "#f7f7f7",
|
||||
card: {
|
||||
backgroundColor: "#fff",
|
||||
},
|
||||
drawer: {
|
||||
backgroundColor: "#fff",
|
||||
item: {
|
||||
inactiveTintColor: "#fff",
|
||||
activeTintColor: "lime",
|
||||
inactiveTintColor: "#000",
|
||||
activeTintColor: "#e67e22",
|
||||
iconColor: "#000",
|
||||
activeBackgroundColor: "rgba(0, 0, 0, 0.05)",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Theme = {
|
||||
...DefaultTheme,
|
||||
colors: {
|
||||
primary: "rgb(220, 184, 255)",
|
||||
onPrimary: "rgb(71, 12, 122)",
|
||||
primaryContainer: "rgb(95, 43, 146)",
|
||||
onPrimaryContainer: "rgb(240, 219, 255)",
|
||||
secondary: "rgb(208, 193, 218)",
|
||||
onSecondary: "rgb(54, 44, 63)",
|
||||
secondaryContainer: "#9b59b6",
|
||||
onSecondaryContainer: "rgb(237, 221, 246)",
|
||||
tertiary: "rgb(243, 183, 190)",
|
||||
onTertiary: "rgb(75, 37, 43)",
|
||||
tertiaryContainer: "rgb(101, 58, 65)",
|
||||
onTertiaryContainer: "rgb(255, 217, 221)",
|
||||
error: "rgb(255, 180, 171)",
|
||||
onError: "rgb(105, 0, 5)",
|
||||
errorContainer: "rgb(147, 0, 10)",
|
||||
onErrorContainer: "rgb(255, 180, 171)",
|
||||
background: "#2e2e30",
|
||||
onBackground: "rgb(231, 225, 229)",
|
||||
surface: "rgb(29, 27, 30)",
|
||||
onSurface: "rgb(231, 225, 229)",
|
||||
surfaceVariant: "rgb(74, 69, 78)",
|
||||
onSurfaceVariant: "rgb(204, 196, 206)",
|
||||
outline: "rgb(150, 142, 152)",
|
||||
outlineVariant: "rgb(74, 69, 78)",
|
||||
shadow: "rgb(0, 0, 0)",
|
||||
scrim: "rgb(0, 0, 0)",
|
||||
inverseSurface: "rgb(231, 225, 229)",
|
||||
inverseOnSurface: "rgb(50, 47, 51)",
|
||||
inversePrimary: "rgb(120, 69, 172)",
|
||||
elevation: {
|
||||
level0: "transparent",
|
||||
level1: "rgb(39, 35, 41)",
|
||||
level2: "rgb(44, 40, 48)",
|
||||
level3: "rgb(50, 44, 55)",
|
||||
level4: "rgb(52, 46, 57)",
|
||||
level5: "rgb(56, 49, 62)",
|
||||
},
|
||||
surfaceDisabled: "rgba(231, 225, 229, 0.12)",
|
||||
onSurfaceDisabled: "rgba(231, 225, 229, 0.38)",
|
||||
backdrop: "rgba(51, 47, 55, 0.4)",
|
||||
mySegmentedButtonsCheckedColor: "#fff",
|
||||
},
|
||||
divider: "#ddd",
|
||||
icon: "#000",
|
||||
};
|
||||
|
||||
export async function StoreData(key, value) {
|
||||
|
|
@ -167,8 +129,10 @@ export function AppProvider({ children }) {
|
|||
|
||||
if (value === "dark") {
|
||||
setAppTheme(DarkAppTheme);
|
||||
console.log("dark");
|
||||
} else {
|
||||
setAppTheme(LightAppTheme);
|
||||
console.log("light");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue