Browse Source

Improved scanner information display

Arnaud Vergnet 4 years ago
parent
commit
53daa6671a

+ 6
- 5
src/screens/Amicale/Clubs/ClubDisplayScreen.js View File

68
             this.clubId = this.props.route.params.data.id;
68
             this.clubId = this.props.route.params.data.id;
69
             this.shouldFetchData = false;
69
             this.shouldFetchData = false;
70
         } else {
70
         } else {
71
-            this.displayData = {};
71
+            this.displayData = null;
72
             this.categories = null;
72
             this.categories = null;
73
             this.clubId = this.props.route.params.clubId;
73
             this.clubId = this.props.route.params.clubId;
74
             this.shouldFetchData = true;
74
             this.shouldFetchData = true;
76
         }
76
         }
77
     }
77
     }
78
 
78
 
79
-    componentDidMount(): * {
80
-        this.props.navigation.setOptions({title: this.displayData.name})
81
-    }
82
-
83
     getCategoryName(id: number) {
79
     getCategoryName(id: number) {
84
         if (this.categories !== null) {
80
         if (this.categories !== null) {
85
             for (let i = 0; i < this.categories.length; i++) {
81
             for (let i = 0; i < this.categories.length; i++) {
134
         );
130
         );
135
     }
131
     }
136
 
132
 
133
+    updateHeaderTitle(data: Object) {
134
+        this.props.navigation.setOptions({title: data.name})
135
+    }
136
+
137
     getScreen = (data: Object) => {
137
     getScreen = (data: Object) => {
138
         data = FakeClub;
138
         data = FakeClub;
139
+        this.updateHeaderTitle(data);
139
 
140
 
140
         return (
141
         return (
141
             <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>
142
             <ScrollView style={{paddingLeft: 5, paddingRight: 5}}>

+ 62
- 13
src/screens/ScannerScreen.js View File

2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
 import {StyleSheet, View} from "react-native";
4
 import {StyleSheet, View} from "react-native";
5
-import {Text, withTheme} from 'react-native-paper';
5
+import {Button, Text, withTheme} from 'react-native-paper';
6
 import {BarCodeScanner} from "expo-barcode-scanner";
6
 import {BarCodeScanner} from "expo-barcode-scanner";
7
 import {Camera} from 'expo-camera';
7
 import {Camera} from 'expo-camera';
8
 import URLHandler from "../utils/URLHandler";
8
 import URLHandler from "../utils/URLHandler";
15
     hasPermission: boolean,
15
     hasPermission: boolean,
16
     scanned: boolean,
16
     scanned: boolean,
17
     dialogVisible: boolean,
17
     dialogVisible: boolean,
18
+    dialogTitle: string,
19
+    dialogMessage: string,
18
 };
20
 };
19
 
21
 
20
 class ScannerScreen extends React.Component<Props, State> {
22
 class ScannerScreen extends React.Component<Props, State> {
23
         hasPermission: false,
25
         hasPermission: false,
24
         scanned: false,
26
         scanned: false,
25
         dialogVisible: false,
27
         dialogVisible: false,
28
+        dialogTitle: "",
29
+        dialogMessage: "",
26
     };
30
     };
27
 
31
 
28
     constructor() {
32
     constructor() {
30
     }
34
     }
31
 
35
 
32
     componentDidMount() {
36
     componentDidMount() {
33
-        Camera.requestPermissionsAsync().then(this.updatePermissionStatus);
37
+        this.requestPermissions();
34
     }
38
     }
35
 
39
 
36
-    updatePermissionStatus = ({status}) => this.setState({hasPermission: status === "granted"});
40
+    requestPermissions = () => Camera.requestPermissionsAsync().then(this.updatePermissionStatus);
37
 
41
 
42
+    updatePermissionStatus = ({status}) => this.setState({hasPermission: status === "granted"});
38
 
43
 
39
     handleCodeScanned = ({type, data}) => {
44
     handleCodeScanned = ({type, data}) => {
40
-        this.setState({scanned: true});
45
+
41
         if (!URLHandler.isUrlValid(data))
46
         if (!URLHandler.isUrlValid(data))
42
             this.showErrorDialog();
47
             this.showErrorDialog();
43
-        else
48
+        else {
49
+            this.setState({scanned: true});
44
             Linking.openURL(data);
50
             Linking.openURL(data);
51
+        }
45
     };
52
     };
46
 
53
 
47
     getPermissionScreen() {
54
     getPermissionScreen() {
48
-        return <Text>PLS</Text>
55
+        return <View style={{marginLeft: 10, marginRight: 10}}>
56
+            <Text>{i18n.t("scannerScreen.errorPermission")}</Text>
57
+            <Button
58
+                icon="camera"
59
+                mode="contained"
60
+                onPress={this.requestPermissions}
61
+                style={{
62
+                    marginTop: 10,
63
+                    marginLeft: 'auto',
64
+                    marginRight: 'auto',
65
+                }}
66
+            >
67
+                {i18n.t("scannerScreen.buttonPermission")}
68
+            </Button>
69
+        </View>
49
     }
70
     }
50
 
71
 
51
     getOverlay() {
72
     getOverlay() {
78
         );
99
         );
79
     }
100
     }
80
 
101
 
102
+    showHelpDialog = () => {
103
+        this.setState({
104
+            dialogVisible: true,
105
+            scanned: true,
106
+            dialogTitle: i18n.t("scannerScreen.helpTitle"),
107
+            dialogMessage: i18n.t("scannerScreen.helpMessage"),
108
+        });
109
+    };
110
+
81
     showErrorDialog() {
111
     showErrorDialog() {
82
-        this.setState({dialogVisible: true});
112
+        this.setState({
113
+            dialogVisible: true,
114
+            scanned: true,
115
+            dialogTitle: i18n.t("scannerScreen.errorTitle"),
116
+            dialogMessage: i18n.t("scannerScreen.errorMessage"),
117
+        });
83
     }
118
     }
84
 
119
 
85
     onDialogDismiss = () => this.setState({
120
     onDialogDismiss = () => this.setState({
90
     getScanner() {
125
     getScanner() {
91
         return (
126
         return (
92
             <View style={styles.cameraContainer}>
127
             <View style={styles.cameraContainer}>
93
-                <AlertDialog
94
-                    visible={this.state.dialogVisible}
95
-                    onDismiss={this.onDialogDismiss}
96
-                    title={i18n.t("scannerScreen.errorTitle")}
97
-                    message={i18n.t("scannerScreen.errorMessage")}
98
-                />
99
                 <Camera
128
                 <Camera
100
                     onBarCodeScanned={this.state.scanned ? undefined : this.handleCodeScanned}
129
                     onBarCodeScanned={this.state.scanned ? undefined : this.handleCodeScanned}
101
                     type={Camera.Constants.Type.back}
130
                     type={Camera.Constants.Type.back}
118
                     ? this.getScanner()
147
                     ? this.getScanner()
119
                     : this.getPermissionScreen()
148
                     : this.getPermissionScreen()
120
                 }
149
                 }
150
+                <AlertDialog
151
+                    visible={this.state.dialogVisible}
152
+                    onDismiss={this.onDialogDismiss}
153
+                    title={this.state.dialogTitle}
154
+                    message={this.state.dialogMessage}
155
+                />
156
+                <Button
157
+                    icon="information"
158
+                    mode="contained"
159
+                    onPress={this.showHelpDialog}
160
+                    style={styles.button}
161
+                >
162
+                    {i18n.t("scannerScreen.helpButton")}
163
+                </Button>
121
             </View>
164
             </View>
122
         );
165
         );
123
     }
166
     }
167
         aspectRatio: 1,
210
         aspectRatio: 1,
168
         width: '100%',
211
         width: '100%',
169
     },
212
     },
213
+    button: {
214
+        position: 'absolute',
215
+        bottom: 5,
216
+        width: '80%',
217
+        left: '10%'
218
+    },
170
     overlayTopLeft: {
219
     overlayTopLeft: {
171
         ...overlayBoxStyle,
220
         ...overlayBoxStyle,
172
         top: borderOffset,
221
         top: borderOffset,

+ 6
- 1
translations/en.json View File

227
     "membershipNotPayed": "Not payed"
227
     "membershipNotPayed": "Not payed"
228
   },
228
   },
229
   "scannerScreen": {
229
   "scannerScreen": {
230
+    "errorPermission": "Scanotron 3000 needs access to the camera in order to scan QR codes.\nThe camera will never be used for any other purpose.",
231
+    "buttonPermission": "Grant camera access",
230
     "errorTitle": "QR code invalid",
232
     "errorTitle": "QR code invalid",
231
-    "errorMessage": "The QR code scanned could not be recognised, please make sure it is valid."
233
+    "errorMessage": "The QR code scanned could not be recognised, please make sure it is valid.",
234
+    "helpButton": "What can I scan?",
235
+    "helpTitle": "How to use Scanotron 3000",
236
+    "helpMessage": "Find Campus QR codes posted by clubs and events, scan them and get instant access to detailed information!"
232
   },
237
   },
233
   "loginScreen": {
238
   "loginScreen": {
234
     "title": "Amicale account",
239
     "title": "Amicale account",

+ 6
- 1
translations/fr.json View File

227
     "membershipNotPayed": "Non payée"
227
     "membershipNotPayed": "Non payée"
228
   },
228
   },
229
   "scannerScreen": {
229
   "scannerScreen": {
230
+    "errorPermission": "Scanotron 3000 a besoin d'accéder à la caméra pour scanner des QR codes.\nLa caméra ne sera jamais utilisée autrement.",
231
+    "buttonPermission": "Autoriser l'accès à la caméra",
230
     "errorTitle": "QR code invalide",
232
     "errorTitle": "QR code invalide",
231
-    "errorMessage": "Le QR code scannée n'a pas été reconnu. Merci de vérifier sa validité."
233
+    "errorMessage": "Le QR code scannée n'a pas été reconnu. Merci de vérifier sa validité.",
234
+    "helpButton": "Quoi scanner ?",
235
+    "helpTitle": "Comment utiliser Scanotron 3000",
236
+    "helpMessage": "Trouvez des QR codes Campus affichés par des clubs ou des respo d'évenements, scannez les et accédez à des informations détaillées !"
232
   },
237
   },
233
   "loginScreen": {
238
   "loginScreen": {
234
     "title": "Compte Amicale",
239
     "title": "Compte Amicale",

Loading…
Cancel
Save