From 4a92df31b0d624bf6b29d7ad0b87cc6e28a0aa49 Mon Sep 17 00:00:00 2001 From: alex Date: Sun, 6 Aug 2023 23:17:59 +0000 Subject: [PATCH] added action handling for ambilight --- App.js | 42 +--- locales/de.json | 66 +++--- locales/en.json | 66 +++--- src/Components/Dropdown/index.js | 2 +- .../AddSceneAction/LayerSelection/index.js | 5 +- .../Device/modals/AddSceneAction/index.js | 36 +++- .../Device/modals/EditActions/Lights/index.js | 197 ++++++++++-------- .../Device/modals/EditActions/index.js | 43 ++-- src/Screens/Device/scene.js | 144 ++++++++----- 9 files changed, 350 insertions(+), 251 deletions(-) diff --git a/App.js b/App.js index 1c4dc63..64733ac 100644 --- a/App.js +++ b/App.js @@ -21,10 +21,6 @@ import { createStackNavigator } from "@react-navigation/stack"; import { TouchableOpacity } from "react-native"; import MyIcon from "./src/Components/Icon"; import { useTranslation } from "react-i18next"; -import { - LayersEditActionColorModeSelectionModalContent, - LightsEditActionModalContent, -} from "./src/Screens/Device/modals/EditActions/Lights"; import ChooseSceneModalContent from "./src/Screens/Device/modals/ChooseScene"; import CreateSceneModalContent from "./src/Screens/Device/modals/ChooseScene/CreateScene"; import AddSceneActionModalContent from "./src/Screens/Device/modals/AddSceneAction"; @@ -33,9 +29,12 @@ import { SettingsAppColorSchemeModalContent, SettingsAppLanguageModalContent, } from "./src/Screens/Settings"; -import { EditActionAnimationSelectionModalContent } from "./src/Screens/Device/modals/EditActions"; import UpdateSceneNameModalContent from "./src/Screens/Device/modals/UpdateSceneName"; import SettingsChangeDeviceDisplayNameModalContent from "./src/Screens/Device/modals/SettingsChangeDeviceDisplayName"; +import LightsEditActionModalContent, { + LightsEditActionColorModeSelectionModalContent, +} from "./src/Screens/Device/modals/EditActions/Lights"; +import { EditActionAnimationSelectionModalContent } from "./src/Screens/Device/modals/EditActions"; const Drawer = createDrawerNavigator(); const Stack = createStackNavigator(); @@ -161,66 +160,47 @@ export function MyApp() { /> options({ navigation: navigation, pageTitle: t( - "screens.device.scenes.modalLayerSection.pageTitle" + "screens.device.scenes.modalLayerSelection.pageTitle" ), }) } /> options({ navigation: navigation, - pageTitle: t( - "screens.device.scenes.modalLayersEditAction.pageTitle" - ), }) } /> options({ navigation: navigation, pageTitle: t( - "screens.device.scenes.modalLayersEditActionColorModeSelection.pageTitle" + "screens.device.scenes.editActions.modalLightsEditActionColorModeSelection.pageTitle" ), }) } /> options({ navigation: navigation, - pageTitle: t( - "screens.device.scenes.modalEditActionAnimationInSelection.pageTitle" - ), - }) - } - /> - - - options({ - navigation: navigation, - pageTitle: t( - "screens.device.scenes.modalEditActionAnimationOutSelection.pageTitle" - ), }) } /> diff --git a/locales/de.json b/locales/de.json index 0c13913..3e869eb 100644 --- a/locales/de.json +++ b/locales/de.json @@ -46,7 +46,8 @@ "oneLayer": "Ebene", "multipleLayers": "Ebenen" } - } + }, + "ambilight": "Umgebungslicht setzen auf" }, "modalChooseScene": { "pageTitle": "Wähle eine Szene aus", @@ -75,42 +76,45 @@ "jumpToScene": "Springe zu Szene" } }, - "modalLayerSection": { + "modalLayerSelection": { "pageTitle": "Layer auswahl" }, - "modalLayersEditAction": { - "pageTitle": "Ebenen bearbeiten", - "dropdownColorModeSelection": { - "label": "Wähle einen Farbmodus", - "noColorModeSelected": "Kein Farbmodus ausgewählt" + "editActions": { + "modalLightsEditAction": { + "layersPageTitle": "Ebenen bearbeiten", + "ambilightPageTitle": "Ambilight bearbeiten", + "dropdownColorModeSelection": { + "label": "Wähle einen Farbmodus", + "noColorModeSelected": "Kein Farbmodus ausgewählt" + }, + "modeSpecificColors": "Modus spezifische Farben" }, - "modeSpecificColors": "Modus spezifische Farben" - }, - "modalDotsEditAction": { - "duplicateAction": "Aktion duplizieren", - "deleteAction": "Aktion löschen" - }, - "editActionAnimationsCardContent": { - "animationsIn": "Animations in", - "animationsOut": "Animations out", - "dropdownAnimationIn": { - "label": "Wähle eine Animation in" + "modalDotsEditAction": { + "duplicateAction": "Aktion duplizieren", + "deleteAction": "Aktion löschen" }, - "dropdownAnimationOut": { - "label": "Wähle eine Animation out" + "editActionAnimationsCardContent": { + "animationsIn": "Animations in", + "animationsOut": "Animations out", + "dropdownAnimationIn": { + "label": "Wähle eine Animation in" + }, + "dropdownAnimationOut": { + "label": "Wähle eine Animation out" + } + }, + "modalLightsEditActionColorModeSelection": { + "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" } }, - "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" - }, "modalUpdateSceneName": { "pageTitle": "Szenennamen ändern", "textTitle": "Szenenname", diff --git a/locales/en.json b/locales/en.json index 8666f5a..c31a84b 100644 --- a/locales/en.json +++ b/locales/en.json @@ -46,7 +46,8 @@ "oneLayer": "layer", "multipleLayers": "layers" } - } + }, + "ambilight": "Set ambilight to" }, "modalChooseScene": { "pageTitle": "Choose a scene", @@ -75,42 +76,45 @@ "jumpToScene": "Jump to scene" } }, - "modalLayerSection": { + "modalLayerSelection": { "pageTitle": "Layer selection" }, - "modalLayersEditAction": { - "pageTitle": "Edit layers", - "dropdownColorModeSelection": { - "label": "Choose a color mode", - "noColorModeSelected": "No color mode selected" + "editActions": { + "modalLightsEditAction": { + "layersPageTitle": "Edit layers", + "ambilightPageTitle": "Edit ambilight", + "dropdownColorModeSelection": { + "label": "Choose a color mode", + "noColorModeSelected": "No color mode selected" + }, + "modeSpecificColors": "Mode specific colors" }, - "modeSpecificColors": "Mode specific colors" - }, - "modalDotsEditAction": { - "duplicateAction": "Duplicate action", - "deleteAction": "Delete action" - }, - "editActionAnimationsCardContent": { - "animationsIn": "Animations in", - "animationsOut": "Animations out", - "dropdownAnimationIn": { - "label": "Choose an animation in" + "modalDotsEditAction": { + "duplicateAction": "Duplicate action", + "deleteAction": "Delete action" }, - "dropdownAnimationOut": { - "label": "Choose an animation out" + "editActionAnimationsCardContent": { + "animationsIn": "Animations in", + "animationsOut": "Animations out", + "dropdownAnimationIn": { + "label": "Choose an animation in" + }, + "dropdownAnimationOut": { + "label": "Choose an animation out" + } + }, + "modalLightsEditActionColorModeSelection": { + "pageTitle": "Choose a color mode" + }, + "modalEditActionAnimationInSelection": { + "pageTitle": "Choose animation in", + "noResult": "No animations available" + }, + "modalEditActionAnimationOutSelection": { + "pageTitle": "Choose animation out", + "noResult": "No animations available" } }, - "modalLayersEditActionColorModeSelection": { - "pageTitle": "Choose a color mode" - }, - "modalEditActionAnimationInSelection": { - "pageTitle": "Choose animation in", - "noResult": "No animations available" - }, - "modalEditActionAnimationOutSelection": { - "pageTitle": "Choose animation out", - "noResult": "No animations available" - }, "modalUpdateSceneName": { "pageTitle": "Change scene name", "textTitle": "Scene name", diff --git a/src/Components/Dropdown/index.js b/src/Components/Dropdown/index.js index d36a290..c1bbb1d 100644 --- a/src/Components/Dropdown/index.js +++ b/src/Components/Dropdown/index.js @@ -1,6 +1,6 @@ import { Text, View } from "react-native"; import { TouchableOpacity } from "react-native"; -import { AppContext, AppStyles, IsPlatformIos } from "../../utils"; +import { AppContext, AppStyles } from "../../utils"; import { useContext } from "react"; import MyIcon from "../Icon"; diff --git a/src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js b/src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js index 266a951..18084f5 100644 --- a/src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js +++ b/src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js @@ -96,7 +96,10 @@ export default function LayerSelectionModalContent({ navigation, route }) { route.params["actionId"] = newAction.actionId; navigation.navigate(AppSelectedUserDevice.current.routeName); - navigation.navigate("modalLayersEditAction", route.params); + navigation.navigate("modalLightsEditAction", { + ...route.params, + actionType: Constants.actionType.layers, + }); }} /> diff --git a/src/Screens/Device/modals/AddSceneAction/index.js b/src/Screens/Device/modals/AddSceneAction/index.js index 366359e..d138af6 100644 --- a/src/Screens/Device/modals/AddSceneAction/index.js +++ b/src/Screens/Device/modals/AddSceneAction/index.js @@ -1,10 +1,12 @@ -import { useContext } from "react"; import { Image, ScrollView, Text, View } from "react-native"; import { AppContext, + AppSelectedUserDevice, AppStyles, Constants, + GetDevice, ModalContainer, + NewAction, } from "../../../../utils"; import MyIcon from "../../../../Components/Icon"; import { Divider } from "../../../../Components/Divider"; @@ -12,6 +14,7 @@ import { useTranslation } from "react-i18next"; import MyTag from "../../../../Components/Tag"; import MyPressable from "../../../../Components/Pressable"; import { ActionTypeIconName } from "../../scene"; +import { useContext } from "react"; function Action({ text, @@ -74,12 +77,33 @@ function Action({ } export default function AddSceneActionModalContent({ navigation, route }) { + const appContext = useContext(AppContext); const { t } = useTranslation(); const deviceFirmwareVersion = route.params.deviceFirmwareVersion; // TODO: show only actions by device model + // this code is also in ./LayerSelection/index.js + const handleCreateAction = (actionType, modeAdjustments, navigateTo) => { + const newAction = NewAction( + GetDevice(appContext.devices).selectedScene, + actionType, + modeAdjustments + ); + + appContext.setDeviceSceneActions((arr) => [...arr, newAction]); + + route.params["actionId"] = newAction.actionId; + + if (actionType === Constants.actionType.ambilight) { + route.params["actionType"] = Constants.actionType.ambilight; + } + + navigation.navigate(AppSelectedUserDevice.current.routeName); + navigation.navigate(navigateTo, route.params); + }; + return ( @@ -87,7 +111,7 @@ export default function AddSceneActionModalContent({ navigation, route }) { text={t("screens.device.scenes.modalAddSceneAction.actions.layers")} iconName={ActionTypeIconName(Constants.actionType.layers)} imageSource={require("../../../../../assets/layers.gif")} - onPress={() => navigation.navigate("modalLayerSection", route.params)} + onPress={() => navigation.navigate("modalLayerSelection", route.params)} deviceFirmwareVersion={deviceFirmwareVersion} supportedFirmwareVersions={["1.0.1"]} /> @@ -98,7 +122,13 @@ export default function AddSceneActionModalContent({ navigation, route }) { )} iconName={ActionTypeIconName(Constants.actionType.ambilight)} imageSource={require("../../../../../assets/ambilight.gif")} - onPress={() => console.log("pressed action")} + onPress={() => { + handleCreateAction( + Constants.actionType.ambilight, + {}, + "modalLightsEditAction" + ); + }} deviceFirmwareVersion={deviceFirmwareVersion} supportedFirmwareVersions={["1.0.1"]} /> diff --git a/src/Screens/Device/modals/EditActions/Lights/index.js b/src/Screens/Device/modals/EditActions/Lights/index.js index 3fe321e..27a4b92 100644 --- a/src/Screens/Device/modals/EditActions/Lights/index.js +++ b/src/Screens/Device/modals/EditActions/Lights/index.js @@ -5,75 +5,40 @@ import { TouchableOpacity, View, } from "react-native"; -import { - MyDeviceTabButton, - MyDeviceTabButtonContainer, - topFirst, - topSecond, -} from "../../../deviceTabButton"; -import Card from "../../../../../Components/Card"; -import MyDropdown from "../../../../../Components/Dropdown"; import { useCallback, useContext, useEffect, useRef, useState } from "react"; -import { AppContext, AppStyles, ModalContainer } from "../../../../../utils"; +import { useTranslation } from "react-i18next"; +import { ColorPickerRef } from "reanimated-color-picker"; // used import { - MyDotsModal, - MyPickerModalListItem, -} from "../../../../../Components/Modal"; -import { MyColorPickerV2 } from "../../../../../Components/ColorPicker"; + AppContext, + AppStyles, + Constants, + ModalContainer, +} from "../../../../../utils"; import Animated, { useAnimatedStyle, useSharedValue, } from "react-native-reanimated"; -import { MyIconButton } from "../../../../../Components/Button"; -import { ColorPickerRef } from "reanimated-color-picker"; // used -import EditActionAnimationsCardContent, { - EditActionAdjustmentsContent, -} from ".."; -import { useTranslation } from "react-i18next"; import { useFocusEffect } from "@react-navigation/native"; import { DeviceLivePreview } from "../../.."; +import { + MyDeviceTabButton, + MyDeviceTabButtonContainer, +} from "../../../deviceTabButton"; +import Card from "../../../../../Components/Card"; +import MyDropdown from "../../../../../Components/Dropdown"; +import { MyIconButton } from "../../../../../Components/Button"; +import { MyColorPickerV2 } from "../../../../../Components/ColorPicker"; +import { + EditActionAdjustmentsContent, + EditActionAnimationsCardContent, +} from ".."; +import { + MyDotsModal, + MyPickerModalListItem, +} from "../../../../../Components/Modal"; -function LightModeDefaultColor({ - sharedColor, - index, - backgroundColor, - selected, -}) { - const backgroundColorStyle = useAnimatedStyle(() => { - return { - backgroundColor: sharedColor.value[index], - }; - }); - - return ( - - - - ); -} - -export function LightsEditActionModalContent({ navigation, route }) { +// This component is used by layers and ambilight +export default function LightsEditActionModalContent({ navigation, route }) { const appContext = useContext(AppContext); const sharedLightModeDefaultColors = useSharedValue([]); @@ -82,43 +47,53 @@ export function LightsEditActionModalContent({ navigation, route }) { const colorPickerRef = useRef(ColorPickerRef); const { t } = useTranslation(); - const { actionId, deviceFirmwareVersion } = route.params; + const { actionType, actionId, deviceFirmwareVersion } = route.params; + + console.log("actionType", actionType); useFocusEffect( useCallback(() => { navigation.setOptions({ + title: + actionType === Constants.actionType.layers + ? t( + "screens.device.scenes.editActions.modalLightsEditAction.layersPageTitle" + ) + : t( + "screens.device.scenes.editActions.modalLightsEditAction.ambilightPageTitle" + ), headerRight: () => ( if the color is changed it will apply on both actions - - icon: "content-duplicate", - label: t( - "screens.device.scenes.modalDotsEditAction.duplicateAction" - ), - onPress: () => { - const currentSelectedAction = - appContext.deviceSceneActions.find( - (a) => a.actionId === actionId - ); - - appContext.setDeviceSceneActions((arr) => { - const duplicatedAction = { - ...currentSelectedAction, - actionId: GetUuid(), - }; - - return [...arr, duplicatedAction]; - }); - - navigation.goBack(); - }, - },*/ + bug: Duplicated item as references to the old action -> if the color is changed it will apply on both actions + + icon: "content-duplicate", + label: t( + "screens.device.scenes.modalDotsEditAction.duplicateAction" + ), + onPress: () => { + const currentSelectedAction = + appContext.deviceSceneActions.find( + (a) => a.actionId === actionId + ); + + appContext.setDeviceSceneActions((arr) => { + const duplicatedAction = { + ...currentSelectedAction, + actionId: GetUuid(), + }; + + return [...arr, duplicatedAction]; + }); + + navigation.goBack(); + }, + },*/ { icon: "trash-can", label: t( - "screens.device.scenes.modalDotsEditAction.deleteAction" + "screens.device.scenes.editActions.modalDotsEditAction.deleteAction" ), onPress: () => { appContext.setDeviceSceneActions((actions) => @@ -212,17 +187,17 @@ export function LightsEditActionModalContent({ navigation, route }) { - navigation.navigate("modalLayersEditActionColorModeSelection", { + navigation.navigate("modalLightsEditActionColorModeSelection", { supportedDeviceLightModes: supportedDeviceLightModes, action: selectedSceneAction, }) @@ -252,7 +227,7 @@ export function LightsEditActionModalContent({ navigation, route }) { ]} > {t( - "screens.device.scenes.modalLayersEditAction.modeSpecificColors" + "screens.device.scenes.editActions.modalLightsEditAction.modeSpecificColors" )} @@ -329,7 +304,47 @@ export function LightsEditActionModalContent({ navigation, route }) { ); } -export function LayersEditActionColorModeSelectionModalContent({ +function LightModeDefaultColor({ + sharedColor, + index, + backgroundColor, + selected, +}) { + const backgroundColorStyle = useAnimatedStyle(() => { + return { + backgroundColor: sharedColor.value[index], + }; + }); + + return ( + + + + ); +} + +export function LightsEditActionColorModeSelectionModalContent({ navigation, route, }) { diff --git a/src/Screens/Device/modals/EditActions/index.js b/src/Screens/Device/modals/EditActions/index.js index 88ac442..533d290 100644 --- a/src/Screens/Device/modals/EditActions/index.js +++ b/src/Screens/Device/modals/EditActions/index.js @@ -1,20 +1,21 @@ import { FlatList, Text, View } from "react-native"; -import Card from "../../../../Components/Card"; import { AppContext, AppStyles, IsPlatformIos, ModalContainer, } from "../../../../utils"; +import { useCallback, useContext, useState } from "react"; +import { useTranslation } from "react-i18next"; +import Card from "../../../../Components/Card"; import MyDropdown from "../../../../Components/Dropdown"; -import { useContext, useState } 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"; +import MyIcon from "../../../../Components/Icon"; +import { useFocusEffect } from "@react-navigation/native"; -export default function EditActionAnimationsCardContent({ +export function EditActionAnimationsCardContent({ disabled, navigation, deviceFirmwareVersion, @@ -43,7 +44,7 @@ export default function EditActionAnimationsCardContent({ ]} > {t( - "screens.device.scenes.editActionAnimationsCardContent.animationsIn" + "screens.device.scenes.editActions.editActionAnimationsCardContent.animationsIn" )} @@ -51,13 +52,13 @@ export default function EditActionAnimationsCardContent({ disabled={disabled} style={{ marginTop: 2 }} label={t( - "screens.device.scenes.editActionAnimationsCardContent.dropdownAnimationIn.label" + "screens.device.scenes.editActions.editActionAnimationsCardContent.dropdownAnimationIn.label" )} selectedItemLabel={ selectedLightAnimationIn.name[appContext.appLanguage] } onPress={() => - navigation.navigate("modalEditActionAnimationInSelection", { + navigation.navigate("modalEditActionAnimationInOrOutSelection", { animationType: "animationIn", deviceFirmwareVersion: deviceFirmwareVersion, action: action, @@ -82,7 +83,7 @@ export default function EditActionAnimationsCardContent({ ]} > {t( - "screens.device.scenes.editActionAnimationsCardContent.animationsOut" + "screens.device.scenes.editActions.editActionAnimationsCardContent.animationsOut" )} @@ -90,13 +91,13 @@ export default function EditActionAnimationsCardContent({ disabled={disabled} style={{ marginTop: 2 }} label={t( - "screens.device.scenes.editActionAnimationsCardContent.dropdownAnimationOut.label" + "screens.device.scenes.editActions.editActionAnimationsCardContent.dropdownAnimationOut.label" )} selectedItemLabel={ selectedLightAnimationOut.name[appContext.appLanguage] } onPress={() => - navigation.navigate("modalEditActionAnimationOutSelection", { + navigation.navigate("modalEditActionAnimationInOrOutSelection", { animationType: "animationOut", deviceFirmwareVersion: deviceFirmwareVersion, action: action, @@ -119,6 +120,7 @@ export function EditActionAnimationSelectionModalContent({ route, }) { const appContext = useContext(AppContext); + const { t } = useTranslation(); let { animationType, deviceFirmwareVersion, action } = route.params; @@ -140,6 +142,21 @@ export function EditActionAnimationSelectionModalContent({ animationType = animationType === "animationIn" ? "animationInId" : "animationOutId"; + useFocusEffect( + useCallback(() => { + navigation.setOptions({ + title: + animationType === "animationInId" + ? t( + "screens.device.scenes.editActions.modalEditActionAnimationInSelection.pageTitle" + ) + : t( + "screens.device.scenes.editActions.modalEditActionAnimationOutSelection.pageTitle" + ), + }); + }, []) + ); + return ( {supportedLightAnimations.length === 0 ? ( @@ -147,10 +164,10 @@ export function EditActionAnimationSelectionModalContent({ text={ animationType === "animationInId" ? t( - "screens.device.scenes.modalEditActionAnimationInSelection.noResult" + "screens.device.scenes.editActions.modalEditActionAnimationInSelection.noResult" ) : t( - "screens.device.scenes.modalEditActionAnimationOutSelection.noResult" + "screens.device.scenes.editActions.modalEditActionAnimationOutSelection.noResult" ) } iconName="select-search" diff --git a/src/Screens/Device/scene.js b/src/Screens/Device/scene.js index 06bc279..b37c43e 100644 --- a/src/Screens/Device/scene.js +++ b/src/Screens/Device/scene.js @@ -239,53 +239,82 @@ function ActionListItem({ drag, navigation, device, item }) { const ListItemAdjustments = () => { let adjustments = []; - if ( - item.type === Constants.actionType.layers && - item.modeAdjustments.layers !== undefined - ) { - const layerGrammarForm = - item.modeAdjustments.layers.length > 1 - ? t( - "screens.device.scenes.sceneActionsListItems.layers.layer_grammar_form.multipleLayers" - ) - : t( - "screens.device.scenes.sceneActionsListItems.layers.layer_grammar_form.oneLayer" - ); - const affectedLayers = item.modeAdjustments.layers.join(", "); + switch (item.type) { + case Constants.actionType.layers: + if (item.modeAdjustments.layers !== undefined) { + const layerGrammarForm = + item.modeAdjustments.layers.length > 1 + ? t( + "screens.device.scenes.sceneActionsListItems.layers.layer_grammar_form.multipleLayers" + ) + : t( + "screens.device.scenes.sceneActionsListItems.layers.layer_grammar_form.oneLayer" + ); + const affectedLayers = item.modeAdjustments.layers.join(", "); - adjustments.push( - - - {appContext.deviceFirmwareModes.lightModes.find( - (lM) => lM.id === item.modeId - ).defaults.length === 0 - ? `${t( - "screens.device.scenes.sceneActionsListItems.layers.applyToLayers", - { - LAYER_GRAMMAR_FORM: layerGrammarForm, - AFFECTED_LAYERS: affectedLayers, - } - )} ` - : `${t( - "screens.device.scenes.sceneActionsListItems.layers.setLayersTo", - { - LAYER_GRAMMAR_FORM: layerGrammarForm, - AFFECTED_LAYERS: affectedLayers, - } - )} ${item.modeAdjustments.colors.length === 0 ? "???" : ""}`} - + adjustments.push( + + + {appContext.deviceFirmwareModes.lightModes.find( + (lM) => lM.id === item.modeId + ).defaults.length === 0 + ? `${t( + "screens.device.scenes.sceneActionsListItems.layers.applyToLayers", + { + LAYER_GRAMMAR_FORM: layerGrammarForm, + AFFECTED_LAYERS: affectedLayers, + } + )} ` + : `${t( + "screens.device.scenes.sceneActionsListItems.layers.setLayersTo", + { + LAYER_GRAMMAR_FORM: layerGrammarForm, + AFFECTED_LAYERS: affectedLayers, + } + )} ${ + item.modeAdjustments.colors.length === 0 ? "???" : "" + }`} + - {item.modeAdjustments.colors !== undefined && - item.modeAdjustments.colors.map((color, index) => ( - - ))} - - ); + {item.modeAdjustments.colors !== undefined && + item.modeAdjustments.colors.map((color, index) => ( + + ))} + + ); + } + break; + case Constants.actionType.ambilight: + console.log("item", item); + + adjustments.push( + + + {t("screens.device.scenes.sceneActionsListItems.ambilight")}{" "} + + + {item.modeAdjustments.colors !== undefined && + item.modeAdjustments.colors.map((color, index) => ( + + ))} + + ); + break; + default: + console.log( + `item type ${item.type} not found in to display ListItemAdjustments` + ); + break; } if ( @@ -334,12 +363,29 @@ function ActionListItem({ drag, navigation, device, item }) { return ( - navigation.navigate("modalLayersEditAction", { + onPress={() => { + let navigateTo; + let options = { actionId: item.actionId, deviceFirmwareVersion: device.firmware.version, - }) - } + }; + + switch (item.type) { + case Constants.actionType.layers: + navigateTo = "modalLightsEditAction"; + options.actionType = Constants.actionType.layers; + break; + case Constants.actionType.ambilight: + navigateTo = "modalLightsEditAction"; + options.actionType = Constants.actionType.ambilight; + break; + default: + console.log("no navigation defined for item type " + item.type); + return; + } + + navigation.navigate(navigateTo, options); + }} >