518 lines
11 KiB
JavaScript
518 lines
11 KiB
JavaScript
import AsyncStorage from "@react-native-async-storage/async-storage";
|
|
import { createContext, createRef, useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
Appearance,
|
|
Platform,
|
|
StyleSheet,
|
|
Vibration,
|
|
View,
|
|
} from "react-native";
|
|
import uuid from "react-native-uuid";
|
|
|
|
export const Constants = {
|
|
defaultLanguage: "de",
|
|
languages: [
|
|
{
|
|
name: "de",
|
|
label: "Deutsch",
|
|
},
|
|
{
|
|
name: "en",
|
|
label: "English",
|
|
},
|
|
],
|
|
actionType: {
|
|
layers: 0,
|
|
ambilight: 1,
|
|
motor: 2,
|
|
},
|
|
};
|
|
|
|
export const AppStyles = StyleSheet.create({
|
|
typography20: {
|
|
fontSize: 20,
|
|
fontWeight: "bold",
|
|
lineHeight: 24,
|
|
},
|
|
typography16: {
|
|
fontSize: 16,
|
|
lineHeight: 24,
|
|
},
|
|
typography14: {
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
},
|
|
Shadow: {
|
|
elevation: 2, // only android
|
|
shadowColor: "#000", // only ios
|
|
shadowOffset: { width: 0, height: 1 }, // only ios
|
|
shadowOpacity: 0.2, // only ios
|
|
shadowRadius: 1, // only ios
|
|
},
|
|
modal: {
|
|
flex: 1,
|
|
padding: 10,
|
|
},
|
|
});
|
|
|
|
const DarkAppTheme = {
|
|
_id: "dark", // needed for status bar
|
|
colors: {
|
|
primary: "#e67e22",
|
|
secondary: "#9b59b6",
|
|
},
|
|
text: "#fff",
|
|
textSecondary: "#ddd",
|
|
backgroundColor: "#21252a",
|
|
card: {
|
|
backgroundColor: "#2b3139",
|
|
},
|
|
drawer: {
|
|
backgroundColor: "#2b3139",
|
|
icon: "#fff",
|
|
item: {
|
|
inactiveTintColor: "#fff",
|
|
activeTintColor: "#e67e22",
|
|
iconColor: "#fff",
|
|
activeBackgroundColor: "rgba(0, 0, 0, 0.1)",
|
|
},
|
|
},
|
|
divider: "#434443",
|
|
textInputBottomColor: "#b2b3b3",
|
|
icon: "#ddd",
|
|
switch: {
|
|
trackColorTrue: "#01d064",
|
|
trackColorFalse: "#b2b3b3",
|
|
thumbColorTrue: "#f4f3f4",
|
|
thumbColorFalse: "#f4f3f4",
|
|
ios_backgroundColor: "#3e3e3e",
|
|
},
|
|
slider: {
|
|
minimumTrackTintColor: "#e67e22",
|
|
maximumTrackTintColor: "#fff",
|
|
thumbTintColor: "#e67e22",
|
|
},
|
|
tag: {
|
|
red: {
|
|
backgroundColor: "#3d0801",
|
|
text: "#fe4f50",
|
|
borderColor: "#760b01",
|
|
},
|
|
},
|
|
};
|
|
|
|
const LightAppTheme = {
|
|
_id: "light", // needed for status bar
|
|
colors: {
|
|
primary: "#e67e22",
|
|
secondary: "#9b59b6",
|
|
},
|
|
text: "#000",
|
|
textSecondary: "#555",
|
|
backgroundColor: "#f7f7f7",
|
|
card: {
|
|
backgroundColor: "#fff",
|
|
},
|
|
drawer: {
|
|
backgroundColor: "#fff",
|
|
item: {
|
|
inactiveTintColor: "#000",
|
|
activeTintColor: "#e67e22",
|
|
iconColor: "#000",
|
|
activeBackgroundColor: "rgba(0, 0, 0, 0.05)",
|
|
},
|
|
},
|
|
divider: "#ddd",
|
|
textInputBottomColor: "#b2b3b3",
|
|
icon: "#000",
|
|
switch: {
|
|
trackColorTrue: "#01d064",
|
|
trackColorFalse: "#b2b3b3",
|
|
thumbColorTrue: "#f4f3f4",
|
|
thumbColorFalse: "#f4f3f4",
|
|
ios_backgroundColor: "#3e3e3e",
|
|
},
|
|
slider: {
|
|
minimumTrackTintColor: "#e67e22",
|
|
maximumTrackTintColor: "#555",
|
|
thumbTintColor: "#e67e22",
|
|
},
|
|
tag: {
|
|
red: {
|
|
backgroundColor: "#fff3f1",
|
|
text: "#ff6060",
|
|
borderColor: "#fecdc7",
|
|
},
|
|
},
|
|
};
|
|
|
|
export async function StoreData(key, value) {
|
|
try {
|
|
const jsonValue = JSON.stringify(value);
|
|
await AsyncStorage.setItem(key, jsonValue);
|
|
} catch (e) {
|
|
console.log("err", e);
|
|
}
|
|
}
|
|
|
|
export async function GetData(key) {
|
|
try {
|
|
const jsonValue = await AsyncStorage.getItem(key);
|
|
return jsonValue != null ? JSON.parse(jsonValue) : null;
|
|
} catch (e) {
|
|
console.log("err", e);
|
|
}
|
|
}
|
|
|
|
export async function GetMultipleData(keys) {
|
|
try {
|
|
const data = await AsyncStorage.multiGet(keys);
|
|
const retrievedData = data.map(([key, value]) => [key, JSON.parse(value)]);
|
|
return retrievedData;
|
|
} catch (e) {
|
|
console.log("err", e);
|
|
}
|
|
}
|
|
|
|
export function GetDataFromList(list, key) {
|
|
return list.find((v) => v[0] === key)[1];
|
|
}
|
|
|
|
export function GetUuid() {
|
|
return uuid.v4();
|
|
}
|
|
|
|
// data set in the app by default or provided by our servers on firmware update
|
|
const devDevicesFirmwareModes = {
|
|
lightModes: [
|
|
{
|
|
id: "6138e651-54c5-4fd4-8f40-3364f4e9dfe2",
|
|
type: "solidColor",
|
|
supportedFirmwareVersions: ["1.0.1"],
|
|
name: {
|
|
de: "Einfarbig",
|
|
en: "Solid",
|
|
},
|
|
defaults: [],
|
|
adjustments: [],
|
|
},
|
|
{
|
|
id: "c7097a60-faa9-4928-a531-0a8ecbc115d9",
|
|
type: "multipleColors",
|
|
supportedFirmwareVersions: ["1.0.1"],
|
|
name: {
|
|
de: "Zufällig",
|
|
en: "Random",
|
|
},
|
|
defaults: [
|
|
{
|
|
type: "color",
|
|
value: "red",
|
|
},
|
|
{
|
|
type: "color",
|
|
value: "orange",
|
|
},
|
|
{
|
|
type: "color",
|
|
value: "blue",
|
|
},
|
|
],
|
|
adjustments: [],
|
|
},
|
|
{
|
|
id: "b42c665a-c2ab-4029-9162-2280caae3274",
|
|
type: "multipleColors",
|
|
supportedFirmwareVersions: ["1.0.1"],
|
|
name: {
|
|
de: "Regenbogen",
|
|
en: "Rainbow",
|
|
},
|
|
defaults: [],
|
|
adjustments: [
|
|
{
|
|
type: "slider",
|
|
name: {
|
|
de: "Schnelligkeit des Modus",
|
|
en: "Speed of the mode",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
motorModes: [
|
|
{
|
|
type: "motor",
|
|
name: {
|
|
de: "Hin und her",
|
|
en: "Back and forth",
|
|
},
|
|
defaults: [],
|
|
adjustments: [
|
|
{
|
|
type: "slider",
|
|
name: {
|
|
de: "Schnelligkeit von hin und her",
|
|
en: "Speed of the back and forth",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
animationsIn: [
|
|
{
|
|
supportedFirmwareVersions: ["1.0.1"],
|
|
name: {
|
|
de: "Aufblendung",
|
|
en: "Fade in",
|
|
},
|
|
adjustments: [
|
|
{
|
|
type: "slider",
|
|
name: {
|
|
de: "Dauer",
|
|
en: "Duration",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
animationsOut: [
|
|
{
|
|
supportedFirmwareVersions: ["1.0.1"],
|
|
name: {
|
|
de: "Ausblenden",
|
|
en: "Fade out",
|
|
},
|
|
adjustments: [
|
|
{
|
|
type: "slider",
|
|
name: {
|
|
de: "Dauer",
|
|
en: "Duration",
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
};
|
|
|
|
export const DevDeviceId = "1f21a12a-0bec-4336-99bb-df3f9fc9f537";
|
|
|
|
// this data is transmitted from the device to the user app
|
|
const devDevices = [
|
|
{
|
|
id: "1f21a12a-0bec-4336-99bb-df3f9fc9f537", // deviceId
|
|
displayName: "Turtle",
|
|
deviceModel: "Aurora",
|
|
firmware: {
|
|
version: "1.0.1",
|
|
lastUpdated: "11.07.2023 um 20:33 Uhr",
|
|
},
|
|
selectedScene: null,
|
|
/*scenes: [
|
|
{
|
|
id: "2f21a12a-0bec-4336-99bb-df3f9fc9f537",
|
|
name: "Szene 1",
|
|
actions: [],
|
|
},
|
|
{
|
|
id: "3f21a12a-0bec-4336-99bb-df3f9fc9f537",
|
|
name: "Szene 2",
|
|
actions: [],
|
|
},
|
|
],*/
|
|
},
|
|
{
|
|
id: "5b331a12a-0bec-4336-99bb-df3f9fc9f537", // deviceId
|
|
displayName: "Elona",
|
|
deviceModel: "Aurora",
|
|
firmware: {
|
|
version: "1.0.1",
|
|
lastUpdated: "11.07.2023 um 20:33 Uhr",
|
|
},
|
|
selectedScene: null,
|
|
//scenes: [],
|
|
},
|
|
];
|
|
|
|
const devDeviceScenes = [
|
|
{
|
|
deviceId: "",
|
|
scenes: [
|
|
{
|
|
id: "",
|
|
name: "",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const devDeviceSceneActions = [
|
|
{
|
|
sceneId: "",
|
|
actions: [
|
|
{
|
|
id: "",
|
|
modeId: "",
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
export function NewInitialDeviceScene(deviceId) {
|
|
return {
|
|
deviceId: deviceId,
|
|
scenes: [],
|
|
};
|
|
}
|
|
|
|
export function NewInitialDeviceSceneAction(sceneId) {
|
|
return {
|
|
sceneId: sceneId,
|
|
actions: [],
|
|
};
|
|
}
|
|
|
|
export function NewEmptyDeviceScene(name) {
|
|
return {
|
|
id: GetUuid(),
|
|
name: name,
|
|
};
|
|
}
|
|
|
|
export function NewAction(actionType) {
|
|
return {
|
|
id: GetUuid(),
|
|
type: actionType, // layers, ambilight, motor
|
|
modeId: "",
|
|
};
|
|
}
|
|
|
|
export function GetDevice(devices) {
|
|
return devices.find((d) => d.id === AppSelectedUserDevice.current.id);
|
|
}
|
|
|
|
export function GetDeviceSceneAction(sceneActions, sceneId, actionId) {
|
|
return sceneActions
|
|
.find((s) => s.sceneId === sceneId)
|
|
.actions.find((a) => a.id === actionId);
|
|
}
|
|
|
|
const appContextPreview = {
|
|
appColorScheme: "",
|
|
appLanguage: "",
|
|
isUserExpertModeEnabled: "",
|
|
isUserDeveloperModeEnabled: "",
|
|
appTheme: DarkAppTheme,
|
|
devices: [],
|
|
deviceScenes: [],
|
|
deviceSceneActions: [],
|
|
deviceFirmwareModes: [],
|
|
userColorSwatchesFavorites: [],
|
|
};
|
|
|
|
export const AppSelectedUserDevice = createRef();
|
|
AppSelectedUserDevice.current = { id: "", routeName: "" };
|
|
|
|
export const AppContext = createContext(appContextPreview);
|
|
|
|
export function AppProvider({ children }) {
|
|
const [appLanguage, setAppLanguage] = useState("de");
|
|
const [appColorScheme, setAppColorScheme] = useState("light");
|
|
const [appTheme, setAppTheme] = useState(DarkAppTheme);
|
|
const [isUserExpertModeEnabled, setIsUserExpertModeEnabled] = useState(false);
|
|
const [devices, setDevices] = useState(devDevices);
|
|
const [deviceScenes, setDeviceScenes] = useState([]);
|
|
const [deviceSceneActions, setDeviceSceneActions] = useState([]);
|
|
const [deviceFirmwareModes, setDeviceFirmwareModes] = useState(
|
|
devDevicesFirmwareModes
|
|
);
|
|
const [userColorSwatchesFavorites, setUserColorSwatchesFavorites] = useState(
|
|
[]
|
|
);
|
|
const { i18n } = useTranslation();
|
|
|
|
// TODO: only while development
|
|
const [isUserDeveloperModeEnabled, setIsUserDeveloperModeEnabled] =
|
|
useState(false);
|
|
|
|
const saveAppColorScheme = async (value) => {
|
|
StoreData("appColorScheme", value);
|
|
setAppColorScheme(value);
|
|
|
|
let colorScheme;
|
|
|
|
colorScheme = value === "auto" ? Appearance.getColorScheme() : value;
|
|
|
|
setAppTheme(colorScheme === "light" ? LightAppTheme : DarkAppTheme);
|
|
};
|
|
|
|
const saveAppLanguage = async (value) => {
|
|
StoreData("appLanguage", value);
|
|
setAppLanguage(value);
|
|
i18n.changeLanguage(value);
|
|
};
|
|
|
|
const saveUserExpertMode = async (value) => {
|
|
StoreData("userExpertMode", value);
|
|
setIsUserExpertModeEnabled(value);
|
|
};
|
|
|
|
// TODO: only while development
|
|
const saveUserDeveloperMode = async (value) => {
|
|
StoreData("userDeveloperMode", value);
|
|
setIsUserDeveloperModeEnabled(value);
|
|
};
|
|
|
|
const saveUserColorSwatchesFavorites = async (value) => {
|
|
StoreData("userColorSwatchesFavorites", value);
|
|
setUserColorSwatchesFavorites(value);
|
|
};
|
|
|
|
return (
|
|
<AppContext.Provider
|
|
value={{
|
|
appLanguage: appLanguage,
|
|
setAppLanguage: saveAppLanguage,
|
|
appColorScheme: appColorScheme,
|
|
setAppColorScheme: saveAppColorScheme,
|
|
appTheme: appTheme,
|
|
isUserExpertModeEnabled: isUserExpertModeEnabled,
|
|
setIsUserExpertModeEnabled: saveUserExpertMode,
|
|
devices: devices,
|
|
setDevices: setDevices,
|
|
deviceScenes: deviceScenes,
|
|
setDeviceScenes: setDeviceScenes,
|
|
deviceSceneActions: deviceSceneActions,
|
|
setDeviceSceneActions: setDeviceSceneActions,
|
|
deviceFirmwareModes: deviceFirmwareModes,
|
|
setDeviceFirmwareModes: setDeviceFirmwareModes,
|
|
userColorSwatchesFavorites: userColorSwatchesFavorites,
|
|
setUserColorSwatchesFavorites: saveUserColorSwatchesFavorites,
|
|
isUserDeveloperModeEnabled: isUserDeveloperModeEnabled,
|
|
setUserIsDeveloperModeEnabled: saveUserDeveloperMode,
|
|
}}
|
|
>
|
|
{children}
|
|
</AppContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function IsPlatformIos() {
|
|
return Platform.OS === "ios";
|
|
}
|
|
|
|
export function VibrateShort() {
|
|
Vibration.vibrate(50);
|
|
}
|
|
|
|
export function ModalContainer({ children }) {
|
|
return (
|
|
<View style={AppStyles.modal}>
|
|
<View>{children}</View>
|
|
</View>
|
|
);
|
|
}
|