added motor action

App.js

@@ -35,6 +35,9 @@ import LightsEditActionModalContent, {
   LightsEditActionColorModeSelectionModalContent,
 } from "./src/Screens/Device/modals/EditActions/Lights";
 import { EditActionAnimationSelectionModalContent } from "./src/Screens/Device/modals/EditActions";
+import MotorEditActionModalContent, {
+  MotorEditActionMotorModeSelectionModalContent,
+} from "./src/Screens/Device/modals/EditActions/Motor";
 
 const Drawer = createDrawerNavigator();
 const Stack = createStackNavigator();
@@ -205,6 +208,32 @@ export function MyApp() {
             }
           />
 
+          <Stack.Screen
+            name="modalMotorEditAction"
+            component={MotorEditActionModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.editActions.modalMotorEditAction.pageTitle"
+                ),
+              })
+            }
+          />
+
+          <Stack.Screen
+            name="modalMotorEditActionMotorModeSelection"
+            component={MotorEditActionMotorModeSelectionModalContent}
+            options={({ navigation }) =>
+              options({
+                navigation: navigation,
+                pageTitle: t(
+                  "screens.device.scenes.editActions.modalMotorEditActionMotorModeSelection.pageTitle"
+                ),
+              })
+            }
+          />
+
           <Stack.Screen
             name="modalUpdateSceneName"
             component={UpdateSceneNameModalContent}

locales/de.json

