|
@@ -12,9 +12,11 @@ import {withCollapsible} from "../../utils/withCollapsible";
|
12
|
12
|
import {dateToString, getTimeOnlyString} from "../../utils/Planning";
|
13
|
13
|
import DateManager from "../../managers/DateManager";
|
14
|
14
|
import AnimatedBottomBar from "../../components/Custom/AnimatedBottomBar";
|
|
15
|
+import {CommonActions} from "@react-navigation/native";
|
15
|
16
|
|
16
|
17
|
type Props = {
|
17
|
18
|
navigation: Object,
|
|
19
|
+ route: Object,
|
18
|
20
|
theme: Object,
|
19
|
21
|
collapsibleStack: Object,
|
20
|
22
|
}
|
|
@@ -24,6 +26,7 @@ type State = {
|
24
|
26
|
dialogVisible: boolean,
|
25
|
27
|
dialogTitle: string,
|
26
|
28
|
dialogMessage: string,
|
|
29
|
+ currentGroup: Object,
|
27
|
30
|
}
|
28
|
31
|
|
29
|
32
|
|
|
@@ -105,10 +108,13 @@ const LISTEN_TO_MESSAGES = `
|
105
|
108
|
document.addEventListener("message", function(event) {
|
106
|
109
|
//alert(event.data);
|
107
|
110
|
var data = JSON.parse(event.data);
|
108
|
|
- $('#calendar').fullCalendar(data.action, data.data);
|
|
111
|
+ if (data.action === "setGroup")
|
|
112
|
+ displayAde(data.data);
|
|
113
|
+ else
|
|
114
|
+ $('#calendar').fullCalendar(data.action, data.data);
|
109
|
115
|
}, false);`
|
110
|
116
|
|
111
|
|
-const CUSTOM_CSS = "body>.container{padding-top:20px; padding-bottom: 50px}header{display:none}.fc-toolbar .fc-center{width:100%}.fc-toolbar .fc-center>*{float:none;width:100%;margin:0}#entite{margin-bottom:5px!important}#entite,#groupe{width:calc(100% - 20px);margin:0 10px}#calendar .fc-left,#calendar .fc-right{display:none}#groupe_visibility{width:100%}#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}";
|
|
117
|
+const CUSTOM_CSS = "body>.container{padding-top:20px; padding-bottom: 50px}header,#entite,#groupe_visibility,#calendar .fc-left,#calendar .fc-right{display:none}.fc-toolbar .fc-center{width:100%}.fc-toolbar .fc-center>*{float:none;width:100%;margin:0}#entite{margin-bottom:5px!important}#entite,#groupe{width:calc(100% - 20px);margin:0 10px}#groupe_visibility{width:100%}#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
|
118
|
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}";
|
113
|
119
|
|
114
|
120
|
const INJECT_STYLE = `
|
|
@@ -127,15 +133,6 @@ class PlanexScreen extends React.Component<Props, State> {
|
127
|
133
|
|
128
|
134
|
customInjectedJS: string;
|
129
|
135
|
|
130
|
|
- state = {
|
131
|
|
- bannerVisible:
|
132
|
|
- AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
|
133
|
|
- AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex',
|
134
|
|
- dialogVisible: false,
|
135
|
|
- dialogTitle: "",
|
136
|
|
- dialogMessage: "",
|
137
|
|
- };
|
138
|
|
-
|
139
|
136
|
/**
|
140
|
137
|
* Defines custom injected JavaScript to improve the page display on mobile
|
141
|
138
|
*/
|
|
@@ -143,16 +140,58 @@ class PlanexScreen extends React.Component<Props, State> {
|
143
|
140
|
super();
|
144
|
141
|
this.webScreenRef = React.createRef();
|
145
|
142
|
this.barRef = React.createRef();
|
146
|
|
- this.generateInjectedCSS();
|
|
143
|
+
|
|
144
|
+ let currentGroup = AsyncStorageManager.getInstance().preferences.planexCurrentGroup.current;
|
|
145
|
+ if (currentGroup === '')
|
|
146
|
+ currentGroup = {name: "SELECT GROUP", id: 0};
|
|
147
|
+ else
|
|
148
|
+ currentGroup = JSON.parse(currentGroup);
|
|
149
|
+ this.state = {
|
|
150
|
+ bannerVisible:
|
|
151
|
+ AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
|
|
152
|
+ AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex',
|
|
153
|
+ dialogVisible: false,
|
|
154
|
+ dialogTitle: "",
|
|
155
|
+ dialogMessage: "",
|
|
156
|
+ currentGroup: currentGroup,
|
|
157
|
+ };
|
|
158
|
+ this.generateInjectedJS(currentGroup.id);
|
|
159
|
+ }
|
|
160
|
+
|
|
161
|
+ componentDidMount() {
|
|
162
|
+ this.props.navigation.addListener('focus', this.onScreenFocus);
|
|
163
|
+ }
|
|
164
|
+
|
|
165
|
+ onScreenFocus = () => {
|
|
166
|
+ this.handleNavigationParams();
|
|
167
|
+ };
|
|
168
|
+
|
|
169
|
+ handleNavigationParams = () => {
|
|
170
|
+ if (this.props.route.params !== undefined) {
|
|
171
|
+ if (this.props.route.params.group !== undefined && this.props.route.params.group !== null) {
|
|
172
|
+ // reset params to prevent infinite loop
|
|
173
|
+ this.selectNewGroup(this.props.route.params.group);
|
|
174
|
+ this.props.navigation.dispatch(CommonActions.setParams({group: null}));
|
|
175
|
+ }
|
|
176
|
+ }
|
|
177
|
+ };
|
|
178
|
+
|
|
179
|
+ selectNewGroup(group: Object) {
|
|
180
|
+ this.sendMessage('setGroup', group.id);
|
|
181
|
+ this.setState({currentGroup: group});
|
|
182
|
+ AsyncStorageManager.getInstance().savePref(
|
|
183
|
+ AsyncStorageManager.getInstance().preferences.planexCurrentGroup.key,
|
|
184
|
+ JSON.stringify(group));
|
|
185
|
+ this.generateInjectedJS(group.id);
|
147
|
186
|
}
|
148
|
187
|
|
149
|
|
- generateInjectedCSS() {
|
150
|
|
- this.customInjectedJS =
|
151
|
|
- "$(document).ready(function() {" +
|
152
|
|
- OBSERVE_MUTATIONS_INJECTED +
|
153
|
|
- FULL_CALENDAR_SETTINGS +
|
154
|
|
- LISTEN_TO_MESSAGES +
|
155
|
|
- INJECT_STYLE;
|
|
188
|
+ generateInjectedJS(groupID: number) {
|
|
189
|
+ this.customInjectedJS = "$(document).ready(function() {"
|
|
190
|
+ + OBSERVE_MUTATIONS_INJECTED
|
|
191
|
+ + FULL_CALENDAR_SETTINGS
|
|
192
|
+ + "displayAde(" + groupID + ");" // Reset Ade
|
|
193
|
+ + LISTEN_TO_MESSAGES
|
|
194
|
+ + INJECT_STYLE;
|
156
|
195
|
|
157
|
196
|
if (ThemeManager.getNightMode())
|
158
|
197
|
this.customInjectedJS += "$('head').append('<style>" + CUSTOM_CSS_DARK + "</style>');";
|
|
@@ -162,10 +201,10 @@ class PlanexScreen extends React.Component<Props, State> {
|
162
|
201
|
'});true;'; // Prevents crash on ios
|
163
|
202
|
}
|
164
|
203
|
|
165
|
|
- componentWillUpdate(prevProps: Props) {
|
166
|
|
- if (prevProps.theme.dark !== this.props.theme.dark)
|
167
|
|
- this.generateInjectedCSS();
|
168
|
|
- }
|
|
204
|
+ // componentWillUpdate(prevProps: Props) {
|
|
205
|
+ // if (prevProps.theme.dark !== this.props.theme.dark)
|
|
206
|
+ // this.generateInjectedCSS();
|
|
207
|
+ // }
|
169
|
208
|
|
170
|
209
|
/**
|
171
|
210
|
* Callback used when closing the banner.
|
|
@@ -269,8 +308,10 @@ class PlanexScreen extends React.Component<Props, State> {
|
269
|
308
|
? this.getWebView()
|
270
|
309
|
: <View style={{height: '100%'}}>{this.getWebView()}</View>}
|
271
|
310
|
<AnimatedBottomBar
|
|
311
|
+ {...this.props}
|
272
|
312
|
ref={this.barRef}
|
273
|
313
|
onPress={this.sendMessage}
|
|
314
|
+ currentGroup={this.state.currentGroup.name}
|
274
|
315
|
/>
|
275
|
316
|
</View>
|
276
|
317
|
);
|