From 8bb1da8d0019adea3c03f713928a8cf756823eb8 Mon Sep 17 00:00:00 2001 From: alex Date: Tue, 1 Aug 2023 21:20:40 +0000 Subject: [PATCH] update scene name --- App.js | 18 ++++- locales/de.json | 11 ++- locales/en.json | 5 ++ src/Components/Dropdown/index.js | 1 + src/Components/Modal/index.js | 77 +++++++++++++++---- src/Components/Slider/index.js | 1 + src/Components/TextInput/index.js | 2 + src/Screens/Device/index.js | 10 +-- .../modals/ChooseScene/CreateScene/index.js | 33 ++++++-- .../Device/modals/EditActions/index.js | 35 +++++++-- .../SettingsChangeDeviceDisplayName/index.js | 39 ++++++++++ .../Device/modals/UpdateSceneName/index.js | 38 +++++++++ src/Screens/Device/scene.js | 43 +++++++---- src/Screens/Device/settings.js | 68 ++-------------- src/utils.js | 11 ++- 15 files changed, 273 insertions(+), 119 deletions(-) create mode 100644 src/Screens/Device/modals/SettingsChangeDeviceDisplayName/index.js create mode 100644 src/Screens/Device/modals/UpdateSceneName/index.js diff --git a/App.js b/App.js index 26341bf..7be2359 100644 --- a/App.js +++ b/App.js @@ -32,8 +32,9 @@ import { SettingsAppColorSchemeModalContent, SettingsAppLanguageModalContent, } from "./src/Screens/Settings"; -import { SettingsChangeDeviceDisplayName } from "./src/Screens/Device/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"; const Drawer = createDrawerNavigator(); const Stack = createStackNavigator(); @@ -224,6 +225,19 @@ export function MyApp() { } /> + + options({ + navigation: navigation, + pageTitle: t( + "screens.device.scenes.modalUpdateSceneName.pageTitle" + ), + }) + } + /> + options({ navigation: navigation, diff --git a/locales/de.json b/locales/de.json index 4518428..79af7cb 100644 --- a/locales/de.json +++ b/locales/de.json @@ -22,7 +22,7 @@ "deviceFirmwareVersionText": "Firmware Version", "deviceLastUpdatedText": "Letzte Aktualisierung", "modalSettingsChangeDeviceDisplayName": { - "pageTitle": "Gerätename anpassen", + "pageTitle": "Gerätename ändern", "textTitle": "Gerätename", "textDescription": "Der Name wird lokal auf dem Gerät gespeichert und dient dazu, die verbundenen Geräte in der App voneinander zu unterscheiden." } @@ -93,6 +93,11 @@ "modalEditActionAnimationOutSelection": { "pageTitle": "Animation out auswählen", "noResult": "Keine Animationen verfügbar" + }, + "modalUpdateSceneName": { + "pageTitle": "Szenennamen ändern", + "textTitle": "Szenenname", + "textDescription": "Benenne die Szene, um sie später leichter wiederzufinden." } } }, @@ -106,9 +111,9 @@ "pageTitle": "Einstellungen", "settingsCardTitle": "Einstellungen", "languageText": "Sprache", - "languageModalTitle": "Sprache anpassen", + "languageModalTitle": "Sprache ändern", "appColorSchemeText": "Anzeigemodus", - "appColorSchemeModalTitle": "Anzeigemodus anpassen", + "appColorSchemeModalTitle": "Anzeigemodus ändern", "appColorSchemePicker": { "auto": "System Standard", "dark": "Dunkel", diff --git a/locales/en.json b/locales/en.json index bf8c79d..9f9a3f6 100644 --- a/locales/en.json +++ b/locales/en.json @@ -93,6 +93,11 @@ "modalEditActionAnimationOutSelection": { "pageTitle": "Choose animation out", "noResult": "No animations available" + }, + "modalUpdateSceneName": { + "pageTitle": "Change scene name", + "textTitle": "Scene name", + "textDescription": "Give the scene a name to easily find it later" } } }, diff --git a/src/Components/Dropdown/index.js b/src/Components/Dropdown/index.js index 084e04d..d36a290 100644 --- a/src/Components/Dropdown/index.js +++ b/src/Components/Dropdown/index.js @@ -35,6 +35,7 @@ export default function MyDropdown({ {selectedItemLabel} + ); -} +} */ -export function MyPickerModalListItem({ onPress, itemName, itemSelected }) { +export function MyPickerModalListItem({ + onPress, + itemName, + itemSelected, + disabled, +}) { const appContext = useContext(AppContext); return ( <> - + {itemName} @@ -147,6 +147,48 @@ export function MyPickerModalListItem({ onPress, itemName, itemSelected }) { ); } +export function MyTextInputModalContent({ + navigation, + defaultValue, + onCheckIconPress, + textInputTitle, + textInputDescription, + textMaxLength, +}) { + const [newValue, setNewValue] = useState(defaultValue); + + useEffect(() => { + navigation.setOptions({ + headerRight: () => ( + { + navigation.goBack(); + onCheckIconPress(newValue); + }} + disabled={newValue.length === 0} + /> + ), + }); + }, [navigation, newValue]); + + return ( + + setNewValue(v)} + textMaxLength={textMaxLength} + /> + + ); +} + +/* export function MyPickerModal({ isOpen, setIsOpen, items, searchFilter }) { const appContext = useContext(AppContext); const { t } = useTranslation(); @@ -317,8 +359,8 @@ export function MyPickerModal({ isOpen, setIsOpen, items, searchFilter }) { ); -} - +}*/ +/* export function MyTextInputModal({ isOpen, setIsOpen, @@ -402,3 +444,4 @@ export function MyTextInputModal({ ); } +*/ diff --git a/src/Components/Slider/index.js b/src/Components/Slider/index.js index 258743a..27af680 100644 --- a/src/Components/Slider/index.js +++ b/src/Components/Slider/index.js @@ -23,6 +23,7 @@ export default function MySlider({ minimumTrackTintColor={appContext.appTheme.slider.minimumTrackTintColor} maximumTrackTintColor={appContext.appTheme.slider.maximumTrackTintColor} thumbTintColor={appContext.appTheme.slider.thumbTintColor} + step={1} /> ); } diff --git a/src/Components/TextInput/index.js b/src/Components/TextInput/index.js index 80b7aa3..6ee29bc 100644 --- a/src/Components/TextInput/index.js +++ b/src/Components/TextInput/index.js @@ -5,6 +5,7 @@ import { useContext } from "react"; export default function MyTextInput({ textTitle, textDescription, + textMaxLength, value, onChangeText, }) { @@ -22,6 +23,7 @@ export default function MyTextInput({ borderBottomWidth: 1, borderColor: appContext.appTheme.textInputBottomColor, }} + maxLength={textMaxLength} value={value} onChangeText={onChangeText} /> diff --git a/src/Screens/Device/index.js b/src/Screens/Device/index.js index 6a20d68..d70e30c 100644 --- a/src/Screens/Device/index.js +++ b/src/Screens/Device/index.js @@ -1,13 +1,5 @@ import { useContext, useState } from "react"; -import { - Image, - ScrollView, - StyleSheet, - View, - Text, - KeyboardAvoidingView, - Alert, -} from "react-native"; +import { Image, ScrollView, StyleSheet, View, Text, Alert } from "react-native"; import { AppContext } from "../../utils"; import SettingsView from "./settings"; import SceneView from "./scene"; diff --git a/src/Screens/Device/modals/ChooseScene/CreateScene/index.js b/src/Screens/Device/modals/ChooseScene/CreateScene/index.js index 1f5a91a..3a63be7 100644 --- a/src/Screens/Device/modals/ChooseScene/CreateScene/index.js +++ b/src/Screens/Device/modals/ChooseScene/CreateScene/index.js @@ -3,8 +3,7 @@ import { AppContext, AppSelectedUserDevice, ModalContainer, - NewEmptyDeviceScene, - NewInitialDeviceScene, + NewDeviceScene, } from "../../../../../utils"; import { FlatList } from "react-native"; import { MyPickerModalListItem } from "../../../../../Components/Modal"; @@ -39,13 +38,33 @@ export default function CreateSceneModalContent({ navigation }) { renderItem={({ item }) => ( { - appContext.setDeviceScenes((arr) => [ - ...arr, - NewEmptyDeviceScene("Leere Szene"), - ]); + if (item.id === 0 || item.id === 1) { + const newDeviceScene = NewDeviceScene( + item.id === 0 ? "Leere Szene" : "Standard Szene" + ); - navigation.pop(2); + appContext.setDeviceScenes((arr) => [...arr, newDeviceScene]); + + navigation.pop(2); + + appContext.setDevices((arr) => { + let newArr = [...arr]; + + const deviceIndex = newArr.findIndex( + (device) => device.id === AppSelectedUserDevice.current.id + ); + + if (deviceIndex !== -1) { + newArr[deviceIndex].selectedScene = newDeviceScene.sceneId; + } + + return newArr; + }); + } else { + console.log("copy a scene"); + } }} /> )} diff --git a/src/Screens/Device/modals/EditActions/index.js b/src/Screens/Device/modals/EditActions/index.js index 734fe64..065d533 100644 --- a/src/Screens/Device/modals/EditActions/index.js +++ b/src/Screens/Device/modals/EditActions/index.js @@ -7,7 +7,7 @@ import { ModalContainer, } from "../../../../utils"; import MyDropdown from "../../../../Components/Dropdown"; -import { useContext } from "react"; +import { useContext, useState } from "react"; import MyResult from "../../../../Components/Result"; import { MyPickerModalListItem } from "../../../../Components/Modal"; import MyIcon from "../../../../Components/Icon"; @@ -40,7 +40,12 @@ export default function EditActionAnimationsCardContent({ return ( <> - + {t( "screens.device.scenes.editActionAnimationsCardContent.animationsIn" )} @@ -75,7 +80,14 @@ export default function EditActionAnimationsCardContent({ ))} {t( "screens.device.scenes.editActionAnimationsCardContent.animationsOut" @@ -195,6 +207,8 @@ export function EditActionAdjustmentContent({ appThemeText, appLanguage, }) { + const [sliderValue, setSliderValue] = useState(0); + if (adjustment.type === "slider") { return ( <> @@ -209,10 +223,19 @@ export function EditActionAdjustmentContent({ style={[{ flex: 1 }, IsPlatformIos() && { marginLeft: 6 }]} minimumValue={adjustment.min} maximumValue={adjustment.max} - onValueChange={(v) => - console.log(`change ${adjustment.variableName}`, v) - } + onValueChange={(v) => { + console.log(`change ${adjustment.variableName}`, v); + setSliderValue(v); + }} + value={sliderValue} /> + + + + {sliderValue} + {adjustment.unitOfMeasurement} + + ); diff --git a/src/Screens/Device/modals/SettingsChangeDeviceDisplayName/index.js b/src/Screens/Device/modals/SettingsChangeDeviceDisplayName/index.js new file mode 100644 index 0000000..5459a03 --- /dev/null +++ b/src/Screens/Device/modals/SettingsChangeDeviceDisplayName/index.js @@ -0,0 +1,39 @@ +import { useContext } from "react"; +import { AppContext, Constants } from "../../../../utils"; +import { useTranslation } from "react-i18next"; +import { MyTextInputModalContent } from "../../../../Components/Modal"; + +export default function SettingsChangeDeviceDisplayNameModalContent({ + navigation, + route, +}) { + const appContext = useContext(AppContext); + const { t } = useTranslation(); + + return ( + { + appContext.setDevices((arr) => { + let newArr = [...arr]; + + const foundIndex = newArr.findIndex((d) => d.id === route.params.id); + + if (foundIndex !== -1) { + newArr[foundIndex].displayName = newDeviceDisplayName; + } + + return newArr; + }); + }} + textInputTitle={t( + "screens.device.settings.modalSettingsChangeDeviceDisplayName.textTitle" + )} + textInputDescription={t( + "screens.device.settings.modalSettingsChangeDeviceDisplayName.textDescription" + )} + /> + ); +} diff --git a/src/Screens/Device/modals/UpdateSceneName/index.js b/src/Screens/Device/modals/UpdateSceneName/index.js new file mode 100644 index 0000000..15aa755 --- /dev/null +++ b/src/Screens/Device/modals/UpdateSceneName/index.js @@ -0,0 +1,38 @@ +import { useContext } from "react"; +import { AppContext, Constants } from "../../../../utils"; +import { MyTextInputModalContent } from "../../../../Components/Modal"; +import { useTranslation } from "react-i18next"; + +export default function UpdateSceneNameModalContent({ navigation, route }) { + const appContext = useContext(AppContext); + const { t } = useTranslation(); + + const { deviceSelectedScene, sceneName } = route.params; + + return ( + { + appContext.setDeviceScenes((arr) => { + let newArr = [...arr]; + + const foundSceneIndex = newArr.findIndex( + (scene) => scene.sceneId === deviceSelectedScene + ); + + if (foundSceneIndex !== -1) { + newArr[foundSceneIndex].name = newValue; + } + + return newArr; + }); + }} + /> + ); +} diff --git a/src/Screens/Device/scene.js b/src/Screens/Device/scene.js index 0a88367..70dca19 100644 --- a/src/Screens/Device/scene.js +++ b/src/Screens/Device/scene.js @@ -6,7 +6,7 @@ import MyDropdown from "../../Components/Dropdown"; import MyIcon from "../../Components/Icon"; import { useTranslation } from "react-i18next"; import MyResult from "../../Components/Result"; -import { MyTextButton } from "../../Components/Button"; +import { MyIconButton, MyTextButton } from "../../Components/Button"; import { useFocusEffect } from "@react-navigation/native"; export default function SceneView({ navigation }) { @@ -15,15 +15,40 @@ export default function SceneView({ navigation }) { const [device, setDevice] = useState(); + const getSelectedDeviceSceneName = () => { + const scenes = appContext.deviceScenes.find( + (s) => s.sceneId === device.selectedScene + ); + + return scenes === undefined ? "None" : scenes.name; + }; + useFocusEffect( useCallback(() => { setDevice(GetDevice(appContext.devices)); - console.log("callback"); + + if (device !== undefined) { + if (device.selectedScene !== null) { + navigation.setOptions({ + headerRight: () => ( + + navigation.navigate("modalUpdateSceneName", { + deviceSelectedScene: device.selectedScene, + sceneName: getSelectedDeviceSceneName(), + }) + } + /> + ), + }); + } + } }, [device]) ); - console.log("device", device !== undefined); - if (device === undefined) return <>; const getActionTypeIcon = (actionType) => { @@ -51,14 +76,6 @@ export default function SceneView({ navigation }) { (a) => a.sceneId === device.selectedScene ); - const getSelectedDeviceScene = () => { - const scenes = appContext.deviceScenes.find( - (s) => s.sceneId === device.selectedScene - ); - - return scenes === undefined ? "None" : scenes.name; - }; - return ( <> @@ -74,7 +91,7 @@ export default function SceneView({ navigation }) { ? t( "screens.device.scenes.dropdownSceneSelection.noSceneSelected" ) - : getSelectedDeviceScene() + : getSelectedDeviceSceneName() } /> diff --git a/src/Screens/Device/settings.js b/src/Screens/Device/settings.js index 78647fa..2f7504b 100644 --- a/src/Screens/Device/settings.js +++ b/src/Screens/Device/settings.js @@ -1,16 +1,10 @@ import { Text, View } from "react-native"; import Card from "../../Components/Card"; import { useContext, useEffect, useState } from "react"; -import { - AppContext, - AppSelectedUserDevice, - AppStyles, - ModalContainer, -} from "../../utils"; +import { AppContext, AppSelectedUserDevice, AppStyles } from "../../utils"; import { Divider } from "../../Components/Divider"; import { useTranslation } from "react-i18next"; import MySwitch from "../../Components/Switch"; -import MyTextInput from "../../Components/TextInput"; import { MyIconButton } from "../../Components/Button"; export default function SettingsView({ navigation }) { @@ -22,6 +16,12 @@ export default function SettingsView({ navigation }) { (d) => d.id === AppSelectedUserDevice.current.id ); + useEffect(() => { + navigation.setOptions({ + headerRight: null, + }); + }, []); + return ( <> @@ -176,57 +176,3 @@ export default function SettingsView({ navigation }) { ); } - -export function SettingsChangeDeviceDisplayName({ navigation, route }) { - const appContext = useContext(AppContext); - const { t } = useTranslation(); - const [newDeviceDisplayName, setNewDeviceDisplayName] = useState( - route.params.displayName - ); - - useEffect(() => { - navigation.setOptions({ - headerRight: () => ( - { - navigation.goBack(); - - appContext.setDevices((arr) => { - let newArr = [...arr]; - - const foundIndex = newArr.findIndex( - (d) => d.id === route.params.id - ); - - if (foundIndex !== -1) { - newArr[foundIndex].displayName = newDeviceDisplayName; - } - - return newArr; - }); - }} - disabled={newDeviceDisplayName.length === 0} - /> - ), - }); - }, [navigation, newDeviceDisplayName]); - - return ( - - setNewDeviceDisplayName(v)} - /> - - ); -} diff --git a/src/utils.js b/src/utils.js index b81da2f..f778ee2 100644 --- a/src/utils.js +++ b/src/utils.js @@ -27,6 +27,10 @@ export const Constants = { ambilight: 1, motor: 2, }, + globals: { + max_device_name_length: 20, + max_scene_name_length: 20, + }, }; export const AppStyles = StyleSheet.create({ @@ -220,6 +224,7 @@ const devDevicesFirmwareModes = { }, min: 0, max: 6, + unitOfMeasurement: "s", }, ], }, @@ -242,6 +247,7 @@ const devDevicesFirmwareModes = { }, min: 0, max: 100, + unitOfMeasurement: "s", }, { type: "slider", @@ -253,6 +259,7 @@ const devDevicesFirmwareModes = { }, min: 1, max: 10, + unitOfMeasurement: "s", }, ], }, @@ -285,6 +292,7 @@ const devDevicesFirmwareModes = { iconName: "repeat-variant", min: 1, max: 60, + unitOfMeasurement: "s", }, ], }, @@ -317,6 +325,7 @@ const devDevicesFirmwareModes = { iconName: "repeat-variant", min: 1, max: 60, + unitOfMeasurement: "s", }, ], }, @@ -370,7 +379,7 @@ const devDeviceScenes = [ }, ]; -export function NewEmptyDeviceScene(name) { +export function NewDeviceScene(name) { return { sceneId: GetUuid(), deviceId: AppSelectedUserDevice.current.id,