Browse Source

Activate proxiwash notifications and see machine info on alert popup

keplyx 2 years ago
parent
commit
8fa2bd792f

+ 4
- 8
components/FetchedDataSectionList.js View File

@@ -4,7 +4,7 @@ import * as React from 'react';
4 4
 import WebDataManager from "../utils/WebDataManager";
5 5
 import {Container, Content, Tab, TabHeading, Tabs, Text} from "native-base";
6 6
 import CustomHeader from "./CustomHeader";
7
-import {RefreshControl, SectionList, View} from "react-native";
7
+import {RefreshControl, SectionList, View, TouchableHighlight} from "react-native";
8 8
 import CustomMaterialIcon from "./CustomMaterialIcon";
9 9
 
10 10
 type Props = {
@@ -15,16 +15,16 @@ type State = {
15 15
     refreshing: boolean,
16 16
     firstLoading: boolean,
17 17
     fetchedData: Object,
18
-    machinesWatched: Array<Object>
18
+    machinesWatched: Array<Object>,
19 19
 };
20 20
 
21 21
 export default class FetchedDataSectionList extends React.Component<Props, State> {
22 22
 
23 23
     webDataManager: WebDataManager;
24 24
 
25
-    constructor() {
25
+    constructor(fetchUrl: string) {
26 26
         super();
27
-        this.webDataManager = new WebDataManager(this.getFetchUrl());
27
+        this.webDataManager = new WebDataManager(fetchUrl);
28 28
     }
29 29
 
30 30
     state = {
@@ -34,10 +34,6 @@ export default class FetchedDataSectionList extends React.Component<Props, State
34 34
         machinesWatched: [],
35 35
     };
36 36
 
37
-    getFetchUrl() {
38
-        return "";
39
-    }
40
-
41 37
     getHeaderTranslation() {
42 38
         return "Header";
43 39
     }

+ 17
- 0
package-lock.json View File

@@ -5935,6 +5935,14 @@
5935 5935
         }
5936 5936
       }
5937 5937
     },
5938
+    "react-native-animatable": {
5939
+      "version": "1.3.2",
5940
+      "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.2.tgz",
5941
+      "integrity": "sha512-rmah3KQ63ft8DxkzFUwJSuZeq+oSYwldoGF4DTOR5WM2WR5wiWLgBAtrAHlI3Di3by323uOR21s+MlqPcHz2Kw==",
5942
+      "requires": {
5943
+        "prop-types": "^15.5.10"
5944
+      }
5945
+    },
5938 5946
     "react-native-autolink": {
5939 5947
       "version": "1.8.1",
5940 5948
       "resolved": "https://registry.npmjs.org/react-native-autolink/-/react-native-autolink-1.8.1.tgz",
@@ -6034,6 +6042,15 @@
6034 6042
         "prop-types": "^15.6.0"
6035 6043
       }
6036 6044
     },
