|
@@ -17,8 +17,6 @@
|
17
|
17
|
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
18
|
18
|
*/
|
19
|
19
|
|
20
|
|
-// @flow
|
21
|
|
-
|
22
|
20
|
import * as React from 'react';
|
23
|
21
|
import {Alert, View} from 'react-native';
|
24
|
22
|
import i18n from 'i18n-js';
|
|
@@ -29,14 +27,15 @@ import WebSectionList from '../../components/Screens/WebSectionList';
|
29
|
27
|
import * as Notifications from '../../utils/Notifications';
|
30
|
28
|
import AsyncStorageManager from '../../managers/AsyncStorageManager';
|
31
|
29
|
import ProxiwashListItem from '../../components/Lists/Proxiwash/ProxiwashListItem';
|
32
|
|
-import ProxiwashConstants from '../../constants/ProxiwashConstants';
|
|
30
|
+import ProxiwashConstants, {
|
|
31
|
+ MachineStates,
|
|
32
|
+} from '../../constants/ProxiwashConstants';
|
33
|
33
|
import CustomModal from '../../components/Overrides/CustomModal';
|
34
|
34
|
import AprilFoolsManager from '../../managers/AprilFoolsManager';
|
35
|
35
|
import MaterialHeaderButtons, {
|
36
|
36
|
Item,
|
37
|
37
|
} from '../../components/Overrides/CustomHeaderButton';
|
38
|
38
|
import ProxiwashSectionHeader from '../../components/Lists/Proxiwash/ProxiwashSectionHeader';
|
39
|
|
-import type {CustomThemeType} from '../../managers/ThemeManager';
|
40
|
39
|
import {
|
41
|
40
|
getCleanedMachineWatched,
|
42
|
41
|
getMachineEndDate,
|
|
@@ -47,31 +46,41 @@ import MascotPopup from '../../components/Mascot/MascotPopup';
|
47
|
46
|
import type {SectionListDataType} from '../../components/Screens/WebSectionList';
|
48
|
47
|
import type {LaundromatType} from './ProxiwashAboutScreen';
|
49
|
48
|
|
50
|
|
-const modalStateStrings = {};
|
|
49
|
+const modalStateStrings: {[key in MachineStates]: string} = {
|
|
50
|
+ [MachineStates.AVAILABLE]: i18n.t('screens.proxiwash.modal.ready'),
|
|
51
|
+ [MachineStates.RUNNING]: i18n.t('screens.proxiwash.modal.running'),
|
|
52
|
+ [MachineStates.RUNNING_NOT_STARTED]: i18n.t(
|
|
53
|
+ 'screens.proxiwash.modal.runningNotStarted',
|
|
54
|
+ ),
|
|
55
|
+ [MachineStates.FINISHED]: i18n.t('screens.proxiwash.modal.finished'),
|
|
56
|
+ [MachineStates.UNAVAILABLE]: i18n.t('screens.proxiwash.modal.broken'),
|
|
57
|
+ [MachineStates.ERROR]: i18n.t('screens.proxiwash.modal.error'),
|
|
58
|
+ [MachineStates.UNKNOWN]: i18n.t('screens.proxiwash.modal.unknown'),
|
|
59
|
+};
|
51
|
60
|
|
52
|
61
|
const REFRESH_TIME = 1000 * 10; // Refresh every 10 seconds
|
53
|
62
|
const LIST_ITEM_HEIGHT = 64;
|
54
|
63
|
|
55
|
64
|
export type ProxiwashMachineType = {
|
56
|
|
- number: string,
|
57
|
|
- state: string,
|
58
|
|
- maxWeight: number,
|
59
|
|
- startTime: string,
|
60
|
|
- endTime: string,
|
61
|
|
- donePercent: string,
|
62
|
|
- remainingTime: string,
|
63
|
|
- program: string,
|
|
65
|
+ number: string;
|
|
66
|
+ state: MachineStates;
|
|
67
|
+ maxWeight: number;
|
|
68
|
+ startTime: string;
|
|
69
|
+ endTime: string;
|
|
70
|
+ donePercent: string;
|
|
71
|
+ remainingTime: string;
|
|
72
|
+ program: string;
|
64
|
73
|
};
|
65
|
74
|
|
66
|
75
|
type PropsType = {
|
67
|
|
- navigation: StackNavigationProp,
|
68
|
|
- theme: CustomThemeType,
|
|
76
|
+ navigation: StackNavigationProp<any>;
|
|
77
|
+ theme: ReactNativePaper.Theme;
|
69
|
78
|
};
|
70
|
79
|
|
71
|
80
|
type StateType = {
|
72
|
|
- modalCurrentDisplayItem: React.Node,
|
73
|
|
- machinesWatched: Array<ProxiwashMachineType>,
|
74
|
|
- selectedWash: string,
|
|
81
|
+ modalCurrentDisplayItem: React.ReactNode;
|
|
82
|
+ machinesWatched: Array<ProxiwashMachineType>;
|
|
83
|
+ selectedWash: string;
|
75
|
84
|
};
|
76
|
85
|
|
77
|
86
|
/**
|
|
@@ -92,15 +101,17 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
92
|
101
|
modalRef: null | Modalize;
|
93
|
102
|
|
94
|
103
|
fetchedData: {
|
95
|
|
- dryers: Array<ProxiwashMachineType>,
|
96
|
|
- washers: Array<ProxiwashMachineType>,
|
|
104
|
+ dryers: Array<ProxiwashMachineType>;
|
|
105
|
+ washers: Array<ProxiwashMachineType>;
|
97
|
106
|
};
|
98
|
107
|
|
99
|
108
|
/**
|
100
|
109
|
* Creates machine state parameters using current theme and translations
|
101
|
110
|
*/
|
102
|
|
- constructor() {
|
103
|
|
- super();
|
|
111
|
+ constructor(props: PropsType) {
|
|
112
|
+ super(props);
|
|
113
|
+ this.modalRef = null;
|
|
114
|
+ this.fetchedData = {dryers: [], washers: []};
|
104
|
115
|
this.state = {
|
105
|
116
|
modalCurrentDisplayItem: null,
|
106
|
117
|
machinesWatched: AsyncStorageManager.getObject(
|
|
@@ -110,27 +121,6 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
110
|
121
|
AsyncStorageManager.PREFERENCES.selectedWash.key,
|
111
|
122
|
),
|
112
|
123
|
};
|
113
|
|
- modalStateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t(
|
114
|
|
- 'screens.proxiwash.modal.ready',
|
115
|
|
- );
|
116
|
|
- modalStateStrings[ProxiwashConstants.machineStates.RUNNING] = i18n.t(
|
117
|
|
- 'screens.proxiwash.modal.running',
|
118
|
|
- );
|
119
|
|
- modalStateStrings[
|
120
|
|
- ProxiwashConstants.machineStates.RUNNING_NOT_STARTED
|
121
|
|
- ] = i18n.t('screens.proxiwash.modal.runningNotStarted');
|
122
|
|
- modalStateStrings[ProxiwashConstants.machineStates.FINISHED] = i18n.t(
|
123
|
|
- 'screens.proxiwash.modal.finished',
|
124
|
|
- );
|
125
|
|
- modalStateStrings[ProxiwashConstants.machineStates.UNAVAILABLE] = i18n.t(
|
126
|
|
- 'screens.proxiwash.modal.broken',
|
127
|
|
- );
|
128
|
|
- modalStateStrings[ProxiwashConstants.machineStates.ERROR] = i18n.t(
|
129
|
|
- 'screens.proxiwash.modal.error',
|
130
|
|
- );
|
131
|
|
- modalStateStrings[ProxiwashConstants.machineStates.UNKNOWN] = i18n.t(
|
132
|
|
- 'screens.proxiwash.modal.unknown',
|
133
|
|
- );
|
134
|
124
|
}
|
135
|
125
|
|
136
|
126
|
/**
|
|
@@ -139,12 +129,12 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
139
|
129
|
componentDidMount() {
|
140
|
130
|
const {navigation} = this.props;
|
141
|
131
|
navigation.setOptions({
|
142
|
|
- headerRight: (): React.Node => (
|
|
132
|
+ headerRight: () => (
|
143
|
133
|
<MaterialHeaderButtons>
|
144
|
134
|
<Item
|
145
|
135
|
title="switch"
|
146
|
136
|
iconName="swap-horizontal"
|
147
|
|
- onPress={():void => navigation.navigate('settings')}
|
|
137
|
+ onPress={(): void => navigation.navigate('settings')}
|
148
|
138
|
/>
|
149
|
139
|
<Item
|
150
|
140
|
title="information"
|
|
@@ -164,10 +154,10 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
164
|
154
|
);
|
165
|
155
|
if (selected !== state.selectedWash) {
|
166
|
156
|
this.setState({
|
167
|
|
- selectedWash: selected
|
|
157
|
+ selectedWash: selected,
|
168
|
158
|
});
|
169
|
159
|
}
|
170
|
|
- }
|
|
160
|
+ };
|
171
|
161
|
|
172
|
162
|
/**
|
173
|
163
|
* Callback used when pressing the about button.
|
|
@@ -208,29 +198,27 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
208
|
198
|
* @param isDryer True if the given item is a dryer
|
209
|
199
|
* @return {*}
|
210
|
200
|
*/
|
211
|
|
- getModalContent(
|
212
|
|
- title: string,
|
213
|
|
- item: ProxiwashMachineType,
|
214
|
|
- isDryer: boolean,
|
215
|
|
- ): React.Node {
|
|
201
|
+ getModalContent(title: string, item: ProxiwashMachineType, isDryer: boolean) {
|
216
|
202
|
const {props, state} = this;
|
217
|
|
- let button = {
|
|
203
|
+ let button: {text: string; icon: string; onPress: () => void} = {
|
218
|
204
|
text: i18n.t('screens.proxiwash.modal.ok'),
|
219
|
205
|
icon: '',
|
220
|
|
- onPress: undefined,
|
|
206
|
+ onPress: () => undefined,
|
221
|
207
|
};
|
222
|
208
|
let message = modalStateStrings[item.state];
|
223
|
|
- const onPress = this.onSetupNotificationsPress.bind(this, item);
|
224
|
|
- if (item.state === ProxiwashConstants.machineStates.RUNNING) {
|
|
209
|
+ const onPress = () => this.onSetupNotificationsPress(item);
|
|
210
|
+ if (item.state === MachineStates.RUNNING) {
|
225
|
211
|
let remainingTime = parseInt(item.remainingTime, 10);
|
226
|
|
- if (remainingTime < 0) remainingTime = 0;
|
|
212
|
+ if (remainingTime < 0) {
|
|
213
|
+ remainingTime = 0;
|
|
214
|
+ }
|
227
|
215
|
|
228
|
216
|
button = {
|
229
|
217
|
text: isMachineWatched(item, state.machinesWatched)
|
230
|
218
|
? i18n.t('screens.proxiwash.modal.disableNotifications')
|
231
|
219
|
: i18n.t('screens.proxiwash.modal.enableNotifications'),
|
232
|
220
|
icon: '',
|
233
|
|
- onPress,
|
|
221
|
+ onPress: onPress,
|
234
|
222
|
};
|
235
|
223
|
message = i18n.t('screens.proxiwash.modal.running', {
|
236
|
224
|
start: item.startTime,
|
|
@@ -247,7 +235,7 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
247
|
235
|
}}>
|
248
|
236
|
<Card.Title
|
249
|
237
|
title={title}
|
250
|
|
- left={(): React.Node => (
|
|
238
|
+ left={() => (
|
251
|
239
|
<Avatar.Icon
|
252
|
240
|
icon={isDryer ? 'tumble-dryer' : 'washing-machine'}
|
253
|
241
|
color={props.theme.colors.text}
|
|
@@ -259,7 +247,7 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
259
|
247
|
<Text>{message}</Text>
|
260
|
248
|
</Card.Content>
|
261
|
249
|
|
262
|
|
- {button.onPress !== undefined ? (
|
|
250
|
+ {button.onPress ? (
|
263
|
251
|
<Card.Actions>
|
264
|
252
|
<Button
|
265
|
253
|
icon={button.icon}
|
|
@@ -280,11 +268,7 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
280
|
268
|
* @param section The section to render
|
281
|
269
|
* @return {*}
|
282
|
270
|
*/
|
283
|
|
- getRenderSectionHeader = ({
|
284
|
|
- section,
|
285
|
|
- }: {
|
286
|
|
- section: {title: string},
|
287
|
|
- }): React.Node => {
|
|
271
|
+ getRenderSectionHeader = ({section}: {section: {title: string}}) => {
|
288
|
272
|
const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
|
289
|
273
|
const nbAvailable = this.getMachineAvailableNumber(isDryer);
|
290
|
274
|
return (
|
|
@@ -307,9 +291,9 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
307
|
291
|
item,
|
308
|
292
|
section,
|
309
|
293
|
}: {
|
310
|
|
- item: ProxiwashMachineType,
|
311
|
|
- section: {title: string},
|
312
|
|
- }): React.Node => {
|
|
294
|
+ item: ProxiwashMachineType;
|
|
295
|
+ section: {title: string};
|
|
296
|
+ }) => {
|
313
|
297
|
const {machinesWatched} = this.state;
|
314
|
298
|
const isDryer = section.title === i18n.t('screens.proxiwash.dryers');
|
315
|
299
|
return (
|
|
@@ -369,12 +353,16 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
369
|
353
|
*/
|
370
|
354
|
getMachineAvailableNumber(isDryer: boolean): number {
|
371
|
355
|
let data;
|
372
|
|
- if (isDryer) data = this.fetchedData.dryers;
|
373
|
|
- else data = this.fetchedData.washers;
|
|
356
|
+ if (isDryer) {
|
|
357
|
+ data = this.fetchedData.dryers;
|
|
358
|
+ } else {
|
|
359
|
+ data = this.fetchedData.washers;
|
|
360
|
+ }
|
374
|
361
|
let count = 0;
|
375
|
362
|
data.forEach((machine: ProxiwashMachineType) => {
|
376
|
|
- if (machine.state === ProxiwashConstants.machineStates.AVAILABLE)
|
|
363
|
+ if (machine.state === MachineStates.AVAILABLE) {
|
377
|
364
|
count += 1;
|
|
365
|
+ }
|
378
|
366
|
});
|
379
|
367
|
return count;
|
380
|
368
|
}
|
|
@@ -386,8 +374,8 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
386
|
374
|
* @return {*}
|
387
|
375
|
*/
|
388
|
376
|
createDataset = (fetchedData: {
|
389
|
|
- dryers: Array<ProxiwashMachineType>,
|
390
|
|
- washers: Array<ProxiwashMachineType>,
|
|
377
|
+ dryers: Array<ProxiwashMachineType>;
|
|
378
|
+ washers: Array<ProxiwashMachineType>;
|
391
|
379
|
}): SectionListDataType<ProxiwashMachineType> => {
|
392
|
380
|
const {state} = this;
|
393
|
381
|
let data = fetchedData;
|
|
@@ -466,8 +454,9 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
466
|
454
|
if (
|
467
|
455
|
machine.number === selectedMachine.number &&
|
468
|
456
|
machine.endTime === selectedMachine.endTime
|
469
|
|
- )
|
|
457
|
+ ) {
|
470
|
458
|
newList.splice(index, 1);
|
|
459
|
+ }
|
471
|
460
|
});
|
472
|
461
|
this.saveNewWatchedList(newList);
|
473
|
462
|
}
|
|
@@ -480,7 +469,7 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
|
480
|
469
|
);
|
481
|
470
|
}
|
482
|
471
|
|
483
|
|
- render(): React.Node {
|
|
472
|
+ render() {
|
484
|
473
|
const {state} = this;
|
485
|
474
|
const {navigation} = this.props;
|
486
|
475
|
let data: LaundromatType;
|