Add new Screen to select wash
This commit is contained in:
docjyJ
parent
41a17a9a91
commit
115c90b712
3 changed files with 188 additions and 40 deletions
|
|
@ -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'),
|
||||
)}
|
||||
</ProxiwashStack.Navigator>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<PropsType, StateType> {
|
|||
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 (
|
||||
<View
|
||||
|
|
@ -369,6 +343,31 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
|||
return count;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a chevron icon
|
||||
*
|
||||
* @param props
|
||||
* @return {*}
|
||||
*/
|
||||
static getChevronIcon(props: ListIconPropsType): React.Node {
|
||||
return (
|
||||
<List.Icon color={props.color} style={props.style} icon="chevron-right" />
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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 (
|
||||
<List.Icon color={props.color} style={props.style} icon={item.icon} />
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the dataset to be used by the FlatList
|
||||
*
|
||||
|
|
@ -423,24 +422,31 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
|||
}
|
||||
};
|
||||
|
||||
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 (
|
||||
<Card>
|
||||
<Card.Title
|
||||
title={data.title}
|
||||
subtitle={data.subtitle}
|
||||
left={(iconProps: CardTitleIconPropsType): React.Node => (
|
||||
<Avatar.Icon size={iconProps.size} icon={data.icon} />
|
||||
)}
|
||||
<List.Item
|
||||
title={item.title}
|
||||
description={item.subtitle}
|
||||
left={getItemIcon}
|
||||
right={ProxiwashScreen.getChevronIcon}
|
||||
onPress={this.onPressCallback}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
|
|
@ -490,10 +496,10 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
|||
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 (
|
||||
<View
|
||||
|
|
|
|||
135
src/screens/Proxiwash/ProxiwashSettingsScreen.js
Normal file
135
src/screens/Proxiwash/ProxiwashSettingsScreen.js
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Title,
|
||||
Button,
|
||||
Card,
|
||||
Avatar,
|
||||
withTheme,
|
||||
Paragraph,
|
||||
} from 'react-native-paper';
|
||||
import i18n from 'i18n-js';
|
||||
import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
|
||||
import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
|
||||
import AsyncStorageManager from '../../managers/AsyncStorageManager';
|
||||
import ThemeManager from '../../managers/ThemeManager';
|
||||
import type {CustomThemeType} from '../../managers/ThemeManager';
|
||||
|
||||
export type LaverieType = {
|
||||
id: string,
|
||||
title: string,
|
||||
subtitle: string,
|
||||
description: string,
|
||||
tarif: string,
|
||||
paymentMethods: string,
|
||||
icon: string,
|
||||
url: string,
|
||||
};
|
||||
|
||||
export const PROXIWASH_DATA = {
|
||||
washinsa: {
|
||||
id: 'washinsa',
|
||||
title: i18n.t('screens.proxiwash.washinsa.title'),
|
||||
subtitle: i18n.t('screens.proxiwash.washinsa.subtitle'),
|
||||
description: i18n.t('screens.proxiwash.washinsa.description'),
|
||||
tarif: i18n.t('screens.proxiwash.washinsa.tariff'),
|
||||
paymentMethods: i18n.t('screens.proxiwash.washinsa.paymentMethods'),
|
||||
icon: 'school-outline',
|
||||
url:
|
||||
'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json',
|
||||
},
|
||||
tripodeB: {
|
||||
id: 'tripodeB',
|
||||
title: i18n.t('screens.proxiwash.tripodeB.title'),
|
||||
subtitle: i18n.t('screens.proxiwash.tripodeB.subtitle'),
|
||||
description: i18n.t('screens.proxiwash.tripodeB.description'),
|
||||
tarif: i18n.t('screens.proxiwash.tripodeB.tariff'),
|
||||
paymentMethods: i18n.t('screens.proxiwash.tripodeB.paymentMethods'),
|
||||
icon: 'domain',
|
||||
url:
|
||||
'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/tripode_b_data.json',
|
||||
},
|
||||
};
|
||||
|
||||
type StateType = {
|
||||
selectedWash: string,
|
||||
currentTheme: CustomThemeType,
|
||||
};
|
||||
|
||||
/**
|
||||
* Class defining the proxiwash settings screen.
|
||||
*/
|
||||
class ProxiwashSettingsScreen extends React.Component<null, StateType> {
|
||||
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 (
|
||||
<Card style={cardStyle}>
|
||||
<Card.Title
|
||||
title={item.title}
|
||||
subtitle={item.subtitle}
|
||||
left={(iconProps: CardTitleIconPropsType): React.Node => (
|
||||
<Avatar.Icon size={iconProps.size} icon={item.icon} />
|
||||
)}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Paragraph>{item.description}</Paragraph>
|
||||
<Title>{i18n.t('screens.proxiwash.tariffs')}</Title>
|
||||
<Paragraph>{item.tarif}</Paragraph>
|
||||
<Title>{i18n.t('screens.proxiwash.paymentMethods')}</Title>
|
||||
<Paragraph>{item.paymentMethods}</Paragraph>
|
||||
</Card.Content>
|
||||
<Card.Actions>
|
||||
<Button onPress={onSelectWashValueChange}>Select</Button>
|
||||
</Card.Actions>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
return (
|
||||
<CollapsibleScrollView style={{padding: 5}} hasTab>
|
||||
{this.getCardItem(PROXIWASH_DATA.washinsa)}
|
||||
{this.getCardItem(PROXIWASH_DATA.tripodeB)}
|
||||
</CollapsibleScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(ProxiwashSettingsScreen);
|
||||
Loading…
Reference in a new issue