Added proxiwash info screen + fixed crash when machine running

components/FetchedDataSectionList.js

@@ -235,6 +235,10 @@ export default class FetchedDataSectionList extends React.Component<Props, State
         return false;
     }
 
+    getRightButton() {
+        return <View/>
+    }
+
     /**
      * Get the section list render using the generated dataset
      *
@@ -312,7 +316,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
         const nav = this.props.navigation;
         const dataset = this.createDataset(this.state.fetchedData);
         return (
-            <BaseContainer navigation={nav} headerTitle={this.getHeaderTranslation()}>
+            <BaseContainer navigation={nav} headerTitle={this.getHeaderTranslation()} headerRightButton={this.getRightButton()}>
                 {this.hasTabs() ?
                     <Tabs>
                         {this.getTabbedView(dataset)}

native-base-theme/variables/platformDark.js

@@ -88,7 +88,7 @@ export default {
     },
 
     // Card
-    cardDefaultBg: "#363636",
+    cardDefaultBg: "#2A2A2A",
     cardBorderColor: "#1a1a1a",
     cardBorderRadius: 2,
     cardItemPadding: platform === "ios" ? 10 : 12,

navigation/AppNavigator.js

@@ -6,6 +6,7 @@ import SettingsScreen from '../screens/SettingsScreen';
 import AboutScreen from '../screens/About/AboutScreen';
 import ProximoListScreen from '../screens/Proximo/ProximoListScreen';
 import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
+import ProxiwashAboutScreen from '../screens/ProxiwashAboutScreen';
 import SelfMenuScreen from '../screens/SelfMenuScreen';
 import {fromRight} from "react-navigation-transitions";
 
@@ -21,6 +22,7 @@ export default createAppContainer(
             AboutScreen: {screen: AboutScreen},
             AboutDependenciesScreen: {screen: AboutDependenciesScreen},
             SelfMenuScreen: {screen: SelfMenuScreen},
+            ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
         },
         {
             initialRouteName: "Main",

screens/ProxiwashAboutScreen.js

@@ -0,0 +1,132 @@
+// @flow
+
+import * as React from 'react';
+import {Image, Linking, View} from 'react-native';
+import {Body, Card, CardItem, Container, Content, H1, Left, Tab, TabHeading, Tabs, Text} from 'native-base';
+import CustomHeader from "../components/CustomHeader";
+import i18n from "i18n-js";
+import CustomMaterialIcon from "../components/CustomMaterialIcon";
+import ThemeManager from "../utils/ThemeManager";
+
+type Props = {
+    navigation: Object,
+};
+
+/**
+ * Opens a link in the device's browser
+ * @param link The link to open
+ */
+function openWebLink(link) {
+    Linking.openURL(link).catch((err) => console.error('Error opening link', err));
+}
+
+/**
+ * Class defining an about screen. This screen shows the user information about the app and it's author.
+ */
+export default class ProxiwashAboutScreen extends React.Component<Props> {
+
+    render() {
+        const nav = this.props.navigation;
+        return (
+            <Container>
+                <CustomHeader navigation={nav} title={i18n.t('screens.proxiwash')} hasBackButton={true}/>
+                <Tabs>
+                    <Tab
+                        heading={
+                            <TabHeading>
+                                <CustomMaterialIcon
+                                    icon={'information'}
+                                    color={'#fff'}
+                                    fontSize={20}
+                                />
+                                <Text>Information</Text>
+                            </TabHeading>
+                        }
+                        key={1}
+                        style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
+                        <View style={{
+                            width: '100%',
+                            height: 100,
+                            marginTop: 20,
+                            marginBottom: 20,
+                            justifyContent: 'center',
+                            alignItems: 'center'
+                        }}>
+                            <Image
+                                source={require('../assets/proxiwash-logo.png')}
+                                style={{flex: 1, resizeMode: "contain"}}
+                                resizeMode="contain"/>
+                        </View>
+                        <Content padder>
+                            <Text>Ta laverie directement sur le campus, au pied du R3.</Text>
+                            <Card>
+                                <CardItem>
+                                    <Left>
+                                        <Body>
+                                            <H1>Seche linge</H1>
+                                        </Body>
+                                    </Left>
+                                </CardItem>
+                                <CardItem>
+                                    <Text>Coucou</Text>
+                                </CardItem>
+                            </Card>
+                            <Card>
+                                <CardItem>
+                                    <Left>
+                                        <Body>
+                                            <H1>Machine a laver</H1>
+                                        </Body>
+                                    </Left>
+                                </CardItem>
+                                <CardItem>
+                                    <Text>Coucou</Text>
+                                </CardItem>
+                            </Card>
+                        </Content>
+                    </Tab>
+                    <Tab
+                        heading={
+                            <TabHeading>
+                                <CustomMaterialIcon
+                                    icon={'cash'}
+                                    color={'#fff'}
+                                    fontSize={20}
+                                />
+                                <Text>Payment</Text>
+                            </TabHeading>
+                        }
+                        key={2}
+                        style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
+                        <Content padder>
+                            <Card>
+                                <CardItem>
+                                    <Left>
+                                        <Body>
+                                            <H1>Tarifs</H1>
+                                        </Body>
+                                    </Left>
+                                </CardItem>
+                                <CardItem>
+                                    <Text>Coucou</Text>
+                                </CardItem>
+                            </Card>
+                            <Card>
+                                <CardItem>
+                                    <Left>
+                                        <Body>
+                                            <H1>Moyens de Paiement</H1>
+                                        </Body>
+                                    </Left>
+                                </CardItem>
+                                <CardItem>
+                                    <Text>Coucou</Text>
+                                </CardItem>
+                            </Card>
+                        </Content>
+                    </Tab>
+                </Tabs>
+            </Container>
+        );
+    }
+}

