Improve Proxiwash components to match linter
このコミットが含まれているのは:
コミット
1cc0802c12
5個のファイルの変更、882行の追加、740行の削除
|
|
@ -1,194 +1,236 @@
|
|||
import * as React from 'react';
|
||||
import {Avatar, Caption, List, ProgressBar, Surface, Text, withTheme} from 'react-native-paper';
|
||||
import {StyleSheet, View} from "react-native";
|
||||
import ProxiwashConstants from "../../../constants/ProxiwashConstants";
|
||||
import i18n from "i18n-js";
|
||||
import AprilFoolsManager from "../../../managers/AprilFoolsManager";
|
||||
import * as Animatable from "react-native-animatable";
|
||||
import type {CustomTheme} from "../../../managers/ThemeManager";
|
||||
import type {Machine} from "../../../screens/Proxiwash/ProxiwashScreen";
|
||||
// @flow
|
||||
|
||||
type Props = {
|
||||
item: Machine,
|
||||
theme: CustomTheme,
|
||||
onPress: Function,
|
||||
isWatched: boolean,
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Avatar,
|
||||
Caption,
|
||||
List,
|
||||
ProgressBar,
|
||||
Surface,
|
||||
Text,
|
||||
withTheme,
|
||||
} from 'react-native-paper';
|
||||
import {StyleSheet, View} from 'react-native';
|
||||
import i18n from 'i18n-js';
|
||||
import * as Animatable from 'react-native-animatable';
|
||||
import ProxiwashConstants from '../../../constants/ProxiwashConstants';
|
||||
import AprilFoolsManager from '../../../managers/AprilFoolsManager';
|
||||
import type {CustomTheme} from '../../../managers/ThemeManager';
|
||||
import type {ProxiwashMachineType} from '../../../screens/Proxiwash/ProxiwashScreen';
|
||||
|
||||
type PropsType = {
|
||||
item: ProxiwashMachineType,
|
||||
theme: CustomTheme,
|
||||
onPress: (
|
||||
title: string,
|
||||
item: ProxiwashMachineType,
|
||||
isDryer: boolean,
|
||||
height: number,
|
||||
}
|
||||
) => void,
|
||||
isWatched: boolean,
|
||||
isDryer: boolean,
|
||||
height: number,
|
||||
};
|
||||
|
||||
const AnimatedIcon = Animatable.createAnimatableComponent(Avatar.Icon);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
margin: 5,
|
||||
justifyContent: 'center',
|
||||
elevation: 1,
|
||||
},
|
||||
icon: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
progressBar: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
borderRadius: 4,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Component used to display a proxiwash item, showing machine progression and state
|
||||
*/
|
||||
class ProxiwashListItem extends React.Component<Props> {
|
||||
class ProxiwashListItem extends React.Component<PropsType> {
|
||||
stateColors: {[key: string]: string};
|
||||
|
||||
stateColors: Object;
|
||||
stateStrings: Object;
|
||||
stateStrings: {[key: string]: string};
|
||||
|
||||
title: string;
|
||||
title: string;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.stateColors = {};
|
||||
this.stateStrings = {};
|
||||
constructor(props: PropsType) {
|
||||
super(props);
|
||||
this.stateColors = {};
|
||||
this.stateStrings = {};
|
||||
|
||||
this.updateStateStrings();
|
||||
this.updateStateStrings();
|
||||
|
||||
let displayNumber = props.item.number;
|
||||
if (AprilFoolsManager.getInstance().isAprilFoolsEnabled())
|
||||
displayNumber = AprilFoolsManager.getProxiwashMachineDisplayNumber(parseInt(props.item.number));
|
||||
let displayNumber = props.item.number;
|
||||
if (AprilFoolsManager.getInstance().isAprilFoolsEnabled())
|
||||
displayNumber = AprilFoolsManager.getProxiwashMachineDisplayNumber(
|
||||
parseInt(props.item.number, 10),
|
||||
);
|
||||
|
||||
this.title = props.isDryer
|
||||
? i18n.t('screens.proxiwash.dryer')
|
||||
: i18n.t('screens.proxiwash.washer');
|
||||
this.title += ' n°' + displayNumber;
|
||||
}
|
||||
this.title = props.isDryer
|
||||
? i18n.t('screens.proxiwash.dryer')
|
||||
: i18n.t('screens.proxiwash.washer');
|
||||
this.title += ` n°${displayNumber}`;
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps: Props): boolean {
|
||||
const props = this.props;
|
||||
return (nextProps.theme.dark !== props.theme.dark)
|
||||
|| (nextProps.item.state !== props.item.state)
|
||||
|| (nextProps.item.donePercent !== props.item.donePercent)
|
||||
|| (nextProps.isWatched !== props.isWatched);
|
||||
}
|
||||
shouldComponentUpdate(nextProps: PropsType): boolean {
|
||||
const {props} = this;
|
||||
return (
|
||||
nextProps.theme.dark !== props.theme.dark ||
|
||||
nextProps.item.state !== props.item.state ||
|
||||
nextProps.item.donePercent !== props.item.donePercent ||
|
||||
nextProps.isWatched !== props.isWatched
|
||||
);
|
||||
}
|
||||
|
||||
updateStateStrings() {
|
||||
this.stateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t('screens.proxiwash.states.ready');
|
||||
this.stateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t('screens.proxiwash.states.running');
|
||||
this.stateStrings[ProxiwashConstants.machineStates.RUNNING_NOT_STARTED] = i18n.t('screens.proxiwash.states.runningNotStarted');
|
||||
this.stateStrings[ProxiwashConstants.machineStates.FINISHED] = i18n.t('screens.proxiwash.states.finished');
|
||||
this.stateStrings[ProxiwashConstants.machineStates.UNAVAILABLE] = i18n.t('screens.proxiwash.states.broken');
|
||||
this.stateStrings[ProxiwashConstants.machineStates.ERROR] = i18n.t('screens.proxiwash.states.error');
|
||||
this.stateStrings[ProxiwashConstants.machineStates.UNKNOWN] = i18n.t('screens.proxiwash.states.unknown');
|
||||
}
|
||||
onListItemPress = () => {
|
||||
const {props} = this;
|
||||
props.onPress(this.title, props.item, props.isDryer);
|
||||
};
|
||||
|
||||
updateStateColors() {
|
||||
const colors = this.props.theme.colors;
|
||||
this.stateColors[ProxiwashConstants.machineStates.AVAILABLE] = colors.proxiwashReadyColor;
|
||||
this.stateColors[ProxiwashConstants.machineStates.RUNNING] = colors.proxiwashRunningColor;
|
||||
this.stateColors[ProxiwashConstants.machineStates.RUNNING_NOT_STARTED] = colors.proxiwashRunningNotStartedColor;
|
||||
this.stateColors[ProxiwashConstants.machineStates.FINISHED] = colors.proxiwashFinishedColor;
|
||||
this.stateColors[ProxiwashConstants.machineStates.UNAVAILABLE] = colors.proxiwashBrokenColor;
|
||||
this.stateColors[ProxiwashConstants.machineStates.ERROR] = colors.proxiwashErrorColor;
|
||||
this.stateColors[ProxiwashConstants.machineStates.UNKNOWN] = colors.proxiwashUnknownColor;
|
||||
}
|
||||
updateStateStrings() {
|
||||
this.stateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t(
|
||||
'screens.proxiwash.states.ready',
|
||||
);
|
||||
this.stateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t(
|
||||
'screens.proxiwash.states.running',
|
||||
);
|
||||
this.stateStrings[
|
||||
ProxiwashConstants.machineStates.RUNNING_NOT_STARTED
|
||||
] = i18n.t('screens.proxiwash.states.runningNotStarted');
|
||||
this.stateStrings[ProxiwashConstants.machineStates.FINISHED] = i18n.t(
|
||||
'screens.proxiwash.states.finished',
|
||||
);
|
||||
this.stateStrings[ProxiwashConstants.machineStates.UNAVAILABLE] = i18n.t(
|
||||
'screens.proxiwash.states.broken',
|
||||
);
|
||||
this.stateStrings[ProxiwashConstants.machineStates.ERROR] = i18n.t(
|
||||
'screens.proxiwash.states.error',
|
||||
);
|
||||
this.stateStrings[ProxiwashConstants.machineStates.UNKNOWN] = i18n.t(
|
||||
'screens.proxiwash.states.unknown',
|
||||
);
|
||||
}
|
||||
|
||||
onListItemPress = () => this.props.onPress(this.title, this.props.item, this.props.isDryer);
|
||||
updateStateColors() {
|
||||
const {props} = this;
|
||||
const {colors} = props.theme;
|
||||
this.stateColors[ProxiwashConstants.machineStates.AVAILABLE] =
|
||||
colors.proxiwashReadyColor;
|
||||
this.stateColors[ProxiwashConstants.machineStates.RUNNING] =
|
||||
colors.proxiwashRunningColor;
|
||||
this.stateColors[ProxiwashConstants.machineStates.RUNNING_NOT_STARTED] =
|
||||
colors.proxiwashRunningNotStartedColor;
|
||||
this.stateColors[ProxiwashConstants.machineStates.FINISHED] =
|
||||
colors.proxiwashFinishedColor;
|
||||
this.stateColors[ProxiwashConstants.machineStates.UNAVAILABLE] =
|
||||
colors.proxiwashBrokenColor;
|
||||
this.stateColors[ProxiwashConstants.machineStates.ERROR] =
|
||||
colors.proxiwashErrorColor;
|
||||
this.stateColors[ProxiwashConstants.machineStates.UNKNOWN] =
|
||||
colors.proxiwashUnknownColor;
|
||||
}
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const colors = props.theme.colors;
|
||||
const machineState = props.item.state;
|
||||
const isRunning = machineState === ProxiwashConstants.machineStates.RUNNING;
|
||||
const isReady = machineState === ProxiwashConstants.machineStates.AVAILABLE;
|
||||
const description = isRunning ? props.item.startTime + '/' + props.item.endTime : '';
|
||||
const stateIcon = ProxiwashConstants.stateIcons[machineState];
|
||||
const stateString = this.stateStrings[machineState];
|
||||
const progress = isRunning
|
||||
? props.item.donePercent !== ''
|
||||
? parseFloat(props.item.donePercent) / 100
|
||||
: 0
|
||||
: 1;
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
const {colors} = props.theme;
|
||||
const machineState = props.item.state;
|
||||
const isRunning = machineState === ProxiwashConstants.machineStates.RUNNING;
|
||||
const isReady = machineState === ProxiwashConstants.machineStates.AVAILABLE;
|
||||
const description = isRunning
|
||||
? `${props.item.startTime}/${props.item.endTime}`
|
||||
: '';
|
||||
const stateIcon = ProxiwashConstants.stateIcons[machineState];
|
||||
const stateString = this.stateStrings[machineState];
|
||||
let progress;
|
||||
if (isRunning && props.item.donePercent !== '')
|
||||
progress = parseFloat(props.item.donePercent) / 100;
|
||||
else if (isRunning) progress = 0;
|
||||
else progress = 1;
|
||||
|
||||
const icon = props.isWatched
|
||||
? <AnimatedIcon
|
||||
icon={'bell-ring'}
|
||||
animation={"rubberBand"}
|
||||
useNativeDriver
|
||||
size={50}
|
||||
color={colors.primary}
|
||||
style={styles.icon}
|
||||
/>
|
||||
: <AnimatedIcon
|
||||
icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
|
||||
animation={isRunning ? "pulse" : undefined}
|
||||
iterationCount={"infinite"}
|
||||
easing={"linear"}
|
||||
duration={1000}
|
||||
useNativeDriver
|
||||
size={40}
|
||||
color={colors.text}
|
||||
style={styles.icon}
|
||||
/>;
|
||||
this.updateStateColors();
|
||||
return (
|
||||
<Surface
|
||||
style={{
|
||||
...styles.container,
|
||||
height: props.height,
|
||||
borderRadius: 4,
|
||||
}}
|
||||
>
|
||||
{
|
||||
!isReady
|
||||
? <ProgressBar
|
||||
style={{
|
||||
...styles.progressBar,
|
||||
height: props.height
|
||||
}}
|
||||
progress={progress}
|
||||
color={this.stateColors[machineState]}
|
||||
/>
|
||||
: null
|
||||
}
|
||||
<List.Item
|
||||
title={this.title}
|
||||
description={description}
|
||||
style={{
|
||||
height: props.height,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
onPress={this.onListItemPress}
|
||||
left={() => icon}
|
||||
right={() => (
|
||||
<View style={{flexDirection: 'row',}}>
|
||||
<View style={{justifyContent: 'center',}}>
|
||||
<Text style={
|
||||
machineState === ProxiwashConstants.machineStates.FINISHED ?
|
||||
{fontWeight: 'bold',} : {}
|
||||
}
|
||||
>
|
||||
{stateString}
|
||||
</Text>
|
||||
{
|
||||
machineState === ProxiwashConstants.machineStates.RUNNING
|
||||
? <Caption>{props.item.remainingTime} min</Caption>
|
||||
: null
|
||||
}
|
||||
|
||||
</View>
|
||||
<View style={{justifyContent: 'center',}}>
|
||||
<Avatar.Icon
|
||||
icon={stateIcon}
|
||||
color={colors.text}
|
||||
size={30}
|
||||
style={styles.icon}
|
||||
/>
|
||||
</View>
|
||||
</View>)}
|
||||
const icon = props.isWatched ? (
|
||||
<AnimatedIcon
|
||||
icon="bell-ring"
|
||||
animation="rubberBand"
|
||||
useNativeDriver
|
||||
size={50}
|
||||
color={colors.primary}
|
||||
style={styles.icon}
|
||||
/>
|
||||
) : (
|
||||
<AnimatedIcon
|
||||
icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
|
||||
animation={isRunning ? 'pulse' : undefined}
|
||||
iterationCount="infinite"
|
||||
easing="linear"
|
||||
duration={1000}
|
||||
useNativeDriver
|
||||
size={40}
|
||||
color={colors.text}
|
||||
style={styles.icon}
|
||||
/>
|
||||
);
|
||||
this.updateStateColors();
|
||||
return (
|
||||
<Surface
|
||||
style={{
|
||||
...styles.container,
|
||||
height: props.height,
|
||||
borderRadius: 4,
|
||||
}}>
|
||||
{!isReady ? (
|
||||
<ProgressBar
|
||||
style={{
|
||||
...styles.progressBar,
|
||||
height: props.height,
|
||||
}}
|
||||
progress={progress}
|
||||
color={this.stateColors[machineState]}
|
||||
/>
|
||||
) : null}
|
||||
<List.Item
|
||||
title={this.title}
|
||||
description={description}
|
||||
style={{
|
||||
height: props.height,
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
onPress={this.onListItemPress}
|
||||
left={(): React.Node => icon}
|
||||
right={(): React.Node => (
|
||||
<View style={{flexDirection: 'row'}}>
|
||||
<View style={{justifyContent: 'center'}}>
|
||||
<Text
|
||||
style={
|
||||
machineState === ProxiwashConstants.machineStates.FINISHED
|
||||
? {fontWeight: 'bold'}
|
||||
: {}
|
||||
}>
|
||||
{stateString}
|
||||
</Text>
|
||||
{machineState === ProxiwashConstants.machineStates.RUNNING ? (
|
||||
<Caption>{props.item.remainingTime} min</Caption>
|
||||
) : null}
|
||||
</View>
|
||||
<View style={{justifyContent: 'center'}}>
|
||||
<Avatar.Icon
|
||||
icon={stateIcon}
|
||||
color={colors.text}
|
||||
size={30}
|
||||
style={styles.icon}
|
||||
/>
|
||||
</Surface>
|
||||
);
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
/>
|
||||
</Surface>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
margin: 5,
|
||||
justifyContent: 'center',
|
||||
elevation: 1
|
||||
},
|
||||
icon: {
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
progressBar: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
borderRadius: 4,
|
||||
},
|
||||
});
|
||||
|
||||
export default withTheme(ProxiwashListItem);
|
||||
|
|
|
|||
|
|
@ -1,72 +1,72 @@
|
|||
// @flow
|
||||
|
||||
import * as React from 'react';
|
||||
import {Avatar, Text, withTheme} from 'react-native-paper';
|
||||
import {StyleSheet, View} from "react-native";
|
||||
import i18n from "i18n-js";
|
||||
import {StyleSheet, View} from 'react-native';
|
||||
import i18n from 'i18n-js';
|
||||
import type {CustomTheme} from '../../../managers/ThemeManager';
|
||||
|
||||
type Props = {
|
||||
title: string,
|
||||
isDryer: boolean,
|
||||
nbAvailable: number,
|
||||
}
|
||||
type PropsType = {
|
||||
theme: CustomTheme,
|
||||
title: string,
|
||||
isDryer: boolean,
|
||||
nbAvailable: number,
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: 'row',
|
||||
marginLeft: 5,
|
||||
marginRight: 5,
|
||||
marginBottom: 10,
|
||||
marginTop: 20,
|
||||
},
|
||||
icon: {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
text: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* Component used to display a proxiwash item, showing machine progression and state
|
||||
*/
|
||||
class ProxiwashListItem extends React.Component<Props> {
|
||||
class ProxiwashListItem extends React.Component<PropsType> {
|
||||
shouldComponentUpdate(nextProps: PropsType): boolean {
|
||||
const {props} = this;
|
||||
return (
|
||||
nextProps.theme.dark !== props.theme.dark ||
|
||||
nextProps.nbAvailable !== props.nbAvailable
|
||||
);
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps: Props) {
|
||||
return (nextProps.theme.dark !== this.props.theme.dark)
|
||||
|| (nextProps.nbAvailable !== this.props.nbAvailable)
|
||||
}
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const subtitle = props.nbAvailable + ' ' + (
|
||||
(props.nbAvailable <= 1)
|
||||
? i18n.t('screens.proxiwash.numAvailable')
|
||||
: i18n.t('screens.proxiwash.numAvailablePlural'));
|
||||
const iconColor = props.nbAvailable > 0
|
||||
? this.props.theme.colors.success
|
||||
: this.props.theme.colors.primary;
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Avatar.Icon
|
||||
icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
|
||||
color={iconColor}
|
||||
style={styles.icon}
|
||||
/>
|
||||
<View style={{justifyContent: 'center'}}>
|
||||
<Text style={styles.text}>
|
||||
{props.title}
|
||||
</Text>
|
||||
<Text style={{color: this.props.theme.colors.subtitle}}>
|
||||
{subtitle}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
render(): React.Node {
|
||||
const {props} = this;
|
||||
const subtitle = `${props.nbAvailable} ${
|
||||
props.nbAvailable <= 1
|
||||
? i18n.t('screens.proxiwash.numAvailable')
|
||||
: i18n.t('screens.proxiwash.numAvailablePlural')
|
||||
}`;
|
||||
const iconColor =
|
||||
props.nbAvailable > 0
|
||||
? props.theme.colors.success
|
||||
: props.theme.colors.primary;
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Avatar.Icon
|
||||
icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
|
||||
color={iconColor}
|
||||
style={styles.icon}
|
||||
/>
|
||||
<View style={{justifyContent: 'center'}}>
|
||||
<Text style={styles.text}>{props.title}</Text>
|
||||
<Text style={{color: props.theme.colors.subtitle}}>{subtitle}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: 'row',
|
||||
marginLeft: 5,
|
||||
marginRight: 5,
|
||||
marginBottom: 10,
|
||||
marginTop: 20,
|
||||
},
|
||||
icon: {
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
text: {
|
||||
fontSize: 20,
|
||||
fontWeight: 'bold',
|
||||
}
|
||||
});
|
||||
|
||||
export default withTheme(ProxiwashListItem);
|
||||
|
|
|
|||
|
|
@ -2,85 +2,117 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {Image, View} from 'react-native';
|
||||
import i18n from "i18n-js";
|
||||
import i18n from 'i18n-js';
|
||||
import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
|
||||
import CustomTabBar from "../../components/Tabbar/CustomTabBar";
|
||||
import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView";
|
||||
import CustomTabBar from '../../components/Tabbar/CustomTabBar';
|
||||
import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
|
||||
|
||||
type Props = {};
|
||||
|
||||
const LOGO = "https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png";
|
||||
const LOGO = 'https://etud.insa-toulouse.fr/~amicale_app/images/Proxiwash.png';
|
||||
|
||||
/**
|
||||
* Class defining the proxiwash about screen.
|
||||
*/
|
||||
export default class ProxiwashAboutScreen extends React.Component<Props> {
|
||||
// eslint-disable-next-line react/prefer-stateless-function
|
||||
export default class ProxiwashAboutScreen extends React.Component<null> {
|
||||
render(): React.Node {
|
||||
return (
|
||||
<CollapsibleScrollView style={{padding: 5}} hasTab>
|
||||
<View
|
||||
style={{
|
||||
width: '100%',
|
||||
height: 100,
|
||||
marginTop: 20,
|
||||
marginBottom: 20,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<Image
|
||||
source={{uri: LOGO}}
|
||||
style={{height: '100%', width: '100%', resizeMode: 'contain'}}
|
||||
/>
|
||||
</View>
|
||||
<Text>{i18n.t('screens.proxiwash.description')}</Text>
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={i18n.t('screens.proxiwash.dryer')}
|
||||
left={({
|
||||
size,
|
||||
color,
|
||||
}: {
|
||||
size: number,
|
||||
color: string,
|
||||
}): React.Node => (
|
||||
<List.Icon size={size} color={color} icon="tumble-dryer" />
|
||||
)}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Title>{i18n.t('screens.proxiwash.procedure')}</Title>
|
||||
<Paragraph>{i18n.t('screens.proxiwash.dryerProcedure')}</Paragraph>
|
||||
<Title>{i18n.t('screens.proxiwash.tips')}</Title>
|
||||
<Paragraph>{i18n.t('screens.proxiwash.dryerTips')}</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
|
||||
render() {
|
||||
return (
|
||||
<CollapsibleScrollView
|
||||
style={{padding: 5}}
|
||||
hasTab={true}
|
||||
>
|
||||
<View style={{
|
||||
width: '100%',
|
||||
height: 100,
|
||||
marginTop: 20,
|
||||
marginBottom: 20,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<Image
|
||||
source={{uri: LOGO}}
|
||||
style={{height: '100%', width: '100%', resizeMode: "contain"}}/>
|
||||
</View>
|
||||
<Text>{i18n.t('screens.proxiwash.description')}</Text>
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={i18n.t('screens.proxiwash.dryer')}
|
||||
left={props => <List.Icon {...props} icon={'tumble-dryer'}/>}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Title>{i18n.t('screens.proxiwash.procedure')}</Title>
|
||||
<Paragraph>{i18n.t('screens.proxiwash.dryerProcedure')}</Paragraph>
|
||||
<Title>{i18n.t('screens.proxiwash.tips')}</Title>
|
||||
<Paragraph>{i18n.t('screens.proxiwash.dryerTips')}</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={i18n.t('screens.proxiwash.washer')}
|
||||
left={({
|
||||
size,
|
||||
color,
|
||||
}: {
|
||||
size: number,
|
||||
color: string,
|
||||
}): React.Node => (
|
||||
<List.Icon size={size} color={color} icon="washing-machine" />
|
||||
)}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Title>{i18n.t('screens.proxiwash.procedure')}</Title>
|
||||
<Paragraph>{i18n.t('screens.proxiwash.washerProcedure')}</Paragraph>
|
||||
<Title>{i18n.t('screens.proxiwash.tips')}</Title>
|
||||
<Paragraph>{i18n.t('screens.proxiwash.washerTips')}</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={i18n.t('screens.proxiwash.washer')}
|
||||
left={props => <List.Icon {...props} icon={'washing-machine'}/>}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Title>{i18n.t('screens.proxiwash.procedure')}</Title>
|
||||
<Paragraph>{i18n.t('screens.proxiwash.washerProcedure')}</Paragraph>
|
||||
<Title>{i18n.t('screens.proxiwash.tips')}</Title>
|
||||
<Paragraph>{i18n.t('screens.proxiwash.washerTips')}</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={i18n.t('screens.proxiwash.tariffs')}
|
||||
left={props => <List.Icon {...props} icon={'circle-multiple'}/>}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Paragraph>{i18n.t('screens.proxiwash.washersTariff')}</Paragraph>
|
||||
<Paragraph>{i18n.t('screens.proxiwash.dryersTariff')}</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
<Card style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
|
||||
<Card.Title
|
||||
title={i18n.t('screens.proxiwash.paymentMethods')}
|
||||
left={props => <List.Icon {...props} icon={'cash'}/>}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Paragraph>{i18n.t('screens.proxiwash.paymentMethodsDescription')}</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
</CollapsibleScrollView>
|
||||
);
|
||||
}
|
||||
<Card style={{margin: 5}}>
|
||||
<Card.Title
|
||||
title={i18n.t('screens.proxiwash.tariffs')}
|
||||
left={({
|
||||
size,
|
||||
color,
|
||||
}: {
|
||||
size: number,
|
||||
color: string,
|
||||
}): React.Node => (
|
||||
<List.Icon size={size} color={color} icon="circle-multiple" />
|
||||
)}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Paragraph>{i18n.t('screens.proxiwash.washersTariff')}</Paragraph>
|
||||
<Paragraph>{i18n.t('screens.proxiwash.dryersTariff')}</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
<Card
|
||||
style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
|
||||
<Card.Title
|
||||
title={i18n.t('screens.proxiwash.paymentMethods')}
|
||||
left={({
|
||||
size,
|
||||
color,
|
||||
}: {
|
||||
size: number,
|
||||
color: string,
|
||||
}): React.Node => (
|
||||
<List.Icon size={size} color={color} icon="cash" />
|
||||
)}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Paragraph>
|
||||
{i18n.t('screens.proxiwash.paymentMethodsDescription')}
|
||||
</Paragraph>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
</CollapsibleScrollView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,421 +2,480 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {Alert, View} from 'react-native';
|
||||
import i18n from "i18n-js";
|
||||
import WebSectionList from "../../components/Screens/WebSectionList";
|
||||
import * as Notifications from "../../utils/Notifications";
|
||||
import AsyncStorageManager from "../../managers/AsyncStorageManager";
|
||||
import i18n from 'i18n-js';
|
||||
import {Avatar, Button, Card, Text, withTheme} from 'react-native-paper';
|
||||
import ProxiwashListItem from "../../components/Lists/Proxiwash/ProxiwashListItem";
|
||||
import ProxiwashConstants from "../../constants/ProxiwashConstants";
|
||||
import CustomModal from "../../components/Overrides/CustomModal";
|
||||
import AprilFoolsManager from "../../managers/AprilFoolsManager";
|
||||
import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton";
|
||||
import ProxiwashSectionHeader from "../../components/Lists/Proxiwash/ProxiwashSectionHeader";
|
||||
import type {CustomTheme} from "../../managers/ThemeManager";
|
||||
import {StackNavigationProp} from "@react-navigation/stack";
|
||||
import {getCleanedMachineWatched, getMachineEndDate, isMachineWatched} from "../../utils/Proxiwash";
|
||||
import {Modalize} from "react-native-modalize";
|
||||
import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
|
||||
import MascotPopup from "../../components/Mascot/MascotPopup";
|
||||
import {StackNavigationProp} from '@react-navigation/stack';
|
||||
import {Modalize} from 'react-native-modalize';
|
||||
import WebSectionList from '../../components/Screens/WebSectionList';
|
||||
import * as Notifications from '../../utils/Notifications';
|
||||
import AsyncStorageManager from '../../managers/AsyncStorageManager';
|
||||
import ProxiwashListItem from '../../components/Lists/Proxiwash/ProxiwashListItem';
|
||||
import ProxiwashConstants from '../../constants/ProxiwashConstants';
|
||||
import CustomModal from '../../components/Overrides/CustomModal';
|
||||
import AprilFoolsManager from '../../managers/AprilFoolsManager';
|
||||
import MaterialHeaderButtons, {
|
||||
Item,
|
||||
} from '../../components/Overrides/CustomHeaderButton';
|
||||
import ProxiwashSectionHeader from '../../components/Lists/Proxiwash/ProxiwashSectionHeader';
|
||||
import type {CustomTheme} from '../../managers/ThemeManager';
|
||||
import {
|
||||
getCleanedMachineWatched,
|
||||
getMachineEndDate,
|
||||
isMachineWatched,
|
||||
} from '../../utils/Proxiwash';
|
||||
import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
|
||||
import MascotPopup from '../../components/Mascot/MascotPopup';
|
||||
import type {SectionListDataType} from '../../components/Screens/WebSectionList';
|
||||
|
||||
const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json";
|
||||
const DATA_URL =
|
||||
'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json';
|
||||
|
||||
let modalStateStrings = {};
|
||||
const modalStateStrings = {};
|
||||
|
||||
const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
|
||||
const LIST_ITEM_HEIGHT = 64;
|
||||
|
||||
export type Machine = {
|
||||
number: string,
|
||||
state: string,
|
||||
startTime: string,
|
||||
endTime: string,
|
||||
donePercent: string,
|
||||
remainingTime: string,
|
||||
program: string,
|
||||
}
|
||||
|
||||
type Props = {
|
||||
navigation: StackNavigationProp,
|
||||
theme: CustomTheme,
|
||||
}
|
||||
|
||||
type State = {
|
||||
refreshing: boolean,
|
||||
modalCurrentDisplayItem: React.Node,
|
||||
machinesWatched: Array<Machine>,
|
||||
export type ProxiwashMachineType = {
|
||||
number: string,
|
||||
state: string,
|
||||
startTime: string,
|
||||
endTime: string,
|
||||
donePercent: string,
|
||||
remainingTime: string,
|
||||
program: string,
|
||||
};
|
||||
|
||||
type PropsType = {
|
||||
navigation: StackNavigationProp,
|
||||
theme: CustomTheme,
|
||||
};
|
||||
|
||||
type StateType = {
|
||||
modalCurrentDisplayItem: React.Node,
|
||||
machinesWatched: Array<ProxiwashMachineType>,
|
||||
};
|
||||
|
||||
/**
|
||||
* Class defining the app's proxiwash screen. This screen shows information about washing machines and
|
||||
* dryers, taken from a scrapper reading proxiwash website
|
||||
*/
|
||||
class ProxiwashScreen extends React.Component<Props, State> {
|
||||
class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
||||
/**
|
||||
* Shows a warning telling the user notifications are disabled for the app
|
||||
*/
|
||||
static showNotificationsDisabledWarning() {
|
||||
Alert.alert(
|
||||
i18n.t('screens.proxiwash.modal.notificationErrorTitle'),
|
||||
i18n.t('screens.proxiwash.modal.notificationErrorDescription'),
|
||||
);
|
||||
}
|
||||
|
||||
modalRef: null | Modalize;
|
||||
modalRef: null | Modalize;
|
||||
|
||||
fetchedData: {
|
||||
dryers: Array<Machine>,
|
||||
washers: Array<Machine>,
|
||||
fetchedData: {
|
||||
dryers: Array<ProxiwashMachineType>,
|
||||
washers: Array<ProxiwashMachineType>,
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates machine state parameters using current theme and translations
|
||||
*/
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
modalCurrentDisplayItem: null,
|
||||
machinesWatched: AsyncStorageManager.getObject(
|
||||
AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key,
|
||||
),
|
||||
};
|
||||
modalStateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t(
|
||||
'screens.proxiwash.modal.ready',
|
||||
);
|
||||
modalStateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t(
|
||||
'screens.proxiwash.modal.running',
|
||||
);
|
||||
modalStateStrings[
|
||||
ProxiwashConstants.machineStates.RUNNING_NOT_STARTED
|
||||
] = i18n.t('screens.proxiwash.modal.runningNotStarted');
|
||||
modalStateStrings[ProxiwashConstants.machineStates.FINISHED] = i18n.t(
|
||||
'screens.proxiwash.modal.finished',
|
||||
);
|
||||
modalStateStrings[ProxiwashConstants.machineStates.UNAVAILABLE] = i18n.t(
|
||||
'screens.proxiwash.modal.broken',
|
||||
);
|
||||
modalStateStrings[ProxiwashConstants.machineStates.ERROR] = i18n.t(
|
||||
'screens.proxiwash.modal.error',
|
||||
);
|
||||
modalStateStrings[ProxiwashConstants.machineStates.UNKNOWN] = i18n.t(
|
||||
'screens.proxiwash.modal.unknown',
|
||||
);
|
||||
}
|
||||
|
||||
state = {
|
||||
refreshing: false,
|
||||
modalCurrentDisplayItem: null,
|
||||
machinesWatched: AsyncStorageManager.getObject(AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key),
|
||||
/**
|
||||
* Setup notification channel for android and add listeners to detect notifications fired
|
||||
*/
|
||||
componentDidMount() {
|
||||
const {navigation} = this.props;
|
||||
navigation.setOptions({
|
||||
headerRight: (): React.Node => (
|
||||
<MaterialHeaderButtons>
|
||||
<Item
|
||||
title="information"
|
||||
iconName="information"
|
||||
onPress={this.onAboutPress}
|
||||
/>
|
||||
</MaterialHeaderButtons>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback used when pressing the about button.
|
||||
* This will open the ProxiwashAboutScreen.
|
||||
*/
|
||||
onAboutPress = () => {
|
||||
const {navigation} = this.props;
|
||||
navigation.navigate('proxiwash-about');
|
||||
};
|
||||
|
||||
/**
|
||||
* Callback used when the user clicks on enable notifications for a machine
|
||||
*
|
||||
* @param machine The machine to set notifications for
|
||||
*/
|
||||
onSetupNotificationsPress(machine: ProxiwashMachineType) {
|
||||
if (this.modalRef) {
|
||||
this.modalRef.close();
|
||||
}
|
||||
this.setupNotifications(machine);
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback used when receiving modal ref
|
||||
*
|
||||
* @param ref
|
||||
*/
|
||||
onModalRef = (ref: Modalize) => {
|
||||
this.modalRef = ref;
|
||||
};
|
||||
|
||||
/**
|
||||
* Generates the modal content.
|
||||
* This shows information for the given machine.
|
||||
*
|
||||
* @param title The title to use
|
||||
* @param item The item to display information for in the modal
|
||||
* @param isDryer True if the given item is a dryer
|
||||
* @return {*}
|
||||
*/
|
||||
getModalContent(
|
||||
title: string,
|
||||
item: ProxiwashMachineType,
|
||||
isDryer: boolean,
|
||||
): React.Node {
|
||||
const {props, state} = this;
|
||||
let button = {
|
||||
text: i18n.t('screens.proxiwash.modal.ok'),
|
||||
icon: '',
|
||||
onPress: undefined,
|
||||
};
|
||||
let message = modalStateStrings[item.state];
|
||||
const onPress = this.onSetupNotificationsPress.bind(this, item);
|
||||
if (item.state === ProxiwashConstants.machineStates.RUNNING) {
|
||||
let remainingTime = parseInt(item.remainingTime, 10);
|
||||
if (remainingTime < 0) remainingTime = 0;
|
||||
|
||||
/**
|
||||
* Creates machine state parameters using current theme and translations
|
||||
*/
|
||||
constructor(props) {
|
||||
super(props);
|
||||
modalStateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t('screens.proxiwash.modal.ready');
|
||||
modalStateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t('screens.proxiwash.modal.running');
|
||||
modalStateStrings[ProxiwashConstants.machineStates.RUNNING_NOT_STARTED] = i18n.t('screens.proxiwash.modal.runningNotStarted');
|
||||
modalStateStrings[ProxiwashConstants.machineStates.FINISHED] = i18n.t('screens.proxiwash.modal.finished');
|
||||
modalStateStrings[ProxiwashConstants.machineStates.UNAVAILABLE] = i18n.t('screens.proxiwash.modal.broken');
|
||||
modalStateStrings[ProxiwashConstants.machineStates.ERROR] = i18n.t('screens.proxiwash.modal.error');
|
||||
modalStateStrings[ProxiwashConstants.machineStates.UNKNOWN] = i18n.t('screens.proxiwash.modal.unknown');
|
||||
button = {
|
||||
text: isMachineWatched(item, state.machinesWatched)
|
||||
? i18n.t('screens.proxiwash.modal.disableNotifications')
|
||||
: i18n.t('screens.proxiwash.modal.enableNotifications'),
|
||||
icon: '',
|
||||
onPress,
|
||||
};
|
||||
message = i18n.t('screens.proxiwash.modal.running', {
|
||||
start: item.startTime,
|
||||
end: item.endTime,
|
||||
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')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup notification channel for android and add listeners to detect notifications fired
|
||||
*/
|
||||
componentDidMount() {
|
||||
this.props.navigation.setOptions({
|
||||
headerRight: () =>
|
||||
<MaterialHeaderButtons>
|
||||
<Item title="information" iconName="information" onPress={this.onAboutPress}/>
|
||||
</MaterialHeaderButtons>,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback used when pressing the about button.
|
||||
* This will open the ProxiwashAboutScreen.
|
||||
*/
|
||||
onAboutPress = () => this.props.navigation.navigate('proxiwash-about');
|
||||
|
||||
/**
|
||||
* Extracts the key for the given item
|
||||
*
|
||||
* @param item The item to extract the key from
|
||||
* @return {*} The extracted key
|
||||
*/
|
||||
getKeyExtractor = (item: Machine) => item.number;
|
||||
|
||||
/**
|
||||
* Setups notifications for the machine with the given ID.
|
||||
* One notification will be sent at the end of the program.
|
||||
* Another will be send a few minutes before the end, based on the value of reminderNotifTime
|
||||
*
|
||||
* @param machine The machine to watch
|
||||
*/
|
||||
setupNotifications(machine: Machine) {
|
||||
if (!isMachineWatched(machine, this.state.machinesWatched)) {
|
||||
Notifications.setupMachineNotification(machine.number, true, getMachineEndDate(machine))
|
||||
.then(() => {
|
||||
this.saveNotificationToState(machine);
|
||||
})
|
||||
.catch(() => {
|
||||
this.showNotificationsDisabledWarning();
|
||||
});
|
||||
} else {
|
||||
Notifications.setupMachineNotification(machine.number, false, null)
|
||||
.then(() => {
|
||||
this.removeNotificationFromState(machine);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Shows a warning telling the user notifications are disabled for the app
|
||||
*/
|
||||
showNotificationsDisabledWarning() {
|
||||
Alert.alert(
|
||||
i18n.t("screens.proxiwash.modal.notificationErrorTitle"),
|
||||
i18n.t("screens.proxiwash.modal.notificationErrorDescription"),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds the given notifications associated to a machine ID to the watchlist, and saves the array to the preferences
|
||||
*
|
||||
* @param machine
|
||||
*/
|
||||
saveNotificationToState(machine: Machine) {
|
||||
let data = this.state.machinesWatched;
|
||||
data.push(machine);
|
||||
this.saveNewWatchedList(data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the given index from the watchlist array and saves it to preferences
|
||||
*
|
||||
* @param machine
|
||||
*/
|
||||
removeNotificationFromState(machine: Machine) {
|
||||
let data = this.state.machinesWatched;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i].number === machine.number && data[i].endTime === machine.endTime) {
|
||||
data.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.saveNewWatchedList(data);
|
||||
}
|
||||
|
||||
saveNewWatchedList(list: Array<Machine>) {
|
||||
this.setState({machinesWatched: list});
|
||||
AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key, list);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the dataset to be used by the flatlist
|
||||
*
|
||||
* @param fetchedData
|
||||
* @return {*}
|
||||
*/
|
||||
createDataset = (fetchedData: Object) => {
|
||||
let data = fetchedData;
|
||||
if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) {
|
||||
data = JSON.parse(JSON.stringify(fetchedData)); // Deep copy
|
||||
AprilFoolsManager.getNewProxiwashDryerOrderedList(data.dryers);
|
||||
AprilFoolsManager.getNewProxiwashWasherOrderedList(data.washers);
|
||||
}
|
||||
this.fetchedData = data;
|
||||
this.state.machinesWatched =
|
||||
getCleanedMachineWatched(this.state.machinesWatched, [...data.dryers, ...data.washers]);
|
||||
return [
|
||||
{
|
||||
title: i18n.t('screens.proxiwash.dryers'),
|
||||
icon: 'tumble-dryer',
|
||||
data: data.dryers === undefined ? [] : data.dryers,
|
||||
keyExtractor: this.getKeyExtractor
|
||||
},
|
||||
{
|
||||
title: i18n.t('screens.proxiwash.washers'),
|
||||
icon: 'washing-machine',
|
||||
data: data.washers === undefined ? [] : data.washers,
|
||||
keyExtractor: this.getKeyExtractor
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows a modal for the given item
|
||||
*
|
||||
* @param title The title to use
|
||||
* @param item The item to display information for in the modal
|
||||
* @param isDryer True if the given item is a dryer
|
||||
*/
|
||||
showModal = (title: string, item: Object, isDryer: boolean) => {
|
||||
this.setState({
|
||||
modalCurrentDisplayItem: this.getModalContent(title, item, isDryer)
|
||||
});
|
||||
if (this.modalRef) {
|
||||
this.modalRef.open();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Callback used when the user clicks on enable notifications for a machine
|
||||
*
|
||||
* @param machine The machine to set notifications for
|
||||
*/
|
||||
onSetupNotificationsPress(machine: Machine) {
|
||||
if (this.modalRef) {
|
||||
this.modalRef.close();
|
||||
}
|
||||
this.setupNotifications(machine);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates the modal content.
|
||||
* This shows information for the given machine.
|
||||
*
|
||||
* @param title The title to use
|
||||
* @param item The item to display information for in the modal
|
||||
* @param isDryer True if the given item is a dryer
|
||||
* @return {*}
|
||||
*/
|
||||
getModalContent(title: string, item: Machine, isDryer: boolean) {
|
||||
let button = {
|
||||
text: i18n.t("screens.proxiwash.modal.ok"),
|
||||
icon: '',
|
||||
onPress: undefined
|
||||
};
|
||||
let message = modalStateStrings[item.state];
|
||||
const onPress = this.onSetupNotificationsPress.bind(this, item);
|
||||
if (item.state === ProxiwashConstants.machineStates.RUNNING) {
|
||||
let remainingTime = parseInt(item.remainingTime)
|
||||
if (remainingTime < 0)
|
||||
remainingTime = 0;
|
||||
|
||||
button =
|
||||
{
|
||||
text: isMachineWatched(item, this.state.machinesWatched) ?
|
||||
i18n.t("screens.proxiwash.modal.disableNotifications") :
|
||||
i18n.t("screens.proxiwash.modal.enableNotifications"),
|
||||
icon: '',
|
||||
onPress: onPress
|
||||
}
|
||||
;
|
||||
message = i18n.t('screens.proxiwash.modal.running',
|
||||
{
|
||||
start: item.startTime,
|
||||
end: item.endTime,
|
||||
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 style={{
|
||||
flex: 1,
|
||||
padding: 20
|
||||
}}>
|
||||
<Card.Title
|
||||
title={title}
|
||||
left={() => <Avatar.Icon
|
||||
icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
|
||||
color={this.props.theme.colors.text}
|
||||
style={{backgroundColor: 'transparent'}}/>}
|
||||
|
||||
/>
|
||||
<Card.Content>
|
||||
<Text>{message}</Text>
|
||||
</Card.Content>
|
||||
|
||||
{button.onPress !== undefined ?
|
||||
<Card.Actions>
|
||||
<Button
|
||||
icon={button.icon}
|
||||
mode="contained"
|
||||
onPress={button.onPress}
|
||||
style={{marginLeft: 'auto', marginRight: 'auto'}}
|
||||
>
|
||||
{button.text}
|
||||
</Button>
|
||||
</Card.Actions> : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback used when receiving modal ref
|
||||
*
|
||||
* @param ref
|
||||
*/
|
||||
onModalRef = (ref: Object) => {
|
||||
this.modalRef = ref;
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the number of machines available
|
||||
*
|
||||
* @param isDryer True if we are only checking for dryer, false for washers
|
||||
* @return {number} The number of machines available
|
||||
*/
|
||||
getMachineAvailableNumber(isDryer: boolean) {
|
||||
let data;
|
||||
if (isDryer)
|
||||
data = this.fetchedData.dryers;
|
||||
else
|
||||
data = this.fetchedData.washers;
|
||||
let count = 0;
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i].state === ProxiwashConstants.machineStates.AVAILABLE)
|
||||
count += 1;
|
||||
}
|
||||
return count;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the section render item
|
||||
*
|
||||
* @param section The section to render
|
||||
* @return {*}
|
||||
*/
|
||||
getRenderSectionHeader = ({section}: Object) => {
|
||||
const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
|
||||
const nbAvailable = this.getMachineAvailableNumber(isDryer);
|
||||
return (
|
||||
<ProxiwashSectionHeader
|
||||
title={section.title}
|
||||
nbAvailable={nbAvailable}
|
||||
isDryer={isDryer}/>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the list item to be rendered
|
||||
*
|
||||
* @param item The object containing the item's FetchedData
|
||||
* @param section The object describing the current SectionList section
|
||||
* @returns {React.Node}
|
||||
*/
|
||||
getRenderItem = ({item, section}: Object) => {
|
||||
const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
|
||||
return (
|
||||
<ProxiwashListItem
|
||||
item={item}
|
||||
onPress={this.showModal}
|
||||
isWatched={isMachineWatched(item, this.state.machinesWatched)}
|
||||
isDryer={isDryer}
|
||||
height={LIST_ITEM_HEIGHT}
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: 20,
|
||||
}}>
|
||||
<Card.Title
|
||||
title={title}
|
||||
left={(): React.Node => (
|
||||
<Avatar.Icon
|
||||
icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
|
||||
color={props.theme.colors.text}
|
||||
style={{backgroundColor: 'transparent'}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
)}
|
||||
/>
|
||||
<Card.Content>
|
||||
<Text>{message}</Text>
|
||||
</Card.Content>
|
||||
|
||||
render() {
|
||||
const nav = this.props.navigation;
|
||||
return (
|
||||
<View
|
||||
style={{flex: 1}}
|
||||
>
|
||||
<View style={{
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}>
|
||||
<WebSectionList
|
||||
createDataset={this.createDataset}
|
||||
navigation={nav}
|
||||
fetchUrl={DATA_URL}
|
||||
renderItem={this.getRenderItem}
|
||||
renderSectionHeader={this.getRenderSectionHeader}
|
||||
autoRefreshTime={REFRESH_TIME}
|
||||
refreshOnFocus={true}
|
||||
updateData={this.state.machinesWatched.length}/>
|
||||
</View>
|
||||
<MascotPopup
|
||||
prefKey={AsyncStorageManager.PREFERENCES.proxiwashShowBanner.key}
|
||||
title={i18n.t("screens.proxiwash.mascotDialog.title")}
|
||||
message={i18n.t("screens.proxiwash.mascotDialog.message")}
|
||||
icon={"information"}
|
||||
buttons={{
|
||||
action: null,
|
||||
cancel: {
|
||||
message: i18n.t("screens.proxiwash.mascotDialog.ok"),
|
||||
icon: "check",
|
||||
}
|
||||
}}
|
||||
emotion={MASCOT_STYLE.NORMAL}
|
||||
/>
|
||||
<CustomModal onRef={this.onModalRef}>
|
||||
{this.state.modalCurrentDisplayItem}
|
||||
</CustomModal>
|
||||
</View>
|
||||
);
|
||||
{button.onPress !== undefined ? (
|
||||
<Card.Actions>
|
||||
<Button
|
||||
icon={button.icon}
|
||||
mode="contained"
|
||||
onPress={button.onPress}
|
||||
style={{marginLeft: 'auto', marginRight: 'auto'}}>
|
||||
{button.text}
|
||||
</Button>
|
||||
</Card.Actions>
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the section render item
|
||||
*
|
||||
* @param section The section to render
|
||||
* @return {*}
|
||||
*/
|
||||
getRenderSectionHeader = ({
|
||||
section,
|
||||
}: {
|
||||
section: {title: string},
|
||||
}): React.Node => {
|
||||
const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
|
||||
const nbAvailable = this.getMachineAvailableNumber(isDryer);
|
||||
return (
|
||||
<ProxiwashSectionHeader
|
||||
title={section.title}
|
||||
nbAvailable={nbAvailable}
|
||||
isDryer={isDryer}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the list item to be rendered
|
||||
*
|
||||
* @param item The object containing the item's FetchedData
|
||||
* @param section The object describing the current SectionList section
|
||||
* @returns {React.Node}
|
||||
*/
|
||||
getRenderItem = ({
|
||||
item,
|
||||
section,
|
||||
}: {
|
||||
item: ProxiwashMachineType,
|
||||
section: {title: string},
|
||||
}): React.Node => {
|
||||
const {machinesWatched} = this.state;
|
||||
const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
|
||||
return (
|
||||
<ProxiwashListItem
|
||||
item={item}
|
||||
onPress={this.showModal}
|
||||
isWatched={isMachineWatched(item, machinesWatched)}
|
||||
isDryer={isDryer}
|
||||
height={LIST_ITEM_HEIGHT}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* Extracts the key for the given item
|
||||
*
|
||||
* @param item The item to extract the key from
|
||||
* @return {*} The extracted key
|
||||
*/
|
||||
getKeyExtractor = (item: ProxiwashMachineType): string => item.number;
|
||||
|
||||
/**
|
||||
* Setups notifications for the machine with the given ID.
|
||||
* One notification will be sent at the end of the program.
|
||||
* Another will be send a few minutes before the end, based on the value of reminderNotifTime
|
||||
*
|
||||
* @param machine The machine to watch
|
||||
*/
|
||||
setupNotifications(machine: ProxiwashMachineType) {
|
||||
const {machinesWatched} = this.state;
|
||||
if (!isMachineWatched(machine, machinesWatched)) {
|
||||
Notifications.setupMachineNotification(
|
||||
machine.number,
|
||||
true,
|
||||
getMachineEndDate(machine),
|
||||
)
|
||||
.then(() => {
|
||||
this.saveNotificationToState(machine);
|
||||
})
|
||||
.catch(() => {
|
||||
ProxiwashScreen.showNotificationsDisabledWarning();
|
||||
});
|
||||
} else {
|
||||
Notifications.setupMachineNotification(machine.number, false, null).then(
|
||||
() => {
|
||||
this.removeNotificationFromState(machine);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the number of machines available
|
||||
*
|
||||
* @param isDryer True if we are only checking for dryer, false for washers
|
||||
* @return {number} The number of machines available
|
||||
*/
|
||||
getMachineAvailableNumber(isDryer: boolean): number {
|
||||
let data;
|
||||
if (isDryer) data = this.fetchedData.dryers;
|
||||
else data = this.fetchedData.washers;
|
||||
let count = 0;
|
||||
data.forEach((machine: ProxiwashMachineType) => {
|
||||
if (machine.state === ProxiwashConstants.machineStates.AVAILABLE)
|
||||
count += 1;
|
||||
});
|
||||
return count;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the dataset to be used by the FlatList
|
||||
*
|
||||
* @param fetchedData
|
||||
* @return {*}
|
||||
*/
|
||||
createDataset = (fetchedData: {
|
||||
dryers: Array<ProxiwashMachineType>,
|
||||
washers: Array<ProxiwashMachineType>,
|
||||
}): SectionListDataType<ProxiwashMachineType> => {
|
||||
const {state} = this;
|
||||
let data = fetchedData;
|
||||
if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) {
|
||||
data = JSON.parse(JSON.stringify(fetchedData)); // Deep copy
|
||||
AprilFoolsManager.getNewProxiwashDryerOrderedList(data.dryers);
|
||||
AprilFoolsManager.getNewProxiwashWasherOrderedList(data.washers);
|
||||
}
|
||||
this.fetchedData = data;
|
||||
this.state.machinesWatched = getCleanedMachineWatched(
|
||||
state.machinesWatched,
|
||||
[...data.dryers, ...data.washers],
|
||||
);
|
||||
return [
|
||||
{
|
||||
title: i18n.t('screens.proxiwash.dryers'),
|
||||
icon: 'tumble-dryer',
|
||||
data: data.dryers === undefined ? [] : data.dryers,
|
||||
keyExtractor: this.getKeyExtractor,
|
||||
},
|
||||
{
|
||||
title: i18n.t('screens.proxiwash.washers'),
|
||||
icon: 'washing-machine',
|
||||
data: data.washers === undefined ? [] : data.washers,
|
||||
keyExtractor: this.getKeyExtractor,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows a modal for the given item
|
||||
*
|
||||
* @param title The title to use
|
||||
* @param item The item to display information for in the modal
|
||||
* @param isDryer True if the given item is a dryer
|
||||
*/
|
||||
showModal = (title: string, item: ProxiwashMachineType, isDryer: boolean) => {
|
||||
this.setState({
|
||||
modalCurrentDisplayItem: this.getModalContent(title, item, isDryer),
|
||||
});
|
||||
if (this.modalRef) {
|
||||
this.modalRef.open();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds the given notifications associated to a machine ID to the watchlist, and saves the array to the preferences
|
||||
*
|
||||
* @param machine
|
||||
*/
|
||||
saveNotificationToState(machine: ProxiwashMachineType) {
|
||||
const {machinesWatched} = this.state;
|
||||
const data = machinesWatched;
|
||||
data.push(machine);
|
||||
this.saveNewWatchedList(data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the given index from the watchlist array and saves it to preferences
|
||||
*
|
||||
* @param selectedMachine
|
||||
*/
|
||||
removeNotificationFromState(selectedMachine: ProxiwashMachineType) {
|
||||
const {machinesWatched} = this.state;
|
||||
const newList = [...machinesWatched];
|
||||
machinesWatched.forEach((machine: ProxiwashMachineType, index: number) => {
|
||||
if (
|
||||
machine.number === selectedMachine.number &&
|
||||
machine.endTime === selectedMachine.endTime
|
||||
)
|
||||
newList.splice(index, 1);
|
||||
});
|
||||
this.saveNewWatchedList(newList);
|
||||
}
|
||||
|
||||
saveNewWatchedList(list: Array<ProxiwashMachineType>) {
|
||||
this.setState({machinesWatched: list});
|
||||
AsyncStorageManager.set(
|
||||
AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key,
|
||||
list,
|
||||
);
|
||||
}
|
||||
|
||||
render(): React.Node {
|
||||
const {state} = this;
|
||||
const {navigation} = this.props;
|
||||
return (
|
||||
<View style={{flex: 1}}>
|
||||
<View
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}>
|
||||
<WebSectionList
|
||||
createDataset={this.createDataset}
|
||||
navigation={navigation}
|
||||
fetchUrl={DATA_URL}
|
||||
renderItem={this.getRenderItem}
|
||||
renderSectionHeader={this.getRenderSectionHeader}
|
||||
autoRefreshTime={REFRESH_TIME}
|
||||
refreshOnFocus
|
||||
updateData={state.machinesWatched.length}
|
||||
/>
|
||||
</View>
|
||||
<MascotPopup
|
||||
prefKey={AsyncStorageManager.PREFERENCES.proxiwashShowBanner.key}
|
||||
title={i18n.t('screens.proxiwash.mascotDialog.title')}
|
||||
message={i18n.t('screens.proxiwash.mascotDialog.message')}
|
||||
icon="information"
|
||||
buttons={{
|
||||
action: null,
|
||||
cancel: {
|
||||
message: i18n.t('screens.proxiwash.mascotDialog.ok'),
|
||||
icon: 'check',
|
||||
},
|
||||
}}
|
||||
emotion={MASCOT_STYLE.NORMAL}
|
||||
/>
|
||||
<CustomModal onRef={this.onModalRef}>
|
||||
{state.modalCurrentDisplayItem}
|
||||
</CustomModal>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default withTheme(ProxiwashScreen);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// @flow
|
||||
|
||||
import type {Machine} from "../screens/Proxiwash/ProxiwashScreen";
|
||||
import type {ProxiwashMachineType} from '../screens/Proxiwash/ProxiwashScreen';
|
||||
|
||||
/**
|
||||
* Gets the machine end Date object.
|
||||
|
|
@ -11,42 +11,43 @@ import type {Machine} from "../screens/Proxiwash/ProxiwashScreen";
|
|||
* @param machine The machine to get the date from
|
||||
* @returns {Date} The date object representing the end time.
|
||||
*/
|
||||
export function getMachineEndDate(machine: Machine): Date | null {
|
||||
const array = machine.endTime.split(":");
|
||||
let endDate = new Date(Date.now());
|
||||
endDate.setHours(parseInt(array[0]), parseInt(array[1]));
|
||||
export function getMachineEndDate(machine: ProxiwashMachineType): Date | null {
|
||||
const array = machine.endTime.split(':');
|
||||
let endDate = new Date(Date.now());
|
||||
endDate.setHours(parseInt(array[0], 10), parseInt(array[1], 10));
|
||||
|
||||
let limit = new Date(Date.now());
|
||||
if (endDate < limit) {
|
||||
if (limit.getHours() > 12) {
|
||||
limit.setHours(limit.getHours() - 12);
|
||||
if (endDate < limit)
|
||||
endDate.setDate(endDate.getDate() + 1);
|
||||
else
|
||||
endDate = null;
|
||||
} else
|
||||
endDate = null;
|
||||
}
|
||||
const limit = new Date(Date.now());
|
||||
if (endDate < limit) {
|
||||
if (limit.getHours() > 12) {
|
||||
limit.setHours(limit.getHours() - 12);
|
||||
if (endDate < limit) endDate.setDate(endDate.getDate() + 1);
|
||||
else endDate = null;
|
||||
} else endDate = null;
|
||||
}
|
||||
|
||||
return endDate;
|
||||
return endDate;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks whether the machine of the given ID has scheduled notifications
|
||||
*
|
||||
* @param machine The machine to check
|
||||
* @param machineList The machine list
|
||||
* @param machinesWatched The machine list
|
||||
* @returns {boolean}
|
||||
*/
|
||||
export function isMachineWatched(machine: Machine, machineList: Array<Machine>) {
|
||||
let watched = false;
|
||||
for (let i = 0; i < machineList.length; i++) {
|
||||
if (machineList[i].number === machine.number && machineList[i].endTime === machine.endTime) {
|
||||
watched = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return watched;
|
||||
export function isMachineWatched(
|
||||
machine: ProxiwashMachineType,
|
||||
machinesWatched: Array<ProxiwashMachineType>,
|
||||
): boolean {
|
||||
let watched = false;
|
||||
machinesWatched.forEach((watchedMachine: ProxiwashMachineType) => {
|
||||
if (
|
||||
watchedMachine.number === machine.number &&
|
||||
watchedMachine.endTime === machine.endTime
|
||||
)
|
||||
watched = true;
|
||||
});
|
||||
return watched;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -54,14 +55,17 @@ export function isMachineWatched(machine: Machine, machineList: Array<Machine>)
|
|||
*
|
||||
* @param id The machine's ID
|
||||
* @param allMachines The machine list
|
||||
* @returns {null|Machine} The machine or null if not found
|
||||
* @returns {null|ProxiwashMachineType} The machine or null if not found
|
||||
*/
|
||||
export function getMachineOfId(id: string, allMachines: Array<Machine>) {
|
||||
for (let i = 0; i < allMachines.length; i++) {
|
||||
if (allMachines[i].number === id)
|
||||
return allMachines[i];
|
||||
}
|
||||
return null;
|
||||
export function getMachineOfId(
|
||||
id: string,
|
||||
allMachines: Array<ProxiwashMachineType>,
|
||||
): ProxiwashMachineType | null {
|
||||
let machineFound = null;
|
||||
allMachines.forEach((machine: ProxiwashMachineType) => {
|
||||
if (machine.number === id) machineFound = machine;
|
||||
});
|
||||
return machineFound;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -71,17 +75,22 @@ export function getMachineOfId(id: string, allMachines: Array<Machine>) {
|
|||
*
|
||||
* @param machineWatchedList The current machine watch list
|
||||
* @param allMachines The current full machine list
|
||||
* @returns {Array<Machine>}
|
||||
* @returns {Array<ProxiwashMachineType>}
|
||||
*/
|
||||
export function getCleanedMachineWatched(machineWatchedList: Array<Machine>, allMachines: Array<Machine>) {
|
||||
let newList = [];
|
||||
for (let i = 0; i < machineWatchedList.length; i++) {
|
||||
let machine = getMachineOfId(machineWatchedList[i].number, allMachines);
|
||||
if (machine !== null
|
||||
&& machineWatchedList[i].number === machine.number
|
||||
&& machineWatchedList[i].endTime === machine.endTime) {
|
||||
newList.push(machine);
|
||||
}
|
||||
export function getCleanedMachineWatched(
|
||||
machineWatchedList: Array<ProxiwashMachineType>,
|
||||
allMachines: Array<ProxiwashMachineType>,
|
||||
): Array<ProxiwashMachineType> {
|
||||
const newList = [];
|
||||
machineWatchedList.forEach((watchedMachine: ProxiwashMachineType) => {
|
||||
const machine = getMachineOfId(watchedMachine.number, allMachines);
|
||||
if (
|
||||
machine != null &&
|
||||
watchedMachine.number === machine.number &&
|
||||
watchedMachine.endTime === machine.endTime
|
||||
) {
|
||||
newList.push(machine);
|
||||
}
|
||||
return newList;
|
||||
}
|
||||
});
|
||||
return newList;
|
||||
}
|
||||
|
|
|
|||
読み込み中…
新しいイシューから参照