diff --git a/app/mobile/src/dashboard/Dashboard.jsx b/app/mobile/src/dashboard/Dashboard.jsx index d3112d91..084165a1 100644 --- a/app/mobile/src/dashboard/Dashboard.jsx +++ b/app/mobile/src/dashboard/Dashboard.jsx @@ -1,4 +1,4 @@ -import { TextInput, TouchableOpacity, View, Text, Modal, FlatList, KeyboardAvoidingView } from 'react-native'; +import { TextInput, Alert, Switch, TouchableOpacity, View, Text, Modal, FlatList, KeyboardAvoidingView } from 'react-native'; import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'; import Ionicons from '@expo/vector-icons/AntDesign'; import { styles } from './Dashboard.styled'; @@ -12,6 +12,20 @@ export function Dashboard(props) { const { config, server, token } = location.state; const { state, actions } = useDashboard(config, server, token); + const saveConfig = async () => { + try { + await actions.saveConfig(); + actions.hideEditConfig(); + } + catch (err) { + console.log(err); + Alert.alert( + 'Failed to Save Settings', + 'Please try again.', + ); + } + } + return ( @@ -67,16 +81,58 @@ export function Dashboard(props) { Settings: - - + Account Key Type: + + actions.setKeyType('RSA2048')}> + { state.keyType === 'RSA2048' && ( + + )} + { state.keyType === 'RSA4096' && ( + + )} + RSA 2048 + + actions.setKeyType('RSA4096')}> + { state.keyType === 'RSA2048' && ( + + )} + { state.keyType === 'RSA4096' && ( + + )} + RSA 4096 + + + actions.setEnableImage(!state.enableImage)}> + Enable Image Queue: + + + actions.setEnableAudio(!state.enableAudio)}> + Enable Audio Queue: + + + actions.setEnableVideo(!state.enableVideo)}> + Enable Video Queue: + + Cancel - + Save diff --git a/app/mobile/src/dashboard/Dashboard.styled.js b/app/mobile/src/dashboard/Dashboard.styled.js index 141d40c5..a7aa5674 100644 --- a/app/mobile/src/dashboard/Dashboard.styled.js +++ b/app/mobile/src/dashboard/Dashboard.styled.js @@ -142,11 +142,65 @@ export const styles = StyleSheet.create({ modalBody: { padding: 8, }, + modalLabel: { + paddingTop: 8, + color: Colors.text, + }, + keyType: { + display: 'flex', + flexDirection: 'row', + padding: 8, + }, + option: { + color: Colors.text, + }, + optionLeft: { + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-start', + }, + optionRight: { + flexGrow: 1, + display: 'flex', + flexDirection: 'row', + justifyContent: 'flex-end', + }, + radio: { + width: 16, + height: 16, + borderRadius: 8, + borderColor: Colors.primary, + borderWidth: 1, + marginRight: 8, + }, + selected: { + width: 16, + height: 16, + borderRadius: 8, + borderColor: Colors.primary, + borderWidth: 1, + marginRight: 8, + backgroundColor: Colors.background, + }, input: { marginTop: 4, - marginBottom: 4, backgroundColor: Colors.white, padding: 4, borderRadius: 4, + marginBottom: 16, + fontSize: 16, + color: Colors.text, + }, + switch: { + transform: [{ scaleX: .7 }, { scaleY: .7 }], + }, + track: { + false: Colors.grey, + true: Colors.background, + }, + media: { + display: 'flex', + flexDirection: 'row', + marginTop: 8, }, }); diff --git a/app/mobile/src/dashboard/useDashboard.hook.js b/app/mobile/src/dashboard/useDashboard.hook.js index 9758cd8d..7060ba03 100644 --- a/app/mobile/src/dashboard/useDashboard.hook.js +++ b/app/mobile/src/dashboard/useDashboard.hook.js @@ -4,6 +4,7 @@ import { AppContext } from 'context/AppContext'; import { getNodeStatus } from 'api/getNodeStatus'; import { setNodeStatus } from 'api/setNodeStatus'; import { getNodeConfig } from 'api/getNodeConfig'; +import { setNodeConfig } from 'api/setNodeConfig'; import { getNodeAccounts } from 'api/getNodeAccounts'; import { getAccountImageUrl } from 'api/getAccountImageUrl'; @@ -16,8 +17,12 @@ export function useDashboard(config, server, token) { addUser: false, accessUser: false, accessId: null, - hostname: null, + domain: null, storage: null, + keyType: null, + enableImage: true, + enableAudio: true, + enableVideo: true, }); const navigate = useNavigate(); @@ -44,6 +49,11 @@ export function useDashboard(config, server, token) { updateState({ accounts: accounts.map(setAccountItem) }); }; + useEffect(() => { + const { keyType, accountStorage, domain, enableImage, enableAudio, enableVideo } = config; + updateState({ keyType, storage: accountStorage.toString(), domain, enableImage, enableAudio, enableVideo }); + }, [config]); + useEffect(() => { refreshAccounts(); }, []); @@ -73,13 +83,29 @@ export function useDashboard(config, server, token) { hideAccessUser: () => { updateState({ accessUser: false }); }, - setHostname: (hostname) => { - updateState({ hostname }); + setDomain: (domain) => { + updateState({ domain }); }, setStorage: (storage) => { - console.log(">>> ", storage, Number(storage.replace(/[^0-9]/g, ''))); updateState({ storage: Number(storage.replace(/[^0-9]/g, '')) }); }, + setEnableImage: (enableImage) => { + updateState({ enableImage }); + }, + setEnableAudio: (enableAudio) => { + updateState({ enableAudio }); + }, + setEnableVideo: (enableVideo) => { + updateState({ enableVideo }); + }, + setKeyType: (keyType) => { + updateState({ keyType }); + }, + saveConfig: async () => { + const { storage, domain, keyType, enableImage, enableAudio, enableVideo } = state; + const config = { accountStorage: Number(storage), domain, keyType, enableImage, enableAudio, enableVideo }; + await setNodeConfig(server, token, config); + }, }; return { state, actions };