added languages for device

locales/de.json

@@ -25,6 +25,47 @@
         "deviceFirmwareVersionText": "Firmware Version",
         "deviceLastUpdatedText": "Letzte Aktualisierung",
         "modalTextInputDeviceNameDescription": "Der Name des Geräts wird lokal auf dem Gerät gespeichert und dient Ihnen dazu, die verbundenen Geräte in der App voneinander zu unterscheiden."
+      },
+      "scenes": {
+        "dropdownSceneSelection": {
+          "label": "Szene",
+          "noSceneSelected": "Keine Szene ausgewählt"
+        },
+        "infoNoSceneSelected": "Keine Szene ausgewählt",
+        "infoNoActionsAvailableInScene": "Keine Aktionen in der Szene vorhanden",
+        "buttonAddAction": "Aktion hinzufügen",
+        "modalChooseScene": {
+          "headerTitle": "Wähle eine Szene aus",
+          "textButtonAddScene": "Neue Szene erstellen"
+        },
+        "modalCreateScene": {
+          "headerTitle": "Szene erstellen",
+          "options": {
+            "emptyScene": "Leere Szene erstellen",
+            "standardScene": "Standard Szene erstellen",
+            "copyExistingScene": "Vorhandene Szene kopieren"
+          }
+        },
+        "modalAddSceneAction": {
+          "headerTitle": "Aktion hinzufügen",
+          "actions": {
+            "layers": "Ebenen",
+            "motor": "Motor",
+            "ambilight": "Ambilight",
+            "waitXSeconds": "Warte X Sekunden",
+            "waitUntilTimeX": "Warten bis Zeit X",
+            "stop": "Stop",
+            "timeControl": "Zeitsteuerung",
+            "waitForConfirmationWithKey": "Warte auf Bestätigung mit Taste",
+            "jumpToScene": "Springe zu Szene"
+          }
+        },
+        "modalLayerSection": {
+          "headerTitle": "Layer auswahl"
+        },
+        "modalLayersEditAction": {
+          "headerTitle": "Ebenen bearbeiten"
+        }
       }
     },
     "settings": {

locales/en.json

@@ -25,6 +25,47 @@
         "deviceFirmwareVersionText": "Firmware Version",
         "deviceLastUpdatedText": "Last updated",
         "modalTextInputDeviceNameDescription": "The name of the device is stored locally on the device and serves you to distinguish the connected devices from each other in the app."
+      },
+      "scenes": {
+        "dropdownSceneSelection": {
+          "label": "Scene",
+          "noSceneSelected": "No scene selected"
+        },
+        "infoNoSceneSelected": "No scene selected",
+        "infoNoActionsAvailableInScene": "No actions available in the scene",
+        "buttonAddAction": "Add action",
+        "modalChooseScene": {
+          "headerTitle": "Choose a scene",
+          "textButtonAddScene": "Create new scene"
+        },
+        "modalCreateScene": {
+          "headerTitle": "Create scene",
+          "options": {
+            "emptyScene": "Create empty scene",
+            "standardScene": "Create standard scene",
+            "copyExistingScene": "Copy an existing scene"
+          }
+        },
+        "modalAddSceneAction": {
+          "headerTitle": "Add action",
+          "actions": {
+            "layers": "Layers",
+            "motor": "Motor",
+            "ambilight": "Ambilight",
+            "waitXSeconds": "Wait X seconds",
+            "waitUntilTimeX": "Wait until time X",
+            "stop": "Stop",
+            "timeControl": "Time control",
+            "waitForConfirmationWithKey": "Wait for confirmation with button",
+            "jumpToScene": "Jump to scene"
+          }
+        },
+        "modalLayerSection": {
+          "headerTitle": "Layer selection"
+        },
+        "modalLayersEditAction": {
+          "headerTitle": "Edit layers"
+        }
       }
     },
     "settings": {

src/Screens/Device/deviceTabButton.js

@@ -0,0 +1,37 @@
+import { useContext } from "react";
+import { AppContext } from "../../utils";
+import { TouchableHighlight, TouchableOpacity } from "react-native";
+import MyIcon from "../../Components/Icon";
+
+const spaceToSide = 10; // left and right
+const top = 35;
+const spaceBetweenButtons = 60;
+
+export const topFirst = top;
+export const topSecond = top + spaceBetweenButtons;
+export const topThird = top + 2 * spaceBetweenButtons;
+
+export const MyDeviceTabButton = ({ top, iconName, iconColor, onPress }) => {
+  const appContext = useContext(AppContext);
+
+  const TouchComponent =
+    appContext.appColorScheme === "dark"
+      ? TouchableHighlight
+      : TouchableOpacity;
+
+  return (
+    <TouchComponent
+      onPress={onPress}
+      style={{
+        position: "absolute",
+        backgroundColor: appContext.appTheme.card.backgroundColor,
+        borderRadius: 10,
+        padding: 8,
+        top: top,
+        right: spaceToSide,
+      }}
+    >
+      <MyIcon name={iconName} size={30} color={iconColor} />
+    </TouchComponent>
+  );
+};

src/Screens/Device/index.js

@@ -1,26 +1,14 @@
 import { useContext, useState } from "react";
-import {
+import { Image, ScrollView, StyleSheet, View, Text } from "react-native";
-  Image,
-  ScrollView,
-  StyleSheet,
-  View,
-  Text,
-  TouchableHighlight,
-  TouchableOpacity,
-  ImageBackground,
-} from "react-native";
 import { AppContext } from "../../utils";
-import MyIcon from "../../Components/Icon";
 import SettingsView from "./settings";
 import SceneView from "./scene";
-
+import {
-const spaceToSide = 10; // left and right
+  MyDeviceTabButton,
-const top = 35;
+  topFirst,
-const spaceBetweenButtons = 60;
+  topSecond,
-
+  topThird,
-const topFirst = top;
+} from "./deviceTabButton";
-const topSecond = top + spaceBetweenButtons;
-const topThird = top + 2 * spaceBetweenButtons;
 
 export default function DeviceScreen() {
   const appContext = useContext(AppContext);
@@ -37,37 +25,10 @@ export default function DeviceScreen() {
     }
   };
 
-  const MyButton = ({ selectedViewNumber, top, left, space, iconName }) => {
+  const getIconColor = (selectedViewNumber) => {
-    const TouchComponent =
+    return selectedView === selectedViewNumber
-      appContext.appColorScheme === "dark"
+      ? appContext.appTheme.colors.primary
-        ? TouchableHighlight
+      : appContext.appTheme.icon;
-        : TouchableOpacity;
-
-    return (
-      <TouchComponent
-        onPress={() => setSelectedView(selectedViewNumber)}
-        style={[
-          {
-            position: "absolute",
-            backgroundColor: appContext.appTheme.card.backgroundColor,
-            borderRadius: 10,
-            padding: 8,
-          },
-          { top: top },
-          left === true ? { left: space } : { right: space },
-        ]}
-      >
-        <MyIcon
-          name={iconName}
-          size={30}
-          color={
-            selectedView === selectedViewNumber
-              ? appContext.appTheme.colors.primary
-              : appContext.appTheme.icon
-          }
-        />
-      </TouchComponent>
-    );
   };
 
   return (
@@ -77,28 +38,12 @@ export default function DeviceScreen() {
         backgroundColor: appContext.appTheme.backgroundColor,
       }}
     >
-      {selectedView === 4 && (
-        <View>
-          <ImageBackground
-            source={require("../../../assets/image19.png")}
-            resizeMode="contain"
-            style={{ height: 250 }}
-          >
-            <DeviceLedsColor />
-          </ImageBackground>
-        </View>
-      )}
-
       {appContext.isUserDeveloperModeEnabled ? (
-        <>
+        <Image
-          {selectedView !== 4 && (
+          source={require("../../../assets/device.png")}
-            <Image
+          style={styles.image}
-              source={require("../../../assets/device.png")}
+          resizeMode="contain"
-              style={styles.image}
+        />
-              resizeMode="contain"
-            />
-          )}
-        </>
       ) : (
         <>
           {selectedView !== 4 && (
@@ -107,26 +52,26 @@ export default function DeviceScreen() {
         </>
       )}
 
-      <MyButton
+      <MyDeviceTabButton
         iconName={"cog-outline"}
-        left={false}
         selectedViewNumber={0}
-        space={spaceToSide}
         top={topFirst}
+        iconColor={getIconColor(0)}
+        onPress={() => setSelectedView(0)}
       />
-      <MyButton
+      <MyDeviceTabButton
         iconName={"rotate-3d-variant"}
-        left={false}
         selectedViewNumber={1}
-        space={spaceToSide}
         top={topSecond}
+        iconColor={getIconColor(1)}
+        onPress={() => setSelectedView(1)}
       />
-      <MyButton
+      <MyDeviceTabButton
         iconName={"group"}
-        left={false}
         selectedViewNumber={2}
-        space={spaceToSide}
         top={topThird}
+        iconColor={getIconColor(2)}
+        onPress={() => setSelectedView(2)}
       />
 
       <ScrollView style={{ height: "100%" }}>

src/Screens/Device/modals/ActionEdits/Layers/index.js

@@ -1,5 +0,0 @@
-import { Text } from "react-native";
-
-export default function LayersActionEditModalContent() {
-  return <Text>Layers</Text>;
-}

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

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Text, TouchableHighlight, View } from "react-native";
 import MyButton from "../../../../../Components/Button";
+import { useTranslation } from "react-i18next";
 
 function Layer({ number, selected, onPress }) {
   return (
@@ -38,6 +39,7 @@ function Layer({ number, selected, onPress }) {
 export default function LayerSelectionModalContent({
   openLayersActionEditModal,
 }) {
+  const { t } = useTranslation();
   const [selectedLayer, setSelectedLayer] = useState([]);
 
   const handleSelectLayerClick = (layerNumber) => {
@@ -72,7 +74,7 @@ export default function LayerSelectionModalContent({
 
       <View style={{ alignItems: "center" }}>
         <MyButton
-          title={"Hinzufügen"}
+          title={t("screens.device.scenes.buttonAddAction")}
           style={{ marginTop: 20, width: 180 }}
           disabled={selectedLayer.length === 0}
           onPress={openLayersActionEditModal}

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

@@ -3,6 +3,7 @@ import { Image, Text, TouchableOpacity, View } from "react-native";
 import { AppContext, AppStyles } from "../../../../utils";
 import MyIcon from "../../../../Components/Icon";
 import { Divider } from "../../../../Components/Divider";
+import { useTranslation } from "react-i18next";
 
 function Action({ text, iconName, imageSource, onPress }) {
   const appContext = useContext(AppContext);
@@ -44,46 +45,76 @@ function Action({ text, iconName, imageSource, onPress }) {
 export default function AddSceneActionModalContent({
   openLayerSelectionModal,
 }) {
+  const { t } = useTranslation();
+
   return (
     <>
       <Action
-        text="Ebenen"
+        text={t("screens.device.scenes.modalAddSceneAction.actions.layers")}
         iconName="lightbulb-on-outline"
         imageSource={require("../../../../../assets/layers.gif")}
         onPress={openLayerSelectionModal}
       />
 
       <Action
-        text="Motor"
+        text={t("screens.device.scenes.modalAddSceneAction.actions.motor")}
         iconName="axis-z-rotate-counterclockwise"
         imageSource={require("../../../../../assets/motor.gif")}
         onPress={() => console.log("pressed action")}
       />
 
       <Action
-        text="Ambilight"
+        text={t("screens.device.scenes.modalAddSceneAction.actions.ambilight")}
         iconName="television-ambient-light"
         imageSource={require("../../../../../assets/ambilight.gif")}
         onPress={() => console.log("pressed action")}
       />
 
       <Action
-        text="Warten"
+        text={t(
+          "screens.device.scenes.modalAddSceneAction.actions.waitXSeconds"
+        )}
         iconName="timer-sand"
         onPress={() => console.log("pressed action")}
       />
 
       <Action
-        text="Stop"
+        text={t(
+          "screens.device.scenes.modalAddSceneAction.actions.waitUntilTimeX"
+        )}
+        iconName="clock-time-eight-outline"
+        onPress={() => console.log("pressed action")}
+      />
+
+      <Action
+        text={t("screens.device.scenes.modalAddSceneAction.actions.stop")}
         iconName="pause-octagon-outline"
         onPress={() => console.log("pressed action")}
       />
 
       <Action
-        text="Zeitsteuerung"
+        text={t(
+          "screens.device.scenes.modalAddSceneAction.actions.timeControl"
+        )}
         iconName="timer-cog"
         onPress={() => console.log("pressed action")}
       />
+
+      <Action
+        text={t(
+          "screens.device.scenes.modalAddSceneAction.actions.waitForConfirmationWithKey"
+        )}
+        iconName="gesture-tap-button"
+        onPress={() => console.log("pressed action")}
+      />
+
+      <Action
+        text={t(
+          "screens.device.scenes.modalAddSceneAction.actions.jumpToScene"
+        )}
+        iconName="debug-step-over"
+        onPress={() => console.log("pressed action")}
+      />
     </>
   );
 }

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

@@ -4,24 +4,28 @@ import {
   DevDeviceId,
   NewEmptyDeviceScene,
 } from "../../../../../utils";
-import { FlatList, View } from "react-native";
+import { FlatList } from "react-native";
 import { MyPickerModalListItem } from "../../../../../Components/Modal";
+import { useTranslation } from "react-i18next";
 
 export default function CreateSceneModalContent({ closeChooseSceneModals }) {
   const appContext = useContext(AppContext);
+  const { t } = useTranslation();
 
   const options = [
     {
       id: 0,
-      name: "Leere Szene erstellen",
+      name: t("screens.device.scenes.modalCreateScene.options.emptyScene"),
     },
     {
       id: 1,
-      name: "Standard Szene erstellen",
+      name: t("screens.device.scenes.modalCreateScene.options.standardScene"),
     },
     {
       id: 2,
-      name: "Vorhandene Szene kopieren",
+      name: t(
+        "screens.device.scenes.modalCreateScene.options.copyExistingScene"
+      ),
     },
   ];
 
@@ -33,8 +37,6 @@ export default function CreateSceneModalContent({ closeChooseSceneModals }) {
         <MyPickerModalListItem
           itemName={item.name}
           onPress={() => {
-            console.log("pressed", item);
-
             appContext.setDevices((arr) => {
               const newArr = [...arr];
 

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

@@ -1,13 +1,13 @@
-import { useContext, useState } from "react";
+import { useContext } from "react";
 import { FlatList, Text, TouchableOpacity } from "react-native";
 import { AppContext, AppStyles, DevDeviceId } from "../../../../utils";
-import { Divider } from "../../../../Components/Divider";
-import { View } from "react-native";
 import MyIcon from "../../../../Components/Icon";
 import { MyPickerModalListItem } from "../../../../Components/Modal";
+import { useTranslation } from "react-i18next";
 
 export default function ChooseSceneModalContent({ openCreateSceneModal }) {
   const appContext = useContext(AppContext);
+  const { t } = useTranslation();
 
   const device = appContext.devices.find((device) => device.id === DevDeviceId);
 
@@ -56,7 +56,7 @@ export default function ChooseSceneModalContent({ openCreateSceneModal }) {
             { color: appContext.appTheme.textSecondary },
           ]}
         >
-          Neue Szene erstellen
+          {t("screens.device.scenes.modalChooseScene.textButtonAddScene")}
         </Text>
       </TouchableOpacity>
     </>

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

@@ -0,0 +1,30 @@
+import { Image } from "react-native";
+import {
+  MyDeviceTabButton,
+  topFirst,
+  topSecond,
+} from "../../../deviceTabButton";
+import Card from "../../../../../Components/Card";
+import MyDropdown from "../../../../../Components/Dropdown";
+
+export function LightsEditActionModalContent() {
+  return (
+    <>
+      <Image
+        source={require("../../../../../../assets/device.png")}
+        style={{ width: "100%", height: 200 }}
+        resizeMode="contain"
+      />
+
+      <MyDeviceTabButton iconName="play-network-outline" top={topFirst + 20} />
+      <MyDeviceTabButton
+        iconName="play-box-multiple-outline"
+        top={topSecond + 30}
+      />
+
+      <Card>
+        <MyDropdown label="Wähle einen Modus" selectedItemLabel={"Solid"} />
+      </Card>
+    </>
+  );
+}

src/Screens/Device/scene.js

@@ -9,7 +9,8 @@ import CreateSceneModalContent from "./modals/ChooseScene/CreateScene";
 import ChooseSceneModalContent from "./modals/ChooseScene";
 import AddSceneActionModalContent from "./modals/AddSceneAction";
 import LayerSelectionModalContent from "./modals/AddSceneAction/LayerSelection";
-import LayersActionEditModalContent from "./modals/ActionEdits/Layers";
+import { useTranslation } from "react-i18next";
+import { LightsEditActionModalContent } from "./modals/EditActions/Lights";
 
 function NothingSelected({ text }) {
   const appContext = useContext(AppContext);
@@ -36,13 +37,14 @@ function NothingSelected({ text }) {
 
 export default function SceneView() {
   const appContext = useContext(AppContext);
+  const { t } = useTranslation();
 
   const [modalOpenStates, setModalOpenStates] = useState({
     modalChooseSceneIsOpen: false,
     modalCreateSceneIsOpen: false,
     modalAddSceneActionIsOpen: false,
     modalLayerSectionIsOpen: false,
-    modalLayersActionEditIsOpen: false,
+    modalLayersEditActionIsOpen: false,
   });
 
   const setModalOpen = (modalName, open) =>
@@ -79,13 +81,13 @@ export default function SceneView() {
           () =>
             setModalOpenStates((prevState) => ({
               ...prevState,
-              modalLayersActionEditIsOpen: true,
+              modalLayersEditActionIsOpen: true,
             })),
           600
         )
       : setModalOpenStates((prevState) => ({
           ...prevState,
-          modalLayersActionEditIsOpen: true,
+          modalLayersEditActionIsOpen: true,
         }));
   };
 
@@ -98,11 +100,13 @@ export default function SceneView() {
     <>
       <Card>
         <MyDropdown
-          label={"Szene"}
+          label={t("screens.device.scenes.dropdownSceneSelection.label")}
           onPress={() => setModalOpen("modalChooseSceneIsOpen", true)}
           selectedItemLabel={
             device.selectedScene === 0
-              ? "Keine Szene ausgewählt"
+              ? t(
+                  "screens.device.scenes.dropdownSceneSelection.noSceneSelected"
+                )
               : device.scenes.find((scene) => scene.id === device.selectedScene)
                   .name
           }
@@ -110,11 +114,15 @@ export default function SceneView() {
       </Card>
 
       {device.selectedScene === 0 ? (
-        <NothingSelected text="Keine Szene ausgewählt" />
+        <NothingSelected
+          text={t("screens.device.scenes.infoNoSceneSelected")}
+        />
       ) : (
         <View>
           {deviceScene.actions.length === 0 ? (
-            <NothingSelected text="Keine Aktionen in der Szene vorhanden" />
+            <NothingSelected
+              text={t("screens.device.scenes.infoNoActionsAvailableInScene")}
+            />
           ) : (
             <FlatList
               scrollEnabled={false}
@@ -133,7 +141,7 @@ export default function SceneView() {
                       onPress={() =>
                         setModalOpenStates((prevState) => ({
                           ...prevState,
-                          modalLayersActionEditIsOpen: true,
+                          modalLayersEditActionIsOpen: true,
                         }))
                       }
                     >
@@ -164,17 +172,20 @@ export default function SceneView() {
                   color: actionColor,
                 }}
               />
-              <Text style={{ color: actionColor }}>Aktion hinzufügen</Text>
+              <Text style={{ color: actionColor }}>
+                {t("screens.device.scenes.buttonAddAction")}
+              </Text>
             </View>
           </TouchableOpacity>
         </View>
       )}
+
       <MyModal
         isOpen={modalOpenStates.modalChooseSceneIsOpen}
         closeModal={() => setModalOpen("modalChooseSceneIsOpen", false)}
         header={
           <MyDefaultModalHeader
-            title={"Wähle eine Szene aus"}
+            title={t("screens.device.scenes.modalChooseScene.headerTitle")}
             closeModal={() => setModalOpen("modalChooseSceneIsOpen", false)}
           />
         }
@@ -191,7 +202,7 @@ export default function SceneView() {
           closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)}
           header={
             <MyDefaultModalHeader
-              title={"Szene erstellen"}
+              title={t("screens.device.scenes.modalCreateScene.headerTitle")}
               closeModal={() => setModalOpen("modalCreateSceneIsOpen", false)}
             />
           }
@@ -209,7 +220,7 @@ export default function SceneView() {
         closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)}
         header={
           <MyDefaultModalHeader
-            title={"Aktion hinzufügen"}
+            title={t("screens.device.scenes.modalAddSceneAction.headerTitle")}
             closeModal={() => setModalOpen("modalAddSceneActionIsOpen", false)}
           />
         }
@@ -227,7 +238,7 @@ export default function SceneView() {
           closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)}
           header={
             <MyDefaultModalHeader
-              title={"Layer auswahl"}
+              title={t("screens.device.scenes.modalLayerSection.headerTitle")}
               closeModal={() => setModalOpen("modalLayerSectionIsOpen", false)}
             />
           }
@@ -241,17 +252,17 @@ export default function SceneView() {
 
       <MyModal
         scrollView
-        isOpen={modalOpenStates.modalLayersActionEditIsOpen}
+        isOpen={modalOpenStates.modalLayersEditActionIsOpen}
-        closeModal={() => setModalOpen("modalLayersActionEditIsOpen", false)}
+        closeModal={() => setModalOpen("modalLayersEditActionIsOpen", false)}
         header={
           <MyDefaultModalHeader
-            title={"Layer Action bearbeiten"}
+            title={t("screens.device.scenes.modalLayersEditAction.headerTitle")}
             closeModal={() =>
-              setModalOpen("modalLayersActionEditIsOpen", false)
+              setModalOpen("modalLayersEditActionIsOpen", false)
             }
           />
         }
-        content={<LayersActionEditModalContent />}
+        content={<LightsEditActionModalContent />}
       />
     </>
   );

src/utils.js

@@ -161,11 +161,133 @@ const appContextPreview = {
   devices: [],
 };
 
-export const DevDeviceId = 0;
+export const DevDeviceId = "1f21a12a-0bec-4336-99bb-df3f9fc9f537";
 
-const devData = [
+const devFirmwareData = {
+  firmwareVersion: "v1.0",
+  animationsIn: [
+    {
+      id: 0,
+      name: {
+        de: "Aufblendung",
+        en: "Fade in",
+      },
+      adjustments: [
+        {
+          id: 0,
+          type: "slider",
+          name: {
+            de: "Dauer",
+            en: "Duration",
+          },
+        },
+      ],
+    },
+  ],
+  animationsOut: [
+    {
+      id: 0,
+      name: {
+        de: "Ausblenden",
+        en: "Fade out",
+      },
+      adjustments: [
+        {
+          id: 0,
+          type: "slider",
+          name: {
+            de: "Dauer",
+            en: "Duration",
+          },
+        },
+      ],
+    },
+  ],
+  lightModes: [
+    {
+      id: 0,
+      name: {
+        de: "Einfarbig",
+        en: "Solid",
+      },
+      defaults: [],
+      adjustments: [
+        {
+          id: 0,
+          type: "solidColor",
+        },
+      ],
+    },
+    {
+      id: 1,
+      name: {
+        de: "Zufällig",
+        en: "Random",
+      },
+      defaults: [
+        {
+          type: "color",
+          valeu: "red",
+        },
+        {
+          type: "color",
+          valeu: "orange",
+        },
+        {
+          type: "color",
+          valeu: "blue",
+        },
+      ],
+      adjustments: [
+        {
+          id: 0,
+          type: "multipleColors",
+        },
+      ],
+    },
+    {
+      name: {
+        de: "Regenbogen",
+        en: "Rainbow",
+      },
+      defaults: [],
+      adjustments: [
+        {
+          id: 0,
+          type: "slider",
+          name: {
+            de: "Schnelligkeit des Modus",
+            en: "Speed of the mode",
+          },
+        },
+      ],
+    },
+  ],
+  motorModes: [
+    {
+      name: {
+        de: "Hin und her",
+        en: "Back and forth",
+      },
+      defaults: [],
+      adjustments: [
+        {
+          id: 0,
+          type: "slider",
+          name: {
+            de: "Schnelligkeit von hin und her",
+            en: "Speed of the back and forth",
+          },
+        },
+      ],
+    },
+  ],
+};
+
+const devDevicesData = [
   {
-    id: 0, // deviceId
+    id: "1f21a12a-0bec-4336-99bb-df3f9fc9f537", // deviceId
+    firmwareVersion: "v1.0",
     selectedScene: 0,
     scenes: [
       {
@@ -218,7 +340,7 @@ export function AppProvider({ children }) {
   // TODO: only while development
   const [isUserDeveloperModeEnabled, setIsUserDeveloperModeEnabled] =
     useState(false);
-  const [devices, setDevices] = useState(devData);
+  const [devices, setDevices] = useState(devDevicesData);
   const { i18n } = useTranslation();
 
   const saveAppColorScheme = async (value) => {