Browse Source

Added tabbed webview for available rooms

keplyx 4 years ago
parent
commit
1da41c1fd1

+ 83
- 38
components/WebViewScreen.js View File

@@ -2,7 +2,7 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Linking, Platform, View} from 'react-native';
5
-import {Spinner, Footer, Right, Left, Body} from 'native-base';
5
+import {Spinner, Footer, Right, Left, Body, Tab, TabHeading, Text, Tabs} from 'native-base';
6 6
 import WebView from "react-native-webview";
7 7
 import Touchable from "react-native-platform-touchable";
8 8
 import CustomMaterialIcon from "../components/CustomMaterialIcon";
@@ -11,8 +11,12 @@ import BaseContainer from "../components/BaseContainer";
11 11
 
12 12
 type Props = {
13 13
     navigation: Object,
14
-    url: string,
15
-    customInjectedJS: string,
14
+    data: Array<{
15
+        url: string,
16
+        icon: string,
17
+        name: string,
18
+        customJS: string
19
+    }>,
16 20
     headerTitle: string,
17 21
     hasHeaderBackButton: boolean,
18 22
     hasSideMenu: boolean,
@@ -25,16 +29,15 @@ type Props = {
25 29
 export default class WebViewScreen extends React.Component<Props> {
26 30
 
27 31
     static defaultProps = {
28
-        customInjectedJS: '',
29 32
         hasBackButton: false,
30 33
         hasSideMenu: true,
31 34
         hasFooter: true,
32 35
     };
33 36
 
34
-    webview: WebView;
37
+    webviewArray: Array<WebView> = [];
35 38
 
36
-    openWebLink() {
37
-        Linking.openURL(this.props.url).catch((err) => console.error('Error opening link', err));
39
+    openWebLink(url: string) {
40
+        Linking.openURL(url).catch((err) => console.error('Error opening link', err));
38 41
     }
39 42
 
40 43
     getHeaderButton(clickAction: Function, icon: string) {
@@ -58,15 +61,73 @@ export default class WebViewScreen extends React.Component<Props> {
58 61
     };
59 62
 
60 63
     refreshWebview() {
61
-        this.webview.reload();
64
+        for (let view of this.webviewArray) {
65
+            view.reload();
66
+        }
62 67
     }
63 68
 
64 69
     goBackWebview() {
65
-        this.webview.goBack();
70
+        for (let view of this.webviewArray) {
71
+            view.goBack();
72
+        }
66 73
     }
67 74
 
68 75
     goForwardWebview() {
69
-        this.webview.goForward();
76
+        for (let view of this.webviewArray) {
77
+            view.goForward();
78
+        }
79
+    }
80
+
81
+    getWebview(obj: Object) {
82
+        return (
83
+            <WebView
84
+                ref={ref => (this.webviewArray.push(ref))}
85
+                source={{uri: obj['url']}}
86
+                style={{
87
+                    width: '100%',
88
+                    height: '100%',
89
+                }}
90
+                startInLoadingState={true}
91
+                injectedJavaScript={obj['customJS']}
92
+                javaScriptEnabled={true}
93
+                renderLoading={() =>
94
+                    <View style={{
95
+                        backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
96
+                        position: 'absolute',
97
+                        top: 0,
98
+                        right: 0,
99
+                        width: '100%',
100
+                        height: '100%',
101
+                        flex: 1,
102
+                        alignItems: 'center',
103
+                        justifyContent: 'center'
104
+                    }}>
105
+                        <Spinner/>
106
+                    </View>
107
+                }
108
+            />
109
+        );
110
+    }
111
+
112
+    getTabbedWebview() {
113
+        let tabbedView = [];
114
+        for (let i = 0; i < this.props.data.length; i++) {
115
+            tabbedView.push(
116
+                <Tab heading={
117
+                    <TabHeading>
118
+                        <CustomMaterialIcon
119
+                            icon={this.props.data[i]['icon']}
120
+                            color={ThemeManager.getCurrentThemeVariables().tabIconColor}
121
+                            fontSize={20}
122
+                        />
123
+                        <Text>{this.props.data[i]['name']}</Text>
124
+                    </TabHeading>}
125
+                     key={this.props.data[i]['url']}
126
+                     style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
127
+                    {this.getWebview(this.props.data[i])}
128
+                </Tab>);
129
+        }
130
+        return tabbedView;
70 131
     }
71 132
 
72 133
     render() {
@@ -78,38 +139,22 @@ export default class WebViewScreen extends React.Component<Props> {
78 139
                 headerRightButton={this.getRefreshButton()}
79 140
                 hasBackButton={this.props.hasHeaderBackButton}
80 141
                 hasSideMenu={this.props.hasSideMenu}>
81
-                <WebView
82
-                    ref={ref => (this.webview = ref)}
83
-                    source={{uri: this.props.url}}
84
-                    style={{
85
-                        width: '100%',
86
-                        height: '100%',
87
-                    }}
88
-                    startInLoadingState={true}
89
-                    injectedJavaScript={this.props.customInjectedJS}
90
-                    javaScriptEnabled={true}
91
-                    renderLoading={() =>
92
-                        <View style={{
93
-                            backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
94
-                            position: 'absolute',
95
-                            top: 0,
96
-                            right: 0,
97
-                            width: '100%',
98
-                            height: '100%',
99
-                            flex: 1,
100
-                            alignItems: 'center',
101
-                            justifyContent: 'center'
102
-                        }}>
103
-                            <Spinner/>
104
-                        </View>
105
-                    }
106
-                />
107
-                {this.props.hasFooter ?
142
+                {this.props.data.length === 1 ?
143
+                    this.getWebview(this.props.data[0]) :
144
+                    <Tabs
145
+                        tabContainerStyle={{
146
+                            elevation: 0, // Fix for android shadow
147
+                        }}
148
+                        locked={true}
149
+                    >
150
+                        {this.getTabbedWebview()}
151
+                    </Tabs>}
152
+                {this.props.hasFooter && this.props.data.length === 1 ?
108 153
                     <Footer>
109 154
                         <Left style={{
110 155
                             paddingLeft: 6,
111 156
                         }}>
112
-                            {this.getHeaderButton(() => this.openWebLink(), 'open-in-new')}
157
+                            {this.getHeaderButton(() => this.openWebLink(this.props.data[0]['url']), 'open-in-new')}
113 158
                         </Left>
114 159
                         <Body/>
115 160
                         <Right style={{

+ 8
- 1
screens/AmicaleScreen.js View File

@@ -22,7 +22,14 @@ export default class AmicaleScreen extends React.Component<Props> {
22 22
         return (
23 23
             <WebViewScreen
24 24
                 navigation={nav}
25
-                url={URL}
25
+                data={[
26
+                    {
27
+                        url: URL,
28
+                        icon: '',
29
+                        name: '',
30
+                        customJS: ''
31
+                    },
32
+                ]}
26 33
                 headerTitle={'Amicale'}
27 34
                 hasHeaderBackButton={true}
28 35
                 hasSideMenu={false}/>

+ 38
- 4
screens/AvailableRoomScreen.js View File

@@ -9,7 +9,11 @@ type Props = {
9 9
 }
10 10
 
11 11
 
12
-const 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';
14
+const BIB_URL = 'https://bibbox.insa-toulouse.fr/';
15
+const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customMobile.css';
16
+const CUSTOM_CSS_Bib = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/rooms/customBibMobile.css';
13 17
 
14 18
 /**
15 19
  * Class defining the app's planex screen.
@@ -18,10 +22,20 @@ const URL = 'http://planex.insa-toulouse.fr/salles.php';
18 22
 export default class AvailableRoomScreen extends React.Component<Props> {
19 23
 
20 24
     customInjectedJS: string;
25
+    customBibInjectedJS: string;
21 26
 
22 27
     constructor() {
23 28
         super();
24
-        this.customInjectedJS = '';
29
+        this.customInjectedJS =
30
+            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
31
+            'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\';' +
32
+            'let header = $(".table tbody tr:first");' +
33
+            '$("table").prepend("<thead></thead>");' +
34
+            '$("thead").append(header);';
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"/>\';';
25 39
     }
26 40
 
27 41
     render() {
@@ -29,11 +43,31 @@ export default class AvailableRoomScreen extends React.Component<Props> {
29 43
         return (
30 44
             <WebViewScreen
31 45
                 navigation={nav}
32
-                url={URL}
46
+                data={[
47
+                    {
48
+                        url: ROOM_URL,
49
+                        icon: 'file-document-outline',
50
+                        name: i18n.t('availableRoomScreen.normalRoom'),
51
+                        customJS: this.customInjectedJS
52
+                    },
53
+                    {
54
+                        url: PC_URL,
55
+                        icon: 'monitor',
56
+                        name: i18n.t('availableRoomScreen.computerRoom'),
57
+                        customJS: this.customInjectedJS
58
+                    },
59
+                    {
60
+                        url: BIB_URL,
61
+                        icon: 'book',
62
+                        name: i18n.t('availableRoomScreen.bibRoom'),
63
+                        customJS: this.customBibInjectedJS
64
+                    },
65
+                ]}
33 66
                 customInjectedJS={this.customInjectedJS}
34 67
                 headerTitle={i18n.t('screens.availableRooms')}
35 68
                 hasHeaderBackButton={true}
36
-                hasSideMenu={false}/>
69
+                hasSideMenu={false}
70
+                hasFooter={false}/>
37 71
         );
38 72
     }
39 73
 }

+ 8
- 1
screens/PlanexScreen.js View File

@@ -36,7 +36,14 @@ export default class PlanexScreen extends React.Component<Props> {
36 36
         return (
37 37
             <WebViewScreen
38 38
                 navigation={nav}
39
-                url={PLANEX_URL}
39
+                data={[
40
+                    {
41
+                        url: PLANEX_URL,
42
+                        icon: '',
43
+                        name: '',
44
+                        customJS: this.customInjectedJS
45
+                    },
46
+                ]}
40 47
                 customInjectedJS={this.customInjectedJS}
41 48
                 headerTitle={'Planex'}
42 49
                 hasHeaderBackButton={false}

+ 8
- 1
screens/TutorInsaScreen.js View File

@@ -22,7 +22,14 @@ export default class TutorInsaScreen extends React.Component<Props> {
22 22
         return (
23 23
             <WebViewScreen
24 24
                 navigation={nav}
25
-                url={URL}
25
+                data={[
26
+                    {
27
+                        url: URL,
28
+                        icon: '',
29
+                        name: '',
30
+                        customJS: ''
31
+                    },
32
+                ]}
26 33
                 headerTitle={'Tutor\'INSA'}
27 34
                 hasHeaderBackButton={true}
28 35
                 hasSideMenu={false}/>

+ 8
- 1
screens/WiketudScreen.js View File

@@ -22,7 +22,14 @@ export default class WiketudScreen extends React.Component<Props> {
22 22
         return (
23 23
             <WebViewScreen
24 24
                 navigation={nav}
25
-                url={URL}
25
+                data={[
26
+                    {
27
+                        url: URL,
28
+                        icon: '',
29
+                        name: '',
30
+                        customJS: ''
31
+                    },
32
+                ]}
26 33
                 headerTitle={'Wiketud'}
27 34
                 hasHeaderBackButton={true}
28 35
                 hasSideMenu={false}/>

+ 5
- 0
translations/en.json View File

@@ -182,6 +182,11 @@
182 182
       "machineRunningBody": "The machine n°{{number}} is still running"
183 183
     }
184 184
   },
185
+  "availableRoomScreen": {
186
+    "normalRoom": "Work",
187
+    "computerRoom": "Computer",
188
+    "bibRoom": "Bib'Box"
189
+  },
185 190
   "general": {
186 191
     "loading": "Loading...",
187 192
     "networkError": "Unable to contact servers. Make sure you are connected to Internet."

+ 5
- 0
translations/fr.json View File

@@ -184,6 +184,11 @@
184 184
       "machineRunningBody": "La machine n°{{number}} n'est pas encore terminée"
185 185
     }
186 186
   },
187
+  "availableRoomScreen": {
188
+    "normalRoom": "Travail",
189
+    "computerRoom": "Ordi",
190
+    "bibRoom": "Bib'Box"
191
+  },
187 192
   "general": {
188 193
     "loading": "Chargement...",
189 194
     "networkError": "Impossible de contacter les serveurs. Assurez vous d'être connecté à internet."

Loading…
Cancel
Save