Browse Source

Replaced out links with webwiews + added available rooms webview

keplyx 4 years ago
parent
commit
db98144a0d

+ 33
- 22
components/BaseContainer.js View File

@@ -16,7 +16,8 @@ type Props = {
16 16
     headerRightButton: React.Node,
17 17
     children: React.Node,
18 18
     hasTabs: boolean,
19
-    hasBackButton: boolean
19
+    hasBackButton: boolean,
20
+    hasSideMenu: boolean,
20 21
 }
21 22
 
22 23
 type State = {
@@ -32,6 +33,7 @@ export default class BaseContainer extends React.Component<Props, State> {
32 33
         headerRightButton: <View/>,
33 34
         hasTabs: false,
34 35
         hasBackButton: false,
36
+        hasSideMenu: true,
35 37
     };
36 38
 
37 39
 
@@ -69,6 +71,29 @@ export default class BaseContainer extends React.Component<Props, State> {
69 71
             this.willBlurSubscription.remove();
70 72
     }
71 73
 
74
+    getMainContainer() {
75
+        return (
76
+            <Container>
77
+                <CustomHeader
78
+                    navigation={this.props.navigation} title={this.props.headerTitle}
79
+                    leftButton={
80
+                        <Touchable
81
+                            style={{padding: 6}}
82
+                            onPress={() => this.toggle()}>
83
+                            <CustomMaterialIcon
84
+                                color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
85
+                                icon="menu"/>
86
+                        </Touchable>
87
+                    }
88
+                    rightButton={this.props.headerRightButton}
89
+                    hasTabs={this.props.hasTabs}
90
+                    hasBackButton={this.props.hasBackButton}/>
91
+                {this.props.children}
92
+            </Container>
93
+        );
94
+    }
95
+
96
+
72 97
     render() {
73 98
         return (
74 99
             <View style={{
@@ -76,27 +101,13 @@ export default class BaseContainer extends React.Component<Props, State> {
76 101
                 width: '100%',
77 102
                 height: '100%'
78 103
             }}>
79
-                <CustomSideMenu
80
-                    navigation={this.props.navigation} isOpen={this.state.isOpen}
81
-                    onChange={(isOpen) => this.updateMenuState(isOpen)}>
82
-                    <Container>
83
-                        <CustomHeader
84
-                            navigation={this.props.navigation} title={this.props.headerTitle}
85
-                            leftButton={
86
-                                <Touchable
87
-                                    style={{padding: 6}}
88
-                                    onPress={() => this.toggle()}>
89
-                                    <CustomMaterialIcon
90
-                                        color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
91
-                                        icon="menu"/>
92
-                                </Touchable>
93
-                            }
94
-                            rightButton={this.props.headerRightButton}
95
-                            hasTabs={this.props.hasTabs}
96
-                            hasBackButton={this.props.hasBackButton}/>
97
-                        {this.props.children}
98
-                    </Container>
99
-                </CustomSideMenu>
104
+                {this.props.hasSideMenu ?
105
+                    <CustomSideMenu
106
+                        navigation={this.props.navigation} isOpen={this.state.isOpen}
107
+                        onChange={(isOpen) => this.updateMenuState(isOpen)}>
108
+                        {this.getMainContainer()}
109
+                    </CustomSideMenu> :
110
+                    this.getMainContainer()}
100 111
             </View>
101 112
         );
102 113
     }

+ 5
- 0
components/FetchedDataSectionList.js View File

@@ -272,6 +272,10 @@ export default class FetchedDataSectionList extends React.Component<Props, State
272 272
         return false;
273 273
     }
274 274
 
275
+    hasSideMenu() {
276
+        return true;
277
+    }
278
+
275 279
     /**
276 280
      * Get the section list render using the generated dataset
277 281
      *
@@ -356,6 +360,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
356 360
                 headerRightButton={this.getRightButton()}
357 361
                 hasTabs={this.hasTabs()}
358 362
                 hasBackButton={this.hasBackButton()}
363
+                hasSideMenu={this.hasSideMenu()}
359 364
             >
360 365
                 {this.hasTabs() ?
361 366
                     <Tabs

+ 8
- 10
components/Sidebar.js View File

@@ -11,10 +11,6 @@ const deviceHeight = Dimensions.get("window").height;
11 11
 
12 12
 const drawerCover = require("../assets/drawer-cover.png");
13 13
 
14
-const WIKETUD_LINK = "https://www.etud.insa-toulouse.fr/wiketud";
15
-const AMICALE_LINK = "https://www.etud.insa-toulouse.fr/~amicale";
16
-const TUTOR_INSA_LINK = "https://www.etud.insa-toulouse.fr/~tutorinsa/";
17
-
18 14
 type Props = {
19 15
     navigation: Object,
20 16
 };
@@ -46,21 +42,23 @@ export default class SideBar extends React.Component<Props, State> {
46 42
         this.dataSet = [
47 43
             {
48 44
                 name: "Amicale",
49
-                route: "amicale",
45
+                route: "AmicaleScreen",
50 46
                 icon: "web",
51
-                link: AMICALE_LINK
52 47
             },
53 48
             {
54 49
                 name: "Wiketud",
55
-                route: "wiketud",
50
+                route: "WiketudScreen",
56 51
                 icon: "wikipedia",
57
-                link: WIKETUD_LINK
58 52
             },
59 53
             {
60 54
                 name: "Tutor'INSA",
61
-                route: "tutorinsa",
55
+                route: "TutorInsaScreen",
62 56
                 icon: "school",
63
-                link: TUTOR_INSA_LINK
57
+            },
58
+            {
59
+                name: "Salles dispo",
60
+                route: "AvailableRoomScreen",
61
+                icon: "calendar-check",
64 62
             },
65 63
             {
66 64
                 name: i18n.t('screens.menuSelf'),

+ 102
- 0
components/WebViewScreen.js View File

@@ -0,0 +1,102 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {Linking, Platform, View} from 'react-native';
5
+import {Spinner} from 'native-base';
6
+import WebView from "react-native-webview";
7
+import Touchable from "react-native-platform-touchable";
8
+import CustomMaterialIcon from "../components/CustomMaterialIcon";
9
+import ThemeManager from "../utils/ThemeManager";
10
+import BaseContainer from "../components/BaseContainer";
11
+
12
+type Props = {
13
+    navigation: Object,
14
+    url: string,
15
+    customInjectedJS: string,
16
+    headerTitle: string,
17
+    hasHeaderBackButton: boolean,
18
+    hasSideMenu: boolean,
19
+}
20
+
21
+/**
22
+ * Class defining a webview screen.
23
+ */
24
+export default class WebViewScreen extends React.Component<Props> {
25
+
26
+    static defaultProps = {
27
+        customInjectedJS: '',
28
+        hasBackButton: false,
29
+        hasSideMenu: true,
30
+    };
31
+
32
+    webview: WebView;
33
+
34
+    openWebLink() {
35
+        Linking.openURL(this.props.url).catch((err) => console.error('Error opening link', err));
36
+    }
37
+
38
+    getHeaderButton(clickAction: Function, icon: string) {
39
+        return (
40
+            <Touchable
41
+                style={{padding: 6}}
42
+                onPress={() => clickAction()}>
43
+                <CustomMaterialIcon
44
+                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
45
+                    icon={icon}/>
46
+            </Touchable>
47
+        );
48
+    }
49
+
50
+    getRefreshButton() {
51
+        return (
52
+            <View style={{flexDirection: 'row'}}>
53
+                {this.getHeaderButton(() => this.openWebLink(), 'web')}
54
+                {this.getHeaderButton(() => this.refreshWebview(), 'refresh')}
55
+            </View>
56
+        );
57
+    };
58
+
59
+    refreshWebview() {
60
+        this.webview.reload();
61
+    }
62
+
63
+    render() {
64
+        const nav = this.props.navigation;
65
+        return (
66
+            <BaseContainer
67
+                navigation={nav}
68
+                headerTitle={this.props.headerTitle}
69
+                headerRightButton={this.getRefreshButton()}
70
+                hasBackButton={this.props.hasHeaderBackButton}
71
+                hasSideMenu={this.props.hasSideMenu}>
72
+                <WebView
73
+                    ref={ref => (this.webview = ref)}
74
+                    source={{uri: this.props.url}}
75
+                    style={{
76
+                        width: '100%',
77
+                        height: '100%',
78
+                    }}
79
+                    startInLoadingState={true}
80
+                    injectedJavaScript={this.props.customInjectedJS}
81
+                    javaScriptEnabled={true}
82
+                    renderLoading={() =>
83
+                        <View style={{
84
+                            backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
85
+                            position: 'absolute',
86
+                            top: 0,
87
+                            right: 0,
88
+                            width: '100%',
89
+                            height: '100%',
90
+                            flex: 1,
91
+                            alignItems: 'center',
92
+                            justifyContent: 'center'
93
+                        }}>
94
+                            <Spinner/>
95
+                        </View>
96
+                    }
97
+                />
98
+            </BaseContainer>
99
+        );
100
+    }
101
+}
102
+

+ 9
- 0
navigation/AppNavigator.js View File

@@ -9,9 +9,14 @@ import AboutDependenciesScreen from '../screens/About/AboutDependenciesScreen';
9 9
 import ProxiwashAboutScreen from '../screens/Proxiwash/ProxiwashAboutScreen';
10 10
 import ProximoAboutScreen from '../screens/Proximo/ProximoAboutScreen';
11 11
 import SelfMenuScreen from '../screens/SelfMenuScreen';
12
+import TutorInsaScreen from "../screens/TutorInsaScreen";
13
+import AmicaleScreen from "../screens/AmicaleScreen";
14
+import WiketudScreen from "../screens/WiketudScreen";
15
+import AvailableRoomScreen from "../screens/AvailableRoomScreen";
12 16
 import DebugScreen from '../screens/DebugScreen';
13 17
 import {fromRight} from "react-navigation-transitions";
14 18
 
19
+
15 20
 /**
16 21
  * Create a stack navigator using the drawer to handle navigation between screens
17 22
  */
@@ -25,6 +30,10 @@ function createAppContainerWithInitialRoute(initialRoute: string) {
25 30
                 AboutScreen: {screen: AboutScreen},
26 31
                 AboutDependenciesScreen: {screen: AboutDependenciesScreen},
27 32
                 SelfMenuScreen: {screen: SelfMenuScreen},
33
+                TutorInsaScreen: {screen: TutorInsaScreen},
34
+                AmicaleScreen: {screen: AmicaleScreen},
35
+                WiketudScreen: {screen: WiketudScreen},
36
+                AvailableRoomScreen: {screen: AvailableRoomScreen},
28 37
                 ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
29 38
                 ProximoAboutScreen: {screen: ProximoAboutScreen},
30 39
                 DebugScreen: {screen: DebugScreen},

+ 32
- 0
screens/AmicaleScreen.js View File

@@ -0,0 +1,32 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import ThemeManager from "../utils/ThemeManager";
5
+import WebViewScreen from "../components/WebViewScreen";
6
+
7
+type Props = {
8
+    navigation: Object,
9
+}
10
+
11
+
12
+const URL = 'https://www.etud.insa-toulouse.fr/~amicale';
13
+
14
+/**
15
+ * Class defining the app's planex screen.
16
+ * This screen uses a webview to render the planex page
17
+ */
18
+export default class AmicaleScreen extends React.Component<Props> {
19
+
20
+    render() {
21
+        const nav = this.props.navigation;
22
+        return (
23
+            <WebViewScreen
24
+                navigation={nav}
25
+                url={URL}
26
+                headerTitle={'Amicale'}
27
+                hasHeaderBackButton={true}
28
+                hasSideMenu={false}/>
29
+        );
30
+    }
31
+}
32
+

+ 40
- 0
screens/AvailableRoomScreen.js View File

@@ -0,0 +1,40 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import ThemeManager from "../utils/ThemeManager";
5
+import WebViewScreen from "../components/WebViewScreen";
6
+
7
+type Props = {
8
+    navigation: Object,
9
+}
10
+
11
+
12
+const URL = 'http://planex.insa-toulouse.fr/salles.php';
13
+
14
+/**
15
+ * Class defining the app's planex screen.
16
+ * This screen uses a webview to render the planex page
17
+ */
18
+export default class AvailableRoomScreen extends React.Component<Props> {
19
+
20
+    customInjectedJS: string;
21
+
22
+    constructor() {
23
+        super();
24
+        this.customInjectedJS = '';
25
+    }
26
+
27
+    render() {
28
+        const nav = this.props.navigation;
29
+        return (
30
+            <WebViewScreen
31
+                navigation={nav}
32
+                url={URL}
33
+                customInjectedJS={this.customInjectedJS}
34
+                headerTitle={'SAlles dispo'}
35
+                hasHeaderBackButton={true}
36
+                hasSideMenu={false}/>
37
+        );
38
+    }
39
+}
40
+

+ 9
- 53
screens/PlanexScreen.js View File

@@ -1,13 +1,8 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Platform, View} from 'react-native';
5
-import {Spinner} from 'native-base';
6
-import WebView from "react-native-webview";
7
-import Touchable from "react-native-platform-touchable";
8
-import CustomMaterialIcon from "../components/CustomMaterialIcon";
9 4
 import ThemeManager from "../utils/ThemeManager";
10
-import BaseContainer from "../components/BaseContainer";
5
+import WebViewScreen from "../components/WebViewScreen";
11 6
 
12 7
 type Props = {
13 8
     navigation: Object,
@@ -18,13 +13,13 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
18 13
 
19 14
 const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customMobile.css';
20 15
 const CUSTOM_CSS_NIGHTMODE = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customDark.css';
16
+
21 17
 /**
22 18
  * Class defining the app's planex screen.
23 19
  * This screen uses a webview to render the planex page
24 20
  */
25
-export default class PlanningScreen extends React.Component<Props> {
21
+export default class PlanexScreen extends React.Component<Props> {
26 22
 
27
-    webview: WebView;
28 23
     customInjectedJS: string;
29 24
 
30 25
     constructor() {
@@ -36,54 +31,15 @@ export default class PlanningScreen extends React.Component<Props> {
36 31
             this.customInjectedJS += 'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_NIGHTMODE + '" type="text/css"/>\';';
37 32
     }
38 33
 
39
-
40
-    getRefreshButton() {
41
-        return (
42
-            <Touchable
43
-                style={{padding: 6}}
44
-                onPress={() => this.refreshWebview()}>
45
-                <CustomMaterialIcon
46
-                    color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
47
-                    icon="refresh"/>
48
-            </Touchable>
49
-        );
50
-    };
51
-
52
-    refreshWebview() {
53
-        this.webview.reload();
54
-    }
55
-
56 34
     render() {
57 35
         const nav = this.props.navigation;
58 36
         return (
59
-            <BaseContainer navigation={nav} headerTitle={'Planex'} headerRightButton={this.getRefreshButton()}>
60
-                <WebView
61
-                    ref={ref => (this.webview = ref)}
62
-                    source={{uri: PLANEX_URL}}
63
-                    style={{
64
-                        width: '100%',
65
-                        height: '100%',
66
-                    }}
67
-                    startInLoadingState={true}
68
-                    injectedJavaScript={this.customInjectedJS}
69
-                    javaScriptEnabled={true}
70
-                    renderLoading={() =>
71
-                        <View style={{
72
-                            backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
73
-                            position: 'absolute',
74
-                            top: 0,
75
-                            right: 0,
76
-                            width: '100%',
77
-                            height: '100%',
78
-                            flex: 1,
79
-                            alignItems: 'center',
80
-                            justifyContent: 'center'
81
-                        }}>
82
-                            <Spinner/>
83
-                        </View>
84
-                    }
85
-                />
86
-            </BaseContainer>
37
+            <WebViewScreen
38
+                navigation={nav}
39
+                url={PLANEX_URL}
40
+                customInjectedJS={this.customInjectedJS}
41
+                headerTitle={'Planex'}
42
+                hasHeaderBackButton={false}/>
87 43
         );
88 44
     }
89 45
 }

+ 4
- 0
screens/SelfMenuScreen.js View File

@@ -64,6 +64,10 @@ export default class SelfMenuScreen extends FetchedDataSectionList {
64 64
         return true;
65 65
     }
66 66
 
67
+    hasSideMenu() : boolean {
68
+        return false;
69
+    }
70
+
67 71
     createDataset(fetchedData: Object) {
68 72
         let result = [];
69 73
         // Prevent crash by giving a default value when fetchedData is empty (not yet available)

+ 32
- 0
screens/TutorInsaScreen.js View File

@@ -0,0 +1,32 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import ThemeManager from "../utils/ThemeManager";
5
+import WebViewScreen from "../components/WebViewScreen";
6
+
7
+type Props = {
8
+    navigation: Object,
9
+}
10
+
11
+
12
+const URL = 'https://www.etud.insa-toulouse.fr/~tutorinsa/';
13
+
14
+/**
15
+ * Class defining the app's planex screen.
16
+ * This screen uses a webview to render the planex page
17
+ */
18
+export default class TutorInsaScreen extends React.Component<Props> {
19
+
20
+    render() {
21
+        const nav = this.props.navigation;
22
+        return (
23
+            <WebViewScreen
24
+                navigation={nav}
25
+                url={URL}
26
+                headerTitle={'Tutor\'INSA'}
27
+                hasHeaderBackButton={true}
28
+                hasSideMenu={false}/>
29
+        );
30
+    }
31
+}
32
+

+ 32
- 0
screens/WiketudScreen.js View File

@@ -0,0 +1,32 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import ThemeManager from "../utils/ThemeManager";
5
+import WebViewScreen from "../components/WebViewScreen";
6
+
7
+type Props = {
8
+    navigation: Object,
9
+}
10
+
11
+
12
+const URL = 'https://www.etud.insa-toulouse.fr/wiketud';
13
+
14
+/**
15
+ * Class defining the app's planex screen.
16
+ * This screen uses a webview to render the planex page
17
+ */
18
+export default class WiketudScreen extends React.Component<Props> {
19
+
20
+    render() {
21
+        const nav = this.props.navigation;
22
+        return (
23
+            <WebViewScreen
24
+                navigation={nav}
25
+                url={URL}
26
+                headerTitle={'Wiketud'}
27
+                hasHeaderBackButton={true}
28
+                hasSideMenu={false}/>
29
+        );
30
+    }
31
+}
32
+

Loading…
Cancel
Save