screens/ProxiwashScreen.js

@@ -11,17 +11,18 @@ import NotificationsManager from "../utils/NotificationsManager";
 import PlatformTouchable from "react-native-platform-touchable";
 import AsyncStorageManager from "../utils/AsyncStorageManager";
 import * as Expo from "expo";
+import Touchable from "react-native-platform-touchable";
 
 const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~vergnet/appli-amicale/washinsa/washinsa.json";
 
 let reminderNotifTime = 5;
 
 const MACHINE_STATES = {
-    TERMINE: "0",
+    "TERMINE": "0",
-    DISPONIBLE: "1",
+    "DISPONIBLE": "1",
-    FONCTIONNE: "2",
+    "EN COURS": "2",
-    HS: "3",
+    "HS": "3",
-    ERREUR: "4"
+    "ERREUR": "4"
 };
 
 let stateStrings = {};
@@ -46,25 +47,25 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
         let colors = ThemeManager.getCurrentThemeVariables();
         stateColors[MACHINE_STATES.TERMINE] = colors.proxiwashFinishedColor;
         stateColors[MACHINE_STATES.DISPONIBLE] = colors.proxiwashReadyColor;
-        stateColors[MACHINE_STATES.FONCTIONNE] = colors.proxiwashRunningColor;
+        stateColors[MACHINE_STATES["EN COURS"]] = colors.proxiwashRunningColor;
         stateColors[MACHINE_STATES.HS] = colors.proxiwashBrokenColor;
         stateColors[MACHINE_STATES.ERREUR] = colors.proxiwashErrorColor;
 
         stateStrings[MACHINE_STATES.TERMINE] = i18n.t('proxiwashScreen.states.finished');
         stateStrings[MACHINE_STATES.DISPONIBLE] = i18n.t('proxiwashScreen.states.ready');
-        stateStrings[MACHINE_STATES.FONCTIONNE] = i18n.t('proxiwashScreen.states.running');
+        stateStrings[MACHINE_STATES["EN COURS"]] = i18n.t('proxiwashScreen.states.running');
         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["EN COURS"]] = 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';
+        stateIcons[MACHINE_STATES["EN COURS"]] = 'progress-check';
         stateIcons[MACHINE_STATES.HS] = 'alert-octagram-outline';
         stateIcons[MACHINE_STATES.ERREUR] = 'alert';
 
@@ -299,7 +300,7 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
     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) {
+        if (MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"]) {
             buttons = [
                 {
                     text: this.isMachineWatched(item.number) ?
@@ -325,6 +326,18 @@ export default class ProxiwashScreen extends FetchedDataSectionList {
         );
     }
 
+    getRightButton(): * {
+        return (
+            <Touchable
+                style={{padding: 6}}
+                onPress={() => this.props.navigation.navigate('ProxiwashAboutScreen')}>
+                <CustomMaterialIcon
+                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
+                    icon="information"/>
+            </Touchable>
+        );
+    }
+
     /**
      * Get list item to be rendered
      *
@@ -334,12 +347,11 @@ 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 isMachineRunning = MACHINE_STATES[item.state] === MACHINE_STATES["EN COURS"];
         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,