Browse Source

Add new Screen to select wash

docjyJ 3 years ago
parent
commit
115c90b712

+ 7
- 0
src/navigation/TabNavigator.js View File

@@ -29,6 +29,7 @@ import {
29 29
   getWebsiteStack,
30 30
 } from '../utils/CollapsibleUtils';
31 31
 import Mascot, {MASCOT_STYLE} from '../components/Mascot/Mascot';
32
+import ProxiwashSettingsScreen from '../screens/Proxiwash/ProxiwashSettingsScreen';
32 33
 
33 34
 const modalTransition =
34 35
   Platform.OS === 'ios'
@@ -91,6 +92,12 @@ function ProxiwashStackComponent(): React.Node {
91 92
         ProxiwashAboutScreen,
92 93
         i18n.t('screens.proxiwash.title'),
93 94
       )}
95
+      {createScreenCollapsibleStack(
96
+        'proxiwash-settings',
97
+        ProxiwashStack,
98
+        ProxiwashSettingsScreen,
99
+        i18n.t('screens.proxiwash.title'),
100
+      )}
94 101
     </ProxiwashStack.Navigator>
95 102
   );
96 103
 }

+ 46
- 40
src/screens/Proxiwash/ProxiwashScreen.js View File

@@ -3,7 +3,7 @@
3 3
 import * as React from 'react';
4 4
 import {Alert, View} from 'react-native';
5 5
 import i18n from 'i18n-js';
6
-import {Avatar, Button, Card, Text, withTheme} from 'react-native-paper';
6
+import {Avatar, Button, Card, List, Text, withTheme} from 'react-native-paper';
7 7
 import {StackNavigationProp} from '@react-navigation/stack';
8 8
 import {Modalize} from 'react-native-modalize';
9 9
 import WebSectionList from '../../components/Screens/WebSectionList';
@@ -26,31 +26,8 @@ import {
26 26
 import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
27 27
 import MascotPopup from '../../components/Mascot/MascotPopup';
28 28
 import type {SectionListDataType} from '../../components/Screens/WebSectionList';
29
-import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
30
-
31
-type LaverieType = {
32
-  title: string,
33
-  subtitle: string,
34
-  icon: string,
35
-  url: string,
36
-};
37
-
38
-const DATA = {
39
-  washinsa: {
40
-    title: 'Laverie INSA',
41
-    subtitle: 'Ta laverie préférer !!',
42
-    icon: 'school-outline',
43
-    url:
44
-      'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json',
45
-  },
46
-  tripodeB: {
47
-    title: 'Laverie Tripode B',
48
-    subtitle: 'En vrai je sais pas trop quoi marqué.',
49
-    icon: 'domain',
50
-    url:
51
-      'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/tripode_b_data.json',
52
-  },
53
-};
29
+import type {ListIconPropsType} from '../../constants/PaperStyles';
30
+import {PROXIWASH_DATA} from './ProxiwashSettingsScreen';
54 31
 
55 32
 const modalStateStrings = {};
56 33
 
@@ -225,9 +202,6 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
225 202
         remaining: remainingTime,
226 203
         program: item.program,
227 204
       });
228
-    } else if (item.state === ProxiwashConstants.machineStates.AVAILABLE) {
229
-      if (isDryer) message += `\n${i18n.t('screens.proxiwash.dryersTariff')}`;
230
-      else message += `\n${i18n.t('screens.proxiwash.washersTariff')}`;
231 205
     }
232 206
     return (
233 207
       <View
@@ -370,6 +344,31 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
370 344
   }
371 345
 
