Activate proxiwash notifications and see machine info on alert popup

components/FetchedDataSectionList.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import WebDataManager from "../utils/WebDataManager";
 import {Container, Content, Tab, TabHeading, Tabs, Text} from "native-base";
 import CustomHeader from "./CustomHeader";
-import {RefreshControl, SectionList, View} from "react-native";
+import {RefreshControl, SectionList, View, TouchableHighlight} from "react-native";
 import CustomMaterialIcon from "./CustomMaterialIcon";
 
 type Props = {
@@ -15,16 +15,16 @@ type State = {
     refreshing: boolean,
     firstLoading: boolean,
     fetchedData: Object,
-    machinesWatched: Array<Object>
+    machinesWatched: Array<Object>,
 };
 
 export default class FetchedDataSectionList extends React.Component<Props, State> {
 
     webDataManager: WebDataManager;
 
-    constructor() {
+    constructor(fetchUrl: string) {
         super();
-        this.webDataManager = new WebDataManager(this.getFetchUrl());
+        this.webDataManager = new WebDataManager(fetchUrl);
     }
 
     state = {
@@ -34,10 +34,6 @@ export default class FetchedDataSectionList extends React.Component<Props, State
         machinesWatched: [],
     };
 
-    getFetchUrl() {
-        return "";
-    }
-
     getHeaderTranslation() {
         return "Header";
     }

package-lock.json

@@ -5935,6 +5935,14 @@
         }
       }
     },
+    "react-native-animatable": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/react-native-animatable/-/react-native-animatable-1.3.2.tgz",
+      "integrity": "sha512-rmah3KQ63ft8DxkzFUwJSuZeq+oSYwldoGF4DTOR5WM2WR5wiWLgBAtrAHlI3Di3by323uOR21s+MlqPcHz2Kw==",
+      "requires": {
+        "prop-types": "^15.5.10"
+      }
+    },
     "react-native-autolink": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/react-native-autolink/-/react-native-autolink-1.8.1.tgz",
@@ -6034,6 +6042,15 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-native-modal": {
+      "version": "11.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-modal/-/react-native-modal-11.3.0.tgz",
+      "integrity": "sha512-574hg0dF/gKY0jICg+D4j10F4fKQR8/u88DcVx82LU9QkuYokHr5Rn4E+BoaOUNf3BdNi1z9vzItMQEZa3M8rQ==",
+      "requires": {
+        "prop-types": "^15.6.2",
+        "react-native-animatable": "^1.3.1"
+      }
+    },
     "react-native-platform-touchable": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/react-native-platform-touchable/-/react-native-platform-touchable-1.1.1.tgz",

package.json

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

screens/HomeScreen.js

