Browse Source

Added mascot to equipment screen

Arnaud Vergnet 3 years ago
parent
commit
8b201efabf

+ 6
- 2
locales/en.json View File

@@ -269,7 +269,6 @@
269 269
       "title": "Equipment Booking",
270 270
       "book": "Book",
271 271
       "confirm": "Confirmation",
272
-      "message": "Thanks to the Amicale, students have access to some equipment like BBQs and others. To book one of those items, click the equipment of your choice in the list bellow, enter your lend dates, then come around the Amicale to claim it and give your bail.",
273 272
       "bail": "Bail: %{cost}€",
274 273
       "available": "Available %{date}",
275 274
       "today": "today",
@@ -284,7 +283,12 @@
284 283
       "dialogTitle": "Confirm booking?",
285 284
       "dialogTitleLoading": "Sending your booking...",
286 285
       "dialogMessage": "Are you sure you want to confirm your booking?\n\nYou will then be able to claim the selected equipment at the Amicale for the duration of your booking in exchange of a bail.",
287
-      "bookingConfirmedMessage": "Do not forget to come by the Amicale to give your bail in exchange of the equipment."
286
+      "bookingConfirmedMessage": "Do not forget to come by the Amicale to give your bail in exchange of the equipment.",
287
+      "mascotDialog": {
288
+        "title": "How does it work ?",
289
+        "message": "Thanks to the Amicale, students have access to some equipment like BBQs and others. To book one of those items, click the equipment of your choice in the list bellow, enter your lend dates, then come around the Amicale to claim it and give your bail.",
290
+        "button": "Ok"
291
+      }
288 292
     },
289 293
 
290 294
     "scanner": {

+ 6
- 2
locales/fr.json View File

@@ -268,7 +268,6 @@
268 268
       "title": "Réservation de Matériel",
269 269
       "book": "Réserver",
270 270
       "confirm": "Confirmation",
271
-      "message": "L'Amicale met à disposition des étudiants du matériel comme des BBQ, des appareils à raclette et autres. Pour réserver l'un de ces formidables appareils, clique sur celui de ton choix dans la liste, indique les dates du prêt, puis passe à l'Amicale pour le récupérer et donner la caution.",
272 271
       "bail": "Caution : %{cost}€",
273 272
       "available": "Disponible %{date}",
274 273
       "today": "aujourd'hui",
@@ -283,7 +282,12 @@
283 282
       "dialogTitle": "Confirmer la réservation ?",
284 283
       "dialogTitleLoading": "Envoi de votre réservation...",
285 284
       "dialogMessage": "Est-tu sûr de confirmer ta réservation ?\n\nTu pourras ensuite passer à l'Amicale récupérer le matériel pour la durée de la réservation en échange d'une caution.",
286
-      "bookingConfirmedMessage": "N'oublie pas de passer à L'Amicale pour donner la caution en échange du matériel."
285
+      "bookingConfirmedMessage": "N'oublie pas de passer à L'Amicale pour donner la caution en échange du matériel.",
286
+      "mascotDialog": {
287
+        "title": "Comme ça marche ?",
288
+        "message": "L'Amicale met à disposition des étudiants du matériel comme des BBQ, des appareils à raclette et autres. Pour réserver l'un de ces formidables appareils, clique sur celui de ton choix dans la liste, indique les dates du prêt, puis passe à l'Amicale pour le récupérer et donner la caution.",
289
+        "button": "Merci !"
290
+      }
287 291
     },
288 292
 