@@ -113,6 +113,17 @@
           "modalEditActionAnimationOutSelection": {
             "pageTitle": "Animation out auswählen",
             "noResult": "Keine Animationen verfügbar"
+          },
+          "modalMotorEditAction": {
+            "pageTitle": "Motor einstellen",
+            "dropdownMotorModeSelection": {
+              "label": "Wähle einen Motormodus",
+              "noMotorModeSelected": "Kein Motormodus ausgewählt"
+            },
+            "modeSpecificSettings": "Modus spezifische Einstellungen"
+          },
+          "modalMotorEditActionMotorModeSelection": {
+            "pageTitle": "Motormodus wählen"
           }
         },
         "modalUpdateSceneName": {

locales/en.json

@@ -113,6 +113,17 @@
           "modalEditActionAnimationOutSelection": {
             "pageTitle": "Choose animation out",
             "noResult": "No animations available"
+          },
+          "modalMotorEditAction": {
+            "pageTitle": "Adjust motor",
+            "dropdownMotorModeSelection": {
+              "label": "Choose a motor mode",
+              "noMotorModeSelected": "No motor mode selected"
+            },
+            "modeSpecificSettings": "Mode specific settings"
+          },
+          "modalMotorEditActionMotorModeSelection": {
+            "pageTitle": "Choose motor mode"
           }
         },
         "modalUpdateSceneName": {

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

@@ -93,7 +93,7 @@ export default function LayerSelectionModalContent({ navigation, route }) {
 
             appContext.setDeviceSceneActions((arr) => [...arr, newAction]);
 
-            route.params["actionId"] = newAction.actionId;
+            route.params["action"] = newAction;
 
             navigation.navigate(AppSelectedUserDevice.current.routeName);
             navigation.navigate("modalLightsEditAction", {

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

@@ -94,7 +94,7 @@ export default function AddSceneActionModalContent({ navigation, route }) {
 
     appContext.setDeviceSceneActions((arr) => [...arr, newAction]);
 
-    route.params["actionId"] = newAction.actionId;
+    route.params["action"] = newAction;
 
     if (actionType === Constants.actionType.ambilight) {
       route.params["actionType"] = Constants.actionType.ambilight;
@@ -111,7 +111,9 @@ 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("modalLayerSelection", route.params)}
+          onPress={() =>
+            navigation.navigate("modalLayerSelection", route.params)
+          }
           deviceFirmwareVersion={deviceFirmwareVersion}
           supportedFirmwareVersions={["1.0.1"]}
         />
@@ -122,13 +124,13 @@ export default function AddSceneActionModalContent({ navigation, route }) {
           )}
           iconName={ActionTypeIconName(Constants.actionType.ambilight)}
           imageSource={require("../../../../../assets/ambilight.gif")}
-          onPress={() => {
+          onPress={() =>
             handleCreateAction(
               Constants.actionType.ambilight,
               {},
               "modalLightsEditAction"
-            );
+            )
-          }}
+          }
           deviceFirmwareVersion={deviceFirmwareVersion}
           supportedFirmwareVersions={["1.0.1"]}
         />
@@ -137,7 +139,13 @@ export default function AddSceneActionModalContent({ navigation, route }) {
           text={t("screens.device.scenes.modalAddSceneAction.actions.motor")}
           iconName={ActionTypeIconName(Constants.actionType.motor)}
           imageSource={require("../../../../../assets/motor.gif")}
-          onPress={() => console.log("pressed action")}
+          onPress={() =>
+            handleCreateAction(
+              Constants.actionType.motor,
+              {},
+              "modalMotorEditAction"
+            )
+          }
           deviceFirmwareVersion={deviceFirmwareVersion}
           supportedFirmwareVersions={["1.0.1"]}
         />

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

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useState } from "react";
+import { useCallback, useContext, useState } from "react";
 import { FlatList } from "react-native";
 import {
   AppContext,

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

@@ -31,6 +31,7 @@ import { MyColorPickerV2 } from "../../../../../Components/ColorPicker";
 import {
   EditActionAdjustmentsContent,
   EditActionAnimationsCardContent,
+  RenderHeaderRight,
 } from "..";
 import {
   MyDotsModal,
@@ -47,9 +48,7 @@ export default function LightsEditActionModalContent({ navigation, route }) {
   const colorPickerRef = useRef(ColorPickerRef);
   const { t } = useTranslation();
 
-  const { actionType, actionId, deviceFirmwareVersion } = route.params;
+  const { actionType, deviceFirmwareVersion, action } = route.params;
-
-  console.log("actionType", actionType);
 
   useFocusEffect(
     useCallback(() => {
@@ -63,47 +62,11 @@ export default function LightsEditActionModalContent({ navigation, route }) {
                 "screens.device.scenes.editActions.modalLightsEditAction.ambilightPageTitle"
               ),
         headerRight: () => (
-          <MyDotsModal
+          <RenderHeaderRight
-            modalData={[
+            action={action}
-              /*{
+            appContext={appContext}
-                  bug: Duplicated item as references to the old action -> if the color is changed it will apply on both actions
+            navigation={navigation}
-  
+            t={t}
-                  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 !== actionId)
-                  );
-
-                  navigation.goBack();
-                },
-              },
-            ]}
           />
         ),
       });
@@ -115,40 +78,33 @@ export default function LightsEditActionModalContent({ navigation, route }) {
       lightMode.supportedFirmwareVersions.includes(deviceFirmwareVersion)
     );
 
-  const selectedSceneAction = appContext.deviceSceneActions.find(
-    (a) => a.actionId === actionId
-  );
-
   const [lightModeDefaultColors, setLightModeDefaultColors] = useState([]);
 
-  // check if selectedSceneAction exists before accessing modeId as the action could be deleted by the user
+  // check if action exists before accessing modeId as the action could be deleted by the user
   const selectedLightMode = supportedDeviceLightModes.find(
-    (s) => s.id === (selectedSceneAction && selectedSceneAction.modeId)
+    (s) => s.id === (action && action.modeId)
   );
 
   useEffect(() => {
     if (colorPickerRef.current && selectedLightMode.defaults.length > 0) {
-      colorPickerRef.current.setColor(
+      colorPickerRef.current.setColor(action.modeAdjustments.colors[0]);
-        selectedSceneAction.modeAdjustments.colors[0]
-      );
     }
   }, [lightModeDefaultColors]);
 
   useEffect(() => {
     if (selectedLightMode !== undefined) {
-      sharedLightModeDefaultColors.value =
+      sharedLightModeDefaultColors.value = action.modeAdjustments.colors;
-        selectedSceneAction.modeAdjustments.colors;
+      setLightModeDefaultColors(action.modeAdjustments.colors);
-      setLightModeDefaultColors(selectedSceneAction.modeAdjustments.colors);
       setSelectedDefaultLightModeColor(0);
     }
-  }, [selectedSceneAction?.modeId]);
+  }, [action?.modeId]);
 
   const saveColorsToModeAdjustments = () => {
     appContext.setDeviceSceneActions((arr) => {
       const newArr = [...arr];
 
       const foundSceneActionIndex = arr.findIndex(
-        (a) => a.actionId === selectedSceneAction.actionId
+        (a) => a.actionId === action.actionId
       );
 
       if (foundSceneActionIndex !== -1) {
@@ -160,15 +116,10 @@ export default function LightsEditActionModalContent({ navigation, route }) {
     });
   };
 
-  if (!selectedSceneAction) return null;
+  if (!action) return null;
 
   return (
-    <View
+    <ModalContainer withoutPadding>
-      style={{
-        backgroundColor: appContext.appTheme.backgroundColor,
-        height: "100%",
-      }}
-    >
       <DeviceLivePreview />
 
       <MyDeviceTabButtonContainer>
@@ -190,7 +141,7 @@ export default function LightsEditActionModalContent({ navigation, route }) {
               "screens.device.scenes.editActions.modalLightsEditAction.dropdownColorModeSelection.label"
             )}
             selectedItemLabel={
-              selectedSceneAction.modeId === ""
+              action.modeId === ""
                 ? t(
                     "screens.device.scenes.editActions.modalLightsEditAction.dropdownColorModeSelection.noColorModeSelected"
                   )
@@ -199,12 +150,12 @@ export default function LightsEditActionModalContent({ navigation, route }) {
             onPress={() =>
               navigation.navigate("modalLightsEditActionColorModeSelection", {
                 supportedDeviceLightModes: supportedDeviceLightModes,
-                action: selectedSceneAction,
+                action: action,
               })
             }
           />
 
-          {selectedSceneAction.modeId !== "" && (
+          {action.modeId !== "" && (
             <>
               {lightModeDefaultColors.length > 0 && (
                 <>
@@ -285,7 +236,7 @@ export default function LightsEditActionModalContent({ navigation, route }) {
               )}
 
               <EditActionAdjustmentsContent
-                action={selectedSceneAction}
+                action={action}
                 adjustmentType="mode"
                 adjustments={selectedLightMode.adjustments}
               />
@@ -294,13 +245,13 @@ export default function LightsEditActionModalContent({ navigation, route }) {
         </Card>
 
         <EditActionAnimationsCardContent
-          disabled={selectedSceneAction.modeId === ""}
+          disabled={action.modeId === ""}
           navigation={navigation}
           deviceFirmwareVersion={deviceFirmwareVersion}
-          action={selectedSceneAction}
+          action={action}
         />
       </ScrollView>
-    </View>
+    </ModalContainer>
   );
 }
 
@@ -350,12 +301,12 @@ export function LightsEditActionColorModeSelectionModalContent({
 }) {
   const appContext = useContext(AppContext);
 
-  const { action } = route.params;
+  const { action, supportedDeviceLightModes } = route.params;
 
   return (
     <ModalContainer withoutPadding>
       <FlatList
-        data={route.params.supportedDeviceLightModes}
+        data={supportedDeviceLightModes}
         keyExtractor={(item) => item.id}
         renderItem={({ item }) => (
           <MyPickerModalListItem

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

@@ -0,0 +1,155 @@
+import { useCallback, useContext } from "react";
+import { AppContext, ModalContainer } from "../../../../../utils";
+import { DeviceLivePreview } from "../../..";
+import { FlatList, ScrollView } from "react-native";
+import Card from "../../../../../Components/Card";
+import MyDropdown from "../../../../../Components/Dropdown";
+import { useTranslation } from "react-i18next";
+import {
+  EditActionAdjustmentsContent,
+  EditActionAnimationsCardContent,
+  RenderHeaderRight,
+} from "..";
+import { MyPickerModalListItem } from "../../../../../Components/Modal";
+import { useFocusEffect } from "@react-navigation/native";
+
+export default function MotorEditActionModalContent({ navigation, route }) {
+  const appContext = useContext(AppContext);
+  const { t } = useTranslation();
+
+  const { action, deviceFirmwareVersion } = route.params;
+
+  const supportedDeviceMotorModes =
+    appContext.deviceFirmwareModes.motorModes.filter((motorMode) =>
+      motorMode.supportedFirmwareVersions.includes(deviceFirmwareVersion)
+    );
+
+  // check if action exists before accessing modeId as the action could be deleted by the user
+  const selectedMotorMode = supportedDeviceMotorModes.find(
+    (s) => s.id === (action && action.modeId)
+  );
+
+  useFocusEffect(
+    useCallback(() => {
+      navigation.setOptions({
+        headerRight: () => (
+          <RenderHeaderRight
+            navigation={navigation}
+            action={action}
+            appContext={appContext}
+            t={t}
+          />
+        ),
+      });
+    }, [])
+  );
+
+  if (!action) return null;
+
+  return (
+    <ModalContainer withoutPadding>
+      <DeviceLivePreview />
+
+      <ScrollView>
+        <Card>
+          <MyDropdown
+            style={{ marginBottom: 2 }}
+            label={t(
+              "screens.device.scenes.editActions.modalMotorEditAction.dropdownMotorModeSelection.label"
+            )}
+            selectedItemLabel={
+              action.modeId === ""
+                ? t(
+                    "screens.device.scenes.editActions.modalMotorEditAction.dropdownMotorModeSelection.noMotorModeSelected"
+                  )
+                : selectedMotorMode.name[appContext.appLanguage]
+            }
+            onPress={() =>
+              navigation.navigate("modalMotorEditActionMotorModeSelection", {
+                supportedDeviceMotorModes: supportedDeviceMotorModes,
+                action: action,
+              })
+            }
+          />
+
+          {action.modeId !== "" && (
+            <EditActionAdjustmentsContent
+              action={action}
+              adjustmentType="mode"
+              adjustments={selectedMotorMode.adjustments}
+            />
+          )}
+        </Card>
+
+        <EditActionAnimationsCardContent
+          disabled={action.modeId === ""}
+          navigation={navigation}
+          deviceFirmwareVersion={deviceFirmwareVersion}
+          action={action}
+        />
+      </ScrollView>
+    </ModalContainer>
+  );
+}
+
+export function MotorEditActionMotorModeSelectionModalContent({
+  navigation,
+  route,
+}) {
+  const appContext = useContext(AppContext);
+
+  const { action, supportedDeviceMotorModes } = route.params;
+
+  return (
+    <ModalContainer withoutPadding>
+      <FlatList
+        data={supportedDeviceMotorModes}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => (
+          <MyPickerModalListItem
+            itemName={item.name[appContext.appLanguage]}
+            itemSelected={action.modeId === item.id}
+            onPress={() => {
+              appContext.setDeviceSceneActions((arr) => {
+                const newArr = [...arr];
+
+                const actionIndex = newArr.findIndex(
+                  (a) => a.actionId === action.actionId
+                );
+
+                if (actionIndex !== -1) {
+                  newArr[actionIndex].modeId = item.id;
+
+                  /* const lightModeDefaultColors =
+                    appContext.deviceFirmwareModes.lightModes.find(
+                      (lM) => lM.id === item.id
+                    );
+
+                  if (lightModeDefaultColors !== undefined) {
+                    if (lightModeDefaultColors.defaults !== undefined) {
+                      newArr[actionIndex].modeAdjustments.colors =
+                        appContext.deviceFirmwareModes.lightModes.find(
+                          (lM) => lM.id === item.id
+                        ).defaults;
+                    }
+                  }*/
+
+                  item.adjustments.forEach(
+                    (adjustment) =>
+                      (newArr[actionIndex].modeAdjustments[
+                        adjustment.variableName
+                      ] = adjustment.defaultValue)
+                  );
+                }
+
+                return newArr;
+              });
+
+              navigation.goBack();
+            }}
+          />
+        )}
+      />
+    </ModalContainer>
+  );
+}

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

@@ -10,7 +10,10 @@ import { useTranslation } from "react-i18next";
 import Card from "../../../../Components/Card";
 import MyDropdown from "../../../../Components/Dropdown";
 import MyResult from "../../../../Components/Result";
-import { MyPickerModalListItem } from "../../../../Components/Modal";
+import {
+  MyDotsModal,
+  MyPickerModalListItem,
+} from "../../../../Components/Modal";
 import MySlider from "../../../../Components/Slider";
 import MyIcon from "../../../../Components/Icon";
 import { useFocusEffect } from "@react-navigation/native";
@@ -236,6 +239,7 @@ export function EditActionAdjustmentsContent({
             );
           }
 
+          console.log("EditActionAdjustmentsContent item type not found");
           return <Text>Item type not found</Text>;
         }}
       />
@@ -309,3 +313,51 @@ 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)
+            );
+
+            navigation.goBack();
+          },
+        },
+      ]}
+    />
+  );
+}

