|
@@ -7,13 +7,21 @@ import {Avatar, Banner} from "react-native-paper";
|
7
|
7
|
import i18n from "i18n-js";
|
8
|
8
|
import {View} from "react-native";
|
9
|
9
|
import AsyncStorageManager from "../../managers/AsyncStorageManager";
|
|
10
|
+import AlertDialog from "../../components/Dialog/AlertDialog";
|
|
11
|
+import {withCollapsible} from "../../utils/withCollapsible";
|
|
12
|
+import {dateToString, getTimeOnlyString} from "../../utils/Planning";
|
|
13
|
+import DateManager from "../../managers/DateManager";
|
10
|
14
|
|
11
|
15
|
type Props = {
|
12
|
16
|
navigation: Object,
|
|
17
|
+ collapsibleStack: Object,
|
13
|
18
|
}
|
14
|
19
|
|
15
|
20
|
type State = {
|
16
|
21
|
bannerVisible: boolean,
|
|
22
|
+ dialogVisible: boolean,
|
|
23
|
+ dialogTitle: string,
|
|
24
|
+ dialogMessage: string,
|
17
|
25
|
}
|
18
|
26
|
|
19
|
27
|
|
|
@@ -79,11 +87,34 @@ const OBSERVE_MUTATIONS_INJECTED =
|
79
|
87
|
'$(".fc-event-container .fc-event").each(function(index) {\n' +
|
80
|
88
|
' removeAlpha($(this));\n' +
|
81
|
89
|
'});';
|
|
90
|
+
|
|
91
|
+const FULL_CALENDAR_SETTINGS =
|
|
92
|
+ `var calendar = $('#calendar').fullCalendar('getCalendar');
|
|
93
|
+ calendar.option({
|
|
94
|
+ eventClick: function (data, event, view) {
|
|
95
|
+ var message = {
|
|
96
|
+ title: data.title,
|
|
97
|
+ color: data.color,
|
|
98
|
+ start: data.start._d,
|
|
99
|
+ end: data.end._d,
|
|
100
|
+ };
|
|
101
|
+ window.ReactNativeWebView.postMessage(JSON.stringify(message));
|
|
102
|
+ }
|
|
103
|
+ });`;
|
|
104
|
+
|
|
105
|
+const LISTEN_TO_MESSAGES =
|
|
106
|
+ `document.addEventListener("message", function(event) {
|
|
107
|
+ console.log("Received post message", event);//Get Event from React Native
|
|
108
|
+ alert(event.data);
|
|
109
|
+ }, false);`
|
|
110
|
+
|
82
|
111
|
/**
|
83
|
112
|
* Class defining the app's Planex screen.
|
84
|
113
|
* This screen uses a webview to render the page
|
85
|
114
|
*/
|
86
|
|
-export default class PlanexScreen extends React.Component<Props, State> {
|
|
115
|
+class PlanexScreen extends React.Component<Props, State> {
|
|
116
|
+
|
|
117
|
+ webScreenRef: Object;
|
87
|
118
|
|
88
|
119
|
customInjectedJS: string;
|
89
|
120
|
onHideBanner: Function;
|
|
@@ -92,6 +123,9 @@ export default class PlanexScreen extends React.Component<Props, State> {
|
92
|
123
|
bannerVisible:
|
93
|
124
|
AsyncStorageManager.getInstance().preferences.planexShowBanner.current === '1' &&
|
94
|
125
|
AsyncStorageManager.getInstance().preferences.defaultStartScreen.current !== 'Planex',
|
|
126
|
+ dialogVisible: false,
|
|
127
|
+ dialogTitle: "",
|
|
128
|
+ dialogMessage: "",
|
95
|
129
|
};
|
96
|
130
|
|
97
|
131
|
/**
|
|
@@ -99,11 +133,14 @@ export default class PlanexScreen extends React.Component<Props, State> {
|
99
|
133
|
*/
|
100
|
134
|
constructor() {
|
101
|
135
|
super();
|
|
136
|
+ this.webScreenRef = React.createRef();
|
102
|
137
|
this.customInjectedJS =
|
103
|
|
- '$(document).ready(function() {' +
|
|
138
|
+ "$(document).ready(function() {" +
|
104
|
139
|
OBSERVE_MUTATIONS_INJECTED +
|
105
|
|
- '$("head").append(\'<meta name="viewport" content="width=device-width, initial-scale=0.9">\');' +
|
106
|
|
- '$("head").append(\'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\');';
|
|
140
|
+ FULL_CALENDAR_SETTINGS +
|
|
141
|
+ LISTEN_TO_MESSAGES +
|
|
142
|
+ "$('head').append('<meta name=\"viewport\" content=\"width=device-width, initial-scale=0.9\">');" +
|
|
143
|
+ "$('head').append('<link rel=\"stylesheet\" href=\"" + CUSTOM_CSS_GENERAL + '" type="text/css"/>\');';
|
107
|
144
|
|
108
|
145
|
if (ThemeManager.getNightMode())
|
109
|
146
|
this.customInjectedJS += '$("head").append(\'<link rel="stylesheet" href="' + CUSTOM_CSS_NIGHTMODE + '" type="text/css"/>\');';
|
|
@@ -137,13 +174,45 @@ export default class PlanexScreen extends React.Component<Props, State> {
|
137
|
174
|
this.props.navigation.navigate('settings');
|
138
|
175
|
}
|
139
|
176
|
|
|
177
|
+ sendMessage = () => {
|
|
178
|
+ let data= 'coucou'
|
|
179
|
+ this.webScreenRef.current.postMessage(data);
|
|
180
|
+ }
|
|
181
|
+
|
|
182
|
+ onMessage = (event: Object) => {
|
|
183
|
+ let data = JSON.parse(event.nativeEvent.data);
|
|
184
|
+ let startDate = dateToString(new Date(data.start), true);
|
|
185
|
+ let endDate = dateToString(new Date(data.end), true);
|
|
186
|
+ let msg = DateManager.getInstance().getTranslatedDate(startDate) + "\n";
|
|
187
|
+ msg += getTimeOnlyString(startDate) + ' - ' + getTimeOnlyString(endDate);
|
|
188
|
+ this.showDialog(data.title, msg)
|
|
189
|
+ };
|
|
190
|
+
|
|
191
|
+ showDialog = (title: string, message: string) => {
|
|
192
|
+ this.setState({
|
|
193
|
+ dialogVisible: true,
|
|
194
|
+ dialogTitle: title,
|
|
195
|
+ dialogMessage: message,
|
|
196
|
+ });
|
|
197
|
+ };
|
|
198
|
+
|
|
199
|
+ hideDialog = () => {
|
|
200
|
+ this.setState({
|
|
201
|
+ dialogVisible: false,
|
|
202
|
+ });
|
|
203
|
+ };
|
|
204
|
+
|
140
|
205
|
render() {
|
141
|
206
|
const nav = this.props.navigation;
|
|
207
|
+ const {containerPaddingTop} = this.props.collapsibleStack;
|
142
|
208
|
return (
|
143
|
209
|
<View style={{
|
144
|
210
|
height: '100%'
|
145
|
211
|
}}>
|
146
|
212
|
<Banner
|
|
213
|
+ style={{
|
|
214
|
+ marginTop: this.state.bannerVisible ? containerPaddingTop : 0,
|
|
215
|
+ }}
|
147
|
216
|
visible={this.state.bannerVisible}
|
148
|
217
|
actions={[
|
149
|
218
|
{
|
|
@@ -163,12 +232,21 @@ export default class PlanexScreen extends React.Component<Props, State> {
|
163
|
232
|
>
|
164
|
233
|
{i18n.t('planexScreen.enableStartScreen')}
|
165
|
234
|
</Banner>
|
|
235
|
+ <AlertDialog
|
|
236
|
+ visible={this.state.dialogVisible}
|
|
237
|
+ onDismiss={this.hideDialog}
|
|
238
|
+ title={this.state.dialogTitle}
|
|
239
|
+ message={this.state.dialogMessage}/>
|
166
|
240
|
<WebViewScreen
|
|
241
|
+ ref={this.webScreenRef}
|
167
|
242
|
navigation={nav}
|
168
|
243
|
url={PLANEX_URL}
|
169
|
|
- customJS={this.customInjectedJS}/>
|
|
244
|
+ customJS={this.customInjectedJS}
|
|
245
|
+ onMessage={this.onMessage}
|
|
246
|
+ />
|
170
|
247
|
</View>
|
171
|
248
|
);
|
172
|
249
|
}
|
173
|
250
|
}
|
174
|
251
|
|
|
252
|
+export default withCollapsible(PlanexScreen);
|