added option to change layers after the action was created

locales/de.json

@@ -58,6 +58,7 @@
         "infoNoSceneSelected": "Keine Szene ausgewählt",
         "infoNoActionsAvailableInScene": "Keine Aktionen in der Szene vorhanden",
         "buttonAddAction": "Aktion hinzufügen",
+        "buttonChangeLayers": "Ebenen ändern",
         "modalDotsScene": {
           "changeSceneName": "Szenennamen aktualisieren",
           "deleteScene": "Szene löschen"
@@ -115,7 +116,7 @@
             "modeSpecificColors": "Modus spezifische Farben"
           },
           "modalDotsEditAction": {
-            "duplicateAction": "Aktion duplizieren",
+            "changeLayers": "Ebenen ändern",
             "deleteAction": "Aktion löschen"
           },
           "editActionAnimationsCardContent": {

locales/en.json

@@ -58,6 +58,7 @@
         "infoNoSceneSelected": "No scene selected",
         "infoNoActionsAvailableInScene": "No actions available in the scene",
         "buttonAddAction": "Add action",
+        "buttonChangeLayers": "Change layers",
         "modalDotsScene": {
           "changeSceneName": "Change scene name",
           "deleteScene": "Delete scene"
@@ -115,7 +116,7 @@
             "modeSpecificColors": "Mode specific colors"
           },
           "modalDotsEditAction": {
-            "duplicateAction": "Duplicate action",
+            "changeLayers": "Change layers",
             "deleteAction": "Delete action"
           },
           "editActionAnimationsCardContent": {

src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js

@@ -47,7 +47,13 @@ function Layer({ number, selected, onPress }) {
 export default function LayerSelectionModalContent({ navigation, route }) {
   const appContext = useContext(AppContext);
   const { t } = useTranslation();
-  const [selectedLayer, setSelectedLayer] = useState([]);
+
+  const { actionId, selectedLayers } = route.params;
+
+  // The selected layers will be in the params if the user is changing the layers of an existing action
+  const [selectedLayer, setSelectedLayer] = useState(
+    selectedLayers === undefined ? [] : selectedLayers
+  );
 
   const handleSelectLayerClick = (layerNumber) => {
     if (selectedLayer.includes(layerNumber)) {
@@ -81,25 +87,54 @@ export default function LayerSelectionModalContent({ navigation, route }) {
 
       <View style={{ alignItems: "center" }}>
         <MyButton
-          title={t("screens.device.scenes.buttonAddAction")}
+          title={
+            actionId === undefined
+              ? t("screens.device.scenes.buttonAddAction")
+              : t("screens.device.scenes.buttonChangeLayers")
+          }
           style={{ marginTop: 20, width: 180 }}
           disabled={selectedLayer.length === 0}
           onPress={() => {
-            const newAction = NewAction(
-              GetDevice(appContext.devices).selectedScene,
-              Constants.actionType.layers,
-              { layers: selectedLayer }
-            );
+            // The layers will be sorted in ascending order -> 1, 2, 3, 4
+            const sortedSelectedLayers = selectedLayer.sort((a, b) => a - b);
 
-            appContext.setDeviceSceneActions((arr) => [...arr, newAction]);
+            // New action will be created
+            if (actionId === undefined) {
+              const newAction = NewAction(
+                GetDevice(appContext.devices).selectedScene,
+                Constants.actionType.layers,
+                { layers: sortedSelectedLayers }
+              );
 
-            route.params["action"] = newAction;
+              appContext.setDeviceSceneActions((arr) => [...arr, newAction]);
 
-            navigation.navigate(AppSelectedUserDevice.current.routeName);
-            navigation.navigate("modalLightsEditAction", {
-              ...route.params,
-              actionType: Constants.actionType.layers,
-            });
+              route.params["action"] = newAction;
+
+              navigation.navigate(AppSelectedUserDevice.current.routeName);
+              navigation.navigate("modalLightsEditAction", {
+                ...route.params,
+                actionType: Constants.actionType.layers,
+              });
+            } else {
+              // user is editing the layers of an existing action
+
+              appContext.setDeviceSceneActions((arr) => {
+                const newArr = [...arr];
+
+                const actionIndex = newArr.findIndex(
+                  (item) => item.actionId === actionId
+                );
+
+                if (actionIndex !== -1) {
+                  newArr[actionIndex].modeAdjustments.layers =
+                    sortedSelectedLayers;
+                }
+
+                return newArr;
+              });
+
+              navigation.goBack();
+            }
           }}
         />
       </View>

src/Screens/Device/modals/EditActions/Lights/index.js

@@ -34,6 +34,7 @@ import {
   RenderHeaderRight,
 } from "..";
 import { MyPickerModalListItem } from "../../../../../Components/Modal";
+import { ActionTypeIconName } from "../../../scene";
 
 // This component is used by layers and ambilight
 export default function LightsEditActionModalContent({ navigation, route }) {
@@ -64,6 +65,22 @@ export default function LightsEditActionModalContent({ navigation, route }) {
             appContext={appContext}
             navigation={navigation}
             t={t}
+            modalData={
+              actionType === Constants.actionType.layers && [
+                {
+                  icon: ActionTypeIconName(Constants.actionType.layers),
+                  label: t(
+                    "screens.device.scenes.editActions.modalDotsEditAction.changeLayers"
+                  ),
+                  onPress: () =>
+                    navigation.navigate("modalLayerSelection", {
+                      deviceFirmwareVersion: deviceFirmwareVersion,
+                      actionId: action.actionId,
+                      selectedLayers: action.modeAdjustments.layers,
+                    }),
+                },
+              ]
+            }
           />
         ),
       });

src/Screens/Device/modals/EditActions/index.js

@@ -325,50 +325,34 @@ function EditActionSliderAdjustment({ action, adjustmentType, adjustment }) {
   );
 }
 
-export function RenderHeaderRight({ navigation, appContext, t, action }) {
-  return (
-    <MyDotsModal
-      modalData={[
-        /*{
-                TODO: Fix it
-                  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.editActions.modalDotsEditAction.deleteAction"
-          ),
-          onPress: () => {
-            appContext.setDeviceSceneActions((actions) =>
-              actions.filter((a) => a.actionId !== action.actionId)
-            );
+export function RenderHeaderRight({
+  navigation,
+  appContext,
+  t,
+  action,
+  modalData,
+}) {
+  const data = [];
 
-            navigation.goBack();
-          },
-        },
-      ]}
-    />
-  );
+  if (modalData) {
+    for (let i = 0; i < modalData.length; i++) {
+      data.push(modalData[i]);
+    }
+  }
+
+  data.push({
+    icon: "trash-can",
+    label: t(
+      "screens.device.scenes.editActions.modalDotsEditAction.deleteAction"
+    ),
+    onPress: () => {
+      appContext.setDeviceSceneActions((actions) =>
+        actions.filter((a) => a.actionId !== action.actionId)
+      );
+
+      navigation.goBack();
+    },
+  });
+
+  return <MyDotsModal modalData={data} />;
 }