@@ -26,6 +26,10 @@ function openWebLink(link) {
  */
 export default class HomeScreen extends FetchedDataSectionList {
 
+    constructor() {
+        super(DATA_URL);
+    }
+
     getHeaderTranslation() {
         return i18n.t("screens.home");
     }
@@ -51,10 +55,6 @@ export default class HomeScreen extends FetchedDataSectionList {
         ];
     }
 
-    getFetchUrl() {
-        return DATA_URL;
-    }
-
     /**
      * Converts a dateString using Unix Timestamp to a formatted date
      * @param dateString {string} The Unix Timestamp representation of a date

screens/Proximo/ProximoMainScreen.js

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

screens/ProxiwashScreen.js

@@ -1,13 +1,15 @@
 // @flow
 
 import * as React from 'react';
-import {AsyncStorage, View} from 'react-native';
+import {Alert, AsyncStorage, View} from 'react-native';
-import {Body, Card, CardItem, H2, Left, Right, Text} from 'native-base';
+import {Body, Card, CardItem, Left, Right, Text} from 'native-base';
 import ThemeManager from '../utils/ThemeManager';
 import i18n from "i18n-js";
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
 import FetchedDataSectionList from "../components/FetchedDataSectionList";
 import NotificationsManager from "../utils/NotificationsManager";
+import PlatformTouchable from "react-native-platform-touchable";
+
 
 const DATA_URL = "https://etud.insa-toulouse.fr/~vergnet/appli-amicale/dataProxiwash.json";
 const WATCHED_MACHINES_PREFKEY = "proxiwash.watchedMachines";
@@ -23,6 +25,7 @@ const MACHINE_STATES = {
 };
 
 let stateStrings = {};
+let modalStateStrings = {};
 let stateIcons = {};
 let stateColors = {};
 
@@ -44,7 +47,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
      * Creates machine state parameters using current theme and translations
      */
     constructor() {
-        super();
+        super(DATA_URL);
         let colors = ThemeManager.getInstance().getCurrentThemeVariables();
         stateColors[MACHINE_STATES.TERMINE] = colors.proxiwashFinishedColor;
         stateColors[MACHINE_STATES.DISPONIBLE] = colors.proxiwashReadyColor;
@@ -58,6 +61,12 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
         stateStrings[MACHINE_STATES.HS] = i18n.t('proxiwashScreen.states.broken');
         stateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.states.error');
 
+        modalStateStrings[MACHINE_STATES.TERMINE] = i18n.t('proxiwashScreen.modal.finished');
+        modalStateStrings[MACHINE_STATES.DISPONIBLE] = i18n.t('proxiwashScreen.modal.ready');
+        modalStateStrings[MACHINE_STATES.FONCTIONNE] = i18n.t('proxiwashScreen.modal.running');
+        modalStateStrings[MACHINE_STATES.HS] = i18n.t('proxiwashScreen.modal.broken');
+        modalStateStrings[MACHINE_STATES.ERREUR] = i18n.t('proxiwashScreen.modal.error');
+
         stateIcons[MACHINE_STATES.TERMINE] = 'check-circle';
         stateIcons[MACHINE_STATES.DISPONIBLE] = 'radiobox-blank';
         stateIcons[MACHINE_STATES.FONCTIONNE] = 'progress-check';
@@ -65,10 +74,6 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
         stateIcons[MACHINE_STATES.ERREUR] = 'alert';
     }
 
-    getFetchUrl() {
-        return DATA_URL;
-    }
-
     getHeaderTranslation() {
         return i18n.t("screens.proxiwash");
     }
@@ -199,7 +204,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
             },
             {
                 title: i18n.t('proxiwashScreen.washers'),
-                icon:  'washing-machine',
+                icon: 'washing-machine',
                 data: fetchedData.washers === undefined ? [] : fetchedData.washers,
                 extraData: super.state
             },
@@ -210,6 +215,35 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
         return true;
     }
 
