Update ui to go to proxiwash Settings

Remove the header of proxiwash screen
Add a button on proxiwash screen tool bar

locales/en.json

@@ -41,14 +41,10 @@
       "washer": "Washer",
       "washers": "Washers",
       "min": "min",
-      "description": "This is the washing service operated by Promologis for INSA's residences (We don't mind if you do not live on the campus and you do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers, is open 7d/7 24h/24 ! Here you can check their availability ! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines ). You can pay by credit card or cash.",
       "informationTab": "Information",
       "paymentTab": "Payment",
       "tariffs": "Tariffs",
-      "washersTariff": "3€ the washer + 0.80€ with detergent.",
-      "dryersTariff": "0.35€ for 5min of dryer usage.",
       "paymentMethods": "Payment Methods",
-      "paymentMethodsDescription": "Cash up until 10€.\nCredit Card also accepted.",
       "washerProcedure": "Put your laundry in the tumble without tamping it and by respecting charge limits.\n\nClose the machine's door.\n\nChoose a program using one of the four favorite program buttons.\n\nPay to the command central, then press the START button on the machine.\n\nWhen the program is finished, the screen indicates 'Programme terminé', press the yellow button to open the lid and retrieve your laundry.",
       "washerTips": "Program 'blanc/couleur': 6kg of dry laundry (cotton linen, linen, underwear, sheets, jeans, towels).\n\nProgram 'non repassable': 3,5 kg of dry laundry (synthetic fibre linen, cotton and polyester mixed).\n\nProgram 'fin 30°C': 2,5 kg of dry laundry (delicate linen in synthetic fibres).\n\nProgram 'laine 30°C': 2,5 kg of dry laundry (wool textiles).",
       "dryerProcedure": "Put your laundry in the tumble without tamping it and by respecting charge limits.\n\nClose the machine's door.\n\nChoose a program using one of the four favorite program buttons.\n\nPay to the command central, then press the START button on the machine.",
@@ -57,6 +53,20 @@
       "tips": "Tips",
       "numAvailable": "available",
       "numAvailablePlural": "available",
+      "washinsa": {
+        "title": "INSA laundromat",
+        "subtitle": "Your favorite laundromat !!",
+        "description": "This is the washing service operated by Promologis for INSA's residences (We don't mind if you do not live on the campus and you do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers, is open 7d/7 24h/24 ! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines ).",
+        "tariff": "Washers 6kg: 3€ the washer + 0.80€ with detergent.\nDryers 14kg: 0.35€ for 5min of dryer usage.",
+        "paymentMethods": "Cash up until 10€.\nCredit Card also accepted."
+      },
+      "tripodeB": {
+        "title": "Tripode B laundromat",
+        "subtitle": "[A TRADUIRE] Celle de ceux qui habite prés du métro.",
+        "description": "[A TRADUIRE] C'est le service de laverie proposé par le crous pour les résidences Tripode B et C ainsi que Thalès et Pythagore. Le local situé au pied du Tripode B en face de de la résidence Pythagore avec ses 2 sèche-linges et 6 machines est ouvert 7J/7 de 7h à 23h. En plus des machine 6kg il y as une machine de 10kg.",
+        "tariff": "Washers 6kg: 2.60€ the washer + 0.90€ with detergent.\nWashers 10kg: 4.90€ the washer + 1.50€ with detergent.\nDryers 14kg: 0.40€ for 5min of dryer usage.",
+        "paymentMethods": "Carte bancaire acceptée."
+      },
       "modal": {
         "enableNotifications": "Notify me",
         "disableNotifications": "Stop notifications",
@@ -197,7 +207,6 @@
         "message": "An Amicale account allows you to take part in several activities around campus. You can join a club, or even create your own!\n\nLogging into your Amicale account on the app will allow you to see all available clubs on the campus, vote for the upcoming elections, and more to come!\n\nNo Account? Go to the Amicale's building during open hours to create one.",
         "button": "OK"
       }
