|
@@ -17,122 +17,27 @@
|
17
|
17
|
* along with Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
18
|
18
|
*/
|
19
|
19
|
|
20
|
|
-import React, { useCallback, useRef, useState } from 'react';
|
|
20
|
+import React, { useCallback, useState } from 'react';
|
21
|
21
|
import { Title, useTheme } from 'react-native-paper';
|
22
|
22
|
import i18n from 'i18n-js';
|
23
|
|
-import {
|
24
|
|
- NativeScrollEvent,
|
25
|
|
- NativeSyntheticEvent,
|
26
|
|
- StyleSheet,
|
27
|
|
- View,
|
28
|
|
-} from 'react-native';
|
|
23
|
+import { StyleSheet, View } from 'react-native';
|
29
|
24
|
import {
|
30
|
25
|
CommonActions,
|
31
|
26
|
useFocusEffect,
|
32
|
27
|
useNavigation,
|
33
|
28
|
} from '@react-navigation/native';
|
34
|
29
|
import Autolink from 'react-native-autolink';
|
35
|
|
-import ThemeManager from '../../managers/ThemeManager';
|
36
|
|
-import WebViewScreen from '../../components/Screens/WebViewScreen';
|
37
|
30
|
import AsyncStorageManager from '../../managers/AsyncStorageManager';
|
38
|
31
|
import AlertDialog from '../../components/Dialogs/AlertDialog';
|
39
|
32
|
import { dateToString, getTimeOnlyString } from '../../utils/Planning';
|
40
|
33
|
import DateManager from '../../managers/DateManager';
|
41
|
|
-import AnimatedBottomBar from '../../components/Animations/AnimatedBottomBar';
|
42
|
|
-import ErrorView from '../../components/Screens/ErrorView';
|
43
|
34
|
import type { PlanexGroupType } from './GroupSelectionScreen';
|
44
|
35
|
import { MASCOT_STYLE } from '../../components/Mascot/Mascot';
|
45
|
36
|
import MascotPopup from '../../components/Mascot/MascotPopup';
|
46
|
37
|
import { getPrettierPlanexGroupName } from '../../utils/Utils';
|
47
|
38
|
import GENERAL_STYLES from '../../constants/Styles';
|
48
|
|
-import Urls from '../../constants/Urls';
|
49
|
|
-
|
50
|
|
-// // JS + JQuery functions used to remove alpha from events. Copy paste in browser console for quick testing
|
51
|
|
-// // Remove alpha from given Jquery node
|
52
|
|
-// function removeAlpha(node) {
|
53
|
|
-// let bg = node.css("background-color");
|
54
|
|
-// if (bg.match("^rgba")) {
|
55
|
|
-// let a = bg.slice(5).split(',');
|
56
|
|
-// // Fix for tooltips with broken background
|
57
|
|
-// if (parseInt(a[0]) === parseInt(a[1]) && parseInt(a[1]) === parseInt(a[2]) && parseInt(a[2]) === 0) {
|
58
|
|
-// a[0] = a[1] = a[2] = '255';
|
59
|
|
-// }
|
60
|
|
-// let newBg ='rgb(' + a[0] + ',' + a[1] + ',' + a[2] + ')';
|
61
|
|
-// node.css("background-color", newBg);
|
62
|
|
-// }
|
63
|
|
-// }
|
64
|
|
-// // Observe for planning DOM changes
|
65
|
|
-// let observer = new MutationObserver(function(mutations) {
|
66
|
|
-// for (let i = 0; i < mutations.length; i++) {
|
67
|
|
-// if (mutations[i]['addedNodes'].length > 0 &&
|
68
|
|
-// ($(mutations[i]['addedNodes'][0]).hasClass("fc-event") || $(mutations[i]['addedNodes'][0]).hasClass("tooltiptopicevent")))
|
69
|
|
-// removeAlpha($(mutations[i]['addedNodes'][0]))
|
70
|
|
-// }
|
71
|
|
-// });
|
72
|
|
-// // observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});
|
73
|
|
-// observer.observe(document.querySelector("body"), {attributes: false, childList: true, characterData: false, subtree:true});
|
74
|
|
-// // Run remove alpha a first time on whole planning. Useful when code injected after planning fully loaded.
|
75
|
|
-// $(".fc-event-container .fc-event").each(function(index) {
|
76
|
|
-// removeAlpha($(this));
|
77
|
|
-// });
|
78
|
|
-
|
79
|
|
-// Watch for changes in the calendar and call the remove alpha function to prevent invisible events
|
80
|
|
-const OBSERVE_MUTATIONS_INJECTED =
|
81
|
|
- 'function removeAlpha(node) {\n' +
|
82
|
|
- ' let bg = node.css("background-color");\n' +
|
83
|
|
- ' if (bg.match("^rgba")) {\n' +
|
84
|
|
- " let a = bg.slice(5).split(',');\n" +
|
85
|
|
- ' // Fix for tooltips with broken background\n' +
|
86
|
|
- ' if (parseInt(a[0]) === parseInt(a[1]) && parseInt(a[1]) === parseInt(a[2]) && parseInt(a[2]) === 0) {\n' +
|
87
|
|
- " a[0] = a[1] = a[2] = '255';\n" +
|
88
|
|
- ' }\n' +
|
89
|
|
- " let newBg ='rgb(' + a[0] + ',' + a[1] + ',' + a[2] + ')';\n" +
|
90
|
|
- ' node.css("background-color", newBg);\n' +
|
91
|
|
- ' }\n' +
|
92
|
|
- '}\n' +
|
93
|
|
- '// Observe for planning DOM changes\n' +
|
94
|
|
- 'let observer = new MutationObserver(function(mutations) {\n' +
|
95
|
|
- ' for (let i = 0; i < mutations.length; i++) {\n' +
|
96
|
|
- " if (mutations[i]['addedNodes'].length > 0 &&\n" +
|
97
|
|
- ' ($(mutations[i][\'addedNodes\'][0]).hasClass("fc-event") || $(mutations[i][\'addedNodes\'][0]).hasClass("tooltiptopicevent")))\n' +
|
98
|
|
- " removeAlpha($(mutations[i]['addedNodes'][0]))\n" +
|
99
|
|
- ' }\n' +
|
100
|
|
- '});\n' +
|
101
|
|
- '// observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
|
102
|
|
- 'observer.observe(document.querySelector("body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
|
103
|
|
- '// Run remove alpha a first time on whole planning. Useful when code injected after planning fully loaded.\n' +
|
104
|
|
- '$(".fc-event-container .fc-event").each(function(index) {\n' +
|
105
|
|
- ' removeAlpha($(this));\n' +
|
106
|
|
- '});';
|
107
|
|
-
|
108
|
|
-// Overrides default settings to send a message to the webview when clicking on an event
|
109
|
|
-const FULL_CALENDAR_SETTINGS = `
|
110
|
|
-let calendar = $('#calendar').fullCalendar('getCalendar');
|
111
|
|
-calendar.option({
|
112
|
|
- eventClick: function (data, event, view) {
|
113
|
|
- let message = {
|
114
|
|
- title: data.title,
|
115
|
|
- color: data.color,
|
116
|
|
- start: data.start._d,
|
117
|
|
- end: data.end._d,
|
118
|
|
- };
|
119
|
|
- window.ReactNativeWebView.postMessage(JSON.stringify(message));
|
120
|
|
- }
|
121
|
|
-});`;
|
122
|
|
-
|
123
|
|
-// Mobile friendly CSS
|
124
|
|
-const CUSTOM_CSS =
|
125
|
|
- '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}';
|
126
|
|
-
|
127
|
|
-// Dark mode CSS, to be used with the mobile friendly css
|
128
|
|
-const CUSTOM_CSS_DARK =
|
129
|
|
- '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}';
|
130
|
|
-
|
131
|
|
-// Inject the custom css into the webpage
|
132
|
|
-const INJECT_STYLE = `$('head').append('<style>${CUSTOM_CSS}</style>');`;
|
133
|
|
-
|
134
|
|
-// Inject the dark mode into the webpage, to call after the custom css inject above
|
135
|
|
-const INJECT_STYLE_DARK = `$('head').append('<style>${CUSTOM_CSS_DARK}</style>');`;
|
|
39
|
+import PlanexWebview from '../../components/Screens/PlanexWebview';
|
|
40
|
+import PlanexBottomBar from '../../components/Animations/PlanexBottomBar';
|
136
|
41
|
|
137
|
42
|
const styles = StyleSheet.create({
|
138
|
43
|
container: {
|
|
@@ -140,6 +45,9 @@ const styles = StyleSheet.create({
|
140
|
45
|
height: '100%',
|
141
|
46
|
width: '100%',
|
142
|
47
|
},
|
|
48
|
+ popup: {
|
|
49
|
+ borderWidth: 2,
|
|
50
|
+ },
|
143
|
51
|
});
|
144
|
52
|
|
145
|
53
|
type Props = {
|
|
@@ -153,7 +61,6 @@ type Props = {
|
153
|
61
|
function PlanexScreen(props: Props) {
|
154
|
62
|
const navigation = useNavigation();
|
155
|
63
|
const theme = useTheme();
|
156
|
|
- const barRef = useRef<typeof AnimatedBottomBar>();
|
157
|
64
|
|
158
|
65
|
const [dialogContent, setDialogContent] = useState<
|
159
|
66
|
| undefined
|
|
@@ -199,26 +106,13 @@ function PlanexScreen(props: Props) {
|
199
|
106
|
*
|
200
|
107
|
* @returns {*}
|
201
|
108
|
*/
|
202
|
|
- const getWebView = () => {
|
203
|
|
- return (
|
204
|
|
- <View style={GENERAL_STYLES.flex}>
|
205
|
|
- {!currentGroup ? (
|
206
|
|
- <ErrorView
|
207
|
|
- icon={'account-clock'}
|
208
|
|
- message={i18n.t('screens.planex.noGroupSelected')}
|
209
|
|
- />
|
210
|
|
- ) : null}
|
211
|
|
- <WebViewScreen
|
212
|
|
- url={Urls.planex.planning}
|
213
|
|
- initialJS={generateInjectedJS(currentGroup)}
|
214
|
|
- injectJS={injectJS}
|
215
|
|
- onMessage={onMessage}
|
216
|
|
- onScroll={onScroll}
|
217
|
|
- showAdvancedControls={false}
|
218
|
|
- />
|
219
|
|
- </View>
|
220
|
|
- );
|
221
|
|
- };
|
|
109
|
+ const getWebView = () => (
|
|
110
|
+ <PlanexWebview
|
|
111
|
+ currentGroup={currentGroup}
|
|
112
|
+ injectJS={injectJS}
|
|
113
|
+ onMessage={onMessage}
|
|
114
|
+ />
|
|
115
|
+ );
|
222
|
116
|
|
223
|
117
|
/**
|
224
|
118
|
* Callback used when the user clicks on the navigate to settings button.
|
|
@@ -301,17 +195,6 @@ function PlanexScreen(props: Props) {
|
301
|
195
|
const hideDialog = () => setDialogContent(undefined);
|
302
|
196
|
|
303
|
197
|
/**
|
304
|
|
- * Binds the onScroll event to the control bar for automatic hiding based on scroll direction and speed
|
305
|
|
- *
|
306
|
|
- * @param event
|
307
|
|
- */
|
308
|
|
- const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
|
309
|
|
- if (barRef.current) {
|
310
|
|
- barRef.current.onScroll(event);
|
311
|
|
- }
|
312
|
|
- };
|
313
|
|
-
|
314
|
|
- /**
|
315
|
198
|
* Sends the webpage a message with the new group to select and save it to preferences
|
316
|
199
|
*
|
317
|
200
|
* @param group The group object selected
|
|
@@ -323,30 +206,8 @@ function PlanexScreen(props: Props) {
|
323
|
206
|
AsyncStorageManager.PREFERENCES.planexCurrentGroup.key,
|
324
|
207
|
group
|
325
|
208
|
);
|
326
|
|
- navigation.setOptions({ title: getPrettierPlanexGroupName(group.name) });
|
327
|
|
- };
|
328
|
209
|
|
329
|
|
- /**
|
330
|
|
- * Generates custom JavaScript to be injected into the webpage
|
331
|
|
- *
|
332
|
|
- * @param groupID The current group selected
|
333
|
|
- */
|
334
|
|
- const generateInjectedJS = (group: PlanexGroupType | undefined) => {
|
335
|
|
- let customInjectedJS = `$(document).ready(function() {
|
336
|
|
- ${OBSERVE_MUTATIONS_INJECTED}
|
337
|
|
- ${INJECT_STYLE}
|
338
|
|
- ${FULL_CALENDAR_SETTINGS}`;
|
339
|
|
- if (group) {
|
340
|
|
- customInjectedJS += `displayAde(${group.id});`;
|
341
|
|
- }
|
342
|
|
- if (DateManager.isWeekend(new Date())) {
|
343
|
|
- customInjectedJS += `calendar.next();`;
|
344
|
|
- }
|
345
|
|
- if (ThemeManager.getNightMode()) {
|
346
|
|
- customInjectedJS += INJECT_STYLE_DARK;
|
347
|
|
- }
|
348
|
|
- customInjectedJS += 'removeAlpha();});true;'; // Prevents crash on ios
|
349
|
|
- return customInjectedJS;
|
|
210
|
+ navigation.setOptions({ title: getPrettierPlanexGroupName(group.name) });
|
350
|
211
|
};
|
351
|
212
|
|
352
|
213
|
return (
|
|
@@ -389,13 +250,11 @@ function PlanexScreen(props: Props) {
|
389
|
250
|
message={dialogContent ? dialogContent.message : ''}
|
390
|
251
|
style={
|
391
|
252
|
dialogContent
|
392
|
|
- ? { borderColor: dialogContent.color, borderWidth: 2 }
|
|
253
|
+ ? { borderColor: dialogContent.color, ...styles.popup }
|
393
|
254
|
: undefined
|
394
|
255
|
}
|
395
|
256
|
/>
|
396
|
|
- <AnimatedBottomBar
|
397
|
|
- navigation={navigation}
|
398
|
|
- ref={barRef}
|
|
257
|
+ <PlanexBottomBar
|
399
|
258
|
onPress={sendMessage}
|
400
|
259
|
seekAttention={currentGroup === undefined}
|
401
|
260
|
/>
|