light animations
parent
2bb8a28065
commit
9f934c553f
32
App.js
32
App.js
|
|
@ -33,6 +33,10 @@ import {
|
|||
SettingsAppLanguageModalContent,
|
||||
} from "./src/Screens/Settings";
|
||||
import { SettingsChangeDeviceDisplayName } from "./src/Screens/Device/settings";
|
||||
import {
|
||||
EditActionAnimationSelectionModalContent,
|
||||
EditActionAnimationsSelectionModalContent,
|
||||
} from "./src/Screens/Device/modals/EditActions";
|
||||
|
||||
const Drawer = createDrawerNavigator();
|
||||
const Stack = createStackNavigator();
|
||||
|
|
@ -197,6 +201,32 @@ export function MyApp() {
|
|||
}
|
||||
/>
|
||||
|
||||
<Stack.Screen
|
||||
name="modalEditActionAnimationInSelection"
|
||||
component={EditActionAnimationSelectionModalContent}
|
||||
options={({ navigation }) =>
|
||||
options({
|
||||
navigation: navigation,
|
||||
pageTitle: t(
|
||||
"screens.device.scenes.modalEditActionAnimationInSelection.pageTitle"
|
||||
),
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<Stack.Screen
|
||||
name="modalEditActionAnimationOutSelection"
|
||||
component={EditActionAnimationSelectionModalContent}
|
||||
options={({ navigation }) =>
|
||||
options({
|
||||
navigation: navigation,
|
||||
pageTitle: t(
|
||||
"screens.device.scenes.modalEditActionAnimationOutSelection.pageTitle"
|
||||
),
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<Stack.Screen
|
||||
name="modalSettingsAppColorScheme"
|
||||
component={SettingsAppColorSchemeModalContent}
|
||||
|
|
@ -226,7 +256,7 @@ export function MyApp() {
|
|||
options({
|
||||
navigation: navigation,
|
||||
pageTitle: t(
|
||||
"screens.device.settings.modalSettingsChangeDeviceDisplayName.pageTitle"
|
||||
"screens.device.modalSettingsChangeDeviceDisplayName.pageTitle"
|
||||
),
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,10 +12,6 @@
|
|||
},
|
||||
"screens": {
|
||||
"device": {
|
||||
"light": {
|
||||
"pickerColorModeText": "Farbauswahl",
|
||||
"pickerColorModePlaceholder": "Wählen Sie einen Farbmodus"
|
||||
},
|
||||
"settings": {
|
||||
"settingsTitle": "Einstellungen",
|
||||
"wifiStandByTitle": "WLAN im Standby",
|
||||
|
|
@ -41,7 +37,8 @@
|
|||
"buttonAddAction": "Aktion hinzufügen",
|
||||
"modalChooseScene": {
|
||||
"pageTitle": "Wähle eine Szene aus",
|
||||
"textButtonAddScene": "Neue Szene erstellen"
|
||||
"textButtonAddScene": "Neue Szene erstellen",
|
||||
"noResult": "Keine Szenen vorhanden"
|
||||
},
|
||||
"modalCreateScene": {
|
||||
"pageTitle": "Szene erstellen",
|
||||
|
|
@ -69,10 +66,33 @@
|
|||
"pageTitle": "Layer auswahl"
|
||||
},
|
||||
"modalLayersEditAction": {
|
||||
"pageTitle": "Ebenen bearbeiten"
|
||||
"pageTitle": "Ebenen bearbeiten",
|
||||
"dropdownColorModeSelection": {
|
||||
"label": "Wähle einen Farbmodus",
|
||||
"noColorModeSelected": "Kein Farbmodus ausgewählt"
|
||||
},
|
||||
"modeSpecificColors": "Modus spezifische Farben"
|
||||
},
|
||||
"editActionAnimationsCardContent": {
|
||||
"animationsIn": "Animations in",
|
||||
"animationsOut": "Animations out",
|
||||
"dropdownAnimationIn": {
|
||||
"label": "Wähle eine Animation in"
|
||||
},
|
||||
"dropdownAnimationOut": {
|
||||
"label": "Wähle eine Animation out"
|
||||
}
|
||||
},
|
||||
"modalLayersEditActionColorModeSelection": {
|
||||
"pageTitle": "Wähle einen Farbmodus"
|
||||
},
|
||||
"modalEditActionAnimationInSelection": {
|
||||
"pageTitle": "Animation in auswählen",
|
||||
"noResult": "Keine Animationen verfügbar"
|
||||
},
|
||||
"modalEditActionAnimationOutSelection": {
|
||||
"pageTitle": "Animation out auswählen",
|
||||
"noResult": "Keine Animationen verfügbar"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,10 +12,6 @@
|
|||
},
|
||||
"screens": {
|
||||
"device": {
|
||||
"light": {
|
||||
"pickerColorModeText": "Color selection",
|
||||
"pickerColorModePlaceholder": "Select a color mode"
|
||||
},
|
||||
"settings": {
|
||||
"settingsTitle": "Settings",
|
||||
"wifiStandByTitle": "WLAN in standby",
|
||||
|
|
@ -41,7 +37,8 @@
|
|||
"buttonAddAction": "Add action",
|
||||
"modalChooseScene": {
|
||||
"pageTitle": "Choose a scene",
|
||||
"textButtonAddScene": "Create new scene"
|
||||
"textButtonAddScene": "Create new scene",
|
||||
"noResult": "No scenes available"
|
||||
},
|
||||
"modalCreateScene": {
|
||||
"pageTitle": "Create scene",
|
||||
|
|
@ -69,10 +66,33 @@
|
|||
"pageTitle": "Layer selection"
|
||||
},
|
||||
"modalLayersEditAction": {
|
||||
"pageTitle": "Edit layers"
|
||||
"pageTitle": "Edit layers",
|
||||
"dropdownColorModeSelection": {
|
||||
"label": "Choose a color mode",
|
||||
"noColorModeSelected": "No color mode selected"
|
||||
},
|
||||
"modeSpecificColors": "Mode specific colors"
|
||||
},
|
||||
"editActionAnimationsCardContent": {
|
||||
"animationsIn": "Animations in",
|
||||
"animationsOut": "Animations out",
|
||||
"dropdownAnimationIn": {
|
||||
"label": "Choose an animation in"
|
||||
},
|
||||
"dropdownAnimationOut": {
|
||||
"label": "Choose an animation out"
|
||||
}
|
||||
},
|
||||
"modalLayersEditActionColorModeSelection": {
|
||||
"pageTitle": "Choose a color mode"
|
||||
},
|
||||
"modalEditActionAnimationInSelection": {
|
||||
"pageTitle": "Choose animation in",
|
||||
"noResult": "No animations available"
|
||||
},
|
||||
"modalEditActionAnimationOutSelection": {
|
||||
"pageTitle": "Choose animation out",
|
||||
"noResult": "No animations available"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ export function MyIconButton({
|
|||
name={iconName}
|
||||
size={iconSize}
|
||||
color={color}
|
||||
style={disabled && { opacity: 0.6 }}
|
||||
style={disabled && AppStyles.disabled}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -342,8 +342,8 @@ export function MyColorPickerV2({
|
|||
VibrateShort();
|
||||
}}
|
||||
>
|
||||
{disabled ? (
|
||||
<>
|
||||
{disabled && (
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
|
|
@ -354,8 +354,6 @@ export function MyColorPickerV2({
|
|||
borderRadius: 14,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
|
|
@ -368,6 +366,19 @@ export function MyColorPickerV2({
|
|||
]}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
backgroundColor: color,
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 16,
|
||||
},
|
||||
AppStyles.Shadow,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</TouchableHighlight>
|
||||
))}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
import { Text, View } from "react-native";
|
||||
import { TouchableOpacity } from "react-native";
|
||||
import { AppContext, IsPlatformIos } from "../../utils";
|
||||
import { AppContext, AppStyles, IsPlatformIos } from "../../utils";
|
||||
import { useContext } from "react";
|
||||
import MyIcon from "../Icon";
|
||||
|
||||
export default function MyDropdown({
|
||||
disabled,
|
||||
label,
|
||||
onPress,
|
||||
selectedItemLabel,
|
||||
|
|
@ -13,7 +14,11 @@ export default function MyDropdown({
|
|||
const appContext = useContext(AppContext);
|
||||
|
||||
return (
|
||||
<TouchableOpacity onPress={() => onPress()} style={style}>
|
||||
<TouchableOpacity
|
||||
disabled={disabled}
|
||||
onPress={() => onPress()}
|
||||
style={[style, disabled && AppStyles.disabled]}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
{
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export default function ChooseSceneModalContent({ navigation, route }) {
|
|||
<ModalContainer>
|
||||
{deviceScenes.length === 0 ? (
|
||||
<MyResult
|
||||
text={"Keine Szenen vorhanden"}
|
||||
text={t("screens.device.scenes.modalChooseScene.noResult")}
|
||||
iconName={"selection-search"}
|
||||
/>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -22,9 +22,12 @@ import Animated, {
|
|||
useSharedValue,
|
||||
} from "react-native-reanimated";
|
||||
import { Divider } from "../../../../../Components/Divider";
|
||||
import MyIcon from "../../../../../Components/Icon";
|
||||
import { MyIconButton } from "../../../../../Components/Button";
|
||||
import { ColorPickerRef } from "reanimated-color-picker";
|
||||
import { ColorPickerRef } from "reanimated-color-picker"; // used
|
||||
import EditActionAnimationsCardContent, {
|
||||
EditActionAdjustmentContent,
|
||||
} from "..";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
function LightModeDefaultColor({
|
||||
sharedColor,
|
||||
|
|
@ -70,50 +73,33 @@ export function LightsEditActionModalContent({ navigation, route }) {
|
|||
const appContext = useContext(AppContext);
|
||||
const [lightModeDefaultColors, setLightModeDefaultColors] = useState([]);
|
||||
const sharedLightModeDefaultColors = useSharedValue([]);
|
||||
const [selectedLightModeDefaultColor, setSelectedLightModeDefaultColor] =
|
||||
const [selectedDefaultLightModeColor, setSelectedDefaultLightModeColor] =
|
||||
useState();
|
||||
const colorPickerRef = useRef(ColorPickerRef);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { actionId } = route.params;
|
||||
const { actionId, deviceFirmwareVersion } = route.params;
|
||||
|
||||
const supportedLightModes = appContext.deviceFirmwareModes.lightModes.filter(
|
||||
(lightMode) =>
|
||||
lightMode.supportedFirmwareVersions.includes(
|
||||
route.params.deviceFirmwareVersion
|
||||
)
|
||||
const supportedDeviceLightModes =
|
||||
appContext.deviceFirmwareModes.lightModes.filter((lightMode) =>
|
||||
lightMode.supportedFirmwareVersions.includes(deviceFirmwareVersion)
|
||||
);
|
||||
|
||||
const selectedLightModeId = appContext.deviceSceneActions.find(
|
||||
const selectedSceneActionModeId = appContext.deviceSceneActions.find(
|
||||
(a) => a.actionId === actionId
|
||||
).modeId;
|
||||
|
||||
const selectedLightMode = supportedLightModes.find(
|
||||
(s) => s.id === selectedLightModeId
|
||||
const selectedLightMode = supportedDeviceLightModes.find(
|
||||
(s) => s.id === selectedSceneActionModeId
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedLightMode !== undefined) {
|
||||
console.log(
|
||||
"useEffect selectedLightModeId",
|
||||
selectedLightModeId,
|
||||
selectedLightMode.defaults
|
||||
);
|
||||
|
||||
const filteredColors = selectedLightMode.defaults.filter(
|
||||
(d) => d.type === "color"
|
||||
);
|
||||
|
||||
const colors = [];
|
||||
|
||||
filteredColors.forEach((color) => colors.push(color.value));
|
||||
|
||||
console.log("here colors", colors);
|
||||
|
||||
sharedLightModeDefaultColors.value = colors;
|
||||
setLightModeDefaultColors(colors);
|
||||
setSelectedLightModeDefaultColor();
|
||||
sharedLightModeDefaultColors.value = selectedLightMode.defaults;
|
||||
setLightModeDefaultColors(selectedLightMode.defaults);
|
||||
setSelectedDefaultLightModeColor();
|
||||
}
|
||||
}, [selectedLightModeId]);
|
||||
}, [selectedSceneActionModeId]);
|
||||
|
||||
return (
|
||||
<View
|
||||
|
|
@ -150,22 +136,28 @@ export function LightsEditActionModalContent({ navigation, route }) {
|
|||
<Card>
|
||||
<MyDropdown
|
||||
style={{ marginBottom: 2 }}
|
||||
label="Wähle einen Farbmodus"
|
||||
label={t(
|
||||
"screens.device.scenes.modalLayersEditAction.dropdownColorModeSelection.label"
|
||||
)}
|
||||
selectedItemLabel={
|
||||
selectedLightModeId === ""
|
||||
? "Kein Farbmodus ausgewählt"
|
||||
selectedSceneActionModeId === ""
|
||||
? t(
|
||||
"screens.device.scenes.modalLayersEditAction.dropdownColorModeSelection.noColorModeSelected"
|
||||
)
|
||||
: selectedLightMode.name[appContext.appLanguage]
|
||||
}
|
||||
onPress={() =>
|
||||
navigation.navigate("modalLayersEditActionColorModeSelection", {
|
||||
supportedLightModes: supportedLightModes,
|
||||
selectedLightModeId: selectedLightModeId,
|
||||
supportedDeviceLightModes: supportedDeviceLightModes,
|
||||
selectedSceneActionModeId: selectedSceneActionModeId,
|
||||
actionId: route.params.actionId,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
{selectedLightModeId !== "" && lightModeDefaultColors.length > 0 && (
|
||||
{selectedSceneActionModeId !== "" && (
|
||||
<>
|
||||
{lightModeDefaultColors.length > 0 && (
|
||||
<>
|
||||
<View
|
||||
style={{
|
||||
|
|
@ -180,7 +172,9 @@ export function LightsEditActionModalContent({ navigation, route }) {
|
|||
{ marginTop: 4, marginBottom: 4 },
|
||||
]}
|
||||
>
|
||||
Modus spezifische Farben
|
||||
{t(
|
||||
"screens.device.scenes.modalLayersEditAction.modeSpecificColors"
|
||||
)}
|
||||
</Text>
|
||||
|
||||
<MyIconButton iconName="restore" iconSize={24} />
|
||||
|
|
@ -194,18 +188,18 @@ export function LightsEditActionModalContent({ navigation, route }) {
|
|||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
{lightModeDefaultColors.map((color, index) => (
|
||||
{lightModeDefaultColors.map((_, index) => (
|
||||
<TouchableOpacity
|
||||
key={index}
|
||||
onPress={() => {
|
||||
const newValue =
|
||||
selectedLightModeDefaultColor !== index
|
||||
const newSelection =
|
||||
selectedDefaultLightModeColor !== index
|
||||
? index
|
||||
: undefined;
|
||||
|
||||
setSelectedLightModeDefaultColor(newValue);
|
||||
setSelectedDefaultLightModeColor(newSelection);
|
||||
|
||||
if (newValue !== undefined) {
|
||||
if (newSelection !== undefined) {
|
||||
colorPickerRef.current.setColor(
|
||||
sharedLightModeDefaultColors.value[index]
|
||||
);
|
||||
|
|
@ -216,37 +210,57 @@ export function LightsEditActionModalContent({ navigation, route }) {
|
|||
sharedColor={sharedLightModeDefaultColors}
|
||||
index={index}
|
||||
backgroundColor={appContext.appTheme.backgroundColor}
|
||||
selected={selectedLightModeDefaultColor === index}
|
||||
selected={selectedDefaultLightModeColor === index}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<Divider />
|
||||
</>
|
||||
)}
|
||||
|
||||
<MyColorPickerV2
|
||||
pickerRef={colorPickerRef}
|
||||
style={[selectedLightModeId === "" && { marginTop: 10 }]}
|
||||
style={[
|
||||
selectedSceneActionModeId === "" && { marginTop: 10 },
|
||||
]}
|
||||
appThemeText={appContext.appTheme.text}
|
||||
isUserExpertModeEnabled={appContext.isUserExpertModeEnabled}
|
||||
disabled={selectedLightModeDefaultColor === undefined}
|
||||
disabled={selectedDefaultLightModeColor === undefined}
|
||||
onColorPickerChange={(color) => {
|
||||
if (selectedLightModeDefaultColor !== undefined) {
|
||||
if (selectedDefaultLightModeColor !== undefined) {
|
||||
let newColors = sharedLightModeDefaultColors.value;
|
||||
|
||||
newColors[selectedLightModeDefaultColor] = color;
|
||||
newColors[selectedDefaultLightModeColor] = color;
|
||||
|
||||
sharedLightModeDefaultColors.value = newColors;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{selectedLightMode.adjustments.length > 0 && (
|
||||
<View style={{ marginTop: 2 }}>
|
||||
{selectedLightMode.adjustments.map((adjustment, index) => (
|
||||
<EditActionAdjustmentContent
|
||||
key={index}
|
||||
adjustment={adjustment}
|
||||
appThemeText={appContext.appTheme.text}
|
||||
appLanguage={appContext.appLanguage}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{Array.from({ length: 1 }).map((_, i) => (
|
||||
<Card key={i} />
|
||||
))}
|
||||
<EditActionAnimationsCardContent
|
||||
disabled={selectedSceneActionModeId === ""}
|
||||
navigation={navigation}
|
||||
deviceFirmwareVersion={deviceFirmwareVersion}
|
||||
actionId={actionId}
|
||||
/>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
|
|
@ -261,12 +275,12 @@ export function LayersEditActionColorModeSelectionModalContent({
|
|||
return (
|
||||
<ModalContainer>
|
||||
<FlatList
|
||||
data={route.params.supportedLightModes}
|
||||
data={route.params.supportedDeviceLightModes}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item }) => (
|
||||
<MyPickerModalListItem
|
||||
itemName={item.name[appContext.appLanguage]}
|
||||
itemSelected={route.params.selectedLightModeId === item.id}
|
||||
itemSelected={route.params.selectedSceneActionModeId === item.id}
|
||||
onPress={() => {
|
||||
appContext.setDeviceSceneActions((arr) => {
|
||||
const newArr = [...arr];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,222 @@
|
|||
import { FlatList, Text, View } from "react-native";
|
||||
import Card from "../../../../Components/Card";
|
||||
import {
|
||||
AppContext,
|
||||
AppStyles,
|
||||
IsPlatformIos,
|
||||
ModalContainer,
|
||||
} from "../../../../utils";
|
||||
import MyDropdown from "../../../../Components/Dropdown";
|
||||
import { useContext } from "react";
|
||||
import MyResult from "../../../../Components/Result";
|
||||
import { MyPickerModalListItem } from "../../../../Components/Modal";
|
||||
import MyIcon from "../../../../Components/Icon";
|
||||
import MySlider from "../../../../Components/Slider";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
export default function EditActionAnimationsCardContent({
|
||||
disabled,
|
||||
navigation,
|
||||
deviceFirmwareVersion,
|
||||
actionId,
|
||||
}) {
|
||||
const appContext = useContext(AppContext);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const deviceSceneAction = appContext.deviceSceneActions.find(
|
||||
(action) => action.actionId === actionId
|
||||
);
|
||||
|
||||
const selectedLightAnimationIn =
|
||||
appContext.deviceFirmwareModes.lightAnimationsIn.find(
|
||||
(animation) => animation.id === deviceSceneAction.animationInId
|
||||
);
|
||||
|
||||
const selectedLightAnimationOut =
|
||||
appContext.deviceFirmwareModes.lightAnimationsOut.find(
|
||||
(animation) => animation.id === deviceSceneAction.animationOutId
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<Text style={[AppStyles.typography14, { fontWeight: "bold" }]}>
|
||||
{t(
|
||||
"screens.device.scenes.editActionAnimationsCardContent.animationsIn"
|
||||
)}
|
||||
</Text>
|
||||
|
||||
<MyDropdown
|
||||
disabled={disabled}
|
||||
style={{ marginTop: 2 }}
|
||||
label={t(
|
||||
"screens.device.scenes.editActionAnimationsCardContent.dropdownAnimationIn.label"
|
||||
)}
|
||||
selectedItemLabel={
|
||||
selectedLightAnimationIn.name[appContext.appLanguage]
|
||||
}
|
||||
onPress={() =>
|
||||
navigation.navigate("modalEditActionAnimationInSelection", {
|
||||
animationType: "animationIn",
|
||||
deviceFirmwareVersion: deviceFirmwareVersion,
|
||||
actionId: actionId,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
{selectedLightAnimationIn.adjustments.length > 0 &&
|
||||
selectedLightAnimationIn.adjustments.map((adjustment, index) => (
|
||||
<EditActionAdjustmentContent
|
||||
key={index}
|
||||
adjustment={adjustment}
|
||||
appLanguage={appContext.appLanguage}
|
||||
appThemeText={appContext.appTheme.text}
|
||||
/>
|
||||
))}
|
||||
|
||||
<Text
|
||||
style={[AppStyles.typography14, { fontWeight: "bold", marginTop: 6 }]}
|
||||
>
|
||||
{t(
|
||||
"screens.device.scenes.editActionAnimationsCardContent.animationsOut"
|
||||
)}
|
||||
</Text>
|
||||
|
||||
<MyDropdown
|
||||
disabled={disabled}
|
||||
style={{ marginTop: 2 }}
|
||||
label={t(
|
||||
"screens.device.scenes.editActionAnimationsCardContent.dropdownAnimationOut.label"
|
||||
)}
|
||||
selectedItemLabel={
|
||||
selectedLightAnimationOut.name[appContext.appLanguage]
|
||||
}
|
||||
onPress={() =>
|
||||
navigation.navigate("modalEditActionAnimationOutSelection", {
|
||||
animationType: "animationOut",
|
||||
deviceFirmwareVersion: deviceFirmwareVersion,
|
||||
actionId: actionId,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
{selectedLightAnimationOut.adjustments.length > 0 &&
|
||||
selectedLightAnimationOut.adjustments.map((adjustment, index) => (
|
||||
<EditActionAdjustmentContent
|
||||
key={index}
|
||||
adjustment={adjustment}
|
||||
appLanguage={appContext.appLanguage}
|
||||
appThemeText={appContext.appTheme.text}
|
||||
/>
|
||||
))}
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function EditActionAnimationSelectionModalContent({
|
||||
navigation,
|
||||
route,
|
||||
}) {
|
||||
const appContext = useContext(AppContext);
|
||||
|
||||
let { animationType, deviceFirmwareVersion, actionId } = route.params;
|
||||
|
||||
const supportedLightAnimations =
|
||||
animationType === "animationIn"
|
||||
? appContext.deviceFirmwareModes.lightAnimationsIn.filter(
|
||||
(animation) =>
|
||||
animation.supportedFirmwareVersions.includes(
|
||||
deviceFirmwareVersion
|
||||
) || animation.supportedFirmwareVersions.includes("*")
|
||||
)
|
||||
: appContext.deviceFirmwareModes.lightAnimationsOut.filter(
|
||||
(animation) =>
|
||||
animation.supportedFirmwareVersions.includes(
|
||||
deviceFirmwareVersion
|
||||
) || animation.supportedFirmwareVersions.includes("*")
|
||||
);
|
||||
|
||||
const deviceSceneAction = appContext.deviceSceneActions.find(
|
||||
(action) => action.actionId === actionId
|
||||
);
|
||||
|
||||
animationType =
|
||||
animationType === "animationIn" ? "animationInId" : "animationOutId";
|
||||
|
||||
return (
|
||||
<ModalContainer>
|
||||
{supportedLightAnimations.length === 0 ? (
|
||||
<MyResult
|
||||
text={
|
||||
animationType === "animationInId"
|
||||
? t(
|
||||
"screens.device.scenes.modalEditActionAnimationInSelection.noResult"
|
||||
)
|
||||
: t(
|
||||
"screens.device.scenes.modalEditActionAnimationOutSelection.noResult"
|
||||
)
|
||||
}
|
||||
iconName="select-search"
|
||||
/>
|
||||
) : (
|
||||
<FlatList
|
||||
data={supportedLightAnimations}
|
||||
keyExtractor={(item) => item.id}
|
||||
renderItem={({ item }) => (
|
||||
<MyPickerModalListItem
|
||||
itemName={item.name[appContext.appLanguage]}
|
||||
itemSelected={deviceSceneAction[animationType] === item.id}
|
||||
onPress={() => {
|
||||
navigation.goBack();
|
||||
|
||||
appContext.setDeviceSceneActions((arr) => {
|
||||
const newArr = [...arr];
|
||||
|
||||
const foundActionIndex = newArr.findIndex(
|
||||
(action) => action.actionId === actionId
|
||||
);
|
||||
|
||||
newArr[foundActionIndex][animationType] = item.id;
|
||||
|
||||
return newArr;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</ModalContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export function EditActionAdjustmentContent({
|
||||
adjustment,
|
||||
appThemeText,
|
||||
appLanguage,
|
||||
}) {
|
||||
if (adjustment.type === "slider") {
|
||||
return (
|
||||
<>
|
||||
<Text style={[AppStyles.typography14, { color: appThemeText }]}>
|
||||
{adjustment.name[appLanguage]}
|
||||
</Text>
|
||||
|
||||
<View style={{ flexDirection: "row", alignItems: "center" }}>
|
||||
<MyIcon name={adjustment.iconName} size={24} />
|
||||
|
||||
<MySlider
|
||||
style={[{ flex: 1 }, IsPlatformIos() && { marginLeft: 6 }]}
|
||||
minimumValue={adjustment.min}
|
||||
maximumValue={adjustment.max}
|
||||
onValueChange={(v) =>
|
||||
console.log(`change ${adjustment.variableName}`, v)
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return <></>;
|
||||
}
|
||||
197
src/utils.js
197
src/utils.js
|
|
@ -54,6 +54,9 @@ export const AppStyles = StyleSheet.create({
|
|||
flex: 1,
|
||||
padding: 10,
|
||||
},
|
||||
disabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
});
|
||||
|
||||
const DarkAppTheme = {
|
||||
|
|
@ -190,47 +193,38 @@ const devDevicesFirmwareModes = {
|
|||
lightModes: [
|
||||
{
|
||||
id: "6138e651-54c5-4fd4-8f40-3364f4e9dfe2",
|
||||
type: "solidColor",
|
||||
supportedFirmwareVersions: ["1.0.1"],
|
||||
name: {
|
||||
de: "Einfarbig",
|
||||
en: "Solid",
|
||||
},
|
||||
defaults: [
|
||||
{
|
||||
type: "color",
|
||||
value: "red",
|
||||
},
|
||||
],
|
||||
defaults: ["red"],
|
||||
adjustments: [],
|
||||
},
|
||||
{
|
||||
id: "c7097a60-faa9-4928-a531-0a8ecbc115d9",
|
||||
type: "multipleColors",
|
||||
supportedFirmwareVersions: ["1.0.1"],
|
||||
name: {
|
||||
de: "Zufällig",
|
||||
en: "Random",
|
||||
},
|
||||
defaults: [
|
||||
defaults: ["red", "orange", "blue"],
|
||||
adjustments: [
|
||||
{
|
||||
type: "color",
|
||||
value: "red",
|
||||
type: "slider",
|
||||
variableName: "colorSwitching",
|
||||
iconName: "fan",
|
||||
name: {
|
||||
de: "Wechsel der Farben",
|
||||
en: "Color changing",
|
||||
},
|
||||
{
|
||||
type: "color",
|
||||
value: "orange",
|
||||
},
|
||||
{
|
||||
type: "color",
|
||||
value: "blue",
|
||||
min: 0,
|
||||
max: 6,
|
||||
},
|
||||
],
|
||||
adjustments: [],
|
||||
},
|
||||
{
|
||||
id: "b42c665a-c2ab-4029-9162-2280caae3274",
|
||||
type: "multipleColors",
|
||||
supportedFirmwareVersions: ["1.0.1"],
|
||||
name: {
|
||||
de: "Regenbogen",
|
||||
|
|
@ -240,53 +234,73 @@ const devDevicesFirmwareModes = {
|
|||
adjustments: [
|
||||
{
|
||||
type: "slider",
|
||||
variableName: "modeSpeed",
|
||||
iconName: "fan",
|
||||
name: {
|
||||
de: "Schnelligkeit des Modus",
|
||||
en: "Speed of the mode",
|
||||
},
|
||||
min: 0,
|
||||
max: 100,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
motorModes: [
|
||||
{
|
||||
type: "motor",
|
||||
name: {
|
||||
de: "Hin und her",
|
||||
en: "Back and forth",
|
||||
},
|
||||
defaults: [],
|
||||
adjustments: [
|
||||
{
|
||||
type: "slider",
|
||||
variableName: "repeatingInterval",
|
||||
iconName: "repeat-variant",
|
||||
name: {
|
||||
de: "Schnelligkeit von hin und her",
|
||||
en: "Speed of the back and forth",
|
||||
de: "Wiederholungsinterval",
|
||||
en: "Repeating interval",
|
||||
},
|
||||
min: 1,
|
||||
max: 10,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
animationsIn: [
|
||||
lightAnimationsIn: [
|
||||
{
|
||||
id: "00000000-0000-0000-0000-000000000000",
|
||||
supportedFirmwareVersions: ["*"],
|
||||
name: {
|
||||
de: "Keine",
|
||||
en: "None",
|
||||
},
|
||||
adjustments: [],
|
||||
},
|
||||
{
|
||||
id: "6c5570da-ec53-4788-a8cd-03c724eb81b8",
|
||||
supportedFirmwareVersions: ["1.0.1"],
|
||||
name: {
|
||||
de: "Aufblendung",
|
||||
de: "Aufblenden",
|
||||
en: "Fade in",
|
||||
},
|
||||
adjustments: [
|
||||
{
|
||||
type: "slider",
|
||||
variableName: "duration",
|
||||
name: {
|
||||
de: "Dauer",
|
||||
en: "Duration",
|
||||
},
|
||||
iconName: "repeat-variant",
|
||||
min: 1,
|
||||
max: 60,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
animationsOut: [
|
||||
lightAnimationsOut: [
|
||||
{
|
||||
id: "00000000-0000-0000-0000-000000000000",
|
||||
supportedFirmwareVersions: ["*"],
|
||||
name: {
|
||||
de: "Keine",
|
||||
en: "None",
|
||||
},
|
||||
adjustments: [],
|
||||
},
|
||||
{
|
||||
id: "cb5b791e-213c-4684-9585-b0c42cbfafb5",
|
||||
supportedFirmwareVersions: ["1.0.1"],
|
||||
name: {
|
||||
de: "Ausblenden",
|
||||
|
|
@ -295,14 +309,30 @@ const devDevicesFirmwareModes = {
|
|||
adjustments: [
|
||||
{
|
||||
type: "slider",
|
||||
variableName: "duration",
|
||||
name: {
|
||||
de: "Dauer",
|
||||
en: "Duration",
|
||||
},
|
||||
iconName: "repeat-variant",
|
||||
min: 1,
|
||||
max: 60,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
motorModes: [
|
||||
{
|
||||
id: "41de8c57-fc99-40a4-b6eb-a8d0d4569bc8",
|
||||
type: "motor",
|
||||
name: {
|
||||
de: "Hin und her",
|
||||
en: "Back and forth",
|
||||
},
|
||||
defaults: [],
|
||||
adjustments: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const DevDeviceId = "1f21a12a-0bec-4336-99bb-df3f9fc9f537";
|
||||
|
|
@ -318,18 +348,6 @@ const devDevices = [
|
|||
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
|
||||
|
|
@ -340,7 +358,6 @@ const devDevices = [
|
|||
lastUpdated: "11.07.2023 um 20:33 Uhr",
|
||||
},
|
||||
selectedScene: null,
|
||||
//scenes: [],
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -363,10 +380,12 @@ export function NewEmptyDeviceScene(name) {
|
|||
|
||||
const devDeviceSceneActions = [
|
||||
{
|
||||
actionId: "", // actionId
|
||||
actionId: "", // random id
|
||||
sceneId: "",
|
||||
type: "",
|
||||
type: "", // layers, ambilight, motor
|
||||
modeId: "",
|
||||
animationInId: "",
|
||||
animationOutId: "",
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -376,85 +395,15 @@ export function NewAction(sceneId, actionType) {
|
|||
sceneId: sceneId,
|
||||
type: actionType, // layers, ambilight, motor
|
||||
modeId: "",
|
||||
animationInId: "00000000-0000-0000-0000-000000000000",
|
||||
animationOutId: "00000000-0000-0000-0000-000000000000",
|
||||
};
|
||||
}
|
||||
|
||||
/*const devDeviceScenes = [
|
||||
{
|
||||
deviceId: "",
|
||||
scenes: [
|
||||
{
|
||||
id: "",
|
||||
name: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const devDeviceSceneActions = [
|
||||
{
|
||||
sceneId: "",
|
||||
actions: [
|
||||
{
|
||||
id: "",
|
||||
modeId: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
];*/
|
||||
|
||||
export function GetDevice(devices) {
|
||||
return devices.find((d) => d.id === AppSelectedUserDevice.current.id);
|
||||
}
|
||||
|
||||
/*
|
||||
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 GetDeviceScene(deviceScenes, sceneId) {
|
||||
const deviceScene = deviceScenes.find(
|
||||
(d) => d.deviceId === AppSelectedUserDevice.current.id
|
||||
);
|
||||
|
||||
if (deviceScene === undefined) return [];
|
||||
|
||||
return deviceScene.scenes.find((s) => s.id === sceneId);
|
||||
}
|
||||
|
||||
export function GetDeviceSceneAction(sceneActions, sceneId, actionId) {
|
||||
return sceneActions
|
||||
.find((s) => s.sceneId === sceneId)
|
||||
.actions.find((a) => a.id === actionId);
|
||||
} */
|
||||
|
||||
const appContextPreview = {
|
||||
appColorScheme: "",
|
||||
appLanguage: "",
|
||||
|
|
|
|||
Loading…
Reference in New Issue