Browse Source

Use React navigation header

keplyx 4 years ago
parent
commit
79eaefab88

+ 0
- 83
components/BaseContainer.js View File

1
-// @flow
2
-
3
-import * as React from 'react';
4
-import {Container} from "native-base";
5
-import CustomHeader from "./CustomHeader";
6
-import {MaterialCommunityIcons} from "@expo/vector-icons";
7
-import {Platform, View} from "react-native";
8
-import ThemeManager from "../utils/ThemeManager";
9
-import Touchable from "react-native-platform-touchable";
10
-
11
-
12
-type Props = {
13
-    navigation: Object,
14
-    headerTitle: string,
15
-    headerSubtitle: string,
16
-    headerRightButton: React.Node,
17
-    children: React.Node,
18
-    hasTabs: boolean,
19
-    hasBackButton: boolean,
20
-    hasSideMenu: boolean,
21
-    enableRotation: boolean,
22
-    hideHeaderOnLandscape: boolean,
23
-}
24
-
25
-type State = {
26
-    isHeaderVisible: boolean
27
-}
28
-
29
-
30
-export default class BaseContainer extends React.Component<Props, State> {
31
-    static defaultProps = {
32
-        headerRightButton: <View/>,
33
-        hasTabs: false,
34
-        hasBackButton: false,
35
-        hasSideMenu: true,
36
-        enableRotation: false,
37
-        hideHeaderOnLandscape: false,
38
-        headerSubtitle: '',
39
-    };
40
-
41
-    state = {
42
-        isHeaderVisible: true,
43
-    };
44
-
45
-    onDrawerPress: Function;
46
-
47
-    constructor() {
48
-        super();
49
-        this.onDrawerPress = this.onDrawerPress.bind(this);
50
-    }
51
-
52
-    onDrawerPress() {
53
-        this.props.navigation.toggleDrawer();
54
-    }
55
-
56
-    render() {
57
-        // console.log("rendering BaseContainer");
58
-        return (
59
-            <Container>
60
-                {this.state.isHeaderVisible ?
61
-                    <CustomHeader
62
-                        navigation={this.props.navigation}
63
-                        title={this.props.headerTitle}
64
-                        subtitle={this.props.headerSubtitle}
65
-                        leftButton={
66
-                            <Touchable
67
-                                style={{padding: 6}}
68
-                                onPress={this.onDrawerPress}>
69
-                                <MaterialCommunityIcons
70
-                                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
71
-                                    size={26}
72
-                                    name="menu"/>
73
-                            </Touchable>
74
-                        }
75
-                        rightButton={this.props.headerRightButton}
76
-                        hasTabs={this.props.hasTabs}
77
-                        hasBackButton={this.props.hasBackButton}/>
78
-                    : <View/>}
79
-                {this.props.children}
80
-            </Container>
81
-        );
82
-    }
83
-}

+ 0
- 150
components/CustomHeader.js View File

1
-// @flow
2
-
3
-import * as React from "react";
4
-import {Body, Header, Input, Item, Left, Right, Subtitle, Title} from "native-base";
5
-import {Platform, StyleSheet, View} from "react-native";
6
-import {getStatusBarHeight} from "react-native-status-bar-height";
7
-import Touchable from 'react-native-platform-touchable';
8
-import ThemeManager from "../utils/ThemeManager";
9
-import {MaterialCommunityIcons} from "@expo/vector-icons";
10
-import i18n from "i18n-js";
11
-
12
-type Props = {
13
-    hasBackButton: boolean,
14
-    hasSearchField: boolean,
15
-    searchCallback: Function,
16
-    shouldFocusSearchBar: boolean,
17
-    leftButton: React.Node,
18
-    rightButton: React.Node,
19
-    title: string,
20
-    subtitle: string,
21
-    navigation: Object,
22
-    hasTabs: boolean,
23
-};
24
-
25
-/**
26
- * Custom component defining a header using native base
27
- *
28
- * @prop hasBackButton {boolean} Whether to show a back button or a burger menu. Use burger if unspecified
29
- * @prop rightMenu {React.Node} Element to place at the right of the header. Use nothing if unspecified
30
- * @prop title {string} This header title
31
- * @prop navigation {Object} The navigation object from react navigation
32
- */
33
-export default class CustomHeader extends React.Component<Props> {
34
-    static defaultProps = {
35
-        hasBackButton: false,
36
-        hasSearchField: false,
37
-        searchCallback: null,
38
-        shouldFocusSearchBar: false,
39
-        title: '',
40
-        subtitle: '',
41
-        leftButton: <View/>,
42
-        rightButton: <View/>,
43
-        hasTabs: false,
44
-    };
45
-
46
-    onPressBack: Function;
47
-
48
-    constructor() {
49
-        super();
50
-        this.onPressBack = this.onPressBack.bind(this);
51
-    }
52
-
53
-    shouldComponentUpdate(nextProps: Props): boolean {
54
-        return nextProps.title !== this.props.title ||
55
-            nextProps.subtitle !== this.props.subtitle ||
56
-            nextProps.hasBackButton !== this.props.hasBackButton ||
57
-            nextProps.hasSearchField !== this.props.hasSearchField ||
58
-            nextProps.shouldFocusSearchBar !== this.props.shouldFocusSearchBar ||
59
-            nextProps.hasTabs !== this.props.hasTabs ||
60
-            nextProps.rightButton !== this.props.rightButton ||
61
-            nextProps.leftButton !== this.props.leftButton;
62
-    }
63
-
64
-    componentDidMount() {
65
-        if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) {
66
-            // does not work if called too early for some reason...
67
-            setTimeout(this.refs.searchInput._root.focus, 500);
68
-        }
69
-    }
70
-
71
-    getSearchBar() {
72
-        return (
73
-            <Body>
74
-                <Item
75
-                    style={{
76
-                        width: '100%',
77
-                        marginBottom: 7
78
-                    }}>
79
-                    <MaterialCommunityIcons
80
-                        name={'magnify'}
81
-                        size={26}
82
-                        color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
83
-                    <Input
84
-                        ref="searchInput"
85
-                        placeholder={i18n.t('proximoScreen.search')}
86
-                        placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
87
-                        onChangeText={this.props.searchCallback}/>
88
-                </Item>
89
-            </Body>
90
-        );
91
-    }
92
-
93
-    getHeaderTitle() {
94
-        return (
95
-            <Body>
96
-                <Title style={{
97
-                    color: ThemeManager.getCurrentThemeVariables().toolbarTextColor
98
-                }}>
99
-                    {this.props.title}
100
-                </Title>
101
-                {this.props.subtitle !== '' ? <Subtitle>{this.props.subtitle}</Subtitle> : null}
102
-            </Body>
103
-        );
104
-    }
105
-
106
-
107
-    onPressBack() {
108
-        this.props.navigation.goBack();
109
-    }
110
-
111
-    render() {
112
-        // console.log("rendering CustomHeader");
113
-        let button;
114
-        // Does the app have a back button or a burger menu ?
115
-        if (this.props.hasBackButton)
116
-            button =
117
-                <Touchable
118
-                    style={{padding: 6}}
119
-                    onPress={this.onPressBack}>
120
-                    <MaterialCommunityIcons
121
-                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
122
-                        name={Platform.OS === 'ios' ? 'chevron-left' : "arrow-left"}
123
-                        size={26}/>
124
-                </Touchable>;
125
-        else
126
-            button = this.props.leftButton;
127
-
128
-        return (
129
-            <Header style={styles.header}
130
-                    hasTabs={this.props.hasTabs}>
131
-                <Left style={{flex: 0}}>
132
-                    {button}
133
-                </Left>
134
-                {this.props.hasSearchField ?
135
-                    this.getSearchBar() :
136
-                    this.getHeaderTitle()}
137
-                <Right style={{flex: this.props.hasSearchField ? 0 : 1}}>
138
-                    {this.props.rightButton}
139
-                </Right>
140
-            </Header>);
141
-    }
142
-};
143
-
144
-// Fix header in status bar on Android
145
-const styles = StyleSheet.create({
146
-    header: {
147
-        paddingTop: getStatusBarHeight(),
148
-        height: 54 + getStatusBarHeight(),
149
-    },
150
-});

+ 36
- 26
components/Sidebar.js View File

41
         // Dataset used to render the drawer
41
         // Dataset used to render the drawer
42
         this.dataSet = [
42
         this.dataSet = [
43
             {
43
             {
44
+                name: "Home",
45
+                route: "Main",
46
+                icon: "home",
47
+            },
48
+            {
49
+                name: i18n.t('sidenav.divider2'),
50
+                route: "Divider2"
51
+            },
52
+            {
53
+                name: i18n.t('screens.menuSelf'),
54
+                route: "SelfMenuScreen",
55
+                icon: "silverware-fork-knife",
56
+            },
57
+            {
58
+                name: i18n.t('screens.availableRooms'),
59
+                route: "AvailableRoomScreen",
60
+                icon: "calendar-check",
61
+            },
62
+            {
63
+                name: 'Bib',
64
+                route: "BibScreen",
65
+                icon: "book",
66
+            },
67
+            {
68
+                name: i18n.t('screens.bluemind'),
69
+                route: "BlueMindScreen",
70
+                link: "https://etud-mel.insa-toulouse.fr/webmail/",
71
+                icon: "email",
72
+            },
73
+            {
74
+                name: i18n.t('screens.ent'),
75
+                route: "EntScreen",
76
+                link: "https://ent.insa-toulouse.fr/",
77
+                icon: "notebook",
78
+            },
79
+            {
44
                 name: i18n.t('sidenav.divider1'),
80
                 name: i18n.t('sidenav.divider1'),
45
                 route: "Divider1"
81
                 route: "Divider1"
46
             },
82
             },
69
                 icon: "school",
105
                 icon: "school",
70
             },
106
             },