+    showAlert(title : string, item : Object, remainingTime: number) {
+        let buttons = [{text: i18n.t("proxiwashScreen.modal.ok")}];
+        let message = modalStateStrings[MACHINE_STATES[item.state]];
+        if (MACHINE_STATES[item.state] === MACHINE_STATES.FONCTIONNE) {
+            buttons = [
+                {
+                    text: this.isMachineWatched(item.number) ?
+                        i18n.t("proxiwashScreen.modal.disableNotifications") :
+                        i18n.t("proxiwashScreen.modal.enableNotifications"),
+                    onPress: () => this.setupNotifications(item.number, remainingTime)
+                },
+                {
+                    text: i18n.t("proxiwashScreen.modal.cancel")
+                }
+            ];
+            message = i18n.t('proxiwashScreen.modal.running',
+                {
+                    start: item.startTime,
+                    end: item.endTime,
+                    remaining: remainingTime
+                });
+        }
+        Alert.alert(
+            title,
+            message,
+            buttons
+        );
+    }
+
     /**
      * Get list item to be rendered
      *
@@ -219,6 +253,12 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
      * @returns {React.Node}
      */
     getRenderItem(item: Object, section: Object, data: Object) {
+        let isMachineRunning = MACHINE_STATES[item.state] === MACHINE_STATES.FONCTIONNE;
+        let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number;
+        let remainingTime = 0;
+        if (isMachineRunning)
+            remainingTime = ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent);
+
         return (
             <Card style={{
                 flex: 0,
@@ -228,7 +268,9 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
                 <CardItem
                     style={{
                         backgroundColor: stateColors[MACHINE_STATES[item.state]],
-                        height: '100%'
+                        paddingRight: 0,
+                        paddingLeft: 0,
+                        height: '100%',
                     }}
                 >
                     <View style={{
@@ -238,20 +280,38 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
                         width: item.donePercent !== '' ? (100 - parseInt(item.donePercent)).toString() + '%' : 0,
                         backgroundColor: ThemeManager.getInstance().getCurrentThemeVariables().containerBgColor
                     }}/>
-                    <Left>
+                    <PlatformTouchable
-                        <CustomMaterialIcon icon={section.title === i18n.t('proxiwashScreen.dryers') ? 'tumble-dryer' : 'washing-machine'}
+                        onPress={() => this.showAlert(machineName, item, remainingTime)}
-                                            fontSize={30}
+                        style={{
+                            height: 64,
+                            position: 'absolute',
+                            right: 0,
+                            width: '100%'
+                        }}
+                    >
+                        <View/>
+                    </PlatformTouchable>
+                    <Left style={{marginLeft: 10}}>
+                        <CustomMaterialIcon
+                            icon={section.title === i18n.t('proxiwashScreen.dryers') ? 'tumble-dryer' : 'washing-machine'}
+                            fontSize={30}
                         />
                         <Body>
                             <Text>
-                                {section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')} n°{item.number}
+                                {machineName + ' '}
+                                {this.isMachineWatched(item.number) ?
+                                    <CustomMaterialIcon
+                                        icon='bell-ring'
+                                        color={ThemeManager.getInstance().getCurrentThemeVariables().brandPrimary}
+                                        fontSize={20}
+                                    /> : ''}
                             </Text>
                             <Text note>
-                                {item.startTime !== '' ? item.startTime + '/' + item.endTime : ''}
+                                {isMachineRunning ? item.startTime + '/' + item.endTime : ''}
                             </Text>
                         </Body>
                     </Left>
-                    <Right style={{}}>
+                    <Right style={{marginRight: 10}}>
                         <Text style={MACHINE_STATES[item.state] === MACHINE_STATES.TERMINE ?
                             {fontWeight: 'bold'} : {}}
                         >
@@ -260,33 +320,8 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
                         <CustomMaterialIcon icon={stateIcons[MACHINE_STATES[item.state]]}
                                             fontSize={25}
                         />
-
-                        {/*{item.startTime !== '' ?*/}
-                        {/*    <Button*/}
-                        {/*        style={this.isMachineWatched(item.number) ?*/}
-                        {/*            {backgroundColor: '#ba7c1f'} : {}}*/}
-                        {/*        onPress={() => {*/}
-                        {/*            this.setupNotifications(item.number, ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent))*/}
-                        {/*        }}*/}
-                        {/*    >*/}
-                        {/*        <Text>*/}
-                        {/*            {ProxiwashScreen.getRemainingTime(item.startTime, item.endTime, item.donePercent) + ' ' + i18n.t('proxiwashScreen.min')}*/}
-                        {/*        </Text>*/}
-                        {/*        <Icon*/}
-                        {/*            name={this.isMachineWatched(item.number) ? 'bell-ring' : 'bell'}*/}
-                        {/*            type={'MaterialCommunityIcons'}*/}
-                        {/*            style={{fontSize: 30, width: 30}}*/}
-                        {/*        />*/}
-                        {/*    </Button>*/}
-                        {/*    : (*/}
-                        {/*        )*/}
-                        {/*}*/}
                     </Right>
                 </CardItem>
             </Card>);
     }
-
-    // getRenderSectionHeader(title: String) {
-    //     return <H2 style={{textAlign: 'center', paddingVertical: 10}}>{title}</H2>;
-    // }
 }

translations/en.json

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

translations/fr.json

@@ -61,6 +61,17 @@
     "listUpdateFail": "Erreur lors de la mise à jour del'état des machines",
     "error": "Impossible de mettre a jour l'état des machines. Tirez vers le bas pour reessayer.",
     "loading": "Chargement...",
+    "modal": {
+      "enableNotifications": "Me Notifier",
+      "disableNotifications": "Désactiver les  notifications",
+      "ok": "OK",
+      "cancel": "Annuler",
+      "finished": "Cette machine est terminée. Si vous l'avez l'avez démarée, vous pouvez récupérer votre linge.",
+      "ready": "Cette machine est vide et prête à être utilisée. {Afficher prix ici}",
+      "running": "Cette machine a démarré à %{start} et terminera à %{end}.\nTemps restant : %{remaining} min",
+      "broken": "Cette machine est hors service. Merci pour votre compréhension.",
+      "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."
+    },
     "states": {
       "finished": "TERMINE",
       "ready": "DISPONIBLE",