6045
+    "react-native-modal": {
6046
+      "version": "11.3.0",
6047
+      "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-11.3.0.tgz",
6048
+      "integrity": "sha512-574hg0dF/gKY0jICg+D4j10F4fKQR8/u88DcVx82LU9QkuYokHr5Rn4E+BoaOUNf3BdNi1z9vzItMQEZa3M8rQ==",
6049
+      "requires": {
6050
+        "prop-types": "^15.6.2",
6051
+        "react-native-animatable": "^1.3.1"
6052
+      }
6053
+    },
6037 6054
     "react-native-platform-touchable": {
6038 6055
       "version": "1.1.1",
6039 6056
       "resolved": "https://registry.npmjs.org/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz",

+ 1
- 0
package.json View File

@@ -26,6 +26,7 @@
26 26
     "react-native-hyperlink": "0.0.14",
27 27
     "react-native-image-zoom-viewer": "^2.2.26",
28 28
     "react-native-lightbox": "^0.8.0",
29
+    "react-native-modal": "^11.3.0",
29 30
     "react-native-platform-touchable": "^1.1.1",
30 31
     "react-native-scalable-image": "^0.5.1",
31 32
     "react-native-status-bar-height": "^2.3.1",

+ 4
- 4
screens/HomeScreen.js View File

@@ -26,6 +26,10 @@ function openWebLink(link) {
26 26
  */
27 27
 export default class HomeScreen extends FetchedDataSectionList {
28 28
 
29
+    constructor() {
30
+        super(DATA_URL);
31
+    }
32
+
29 33
     getHeaderTranslation() {
30 34
         return i18n.t("screens.home");
31 35
     }
@@ -51,10 +55,6 @@ export default class HomeScreen extends FetchedDataSectionList {
51 55
         ];
52 56
     }
53 57
 
54
-    getFetchUrl() {
55
-        return DATA_URL;
56
-    }
57
-
58 58
     /**
59 59
      * Converts a dateString using Unix Timestamp to a formatted date
60 60
      * @param dateString {string} The Unix Timestamp representation of a date

+ 2
- 2
screens/Proximo/ProximoMainScreen.js View File

@@ -23,8 +23,8 @@ const typesIcons = {
23 23
  */
24 24
 export default class ProximoMainScreen extends FetchedDataSectionList {
25 25
 
26
-    getFetchUrl() {
27
-        return DATA_URL;
26
+    constructor() {
27
+        super(DATA_URL);
28 28
     }
29 29
 
30 30
     getHeaderTranslation() {

+ 75
- 40
screens/ProxiwashScreen.js View File

@@ -1,13 +1,15 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {AsyncStorage, View} from 'react-native';
5
-import {Body, Card, CardItem, H2, Left, Right, Text} from 'native-base';
4
+import {Alert, AsyncStorage, View} from 'react-native';
5
+import {Body, Card, CardItem, Left, Right, Text} from 'native-base';
6 6
 import ThemeManager from '../utils/ThemeManager';
7 7
 import i18n from "i18n-js";
8 8
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
9 9
 import FetchedDataSectionList from "../components/FetchedDataSectionList";
10 10
 import NotificationsManager from "../utils/NotificationsManager";
11
+import PlatformTouchable from "react-native-platform-touchable";
12
+
11 13
 
12 14
 const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/dataProxiwash.json";
13 15
 const WATCHED_MACHINES_PREFKEY = "proxiwash.watchedMachines";
@@ -23,6 +25,7 @@ const MACHINE_STATES = {
23 25
 };
24 26
 
25 27
 let stateStrings = {};
28
+let modalStateStrings = {};
26 29
 let stateIcons = {};
27 30
 let stateColors = {};
28 31
 
@@ -44,7 +47,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
44 47
      * Creates machine state parameters using current theme and translations
45 48
      */
46 49
     constructor() {
47
-        super();
50
+        super(DATA_URL);
48 51
         let colors = ThemeManager.getInstance().getCurrentThemeVariables();
49 52
         stateColors[MACHINE_STATES.TERMINE] = colors.proxiwashFinishedColor;
50 53
         stateColors[MACHINE_STATES.DISPONIBLE] = colors.proxiwashReadyColor;
@@ -58,6 +61,12 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
58 61
         stateStrings[MACHINE_STATES.HS] = i18n.t('proxiwashScreen.states.broken');
59 62
         stateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.states.error');
60 63
 
64
+        modalStateStrings[MACHINE_STATES.TERMINE] = i18n.t('proxiwashScreen.modal.finished');
65
+        modalStateStrings[MACHINE_STATES.DISPONIBLE] = i18n.t('proxiwashScreen.modal.ready');
66
+        modalStateStrings[MACHINE_STATES.FONCTIONNE] = i18n.t('proxiwashScreen.modal.running');
67
+        modalStateStrings[MACHINE_STATES.HS] = i18n.t('proxiwashScreen.modal.broken');
68
+        modalStateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.modal.error');
69
+
61 70
         stateIcons[MACHINE_STATES.TERMINE] = 'check-circle';
62 71
         stateIcons[MACHINE_STATES.DISPONIBLE] = 'radiobox-blank';
63 72
         stateIcons[MACHINE_STATES.FONCTIONNE] = 'progress-check';
@@ -65,10 +74,6 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
65 74
         stateIcons[MACHINE_STATES.ERREUR] = 'alert';
66 75
     }
67 76
 
68
-    getFetchUrl() {
69
-        return DATA_URL;
70
-    }
71
-
72 77
     getHeaderTranslation() {
73 78
         return i18n.t("screens.proxiwash");
74 79
     }
@@ -199,7 +204,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
199 204
             },
200 205
             {
201 206
                 title: i18n.t('proxiwashScreen.washers'),
202
-                icon:  'washing-machine',
207
+                icon: 'washing-machine',
203 208
                 data: fetchedData.washers === undefined ? [] : fetchedData.washers,
204 209
                 extraData: super.state
205 210
             },
@@ -210,6 +215,35 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
210 215
         return true;
211 216
     }
212 217
 
218
+    showAlert(title : string, item : Object, remainingTime: number) {
219
+        let buttons = [{text: i18n.t("proxiwashScreen.modal.ok")}];
220
+        let message = modalStateStrings[MACHINE_STATES[item.state]];
221
+        if (MACHINE_STATES[item.state] === MACHINE_STATES.FONCTIONNE) {
222
+            buttons = [
223
+                {
224
+                    text: this.isMachineWatched(item.number) ?
225
+                        i18n.t("proxiwashScreen.modal.disableNotifications") :
226
+                        i18n.t("proxiwashScreen.modal.enableNotifications"),
227
+                    onPress: () => this.setupNotifications(item.number, remainingTime)
228
+                },
229
+                {
230
+                    text: i18n.t("proxiwashScreen.modal.cancel")
231
+                }
232
+            ];
233
+            message = i18n.t('proxiwashScreen.modal.running',
234
+                {
235
+                    start: item.startTime,
236
+                    end: item.endTime,
237
+                    remaining: remainingTime
238
+                });
239
+        }
240
+        Alert.alert(
241
+            title,
242
+            message,
243
+            buttons
244
+        );
245
+    }
246
+
213 247
     /**
214 248
      * Get list item to be rendered
215 249
      *
@@ -219,6 +253,12 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
219 253
      * @returns {React.Node}
220 254
      */
221 255
     getRenderItem(item: Object, section: Object, data: Object) {
256
+        let isMachineRunning = MACHINE_STATES[item.state] === MACHINE_STATES.FONCTIONNE;
257
+        let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number;
258
+        let remainingTime = 0;
259
+        if (isMachineRunning)
260
+            remainingTime = ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent);
261
+
222 262
         return (
223 263
             <Card style={{
224 264
                 flex: 0,
@@ -228,7 +268,9 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
228 268
                 <CardItem
229 269
                     style={{
230 270
                         backgroundColor: stateColors[MACHINE_STATES[item.state]],
231
-                        height: '100%'
271
+                        paddingRight: 0,
272
+                        paddingLeft: 0,
273
+                        height: '100%',
232 274
                     }}
233 275
                 >
234 276
                     <View style={{
@@ -238,20 +280,38 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
238 280
                         width: item.donePercent !== '' ? (100 - parseInt(item.donePercent)).toString() + '%' : 0,
239 281
                         backgroundColor: ThemeManager.getInstance().getCurrentThemeVariables().containerBgColor
240 282
                     }}/>
241
-                    <Left>
242
-                        <CustomMaterialIcon icon={section.title === i18n.t('proxiwashScreen.dryers') ? 'tumble-dryer' : 'washing-machine'}
243
-                                            fontSize={30}
283
+                    <PlatformTouchable
284
+                        onPress={() => this.showAlert(machineName, item, remainingTime)}
285
+                        style={{
286
+                            height: 64,
287
+                            position: 'absolute',
288
+                            right: 0,
289
+                            width: '100%'
290
+                        }}
291
+                    >
292
+                        <View/>
293
+                    </PlatformTouchable>
294
+                    <Left style={{marginLeft: 10}}>
295
+                        <CustomMaterialIcon
296
+                            icon={section.title === i18n.t('proxiwashScreen.dryers') ? 'tumble-dryer' : 'washing-machine'}
297
+                            fontSize={30}
244 298
                         />
245 299
                         <Body>
246 300
                             <Text>
247
-                                {section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')} n°{item.number}
301
+                                {machineName + ' '}
302
+                                {this.isMachineWatched(item.number) ?
303
+                                    <CustomMaterialIcon
304
+                                        icon='bell-ring'
305
+                                        color={ThemeManager.getInstance().getCurrentThemeVariables().brandPrimary}
306
+                                        fontSize={20}
307
+                                    /> : ''}
248 308
                             </Text>
249 309
                             <Text note>
250
-                                {item.startTime !== '' ? item.startTime + '/' + item.endTime : ''}
310
+                                {isMachineRunning ? item.startTime + '/' + item.endTime : ''}
251 311
                             </Text>
252 312
                         </Body>
253 313
                     </Left>
254
-                    <Right style={{}}>
314
+                    <Right style={{marginRight: 10}}>
255 315
                         <Text style={MACHINE_STATES[item.state] === MACHINE_STATES.TERMINE ?
256 316
                             {fontWeight: 'bold'} : {}}
257 317
                         >
@@ -260,33 +320,8 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
260 320
                         <CustomMaterialIcon icon={stateIcons[MACHINE_STATES[item.state]]}
261 321
                                             fontSize={25}
262 322
                         />
263
-
264
-                        {/*{item.startTime !== '' ?*/}
265
-                        {/*    <Button*/}
266
-                        {/*        style={this.isMachineWatched(item.number) ?*/}
267
-                        {/*            {backgroundColor: '#ba7c1f'} : {}}*/}
268
-                        {/*        onPress={() => {*/}
269
-                        {/*            this.setupNotifications(item.number, ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent))*/}
270
-                        {/*        }}*/}
271
-                        {/*    >*/}
272
-                        {/*        <Text>*/}
273
-                        {/*            {ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent) + ' ' + i18n.t('proxiwashScreen.min')}*/}
274
-                        {/*        </Text>*/}
275
-                        {/*        <Icon*/}
276
-                        {/*            name={this.isMachineWatched(item.number) ? 'bell-ring' : 'bell'}*/}
277
-                        {/*            type={'MaterialCommunityIcons'}*/}
278
-                        {/*            style={{fontSize: 30, width: 30}}*/}
279
-                        {/*        />*/}
280
-                        {/*    </Button>*/}
281
-                        {/*    : (*/}
282
-                        {/*        )*/}
283
-                        {/*}*/}
284 323
                     </Right>
285 324
                 </CardItem>
286 325
             </Card>);
287 326
     }
288
-
289
-    // getRenderSectionHeader(title: String) {
290
-    //     return <H2 style={{textAlign: 'center', paddingVertical: 10}}>{title}</H2>;
291
-    // }
292 327
 }

+ 11
- 0
translations/en.json View File

@@ -61,6 +61,17 @@
61 61
     "listUpdateFail": "Error while updating machines state",
62 62
     "error": "Could not update machines state. Pull down to retry.",
63 63
     "loading": "Loading...",
64
+    "modal": {
65
+      "enableNotifications": "Notify me",
66
+      "disableNotifications": "Stop notifications",
67
+      "ok": "OK",
68
+      "cancel": "Cancel",
69
+      "finished": "This machine is finished. If you started it, you can get back your laundry.",
70
+      "ready": "This machine is empty and ready to use. {Put price here}",
71
+      "running": "This machine has been started at %{start} and will end at %{end}.\nRemaining time: %{remaining} min",
72
+      "broken": "This machine is broken and cannot be used. Thank you for your comprehension.",
73
+      "error": "There has been an error and we are unable to get information from this machine. Sorry for the inconvenience."
74
+    },
64 75
     "states": {
65 76
       "finished": "FINISHED",
66 77
       "ready": "READY",

+ 11
- 0
translations/fr.json View File

@@ -61,6 +61,17 @@
61 61
     "listUpdateFail": "Erreur lors de la mise à jour del'état des machines",
62 62
     "error": "Impossible de mettre a jour l'état des machines. Tirez vers le bas pour reessayer.",
63 63
     "loading": "Chargement...",
64
+    "modal": {
65
+      "enableNotifications": "Me Notifier",
66
+      "disableNotifications": "Désactiver les  notifications",
67
+      "ok": "OK",
68
+      "cancel": "Annuler",
69
+      "finished": "Cette machine est terminée. Si vous l'avez l'avez démarée, vous pouvez récupérer votre linge.",
70
+      "ready": "Cette machine est vide et prête à être utilisée. {Afficher prix ici}",
71
+      "running": "Cette machine a démarré à %{start} et terminera à %{end}.\nTemps restant : %{remaining} min",
72
+      "broken": "Cette machine est hors service. Merci pour votre compréhension.",
73
+      "error": "Il y a eu une erreur et il est impossible de récupérer les informations de cette machine. Veuillez nous excuser pour le gène occasionnée."
74
+    },
64 75
     "states": {
65 76
       "finished": "TERMINE",
66 77
       "ready": "DISPONIBLE",

Loading…
Cancel
Save