src/Screens/Device/scene.js

@@ -3,11 +3,12 @@ import Card from "../../Components/Card";
 import {
   AppContext,
   AppSelectedUserDevice,
+  AppStyles,
   Constants,
   GetDevice,
   VibrateShort,
 } from "../../utils";
-import { useCallback, useContext, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import MyDropdown from "../../Components/Dropdown";
 import MyIcon from "../../Components/Icon";
 import { useTranslation } from "react-i18next";
@@ -172,10 +173,13 @@ export default function SceneView({ navigation }) {
           ListFooterComponent={
             <MyTextButton
               title={t("screens.device.scenes.buttonAddAction")}
-              styleContainer={{
+              styleContainer={[
-                alignItems: "center",
+                {
-                marginTop: 10,
+                  alignItems: "center",
-              }}
+                  marginTop: 10,
+                },
+                AppStyles.appBottom,
+              ]}
               style={{ padding: 8 }}
               actionColor={
                 deviceSceneActions === undefined ||
@@ -212,19 +216,20 @@ function ActionListItem({ drag, navigation, device, item }) {
   const appContext = useContext(AppContext);
   const { t } = useTranslation();
 
-  const ListItemTitle = () => {
+  let navigateTo;
+  let navigateToOptions = {
+    deviceFirmwareVersion: device.firmware.version,
+    action: item,
+  };
+  let itemModeList = [];
+  let adjustments = [];
+
+  const ListItem = ({ text, children }) => {
     return (
-      <Text
+      <View style={{ flexDirection: "row", alignItems: "center" }}>
-        style={{
+        <Text style={{ color: appContext.appTheme.textSecondary }}>{text}</Text>
-          color: appContext.appTheme.colors.primary,
+        {children}
-        }}
+      </View>
-      >
-        {item.modeId === ""
-          ? "???"
-          : appContext.deviceFirmwareModes.lightModes.find(
-              (lM) => lM.id === item.modeId
-            ).name[appContext.appLanguage]}
-      </Text>
     );
   };
 
@@ -236,48 +241,100 @@ function ActionListItem({ drag, navigation, device, item }) {
     }${usedAnimation.adjustment.unitOfMeasurement[appContext.appLanguage]})`;
   };
 
-  const ListItemAdjustments = () => {
+  const ListItemTitle = () => {
-    let adjustments = [];
+    return (
+      <Text
+        style={{
+          color: appContext.appTheme.colors.primary,
+        }}
+      >
+        {item.modeId === ""
+          ? "???"
+          : itemModeList.find((m) => m.id === item.modeId).name[
+              appContext.appLanguage
+            ]}
+      </Text>
+    );
+  };
 
-    switch (item.type) {
+  switch (item.type) {
-      case Constants.actionType.layers:
+    case Constants.actionType.layers:
-        if (item.modeAdjustments.layers !== undefined) {
+      navigateTo = "modalLightsEditAction";
-          const layerGrammarForm =
+      navigateToOptions.actionType = Constants.actionType.layers;
-            item.modeAdjustments.layers.length > 1
+      itemModeList = appContext.deviceFirmwareModes.lightModes;
-              ? 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(
+      if (item.modeAdjustments.layers !== undefined) {
-            <View style={{ flexDirection: "row", alignItems: "center" }}>
+        const layerGrammarForm =
-              <Text style={{ color: appContext.appTheme.textSecondary }}>
+          item.modeAdjustments.layers.length > 1
-                {appContext.deviceFirmwareModes.lightModes.find(
+            ? t(
-                  (lM) => lM.id === item.modeId
+                "screens.device.scenes.sceneActionsListItems.layers.layer_grammar_form.multipleLayers"
-                ).defaults.length === 0
+              )
-                  ? `${t(
+            : t(
-                      "screens.device.scenes.sceneActionsListItems.layers.applyToLayers",
+                "screens.device.scenes.sceneActionsListItems.layers.layer_grammar_form.oneLayer"
-                      {
+              );
-                        LAYER_GRAMMAR_FORM: layerGrammarForm,
+        const affectedLayers = item.modeAdjustments.layers.join(", ");
-                        AFFECTED_LAYERS: affectedLayers,
-                      }
-                    )} `
-                  : `${t(
-                      "screens.device.scenes.sceneActionsListItems.layers.setLayersTo",
-                      {
-                        LAYER_GRAMMAR_FORM: layerGrammarForm,
-                        AFFECTED_LAYERS: affectedLayers,
-                      }
-                    )} ${
-                      item.modeAdjustments.colors.length === 0 ? "???" : ""
-                    }`}
-              </Text>
 
-              {item.modeAdjustments.colors !== undefined &&
+        const lightMode = appContext.deviceFirmwareModes.lightModes.find(
-                item.modeAdjustments.colors.map((color, index) => (
+          (lM) => lM.id === item.modeId
+        );
+
+        adjustments.push(
+          <ListItem
+            text={
+              lightMode && (
+                <>
+                  {lightMode.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 ? "???" : ""
+                      }`}
+                </>
+              )
+            }
+            children={
+              item.modeAdjustments.colors !== undefined && (
+                <>
+                  {item.modeAdjustments.colors.map((color, index) => (
+                    <MyColorSwatch
+                      key={index}
+                      backgroundColor={color}
+                      size={16}
+                      style={{ marginRight: -2 }}
+                    />
+                  ))}
+                </>
+              )
+            }
+          />
+        );
+      }
+      break;
+    case Constants.actionType.ambilight:
+      navigateTo = "modalLightsEditAction";
+      navigateToOptions.actionType = Constants.actionType.ambilight;
+      itemModeList = appContext.deviceFirmwareModes.lightModes;
+
+      adjustments.push(
+        <ListItem
+          text={
+            <>{t("screens.device.scenes.sceneActionsListItems.ambilight")} </>
+          }
+          children={
+            item.modeAdjustments.colors !== undefined && (
+              <>
+                {item.modeAdjustments.colors.map((color, index) => (
                   <MyColorSwatch
                     key={index}
                     backgroundColor={color}
@@ -285,126 +342,87 @@ function ActionListItem({ drag, navigation, device, item }) {
                     style={{ marginRight: -2 }}
                   />
                 ))}
-            </View>
+              </>
-          );
+            )
-        }
+          }
-        break;
+        />
-      case Constants.actionType.ambilight:
+      );
-        console.log("item", item);
+      break;
+    case Constants.actionType.motor:
+      navigateTo = "modalMotorEditAction";
+      itemModeList = appContext.deviceFirmwareModes.motorModes;
 