71
             {
107
             {
72
-                name: i18n.t('sidenav.divider2'),
73
-                route: "Divider2"
74
-            },
75
-            {
76
-                name: i18n.t('screens.bluemind'),
77
-                route: "BlueMindScreen",
78
-                link: "https://etud-mel.insa-toulouse.fr/webmail/",
79
-                icon: "email",
80
-            },
81
-            {
82
-                name: i18n.t('screens.ent'),
83
-                route: "EntScreen",
84
-                link: "https://ent.insa-toulouse.fr/",
85
-                icon: "notebook",
86
-            },
87
-            {
88
-                name: i18n.t('screens.availableRooms'),
89
-                route: "AvailableRoomScreen",
90
-                icon: "calendar-check",
91
-            },
92
-            {
93
-                name: i18n.t('screens.menuSelf'),
94
-                route: "SelfMenuScreen",
95
-                icon: "silverware-fork-knife",
96
-            },
97
-            {
98
                 name: i18n.t('sidenav.divider3'),
108
                 name: i18n.t('sidenav.divider3'),
99
                 route: "Divider3"
109
                 route: "Divider3"
100
             },
110
             },

+ 13
- 39
components/WebViewScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Linking, Platform, View} from 'react-native';
5
-import {Body, Footer, Left, Right, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base';
4
+import {Platform, View} from 'react-native';
5
+import {Container, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base';
6
 import WebView from "react-native-webview";
6
 import WebView from "react-native-webview";
7
 import Touchable from "react-native-platform-touchable";
7
 import Touchable from "react-native-platform-touchable";
8
 import {MaterialCommunityIcons} from "@expo/vector-icons";
8
 import {MaterialCommunityIcons} from "@expo/vector-icons";
9
 import ThemeManager from "../utils/ThemeManager";
9
 import ThemeManager from "../utils/ThemeManager";
10
-import BaseContainer from "../components/BaseContainer";
11
 
10
 
12
 type Props = {
11
 type Props = {
13
     navigation: Object,
12
     navigation: Object,
50
         this.onOpenWebLink = this.onOpenWebLink.bind(this);
49
         this.onOpenWebLink = this.onOpenWebLink.bind(this);
51
     }
50
     }
52
 
51
 
53
-    openWebLink(url: string) {
54
-        Linking.openURL(url).catch((err) => console.error('Error opening link', err));
52
+    componentDidMount() {
53
+        const rightButton = this.getRefreshButton.bind(this);
54
+        this.props.navigation.setOptions({
55
+            headerRight: rightButton,
56
+        });
55
     }
57
     }
56
 
58
 
57
     getHeaderButton(clickAction: Function, icon: string) {
59
     getHeaderButton(clickAction: Function, icon: string) {
69
 
71
 
70
     getRefreshButton() {
72
     getRefreshButton() {
71
         return (
73
         return (
72
-            <View style={{flexDirection: 'row'}}>
74
+            <View style={{
75
+                flexDirection: 'row',
76
+                marginRight: 10
77
+            }}>
73
                 {this.getHeaderButton(this.onRefreshClicked, 'refresh')}
78
                 {this.getHeaderButton(this.onRefreshClicked, 'refresh')}
74
             </View>
79
             </View>
75
         );
80
         );
165
         const nav = this.props.navigation;
170
         const nav = this.props.navigation;
166
         this.webviewArray = [];
171
         this.webviewArray = [];
167
         return (
172
         return (
168
-            <BaseContainer
169
-                navigation={nav}
170
-                headerTitle={this.props.headerTitle}
171
-                headerRightButton={this.getRefreshButton()}
172
-                hasBackButton={this.props.hasHeaderBackButton}
173
-                hasSideMenu={this.props.hasSideMenu}
174
-                enableRotation={true}
175
-                hideHeaderOnLandscape={true}
176
-                hasTabs={this.props.data.length > 1}>
173
+            <Container>
177
                 {this.props.data.length === 1 ?
174
                 {this.props.data.length === 1 ?
178
                     this.getWebview(this.props.data[0]) :
175
                     this.getWebview(this.props.data[0]) :
179
                     <Tabs
176
                     <Tabs
190
                     >
187
                     >
191
                         {this.getTabbedWebview()}
188
                         {this.getTabbedWebview()}
192
                     </Tabs>}
189
                     </Tabs>}
193
-                {this.props.hasFooter && this.props.data.length === 1 ?
194
-                    <Footer>
195
-                        <Left style={{
196
-                            paddingLeft: 6,
197
-                        }}>
198
-                            {this.getHeaderButton(this.onOpenWebLink, 'open-in-new')}
199
-                        </Left>
200
-                        <Body/>
201
-                        <Right style={{
202
-                            flexDirection: 'row',
203
-                            alignItems: 'flex-end',
204
-                            paddingRight: 6
205
-                        }}>
206
-                            <View style={{
207
-                                flexDirection: 'row',
208
-                                marginRight: 0,
209
-                                marginLeft: 'auto'
210
-                            }}>
211
-                                {this.getHeaderButton(this.onGoBackWebview, 'chevron-left')}
212
-                                {this.getHeaderButton(this.onGoForwardWebview, 'chevron-right')}
213
-                            </View>
214
-                        </Right>
215
-                    </Footer> : <View/>}
216
-            </BaseContainer>
190
+            </Container>
217
         );
191
         );
218
     }
192
     }
219
 }
193
 }

+ 164
- 37
navigation/DrawerNavigator.js View File

8
 import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
8
 import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
9
 import SelfMenuScreen from '../screens/SelfMenuScreen';
9
 import SelfMenuScreen from '../screens/SelfMenuScreen';
10
 import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
10
 import AvailableRoomScreen from "../screens/Websites/AvailableRoomScreen";
11
+import BibScreen from "../screens/Websites/BibScreen";
11
 import DebugScreen from '../screens/DebugScreen';
12
 import DebugScreen from '../screens/DebugScreen';
12
 import Sidebar from "../components/Sidebar";
13
 import Sidebar from "../components/Sidebar";
13
 import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
14
 import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
14
 import PerfHomeScreen from '../screens/PerfHomeScreen';
15
 import PerfHomeScreen from '../screens/PerfHomeScreen';
16
+import {Platform, StyleSheet, View} from "react-native";
17
+import ThemeManager from "../utils/ThemeManager";
18
+import Touchable from "react-native-platform-touchable";
19
+import {MaterialCommunityIcons} from "@expo/vector-icons";
20
+
21
+
22
+const styles = StyleSheet.create({
23
+    header: {
24
+        backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
25
+    },
26
+    headerTitle: {
27
+        color: "#ffffff",
28
+    },
29
+});
30
+
31
+const defaultScreenOptions = {
32
+    headerTintColor: 'white',
33
+    headerStyle: styles.header,
34
+    gestureEnabled: true,
35
+    cardOverlayEnabled: true,
36
+    ...TransitionPresets.SlideFromRightIOS,
37
+};
38
+
39
+function getDrawerButton(navigation: Object) {
40
+    return (
41
+        <View
42
+            style={{
43
+                flexDirection: 'row',
44
+                marginLeft: 10
45
+            }}>
46
+            <Touchable
47
+                style={{padding: 6}}
48
+                onPress={navigation.openDrawer}>
49
+                <MaterialCommunityIcons
50
+                    name="menu"
51
+                    size={26}
52
+                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
53
+            </Touchable>
54
+        </View>
55
+    );
56
+}
15
 
57
 
16
 const AboutStack = createStackNavigator();
58
 const AboutStack = createStackNavigator();
17
 
59
 
19
     return (
61
     return (
20
         <AboutStack.Navigator
62
         <AboutStack.Navigator
21
             initialRouteName="AboutScreen"
63
             initialRouteName="AboutScreen"
22
-            mode='card'
23
-            headerMode="none"
24
-            screenOptions={{
25
-                gestureEnabled: true,
26
-                cardOverlayEnabled: true,
27
-                ...TransitionPresets.SlideFromRightIOS,
28
-            }}
64
+            headerMode="float"
65
+            screenOptions={defaultScreenOptions}
29
         >
66
         >
30
             <AboutStack.Screen
67
             <AboutStack.Screen
31
                 name="AboutScreen"
68
                 name="AboutScreen"
32
                 component={AboutScreen}
69
                 component={AboutScreen}
70
+                options={({navigation}) => {
71
+                    const openDrawer = getDrawerButton.bind(this, navigation);
72
+                    return {
73
+                        title: 'About',
74
+                        headerLeft: openDrawer
75
+                    };
76
+                }}
33
             />
77
             />
34
             <AboutStack.Screen
78
             <AboutStack.Screen
35
                 name="AboutDependenciesScreen"
79
                 name="AboutDependenciesScreen"
36
                 component={AboutDependenciesScreen}
80
                 component={AboutDependenciesScreen}
81
+                options={{
82
+                    title: 'Dependencies'
83
+                }}
37
             />
84
             />
38
             <AboutStack.Screen
85
             <AboutStack.Screen
39
                 name="DebugScreen"
86
                 name="DebugScreen"
40
                 component={DebugScreen}
87
                 component={DebugScreen}
88
+                options={{
89
+                    title: 'Debug'
90
+                }}
41
             />
91
             />
42
         </AboutStack.Navigator>
92
         </AboutStack.Navigator>
43
     );
93
     );
44
 }
94
 }
45
 
95
 
