|
@@ -22,11 +22,10 @@
|
22
|
22
|
import * as React from 'react';
|
23
|
23
|
import {Title, withTheme} from 'react-native-paper';
|
24
|
24
|
import i18n from 'i18n-js';
|
25
|
|
-import {View} from 'react-native';
|
|
25
|
+import {NativeScrollEvent, NativeSyntheticEvent, View} from 'react-native';
|
26
|
26
|
import {CommonActions} from '@react-navigation/native';
|
27
|
27
|
import {StackNavigationProp} from '@react-navigation/stack';
|
28
|
28
|
import Autolink from 'react-native-autolink';
|
29
|
|
-import type {CustomThemeType} from '../../managers/ThemeManager';
|
30
|
29
|
import ThemeManager from '../../managers/ThemeManager';
|
31
|
30
|
import WebViewScreen from '../../components/Screens/WebViewScreen';
|
32
|
31
|
import AsyncStorageManager from '../../managers/AsyncStorageManager';
|
|
@@ -40,16 +39,16 @@ import {MASCOT_STYLE} from '../../components/Mascot/Mascot';
|
40
|
39
|
import MascotPopup from '../../components/Mascot/MascotPopup';
|
41
|
40
|
|
42
|
41
|
type PropsType = {
|
43
|
|
- navigation: StackNavigationProp,
|
44
|
|
- route: {params: {group: PlanexGroupType}},
|
45
|
|
- theme: CustomThemeType,
|
|
42
|
+ navigation: StackNavigationProp<any>;
|
|
43
|
+ route: {params: {group: PlanexGroupType}};
|
|
44
|
+ theme: ReactNativePaper.Theme;
|
46
|
45
|
};
|
47
|
46
|
|
48
|
47
|
type StateType = {
|
49
|
|
- dialogVisible: boolean,
|
50
|
|
- dialogTitle: string | React.Node,
|
51
|
|
- dialogMessage: string,
|
52
|
|
- currentGroup: PlanexGroupType,
|
|
48
|
+ dialogVisible: boolean;
|
|
49
|
+ dialogTitle: string | React.ReactNode;
|
|
50
|
+ dialogMessage: string;
|
|
51
|
+ currentGroup: PlanexGroupType;
|
53
|
52
|
};
|
54
|
53
|
|
55
|
54
|
const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
|
|
@@ -154,14 +153,15 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
|
154
|
153
|
super(props);
|
155
|
154
|
this.webScreenRef = React.createRef();
|
156
|
155
|
this.barRef = React.createRef();
|
157
|
|
-
|
158
|
|
- let currentGroup = AsyncStorageManager.getString(
|
|
156
|
+ this.customInjectedJS = '';
|
|
157
|
+ let currentGroupString = AsyncStorageManager.getString(
|
159
|
158
|
AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
|
160
|
159
|
);
|
161
|
|
- if (currentGroup === '')
|
162
|
|
- currentGroup = {name: 'SELECT GROUP', id: -1, isFav: false};
|
163
|
|
- else {
|
164
|
|
- currentGroup = JSON.parse(currentGroup);
|
|
160
|
+ let currentGroup: PlanexGroupType;
|
|
161
|
+ if (currentGroupString === '') {
|
|
162
|
+ currentGroup = {name: 'SELECT GROUP', id: -1};
|
|
163
|
+ } else {
|
|
164
|
+ currentGroup = JSON.parse(currentGroupString);
|
165
|
165
|
props.navigation.setOptions({title: currentGroup.name});
|
166
|
166
|
}
|
167
|
167
|
this.state = {
|
|
@@ -189,8 +189,9 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
|
189
|
189
|
*/
|
190
|
190
|
shouldComponentUpdate(nextProps: PropsType): boolean {
|
191
|
191
|
const {props, state} = this;
|
192
|
|
- if (nextProps.theme.dark !== props.theme.dark)
|
|
192
|
+ if (nextProps.theme.dark !== props.theme.dark) {
|
193
|
193
|
this.generateInjectedJS(state.currentGroup.id);
|
|
194
|
+ }
|
194
|
195
|
return true;
|
195
|
196
|
}
|
196
|
197
|
|
|
@@ -199,7 +200,7 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
|
199
|
200
|
*
|
200
|
201
|
* @returns {*}
|
201
|
202
|
*/
|
202
|
|
- getWebView(): React.Node {
|
|
203
|
+ getWebView() {
|
203
|
204
|
const {props, state} = this;
|
204
|
205
|
const showWebview = state.currentGroup.id !== -1;
|
205
|
206
|
|
|
@@ -246,12 +247,16 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
|
246
|
247
|
* Or "setGroup" with the group id as data to set the selected group
|
247
|
248
|
* @param data Data to pass to the action
|
248
|
249
|
*/
|
249
|
|
- sendMessage = (action: string, data: string) => {
|
|
250
|
+ sendMessage = (action: string, data?: string) => {
|
250
|
251
|
let command;
|
251
|
|
- if (action === 'setGroup') command = `displayAde(${data})`;
|
252
|
|
- else command = `$('#calendar').fullCalendar('${action}', '${data}')`;
|
253
|
|
- if (this.webScreenRef.current != null)
|
254
|
|
- this.webScreenRef.current.injectJavaScript(`${command};true;`); // Injected javascript must end with true
|
|
252
|
+ if (action === 'setGroup') {
|
|
253
|
+ command = `displayAde(${data})`;
|
|
254
|
+ } else {
|
|
255
|
+ command = `$('#calendar').fullCalendar('${action}', '${data}')`;
|
|
256
|
+ }
|
|
257
|
+ if (this.webScreenRef.current != null) {
|
|
258
|
+ this.webScreenRef.current.injectJavaScript(`${command};true;`);
|
|
259
|
+ } // Injected javascript must end with true
|
255
|
260
|
};
|
256
|
261
|
|
257
|
262
|
/**
|
|
@@ -261,10 +266,10 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
|
261
|
266
|
*/
|
262
|
267
|
onMessage = (event: {nativeEvent: {data: string}}) => {
|
263
|
268
|
const data: {
|
264
|
|
- start: string,
|
265
|
|
- end: string,
|
266
|
|
- title: string,
|
267
|
|
- color: string,
|
|
269
|
+ start: string;
|
|
270
|
+ end: string;
|
|
271
|
+ title: string;
|
|
272
|
+ color: string;
|
268
|
273
|
} = JSON.parse(event.nativeEvent.data);
|
269
|
274
|
const startDate = dateToString(new Date(data.start), true);
|
270
|
275
|
const endDate = dateToString(new Date(data.end), true);
|
|
@@ -272,8 +277,9 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
|
272
|
277
|
const endString = getTimeOnlyString(endDate);
|
273
|
278
|
|
274
|
279
|
let msg = `${DateManager.getInstance().getTranslatedDate(startDate)}\n`;
|
275
|
|
- if (startString != null && endString != null)
|
|
280
|
+ if (startString != null && endString != null) {
|
276
|
281
|
msg += `${startString} - ${endString}`;
|
|
282
|
+ }
|
277
|
283
|
this.showDialog(data.title, msg);
|
278
|
284
|
};
|
279
|
285
|
|
|
@@ -286,7 +292,8 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
|
286
|
292
|
showDialog = (title: string, message: string) => {
|
287
|
293
|
this.setState({
|
288
|
294
|
dialogVisible: true,
|
289
|
|
- dialogTitle: <Autolink text={title} component={Title}/>,
|
|
295
|
+ // @ts-ignore
|
|
296
|
+ dialogTitle: <Autolink text={title} component={Title} />,
|
290
|
297
|
dialogMessage: message,
|
291
|
298
|
});
|
292
|
299
|
};
|
|
@@ -305,8 +312,10 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
|
305
|
312
|
*
|
306
|
313
|
* @param event
|
307
|
314
|
*/
|
308
|
|
- onScroll = (event: SyntheticEvent<EventTarget>) => {
|
309
|
|
- if (this.barRef.current != null) this.barRef.current.onScroll(event);
|
|
315
|
+ onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
|
|
316
|
+ if (this.barRef.current != null) {
|
|
317
|
+ this.barRef.current.onScroll(event);
|
|
318
|
+ }
|
310
|
319
|
};
|
311
|
320
|
|
312
|
321
|
/**
|
|
@@ -354,13 +363,14 @@ class PlanexScreen extends React.Component<PropsType, StateType> {
|
354
|
363
|
DateManager.isWeekend(new Date()) ? 'calendar.next()' : ''
|
355
|
364
|
}${INJECT_STYLE}`;
|
356
|
365
|
|
357
|
|
- if (ThemeManager.getNightMode())
|
|
366
|
+ if (ThemeManager.getNightMode()) {
|
358
|
367
|
this.customInjectedJS += `$('head').append('<style>${CUSTOM_CSS_DARK}</style>');`;
|
|
368
|
+ }
|
359
|
369
|
|
360
|
370
|
this.customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
|
361
|
371
|
}
|
362
|
372
|
|
363
|
|
- render(): React.Node {
|
|
373
|
+ render() {
|
364
|
374
|
const {props, state} = this;
|
365
|
375
|
return (
|
366
|
376
|
<View style={{flex: 1}}>
|