-        adjustments.push(
+      //adjustments.push(<ListItem text={"Motor"} />);
-          <View style={{ flexDirection: "row", alignItems: "center" }}>
+      break;
-            <Text style={{ color: appContext.appTheme.textSecondary }}>
+    default:
-              {t("screens.device.scenes.sceneActionsListItems.ambilight")}{" "}
+      console.log("item type not defined" + item.type);
-            </Text>
+      return;
+  }
 
-            {item.modeAdjustments.colors !== undefined &&
+  if (
-              item.modeAdjustments.colors.map((color, index) => (
+    item.animationInId !== Constants.defaultAnimationId ||
-                <MyColorSwatch
+    item.animationOutId !== Constants.defaultAnimationId
-                  key={index}
+  ) {
-                  backgroundColor={color}
+    let inAndOutAnimation = [];
-                  size={16}
-                  style={{ marginRight: -2 }}
-                />
-              ))}
-          </View>
-        );
-        break;
-      default:
-        console.log(
-          `item type ${item.type} not found in to display ListItemAdjustments`
-        );
-        break;
-    }
 
-    if (
+    if (item.animationInId !== Constants.defaultAnimationId) {
-      item.animationInId !== Constants.defaultAnimationId ||
+      inAndOutAnimation.push(
-      item.animationOutId !== Constants.defaultAnimationId
+        getAnimationText(
-    ) {
+          appContext.deviceFirmwareModes.lightAnimationsIn,
-      let inAndOutAnimation = [];
+          item.animationInId,
-
+          item.animationInAdjustment
-      if (item.animationInId !== Constants.defaultAnimationId) {
+        )
-        inAndOutAnimation.push(
-          getAnimationText(
-            appContext.deviceFirmwareModes.lightAnimationsIn,
-            item.animationInId,
-            item.animationInAdjustment
-          )
-        );
-      }
-
-      if (item.animationOutId !== Constants.defaultAnimationId) {
-        inAndOutAnimation.push(
-          getAnimationText(
-            appContext.deviceFirmwareModes.lightAnimationsOut,
-            item.animationOutId,
-            item.animationOutAdjustment
-          )
-        );
-      }
-
-      adjustments.push(
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
-          <MyIcon name="transition" size={16} />
-          <Text style={{ color: appContext.appTheme.textSecondary }}>
-            {inAndOutAnimation.join(", ")}
-          </Text>
-        </View>
       );
     }
 
-    return adjustments.map((adjustment, index) => (
+    if (item.animationOutId !== Constants.defaultAnimationId) {
-      <View key={index} style={{ flexDirection: "row" }}>
+      inAndOutAnimation.push(
-        {adjustment}
+        getAnimationText(
+          appContext.deviceFirmwareModes.lightAnimationsOut,
+          item.animationOutId,
+          item.animationOutAdjustment
+        )
+      );
+    }
+
+    adjustments.push(
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+        <MyIcon name="transition" size={16} />
+        <Text style={{ color: appContext.appTheme.textSecondary }}>
+          {inAndOutAnimation.join(", ")}
+        </Text>
       </View>
-    ));
+    );
-  };
+  }
 
   return (
     <View style={{ marginLeft: 15, marginRight: 15 }}>
       <TouchableOpacity
-        onPress={() => {
+        onPress={() => navigation.navigate(navigateTo, navigateToOptions)}
-          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);
-        }}
       >
