|
@@ -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
|
}
|