From 115c90b7126b1a5fa76fe623faa2971aa95fccbf Mon Sep 17 00:00:00 2001 From: docjyJ Date: Tue, 8 Sep 2020 16:51:29 +0200 Subject: [PATCH] Add new Screen to select wash --- src/navigation/TabNavigator.js | 7 + src/screens/Proxiwash/ProxiwashScreen.js | 86 +++++------ .../Proxiwash/ProxiwashSettingsScreen.js | 135 ++++++++++++++++++ 3 files changed, 188 insertions(+), 40 deletions(-) create mode 100644 src/screens/Proxiwash/ProxiwashSettingsScreen.js diff --git a/src/navigation/TabNavigator.js b/src/navigation/TabNavigator.js index 640282b..29ce6c7 100644 --- a/src/navigation/TabNavigator.js +++ b/src/navigation/TabNavigator.js @@ -29,6 +29,7 @@ import { getWebsiteStack, } from '../utils/CollapsibleUtils'; import Mascot, {MASCOT_STYLE} from '../components/Mascot/Mascot'; +import ProxiwashSettingsScreen from '../screens/Proxiwash/ProxiwashSettingsScreen'; const modalTransition = Platform.OS === 'ios' @@ -91,6 +92,12 @@ function ProxiwashStackComponent(): React.Node { ProxiwashAboutScreen, i18n.t('screens.proxiwash.title'), )} + {createScreenCollapsibleStack( + 'proxiwash-settings', + ProxiwashStack, + ProxiwashSettingsScreen, + i18n.t('screens.proxiwash.title'), + )} ); } diff --git a/src/screens/Proxiwash/ProxiwashScreen.js b/src/screens/Proxiwash/ProxiwashScreen.js index 5c1694e..6b728cb 100644 --- a/src/screens/Proxiwash/ProxiwashScreen.js +++ b/src/screens/Proxiwash/ProxiwashScreen.js @@ -3,7 +3,7 @@ import * as React from 'react'; import {Alert, View} from 'react-native'; import i18n from 'i18n-js'; -import {Avatar, Button, Card, Text, withTheme} from 'react-native-paper'; +import {Avatar, Button, Card, List, Text, withTheme} from 'react-native-paper'; import {StackNavigationProp} from '@react-navigation/stack'; import {Modalize} from 'react-native-modalize'; import WebSectionList from '../../components/Screens/WebSectionList'; @@ -26,31 +26,8 @@ import { import {MASCOT_STYLE} from '../../components/Mascot/Mascot'; import MascotPopup from '../../components/Mascot/MascotPopup'; import type {SectionListDataType} from '../../components/Screens/WebSectionList'; -import type {CardTitleIconPropsType} from '../../constants/PaperStyles'; - -type LaverieType = { - title: string, - subtitle: string, - icon: string, - url: string, -}; - -const DATA = { - washinsa: { - title: 'Laverie INSA', - subtitle: 'Ta laverie préférer !!', - icon: 'school-outline', - url: - 'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json', - }, - tripodeB: { - title: 'Laverie Tripode B', - subtitle: 'En vrai je sais pas trop quoi marqué.', - icon: 'domain', - url: - 'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/tripode_b_data.json', - }, -}; +import type {ListIconPropsType} from '../../constants/PaperStyles'; +import {PROXIWASH_DATA} from './ProxiwashSettingsScreen'; const modalStateStrings = {}; @@ -225,9 +202,6 @@ class ProxiwashScreen extends React.Component { remaining: remainingTime, program: item.program, }); - } else if (item.state === ProxiwashConstants.machineStates.AVAILABLE) { - if (isDryer) message += `\n${i18n.t('screens.proxiwash.dryersTariff')}`; - else message += `\n${i18n.t('screens.proxiwash.washersTariff')}`; } return ( { return count; } + /** + * Gets a chevron icon + * + * @param props + * @return {*} + */ + static getChevronIcon(props: ListIconPropsType): React.Node { + return ( + + ); + } + + /** + * Gets a custom list item icon + * + * @param item The item to show the icon for + * @param props + * @return {*} + */ + static getItemIcon(item: ListItemType, props: ListIconPropsType): React.Node { + return ( + + ); + } + /** * Creates the dataset to be used by the FlatList * @@ -423,24 +422,31 @@ class ProxiwashScreen extends React.Component { } }; + onPressCallback = () => { + const {navigation} = this.props; + navigation.navigate('proxiwash-settings'); + }; + getListHeader = (): React.Node => { const {selectedWash} = this.state; - let data: LaverieType; + let item: LaverieType; switch (selectedWash) { case 'tripodeB': - data = DATA.tripodeB; + item = PROXIWASH_DATA.tripodeB; break; default: - data = DATA.washinsa; + item = PROXIWASH_DATA.washinsa; } + const getItemIcon = (props: ListIconPropsType): React.Node => + ProxiwashScreen.getItemIcon(item, props); return ( - ( - - )} + ); @@ -490,10 +496,10 @@ class ProxiwashScreen extends React.Component { let data: LaverieType; switch (state.selectedWash) { case 'tripodeB': - data = DATA.tripodeB; + data = PROXIWASH_DATA.tripodeB; break; default: - data = DATA.washinsa; + data = PROXIWASH_DATA.washinsa; } return ( { + constructor() { + super(); + this.state = { + selectedWash: AsyncStorageManager.getString( + AsyncStorageManager.PREFERENCES.selectedWash.key, + ), + }; + } + + /** + * Saves the value for the proxiwash reminder notification time + * + * @param value The value to store + */ + onSelectWashValueChange = (value: string) => { + if (value != null) { + this.setState({selectedWash: value}); + AsyncStorageManager.set( + AsyncStorageManager.PREFERENCES.selectedWash.key, + value, + ); + } + }; + + getCardItem(item: LaverieType): React.Node { + const {selectedWash} = this.state; + const onSelectWashValueChange = (): void => + this.onSelectWashValueChange(item.id); + let cardStyle = { + margin: 5, + }; + if (selectedWash === item.id) { + cardStyle = { + margin: 5, + backgroundColor: ThemeManager.getCurrentTheme().colors + .proxiwashUnknownColor, + }; + } + return ( + + ( + + )} + /> + + {item.description} + {i18n.t('screens.proxiwash.tariffs')} + {item.tarif} + {i18n.t('screens.proxiwash.paymentMethods')} + {item.paymentMethods} + + + + + + ); + } + + render(): React.Node { + return ( + + {this.getCardItem(PROXIWASH_DATA.washinsa)} + {this.getCardItem(PROXIWASH_DATA.tripodeB)} + + ); + } +} + +export default withTheme(ProxiwashSettingsScreen);