forked from vergnet/application-amicale
418 lines
12 KiB
TypeScript
418 lines
12 KiB
TypeScript
/*
|
|
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
|
|
*
|
|
* This file is part of Campus INSAT.
|
|
*
|
|
* Campus INSAT is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* Campus INSAT is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License
|
|
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import { StyleSheet, View } from 'react-native';
|
|
import i18n from 'i18n-js';
|
|
import {
|
|
RadioButton,
|
|
Card,
|
|
List,
|
|
Switch,
|
|
ToggleButton,
|
|
withTheme,
|
|
} from 'react-native-paper';
|
|
import { Appearance } from 'react-native-appearance';
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
import ThemeManager from '../../../managers/ThemeManager';
|
|
import AsyncStorageManager from '../../../managers/AsyncStorageManager';
|
|
import CustomSlider from '../../../components/Overrides/CustomSlider';
|
|
import CollapsibleScrollView from '../../../components/Collapsible/CollapsibleScrollView';
|
|
import GENERAL_STYLES from '../../../constants/Styles';
|
|
|
|
type PropsType = {
|
|
navigation: StackNavigationProp<any>;
|
|
theme: ReactNativePaper.Theme;
|
|
};
|
|
|
|
type StateType = {
|
|
nightMode: boolean;
|
|
nightModeFollowSystem: boolean;
|
|
startScreenPickerSelected: string;
|
|
selectedWash: string;
|
|
isDebugUnlocked: boolean;
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
slider: {
|
|
flex: 1,
|
|
marginHorizontal: 10,
|
|
height: 50,
|
|
},
|
|
card: {
|
|
margin: 5,
|
|
},
|
|
pickerContainer: {
|
|
marginLeft: 30,
|
|
},
|
|
});
|
|
|
|
/**
|
|
* Class defining the Settings screen. This screen shows controls to modify app preferences.
|
|
*/
|
|
class SettingsScreen extends React.Component<PropsType, StateType> {
|
|
savedNotificationReminder: number;
|
|
|
|
/**
|
|
* Loads user preferences into state
|
|
*/
|
|
constructor(props: PropsType) {
|
|
super(props);
|
|
const notifReminder = AsyncStorageManager.getString(
|
|
AsyncStorageManager.PREFERENCES.proxiwashNotifications.key
|
|
);
|
|
this.savedNotificationReminder = parseInt(notifReminder, 10);
|
|
if (Number.isNaN(this.savedNotificationReminder)) {
|
|
this.savedNotificationReminder = 0;
|
|
}
|
|
|
|
this.state = {
|
|
nightMode: ThemeManager.getNightMode(),
|
|
nightModeFollowSystem:
|
|
AsyncStorageManager.getBool(
|
|
AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key
|
|
) && Appearance.getColorScheme() !== 'no-preference',
|
|
startScreenPickerSelected: AsyncStorageManager.getString(
|
|
AsyncStorageManager.PREFERENCES.defaultStartScreen.key
|
|
),
|
|
selectedWash: AsyncStorageManager.getString(
|
|
AsyncStorageManager.PREFERENCES.selectedWash.key
|
|
),
|
|
isDebugUnlocked: AsyncStorageManager.getBool(
|
|
AsyncStorageManager.PREFERENCES.debugUnlocked.key
|
|
),
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Saves the value for the proxiwash reminder notification time
|
|
*
|
|
* @param value The value to store
|
|
*/
|
|
onProxiwashNotifPickerValueChange = (value: number) => {
|
|
AsyncStorageManager.set(
|
|
AsyncStorageManager.PREFERENCES.proxiwashNotifications.key,
|
|
value
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Saves the value for the proxiwash reminder notification time
|
|
*
|
|
* @param value The value to store
|
|
*/
|
|
onStartScreenPickerValueChange = (value: string) => {
|
|
if (value != null) {
|
|
this.setState({ startScreenPickerSelected: value });
|
|
AsyncStorageManager.set(
|
|
AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
|
|
value
|
|
);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Returns a picker allowing the user to select the proxiwash reminder notification time
|
|
*
|
|
* @returns {React.Node}
|
|
*/
|
|
getProxiwashNotifPicker() {
|
|
const { theme } = this.props;
|
|
return (
|
|
<CustomSlider
|
|
style={styles.slider}
|
|
minimumValue={0}
|
|
maximumValue={10}
|
|
step={1}
|
|
value={this.savedNotificationReminder}
|
|
onValueChange={this.onProxiwashNotifPickerValueChange}
|
|
thumbTintColor={theme.colors.primary}
|
|
minimumTrackTintColor={theme.colors.primary}
|
|
/>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Returns a radio picker allowing the user to select the proxiwash
|
|
*
|
|
* @returns {React.Node}
|
|
*/
|
|
getProxiwashChangePicker() {
|
|
const { selectedWash } = this.state;
|
|
return (
|
|
<RadioButton.Group
|
|
onValueChange={this.onSelectWashValueChange}
|
|
value={selectedWash}
|
|
>
|
|
<RadioButton.Item
|
|
label={i18n.t('screens.proxiwash.washinsa.title')}
|
|
value="washinsa"
|
|
/>
|
|
<RadioButton.Item
|
|
label={i18n.t('screens.proxiwash.tripodeB.title')}
|
|
value="tripodeB"
|
|
/>
|
|
</RadioButton.Group>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Returns a picker allowing the user to select the start screen
|
|
*
|
|
* @returns {React.Node}
|
|
*/
|
|
getStartScreenPicker() {
|
|
const { startScreenPickerSelected } = this.state;
|
|
return (
|
|
<ToggleButton.Row
|
|
onValueChange={this.onStartScreenPickerValueChange}
|
|
value={startScreenPickerSelected}
|
|
style={GENERAL_STYLES.centerHorizontal}
|
|
>
|
|
<ToggleButton icon="account-circle" value="services" />
|
|
<ToggleButton icon="tshirt-crew" value="proxiwash" />
|
|
<ToggleButton icon="triangle" value="home" />
|
|
<ToggleButton icon="calendar-range" value="planning" />
|
|
<ToggleButton icon="clock" value="planex" />
|
|
</ToggleButton.Row>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Toggles night mode and saves it to preferences
|
|
*/
|
|
onToggleNightMode = () => {
|
|
const { nightMode } = this.state;
|
|
ThemeManager.getInstance().setNightMode(!nightMode);
|
|
this.setState({ nightMode: !nightMode });
|
|
};
|
|
|
|
onToggleNightModeFollowSystem = () => {
|
|
const { nightModeFollowSystem } = this.state;
|
|
const value = !nightModeFollowSystem;
|
|
this.setState({ nightModeFollowSystem: value });
|
|
AsyncStorageManager.set(
|
|
AsyncStorageManager.PREFERENCES.nightModeFollowSystem.key,
|
|
value
|
|
);
|
|
if (value) {
|
|
const nightMode = Appearance.getColorScheme() === 'dark';
|
|
ThemeManager.getInstance().setNightMode(nightMode);
|
|
this.setState({ nightMode });
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Gets a list item using a checkbox control
|
|
*
|
|
* @param onPressCallback The callback when the checkbox state changes
|
|
* @param icon The icon name to display on the list item
|
|
* @param title The text to display as this list item title
|
|
* @param subtitle The text to display as this list item subtitle
|
|
* @param state The current state of the switch
|
|
* @returns {React.Node}
|
|
*/
|
|
static getToggleItem(
|
|
onPressCallback: () => void,
|
|
icon: string,
|
|
title: string,
|
|
subtitle: string,
|
|
state: boolean
|
|
) {
|
|
return (
|
|
<List.Item
|
|
title={title}
|
|
description={subtitle}
|
|
left={(props) => (
|
|
<List.Icon color={props.color} style={props.style} icon={icon} />
|
|
)}
|
|
right={() => <Switch value={state} onValueChange={onPressCallback} />}
|
|
/>
|
|
);
|
|
}
|
|
|
|
getNavigateItem(
|
|
route: string,
|
|
icon: string,
|
|
title: string,
|
|
subtitle: string,
|
|
onLongPress?: () => void
|
|
) {
|
|
const { navigation } = this.props;
|
|
return (
|
|
<List.Item
|
|
title={title}
|
|
description={subtitle}
|
|
onPress={() => {
|
|
navigation.navigate(route);
|
|
}}
|
|
left={(props) => (
|
|
<List.Icon color={props.color} style={props.style} icon={icon} />
|
|
)}
|
|
right={(props) => (
|
|
<List.Icon
|
|
color={props.color}
|
|
style={props.style}
|
|
icon="chevron-right"
|
|
/>
|
|
)}
|
|
onLongPress={onLongPress}
|
|
/>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Saves the value for the proxiwash selected wash
|
|
*
|
|
* @param value The value to store
|
|
*/
|
|
onSelectWashValueChange = (value: string) => {
|
|
if (value != null) {
|
|
this.setState({ selectedWash: value });
|
|
AsyncStorageManager.set(
|
|
AsyncStorageManager.PREFERENCES.selectedWash.key,
|
|
value
|
|
);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Unlocks debug mode and saves its state to user preferences
|
|
*/
|
|
unlockDebugMode = () => {
|
|
this.setState({ isDebugUnlocked: true });
|
|
AsyncStorageManager.set(
|
|
AsyncStorageManager.PREFERENCES.debugUnlocked.key,
|
|
true
|
|
);
|
|
};
|
|
|
|
render() {
|
|
const { nightModeFollowSystem, nightMode, isDebugUnlocked } = this.state;
|
|
return (
|
|
<CollapsibleScrollView>
|
|
<Card style={styles.card}>
|
|
<Card.Title title={i18n.t('screens.settings.generalCard')} />
|
|
<List.Section>
|
|
{Appearance.getColorScheme() !== 'no-preference'
|
|
? SettingsScreen.getToggleItem(
|
|
this.onToggleNightModeFollowSystem,
|
|
'theme-light-dark',
|
|
i18n.t('screens.settings.nightModeAuto'),
|
|
i18n.t('screens.settings.nightModeAutoSub'),
|
|
nightModeFollowSystem
|
|
)
|
|
: null}
|
|
{Appearance.getColorScheme() === 'no-preference' ||
|
|
!nightModeFollowSystem
|
|
? SettingsScreen.getToggleItem(
|
|
this.onToggleNightMode,
|
|
'theme-light-dark',
|
|
i18n.t('screens.settings.nightMode'),
|
|
nightMode
|
|
? i18n.t('screens.settings.nightModeSubOn')
|
|
: i18n.t('screens.settings.nightModeSubOff'),
|
|
nightMode
|
|
)
|
|
: null}
|
|
<List.Item
|
|
title={i18n.t('screens.settings.startScreen')}
|
|
description={i18n.t('screens.settings.startScreenSub')}
|
|
left={(props) => (
|
|
<List.Icon
|
|
color={props.color}
|
|
style={props.style}
|
|
icon="power"
|
|
/>
|
|
)}
|
|
/>
|
|
{this.getStartScreenPicker()}
|
|
{this.getNavigateItem(
|
|
'dashboard-edit',
|
|
'view-dashboard',
|
|
i18n.t('screens.settings.dashboard'),
|
|
i18n.t('screens.settings.dashboardSub')
|
|
)}
|
|
</List.Section>
|
|
</Card>
|
|
<Card style={styles.card}>
|
|
<Card.Title title="Proxiwash" />
|
|
<List.Section>
|
|
<List.Item
|
|
title={i18n.t('screens.settings.proxiwashNotifReminder')}
|
|
description={i18n.t('screens.settings.proxiwashNotifReminderSub')}
|
|
left={(props) => (
|
|
<List.Icon
|
|
color={props.color}
|
|
style={props.style}
|
|
icon="washing-machine"
|
|
/>
|
|
)}
|
|
/>
|
|
<View style={styles.pickerContainer}>
|
|
{this.getProxiwashNotifPicker()}
|
|
</View>
|
|
<List.Item
|
|
title={i18n.t('screens.settings.proxiwashChangeWash')}
|
|
description={i18n.t('screens.settings.proxiwashChangeWashSub')}
|
|
left={(props) => (
|
|
<List.Icon
|
|
color={props.color}
|
|
style={props.style}
|
|
icon="washing-machine"
|
|
/>
|
|
)}
|
|
/>
|
|
<View style={styles.pickerContainer}>
|
|
{this.getProxiwashChangePicker()}
|
|
</View>
|
|
</List.Section>
|
|
</Card>
|
|
<Card style={styles.card}>
|
|
<Card.Title title={i18n.t('screens.settings.information')} />
|
|
<List.Section>
|
|
{isDebugUnlocked
|
|
? this.getNavigateItem(
|
|
'debug',
|
|
'bug-check',
|
|
i18n.t('screens.debug.title'),
|
|
''
|
|
)
|
|
: null}
|
|
{this.getNavigateItem(
|
|
'about',
|
|
'information',
|
|
i18n.t('screens.about.title'),
|
|
i18n.t('screens.about.buttonDesc'),
|
|
this.unlockDebugMode
|
|
)}
|
|
{this.getNavigateItem(
|
|
'feedback',
|
|
'comment-quote',
|
|
i18n.t('screens.feedback.homeButtonTitle'),
|
|
i18n.t('screens.feedback.homeButtonSubtitle')
|
|
)}
|
|
</List.Section>
|
|
</Card>
|
|
</CollapsibleScrollView>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withTheme(SettingsScreen);
|