96
+const SettingsStack = createStackNavigator();
97
+
98
+function SettingsStackComponent() {
99
+    return (
100
+        <SettingsStack.Navigator
101
+            initialRouteName="SettingsScreen"
102
+            headerMode="float"
103
+            screenOptions={defaultScreenOptions}
104
+        >
105
+            <SettingsStack.Screen
106
+                name="SettingsScreen"
107
+                component={SettingsScreen}
108
+                options={({navigation}) => {
109
+                    const openDrawer = getDrawerButton.bind(this, navigation);
110
+                    return {
111
+                        title: 'Settings',
112
+                        headerLeft: openDrawer
113
+                    };
114
+                }}
115
+            />
116
+        </SettingsStack.Navigator>
117
+    );
118
+}
119
+
120
+const SelfMenuStack = createStackNavigator();
121
+
122
+function SelfMenuStackComponent() {
123
+    return (
124
+        <SelfMenuStack.Navigator
125
+            initialRouteName="SelfMenuScreen"
126
+            headerMode="float"
127
+            screenOptions={defaultScreenOptions}
128
+        >
129
+            <SelfMenuStack.Screen
130
+                name="SelfMenuScreen"
131
+                component={SelfMenuScreen}
132
+                options={({navigation}) => {
133
+                    const openDrawer = getDrawerButton.bind(this, navigation);
134
+                    return {
135
+                        title: 'Menu RU',
136
+                        headerLeft: openDrawer
137
+                    };
138
+                }}
139
+            />
140
+        </SelfMenuStack.Navigator>
141
+    );
142
+}
143
+
144
+const AvailableRoomStack = createStackNavigator();
145
+
146
+function AvailableRoomStackComponent() {
147
+    return (
148
+        <AvailableRoomStack.Navigator
149
+            initialRouteName="AvailableRoomScreen"
150
+            headerMode="float"
151
+            screenOptions={defaultScreenOptions}
152
+        >
153
+            <AvailableRoomStack.Screen
154
+                name="AvailableRoomScreen"
155
+                component={AvailableRoomScreen}
156
+                options={({navigation}) => {
157
+                    const openDrawer = getDrawerButton.bind(this, navigation);
158
+                    return {
159
+                        title: 'Available Rooms',
160
+                        headerLeft: openDrawer
161
+                    };
162
+                }}
163
+            />
164
+        </AvailableRoomStack.Navigator>
165
+    );
166
+}
167
+
168
+const BibStack = createStackNavigator();
169
+
170
+function BibStackComponent() {
171
+    return (
172
+        <BibStack.Navigator
173
+            initialRouteName="BibScreen"
174
+            headerMode="float"
175
+            screenOptions={defaultScreenOptions}
176
+        >
177
+            <BibStack.Screen
178
+                name="BibScreen"
179
+                component={BibScreen}
180
+                options={({navigation}) => {
181
+                    const openDrawer = getDrawerButton.bind(this, navigation);
182
+                    return {
183
+                        title: 'Bib',
184
+                        headerLeft: openDrawer
185
+                    };
186
+                }}
187
+            />
188
+        </BibStack.Navigator>
189
+    );
190
+}
191
+
46
 const Drawer = createDrawerNavigator();
192
 const Drawer = createDrawerNavigator();
47
 
193
 
48
 function getDrawerContent(nav) {
194
 function getDrawerContent(nav) {
53
     return (
199
     return (
54
         <Drawer.Navigator
200
         <Drawer.Navigator
55
             initialRouteName={'Main'}
201
             initialRouteName={'Main'}
56
-            mode='card'
202
+            headerMode={'float'}
203
+            backBehavior={'initialRoute'}
204
+            drawerType={'back'}
57
             drawerContent={props => getDrawerContent(props.navigation)}
205
             drawerContent={props => getDrawerContent(props.navigation)}
58
-            screenOptions={{
59
-                gestureEnabled: true,
60
-                cardOverlayEnabled: true,
61
-                ...TransitionPresets.SlideFromRightIOS,
62
-            }}
206
+            screenOptions={defaultScreenOptions}
63
         >
207
         >
64
             <Drawer.Screen
208
             <Drawer.Screen
65
                 name="Main"
209
                 name="Main"
68
             </Drawer.Screen>
212
             </Drawer.Screen>
69
             <Drawer.Screen
213
             <Drawer.Screen
70
                 name="SettingsScreen"
214
                 name="SettingsScreen"
71
-                component={SettingsScreen}
215
+                component={SettingsStackComponent}
72
             />
216
             />
73
             <Drawer.Screen
217
             <Drawer.Screen
74
                 name="AboutScreen"
218
                 name="AboutScreen"
76
             />
220
             />
77
             <Drawer.Screen
221
             <Drawer.Screen
78
                 name="SelfMenuScreen"
222
                 name="SelfMenuScreen"
79
-                component={SelfMenuScreen}
223
+                component={SelfMenuStackComponent}
80
             />
224
             />
81
             <Drawer.Screen
225
             <Drawer.Screen
82
                 name="AvailableRoomScreen"
226
                 name="AvailableRoomScreen"
83
-                component={AvailableRoomScreen}
227
+                component={AvailableRoomStackComponent}
84
             />
228
             />
85
-        </Drawer.Navigator>
86
-    );
87
-}
88
-
89
-const basicStack = createStackNavigator();
90
-
91
-function DrawerNavigator1() {
92
-    return (
93
-        <basicStack.Navigator
94
-            initialRouteName={'Main'}
95
-            mode='card'
96
-            screenOptions={{
97
-                gestureEnabled: true,
98
-                cardOverlayEnabled: true,
99
-                ...TransitionPresets.SlideFromRightIOS,
100
-            }}
101
-        >
102
-            <basicStack.Screen
103
-                name="Main"
104
-                component={TabNavigator}
229
+            <Drawer.Screen
230
+                name="BibScreen"
231
+                component={BibStackComponent}
105
             />
232
             />
106
-        </basicStack.Navigator>
233
+        </Drawer.Navigator>
107
     );
234
     );
108
 }
235
 }

+ 99
- 33
navigation/MainTabNavigator.js View File

14
 import {MaterialCommunityIcons} from "@expo/vector-icons";
14
 import {MaterialCommunityIcons} from "@expo/vector-icons";
15
 import ThemeManager from "../utils/ThemeManager";
15
 import ThemeManager from "../utils/ThemeManager";
16
 import AsyncStorageManager from "../utils/AsyncStorageManager";
16
 import AsyncStorageManager from "../utils/AsyncStorageManager";
17
-import {StyleSheet, View} from "react-native";
17
+import {Platform, StyleSheet, View} from "react-native";
18
 import Touchable from "react-native-platform-touchable";
18
 import Touchable from "react-native-platform-touchable";
19
 
19
 
20
 const TAB_ICONS = {
20
 const TAB_ICONS = {
25
     Planex: 'timetable',
25
     Planex: 'timetable',
26
 };
26
 };
27
 
27
 
28
-const ProximoStack = createStackNavigator();
29
-
30
 const styles = StyleSheet.create({
28
 const styles = StyleSheet.create({
31
     header: {
29
     header: {
32
         backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
30
         backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
36
     },
34
     },
37
 });
35
 });
38
 
36
 
37
+const defaultScreenOptions = {
38
+    headerTintColor: 'white',
39
+    headerStyle: styles.header,
40
+    gestureEnabled: true,
41
+    cardOverlayEnabled: true,
42
+    ...TransitionPresets.SlideFromRightIOS,
43
+};
44
+
45
+function getDrawerButton(navigation: Object) {
46
+    return (
47
+        <View
48
+            style={{
49
+                flexDirection: 'row',
50
+                marginLeft: 10
51
+            }}>
52
+            <Touchable
53
+                style={{padding: 6}}
54
+                onPress={navigation.openDrawer}>
55
+                <MaterialCommunityIcons
56
+                    name="menu"
57
+                    size={26}
58
+                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
59
+            </Touchable>
60
+        </View>
61
+    );
62
+}
63
+
64
+const ProximoStack = createStackNavigator();
39
 
65
 