-
     },
     "profile": {
       "title": "Profile",

locales/fr.json

@@ -41,14 +41,10 @@
       "washer": "Lave-Linge",
       "washers": "Lave-Linges",
       "min": "min",
-      "description": "C'est le service de laverie proposé par Promologis pour les résidences INSA (On t'en voudra pas si tu loges pas sur le campus et que tu fais ta machine ici). Le local situé au pied du R2 avec ses 3 sèche-linges et 9 machines est ouvert 7J/7 24h/24 ! Ici tu peux vérifier leur disponibilité ! Tu peux amener ta lessive, la prendre sur place ou encore mieux l'acheter au Proximo (moins chère qu'à la laverie directement). Tu peux payer par CB ou espèces.",
       "informationTab": "Informations",
       "paymentTab": "Paiement",
       "tariffs": "Tarifs",
-      "washersTariff": "3€ la machine + 0.80€ avec la lessive.",
-      "dryersTariff": "0.35€ pour 5min de sèche linge.",
       "paymentMethods": "Moyens de Paiement",
-      "paymentMethodsDescription": "Toute monnaie jusqu'à 10€.\nCarte bancaire acceptée.",
       "washerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.\n\nDès que le programme est terminé, l’afficheur indique 'Programme terminé', appuyer sur le bouton jaune d’ouverture du hublot pour récupérer le linge.",
       "washerTips": "Programme blanc/couleur : 6kg de linge sec (textiles en coton, lin, linge de corps, draps, jeans,serviettes de toilettes).\n\nProgramme non repassable : 3,5 kg de linge sec (textiles en fibres synthétiques, coton et polyester mélangés).\n\nProgramme fin 30°C : 2,5 kg de linge sec (textiles délicats en fibres synthétiques, rayonne).\n\nProgramme laine 30°C : 2,5 kg de linge sec (textiles en laine et lainages lavables).",
       "dryerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.",
@@ -57,6 +53,20 @@
       "tips": "Conseils",
       "numAvailable": "disponible",
       "numAvailablePlural": "disponibles",
+      "washinsa": {
+        "title": "Laverie INSA",
+        "subtitle": "Ta laverie préférer !!",
+        "description": "C'est le service de laverie proposé par Promologis pour les résidences INSA (On t'en voudra pas si tu loges pas sur le campus et que tu fais ta machine ici). Le local situé au pied du R2 avec ses 3 sèche-linges et 9 machines est ouvert 7J/7 24h/24 ! Tu peux amener ta lessive, la prendre sur place ou encore mieux l'acheter au Proximo (moins chère qu'à la laverie directement).",
+        "tariff": "Lave-Linges 6kg: 3€ la machine + 0.80€ avec la lessive.\nSèche-Linges 14kg: 0.35€ pour 5min de sèche linge.",
+        "paymentMethods": "Toute monnaie jusqu'à 10€.\nCarte bancaire acceptée."
+      },
+      "tripodeB": {
+        "title": "Laverie Tripode B",
+        "subtitle": "Celle de ceux qui habite prés du métro.",
+        "description": "C'est le service de laverie proposé par le crous pour les résidences Tripode B et C ainsi que Thalès et Pythagore. Le local situé au pied du Tripode B en face de de la résidence Pythagore avec ses 2 sèche-linges et 6 machines est ouvert 7J/7 de 7h à 23h. En plus des machine 6kg il y as une machine de 10kg.",
+        "tariff": "Lave-Linges 6kg: 2.60€ la machine + 0.90€ avec la lessive.\nLave-Linges 10kg: 4.90€ la machine + 1.50€ avec la lessive.\nSèche-Linges 14kg: 0.40€ pour 5min de sèche linge.",
+        "paymentMethods": "Carte bancaire acceptée."
+      },
       "modal": {
         "enableNotifications": "Me Notifier",
         "disableNotifications": "Désactiver les  notifications",

src/components/Lists/Proxiwash/ProxiwashListItem.js

@@ -59,6 +59,8 @@ class ProxiwashListItem extends React.Component<PropsType> {
 
   title: string;
 
+  titlePopUp: string;
+
   constructor(props: PropsType) {
     super(props);
     this.stateColors = {};
@@ -67,6 +69,7 @@ class ProxiwashListItem extends React.Component<PropsType> {
     this.updateStateStrings();
 
     let displayNumber = props.item.number;
+    const displayMaxWeight = props.item['maxWeight '];
     if (AprilFoolsManager.getInstance().isAprilFoolsEnabled())
       displayNumber = AprilFoolsManager.getProxiwashMachineDisplayNumber(
         parseInt(props.item.number, 10),
@@ -76,6 +79,7 @@ class ProxiwashListItem extends React.Component<PropsType> {
       ? i18n.t('screens.proxiwash.dryer')
       : i18n.t('screens.proxiwash.washer');
     this.title += ` n°${displayNumber}`;
+    this.titlePopUp = `${this.title} - ${displayMaxWeight} kg`;
   }
 
   shouldComponentUpdate(nextProps: PropsType): boolean {
@@ -90,7 +94,7 @@ class ProxiwashListItem extends React.Component<PropsType> {
 
   onListItemPress = () => {
     const {props} = this;
-    props.onPress(this.title, props.item, props.isDryer);
+    props.onPress(this.titlePopUp, props.item, props.isDryer);
   };
 
   updateStateStrings() {

src/managers/AsyncStorageManager.js

@@ -107,6 +107,10 @@ export default class AsyncStorageManager {
       key: 'gameScores',
       default: '[]',
     },
+    selectedWash: {
+      key: 'selectedWash',
+      default: 'washinsa',
+    },
   };
 
   #currentPreferences: {[key: string]: string};

src/navigation/TabNavigator.js

@@ -29,6 +29,7 @@ import {
   getWebsiteStack,
 } from '../utils/CollapsibleUtils';
 import Mascot, {MASCOT_STYLE} from '../components/Mascot/Mascot';
+import ProxiwashSettingsScreen from '../screens/Proxiwash/ProxiwashSettingsScreen';
 
 const modalTransition =
   Platform.OS === 'ios'
@@ -91,6 +92,12 @@ function ProxiwashStackComponent(): React.Node {
         ProxiwashAboutScreen,
         i18n.t('screens.proxiwash.title'),
       )}
+      {createScreenCollapsibleStack(
+        'proxiwash-settings',
+        ProxiwashStack,
+        ProxiwashSettingsScreen,
+        i18n.t('screens.proxiwash.title'),
+      )}
     </ProxiwashStack.Navigator>
   );
 }

src/screens/Proxiwash/ProxiwashAboutScreen.js

@@ -3,8 +3,7 @@
 import * as React from 'react';
 import {Image, View} from 'react-native';
 import i18n from 'i18n-js';
-import {Card, Avatar, Paragraph, Text, Title} from 'react-native-paper';
-import CustomTabBar from '../../components/Tabbar/CustomTabBar';
+import {Card, Avatar, Paragraph, Title} from 'react-native-paper';
 import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
 import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
 
@@ -32,7 +31,7 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
             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')}
@@ -62,33 +61,6 @@ export default class ProxiwashAboutScreen extends React.Component<null> {
             <Paragraph>{i18n.t('screens.proxiwash.washerTips')}</Paragraph>
           </Card.Content>
         </Card>
-
-        <Card style={{margin: 5}}>
-          <Card.Title
-            title={i18n.t('screens.proxiwash.tariffs')}
-            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              <Avatar.Icon size={iconProps.size} icon="circle-multiple" />
-            )}
-          />
-          <Card.Content>
-            <Paragraph>{i18n.t('screens.proxiwash.washersTariff')}</Paragraph>
-            <Paragraph>{i18n.t('screens.proxiwash.dryersTariff')}</Paragraph>
-          </Card.Content>
-        </Card>
-        <Card
-          style={{margin: 5, marginBottom: CustomTabBar.TAB_BAR_HEIGHT + 20}}>
-          <Card.Title
-            title={i18n.t('screens.proxiwash.paymentMethods')}
-            left={(iconProps: CardTitleIconPropsType): React.Node => (
-              <Avatar.Icon size={iconProps.size} icon="cash" />
-            )}
-          />
-          <Card.Content>
-            <Paragraph>
-              {i18n.t('screens.proxiwash.paymentMethodsDescription')}
-            </Paragraph>
-          </Card.Content>
-        </Card>
       </CollapsibleScrollView>
     );
   }

src/screens/Proxiwash/ProxiwashScreen.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import {Alert, View} from 'react-native';
 import i18n from 'i18n-js';
-import {Avatar, Button, Card, Text, withTheme} from 'react-native-paper';
+import {Avatar, Button, Card, List, Text, withTheme} from 'react-native-paper';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {Modalize} from 'react-native-modalize';
 import WebSectionList from '../../components/Screens/WebSectionList';
@@ -26,9 +26,8 @@ import {
 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';
+import type {ListIconPropsType} from '../../constants/PaperStyles';
+import {PROXIWASH_DATA} from './ProxiwashSettingsScreen';
 
 const modalStateStrings = {};
 
@@ -38,6 +37,7 @@ const LIST_ITEM_HEIGHT = 64;
 export type ProxiwashMachineType = {
   number: string,
   state: string,
+  'maxWeight ': number,
   startTime: string,
   endTime: string,
   donePercent: string,
@@ -53,6 +53,7 @@ type PropsType = {
 type StateType = {
   modalCurrentDisplayItem: React.Node,
   machinesWatched: Array<ProxiwashMachineType>,
+  selectedWash: string,
 };
 
 /**
@@ -87,6 +88,9 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
       machinesWatched: AsyncStorageManager.getObject(
         AsyncStorageManager.PREFERENCES.proxiwashWatchedMachines.key,
       ),
+      selectedWash: AsyncStorageManager.getString(
+        AsyncStorageManager.PREFERENCES.selectedWash.key,
+      ),
     };
     modalStateStrings[ProxiwashConstants.machineStates.AVAILABLE] = i18n.t(
       'screens.proxiwash.modal.ready',
@@ -124,6 +128,11 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
             iconName="information"
             onPress={this.onAboutPress}
           />
+          <Item
+            title="settings"
+            iconName="settings"
+            onPress={this.onSettingsPress}
+          />
         </MaterialHeaderButtons>
       ),
     });
@@ -138,6 +147,15 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
     navigation.navigate('proxiwash-about');
   };
 
+  /**
+   * Callback used when pressing the settings button.
+   * This will open the ProxiwashSettingsScreen.
+   */
+  onSettingsPress = () => {
+    const {navigation} = this.props;
+    navigation.navigate('proxiwash-settings');
+  };
+
   /**
    * Callback used when the user clicks on enable notifications for a machine
    *
@@ -198,9 +216,6 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
         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
@@ -342,6 +357,31 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
     return count;
   }
 
+  /**
+   * Gets a chevron icon
+   *
+   * @param props
+   * @return {*}
+   */
+  static getChevronIcon(props: ListIconPropsType): React.Node {
+    return (
+      <List.Icon color={props.color} style={props.style} icon="chevron-right" />
+    );
+  }
+
+  /**
+   * Gets a custom list item icon
+   *
+   * @param item The item to show the icon for
+   * @param props
+   * @return {*}
+   */
+  static getItemIcon(item: ListItemType, props: ListIconPropsType): React.Node {
+    return (
+      <List.Icon color={props.color} style={props.style} icon={item.icon} />
+    );
+  }
+
   /**
    * Creates the dataset to be used by the FlatList
    *
@@ -437,8 +477,19 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
   render(): React.Node {
     const {state} = this;
     const {navigation} = this.props;
+    let data: LaverieType;
+    switch (state.selectedWash) {
+      case 'tripodeB':
+        data = PROXIWASH_DATA.tripodeB;
+        break;
+      default:
+        data = PROXIWASH_DATA.washinsa;
+    }
     return (
-      <View style={{flex: 1}}>
+      <View
+        style={{
+          flex: 1,
+        }}>
         <View
           style={{
             position: 'absolute',
@@ -448,7 +499,7 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
           <WebSectionList
             createDataset={this.createDataset}
             navigation={navigation}
-            fetchUrl={DATA_URL}
+            fetchUrl={data.url}
             renderItem={this.getRenderItem}
             renderSectionHeader={this.getRenderSectionHeader}
             autoRefreshTime={REFRESH_TIME}

src/screens/Proxiwash/ProxiwashSettingsScreen.js

@@ -0,0 +1,135 @@
+// @flow
+
+import * as React from 'react';
+import {
+  Title,
+  Button,
+  Card,
+  Avatar,
+  withTheme,
+  Paragraph,
+} from 'react-native-paper';
+import i18n from 'i18n-js';
+import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
+import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
+import AsyncStorageManager from '../../managers/AsyncStorageManager';
+import ThemeManager from '../../managers/ThemeManager';
+import type {CustomThemeType} from '../../managers/ThemeManager';
+
+export type LaverieType = {
+  id: string,
+  title: string,
+  subtitle: string,
+  description: string,
+  tarif: string,
+  paymentMethods: string,
+  icon: string,
+  url: string,
+};
+
+export const PROXIWASH_DATA = {
+  washinsa: {
+    id: 'washinsa',
+    title: i18n.t('screens.proxiwash.washinsa.title'),
+    subtitle: i18n.t('screens.proxiwash.washinsa.subtitle'),
+    description: i18n.t('screens.proxiwash.washinsa.description'),
+    tarif: i18n.t('screens.proxiwash.washinsa.tariff'),
+    paymentMethods: i18n.t('screens.proxiwash.washinsa.paymentMethods'),
+    icon: 'school-outline',
+    url:
+      'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json',
+  },
+  tripodeB: {
+    id: 'tripodeB',
+    title: i18n.t('screens.proxiwash.tripodeB.title'),
+    subtitle: i18n.t('screens.proxiwash.tripodeB.subtitle'),
+    description: i18n.t('screens.proxiwash.tripodeB.description'),
+    tarif: i18n.t('screens.proxiwash.tripodeB.tariff'),
+    paymentMethods: i18n.t('screens.proxiwash.tripodeB.paymentMethods'),
+    icon: 'domain',
+    url:
+      'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/tripode_b_data.json',
+  },
+};
+
+type StateType = {
+  selectedWash: string,
+  currentTheme: CustomThemeType,
+};
+
+/**
+ * Class defining the proxiwash settings screen.
+ */
+class ProxiwashSettingsScreen extends React.Component<null, StateType> {
+  constructor() {
+    super();
+    this.state = {
+      selectedWash: AsyncStorageManager.getString(
+        AsyncStorageManager.PREFERENCES.selectedWash.key,
+      ),
+    };
+  }
+
+  /**
+   * Saves the value for the proxiwash selected wash
+   *
+   * @param value The value to store
+   */
+  onSelectWashValueChange = (value: string) => {
+    if (value != null) {
+      this.setState({selectedWash: value});
+      AsyncStorageManager.set(
+        AsyncStorageManager.PREFERENCES.selectedWash.key,
+        value,
+      );
+    }
+  };
+
+  getCardItem(item: LaverieType): React.Node {
+    const {selectedWash} = this.state;
+    const onSelectWashValueChange = (): void =>
+      this.onSelectWashValueChange(item.id);
+    let cardStyle = {
+      margin: 5,
+    };
+    if (selectedWash === item.id) {
+      cardStyle = {
+        margin: 5,
+        backgroundColor: ThemeManager.getCurrentTheme().colors
+          .proxiwashUnknownColor,
+      };
+    }
+    return (
+      <Card style={cardStyle}>
+        <Card.Title
+          title={item.title}
+          subtitle={item.subtitle}
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
+            <Avatar.Icon size={iconProps.size} icon={item.icon} />
+          )}
+        />
+        <Card.Content>
+          <Paragraph>{item.description}</Paragraph>
+          <Title>{i18n.t('screens.proxiwash.tariffs')}</Title>
+          <Paragraph>{item.tarif}</Paragraph>
+          <Title>{i18n.t('screens.proxiwash.paymentMethods')}</Title>
+          <Paragraph>{item.paymentMethods}</Paragraph>
+        </Card.Content>
+        <Card.Actions>
+          <Button onPress={onSelectWashValueChange}>Select</Button>
+        </Card.Actions>
+      </Card>
+    );
+  }
+
+  render(): React.Node {
+    return (
+      <CollapsibleScrollView style={{padding: 5}} hasTab>
+        {this.getCardItem(PROXIWASH_DATA.washinsa)}
+        {this.getCardItem(PROXIWASH_DATA.tripodeB)}
+      </CollapsibleScrollView>
+    );
+  }
+}
+
+export default withTheme(ProxiwashSettingsScreen);