372 346
   /**
347
+   * Gets a chevron icon
348
+   *
349
+   * @param props
350
+   * @return {*}
351
+   */
352
+  static getChevronIcon(props: ListIconPropsType): React.Node {
353
+    return (
354
+      <List.Icon color={props.color} style={props.style} icon="chevron-right" />
355
+    );
356
+  }
357
+
358
+  /**
359
+   * Gets a custom list item icon
360
+   *
361
+   * @param item The item to show the icon for
362
+   * @param props
363
+   * @return {*}
364
+   */
365
+  static getItemIcon(item: ListItemType, props: ListIconPropsType): React.Node {
366
+    return (
367
+      <List.Icon color={props.color} style={props.style} icon={item.icon} />
368
+    );
369
+  }
370
+
371
+  /**
373 372
    * Creates the dataset to be used by the FlatList
374 373
    *
375 374
    * @param fetchedData
@@ -423,24 +422,31 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
423 422
     }
424 423
   };
425 424
 
425
+  onPressCallback = () => {
426
+    const {navigation} = this.props;
427
+    navigation.navigate('proxiwash-settings');
428
+  };
429
+
426 430
   getListHeader = (): React.Node => {
427 431
     const {selectedWash} = this.state;
428
-    let data: LaverieType;
432
+    let item: LaverieType;
429 433
     switch (selectedWash) {
430 434
       case 'tripodeB':
431
-        data = DATA.tripodeB;
435
+        item = PROXIWASH_DATA.tripodeB;
432 436
         break;
433 437
       default:
434
-        data = DATA.washinsa;
438
+        item = PROXIWASH_DATA.washinsa;
435 439
     }
440
+    const getItemIcon = (props: ListIconPropsType): React.Node =>
441
+      ProxiwashScreen.getItemIcon(item, props);
436 442
     return (
437 443
       <Card>
438
-        <Card.Title
439
-          title={data.title}
440
-          subtitle={data.subtitle}
441
-          left={(iconProps: CardTitleIconPropsType): React.Node => (
442
-            <Avatar.Icon size={iconProps.size} icon={data.icon} />
443
-          )}
444
+        <List.Item
445
+          title={item.title}
446
+          description={item.subtitle}
447
+          left={getItemIcon}
448
+          right={ProxiwashScreen.getChevronIcon}
449
+          onPress={this.onPressCallback}
444 450
         />
445 451
       </Card>
446 452
     );
@@ -490,10 +496,10 @@ class ProxiwashScreen extends React.Component<PropsType, StateType> {
490 496
     let data: LaverieType;
491 497
     switch (state.selectedWash) {
492 498
       case 'tripodeB':
493
-        data = DATA.tripodeB;
499
+        data = PROXIWASH_DATA.tripodeB;
494 500
         break;
495 501
       default:
496
-        data = DATA.washinsa;
502
+        data = PROXIWASH_DATA.washinsa;
497 503
     }
498 504
     return (
499 505
       <View

+ 135
- 0
src/screens/Proxiwash/ProxiwashSettingsScreen.js View File

@@ -0,0 +1,135 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {
5
+  Title,
6
+  Button,
7
+  Card,
8
+  Avatar,
9
+  withTheme,
10
+  Paragraph,
11
+} from 'react-native-paper';
12
+import i18n from 'i18n-js';
13
+import CollapsibleScrollView from '../../components/Collapsible/CollapsibleScrollView';
14
+import type {CardTitleIconPropsType} from '../../constants/PaperStyles';
15
+import AsyncStorageManager from '../../managers/AsyncStorageManager';
16
+import ThemeManager from '../../managers/ThemeManager';
17
+import type {CustomThemeType} from '../../managers/ThemeManager';
18
+
19
+export type LaverieType = {
20
+  id: string,
21
+  title: string,
22
+  subtitle: string,
23
+  description: string,
24
+  tarif: string,
25
+  paymentMethods: string,
26
+  icon: string,
27
+  url: string,
28
+};
29
+
30
+export const PROXIWASH_DATA = {
31
+  washinsa: {
32
+    id: 'washinsa',
33
+    title: i18n.t('screens.proxiwash.washinsa.title'),
34
+    subtitle: i18n.t('screens.proxiwash.washinsa.subtitle'),
35
+    description: i18n.t('screens.proxiwash.washinsa.description'),
36
+    tarif: i18n.t('screens.proxiwash.washinsa.tariff'),
37
+    paymentMethods: i18n.t('screens.proxiwash.washinsa.paymentMethods'),
38
+    icon: 'school-outline',
39
+    url:
40
+      'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/washinsa_data.json',
41
+  },
42
+  tripodeB: {
43
+    id: 'tripodeB',
44
+    title: i18n.t('screens.proxiwash.tripodeB.title'),
45
+    subtitle: i18n.t('screens.proxiwash.tripodeB.subtitle'),
46
+    description: i18n.t('screens.proxiwash.tripodeB.description'),
47
+    tarif: i18n.t('screens.proxiwash.tripodeB.tariff'),
48
+    paymentMethods: i18n.t('screens.proxiwash.tripodeB.paymentMethods'),
49
+    icon: 'domain',
50
+    url:
51
+      'https://etud.insa-toulouse.fr/~amicale_app/v2/washinsa/tripode_b_data.json',
52
+  },
53
+};
54
+
55
+type StateType = {
56
+  selectedWash: string,
57
+  currentTheme: CustomThemeType,
58
+};
59
+
60
+/**
61
+ * Class defining the proxiwash settings screen.
62
+ */
63
+class ProxiwashSettingsScreen extends React.Component<null, StateType> {
64
+  constructor() {
65
+    super();
66
+    this.state = {
67
+      selectedWash: AsyncStorageManager.getString(
68
+        AsyncStorageManager.PREFERENCES.selectedWash.key,
69
+      ),
70
+    };
71
+  }
72
+
73
+  /**
74
+   * Saves the value for the proxiwash reminder notification time
75
+   *
76
+   * @param value The value to store
77
+   */
78
+  onSelectWashValueChange = (value: string) => {
79
+    if (value != null) {
80
+      this.setState({selectedWash: value});
81
+      AsyncStorageManager.set(
82
+        AsyncStorageManager.PREFERENCES.selectedWash.key,
83
+        value,
84
+      );
85
+    }
86
+  };
87
+
88
+  getCardItem(item: LaverieType): React.Node {
89
+    const {selectedWash} = this.state;
90
+    const onSelectWashValueChange = (): void =>
91
+      this.onSelectWashValueChange(item.id);
92
+    let cardStyle = {
93
+      margin: 5,
94
+    };
95
+    if (selectedWash === item.id) {
96
+      cardStyle = {
97
+        margin: 5,
98
+        backgroundColor: ThemeManager.getCurrentTheme().colors
99
+          .proxiwashUnknownColor,
100
+      };
101
+    }
102
+    return (
103
+      <Card style={cardStyle}>
104
+        <Card.Title
105
+          title={item.title}
106
+          subtitle={item.subtitle}
107
+          left={(iconProps: CardTitleIconPropsType): React.Node => (
108
+            <Avatar.Icon size={iconProps.size} icon={item.icon} />
109
+          )}
110
+        />
111
+        <Card.Content>
112
+          <Paragraph>{item.description}</Paragraph>
113
+          <Title>{i18n.t('screens.proxiwash.tariffs')}</Title>
114
+          <Paragraph>{item.tarif}</Paragraph>
115
+          <Title>{i18n.t('screens.proxiwash.paymentMethods')}</Title>
116
+          <Paragraph>{item.paymentMethods}</Paragraph>
117
+        </Card.Content>
118
+        <Card.Actions>
119
+          <Button onPress={onSelectWashValueChange}>Select</Button>
120
+        </Card.Actions>
121
+      </Card>
122
+    );
123
+  }
124
+
125
+  render(): React.Node {
126
+    return (
127
+      <CollapsibleScrollView style={{padding: 5}} hasTab>
128
+        {this.getCardItem(PROXIWASH_DATA.washinsa)}
129
+        {this.getCardItem(PROXIWASH_DATA.tripodeB)}
130
+      </CollapsibleScrollView>
131
+    );
132
+  }
133
+}
134
+
135
+export default withTheme(ProxiwashSettingsScreen);

Loading…
Cancel
Save