Browse Source

Improve Services screen components to match linter

Arnaud Vergnet 3 years ago
parent
commit
fcbc70956b

+ 2
- 2
src/components/Lists/Proxiwash/ProxiwashListItem.js View File

@@ -15,12 +15,12 @@ import i18n from 'i18n-js';
15 15
 import * as Animatable from 'react-native-animatable';
16 16
 import ProxiwashConstants from '../../../constants/ProxiwashConstants';
17 17
 import AprilFoolsManager from '../../../managers/AprilFoolsManager';
18
-import type {CustomTheme} from '../../../managers/ThemeManager';
18
+import type {CustomThemeType} from '../../../managers/ThemeManager';
19 19
 import type {ProxiwashMachineType} from '../../../screens/Proxiwash/ProxiwashScreen';
20 20
 
21 21
 type PropsType = {
22 22
   item: ProxiwashMachineType,
23
-  theme: CustomTheme,
23
+  theme: CustomThemeType,
24 24
   onPress: (
25 25
     title: string,
26 26
     item: ProxiwashMachineType,

+ 2
- 2
src/components/Lists/Proxiwash/ProxiwashSectionHeader.js View File

@@ -4,10 +4,10 @@ import * as React from 'react';
4 4
 import {Avatar, Text, withTheme} from 'react-native-paper';
5 5
 import {StyleSheet, View} from 'react-native';
6 6
 import i18n from 'i18n-js';
7
-import type {CustomTheme} from '../../../managers/ThemeManager';
7
+import type {CustomThemeType} from '../../../managers/ThemeManager';
8 8
 
9 9
 type PropsType = {
10
-  theme: CustomTheme,
10
+  theme: CustomThemeType,
11 11
   title: string,
12 12
   isDryer: boolean,
13 13
   nbAvailable: number,

+ 2
- 2
src/components/Screens/WebViewScreen.js View File

@@ -13,7 +13,7 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
13 13
 import {withTheme} from 'react-native-paper';
14 14
 import {StackNavigationProp} from '@react-navigation/stack';
15 15
 import {Collapsible} from 'react-navigation-collapsible';
16
-import type {CustomTheme} from '../../managers/ThemeManager';
16
+import type {CustomThemeType} from '../../managers/ThemeManager';
17 17
 import {withCollapsible} from '../../utils/withCollapsible';
18 18
 import MaterialHeaderButtons, {Item} from '../Overrides/CustomHeaderButton';
19 19
 import {ERROR_TYPE} from '../../utils/WebData';
@@ -22,7 +22,7 @@ import BasicLoadingScreen from './BasicLoadingScreen';
22 22
 
23 23
 type PropsType = {
24 24
   navigation: StackNavigationProp,
25
-  theme: CustomTheme,
25
+  theme: CustomThemeType,
26 26
   url: string,
27 27
   collapsibleStack: Collapsible,
28 28
   onMessage: (event: {nativeEvent: {data: string}}) => void,

+ 3
- 2
src/managers/AprilFoolsManager.js View File

@@ -2,6 +2,7 @@
2 2
 
3 3
 import type {ProxiwashMachineType} from '../screens/Proxiwash/ProxiwashScreen';
4 4
 import type {CustomThemeType} from './ThemeManager';
5
+import type {RuFoodCategoryType} from '../screens/Services/SelfMenuScreen';
5 6
 
6 7
 /**
7 8
  * Singleton class used to manage april fools
@@ -49,8 +50,8 @@ export default class AprilFoolsManager {
49 50
    * @returns {Object}
50 51
    */
51 52
   static getFakeMenuItem(
52
-    menu: Array<{dishes: Array<{name: string}>}>,
53
-  ): Array<{dishes: Array<{name: string}>}> {
53
+    menu: Array<RuFoodCategoryType>,
54
+  ): Array<RuFoodCategoryType> {
54 55
     menu[1].dishes.splice(4, 0, {name: 'Coq au vin'});
55 56
     menu[1].dishes.splice(2, 0, {name: "Bat'Soupe"});
56 57
     menu[1].dishes.splice(1, 0, {name: 'Pave de loup'});

+ 2
- 2
src/screens/Proxiwash/ProxiwashScreen.js View File

@@ -17,7 +17,7 @@ import MaterialHeaderButtons, {
17 17
   Item,
18 18
 } from '../../components/Overrides/CustomHeaderButton';
19 19
 import ProxiwashSectionHeader from '../../components/Lists/Proxiwash/ProxiwashSectionHeader';
20
-import type {CustomTheme} from '../../managers/ThemeManager';
20
+import type {CustomThemeType} from '../../managers/ThemeManager';
21 21
 import {
22 22
   getCleanedMachineWatched,
23 23
   getMachineEndDate,
@@ -47,7 +47,7 @@ export type ProxiwashMachineType = {
47 47
 
48 48
 type PropsType = {
49 49
   navigation: StackNavigationProp,
50
-  theme: CustomTheme,
50
+  theme: CustomThemeType,
51 51
 };
52 52
 
53 53
 type StateType = {

+ 2
- 2
src/screens/Services/Proximo/ProximoListScreen.js View File

@@ -19,7 +19,7 @@ import ProximoListItem from '../../../components/Lists/Proximo/ProximoListItem';
19 19
 import MaterialHeaderButtons, {
20 20
   Item,
21 21
 } from '../../../components/Overrides/CustomHeaderButton';
22
-import type {CustomTheme} from '../../../managers/ThemeManager';
22
+import type {CustomThemeType} from '../../../managers/ThemeManager';
23 23
 import CollapsibleFlatList from '../../../components/Collapsible/CollapsibleFlatList';
24 24
 import type {ProximoArticleType} from './ProximoMainScreen';
25 25
 
@@ -56,7 +56,7 @@ type PropsType = {
56 56
       shouldFocusSearchBar: boolean,
57 57
     },
58 58
   },
59
-  theme: CustomTheme,
59
+  theme: CustomThemeType,
60 60
 };
61 61
 
62 62
 type StateType = {

+ 2
- 2
src/screens/Services/Proximo/ProximoMainScreen.js View File

@@ -8,7 +8,7 @@ import WebSectionList from '../../../components/Screens/WebSectionList';
8 8
 import MaterialHeaderButtons, {
9 9
   Item,
10 10
 } from '../../../components/Overrides/CustomHeaderButton';
11
-import type {CustomTheme} from '../../../managers/ThemeManager';
11
+import type {CustomThemeType} from '../../../managers/ThemeManager';
12 12
 import type {SectionListDataType} from '../../../components/Screens/WebSectionList';
13 13
 
14 14
 const DATA_URL = 'https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json';
@@ -43,7 +43,7 @@ export type ProximoDataType = {
43 43
 
44 44
 type PropsType = {
45 45
   navigation: StackNavigationProp,
46
-  theme: CustomTheme,
46
+  theme: CustomThemeType,
47 47
 };
48 48
 
49 49
 /**

+ 168
- 147
src/screens/Services/SelfMenuScreen.js View File

@@ -2,167 +2,188 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {View} from 'react-native';
5
-import DateManager from "../../managers/DateManager";
6
-import WebSectionList from "../../components/Screens/WebSectionList";
7 5
 import {Card, Text, withTheme} from 'react-native-paper';
8
-import AprilFoolsManager from "../../managers/AprilFoolsManager";
9
-import {StackNavigationProp} from "@react-navigation/stack";
10
-import type {CustomTheme} from "../../managers/ThemeManager";
6
+import {StackNavigationProp} from '@react-navigation/stack';
11 7
 import i18n from 'i18n-js';
8
+import DateManager from '../../managers/DateManager';
9
+import WebSectionList from '../../components/Screens/WebSectionList';
10
+import type {CustomThemeType} from '../../managers/ThemeManager';
11
+import type {SectionListDataType} from '../../components/Screens/WebSectionList';
12 12
 
13
-const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json";
13
+const DATA_URL =
14
+  'https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json';
14 15
 
15
-type Props = {
16
-    navigation: StackNavigationProp,
17
-    theme: CustomTheme,
18
-}
16
+type PropsType = {
17
+  navigation: StackNavigationProp,
18
+  theme: CustomThemeType,
19
+};
20
+
21
+export type RuFoodCategoryType = {
22
+  name: string,
23
+  dishes: Array<{name: string}>,
24
+};
25
+
26
+type RuMealType = {
27
+  name: string,
28
+  foodcategory: Array<RuFoodCategoryType>,
29
+};
30
+
31
+type RawRuMenuType = {
32
+  restaurant_id: number,
33
+  id: number,
34
+  date: string,
35
+  meal: Array<RuMealType>,
36
+};
19 37
 
20 38
 /**
21 39
  * Class defining the app's menu screen.
22 40
  */
23
-class SelfMenuScreen extends React.Component<Props> {
41
+class SelfMenuScreen extends React.Component<PropsType> {
42
+  /**
43
+   * Formats the given string to make sure it starts with a capital letter
44
+   *
45
+   * @param name The string to format
46
+   * @return {string} The formatted string
47
+   */
48
+  static formatName(name: string): string {
49
+    return name.charAt(0) + name.substr(1).toLowerCase();
50
+  }
24 51
 
25
-    /**
26
-     * Extract a key for the given item
27
-     *
28
-     * @param item The item to extract the key from
29
-     * @return {*} The extracted key
30
-     */
31
-    getKeyExtractor(item: Object) {
32
-        return item !== undefined ? item['name'] : undefined;
52
+  /**
53
+   * Creates the dataset to be used in the FlatList
54
+   *
55
+   * @param fetchedData
56
+   * @return {[]}
57
+   */
58
+  createDataset = (
59
+    fetchedData: Array<RawRuMenuType>,
60
+  ): SectionListDataType<RuFoodCategoryType> => {
61
+    let result = [];
62
+    if (fetchedData == null || fetchedData.length === 0) {
63
+      result = [
64
+        {
65
+          title: i18n.t('general.notAvailable'),
66
+          data: [],
67
+          keyExtractor: this.getKeyExtractor,
68
+        },
69
+      ];
70
+    } else {
71
+      fetchedData.forEach((item: RawRuMenuType) => {
72
+        result.push({
73
+          title: DateManager.getInstance().getTranslatedDate(item.date),
74
+          data: item.meal[0].foodcategory,
75
+          keyExtractor: this.getKeyExtractor,
76
+        });
77
+      });
33 78
     }
79
+    return result;
80
+  };
34 81
 
35
-    /**
36
-     * Creates the dataset to be used in the FlatList
37
-     *
38
-     * @param fetchedData
39
-     * @return {[]}
40
-     */
41
-    createDataset = (fetchedData: Object) => {
42
-        let result = [];
43
-        if (fetchedData == null || Object.keys(fetchedData).length === 0) {
44
-            result = [
45
-                {
46
-                    title: i18n.t("general.notAvailable"),
47
-                    data: [],
48
-                    keyExtractor: this.getKeyExtractor
49
-                }
50
-            ];
51
-        } else {
52
-            if (AprilFoolsManager.getInstance().isAprilFoolsEnabled() && fetchedData.length > 0)
53
-                fetchedData[0].meal[0].foodcategory = AprilFoolsManager.getFakeMenuItem(fetchedData[0].meal[0].foodcategory);
54
-            // fetched data is an array here
55
-            for (let i = 0; i < fetchedData.length; i++) {
56
-                result.push(
57
-                    {
58
-                        title: DateManager.getInstance().getTranslatedDate(fetchedData[i].date),
59
-                        data: fetchedData[i].meal[0].foodcategory,
60
-                        keyExtractor: this.getKeyExtractor,
61
-                    }
62
-                );
63
-            }
64
-        }
65
-        return result
66
-    };
82
+  /**
83
+   * Gets the render section header
84
+   *
85
+   * @param section The section to render the header from
86
+   * @return {*}
87
+   */
88
+  getRenderSectionHeader = ({
89
+    section,
90
+  }: {
91
+    section: {title: string},
92
+  }): React.Node => {
93
+    return (
94
+      <Card
95
+        style={{
96
+          width: '95%',
97
+          marginLeft: 'auto',
98
+          marginRight: 'auto',
99
+          marginTop: 5,
100
+          marginBottom: 5,
101
+          elevation: 4,
102
+        }}>
103
+        <Card.Title
104
+          title={section.title}
105
+          titleStyle={{
106
+            textAlign: 'center',
107
+          }}
108
+          subtitleStyle={{
109
+            textAlign: 'center',
110
+          }}
111
+          style={{
112
+            paddingLeft: 0,
113
+          }}
114
+        />
115
+      </Card>
116
+    );
117
+  };
67 118
 
68
-    /**
69
-     * Gets the render section header
70
-     *
71
-     * @param section The section to render the header from
72
-     * @return {*}
73
-     */
74
-    getRenderSectionHeader = ({section}: Object) => {
75
-        return (
76
-            <Card style={{
77
-                width: '95%',
78
-                marginLeft: 'auto',
79
-                marginRight: 'auto',
80
-                marginTop: 5,
81
-                marginBottom: 5,
82
-                elevation: 4,
83
-            }}>
84
-                <Card.Title
85
-                    title={section.title}
86
-                    titleStyle={{
87
-                        textAlign: 'center'
88
-                    }}
89
-                    subtitleStyle={{
90
-                        textAlign: 'center'
91
-                    }}
92
-                    style={{
93
-                        paddingLeft: 0,
94
-                    }}
95
-                />
96
-            </Card>
97
-        );
98
-    };
119
+  /**
120
+   * Gets a FlatList render item
121
+   *
122
+   * @param item The item to render
123
+   * @return {*}
124
+   */
125
+  getRenderItem = ({item}: {item: RuFoodCategoryType}): React.Node => {
126
+    const {theme} = this.props;
127
+    return (
128
+      <Card
129
+        style={{
130
+          flex: 0,
131
+          marginHorizontal: 10,
132
+          marginVertical: 5,
133
+        }}>
134
+        <Card.Title style={{marginTop: 5}} title={item.name} />
135
+        <View
136
+          style={{
137
+            width: '80%',
138
+            marginLeft: 'auto',
139
+            marginRight: 'auto',
140
+            borderBottomWidth: 1,
141
+            borderBottomColor: theme.colors.primary,
142
+            marginTop: 5,
143
+            marginBottom: 5,
144
+          }}
145
+        />
146
+        <Card.Content>
147
+          {item.dishes.map((object: {name: string}): React.Node =>
148
+            object.name !== '' ? (
149
+              <Text
150
+                style={{
151
+                  marginTop: 5,
152
+                  marginBottom: 5,
153
+                  textAlign: 'center',
154
+                }}>
155
+                {SelfMenuScreen.formatName(object.name)}
156
+              </Text>
157
+            ) : null,
158
+          )}
159
+        </Card.Content>
160
+      </Card>
161
+    );
162
+  };
99 163
 
100
-    /**
101
-     * Gets a FlatList render item
102
-     *
103
-     * @param item The item to render
104
-     * @return {*}
105
-     */
106
-    getRenderItem = ({item}: Object) => {
107
-        return (
108
-            <Card style={{
109
-                flex: 0,
110
-                marginHorizontal: 10,
111
-                marginVertical: 5,
112
-            }}>
113
-                <Card.Title
114
-                    style={{marginTop: 5}}
115
-                    title={item.name}
116
-                />
117
-                <View style={{
118
-                    width: '80%',
119
-                    marginLeft: 'auto',
120
-                    marginRight: 'auto',
121
-                    borderBottomWidth: 1,
122
-                    borderBottomColor: this.props.theme.colors.primary,
123
-                    marginTop: 5,
124
-                    marginBottom: 5,
125
-                }}/>
126
-                <Card.Content>
127
-                    {item.dishes.map((object) =>
128
-                        <View>
129
-                            {object.name !== "" ?
130
-                                <Text style={{
131
-                                    marginTop: 5,
132
-                                    marginBottom: 5,
133
-                                    textAlign: 'center'
134
-                                }}>{this.formatName(object.name)}</Text>
135
-                                : <View/>}
136
-                        </View>)}
137
-                </Card.Content>
138
-            </Card>
139
-        );
140
-    };
164
+  /**
165
+   * Extract a key for the given item
166
+   *
167
+   * @param item The item to extract the key from
168
+   * @return {*} The extracted key
169
+   */
170
+  getKeyExtractor = (item: RuFoodCategoryType): string => item.name;
141 171
 
142
-    /**
143
-     * Formats the given string to make sure it starts with a capital letter
144
-     *
145
-     * @param name The string to format
146
-     * @return {string} The formatted string
147
-     */
148
-    formatName(name: String) {
149
-        return name.charAt(0) + name.substr(1).toLowerCase();
150
-    }
151
-
152
-    render() {
153
-        const nav = this.props.navigation;
154
-        return (
155
-            <WebSectionList
156
-                createDataset={this.createDataset}
157
-                navigation={nav}
158
-                autoRefreshTime={0}
159
-                refreshOnFocus={false}
160
-                fetchUrl={DATA_URL}
161
-                renderItem={this.getRenderItem}
162
-                renderSectionHeader={this.getRenderSectionHeader}
163
-                stickyHeader={true}/>
164
-        );
165
-    }
172
+  render(): React.Node {
173
+    const {navigation} = this.props;
174
+    return (
175
+      <WebSectionList
176
+        createDataset={this.createDataset}
177
+        navigation={navigation}
178
+        autoRefreshTime={0}
179
+        refreshOnFocus={false}
180
+        fetchUrl={DATA_URL}
181
+        renderItem={this.getRenderItem}
182
+        renderSectionHeader={this.getRenderSectionHeader}
183
+        stickyHeader
184
+      />
185
+    );
186
+  }
166 187
 }
167 188
 
168 189
 export default withTheme(SelfMenuScreen);

+ 2
- 2
src/screens/Services/ServicesScreen.js View File

@@ -13,7 +13,7 @@ import {
13 13
 import i18n from 'i18n-js';
14 14
 import {StackNavigationProp} from '@react-navigation/stack';
15 15
 import CardList from '../../components/Lists/CardList/CardList';
16
-import type {CustomTheme} from '../../managers/ThemeManager';
16
+import type {CustomThemeType} from '../../managers/ThemeManager';
17 17
 import MaterialHeaderButtons, {
18 18
   Item,
19 19
 } from '../../components/Overrides/CustomHeaderButton';
@@ -28,7 +28,7 @@ import type {ServiceCategoryType} from '../../managers/ServicesManager';
28 28
 
29 29
 type PropsType = {
30 30
   navigation: StackNavigationProp,
31
-  theme: CustomTheme,
31
+  theme: CustomThemeType,
32 32
 };
33 33
 
34 34
 class ServicesScreen extends React.Component<PropsType> {

+ 107
- 100
src/screens/Services/WebsiteScreen.js View File

@@ -1,109 +1,116 @@
1 1
 // @flow
2 2
 
3
-
4 3
 import * as React from 'react';
5
-import {StackNavigationProp} from "@react-navigation/stack";
6
-import WebViewScreen from "../../components/Screens/WebViewScreen";
7
-import AvailableWebsites from "../../constants/AvailableWebsites";
8
-import BasicLoadingScreen from "../../components/Screens/BasicLoadingScreen";
9
-
10
-type Props = {
11
-    navigation: StackNavigationProp,
12
-    route: { params: { host: string, path: string | null, title: string } },
13
-}
14
-
15
-class WebsiteScreen extends React.Component<Props> {
16
-
17
-    fullUrl: string;
18
-    injectedJS: { [key: string]: string };
19
-    customPaddingFunctions: {[key: string]: (padding: string) => string}
20
-
21
-    host: string;
22
-
23
-    constructor(props: Props) {
24
-        super(props);
25
-        this.props.navigation.addListener('focus', this.onScreenFocus);
26
-        this.injectedJS = {};
27
-        this.customPaddingFunctions = {};
28
-        this.injectedJS[AvailableWebsites.websites.AVAILABLE_ROOMS] =
29
-            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
30
-            'document.querySelector(\'head\').innerHTML += \'<style>body,body>.container2{padding-top:0;width:100%}b,body>.container2>h1,body>.container2>h3,br,header{display:none}.table-bordered td,.table-bordered th{border:none;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6}.table{padding:0;margin:0;width:200%;max-width:200%;display:block}tbody{display:block;width:100%}thead{display:block;width:100%}.table tbody tr,tbody tr[bgcolor],thead tr{width:100%;display:inline-flex}.table tbody td,.table thead td[colspan]{padding:0;flex:1;height:50px;margin:0}.table tbody td[bgcolor=white],.table thead td,.table>tbody>tr>td:nth-child(1){flex:0 0 150px;height:50px}</style>\'; true;';
31
-
32
-        this.injectedJS[AvailableWebsites.websites.BIB] =
33
-            'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
34
-            'document.querySelector(\'head\').innerHTML += \'<style>.hero-unit,.navbar,footer{display:none}.hero-unit-form,.hero-unit2,.hero-unit3{background-color:#fff;box-shadow:none;padding:0;margin:0}.hero-unit-form h4{font-size:2rem;line-height:2rem}.btn{font-size:1.5rem;line-height:1.5rem;padding:20px}.btn-danger{background-image:none;background-color:#be1522}.table{font-size:.8rem}.table td{padding:0;height:18.2333px;border:none;border-bottom:1px solid #c1c1c1}.table td[style="max-width:55px;"]{max-width:110px!important}.table-bordered{min-width:50px}th{height:50px}.table-bordered{border-collapse:collapse}</style>\';' +
35
-            'if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)' +
36
-            '$(".hero-unit-form").append("' +
37
-            '<div style=\'width: 100%; display: flex\'>' +
38
-            '<a style=\'margin: auto\' href=\'' + AvailableWebsites.websites.BIB + '\'>' +
39
-            '<button id=\'customBackButton\' class=\'btn btn-primary\'>Retour</button>' +
40
-            '</a>' +
41
-            '</div>");true;';
42
-
43
-        this.customPaddingFunctions[AvailableWebsites.websites.BLUEMIND] = (padding: string) => {
44
-            return (
45
-                "$('head').append('<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">');" +
46
-                "$('.minwidth').css('top', " + padding + ");" +
47
-                "$('#mailview-bottom').css('min-height', 500);"
48
-            );
49
-        };
50
-        this.customPaddingFunctions[AvailableWebsites.websites.WIKETUD] = (padding: string) => {
51
-            return (
52
-                "$('#p-logo-text').css('top', 10 + " + padding + ");" +
53
-                "$('#site-navigation h2').css('top', 10 + " + padding + ");" +
54
-                "$('#site-tools h2').css('top', 10 + " + padding + ");" +
55
-                "$('#user-tools h2').css('top', 10 + " + padding + ");"
56
-            );
57
-        }
58
-    }
59
-
60
-    onScreenFocus = () => {
61
-        this.handleNavigationParams();
4
+import {StackNavigationProp} from '@react-navigation/stack';
5
+import WebViewScreen from '../../components/Screens/WebViewScreen';
6
+import AvailableWebsites from '../../constants/AvailableWebsites';
7
+import BasicLoadingScreen from '../../components/Screens/BasicLoadingScreen';
8
+
9
+type PropsType = {
10
+  navigation: StackNavigationProp,
11
+  route: {params: {host: string, path: string | null, title: string}},
12
+};
13
+
14
+const ENABLE_MOBILE_STRING = `<meta name="viewport" content="width=device-width, initial-scale=1.0">`;
15
+
16
+const AVAILABLE_ROOMS_STYLE = `<style>body,body>.container2{padding-top:0;width:100%}b,body>.container2>h1,body>.container2>h3,br,header{display:none}.table-bordered td,.table-bordered th{border:none;border-right:1px solid #dee2e6;border-bottom:1px solid #dee2e6}.table{padding:0;margin:0;width:200%;max-width:200%;display:block}tbody{display:block;width:100%}thead{display:block;width:100%}.table tbody tr,tbody tr[bgcolor],thead tr{width:100%;display:inline-flex}.table tbody td,.table thead td[colspan]{padding:0;flex:1;height:50px;margin:0}.table tbody td[bgcolor=white],.table thead td,.table>tbody>tr>td:nth-child(1){flex:0 0 150px;height:50px}</style>`;
17
+const BIB_STYLE = `<style>.hero-unit,.navbar,footer{display:none}.hero-unit-form,.hero-unit2,.hero-unit3{background-color:#fff;box-shadow:none;padding:0;margin:0}.hero-unit-form h4{font-size:2rem;line-height:2rem}.btn{font-size:1.5rem;line-height:1.5rem;padding:20px}.btn-danger{background-image:none;background-color:#be1522}.table{font-size:.8rem}.table td{padding:0;height:18.2333px;border:none;border-bottom:1px solid #c1c1c1}.table td[style="max-width:55px;"]{max-width:110px!important}.table-bordered{min-width:50px}th{height:50px}.table-bordered{border-collapse:collapse}</style>`;
18
+
19
+const BIB_BACK_BUTTON =
20
+  `<div style='width: 100%; display: flex'>` +
21
+  `<a style='margin: auto' href='${AvailableWebsites.websites.BIB}'>` +
22
+  `<button id='customBackButton' class='btn btn-primary'>Retour</button>` +
23
+  `</a>` +
24
+  `</div>`;
25
+
26
+class WebsiteScreen extends React.Component<PropsType> {
27
+  fullUrl: string;
28
+
29
+  injectedJS: {[key: string]: string};
30
+
31
+  customPaddingFunctions: {[key: string]: (padding: string) => string};
32
+
33
+  host: string;
34
+
35
+  constructor(props: PropsType) {
36
+    super(props);
37
+    props.navigation.addListener('focus', this.onScreenFocus);
38
+    this.injectedJS = {};
39
+    this.customPaddingFunctions = {};
40
+    this.injectedJS[AvailableWebsites.websites.AVAILABLE_ROOMS] =
41
+      `document.querySelector('head').innerHTML += '${ENABLE_MOBILE_STRING}';` +
42
+      `document.querySelector('head').innerHTML += '${AVAILABLE_ROOMS_STYLE}'; true;`;
43
+
44
+    this.injectedJS[AvailableWebsites.websites.BIB] =
45
+      `document.querySelector('head').innerHTML += '${ENABLE_MOBILE_STRING}';` +
46
+      `document.querySelector('head').innerHTML += '${BIB_STYLE}';` +
47
+      `if ($(".hero-unit-form").length > 0 && $("#customBackButton").length === 0)` +
48
+      `$(".hero-unit-form").append("${BIB_BACK_BUTTON}");true;`;
49
+
50
+    this.customPaddingFunctions[AvailableWebsites.websites.BLUEMIND] = (
51
+      padding: string,
52
+    ): string => {
53
+      return (
54
+        `$('head').append('${ENABLE_MOBILE_STRING}');` +
55
+        `$('.minwidth').css('top', ${padding}` +
56
+        `$('#mailview-bottom').css('min-height', 500);`
57
+      );
62 58
     };
63
-
64
-    /**
65
-     *
66
-     */
67
-    handleNavigationParams() {
68
-        if (this.props.route.params != null) {
69
-            this.host = this.props.route.params.host;
70
-            let path = this.props.route.params.path;
71
-            const title = this.props.route.params.title;
72
-            if (this.host != null && path != null) {
73
-                path = path.replace(this.host, "");
74
-                this.fullUrl = this.host + path;
75
-            }else
76
-                this.fullUrl = this.host;
77
-
78
-            if (title != null)
79
-                this.props.navigation.setOptions({title: title});
80
-        }
59
+    this.customPaddingFunctions[AvailableWebsites.websites.WIKETUD] = (
60
+      padding: string,
61
+    ): string => {
62
+      return (
63
+        `$('#p-logo-text').css('top', 10 + ${padding});` +
64
+        `$('#site-navigation h2').css('top', 10 + ${padding});` +
65
+        `$('#site-tools h2').css('top', 10 + ${padding});` +
66
+        `$('#user-tools h2').css('top', 10 + ${padding});`
67
+      );
68
+    };
69
+  }
70
+
71
+  onScreenFocus = () => {
72
+    this.handleNavigationParams();
73
+  };
74
+
75
+  /**
76
+   *
77
+   */
78
+  handleNavigationParams() {
79
+    const {route, navigation} = this.props;
80
+    if (route.params != null) {
81
+      this.host = route.params.host;
82
+      let {path} = route.params;
83
+      const {title} = route.params;
84
+      if (this.host != null && path != null) {
85
+        path = path.replace(this.host, '');
86
+        this.fullUrl = this.host + path;
87
+      } else this.fullUrl = this.host;
88
+
89
+      if (title != null) navigation.setOptions({title});
81 90
     }
82
-
83
-    render() {
84
-        let injectedJavascript = "";
85
-        let customPadding = null;
86
-        if (this.host != null && this.injectedJS[this.host] != null)
87
-            injectedJavascript = this.injectedJS[this.host];
88
-        if (this.host != null && this.customPaddingFunctions[this.host] != null)
89
-            customPadding = this.customPaddingFunctions[this.host];
90
-
91
-        if (this.fullUrl != null) {
92
-            return (
93
-                <WebViewScreen
94
-                    {...this.props}
95
-                    url={this.fullUrl}
96
-                    customJS={injectedJavascript}
97
-                    customPaddingFunction={customPadding}
98
-                />
99
-            );
100
-        } else {
101
-            return (
102
-                <BasicLoadingScreen/>
103
-            );
104
-        }
105
-
91
+  }
92
+
93
+  render(): React.Node {
94
+    const {navigation} = this.props;
95
+    let injectedJavascript = '';
96
+    let customPadding = null;
97
+    if (this.host != null && this.injectedJS[this.host] != null)
98
+      injectedJavascript = this.injectedJS[this.host];
99
+    if (this.host != null && this.customPaddingFunctions[this.host] != null)
100
+      customPadding = this.customPaddingFunctions[this.host];
101
+
102
+    if (this.fullUrl != null) {
103
+      return (
104
+        <WebViewScreen
105
+          navigation={navigation}
106
+          url={this.fullUrl}
107
+          customJS={injectedJavascript}
108
+          customPaddingFunction={customPadding}
109
+        />
110
+      );
106 111
     }
112
+    return <BasicLoadingScreen />;
113
+  }
107 114
 }
108 115
 
109 116
 export default WebsiteScreen;

Loading…
Cancel
Save