lpitault/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Improve Proxiwash components to match linter

Browse source
This commit is contained in:
Arnaud Vergnet 2020-08-04 18:53:10 +02:00
parent 547af66977
commit 1cc0802c12
5 changed files with 882 additions and 740 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

380
src/components/Lists/Proxiwash/ProxiwashListItem.js
View file

@ -1,194 +1,236 @@
import * as React from 'react'; // @flow
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";
type Props = { import * as React from 'react';
item: Machine, import {
theme: CustomTheme, Avatar,
onPress: Function, Caption,
isWatched: boolean, 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, isDryer: boolean,
height: number, ) => void,
} isWatched: boolean,
isDryer: boolean,
height: number,
};
const AnimatedIcon = Animatable.createAnimatableComponent(Avatar.Icon); 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 * 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: {[key: string]: string};
stateStrings: Object;
title: string; title: string;
constructor(props) { constructor(props: PropsType) {
super(props); super(props);
this.stateColors = {}; this.stateColors = {};
this.stateStrings = {}; this.stateStrings = {};
this.updateStateStrings(); this.updateStateStrings();
let displayNumber = props.item.number; let displayNumber = props.item.number;
if (AprilFoolsManager.getInstance().isAprilFoolsEnabled()) if (AprilFoolsManager.getInstance().isAprilFoolsEnabled())
displayNumber = AprilFoolsManager.getProxiwashMachineDisplayNumber(parseInt(props.item.number)); displayNumber = AprilFoolsManager.getProxiwashMachineDisplayNumber(
parseInt(props.item.number, 10),
);
this.title = props.isDryer this.title = props.isDryer
? i18n.t('screens.proxiwash.dryer') ? i18n.t('screens.proxiwash.dryer')
: i18n.t('screens.proxiwash.washer'); : i18n.t('screens.proxiwash.washer');
this.title += ' n°' + displayNumber; this.title += ` n°${displayNumber}`;
} }
shouldComponentUpdate(nextProps: Props): boolean { shouldComponentUpdate(nextProps: PropsType): boolean {
const props = this.props; const {props} = this;
return (nextProps.theme.dark !== props.theme.dark) return (
|| (nextProps.item.state !== props.item.state) nextProps.theme.dark !== props.theme.dark ||
|| (nextProps.item.donePercent !== props.item.donePercent) nextProps.item.state !== props.item.state ||
|| (nextProps.isWatched !== props.isWatched); nextProps.item.donePercent !== props.item.donePercent ||
} nextProps.isWatched !== props.isWatched
);
}
updateStateStrings() { onListItemPress = () => {
this.stateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t('screens.proxiwash.states.ready'); const {props} = this;
this.stateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t('screens.proxiwash.states.running'); props.onPress(this.title, props.item, props.isDryer);
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');
}
updateStateColors() { updateStateStrings() {
const colors = this.props.theme.colors; this.stateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t(
this.stateColors[ProxiwashConstants.machineStates.AVAILABLE] = colors.proxiwashReadyColor; 'screens.proxiwash.states.ready',
this.stateColors[ProxiwashConstants.machineStates.RUNNING] = colors.proxiwashRunningColor; );
this.stateColors[ProxiwashConstants.machineStates.RUNNING_NOT_STARTED] = colors.proxiwashRunningNotStartedColor; this.stateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t(
this.stateColors[ProxiwashConstants.machineStates.FINISHED] = colors.proxiwashFinishedColor; 'screens.proxiwash.states.running',
this.stateColors[ProxiwashConstants.machineStates.UNAVAILABLE] = colors.proxiwashBrokenColor; );
this.stateColors[ProxiwashConstants.machineStates.ERROR] = colors.proxiwashErrorColor; this.stateStrings[
this.stateColors[ProxiwashConstants.machineStates.UNKNOWN] = colors.proxiwashUnknownColor; 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() { render(): React.Node {
const props = this.props; const {props} = this;
const colors = props.theme.colors; const {colors} = props.theme;
const machineState = props.item.state; const machineState = props.item.state;
const isRunning = machineState === ProxiwashConstants.machineStates.RUNNING; const isRunning = machineState === ProxiwashConstants.machineStates.RUNNING;
const isReady = machineState === ProxiwashConstants.machineStates.AVAILABLE; const isReady = machineState === ProxiwashConstants.machineStates.AVAILABLE;
const description = isRunning ? props.item.startTime + '/' + props.item.endTime : ''; const description = isRunning
const stateIcon = ProxiwashConstants.stateIcons[machineState]; ? `${props.item.startTime}/${props.item.endTime}`
const stateString = this.stateStrings[machineState]; : '';
const progress = isRunning const stateIcon = ProxiwashConstants.stateIcons[machineState];
? props.item.donePercent !== '' const stateString = this.stateStrings[machineState];
? parseFloat(props.item.donePercent) / 100 let progress;
: 0 if (isRunning && props.item.donePercent !== '')
: 1; progress = parseFloat(props.item.donePercent) / 100;
else if (isRunning) progress = 0;
else progress = 1;
const icon = props.isWatched const icon = props.isWatched ? (
? <AnimatedIcon <AnimatedIcon
icon={'bell-ring'} icon="bell-ring"
animation={"rubberBand"} animation="rubberBand"
useNativeDriver useNativeDriver
size={50} size={50}
color={colors.primary} color={colors.primary}
style={styles.icon} style={styles.icon}
/> />
: <AnimatedIcon ) : (
icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'} <AnimatedIcon
animation={isRunning ? "pulse" : undefined} icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
iterationCount={"infinite"} animation={isRunning ? 'pulse' : undefined}
easing={"linear"} iterationCount="infinite"
duration={1000} easing="linear"
useNativeDriver duration={1000}
size={40} useNativeDriver
color={colors.text} size={40}
style={styles.icon} color={colors.text}
/>; style={styles.icon}
this.updateStateColors(); />
return ( );
<Surface this.updateStateColors();
style={{ return (
...styles.container, <Surface
height: props.height, style={{
borderRadius: 4, ...styles.container,
}} height: props.height,
> borderRadius: 4,
{ }}>
!isReady {!isReady ? (
? <ProgressBar <ProgressBar
style={{ style={{
...styles.progressBar, ...styles.progressBar,
height: props.height height: props.height,
}} }}
progress={progress} progress={progress}
color={this.stateColors[machineState]} color={this.stateColors[machineState]}
/> />
: null ) : null}
} <List.Item
<List.Item title={this.title}
title={this.title} description={description}
description={description} style={{
style={{ height: props.height,
height: props.height, justifyContent: 'center',
justifyContent: 'center', }}
}} onPress={this.onListItemPress}
onPress={this.onListItemPress} left={(): React.Node => icon}
left={() => icon} right={(): React.Node => (
right={() => ( <View style={{flexDirection: 'row'}}>
<View style={{flexDirection: 'row',}}> <View style={{justifyContent: 'center'}}>
<View style={{justifyContent: 'center',}}> <Text
<Text style={ style={
machineState === ProxiwashConstants.machineStates.FINISHED ? machineState === ProxiwashConstants.machineStates.FINISHED
{fontWeight: 'bold',} : {} ? {fontWeight: 'bold'}
} : {}
> }>
{stateString} {stateString}
</Text> </Text>
{ {machineState === ProxiwashConstants.machineStates.RUNNING ? (
machineState === ProxiwashConstants.machineStates.RUNNING <Caption>{props.item.remainingTime} min</Caption>
? <Caption>{props.item.remainingTime} min</Caption> ) : null}
: null </View>
} <View style={{justifyContent: 'center'}}>
<Avatar.Icon
</View> icon={stateIcon}
<View style={{justifyContent: 'center',}}> color={colors.text}
<Avatar.Icon size={30}
icon={stateIcon} style={styles.icon}
color={colors.text}
size={30}
style={styles.icon}
/>
</View>
</View>)}
/> />
</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); export default withTheme(ProxiwashListItem);

122
src/components/Lists/Proxiwash/ProxiwashSectionHeader.js
View file

@ -1,72 +1,72 @@
// @flow
import * as React from 'react'; import * as React from 'react';
import {Avatar, Text, withTheme} from 'react-native-paper'; import {Avatar, Text, withTheme} from 'react-native-paper';
import {StyleSheet, View} from "react-native"; import {StyleSheet, View} from 'react-native';
import i18n from "i18n-js"; import i18n from 'i18n-js';
import type {CustomTheme} from '../../../managers/ThemeManager';
type Props = { type PropsType = {
title: string, theme: CustomTheme,
isDryer: boolean, title: string,
nbAvailable: number, 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 * 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) { render(): React.Node {
super(props); const {props} = this;
} const subtitle = `${props.nbAvailable} ${
props.nbAvailable <= 1
shouldComponentUpdate(nextProps: Props) { ? i18n.t('screens.proxiwash.numAvailable')
return (nextProps.theme.dark !== this.props.theme.dark) : i18n.t('screens.proxiwash.numAvailablePlural')
|| (nextProps.nbAvailable !== this.props.nbAvailable) }`;
} const iconColor =
props.nbAvailable > 0
render() { ? props.theme.colors.success
const props = this.props; : props.theme.colors.primary;
const subtitle = props.nbAvailable + ' ' + ( return (
(props.nbAvailable <= 1) <View style={styles.container}>
? i18n.t('screens.proxiwash.numAvailable') <Avatar.Icon
: i18n.t('screens.proxiwash.numAvailablePlural')); icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
const iconColor = props.nbAvailable > 0 color={iconColor}
? this.props.theme.colors.success style={styles.icon}
: this.props.theme.colors.primary; />
return ( <View style={{justifyContent: 'center'}}>
<View style={styles.container}> <Text style={styles.text}>{props.title}</Text>
<Avatar.Icon <Text style={{color: props.theme.colors.subtitle}}>{subtitle}</Text>
icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'} </View>
color={iconColor} </View>
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>
);
}
} }
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); export default withTheme(ProxiwashListItem);

178
src/screens/Proxiwash/ProxiwashAboutScreen.js
View file

@ -2,85 +2,117 @@
import * as React from 'react'; import * as React from 'react';
import {Image, View} from 'react-native'; 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 {Card, List, Paragraph, Text, Title} from 'react-native-paper';
import CustomTabBar from "../../components/Tabbar/CustomTabBar"; import CustomTabBar from '../../components/Tabbar/CustomTabBar';
import CollapsibleScrollView from "../../components/Collapsible/CollapsibleScrollView"; 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. * 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() { <Card style={{margin: 5}}>
return ( <Card.Title
<CollapsibleScrollView title={i18n.t('screens.proxiwash.washer')}
style={{padding: 5}} left={({
hasTab={true} size,
> color,
<View style={{ }: {
width: '100%', size: number,
height: 100, color: string,
marginTop: 20, }): React.Node => (
marginBottom: 20, <List.Icon size={size} color={color} icon="washing-machine" />
justifyContent: 'center', )}
alignItems: 'center' />
}}> <Card.Content>
<Image <Title>{i18n.t('screens.proxiwash.procedure')}</Title>
source={{uri: LOGO}} <Paragraph>{i18n.t('screens.proxiwash.washerProcedure')}</Paragraph>
style={{height: '100%', width: '100%', resizeMode: "contain"}}/> <Title>{i18n.t('screens.proxiwash.tips')}</Title>
</View> <Paragraph>{i18n.t('screens.proxiwash.washerTips')}</Paragraph>
<Text>{i18n.t('screens.proxiwash.description')}</Text> </Card.Content>
<Card style={{margin: 5}}> </Card>
<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 style={{margin: 5}}>
<Card.Title <Card.Title
title={i18n.t('screens.proxiwash.washer')} title={i18n.t('screens.proxiwash.tariffs')}
left={props => <List.Icon {...props} icon={'washing-machine'}/>} left={({
/> size,
<Card.Content> color,
<Title>{i18n.t('screens.proxiwash.procedure')}</Title> }: {
<Paragraph>{i18n.t('screens.proxiwash.washerProcedure')}</Paragraph> size: number,
<Title>{i18n.t('screens.proxiwash.tips')}</Title> color: string,
<Paragraph>{i18n.t('screens.proxiwash.washerTips')}</Paragraph> }): React.Node => (
</Card.Content> <List.Icon size={size} color={color} icon="circle-multiple" />
</Card> )}
/>
<Card style={{margin: 5}}> <Card.Content>
<Card.Title <Paragraph>{i18n.t('screens.proxiwash.washersTariff')}</Paragraph>
title={i18n.t('screens.proxiwash.tariffs')} <Paragraph>{i18n.t('screens.proxiwash.dryersTariff')}</Paragraph>
left={props => <List.Icon {...props} icon={'circle-multiple'}/>} </Card.Content>
/> </Card>
<Card.Content> <Card
<Paragraph>{i18n.t('screens.proxiwash.washersTariff')}</Paragraph> style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
<Paragraph>{i18n.t('screens.proxiwash.dryersTariff')}</Paragraph> <Card.Title
</Card.Content> title={i18n.t('screens.proxiwash.paymentMethods')}
</Card> left={({
<Card style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}> size,
<Card.Title color,
title={i18n.t('screens.proxiwash.paymentMethods')} }: {
left={props => <List.Icon {...props} icon={'cash'}/>} size: number,
/> color: string,
<Card.Content> }): React.Node => (
<Paragraph>{i18n.t('screens.proxiwash.paymentMethodsDescription')}</Paragraph> <List.Icon size={size} color={color} icon="cash" />
</Card.Content> )}
</Card> />
</CollapsibleScrollView> <Card.Content>
); <Paragraph>
} {i18n.t('screens.proxiwash.paymentMethodsDescription')}
</Paragraph>
</Card.Content>
</Card>
</CollapsibleScrollView>
);
}
} }

841
src/screens/Proxiwash/ProxiwashScreen.js
View file

@ -2,421 +2,480 @@
import * as React from 'react'; import * as React from 'react';
import {Alert, View} from 'react-native'; import {Alert, View} from 'react-native';
import i18n from "i18n-js"; import i18n from 'i18n-js';
import WebSectionList from "../../components/Screens/WebSectionList";
import * as Notifications from "../../utils/Notifications";
import AsyncStorageManager from "../../managers/AsyncStorageManager";
import {Avatar, Button, Card, Text, withTheme} from 'react-native-paper'; import {Avatar, Button, Card, Text, withTheme} from 'react-native-paper';
import ProxiwashListItem from "../../components/Lists/Proxiwash/ProxiwashListItem"; import {StackNavigationProp} from '@react-navigation/stack';
import ProxiwashConstants from "../../constants/ProxiwashConstants"; import {Modalize} from 'react-native-modalize';
import CustomModal from "../../components/Overrides/CustomModal"; import WebSectionList from '../../components/Screens/WebSectionList';
import AprilFoolsManager from "../../managers/AprilFoolsManager"; import * as Notifications from '../../utils/Notifications';
import MaterialHeaderButtons, {Item} from "../../components/Overrides/CustomHeaderButton"; import AsyncStorageManager from '../../managers/AsyncStorageManager';
import ProxiwashSectionHeader from "../../components/Lists/Proxiwash/ProxiwashSectionHeader"; import ProxiwashListItem from '../../components/Lists/Proxiwash/ProxiwashListItem';
import type {CustomTheme} from "../../managers/ThemeManager"; import ProxiwashConstants from '../../constants/ProxiwashConstants';
import {StackNavigationProp} from "@react-navigation/stack"; import CustomModal from '../../components/Overrides/CustomModal';
import {getCleanedMachineWatched, getMachineEndDate, isMachineWatched} from "../../utils/Proxiwash"; import AprilFoolsManager from '../../managers/AprilFoolsManager';
import {Modalize} from "react-native-modalize"; import MaterialHeaderButtons, {
import {MASCOT_STYLE} from "../../components/Mascot/Mascot"; Item,
import MascotPopup from "../../components/Mascot/MascotPopup"; } 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 REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
const LIST_ITEM_HEIGHT = 64; const LIST_ITEM_HEIGHT = 64;
export type Machine = { export type ProxiwashMachineType = {
number: string, number: string,
state: string, state: string,
startTime: string, startTime: string,
endTime: string, endTime: string,
donePercent: string, donePercent: string,
remainingTime: string, remainingTime: string,
program: string, program: string,
}
type Props = {
navigation: StackNavigationProp,
theme: CustomTheme,
}
type State = {
refreshing: boolean,
modalCurrentDisplayItem: React.Node,
machinesWatched: Array<Machine>,
}; };
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 * Class defining the app's proxiwash screen. This screen shows information about washing machines and
* dryers, taken from a scrapper reading proxiwash website * 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: { fetchedData: {
dryers: Array<Machine>, dryers: Array<ProxiwashMachineType>,
washers: Array<Machine>, 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, * Setup notification channel for android and add listeners to detect notifications fired
modalCurrentDisplayItem: null, */
machinesWatched: AsyncStorageManager.getObject(AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key), 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;
/** button = {
* Creates machine state parameters using current theme and translations text: isMachineWatched(item, state.machinesWatched)
*/ ? i18n.t('screens.proxiwash.modal.disableNotifications')
constructor(props) { : i18n.t('screens.proxiwash.modal.enableNotifications'),
super(props); icon: '',
modalStateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t('screens.proxiwash.modal.ready'); onPress,
modalStateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t('screens.proxiwash.modal.running'); };
modalStateStrings[ProxiwashConstants.machineStates.RUNNING_NOT_STARTED] = i18n.t('screens.proxiwash.modal.runningNotStarted'); message = i18n.t('screens.proxiwash.modal.running', {
modalStateStrings[ProxiwashConstants.machineStates.FINISHED] = i18n.t('screens.proxiwash.modal.finished'); start: item.startTime,
modalStateStrings[ProxiwashConstants.machineStates.UNAVAILABLE] = i18n.t('screens.proxiwash.modal.broken'); end: item.endTime,
modalStateStrings[ProxiwashConstants.machineStates.ERROR] = i18n.t('screens.proxiwash.modal.error'); remaining: remainingTime,
modalStateStrings[ProxiwashConstants.machineStates.UNKNOWN] = i18n.t('screens.proxiwash.modal.unknown'); 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
* Setup notification channel for android and add listeners to detect notifications fired style={{
*/ flex: 1,
componentDidMount() { padding: 20,
this.props.navigation.setOptions({ }}>
headerRight: () => <Card.Title
<MaterialHeaderButtons> title={title}
<Item title="information" iconName="information" onPress={this.onAboutPress}/> left={(): React.Node => (
</MaterialHeaderButtons>, <Avatar.Icon
}); icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
} color={props.theme.colors.text}
style={{backgroundColor: 'transparent'}}
/**
* 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}
/> />
); )}
}; />
<Card.Content>
<Text>{message}</Text>
</Card.Content>
render() { {button.onPress !== undefined ? (
const nav = this.props.navigation; <Card.Actions>
return ( <Button
<View icon={button.icon}
style={{flex: 1}} mode="contained"
> onPress={button.onPress}
<View style={{ style={{marginLeft: 'auto', marginRight: 'auto'}}>
position: "absolute", {button.text}
width: "100%", </Button>
height: "100%", </Card.Actions>
}}> ) : null}
<WebSectionList </View>
createDataset={this.createDataset} );
navigation={nav} }
fetchUrl={DATA_URL}
renderItem={this.getRenderItem} /**
renderSectionHeader={this.getRenderSectionHeader} * Gets the section render item
autoRefreshTime={REFRESH_TIME} *
refreshOnFocus={true} * @param section The section to render
updateData={this.state.machinesWatched.length}/> * @return {*}
</View> */
<MascotPopup getRenderSectionHeader = ({
prefKey={AsyncStorageManager.PREFERENCES.proxiwashShowBanner.key} section,
title={i18n.t("screens.proxiwash.mascotDialog.title")} }: {
message={i18n.t("screens.proxiwash.mascotDialog.message")} section: {title: string},
icon={"information"} }): React.Node => {
buttons={{ const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
action: null, const nbAvailable = this.getMachineAvailableNumber(isDryer);
cancel: { return (
message: i18n.t("screens.proxiwash.mascotDialog.ok"), <ProxiwashSectionHeader
icon: "check", title={section.title}
} nbAvailable={nbAvailable}
}} isDryer={isDryer}
emotion={MASCOT_STYLE.NORMAL} />
/> );
<CustomModal onRef={this.onModalRef}> };
{this.state.modalCurrentDisplayItem}
</CustomModal> /**
</View> * 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); export default withTheme(ProxiwashScreen);

101
src/utils/Proxiwash.js
View file

@ -1,6 +1,6 @@
// @flow // @flow
import type {Machine} from "../screens/Proxiwash/ProxiwashScreen"; import type {ProxiwashMachineType} from '../screens/Proxiwash/ProxiwashScreen';
/** /**
* Gets the machine end Date object. * 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 * @param machine The machine to get the date from
* @returns {Date} The date object representing the end time. * @returns {Date} The date object representing the end time.
*/ */
export function getMachineEndDate(machine: Machine): Date | null { export function getMachineEndDate(machine: ProxiwashMachineType): Date | null {
const array = machine.endTime.split(":"); const array = machine.endTime.split(':');
let endDate = new Date(Date.now()); let endDate = new Date(Date.now());
endDate.setHours(parseInt(array[0]), parseInt(array[1])); endDate.setHours(parseInt(array[0], 10), parseInt(array[1], 10));
let limit = new Date(Date.now()); const limit = new Date(Date.now());
if (endDate < limit) { if (endDate < limit) {
if (limit.getHours() > 12) { if (limit.getHours() > 12) {
limit.setHours(limit.getHours() - 12); limit.setHours(limit.getHours() - 12);
if (endDate < limit) if (endDate < limit) endDate.setDate(endDate.getDate() + 1);
endDate.setDate(endDate.getDate() + 1); else endDate = null;
else } else endDate = null;
endDate = null; }
} else
endDate = null;
}
return endDate; return endDate;
} }
/** /**
* Checks whether the machine of the given ID has scheduled notifications * Checks whether the machine of the given ID has scheduled notifications
* *
* @param machine The machine to check * @param machine The machine to check
* @param machineList The machine list * @param machinesWatched The machine list
* @returns {boolean} * @returns {boolean}
*/ */
export function isMachineWatched(machine: Machine, machineList: Array<Machine>) { export function isMachineWatched(
let watched = false; machine: ProxiwashMachineType,
for (let i = 0; i < machineList.length; i++) { machinesWatched: Array<ProxiwashMachineType>,
if (machineList[i].number === machine.number && machineList[i].endTime === machine.endTime) { ): boolean {
watched = true; let watched = false;
break; machinesWatched.forEach((watchedMachine: ProxiwashMachineType) => {
} if (
} watchedMachine.number === machine.number &&
return watched; 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 id The machine's ID
* @param allMachines The machine list * @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>) { export function getMachineOfId(
for (let i = 0; i < allMachines.length; i++) { id: string,
if (allMachines[i].number === id) allMachines: Array<ProxiwashMachineType>,
return allMachines[i]; ): ProxiwashMachineType | null {
} let machineFound = null;
return 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 machineWatchedList The current machine watch list
* @param allMachines The current full machine list * @param allMachines The current full machine list
* @returns {Array<Machine>} * @returns {Array<ProxiwashMachineType>}
*/ */
export function getCleanedMachineWatched(machineWatchedList: Array<Machine>, allMachines: Array<Machine>) { export function getCleanedMachineWatched(
let newList = []; machineWatchedList: Array<ProxiwashMachineType>,
for (let i = 0; i < machineWatchedList.length; i++) { allMachines: Array<ProxiwashMachineType>,
let machine = getMachineOfId(machineWatchedList[i].number, allMachines); ): Array<ProxiwashMachineType> {
if (machine !== null const newList = [];
&& machineWatchedList[i].number === machine.number machineWatchedList.forEach((watchedMachine: ProxiwashMachineType) => {
&& machineWatchedList[i].endTime === machine.endTime) { const machine = getMachineOfId(watchedMachine.number, allMachines);
newList.push(machine); if (
} machine != null &&
watchedMachine.number === machine.number &&
watchedMachine.endTime === machine.endTime
) {
newList.push(machine);
} }
return newList; });
} return newList;
}