Browse Source

Improved scanner information display

Arnaud Vergnet 1 year ago
parent
commit
53daa6671a

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

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

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

@@ -2,7 +2,7 @@
2 2
 
3 3
 import * as React from 'react';
4 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 6
 import {BarCodeScanner} from "expo-barcode-scanner";
7 7
 import {Camera} from 'expo-camera';
8 8
 import URLHandler from "../utils/URLHandler";
@@ -15,6 +15,8 @@ type State = {
15 15
     hasPermission: boolean,
16 16
     scanned: boolean,
17 17
     dialogVisible: boolean,
18
+    dialogTitle: string,
19
+    dialogMessage: string,
18 20
 };
19 21
 
20 22
 class ScannerScreen extends React.Component<Props, State> {
@@ -23,6 +25,8 @@ class ScannerScreen extends React.Component<Props, State> {
23 25
         hasPermission: false,
24 26
         scanned: false,
25 27
         dialogVisible: false,
28
+        dialogTitle: "",
29
+        dialogMessage: "",
26 30
     };
27 31
 
28 32
     constructor() {
@@ -30,22 +34,39 @@ class ScannerScreen extends React.Component<Props, State> {
30 34
     }
31 35
 
32 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 44
     handleCodeScanned = ({type, data}) => {
40
-        this.setState({scanned: true});
45
+
41 46
         if (!URLHandler.isUrlValid(data))
42 47
             this.showErrorDialog();
43
-        else
48
+        else {
49
+            this.setState({scanned: true});
44 50
             Linking.openURL(data);
51
+        }
45 52
     };
46 53
 
47 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 72
     getOverlay() {
@@ -78,8 +99,22 @@ class ScannerScreen extends React.Component<Props, State> {
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 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 120
     onDialogDismiss = () => this.setState({
@@ -90,12 +125,6 @@ class ScannerScreen extends React.Component<Props, State> {
90 125
     getScanner() {
91 126
         return (
92 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 128
                 <Camera
100 129
                     onBarCodeScanned={this.state.scanned ? undefined : this.handleCodeScanned}
101 130
                     type={Camera.Constants.Type.back}
@@ -118,6 +147,20 @@ class ScannerScreen extends React.Component<Props, State> {
118 147
                     ? this.getScanner()
119 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 164
             </View>
122 165
         );
123 166
     }
@@ -167,6 +210,12 @@ const styles = StyleSheet.create({
167 210
         aspectRatio: 1,
168 211
         width: '100%',
169 212
     },
213
+    button: {
214
+        position: 'absolute',
215
+        bottom: 5,
216
+        width: '80%',
217
+        left: '10%'
218
+    },
170 219
     overlayTopLeft: {
171 220
         ...overlayBoxStyle,
172 221
         top: borderOffset,

+ 6
- 1
translations/en.json View File

@@ -227,8 +227,13 @@
227 227
     "membershipNotPayed": "Not payed"
228 228
   },
229 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 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 238
   "loginScreen": {
234 239
     "title": "Amicale account",

+ 6
- 1
translations/fr.json View File

@@ -227,8 +227,13 @@
227 227
     "membershipNotPayed": "Non payée"
228 228
   },
229 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 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 238
   "loginScreen": {
234 239
     "title": "Compte Amicale",

Loading…
Cancel
Save