|
@@ -1,37 +1,36 @@
|
1
|
1
|
// @flow
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
|
-import type {CustomTheme} from "../../managers/ThemeManager";
|
5
|
|
-import ThemeManager from "../../managers/ThemeManager";
|
6
|
|
-import WebViewScreen from "../../components/Screens/WebViewScreen";
|
7
|
|
-import {withTheme} from "react-native-paper";
|
8
|
|
-import i18n from "i18n-js";
|
9
|
|
-import {View} from "react-native";
|
10
|
|
-import AsyncStorageManager from "../../managers/AsyncStorageManager";
|
11
|
|
-import AlertDialog from "../../components/Dialogs/AlertDialog";
|
12
|
|
-import {dateToString, getTimeOnlyString} from "../../utils/Planning";
|
13
|
|
-import DateManager from "../../managers/DateManager";
|
14
|
|
-import AnimatedBottomBar from "../../components/Animations/AnimatedBottomBar";
|
15
|
|
-import {CommonActions} from "@react-navigation/native";
|
16
|
|
-import ErrorView from "../../components/Screens/ErrorView";
|
17
|
|
-import {StackNavigationProp} from "@react-navigation/stack";
|
18
|
|
-import type {group} from "./GroupSelectionScreen";
|
19
|
|
-import {MASCOT_STYLE} from "../../components/Mascot/Mascot";
|
20
|
|
-import MascotPopup from "../../components/Mascot/MascotPopup";
|
21
|
|
-
|
22
|
|
-type Props = {
|
23
|
|
- navigation: StackNavigationProp,
|
24
|
|
- route: { params: { group: group } },
|
25
|
|
- theme: CustomTheme,
|
26
|
|
-}
|
27
|
|
-
|
28
|
|
-type State = {
|
29
|
|
- dialogVisible: boolean,
|
30
|
|
- dialogTitle: string,
|
31
|
|
- dialogMessage: string,
|
32
|
|
- currentGroup: group,
|
33
|
|
-}
|
34
|
|
-
|
|
4
|
+import {withTheme} from 'react-native-paper';
|
|
5
|
+import i18n from 'i18n-js';
|
|
6
|
+import {View} from 'react-native';
|
|
7
|
+import {CommonActions} from '@react-navigation/native';
|
|
8
|
+import {StackNavigationProp} from '@react-navigation/stack';
|
|
9
|
+import type {CustomTheme} from '../../managers/ThemeManager';
|
|
10
|
+import ThemeManager from '../../managers/ThemeManager';
|
|
11
|
+import WebViewScreen from '../../components/Screens/WebViewScreen';
|
|
12
|
+import AsyncStorageManager from '../../managers/AsyncStorageManager';
|
|
13
|
+import AlertDialog from '../../components/Dialogs/AlertDialog';
|
|
14
|
+import {dateToString, getTimeOnlyString} from '../../utils/Planning';
|
|
15
|
+import DateManager from '../../managers/DateManager';
|
|
16
|
+import AnimatedBottomBar from '../../components/Animations/AnimatedBottomBar';
|
|
17
|
+import ErrorView from '../../components/Screens/ErrorView';
|
|
18
|
+import type {PlanexGroupType} from './GroupSelectionScreen';
|
|
19
|
+import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
|
|
20
|
+import MascotPopup from '../../components/Mascot/MascotPopup';
|
|
21
|
+
|
|
22
|
+type PropsType = {
|
|
23
|
+ navigation: StackNavigationProp,
|
|
24
|
+ route: {params: {group: PlanexGroupType}},
|
|
25
|
+ theme: CustomTheme,
|
|
26
|
+};
|
|
27
|
+
|
|
28
|
+type StateType = {
|
|
29
|
+ dialogVisible: boolean,
|
|
30
|
+ dialogTitle: string,
|
|
31
|
+ dialogMessage: string,
|
|
32
|
+ currentGroup: PlanexGroupType,
|
|
33
|
+};
|
35
|
34
|
|
36
|
35
|
const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
|
37
|
36
|
|
|
@@ -66,32 +65,32 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
|
66
|
65
|
|
67
|
66
|
// Watch for changes in the calendar and call the remove alpha function to prevent invisible events
|
68
|
67
|
const OBSERVE_MUTATIONS_INJECTED =
|
69
|
|
- 'function removeAlpha(node) {\n' +
|
70
|
|
- ' let bg = node.css("background-color");\n' +
|
71
|
|
- ' if (bg.match("^rgba")) {\n' +
|
72
|
|
- ' let a = bg.slice(5).split(\',\');\n' +
|
73
|
|
- ' // Fix for tooltips with broken background\n' +
|
74
|
|
- ' if (parseInt(a[0]) === parseInt(a[1]) && parseInt(a[1]) === parseInt(a[2]) && parseInt(a[2]) === 0) {\n' +
|
75
|
|
- ' a[0] = a[1] = a[2] = \'255\';\n' +
|
76
|
|
- ' }\n' +
|
77
|
|
- ' let newBg =\'rgb(\' + a[0] + \',\' + a[1] + \',\' + a[2] + \')\';\n' +
|
78
|
|
- ' node.css("background-color", newBg);\n' +
|
79
|
|
- ' }\n' +
|
80
|
|
- '}\n' +
|
81
|
|
- '// Observe for planning DOM changes\n' +
|
82
|
|
- 'let observer = new MutationObserver(function(mutations) {\n' +
|
83
|
|
- ' for (let i = 0; i < mutations.length; i++) {\n' +
|
84
|
|
- ' if (mutations[i][\'addedNodes\'].length > 0 &&\n' +
|
85
|
|
- ' ($(mutations[i][\'addedNodes\'][0]).hasClass("fc-event") || $(mutations[i][\'addedNodes\'][0]).hasClass("tooltiptopicevent")))\n' +
|
86
|
|
- ' removeAlpha($(mutations[i][\'addedNodes\'][0]))\n' +
|
87
|
|
- ' }\n' +
|
88
|
|
- '});\n' +
|
89
|
|
- '// observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
|
90
|
|
- 'observer.observe(document.querySelector("body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
|
91
|
|
- '// Run remove alpha a first time on whole planning. Useful when code injected after planning fully loaded.\n' +
|
92
|
|
- '$(".fc-event-container .fc-event").each(function(index) {\n' +
|
93
|
|
- ' removeAlpha($(this));\n' +
|
94
|
|
- '});';
|
|
68
|
+ 'function removeAlpha(node) {\n' +
|
|
69
|
+ ' let bg = node.css("background-color");\n' +
|
|
70
|
+ ' if (bg.match("^rgba")) {\n' +
|
|
71
|
+ " let a = bg.slice(5).split(',');\n" +
|
|
72
|
+ ' // Fix for tooltips with broken background\n' +
|
|
73
|
+ ' if (parseInt(a[0]) === parseInt(a[1]) && parseInt(a[1]) === parseInt(a[2]) && parseInt(a[2]) === 0) {\n' +
|
|
74
|
+ " a[0] = a[1] = a[2] = '255';\n" +
|
|
75
|
+ ' }\n' +
|
|
76
|
+ " let newBg ='rgb(' + a[0] + ',' + a[1] + ',' + a[2] + ')';\n" +
|
|
77
|
+ ' node.css("background-color", newBg);\n' +
|
|
78
|
+ ' }\n' +
|
|
79
|
+ '}\n' +
|
|
80
|
+ '// Observe for planning DOM changes\n' +
|
|
81
|
+ 'let observer = new MutationObserver(function(mutations) {\n' +
|
|
82
|
+ ' for (let i = 0; i < mutations.length; i++) {\n' +
|
|
83
|
+ " if (mutations[i]['addedNodes'].length > 0 &&\n" +
|
|
84
|
+ ' ($(mutations[i][\'addedNodes\'][0]).hasClass("fc-event") || $(mutations[i][\'addedNodes\'][0]).hasClass("tooltiptopicevent")))\n' +
|
|
85
|
+ " removeAlpha($(mutations[i]['addedNodes'][0]))\n" +
|
|
86
|
+ ' }\n' +
|
|
87
|
+ '});\n' +
|
|
88
|
+ '// observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
|
|
89
|
+ 'observer.observe(document.querySelector("body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
|
|
90
|
+ '// Run remove alpha a first time on whole planning. Useful when code injected after planning fully loaded.\n' +
|
|
91
|
+ '$(".fc-event-container .fc-event").each(function(index) {\n' +
|
|
92
|
+ ' removeAlpha($(this));\n' +
|
|
93
|
+ '});';
|
95
|
94
|
|
96
|
95
|
// Overrides default settings to send a message to the webview when clicking on an event
|
97
|
96
|
const FULL_CALENDAR_SETTINGS = `
|
|
@@ -108,272 +107,294 @@ calendar.option({
|
108
|
107
|
}
|
109
|
108
|
});`;
|
110
|
109
|
|
111
|
|
-const CUSTOM_CSS = "body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}";
|
112
|
|
-const CUSTOM_CSS_DARK = "body{background-color:#121212}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#222}.fc-toolbar .fc-center>*,h2,table{color:#fff}.fc-event-container{color:#121212}.fc-event-container .fc-bg{opacity:0.2;background-color:#000}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}";
|
|
110
|
+const CUSTOM_CSS =
|
|
111
|
+ 'body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-agendaWeek-view .fc-content-skeleton .fc-time{font-size:.5rem}#calendar .fc-month-view .fc-content-skeleton .fc-title{font-size:.6rem}#calendar .fc-month-view .fc-content-skeleton .fc-time{font-size:.7rem}.fc-axis{font-size:.8rem;width:15px!important}.fc-day-header{font-size:.8rem}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
|
|
112
|
+const CUSTOM_CSS_DARK =
|
|
113
|
+ 'body{background-color:#121212}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#222}.fc-toolbar .fc-center>*,h2,table{color:#fff}.fc-event-container{color:#121212}.fc-event-container .fc-bg{opacity:0.2;background-color:#000}.fc-unthemed td.fc-today{background:#be1522; opacity:0.4}';
|
113
|
114
|
|
114
|
115
|
const INJECT_STYLE = `
|
115
|
|
-$('head').append('<style>` + CUSTOM_CSS + `</style>');
|
|
116
|
+$('head').append('<style>${CUSTOM_CSS}</style>');
|
116
|
117
|
`;
|
117
|
118
|
|
118
|
119
|
/**
|
119
|
120
|
* Class defining the app's Planex screen.
|
120
|
121
|
* This screen uses a webview to render the page
|
121
|
122
|
*/
|
122
|
|
-class PlanexScreen extends React.Component<Props, State> {
|
123
|
|
-
|
124
|
|
- webScreenRef: { current: null | WebViewScreen };
|
125
|
|
- barRef: { current: null | AnimatedBottomBar };
|
126
|
|
-
|
127
|
|
- customInjectedJS: string;
|
128
|
|
-
|
129
|
|
- /**
|
130
|
|
- * Defines custom injected JavaScript to improve the page display on mobile
|
131
|
|
- */
|
132
|
|
- constructor(props) {
|
133
|
|
- super(props);
|
134
|
|
- this.webScreenRef = React.createRef();
|
135
|
|
- this.barRef = React.createRef();
|
136
|
|
-
|
137
|
|
- let currentGroup = AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.planexCurrentGroup.key);
|
138
|
|
- if (currentGroup === '')
|
139
|
|
- currentGroup = {name: "SELECT GROUP", id: -1, isFav: false};
|
140
|
|
- else {
|
141
|
|
- currentGroup = JSON.parse(currentGroup);
|
142
|
|
- props.navigation.setOptions({title: currentGroup.name})
|
143
|
|
- }
|
144
|
|
- this.state = {
|
145
|
|
- dialogVisible: false,
|
146
|
|
- dialogTitle: "",
|
147
|
|
- dialogMessage: "",
|
148
|
|
- currentGroup: currentGroup,
|
149
|
|
- };
|
150
|
|
- this.generateInjectedJS(currentGroup.id);
|
|
123
|
+class PlanexScreen extends React.Component<PropsType, StateType> {
|
|
124
|
+ webScreenRef: {current: null | WebViewScreen};
|
|
125
|
+
|
|
126
|
+ barRef: {current: null | AnimatedBottomBar};
|
|
127
|
+
|
|
128
|
+ customInjectedJS: string;
|
|
129
|
+
|
|
130
|
+ /**
|
|
131
|
+ * Defines custom injected JavaScript to improve the page display on mobile
|
|
132
|
+ */
|
|
133
|
+ constructor(props: PropsType) {
|
|
134
|
+ super(props);
|
|
135
|
+ this.webScreenRef = React.createRef();
|
|
136
|
+ this.barRef = React.createRef();
|
|
137
|
+
|
|
138
|
+ let currentGroup = AsyncStorageManager.getString(
|
|
139
|
+ AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
|
|
140
|
+ );
|
|
141
|
+ if (currentGroup === '')
|
|
142
|
+ currentGroup = {name: 'SELECT GROUP', id: -1, isFav: false};
|
|
143
|
+ else {
|
|
144
|
+ currentGroup = JSON.parse(currentGroup);
|
|
145
|
+ props.navigation.setOptions({title: currentGroup.name});
|
151
|
146
|
}
|
152
|
|
-
|
153
|
|
- /**
|
154
|
|
- * Register for events and show the banner after 2 seconds
|
155
|
|
- */
|
156
|
|
- componentDidMount() {
|
157
|
|
- this.props.navigation.addListener('focus', this.onScreenFocus);
|
158
|
|
- }
|
159
|
|
-
|
160
|
|
- /**
|
161
|
|
- * Callback used when the user clicks on the navigate to settings button.
|
162
|
|
- * This will hide the banner and open the SettingsScreen
|
163
|
|
- */
|
164
|
|
- onGoToSettings = () => this.props.navigation.navigate('settings');
|
165
|
|
-
|
166
|
|
- onScreenFocus = () => {
|
167
|
|
- this.handleNavigationParams();
|
|
147
|
+ this.state = {
|
|
148
|
+ dialogVisible: false,
|
|
149
|
+ dialogTitle: '',
|
|
150
|
+ dialogMessage: '',
|
|
151
|
+ currentGroup,
|
168
|
152
|
};
|
|
153
|
+ this.generateInjectedJS(currentGroup.id);
|
|
154
|
+ }
|
169
|
155
|
|
170
|
|
- /**
|
171
|
|
- * If navigations parameters contain a group, set it as selected
|
172
|
|
- */
|
173
|
|
- handleNavigationParams = () => {
|
174
|
|
- if (this.props.route.params != null) {
|
175
|
|
- if (this.props.route.params.group !== undefined && this.props.route.params.group !== null) {
|
176
|
|
- // reset params to prevent infinite loop
|
177
|
|
- this.selectNewGroup(this.props.route.params.group);
|
178
|
|
- this.props.navigation.dispatch(CommonActions.setParams({group: null}));
|
179
|
|
- }
|
180
|
|
- }
|
181
|
|
- };
|
|
156
|
+ /**
|
|
157
|
+ * Register for events and show the banner after 2 seconds
|
|
158
|
+ */
|
|
159
|
+ componentDidMount() {
|
|
160
|
+ const {navigation} = this.props;
|
|
161
|
+ navigation.addListener('focus', this.onScreenFocus);
|
|
162
|
+ }
|
182
|
163
|
|
183
|
|
- /**
|
184
|
|
- * Sends the webpage a message with the new group to select and save it to preferences
|
185
|
|
- *
|
186
|
|
- * @param group The group object selected
|
187
|
|
- */
|
188
|
|
- selectNewGroup(group: group) {
|
189
|
|
- this.sendMessage('setGroup', group.id);
|
190
|
|
- this.setState({currentGroup: group});
|
191
|
|
- AsyncStorageManager.set(AsyncStorageManager.PREFERENCES.planexCurrentGroup.key, group);
|
192
|
|
- this.props.navigation.setOptions({title: group.name});
|
193
|
|
- this.generateInjectedJS(group.id);
|
194
|
|
- }
|
|
164
|
+ /**
|
|
165
|
+ * Only update the screen if the dark theme changed
|
|
166
|
+ *
|
|
167
|
+ * @param nextProps
|
|
168
|
+ * @returns {boolean}
|
|
169
|
+ */
|
|
170
|
+ shouldComponentUpdate(nextProps: PropsType): boolean {
|
|
171
|
+ const {props, state} = this;
|
|
172
|
+ if (nextProps.theme.dark !== props.theme.dark)
|
|
173
|
+ this.generateInjectedJS(state.currentGroup.id);
|
|
174
|
+ return true;
|
|
175
|
+ }
|
195
|
176
|
|
196
|
|
- /**
|
197
|
|
- * Generates custom JavaScript to be injected into the webpage
|
198
|
|
- *
|
199
|
|
- * @param groupID The current group selected
|
200
|
|
- */
|
201
|
|
- generateInjectedJS(groupID: number) {
|
202
|
|
- this.customInjectedJS = "$(document).ready(function() {"
|
203
|
|
- + OBSERVE_MUTATIONS_INJECTED
|
204
|
|
- + FULL_CALENDAR_SETTINGS
|
205
|
|
- + "displayAde(" + groupID + ");" // Reset Ade
|
206
|
|
- + (DateManager.isWeekend(new Date()) ? "calendar.next()" : "")
|
207
|
|
- + INJECT_STYLE;
|
208
|
|
-
|
209
|
|
- if (ThemeManager.getNightMode())
|
210
|
|
- this.customInjectedJS += "$('head').append('<style>" + CUSTOM_CSS_DARK + "</style>');";
|
211
|
|
-
|
212
|
|
- this.customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
|
213
|
|
- }
|
|
177
|
+ /**
|
|
178
|
+ * Gets the Webview, with an error view on top if no group is selected.
|
|
179
|
+ *
|
|
180
|
+ * @returns {*}
|
|
181
|
+ */
|
|
182
|
+ getWebView(): React.Node {
|
|
183
|
+ const {props, state} = this;
|
|
184
|
+ const showWebview = state.currentGroup.id !== -1;
|
|
185
|
+
|
|
186
|
+ return (
|
|
187
|
+ <View style={{height: '100%'}}>
|
|
188
|
+ {!showWebview ? (
|
|
189
|
+ <ErrorView
|
|
190
|
+ navigation={props.navigation}
|
|
191
|
+ icon="account-clock"
|
|
192
|
+ message={i18n.t('screens.planex.noGroupSelected')}
|
|
193
|
+ showRetryButton={false}
|
|
194
|
+ />
|
|
195
|
+ ) : null}
|
|
196
|
+ <WebViewScreen
|
|
197
|
+ ref={this.webScreenRef}
|
|
198
|
+ navigation={props.navigation}
|
|
199
|
+ url={PLANEX_URL}
|
|
200
|
+ customJS={this.customInjectedJS}
|
|
201
|
+ onMessage={this.onMessage}
|
|
202
|
+ onScroll={this.onScroll}
|
|
203
|
+ showAdvancedControls={false}
|
|
204
|
+ />
|
|
205
|
+ </View>
|
|
206
|
+ );
|
|
207
|
+ }
|
214
|
208
|
|
215
|
|
- /**
|
216
|
|
- * Only update the screen if the dark theme changed
|
217
|
|
- *
|
218
|
|
- * @param nextProps
|
219
|
|
- * @returns {boolean}
|
220
|
|
- */
|
221
|
|
- shouldComponentUpdate(nextProps: Props): boolean {
|
222
|
|
- if (nextProps.theme.dark !== this.props.theme.dark)
|
223
|
|
- this.generateInjectedJS(this.state.currentGroup.id);
|
224
|
|
- return true;
|
|
209
|
+ /**
|
|
210
|
+ * Callback used when the user clicks on the navigate to settings button.
|
|
211
|
+ * This will hide the banner and open the SettingsScreen
|
|
212
|
+ */
|
|
213
|
+ onGoToSettings = () => {
|
|
214
|
+ const {navigation} = this.props;
|
|
215
|
+ navigation.navigate('settings');
|
|
216
|
+ };
|
|
217
|
+
|
|
218
|
+ onScreenFocus = () => {
|
|
219
|
+ this.handleNavigationParams();
|
|
220
|
+ };
|
|
221
|
+
|
|
222
|
+ /**
|
|
223
|
+ * Sends a FullCalendar action to the web page inside the webview.
|
|
224
|
+ *
|
|
225
|
+ * @param action The action to perform, as described in the FullCalendar doc https://fullcalendar.io/docs/v3.
|
|
226
|
+ * Or "setGroup" with the group id as data to set the selected group
|
|
227
|
+ * @param data Data to pass to the action
|
|
228
|
+ */
|
|
229
|
+ sendMessage = (action: string, data: string) => {
|
|
230
|
+ let command;
|
|
231
|
+ if (action === 'setGroup') command = `displayAde(${data})`;
|
|
232
|
+ else command = `$('#calendar').fullCalendar('${action}', '${data}')`;
|
|
233
|
+ if (this.webScreenRef.current != null)
|
|
234
|
+ this.webScreenRef.current.injectJavaScript(`${command};true;`); // Injected javascript must end with true
|
|
235
|
+ };
|
|
236
|
+
|
|
237
|
+ /**
|
|
238
|
+ * Shows a dialog when the user clicks on an event.
|
|
239
|
+ *
|
|
240
|
+ * @param event
|
|
241
|
+ */
|
|
242
|
+ onMessage = (event: {nativeEvent: {data: string}}) => {
|
|
243
|
+ const data: {
|
|
244
|
+ start: string,
|
|
245
|
+ end: string,
|
|
246
|
+ title: string,
|
|
247
|
+ color: string,
|
|
248
|
+ } = JSON.parse(event.nativeEvent.data);
|
|
249
|
+ const startDate = dateToString(new Date(data.start), true);
|
|
250
|
+ const endDate = dateToString(new Date(data.end), true);
|
|
251
|
+ const startString = getTimeOnlyString(startDate);
|
|
252
|
+ const endString = getTimeOnlyString(endDate);
|
|
253
|
+
|
|
254
|
+ let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`;
|
|
255
|
+ if (startString != null && endString != null)
|
|
256
|
+ msg += `${startString} - ${endString}`;
|
|
257
|
+ this.showDialog(data.title, msg);
|
|
258
|
+ };
|
|
259
|
+
|
|
260
|
+ /**
|
|
261
|
+ * Shows a simple dialog to the user.
|
|
262
|
+ *
|
|
263
|
+ * @param title The dialog's title
|
|
264
|
+ * @param message The message to show
|
|
265
|
+ */
|
|
266
|
+ showDialog = (title: string, message: string) => {
|
|
267
|
+ this.setState({
|
|
268
|
+ dialogVisible: true,
|
|
269
|
+ dialogTitle: title,
|
|
270
|
+ dialogMessage: message,
|
|
271
|
+ });
|
|
272
|
+ };
|
|
273
|
+
|
|
274
|
+ /**
|
|
275
|
+ * Hides the dialog
|
|
276
|
+ */
|
|
277
|
+ hideDialog = () => {
|
|
278
|
+ this.setState({
|
|
279
|
+ dialogVisible: false,
|
|
280
|
+ });
|
|
281
|
+ };
|
|
282
|
+
|
|
283
|
+ /**
|
|
284
|
+ * Binds the onScroll event to the control bar for automatic hiding based on scroll direction and speed
|
|
285
|
+ *
|
|
286
|
+ * @param event
|
|
287
|
+ */
|
|
288
|
+ onScroll = (event: SyntheticEvent<EventTarget>) => {
|
|
289
|
+ if (this.barRef.current != null) this.barRef.current.onScroll(event);
|
|
290
|
+ };
|
|
291
|
+
|
|
292
|
+ /**
|
|
293
|
+ * If navigations parameters contain a group, set it as selected
|
|
294
|
+ */
|
|
295
|
+ handleNavigationParams = () => {
|
|
296
|
+ const {props} = this;
|
|
297
|
+ if (props.route.params != null) {
|
|
298
|
+ if (
|
|
299
|
+ props.route.params.group !== undefined &&
|
|
300
|
+ props.route.params.group !== null
|
|
301
|
+ ) {
|
|
302
|
+ // reset params to prevent infinite loop
|
|
303
|
+ this.selectNewGroup(props.route.params.group);
|
|
304
|
+ props.navigation.dispatch(CommonActions.setParams({group: null}));
|
|
305
|
+ }
|
225
|
306
|
}
|
|
307
|
+ };
|
|
308
|
+
|
|
309
|
+ /**
|
|
310
|
+ * Sends the webpage a message with the new group to select and save it to preferences
|
|
311
|
+ *
|
|
312
|
+ * @param group The group object selected
|
|
313
|
+ */
|
|
314
|
+ selectNewGroup(group: PlanexGroupType) {
|
|
315
|
+ const {navigation} = this.props;
|
|
316
|
+ this.sendMessage('setGroup', group.id.toString());
|
|
317
|
+ this.setState({currentGroup: group});
|
|
318
|
+ AsyncStorageManager.set(
|
|
319
|
+ AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
|
|
320
|
+ group,
|
|
321
|
+ );
|
|
322
|
+ navigation.setOptions({title: group.name});
|
|
323
|
+ this.generateInjectedJS(group.id);
|
|
324
|
+ }
|
226
|
325
|
|
|
326
|
+ /**
|
|
327
|
+ * Generates custom JavaScript to be injected into the webpage
|
|
328
|
+ *
|
|
329
|
+ * @param groupID The current group selected
|
|
330
|
+ */
|
|
331
|
+ generateInjectedJS(groupID: number) {
|
|
332
|
+ this.customInjectedJS = `$(document).ready(function() {${OBSERVE_MUTATIONS_INJECTED}${FULL_CALENDAR_SETTINGS}displayAde(${groupID});${
|
|
333
|
+ // Reset Ade
|
|
334
|
+ DateManager.isWeekend(new Date()) ? 'calendar.next()' : ''
|
|
335
|
+ }${INJECT_STYLE}`;
|
|
336
|
+
|
|
337
|
+ if (ThemeManager.getNightMode())
|
|
338
|
+ this.customInjectedJS += `$('head').append('<style>${CUSTOM_CSS_DARK}</style>');`;
|
|
339
|
+
|
|
340
|
+ this.customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
|
|
341
|
+ }
|
227
|
342
|
|
228
|
|
- /**
|
229
|
|
- * Sends a FullCalendar action to the web page inside the webview.
|
230
|
|
- *
|
231
|
|
- * @param action The action to perform, as described in the FullCalendar doc https://fullcalendar.io/docs/v3.
|
232
|
|
- * Or "setGroup" with the group id as data to set the selected group
|
233
|
|
- * @param data Data to pass to the action
|
234
|
|
- */
|
235
|
|
- sendMessage = (action: string, data: any) => {
|
236
|
|
- let command;
|
237
|
|
- if (action === "setGroup")
|
238
|
|
- command = "displayAde(" + data + ")";
|
239
|
|
- else
|
240
|
|
- command = "$('#calendar').fullCalendar('" + action + "', '" + data + "')";
|
241
|
|
- if (this.webScreenRef.current != null)
|
242
|
|
- this.webScreenRef.current.injectJavaScript(command + ';true;'); // Injected javascript must end with true
|
243
|
|
- };
|
244
|
|
-
|
245
|
|
- /**
|
246
|
|
- * Shows a dialog when the user clicks on an event.
|
247
|
|
- *
|
248
|
|
- * @param event
|
249
|
|
- */
|
250
|
|
- onMessage = (event: { nativeEvent: { data: string } }) => {
|
251
|
|
- const data: { start: string, end: string, title: string, color: string } = JSON.parse(event.nativeEvent.data);
|
252
|
|
- const startDate = dateToString(new Date(data.start), true);
|
253
|
|
- const endDate = dateToString(new Date(data.end), true);
|
254
|
|
- const startString = getTimeOnlyString(startDate);
|
255
|
|
- const endString = getTimeOnlyString(endDate);
|
256
|
|
-
|
257
|
|
- let msg = DateManager.getInstance().getTranslatedDate(startDate) + "\n";
|
258
|
|
- if (startString != null && endString != null)
|
259
|
|
- msg += startString + ' - ' + endString;
|
260
|
|
- this.showDialog(data.title, msg)
|
261
|
|
- };
|
262
|
|
-
|
263
|
|
- /**
|
264
|
|
- * Shows a simple dialog to the user.
|
265
|
|
- *
|
266
|
|
- * @param title The dialog's title
|
267
|
|
- * @param message The message to show
|
268
|
|
- */
|
269
|
|
- showDialog = (title: string, message: string) => {
|
270
|
|
- this.setState({
|
271
|
|
- dialogVisible: true,
|
272
|
|
- dialogTitle: title,
|
273
|
|
- dialogMessage: message,
|
274
|
|
- });
|
275
|
|
- };
|
276
|
|
-
|
277
|
|
- /**
|
278
|
|
- * Hides the dialog
|
279
|
|
- */
|
280
|
|
- hideDialog = () => {
|
281
|
|
- this.setState({
|
282
|
|
- dialogVisible: false,
|
283
|
|
- });
|
284
|
|
- };
|
285
|
|
-
|
286
|
|
- /**
|
287
|
|
- * Binds the onScroll event to the control bar for automatic hiding based on scroll direction and speed
|
288
|
|
- *
|
289
|
|
- * @param event
|
290
|
|
- */
|
291
|
|
- onScroll = (event: SyntheticEvent<EventTarget>) => {
|
292
|
|
- if (this.barRef.current != null)
|
293
|
|
- this.barRef.current.onScroll(event);
|
294
|
|
- };
|
295
|
|
-
|
296
|
|
- /**
|
297
|
|
- * Gets the Webview, with an error view on top if no group is selected.
|
298
|
|
- *
|
299
|
|
- * @returns {*}
|
300
|
|
- */
|
301
|
|
- getWebView() {
|
302
|
|
- const showWebview = this.state.currentGroup.id !== -1;
|
303
|
|
-
|
304
|
|
- return (
|
305
|
|
- <View style={{height: '100%'}}>
|
306
|
|
- {!showWebview
|
307
|
|
- ? <ErrorView
|
308
|
|
- {...this.props}
|
309
|
|
- icon={'account-clock'}
|
310
|
|
- message={i18n.t("screens.planex.noGroupSelected")}
|
311
|
|
- showRetryButton={false}
|
312
|
|
- />
|
313
|
|
- : null}
|
314
|
|
- <WebViewScreen
|
315
|
|
- ref={this.webScreenRef}
|
316
|
|
- navigation={this.props.navigation}
|
317
|
|
- url={PLANEX_URL}
|
318
|
|
- customJS={this.customInjectedJS}
|
319
|
|
- onMessage={this.onMessage}
|
320
|
|
- onScroll={this.onScroll}
|
321
|
|
- showAdvancedControls={false}
|
322
|
|
- />
|
323
|
|
- </View>
|
324
|
|
- );
|
325
|
|
- }
|
326
|
|
-
|
327
|
|
- render() {
|
328
|
|
- return (
|
329
|
|
- <View
|
330
|
|
- style={{flex: 1}}
|
331
|
|
- >
|
332
|
|
- {/*Allow to draw webview bellow banner*/}
|
333
|
|
- <View style={{
|
334
|
|
- position: 'absolute',
|
335
|
|
- height: '100%',
|
336
|
|
- width: '100%',
|
337
|
|
- }}>
|
338
|
|
- {this.props.theme.dark // Force component theme update by recreating it on theme change
|
339
|
|
- ? this.getWebView()
|
340
|
|
- : <View style={{height: '100%'}}>{this.getWebView()}</View>}
|
341
|
|
- </View>
|
342
|
|
- {AsyncStorageManager.getString(AsyncStorageManager.PREFERENCES.defaultStartScreen.key)
|
343
|
|
- .toLowerCase() !== 'planex'
|
344
|
|
- ? <MascotPopup
|
345
|
|
- prefKey={AsyncStorageManager.PREFERENCES.planexShowBanner.key}
|
346
|
|
- title={i18n.t("screens.planex.mascotDialog.title")}
|
347
|
|
- message={i18n.t("screens.planex.mascotDialog.message")}
|
348
|
|
- icon={"emoticon-kiss"}
|
349
|
|
- buttons={{
|
350
|
|
- action: {
|
351
|
|
- message: i18n.t("screens.planex.mascotDialog.ok"),
|
352
|
|
- icon: "cog",
|
353
|
|
- onPress: this.onGoToSettings,
|
354
|
|
- },
|
355
|
|
- cancel: {
|
356
|
|
- message: i18n.t("screens.planex.mascotDialog.cancel"),
|
357
|
|
- icon: "close",
|
358
|
|
- color: this.props.theme.colors.warning,
|
359
|
|
- }
|
360
|
|
- }}
|
361
|
|
- emotion={MASCOT_STYLE.INTELLO}
|
362
|
|
- /> : null }
|
363
|
|
- <AlertDialog
|
364
|
|
- visible={this.state.dialogVisible}
|
365
|
|
- onDismiss={this.hideDialog}
|
366
|
|
- title={this.state.dialogTitle}
|
367
|
|
- message={this.state.dialogMessage}/>
|
368
|
|
- <AnimatedBottomBar
|
369
|
|
- {...this.props}
|
370
|
|
- ref={this.barRef}
|
371
|
|
- onPress={this.sendMessage}
|
372
|
|
- seekAttention={this.state.currentGroup.id === -1}
|
373
|
|
- />
|
374
|
|
- </View>
|
375
|
|
- );
|
376
|
|
- }
|
|
343
|
+ render(): React.Node {
|
|
344
|
+ const {props, state} = this;
|
|
345
|
+ return (
|
|
346
|
+ <View style={{flex: 1}}>
|
|
347
|
+ {/* Allow to draw webview bellow banner */}
|
|
348
|
+ <View
|
|
349
|
+ style={{
|
|
350
|
+ position: 'absolute',
|
|
351
|
+ height: '100%',
|
|
352
|
+ width: '100%',
|
|
353
|
+ }}>
|
|
354
|
+ {props.theme.dark ? ( // Force component theme update by recreating it on theme change
|
|
355
|
+ this.getWebView()
|
|
356
|
+ ) : (
|
|
357
|
+ <View style={{height: '100%'}}>{this.getWebView()}</View>
|
|
358
|
+ )}
|
|
359
|
+ </View>
|
|
360
|
+ {AsyncStorageManager.getString(
|
|
361
|
+ AsyncStorageManager.PREFERENCES.defaultStartScreen.key,
|
|
362
|
+ ).toLowerCase() !== 'planex' ? (
|
|
363
|
+ <MascotPopup
|
|
364
|
+ prefKey={AsyncStorageManager.PREFERENCES.planexShowBanner.key}
|
|
365
|
+ title={i18n.t('screens.planex.mascotDialog.title')}
|
|
366
|
+ message={i18n.t('screens.planex.mascotDialog.message')}
|
|
367
|
+ icon="emoticon-kiss"
|
|
368
|
+ buttons={{
|
|
369
|
+ action: {
|
|
370
|
+ message: i18n.t('screens.planex.mascotDialog.ok'),
|
|
371
|
+ icon: 'cog',
|
|
372
|
+ onPress: this.onGoToSettings,
|
|
373
|
+ },
|
|
374
|
+ cancel: {
|
|
375
|
+ message: i18n.t('screens.planex.mascotDialog.cancel'),
|
|
376
|
+ icon: 'close',
|
|
377
|
+ color: props.theme.colors.warning,
|
|
378
|
+ },
|
|
379
|
+ }}
|
|
380
|
+ emotion={MASCOT_STYLE.INTELLO}
|
|
381
|
+ />
|
|
382
|
+ ) : null}
|
|
383
|
+ <AlertDialog
|
|
384
|
+ visible={state.dialogVisible}
|
|
385
|
+ onDismiss={this.hideDialog}
|
|
386
|
+ title={state.dialogTitle}
|
|
387
|
+ message={state.dialogMessage}
|
|
388
|
+ />
|
|
389
|
+ <AnimatedBottomBar
|
|
390
|
+ navigation={props.navigation}
|
|
391
|
+ ref={this.barRef}
|
|
392
|
+ onPress={this.sendMessage}
|
|
393
|
+ seekAttention={state.currentGroup.id === -1}
|
|
394
|
+ />
|
|
395
|
+ </View>
|
|
396
|
+ );
|
|
397
|
+ }
|
377
|
398
|
}
|
378
|
399
|
|
379
|
400
|
export default withTheme(PlanexScreen);
|