289 293
     "scanner": {

+ 5
- 0
src/managers/AsyncStorageManager.js View File

@@ -94,6 +94,11 @@ export default class AsyncStorageManager {
94 94
             default: '1',
95 95
             current: '',
96 96
         },
97
+        equipmentShowBanner: {
98
+            key: 'equipmentShowBanner',
99
+            default: '1',
100
+            current: '',
101
+        },
97 102
         proxiwashWatchedMachines: {
98 103
             key: 'proxiwashWatchedMachines',
99 104
             default: '[]',

+ 77
- 38
src/screens/Amicale/Equipment/EquipmentListScreen.js View File

@@ -1,8 +1,8 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Animated, Image} from "react-native";
5
-import {Card, Paragraph, withTheme} from 'react-native-paper';
4
+import {Animated, View} from "react-native";
5
+import {Button, withTheme} from 'react-native-paper';
6 6
 import AuthenticatedScreen from "../../../components/Amicale/AuthenticatedScreen";
7 7
 import {Collapsible} from "react-navigation-collapsible";
8 8
 import {withCollapsible} from "../../../utils/withCollapsible";
@@ -11,6 +11,9 @@ import type {CustomTheme} from "../../../managers/ThemeManager";
11 11
 import i18n from "i18n-js";
12 12
 import type {club} from "../Clubs/ClubListScreen";
13 13
 import EquipmentListItem from "../../../components/Lists/Equipment/EquipmentListItem";
14
+import MascotPopup from "../../../components/Mascot/MascotPopup";
15
+import {MASCOT_STYLE} from "../../../components/Mascot/Mascot";
16
+import AsyncStorageManager from "../../../managers/AsyncStorageManager";
14 17
 
15 18
 type Props = {
16 19
     navigation: StackNavigationProp,
@@ -18,6 +21,10 @@ type Props = {
18 21
     collapsibleStack: Collapsible,
19 22
 }
20 23
 
24
+type State = {
25
+    mascotDialogVisible: boolean,
26
+}
27
+
21 28
 export type Device = {
22 29
     id: number,
23 30
     name: string,
@@ -32,10 +39,13 @@ export type RentedDevice = {
32 39
     end: string,
33 40
 }
34 41
 
35
-const ICON_AMICALE = require('../../../../assets/amicale.png');
36 42
 const LIST_ITEM_HEIGHT = 64;
37 43
 
38
-class EquipmentListScreen extends React.Component<Props> {
44
+class EquipmentListScreen extends React.Component<Props, State> {
45
+
46
+    state = {
47
+        mascotDialogVisible: AsyncStorageManager.getInstance().preferences.equipmentShowBanner.current === "1"
48
+    }
39 49
 
40 50
     data: Array<Device>;
41 51
     userRents: Array<RentedDevice>;
@@ -84,24 +94,24 @@ class EquipmentListScreen extends React.Component<Props> {
84 94
      * @returns {*}
85 95
      */
86 96
     getListHeader() {
87
-        return <Card style={{margin: 5}}>
88
-            <Card.Title
89
-                title={i18n.t('screens.equipment.title')}
90
-                left={(props) => <Image
91
-                    {...props}
97
+        return (
98
+            <View style={{
99
+                width: "100%",
100
+                marginTop: 10,
101
+                marginBottom: 10,
102
+            }}>
103
+                <Button
104
+                    mode={"contained"}
105
+                    icon={"help-circle"}
106
+                    onPress={this.showMascotDialog}
92 107
                     style={{
93
-                        width: props.size,
94
-                        height: props.size,
95
-                    }}
96
-                    source={ICON_AMICALE}
97
-                />}
98
-            />
99
-            <Card.Content>
100
-                <Paragraph>
101
-                    {i18n.t('screens.equipment.message')}
102
-                </Paragraph>
103
-            </Card.Content>
104
-        </Card>;
108
+                        marginRight: "auto",
109
+                        marginLeft: "auto",
110
+                    }}>
111
+                    {i18n.t("screens.equipment.mascotDialog.title")}
112
+                </Button>
113
+            </View>
114
+        );
105 115
     }
106 116
 
107 117
     keyExtractor = (item: club) => item.id.toString();
@@ -141,25 +151,54 @@ class EquipmentListScreen extends React.Component<Props> {
141 151
         )
142 152
     };
143 153
 
154
+    showMascotDialog = () => {
155
+        this.setState({mascotDialogVisible: true})
156
+    };
157
+
158
+    hideMascotDialog = () => {
159
+        AsyncStorageManager.getInstance().savePref(
160
+            AsyncStorageManager.getInstance().preferences.equipmentShowBanner.key,
161
+            '0'
162
+        );
163
+        this.setState({mascotDialogVisible: false})
164
+    };
165
+
144 166
     render() {
145 167
         return (
146
-            <AuthenticatedScreen
147
-                {...this.props}
148
-                ref={this.authRef}
149
-                requests={[
150
-                    {
151
-                        link: 'location/all',
152
-                        params: {},
153
-                        mandatory: true,
154
-                    },
155
-                    {
156
-                        link: 'location/my',
157
-                        params: {},
158
-                        mandatory: false,
159
-                    }
160
-                ]}
161
-                renderFunction={this.getScreen}
162
-            />
168
+            <View style={{flex: 1}}>
169
+                <AuthenticatedScreen
170
+                    {...this.props}
171
+                    ref={this.authRef}
172
+                    requests={[
173
+                        {
174
+                            link: 'location/all',
175
+                            params: {},
176
+                            mandatory: true,
177
+                        },
178
+                        {
179
+                            link: 'location/my',
180
+                            params: {},
181
+                            mandatory: false,
182
+                        }
183
+                    ]}
184
+                    renderFunction={this.getScreen}
185
+                />
186
+                <MascotPopup
187
+                    visible={this.state.mascotDialogVisible}
188
+                    title={i18n.t("screens.equipment.mascotDialog.title")}
189
+                    message={i18n.t("screens.equipment.mascotDialog.message")}
190
+                    icon={"vote"}
191
+                    buttons={{
192
+                        action: null,
193
+                        cancel: {
194
+                            message: i18n.t("screens.equipment.mascotDialog.button"),
195
+                            icon: "check",
196
+                            onPress: this.hideMascotDialog,
197
+                        }
198
+                    }}
199
+                    emotion={MASCOT_STYLE.WINK}
200
+                />
201
+            </View>
163 202
         );
164 203
     }
165 204
 }

Loading…
Cancel
Save