40
 function ProximoStackComponent() {
66
 function ProximoStackComponent() {
41
     return (
67
     return (
42
         <ProximoStack.Navigator
68
         <ProximoStack.Navigator
43
             initialRouteName="ProximoMainScreen"
69
             initialRouteName="ProximoMainScreen"
44
             headerMode="float"
70
             headerMode="float"
45
-            screenOptions={{
46
-                headerTintColor: 'white',
47
-                headerStyle: styles.header,
48
-                gestureEnabled: true,
49
-                cardOverlayEnabled: true,
50
-                ...TransitionPresets.SlideFromRightIOS,
51
-            }}
71
+            screenOptions={defaultScreenOptions}
52
         >
72
         >
53
             <ProximoStack.Screen
73
             <ProximoStack.Screen
54
                 name="ProximoMainScreen"
74
                 name="ProximoMainScreen"
55
-                options={{
56
-                    title: 'Proximo',
75
+                options={({navigation}) => {
76
+                    const openDrawer = getDrawerButton.bind(this, navigation);
77
+                    return {
78
+                        title: 'Proximo',
79
+                        headerLeft: openDrawer
80
+                    };
57
                 }}
81
                 }}
58
                 component={ProximoMainScreen}
82
                 component={ProximoMainScreen}
59
             />
83
             />
82
     return (
106
     return (
83
         <ProxiwashStack.Navigator
107
         <ProxiwashStack.Navigator
84
             initialRouteName="ProxiwashScreen"
108
             initialRouteName="ProxiwashScreen"
85
-            mode='card'
86
-            headerMode="none"
87
-            screenOptions={{
88
-                gestureEnabled: true,
89
-                cardOverlayEnabled: true,
90
-                ...TransitionPresets.ModalSlideFromBottomIOS,
91
-            }}
109
+            headerMode='float'
110
+            screenOptions={defaultScreenOptions}
92
         >
111
         >
93
             <ProxiwashStack.Screen
112
             <ProxiwashStack.Screen
94
                 name="ProxiwashScreen"
113
                 name="ProxiwashScreen"
95
                 component={ProxiwashScreen}
114
                 component={ProxiwashScreen}
115
+                options={({navigation}) => {
116
+                    const openDrawer = getDrawerButton.bind(this, navigation);
117
+                    return {
118
+                        title: 'Proxiwash',
119
+                        headerLeft: openDrawer
120
+                    };
121
+                }}
96
             />
122
             />
97
             <ProxiwashStack.Screen
123
             <ProxiwashStack.Screen
98
                 name="ProxiwashAboutScreen"
124
                 name="ProxiwashAboutScreen"
99
                 component={ProxiwashAboutScreen}
125
                 component={ProxiwashAboutScreen}
126
+                options={{
127
+                    title: 'Proxiwash',
128
+                    ...TransitionPresets.ModalSlideFromBottomIOS,
129
+                }}
100
             />
130
             />
101
         </ProxiwashStack.Navigator>
131
         </ProxiwashStack.Navigator>
102
     );
132
     );
108
     return (
138
     return (
109
         <PlanningStack.Navigator
139
         <PlanningStack.Navigator
110
             initialRouteName="PlanningScreen"
140
             initialRouteName="PlanningScreen"
111
-            mode='card'
112
-            headerMode="none"
113
-            screenOptions={{
114
-                gestureEnabled: true,
115
-                cardOverlayEnabled: true,
116
-                ...TransitionPresets.ModalSlideFromBottomIOS,
117
-            }}
141
+            headerMode='float'
142
+            screenOptions={defaultScreenOptions}
118
         >
143
         >
119
             <PlanningStack.Screen
144
             <PlanningStack.Screen
120
                 name="PlanningScreen"
145
                 name="PlanningScreen"
121
                 component={PlanningScreen}
146
                 component={PlanningScreen}
147
+                options={({navigation}) => {
148
+                    const openDrawer = getDrawerButton.bind(this, navigation);
149
+                    return {
150
+                        title: 'Planning',
151
+                        headerLeft: openDrawer
152
+                    };
153
+                }}
122
             />
154
             />
123
             <PlanningStack.Screen
155
             <PlanningStack.Screen
124
                 name="PlanningDisplayScreen"
156
                 name="PlanningDisplayScreen"
125
                 component={PlanningDisplayScreen}
157
                 component={PlanningDisplayScreen}
158
+                options={{
159
+                    title: 'Details',
160
+                    ...TransitionPresets.ModalSlideFromBottomIOS,
161
+                }}
126
             />
162
             />
127
         </PlanningStack.Navigator>
163
         </PlanningStack.Navigator>
128
     );
164
     );
134
     return (
170
     return (
135
         <HomeStack.Navigator
171
         <HomeStack.Navigator
136
             initialRouteName="HomeScreen"
172
             initialRouteName="HomeScreen"
137
-            mode='card'
138
             headerMode="float"
173
             headerMode="float"
139
-            screenOptions={{
140
-                gestureEnabled: true,
141
-                cardOverlayEnabled: true,
142
-                ...TransitionPresets.ModalSlideFromBottomIOS,
143
-            }}
174
+            screenOptions={defaultScreenOptions}
144
         >
175
         >
145
             <HomeStack.Screen
176
             <HomeStack.Screen
146
                 name="HomeScreen"
177
                 name="HomeScreen"
147
                 component={HomeScreen}
178
                 component={HomeScreen}
179
+                options={({navigation}) => {
180
+                    const openDrawer = getDrawerButton.bind(this, navigation);
181
+                    return {
182
+                        title: 'Home',
183
+                        headerLeft: openDrawer
184
+                    };
185
+                }}
148
             />
186
             />
149
             <HomeStack.Screen
187
             <HomeStack.Screen
150
                 name="PlanningDisplayScreen"
188
                 name="PlanningDisplayScreen"
151
                 component={PlanningDisplayScreen}
189
                 component={PlanningDisplayScreen}
190
+                options={{
191
+                    title: 'Details',
192
+                    ...TransitionPresets.ModalSlideFromBottomIOS,
193
+                }}
152
             />
194
             />
153
         </HomeStack.Navigator>
195
         </HomeStack.Navigator>
154
     );
196
     );
155
 }
197
 }
156
 
198
 
199
+const PlanexStack = createStackNavigator();
200
+
201
+function PlanexStackComponent() {
202
+    return (
203
+        <PlanexStack.Navigator
204
+            initialRouteName="HomeScreen"
205
+            headerMode="float"
206
+            screenOptions={defaultScreenOptions}
207
+        >
208
+            <PlanexStack.Screen
209
+                name="PlanexScreen"
210
+                component={PlanexScreen}
211
+                options={({navigation}) => {
212
+                    const openDrawer = getDrawerButton.bind(this, navigation);
213
+                    return {
214
+                        title: 'Planex',
215
+                        headerLeft: openDrawer
216
+                    };
217
+                }}
218
+            />
219
+        </PlanexStack.Navigator>
220
+    );
221
+}
222
+
157
 const Tab = createMaterialBottomTabNavigator();
223
 const Tab = createMaterialBottomTabNavigator();
158
 
224
 
159
 export default function TabNavigator() {
225
 export default function TabNavigator() {
188
             />
254
             />
189
             <Tab.Screen
255
             <Tab.Screen
190
                 name="Planex"
256
                 name="Planex"
191
-                component={PlanexScreen}
257
+                component={PlanexStackComponent}
192
             />
258
             />
193
         </Tab.Navigator>
259
         </Tab.Navigator>
194
     );
260
     );

+ 21
- 25
screens/About/AboutDependenciesScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Body, Container, ListItem, Text} from 'native-base';
5
-import CustomHeader from "../../components/CustomHeader";
4
+import {Body, ListItem, Text} from 'native-base';
6
 import {FlatList} from "react-native";
5
 import {FlatList} from "react-native";
7
-import i18n from "i18n-js";
6
+import packageJson from '../../package';
8
 
7
 
9
 function generateListFromObject(object) {
8
 function generateListFromObject(object) {
10
     let list = [];
9
     let list = [];
17
 }
16
 }
18
 
17
 
19
 type Props = {
18
 type Props = {
20
-    navigation: Object
19
+    navigation: Object,
20
+    route: Object
21
 }
21
 }
22
 
22
 
23
 /**
23
 /**
26
 export default class AboutDependenciesScreen extends React.Component<Props> {
26
 export default class AboutDependenciesScreen extends React.Component<Props> {
27
 
27
 
28
     render() {
28
     render() {
29
-        const nav = this.props.navigation;
30
-        const data = generateListFromObject(nav.getParam('data', {}));
29
+        const data = generateListFromObject(packageJson.dependencies);
31
         return (
30
         return (
32
-            <Container>
33
-                <CustomHeader hasBackButton={true} navigation={nav} title={i18n.t('aboutScreen.libs')}/>
34
-                <FlatList
35
-                    data={data}
36
-                    keyExtractor={(item) => item.name}
37
-                    style={{minHeight: 300, width: '100%'}}
38
-                    renderItem={({item}) =>
39
-                        <ListItem>
40
-                            <Body>
41
-                                <Text>
42
-                                    {item.name}
43
-                                </Text>
44
-                                <Text note>
45
-                                    {item.version.replace('^', '')}
46
-                                </Text>
47
-                            </Body>
48
-                        </ListItem>}
49
-                />
50
-            </Container>
31
+            <FlatList
32
+                data={data}
33
+                keyExtractor={(item) => item.name}
34
+                style={{minHeight: 300, width: '100%'}}
35
+                renderItem={({item}) =>
36
+                    <ListItem>
37
+                        <Body>
38
+                            <Text>
39
+                                {item.name}
40
+                            </Text>
41
+                            <Text note>
42
+                                {item.version.replace('^', '')}
43
+                            </Text>
44
+                        </Body>
45
+                    </ListItem>}
46
+            />
51
         );
47
         );
52
     }
48
     }
53
 }
49
 }

+ 4
- 8
screens/About/AboutScreen.js View File

2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
 import {FlatList, Linking, Platform, View} from 'react-native';
4
 import {FlatList, Linking, Platform, View} from 'react-native';
5
-import {Body, Button, Card, CardItem, Container, H1, Left, Right, Text, Thumbnail} from 'native-base';
6
-import CustomHeader from "../../components/CustomHeader";
5
+import {Body, Button, Card, CardItem, Content, H1, Left, Right, Text, Thumbnail} from 'native-base';
7
 import i18n from "i18n-js";
6
 import i18n from "i18n-js";
8
 import appJson from '../../app';
7
 import appJson from '../../app';
9
-import packageJson from '../../package';
10
 import {MaterialCommunityIcons} from "@expo/vector-icons";
8
 import {MaterialCommunityIcons} from "@expo/vector-icons";
11
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
9
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
12
 import {Modalize} from "react-native-modalize";
10
 import {Modalize} from "react-native-modalize";
169
             showChevron: true
167
             showChevron: true
170
         },
168
         },
171
         {
169
         {
172
-            onPressCallback: () => this.props.navigation.navigate('AboutDependenciesScreen', {data: packageJson.dependencies}),
170
+            onPressCallback: () => this.props.navigation.navigate('AboutDependenciesScreen'),
173
             icon: 'developer-board',
171
             icon: 'developer-board',
174
             text: i18n.t('aboutScreen.libs'),
172
             text: i18n.t('aboutScreen.libs'),
175
             showChevron: true
173
             showChevron: true
391
     }
389
     }
392
 
390
 
393
     render() {
391
     render() {
394
-        const nav = this.props.navigation;
395
         return (
392
         return (
396
-            <Container>
393
+            <Content padder>
397
                 {this.getBugReportModal()}
394
                 {this.getBugReportModal()}
398
-                <CustomHeader navigation={nav} title={i18n.t('screens.about')} hasBackButton={true}/>
399
                 <FlatList
395
                 <FlatList
400
                     style={{padding: 5}}
396
                     style={{padding: 5}}
401
                     data={this.dataOrder}
397
                     data={this.dataOrder}
403
                     keyExtractor={(item) => item.id}
399
                     keyExtractor={(item) => item.id}
404
                     renderItem={this.getMainCard}
400
                     renderItem={this.getMainCard}
405
                 />
401
                 />
406
-            </Container>
402
+            </Content>
407
         );
403
         );
408
     }
404
     }
409
 }
405
 }

+ 0
- 4
screens/DebugScreen.js View File

20
     Right,
20
     Right,
21
     Text
21
     Text
22
 } from "native-base";
22
 } from "native-base";
23
-import CustomHeader from "../components/CustomHeader";
24
 import ThemeManager from '../utils/ThemeManager';
23
 import ThemeManager from '../utils/ThemeManager';
25
-import i18n from "i18n-js";
26
 import {MaterialCommunityIcons} from "@expo/vector-icons";
24
 import {MaterialCommunityIcons} from "@expo/vector-icons";
27
 import {Alert, Clipboard, View} from "react-native";
25
 import {Alert, Clipboard, View} from "react-native";
28
 import AsyncStorageManager from "../utils/AsyncStorageManager";
26
 import AsyncStorageManager from "../utils/AsyncStorageManager";
150
     }
148
     }
151
 
149
 
152
     render() {
150
     render() {
153
-        const nav = this.props.navigation;
154
         return (
151
         return (
155
             <Container>
152
             <Container>
156
                 <Modalize
153
                 <Modalize
159
                     modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
156
                     modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
160
                     {this.getModalContent()}
157
                     {this.getModalContent()}
161
                 </Modalize>
158
                 </Modalize>
162
-                <CustomHeader navigation={nav} title={i18n.t('screens.debug')} hasBackButton={true}/>
163
                 <Content padder>
159
                 <Content padder>
164
                     <Card>
160
                     <Card>
165
                         <CardItem header>
161
                         <CardItem header>

+ 6
- 11
screens/HomeScreen.js View File

9
 import ThemeManager from "../utils/ThemeManager";
9
 import ThemeManager from "../utils/ThemeManager";
10
 import DashboardItem from "../components/DashboardItem";
10
 import DashboardItem from "../components/DashboardItem";
11
 import * as WebBrowser from 'expo-web-browser';
11
 import * as WebBrowser from 'expo-web-browser';
12
-import BaseContainer from "../components/BaseContainer";
13
 import WebSectionList from "../components/WebSectionList";
12
 import WebSectionList from "../components/WebSectionList";
14
 // import DATA from "../dashboard_data.json";
13
 // import DATA from "../dashboard_data.json";
15
 
14
 
571
     render() {
570
     render() {
572
         const nav = this.props.navigation;
571
         const nav = this.props.navigation;
573
         return (
572
         return (
574
-            <BaseContainer
573
+            <WebSectionList
574
+                createDataset={this.createDataset}
575
                 navigation={nav}
575
                 navigation={nav}
576
-                headerTitle={i18n.t('screens.home')}>
577
-                <WebSectionList
578
-                    createDataset={this.createDataset}
579
-                    navigation={nav}
580
-                    refreshTime={REFRESH_TIME}
581
-                    fetchUrl={DATA_URL}
582
-                    renderItem={this.getRenderItem}
583
-                    updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
584
-            </BaseContainer>
576
+                refreshTime={REFRESH_TIME}
577
+                fetchUrl={DATA_URL}
578
+                renderItem={this.getRenderItem}
579
+                updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
585
         );
580
         );
586
     }
581
     }
587
 }
582
 }

+ 10
- 14
screens/PlanningDisplayScreen.js View File

3
 import * as React from 'react';
3
 import * as React from 'react';
4
 import {Image} from 'react-native';
4
 import {Image} from 'react-native';
5
 import {Container, Content, H1, H3, View} from 'native-base';
5
 import {Container, Content, H1, H3, View} from 'native-base';
6
-import CustomHeader from "../components/CustomHeader";
7
 import ThemeManager from "../utils/ThemeManager";
6
 import ThemeManager from "../utils/ThemeManager";
8
 import HTML from "react-native-render-html";
7
 import HTML from "react-native-render-html";
9
 import {Linking} from "expo";
8
 import {Linking} from "expo";
11
 
10
 
12
 type Props = {
11
 type Props = {
13
     navigation: Object,
12
     navigation: Object,
13
+    route: Object
14
 };
14
 };
15
 
15
 
16
 function openWebLink(event, link) {
16
 function openWebLink(event, link) {
21
  * Class defining an about screen. This screen shows the user information about the app and it's author.
21
  * Class defining an about screen. This screen shows the user information about the app and it's author.
22
  */
22
  */
23
 export default class PlanningDisplayScreen extends React.Component<Props> {
23
 export default class PlanningDisplayScreen extends React.Component<Props> {
24
+
25
+    displayData = this.props.route.params['data'];
26
+
24
     render() {
27
     render() {
25
         // console.log("rendering planningDisplayScreen");
28
         // console.log("rendering planningDisplayScreen");
26
-        const nav = this.props.navigation;
27
-        const displayData = nav.getParam('data', []);
28
         return (
29
         return (
29
             <Container>
30
             <Container>
30
-                <CustomHeader
31
-                    navigation={nav}
32
-                    title={displayData.title}
33
-                    subtitle={PlanningEventManager.getFormattedTime(displayData)}
34
-                    hasBackButton={true}/>
35
                 <Content padder>
31
                 <Content padder>
36
                     <H1>
32
                     <H1>
37
-                        {displayData.title}
33
+                        {this.displayData.title}
38
                     </H1>
34
                     </H1>
39
                     <H3 style={{
35
                     <H3 style={{
40
                         marginTop: 10,
36
                         marginTop: 10,
41
                         color: ThemeManager.getCurrentThemeVariables().listNoteColor
37
                         color: ThemeManager.getCurrentThemeVariables().listNoteColor
42
                     }}>
38
                     }}>
43
-                        {PlanningEventManager.getFormattedTime(displayData)}
39
+                        {PlanningEventManager.getFormattedTime(this.displayData)}
44
                     </H3>
40
                     </H3>
45
-                    {displayData.logo !== null ?
41
+                    {this.displayData.logo !== null ?
46
                         <View style={{width: '100%', height: 300, marginTop: 20, marginBottom: 20}}>
42
                         <View style={{width: '100%', height: 300, marginTop: 20, marginBottom: 20}}>
47
                             <Image style={{flex: 1, resizeMode: "contain"}}
43
                             <Image style={{flex: 1, resizeMode: "contain"}}
48
-                                   source={{uri: displayData.logo}}/>
44
+                                   source={{uri: this.displayData.logo}}/>
49
                         </View>
45
                         </View>
50
                         : <View/>}
46
                         : <View/>}
51
 
47
 
52
-                    {displayData.description !== null ?
48
+                    {this.displayData.description !== null ?
53
                         // Surround description with div to allow text styling if the description is not html
49
                         // Surround description with div to allow text styling if the description is not html
54
-                        <HTML html={"<div>" + displayData.description + "</div>"}
50
+                        <HTML html={"<div>" + this.displayData.description + "</div>"}
55
                               tagsStyles={{
51
                               tagsStyles={{
56
                                   p: {
52
                                   p: {
57
                                       color: ThemeManager.getCurrentThemeVariables().textColor,
53
                                       color: ThemeManager.getCurrentThemeVariables().textColor,

+ 54
- 58
screens/PlanningScreen.js View File

5
 import {H3, Text, View} from 'native-base';
5
 import {H3, Text, View} from 'native-base';
6
 import i18n from "i18n-js";
6
 import i18n from "i18n-js";
7
 import ThemeManager from "../utils/ThemeManager";
7
 import ThemeManager from "../utils/ThemeManager";
8
-import BaseContainer from "../components/BaseContainer";
9
 import {Agenda, LocaleConfig} from 'react-native-calendars';
8
 import {Agenda, LocaleConfig} from 'react-native-calendars';
10
 import Touchable from 'react-native-platform-touchable';
9
 import Touchable from 'react-native-platform-touchable';
11
 import WebDataManager from "../utils/WebDataManager";
10
 import WebDataManager from "../utils/WebDataManager";
61
     onAgendaRef: Function;
60
     onAgendaRef: Function;
62
     onCalendarToggled: Function;
61
     onCalendarToggled: Function;
63
     onBackButtonPressAndroid: Function;
62
     onBackButtonPressAndroid: Function;
63
+    currentDate = this.getCurrentDate();
64
 
64
 
65
     constructor(props: any) {
65
     constructor(props: any) {
66
         super(props);
66
         super(props);
271
         this.setState({calendarShowing: isCalendarOpened});
271
         this.setState({calendarShowing: isCalendarOpened});
272
     }
272
     }
273
 
273
 
274
-    currentDate = this.getCurrentDate();
275
-
276
     render() {
274
     render() {
277
         // console.log("rendering PlanningScreen");
275
         // console.log("rendering PlanningScreen");
278
         return (
276
         return (
279
-            <BaseContainer navigation={this.props.navigation} headerTitle={i18n.t('screens.planning')}>
280
-                <Agenda
281
-                    // the list of items that have to be displayed in agenda. If you want to render item as empty date
282
-                    // the value of date key kas to be an empty array []. If there exists no value for date key it is
283
-                    // considered that the date in question is not yet loaded
284
-                    items={this.state.agendaItems}
285
-                    // initially selected day
286
-                    selected={this.currentDate}
287
-                    // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
288
-                    minDate={this.currentDate}
289
-                    // Max amount of months allowed to scroll to the past. Default = 50
290
-                    pastScrollRange={1}
291
-                    // Max amount of months allowed to scroll to the future. Default = 50
292
-                    futureScrollRange={AGENDA_MONTH_SPAN}
293
-                    // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
294
-                    onRefresh={this.onRefresh}
295
-                    // callback that fires when the calendar is opened or closed
296
-                    onCalendarToggled={this.onCalendarToggled}
297
-                    // Set this true while waiting for new data from a refresh
298
-                    refreshing={this.state.refreshing}
299
-                    renderItem={this.getRenderItem}
300
-                    renderEmptyDate={this.getRenderEmptyDate}
301
-                    rowHasChanged={this.rowHasChanged}
302
-                    // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
303
-                    firstDay={1}
304
-                    // ref to this agenda in order to handle back button event
305
-                    ref={this.onAgendaRef}
306
-                    // agenda theme
307
-                    theme={{
308
-                        backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
309
-                        calendarBackground: ThemeManager.getCurrentThemeVariables().containerBgColor,
310
-                        textSectionTitleColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
311
-                        selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
312
-                        selectedDayTextColor: '#ffffff',
313
-                        todayTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
314
-                        dayTextColor: ThemeManager.getCurrentThemeVariables().textColor,
315
-                        textDisabledColor: ThemeManager.getCurrentThemeVariables().textDisabledColor,
316
-                        dotColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
317
-                        selectedDotColor: '#ffffff',
318
-                        arrowColor: 'orange',
319
-                        monthTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
320
-                        indicatorColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
321
-                        textDayFontWeight: '300',
322
-                        textMonthFontWeight: 'bold',
323
-                        textDayHeaderFontWeight: '300',
324
-                        textDayFontSize: 16,
325
-                        textMonthFontSize: 16,
326
-                        textDayHeaderFontSize: 16,
327
-                        agendaDayTextColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
328
-                        agendaDayNumColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
329
-                        agendaTodayColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
330
-                        agendaKnobColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
331
-                    }}
332
-                />
333
-            </BaseContainer>
277
+            <Agenda
278
+                // the list of items that have to be displayed in agenda. If you want to render item as empty date
279
+                // the value of date key kas to be an empty array []. If there exists no value for date key it is
280
+                // considered that the date in question is not yet loaded
281
+                items={this.state.agendaItems}
282
+                // initially selected day
283
+                selected={this.currentDate}
284
+                // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
285
+                minDate={this.currentDate}
286
+                // Max amount of months allowed to scroll to the past. Default = 50
287
+                pastScrollRange={1}
288
+                // Max amount of months allowed to scroll to the future. Default = 50
289
+                futureScrollRange={AGENDA_MONTH_SPAN}
290
+                // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
291
+                onRefresh={this.onRefresh}
292
+                // callback that fires when the calendar is opened or closed
293
+                onCalendarToggled={this.onCalendarToggled}
294
+                // Set this true while waiting for new data from a refresh
295
+                refreshing={this.state.refreshing}
296
+                renderItem={this.getRenderItem}
297
+                renderEmptyDate={this.getRenderEmptyDate}
298
+                rowHasChanged={this.rowHasChanged}
299
+                // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
300
+                firstDay={1}
301
+                // ref to this agenda in order to handle back button event
302
+                ref={this.onAgendaRef}
303
+                // agenda theme
304
+                theme={{
305
+                    backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
306
+                    calendarBackground: ThemeManager.getCurrentThemeVariables().containerBgColor,
307
+                    textSectionTitleColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
308
+                    selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
309
+                    selectedDayTextColor: '#ffffff',
310
+                    todayTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
311
+                    dayTextColor: ThemeManager.getCurrentThemeVariables().textColor,
312
+                    textDisabledColor: ThemeManager.getCurrentThemeVariables().textDisabledColor,
313
+                    dotColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
314
+                    selectedDotColor: '#ffffff',
315
+                    arrowColor: 'orange',
316
+                    monthTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
317
+                    indicatorColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
318
+                    textDayFontWeight: '300',
319
+                    textMonthFontWeight: 'bold',
320
+                    textDayHeaderFontWeight: '300',
321
+                    textDayFontSize: 16,
322
+                    textMonthFontSize: 16,
323
+                    textDayHeaderFontSize: 16,
324
+                    agendaDayTextColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
325
+                    agendaDayNumColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
326
+                    agendaTodayColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
327
+                    agendaKnobColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
328
+                }}
329
+            />
334
         );
330
         );
335
     }
331
     }
336
 }
332
 }

+ 0
- 1
screens/Proximo/ProximoAboutScreen.js View File

3
 import * as React from 'react';
3
 import * as React from 'react';
4
 import {Image, View} from 'react-native';
4
 import {Image, View} from 'react-native';
5
 import {Card, CardItem, Container, Content, H2, Left, Text} from 'native-base';
5
 import {Card, CardItem, Container, Content, H2, Left, Text} from 'native-base';
6
-import CustomHeader from "../../components/CustomHeader";
7
 import i18n from "i18n-js";
6
 import i18n from "i18n-js";
8
 import {MaterialCommunityIcons} from "@expo/vector-icons";
7
 import {MaterialCommunityIcons} from "@expo/vector-icons";
9
 
8
 

+ 3
- 4
screens/Proximo/ProximoListScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {Body, Container, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
5
-import CustomHeader from "../../components/CustomHeader";
4
+import {Body, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base';
6
 import {FlatList, Image, Platform, View} from "react-native";
5
 import {FlatList, Image, Platform, View} from "react-native";
7
 import Touchable from 'react-native-platform-touchable';
6
 import Touchable from 'react-native-platform-touchable';
8
 import Menu, {MenuItem} from 'react-native-material-menu';
7
 import Menu, {MenuItem} from 'react-native-material-menu';
387
         // console.log("rendering ProximoListScreen");
386
         // console.log("rendering ProximoListScreen");
388
         const nav = this.props.navigation;
387
         const nav = this.props.navigation;
389
         return (
388
         return (
390
-            <Container>
389
+            <View>
391
                 <Modalize ref={this.modalRef}
390
                 <Modalize ref={this.modalRef}
392
                           adjustToContentHeight
391
                           adjustToContentHeight
393
                           modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
392
                           modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
400
                     style={{minHeight: 300, width: '100%'}}
399
                     style={{minHeight: 300, width: '100%'}}
401
                     renderItem={this.renderItem}
400
                     renderItem={this.renderItem}
402
                 />
401
                 />
403
-            </Container>
402
+            </View>
404
         );
403
         );
405
     }
404
     }
406
 }
405
 }

+ 16
- 18
screens/Proximo/ProximoMainScreen.js View File

2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
 import {Platform, View} from 'react-native'
4
 import {Platform, View} from 'react-native'
5
-import {Body, Left, ListItem, Right, Text, Container} from 'native-base';
5
+import {Body, Left, ListItem, Right, Text} from 'native-base';
6
 import i18n from "i18n-js";
6
 import i18n from "i18n-js";
7
 import {MaterialCommunityIcons} from "@expo/vector-icons";
7
 import {MaterialCommunityIcons} from "@expo/vector-icons";
8
 import ThemeManager from "../../utils/ThemeManager";
8
 import ThemeManager from "../../utils/ThemeManager";
40
         this.createDataset = this.createDataset.bind(this);
40
         this.createDataset = this.createDataset.bind(this);
41
     }
41
     }
42
 
42
 
43
-    componentDidMount() {
44
-        const button = this.getRightButton.bind(this);
45
-        this.props.navigation.setOptions({
46
-            headerRight: button
47
-            ,
48
-        });
49
-    }
50
-
51
     static sortFinalData(a: Object, b: Object) {
43
     static sortFinalData(a: Object, b: Object) {
52
         let str1 = a.type.name.toLowerCase();
44
         let str1 = a.type.name.toLowerCase();
53
         let str2 = b.type.name.toLowerCase();
45
         let str2 = b.type.name.toLowerCase();
66
         return 0;
58
         return 0;
67
     }
59
     }
68
 
60
 
61
+    componentDidMount() {
62
+        const rightButton = this.getRightButton.bind(this);
63
+        this.props.navigation.setOptions({
64
+            headerRight: rightButton,
65
+        });
66
+    }
67
+
69
     getKeyExtractor(item: Object) {
68
     getKeyExtractor(item: Object) {
70
         return item !== undefined ? item.type['id'] : undefined;
69
         return item !== undefined ? item.type['id'] : undefined;
71
     }
70
     }
180
         );
179
         );
181
     }
180
     }
182
 
181
 
182
+
183
     getRenderItem({item}: Object) {
183
     getRenderItem({item}: Object) {
184
         let dataToSend = {
184
         let dataToSend = {
185
             shouldFocusSearchBar: false,
185
             shouldFocusSearchBar: false,
223
     render() {
223
     render() {
224
         const nav = this.props.navigation;
224
         const nav = this.props.navigation;
225
         return (
225
         return (
226
-            <Container>
227
-                <WebSectionList
228
-                    createDataset={this.createDataset}
229
-                    navigation={nav}
230
-                    refreshTime={0}
231
-                    fetchUrl={DATA_URL}
232
-                    renderItem={this.getRenderItem}
233
-                    updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
234
-            </Container>
226
+            <WebSectionList
227
+                createDataset={this.createDataset}
228
+                navigation={nav}
229
+                refreshTime={0}
230
+                fetchUrl={DATA_URL}
231
+                renderItem={this.getRenderItem}
232
+                updateErrorText={i18n.t("homeScreen.listUpdateFail")}/>
235
         );
233
         );
236
     }
234
     }
237
 }
235
 }

+ 124
- 135
screens/Proxiwash/ProxiwashAboutScreen.js View File

2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
 import {Image, View} from 'react-native';
4
 import {Image, View} from 'react-native';
5
-import {Body, Card, CardItem, Container, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base';
6
-import CustomHeader from "../../components/CustomHeader";
5
+import {Body, Card, CardItem, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base';
7
 import i18n from "i18n-js";
6
 import i18n from "i18n-js";
8
 import {MaterialCommunityIcons} from "@expo/vector-icons";
7
 import {MaterialCommunityIcons} from "@expo/vector-icons";
9
 import ThemeManager from "../../utils/ThemeManager";
8
 import ThemeManager from "../../utils/ThemeManager";
18
 export default class ProxiwashAboutScreen extends React.Component<Props> {
17
 export default class ProxiwashAboutScreen extends React.Component<Props> {
19
 
18
 
20
     render() {
19
     render() {
21
-        const nav = this.props.navigation;
22
         return (
20
         return (
23
-            <Container>
24
-                <CustomHeader
25
-                    navigation={nav} title={i18n.t('screens.proxiwash')}
26
-                    hasBackButton={true}
27
-                    hasTabs={true}/>
28
-                <Tabs
29
-                    tabContainerStyle={{
30
-                        elevation: 0, // Fix for android shadow
31
-                    }}>
32
-                    <Tab
33
-                        heading={
34
-                            <TabHeading>
35
-                                <MaterialCommunityIcons
36
-                                    name={'information'}
37
-                                    color={ThemeManager.getCurrentThemeVariables().tabIconColor}
38
-                                    size={20}
39
-                                />
40
-                                <Text>{i18n.t('proxiwashScreen.informationTab')}</Text>
41
-                            </TabHeading>
42
-                        }
43
-                        key={1}
44
-                        style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
45
-                        <Content padder>
46
-                            <View style={{
47
-                                width: '100%',
48
-                                height: 100,
49
-                                marginTop: 20,
50
-                                marginBottom: 20,
51
-                                justifyContent: 'center',
52
-                                alignItems: 'center'
53
-                            }}>
54
-                                <Image
55
-                                    source={require('../../assets/proxiwash-logo.png')}
56
-                                    style={{flex: 1, resizeMode: "contain"}}
57
-                                    resizeMode="contain"/>
58
-                            </View>
59
-                            <Text>{i18n.t('proxiwashScreen.description')}</Text>
60
-                            <Card>
61
-                                <CardItem>
62
-                                    <Left>
63
-                                        <MaterialCommunityIcons
64
-                                            name={'tumble-dryer'}
65
-                                            size={26}/>
66
-                                        <H2>{i18n.t('proxiwashScreen.dryer')}</H2>
67
-                                    </Left>
68
-                                </CardItem>
69
-                                <CardItem>
70
-                                    <Body>
71
-                                        <H3>{i18n.t('proxiwashScreen.procedure')}</H3>
72
-                                        <Text>{i18n.t('proxiwashScreen.dryerProcedure')}</Text>
73
-                                    </Body>
74
-                                </CardItem>
75
-                                <CardItem>
76
-                                    <Body>
77
-                                        <H3>{i18n.t('proxiwashScreen.tips')}</H3>
78
-                                        <Text>{i18n.t('proxiwashScreen.dryerTips')}</Text>
79
-                                    </Body>
80
-                                </CardItem>
81
-                            </Card>
82
-                            <Card>
83
-                                <CardItem>
84
-                                    <Left>
85
-                                        <MaterialCommunityIcons
86
-                                            name={'washing-machine'}
87
-                                            size={26}/>
88
-                                        <H2>{i18n.t('proxiwashScreen.washer')}</H2>
89
-                                    </Left>
90
-                                </CardItem>
91
-                                <CardItem>
92
-                                    <Body>
93
-                                        <H3>{i18n.t('proxiwashScreen.procedure')}</H3>
94
-                                        <Text>{i18n.t('proxiwashScreen.washerProcedure')}</Text>
95
-                                    </Body>
96
-                                </CardItem>
97
-                                <CardItem>
98
-                                    <Body>
99
-                                        <H3>{i18n.t('proxiwashScreen.tips')}</H3>
100
-                                        <Text>{i18n.t('proxiwashScreen.washerTips')}</Text>
101
-                                    </Body>
102
-                                </CardItem>
103
-                            </Card>
104
-                        </Content>
105
-                    </Tab>
106
-                    <Tab
107
-                        heading={
108
-                            <TabHeading>
109
-                                <MaterialCommunityIcons
110
-                                    name={'cash'}
111
-                                    color={ThemeManager.getCurrentThemeVariables().tabIconColor}
112
-                                    size={20}
113
-                                />
114
-                                <Text>{i18n.t('proxiwashScreen.paymentTab')}</Text>
115
-                            </TabHeading>
116
-                        }
117
-                        key={2}
118
-                        style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
119
-                        <Content padder>
120
-                            <Card>
121
-                                <CardItem>
122
-                                    <Left>
123
-                                        <MaterialCommunityIcons
124
-                                            name={'coins'}
125
-                                            size={26}/>
126
-                                        <H2>{i18n.t('proxiwashScreen.tariffs')}</H2>
127
-                                    </Left>
128
-                                </CardItem>
129
-                                <CardItem>
130
-                                    <Body>
131
-                                        <Text>{i18n.t('proxiwashScreen.washersTariff')}</Text>
132
-                                        <Text>{i18n.t('proxiwashScreen.dryersTariff')}</Text>
133
-                                    </Body>
134
-                                </CardItem>
135
-                            </Card>
136
-                            <Card>
137
-                                <CardItem>
138
-                                    <Left>
139
-                                        <MaterialCommunityIcons
140
-                                            name={'cash'}
141
-                                            size={26}/>
142
-                                        <H2>{i18n.t('proxiwashScreen.paymentMethods')}</H2>
143
-                                    </Left>
144
-                                </CardItem>
145
-                                <CardItem>
146
-                                    <Body>
147
-                                        <Text>{i18n.t('proxiwashScreen.paymentMethodsDescription')}</Text>
148
-                                    </Body>
149
-                                </CardItem>
150
-                            </Card>
151
-                        </Content>
152
-                    </Tab>
153
-                </Tabs>
154
-            </Container>
21
+            <Tabs>
22
+                <Tab
23
+                    heading={
24
+                        <TabHeading>
25
+                            <MaterialCommunityIcons
26
+                                name={'information'}
27
+                                color={ThemeManager.getCurrentThemeVariables().tabIconColor}
28
+                                size={20}
29
+                            />
30
+                            <Text>{i18n.t('proxiwashScreen.informationTab')}</Text>
31
+                        </TabHeading>
32
+                    }
33
+                    key={1}
34
+                    style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
35
+                    <Content padder>
36
+                        <View style={{
37
+                            width: '100%',
38
+                            height: 100,
39
+                            marginTop: 20,
40
+                            marginBottom: 20,
41
+                            justifyContent: 'center',
42
+                            alignItems: 'center'
43
+                        }}>
44
+                            <Image
45
+                                source={require('../../assets/proxiwash-logo.png')}
46
+                                style={{flex: 1, resizeMode: "contain"}}
47
+                                resizeMode="contain"/>
48
+                        </View>
49
+                        <Text>{i18n.t('proxiwashScreen.description')}</Text>
50
+                        <Card>
51
+                            <CardItem>
52
+                                <Left>
53
+                                    <MaterialCommunityIcons
54
+                                        name={'tumble-dryer'}
55
+                                        size={26}/>
56
+                                    <H2>{i18n.t('proxiwashScreen.dryer')}</H2>
57
+                                </Left>
58
+                            </CardItem>
59
+                            <CardItem>
60
+                                <Body>
61
+                                    <H3>{i18n.t('proxiwashScreen.procedure')}</H3>
62
+                                    <Text>{i18n.t('proxiwashScreen.dryerProcedure')}</Text>
63
+                                </Body>
64
+                            </CardItem>
65
+                            <CardItem>
66
+                                <Body>
67
+                                    <H3>{i18n.t('proxiwashScreen.tips')}</H3>
68
+                                    <Text>{i18n.t('proxiwashScreen.dryerTips')}</Text>
69
+                                </Body>
70
+                            </CardItem>
71
+                        </Card>
72
+                        <Card>
73
+                            <CardItem>
74
+                                <Left>
75
+                                    <MaterialCommunityIcons
76
+                                        name={'washing-machine'}
77
+                                        size={26}/>
78
+                                    <H2>{i18n.t('proxiwashScreen.washer')}</H2>
79
+                                </Left>
80
+                            </CardItem>
81
+                            <CardItem>
82
+                                <Body>
83
+                                    <H3>{i18n.t('proxiwashScreen.procedure')}</H3>
84
+                                    <Text>{i18n.t('proxiwashScreen.washerProcedure')}</Text>
85
+                                </Body>
86
+                            </CardItem>
87
+                            <CardItem>
88
+                                <Body>
89
+                                    <H3>{i18n.t('proxiwashScreen.tips')}</H3>
90
+                                    <Text>{i18n.t('proxiwashScreen.washerTips')}</Text>
91
+                                </Body>
92
+                            </CardItem>
93
+                        </Card>
94
+                    </Content>
95
+                </Tab>
96
+                <Tab
97
+                    heading={
98
+                        <TabHeading>
99
+                            <MaterialCommunityIcons
100
+                                name={'cash'}
101
+                                color={ThemeManager.getCurrentThemeVariables().tabIconColor}
102
+                                size={20}
103
+                            />
104
+                            <Text>{i18n.t('proxiwashScreen.paymentTab')}</Text>
105
+                        </TabHeading>
106
+                    }
107
+                    key={2}
108
+                    style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
109
+                    <Content padder>
110
+                        <Card>
111
+                            <CardItem>
112
+                                <Left>
113
+                                    <MaterialCommunityIcons
114
+                                        name={'coins'}
115
+                                        size={26}/>
116
+                                    <H2>{i18n.t('proxiwashScreen.tariffs')}</H2>
117
+                                </Left>
118
+                            </CardItem>
119
+                            <CardItem>
120
+                                <Body>
121
+                                    <Text>{i18n.t('proxiwashScreen.washersTariff')}</Text>
122
+                                    <Text>{i18n.t('proxiwashScreen.dryersTariff')}</Text>
123
+                                </Body>
124
+                            </CardItem>
125
+                        </Card>
126
+                        <Card>
127
+                            <CardItem>
128
+                                <Left>
129
+                                    <MaterialCommunityIcons
130
+                                        name={'cash'}
131
+                                        size={26}/>
132
+                                    <H2>{i18n.t('proxiwashScreen.paymentMethods')}</H2>
133
+                                </Left>
134
+                            </CardItem>
135
+                            <CardItem>
136
+                                <Body>
137
+                                    <Text>{i18n.t('proxiwashScreen.paymentMethodsDescription')}</Text>
138
+                                </Body>
139
+                            </CardItem>
140
+                        </Card>
141
+                    </Content>
142
+                </Tab>
143
+            </Tabs>
155
         );
144
         );
156
     }
145
     }
157
 }
146
 }

+ 15
- 14
screens/Proxiwash/ProxiwashScreen.js View File

12
 import Touchable from "react-native-platform-touchable";
12
 import Touchable from "react-native-platform-touchable";
13
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
13
 import AsyncStorageManager from "../../utils/AsyncStorageManager";
14
 import * as Expo from "expo";
14
 import * as Expo from "expo";
15
-import BaseContainer from "../../components/BaseContainer";
16
 
15
 
17
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
16
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
18
 
17
 
102
      * Setup notification channel for android and add listeners to detect notifications fired
101
      * Setup notification channel for android and add listeners to detect notifications fired
103
      */
102
      */
104
     componentDidMount() {
103
     componentDidMount() {
104
+        const rightButton = this.getRightButton.bind(this);
105
+        this.props.navigation.setOptions({
106
+            headerRight: rightButton,
107
+        });
105
         if (AsyncStorageManager.getInstance().preferences.expoToken.current !== '') {
108
         if (AsyncStorageManager.getInstance().preferences.expoToken.current !== '') {
106
             // Get latest watchlist from server
109
             // Get latest watchlist from server
107
             NotificationsManager.getMachineNotificationWatchlist((fetchedList) => {
110
             NotificationsManager.getMachineNotificationWatchlist((fetchedList) => {
283
         this.props.navigation.navigate('ProxiwashAboutScreen');
286
         this.props.navigation.navigate('ProxiwashAboutScreen');
284
     }
287
     }
285
 
288
 
286
-    getRightButton(): * {
289
+    getRightButton() {
287
         return (
290
         return (
288
             <Touchable
291
             <Touchable
289
-                style={{padding: 6}}
292
+                style={{
293
+                    padding: 6,
294
+                    marginRight: 10
295
+                }}
290
                 onPress={this.onAboutPress}>
296
                 onPress={this.onAboutPress}>
291
                 <MaterialCommunityIcons
297
                 <MaterialCommunityIcons
292
                     color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
298
                     color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
299
     render() {
305
     render() {
300
         const nav = this.props.navigation;
306
         const nav = this.props.navigation;
301
         return (
307
         return (
302
-            <BaseContainer
308
+            <WebSectionList
309
+                createDataset={this.createDataset}
303
                 navigation={nav}
310
                 navigation={nav}
304
-                headerTitle={i18n.t('screens.proxiwash')}
305
-                headerRightButton={this.getRightButton()}>
306
-                <WebSectionList
307
-                    createDataset={this.createDataset}
308
-                    navigation={nav}
309
-                    refreshTime={REFRESH_TIME}
310
-                    fetchUrl={DATA_URL}
311
-                    renderItem={this.getRenderItem}
312
-                    updateErrorText={i18n.t("proxiwashScreen.listUpdateFail")}/>
313
-            </BaseContainer>
311
+                refreshTime={REFRESH_TIME}
312
+                fetchUrl={DATA_URL}
313
+                renderItem={this.getRenderItem}
314
+                updateErrorText={i18n.t("proxiwashScreen.listUpdateFail")}/>
314
         );
315
         );
315
     }
316
     }
316
 
317
 

+ 8
- 15
screens/SelfMenuScreen.js View File

5
 import {Card, CardItem, H2, H3, Text} from 'native-base';
5
 import {Card, CardItem, H2, H3, Text} from 'native-base';
6
 import ThemeManager from "../utils/ThemeManager";
6
 import ThemeManager from "../utils/ThemeManager";
7
 import i18n from "i18n-js";
7
 import i18n from "i18n-js";
8
-import BaseContainer from "../components/BaseContainer";
9
 import WebSectionList from "../components/WebSectionList";
8
 import WebSectionList from "../components/WebSectionList";
10
 
9
 
11
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json";
10
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json";
95
     }
94
     }
96
 
95
 
97
     getRenderSectionHeader({section}: Object) {
96
     getRenderSectionHeader({section}: Object) {
98
-        let title = "";
99
         return (
97
         return (
100
             <Card style={{
98
             <Card style={{
101
                 marginLeft: 10,
99
                 marginLeft: 10,
164
     render() {
162
     render() {
165
         const nav = this.props.navigation;
163
         const nav = this.props.navigation;
166
         return (
164
         return (
167
-            <BaseContainer
165
+            <WebSectionList
166
+                createDataset={this.createDataset}
168
                 navigation={nav}
167
                 navigation={nav}
169
-                headerTitle={i18n.t('screens.menuSelf')}
170
-                hasBackButton={true}>
171
-                <WebSectionList
172
-                    createDataset={this.createDataset}
173
-                    navigation={nav}
174
-                    refreshTime={0}
175
-                    fetchUrl={DATA_URL}
176
-                    renderItem={this.getRenderItem}
177
-                    renderSectionHeader={this.getRenderSectionHeader}
178
-                    updateErrorText={i18n.t("homeScreen.listUpdateFail")}
179
-                    stickyHeader={true}/>
180
-            </BaseContainer>
168
+                refreshTime={0}
169
+                fetchUrl={DATA_URL}
170
+                renderItem={this.getRenderItem}
171
+                renderSectionHeader={this.getRenderSectionHeader}
172
+                updateErrorText={i18n.t("homeScreen.listUpdateFail")}
173
+                stickyHeader={true}/>
181
         );
174
         );
182
     }
175
     }
183
 }
176
 }

+ 20
- 38
screens/SettingsScreen.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import * as React from 'react';
3
 import * as React from 'react';
4
-import {
5
-    Body,
6
-    Card,
7
-    CardItem,
8
-    CheckBox,
9
-    Container,
10
-    Content,
11
-    Left,
12
-    List,
13
-    ListItem,
14
-    Picker,
15
-    Right,
16
-    Text,
17
-} from "native-base";
18
-import CustomHeader from "../components/CustomHeader";
4
+import {Body, Card, CardItem, CheckBox, Content, Left, List, ListItem, Picker, Right, Text,} from "native-base";
19
 import ThemeManager from '../utils/ThemeManager';
5
 import ThemeManager from '../utils/ThemeManager';
20
 import i18n from "i18n-js";
6
 import i18n from "i18n-js";
21
 import {NavigationActions, StackActions} from "@react-navigation/native";
7
 import {NavigationActions, StackActions} from "@react-navigation/native";
228
     }
214
     }
229
 
215
 
230
     render() {
216
     render() {
231
-        const nav = this.props.navigation;
232
         return (
217
         return (
233
-            <Container>
234
-                <CustomHeader navigation={nav} title={i18n.t('screens.settings')} hasBackButton={true}/>
235
-                <Content padder>
236
-                    <Card>
237
-                        <CardItem header>
238
-                            <Text>{i18n.t('settingsScreen.generalCard')}</Text>
239
-                        </CardItem>
240
-                        <List>
241
-                            {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))}
242
-                            {SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))}
243
-                        </List>
244
-                    </Card>
245
-                    <Card>
246
-                        <CardItem header>
247
-                            <Text>Proxiwash</Text>
248
-                        </CardItem>
249
-                        <List>
250
-                            {SettingsScreen.getGeneralItem(this.getProxiwashNotifPicker(), 'washing-machine', i18n.t('settingsScreen.proxiwashNotifReminder'), i18n.t('settingsScreen.proxiwashNotifReminderSub'))}
251
-                        </List>
252
-                    </Card>
253
-                </Content>
254
-            </Container>
218
+            <Content padder>
219
+                <Card>
220
+                    <CardItem header>
221
+                        <Text>{i18n.t('settingsScreen.generalCard')}</Text>
222
+                    </CardItem>
223
+                    <List>
224
+                        {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))}
225
+                        {SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))}
226
+                    </List>
227
+                </Card>
228
+                <Card>
229
+                    <CardItem header>
230
+                        <Text>Proxiwash</Text>
231
+                    </CardItem>
232
+                    <List>
233
+                        {SettingsScreen.getGeneralItem(this.getProxiwashNotifPicker(), 'washing-machine', i18n.t('settingsScreen.proxiwashNotifReminder'), i18n.t('settingsScreen.proxiwashNotifReminderSub'))}
234
+                    </List>
235
+                </Card>
236
+            </Content>
255
 
237
 
256
         );
238
         );
257
     }
239
     }

+ 0
- 19
screens/Websites/AvailableRoomScreen.js View File

11
 
11
 
12
 const ROOM_URL = 'http://planex.insa-toulouse.fr/salles.php';
12
 const ROOM_URL = 'http://planex.insa-toulouse.fr/salles.php';
13
 const PC_URL = 'http://planex.insa-toulouse.fr/sallesInfo.php';
13
 const PC_URL = 'http://planex.insa-toulouse.fr/sallesInfo.php';
14
-const BIB_URL = 'https://bibbox.insa-toulouse.fr/';
15
 const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css';
14
 const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css';
16
-const CUSTOM_CSS_Bib = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customBibMobile.css';
17
 
15
 
18
 /**
16
 /**
19
  * Class defining the app's planex screen.
17
  * Class defining the app's planex screen.
32
             'let header = $(".table tbody tr:first");' +
30
             'let header = $(".table tbody tr:first");' +
33
             '$("table").prepend("<thead></thead>");true;' + // Fix for crash on ios
31
             '$("table").prepend("<thead></thead>");true;' + // Fix for crash on ios
34
             '$("thead").append(header);true;';
32
             '$("thead").append(header);true;';
35
-
36
-        this.customBibInjectedJS =
37
-            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
38
-            'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_Bib + '" type="text/css"/>\';' +
39
-            'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' +
40
-            '$(".hero-unit-form").append("' +
41
-            '<div style=\'width: 100%; display: flex\'>' +
42
-            '<a style=\'margin: auto\' href=\'' + BIB_URL + '\'>' +
43
-            '<button id=\'customBackButton\' class=\'btn btn-primary\'>Retour</button>' +
44
-            '</a>' +
45
-            '</div>");true;';
46
     }
33
     }
47
 
34
 
48
     render() {
35
     render() {
63
                         name: i18n.t('availableRoomScreen.computerRoom'),
50
                         name: i18n.t('availableRoomScreen.computerRoom'),
64
                         customJS: this.customInjectedJS
51
                         customJS: this.customInjectedJS
65
                     },
52
                     },
66
-                    {
67
-                        url: BIB_URL,
68
-                        icon: 'book',
69
-                        name: i18n.t('availableRoomScreen.bibRoom'),
70
-                        customJS: this.customBibInjectedJS
71
-                    },
72
                 ]}
53
                 ]}
73
                 customInjectedJS={this.customInjectedJS}
54
                 customInjectedJS={this.customInjectedJS}
74
                 headerTitle={i18n.t('screens.availableRooms')}
55
                 headerTitle={i18n.t('screens.availableRooms')}

+ 66
- 0
screens/Websites/BibScreen.js View File

1
+// @flow
2
+
3
+import * as React from 'react';
4
+import WebViewScreen from "../../components/WebViewScreen";
5
+import i18n from "i18n-js";
6
+
7
+type Props = {
8
+    navigation: Object,
9
+}
10
+
11
+const BIB_URL = 'https://bibbox.insa-toulouse.fr/';
12
+const CUSTOM_CSS_GENERAL = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css';
13
+const CUSTOM_CSS_Bib = 'https://etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customBibMobile.css';
14
+
15
+/**
16
+ * Class defining the app's planex screen.
17
+ * This screen uses a webview to render the planex page
18
+ */
19
+export default class AvailableRoomScreen extends React.Component<Props> {
20
+
21
+    customInjectedJS: string;
22
+    customBibInjectedJS: string;
23
+
24
+    constructor() {
25
+        super();
26
+        this.customInjectedJS =
27
+            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
28
+            'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\';' +
29
+            'let header = $(".table tbody tr:first");' +
30
+            '$("table").prepend("<thead></thead>");true;' + // Fix for crash on ios
31
+            '$("thead").append(header);true;';
32
+
33
+        this.customBibInjectedJS =
34
+            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
35
+            'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_Bib + '" type="text/css"/>\';' +
36
+            'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' +
37
+            '$(".hero-unit-form").append("' +
38
+            '<div style=\'width: 100%; display: flex\'>' +
39
+            '<a style=\'margin: auto\' href=\'' + BIB_URL + '\'>' +
40
+            '<button id=\'customBackButton\' class=\'btn btn-primary\'>Retour</button>' +
41
+            '</a>' +
42
+            '</div>");true;';
43
+    }
44
+
45
+    render() {
46
+        const nav = this.props.navigation;
47
+        return (
48
+            <WebViewScreen
49
+                navigation={nav}
50
+                data={[
51
+                    {
52
+                        url: BIB_URL,
53
+                        icon: 'book',
54
+                        name: i18n.t('availableRoomScreen.bibRoom'),
55
+                        customJS: this.customBibInjectedJS
56
+                    },
57
+                ]}
58
+                customInjectedJS={this.customInjectedJS}
59
+                headerTitle={i18n.t('screens.availableRooms')}
60
+                hasHeaderBackButton={true}
61
+                hasSideMenu={false}
62
+                hasFooter={false}/>
63
+        );
64
+    }
65
+}
66
+

Loading…
Cancel
Save