-        <View
+        <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
-          style={{
+          <View
-            flexDirection: "row",
+            style={{
-            alignItems: "center",
+              flexDirection: "row",
-            justifyContent: "space-between",
+              alignItems: "center",
-          }}
+            }}
-        >
+          >
-          <View style={{ flexDirection: "row" }}>
+            <MyIcon name={ActionTypeIconName(item.type)} size={24} />
-            <MyIcon
-              name={ActionTypeIconName(item.type)}
-              size={24}
-              style={item.modeId !== "" && { marginTop: 6 }}
-            />
 
-            <View style={{ marginLeft: 12 }}>
+            <View style={{ flexDirection: "row" }}>
-              <ListItemTitle />
+              <View style={{ marginLeft: 12 }}>
+                <ListItemTitle />
 
-              {item.modeId !== "" && <ListItemAdjustments />}
+                {item.modeId !== "" && (
+                  <>
+                    {adjustments.map((adjustment, index) => (
+                      <View key={index} style={{ flexDirection: "row" }}>
+                        {adjustment}
+                      </View>
+                    ))}
+                  </>
+                )}
+              </View>
             </View>
           </View>
 

src/utils.js

@@ -71,6 +71,9 @@ export const AppStyles = StyleSheet.create({
   deviceLivePreview: {
     height: 200,
   },
+  appBottom: {
+    marginBottom: 40,
+  },
 });
 
 const DarkAppTheme = {
@@ -367,13 +370,134 @@ const devDevicesFirmwareModes = {
   motorModes: [
     {
       id: "41de8c57-fc99-40a4-b6eb-a8d0d4569bc8",
-      type: "motor",
+      supportedFirmwareVersions: ["1.0.1"],
       name: {
         de: "Hin und her",
         en: "Back and forth",
       },
       defaults: [],
-      adjustments: [],
+      adjustments: [
+        {
+          type: "slider",
+          variableName: "duration",
+          iconName: "repeat-variant",
+          name: {
+            de: "Dauer",
+            en: "Duration",
+          },
+          min: 1,
+          max: 6,
+          defaultValue: 2,
+          unitOfMeasurement: {
+            de: "s",
+            en: "s",
+          },
+        },
+      ],
+    },
+  ],
+  motorAnimationsIn: [
+    {
+      id: "b27003a7-447d-4b2b-b89a-5780b91f6614",
+      supportedFirmwareVersions: ["1.0.1"],
+      name: {
+        de: "Ruckartig in",
+        en: "Jerking in",
+      },
+      defaults: [],
+      adjustment: {
+        type: "slider",
+        variableName: "duration",
+        iconName: "repeat-variant",
+        name: {
+          de: "Dauer",
+          en: "Duration",
+        },
+        min: 1,
+        max: 3,
+        defaultValue: 2,
+        unitOfMeasurement: {
+          de: "s",
+          en: "s",
+        },
+      },
+    },
+    {
+      id: "13096781-92d7-4694-a8b8-b3a92399b922",
+      supportedFirmwareVersions: ["1.0.1"],
+      name: {
+        de: "Glatt in",
+        en: "Smooth in",
+      },
+      defaults: [],
+      adjustment: {
+        type: "slider",
+        variableName: "duration",
+        iconName: "repeat-variant",
+        name: {
+          de: "Dauer",
+          en: "Duration",
+        },
+        min: 1,
+        max: 8,
+        defaultValue: 4,
+        unitOfMeasurement: {
+          de: "s",
+          en: "s",
+        },
+      },
+    },
+  ],
+  motorAnimationsOut: [
+    {
+      id: "b27003a7-447d-4b2b-b89a-5780b91f6614",
+      supportedFirmwareVersions: ["1.0.1"],
+      name: {
+        de: "Ruckartig out",
+        en: "Jerking out",
+      },
+      defaults: [],
+      adjustment: {
+        type: "slider",
+        variableName: "duration",
+        iconName: "repeat-variant",
+        name: {
+          de: "Dauer",
+          en: "Duration",
+        },
+        min: 1,
+        max: 3,
+        defaultValue: 2,
+        unitOfMeasurement: {
+          de: "s",
+          en: "s",
+        },
+      },
+    },
+    {
+      id: "13096781-92d7-4694-a8b8-b3a92399b922",
+      supportedFirmwareVersions: ["1.0.1"],
+      name: {
+        de: "Glatt out",
+        en: "Smooth out",
+      },
+      defaults: [],
+      adjustment: {
+        type: "slider",
+        variableName: "duration",
+        iconName: "repeat-variant",
+        name: {
+          de: "Dauer",
+          en: "Duration",
+        },
+        min: 1,
+        max: 8,
+        defaultValue: 4,
+        unitOfMeasurement: {
+          de: "s",
+          en: "s",
+        },
+      },
     },
   ],
 };
@@ -572,7 +696,7 @@ export function VibrateShort() {
 export function ModalContainer({ children, withoutPadding }) {
   return (
     <View style={[{ flex: 1 }, !withoutPadding && { padding: 10 }]}>
-      <View>{children}</View>
+      {children}
     </View>
   );
 }