|
@@ -1,18 +1,16 @@
|
1
|
1
|
// @flow
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
|
-import {BackHandler, Image, View} from 'react-native';
|
5
|
|
-import {Button, Content, H1, H3, Text} from 'native-base';
|
|
4
|
+import {BackHandler, Image} from 'react-native';
|
|
5
|
+import {H3, Text, View} from 'native-base';
|
6
|
6
|
import i18n from "i18n-js";
|
7
|
7
|
import ThemeManager from "../utils/ThemeManager";
|
8
|
8
|
import {Linking} from "expo";
|
9
|
9
|
import BaseContainer from "../components/BaseContainer";
|
10
|
10
|
import {Agenda, LocaleConfig} from 'react-native-calendars';
|
11
|
|
-import HTML from 'react-native-render-html';
|
12
|
11
|
import Touchable from 'react-native-platform-touchable';
|
13
|
|
-import {Modalize} from 'react-native-modalize';
|
14
|
12
|
import WebDataManager from "../utils/WebDataManager";
|
15
|
|
-import CustomMaterialIcon from "../components/CustomMaterialIcon";
|
|
13
|
+import PlanningEventManager from '../utils/PlanningEventManager';
|
16
|
14
|
|
17
|
15
|
LocaleConfig.locales['fr'] = {
|
18
|
16
|
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
|
|
@@ -28,7 +26,6 @@ type Props = {
|
28
|
26
|
}
|
29
|
27
|
|
30
|
28
|
type State = {
|
31
|
|
- modalCurrentDisplayItem: Object,
|
32
|
29
|
refreshing: boolean,
|
33
|
30
|
agendaItems: Object,
|
34
|
31
|
calendarShowing: boolean,
|
|
@@ -51,7 +48,6 @@ function openWebLink(link) {
|
51
|
48
|
*/
|
52
|
49
|
export default class PlanningScreen extends React.Component<Props, State> {
|
53
|
50
|
|
54
|
|
- modalRef: Modalize;
|
55
|
51
|
agendaRef: Agenda;
|
56
|
52
|
webDataManager: WebDataManager;
|
57
|
53
|
|
|
@@ -61,7 +57,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
61
|
57
|
didFocusSubscription: Function;
|
62
|
58
|
willBlurSubscription: Function;
|
63
|
59
|
state = {
|
64
|
|
- modalCurrentDisplayItem: {},
|
65
|
60
|
refreshing: false,
|
66
|
61
|
agendaItems: {},
|
67
|
62
|
calendarShowing: false,
|
|
@@ -69,7 +64,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
69
|
64
|
|
70
|
65
|
constructor(props: any) {
|
71
|
66
|
super(props);
|
72
|
|
- this.modalRef = React.createRef();
|
73
|
67
|
this.webDataManager = new WebDataManager(FETCH_URL);
|
74
|
68
|
this.didFocusSubscription = props.navigation.addListener(
|
75
|
69
|
'didFocus',
|
|
@@ -131,72 +125,11 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
131
|
125
|
return daysOfYear;
|
132
|
126
|
}
|
133
|
127
|
|
134
|
|
- getModalHeader() {
|
135
|
|
- return (
|
136
|
|
- <View style={{marginBottom: 0}}>
|
137
|
|
- <Button
|
138
|
|
- onPress={() => this.modalRef.current.close()}
|
139
|
|
- style={{
|
140
|
|
- marginTop: 50,
|
141
|
|
- marginLeft: 'auto',
|
142
|
|
- }}
|
143
|
|
- transparent>
|
144
|
|
- <CustomMaterialIcon icon={'close'}/>
|
145
|
|
- </Button>
|
146
|
|
- </View>
|
147
|
|
- );
|
148
|
|
- }
|
149
|
|
-
|
150
|
|
- getModalContent() {
|
151
|
|
- return (
|
152
|
|
- <View style={{
|
153
|
|
- flex: 1,
|
154
|
|
- padding: 20
|
155
|
|
- }}>
|
156
|
|
- <H1>
|
157
|
|
- {this.state.modalCurrentDisplayItem.title}
|
158
|
|
- </H1>
|
159
|
|
- <H3 style={{
|
160
|
|
- marginTop: 10,
|
161
|
|
- color: ThemeManager.getCurrentThemeVariables().listNoteColor
|
162
|
|
- }}>
|
163
|
|
- {this.getFormattedTime(this.state.modalCurrentDisplayItem)}
|
164
|
|
- </H3>
|
165
|
|
- <Content>
|
166
|
|
- {this.state.modalCurrentDisplayItem.logo !== null ?
|
167
|
|
- <View style={{width: '100%', height: 200, marginTop: 20, marginBottom: 20}}>
|
168
|
|
- <Image style={{flex: 1, resizeMode: "contain"}}
|
169
|
|
- source={{uri: this.state.modalCurrentDisplayItem.logo}}/>
|
170
|
|
- </View>
|
171
|
|
- : <View/>}
|
172
|
|
-
|
173
|
|
- {this.state.modalCurrentDisplayItem.description !== null ?
|
174
|
|
- // Surround description with div to allow text styling if the description is not html
|
175
|
|
- <HTML html={"<div>" + this.state.modalCurrentDisplayItem.description + "</div>"}
|
176
|
|
- tagsStyles={{
|
177
|
|
- p: {
|
178
|
|
- color: ThemeManager.getCurrentThemeVariables().textColor,
|
179
|
|
- fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase
|
180
|
|
- },
|
181
|
|
- div: {color: ThemeManager.getCurrentThemeVariables().textColor}
|
182
|
|
- }}
|
183
|
|
- onLinkPress={(event, link) => openWebLink(link)}/>
|
184
|
|
- : <View/>}
|
185
|
|
- </Content>
|
186
|
|
- </View>
|
187
|
|
- );
|
188
|
|
- }
|
189
|
|
-
|
190
|
|
- showItemDetails(item: Object) {
|
191
|
|
- this.setState({
|
192
|
|
- modalCurrentDisplayItem: item,
|
193
|
|
- });
|
194
|
|
- if (this.modalRef.current) {
|
195
|
|
- this.modalRef.current.open();
|
196
|
|
- }
|
197
|
|
- }
|
198
|
|
-
|
199
|
128
|
getRenderItem(item: Object) {
|
|
129
|
+ let navData = {
|
|
130
|
+ data: item
|
|
131
|
+ };
|
|
132
|
+ const nav = this.props.navigation;
|
200
|
133
|
return (
|
201
|
134
|
<Touchable
|
202
|
135
|
style={{
|
|
@@ -205,7 +138,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
205
|
138
|
marginRight: 10,
|
206
|
139
|
marginTop: 17,
|
207
|
140
|
}}
|
208
|
|
- onPress={() => this.showItemDetails(item)}>
|
|
141
|
+ onPress={() => nav.navigate('PlanningDisplayScreen', navData)}>
|
209
|
142
|
<View style={{
|
210
|
143
|
padding: 10,
|
211
|
144
|
flex: 1,
|
|
@@ -219,7 +152,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
219
|
152
|
marginTop: 5,
|
220
|
153
|
marginBottom: 10
|
221
|
154
|
}}>
|
222
|
|
- {this.getFormattedTime(item)}
|
|
155
|
+ {PlanningEventManager.getFormattedTime(item)}
|
223
|
156
|
</Text>
|
224
|
157
|
<H3 style={{marginBottom: 10}}>{item.title}</H3>
|
225
|
158
|
</View>
|
|
@@ -296,8 +229,8 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
296
|
229
|
generateEventAgenda(eventList: Array<Object>) {
|
297
|
230
|
let agendaItems = this.generateEmptyCalendar();
|
298
|
231
|
for (let i = 0; i < eventList.length; i++) {
|
299
|
|
- if (agendaItems[this.getEventStartDate(eventList[i])] !== undefined) {
|
300
|
|
- this.pushEventInOrder(agendaItems, eventList[i], this.getEventStartDate(eventList[i]));
|
|
232
|
+ if (agendaItems[PlanningEventManager.getEventStartDate(eventList[i])] !== undefined) {
|
|
233
|
+ this.pushEventInOrder(agendaItems, eventList[i], PlanningEventManager.getEventStartDate(eventList[i]));
|
301
|
234
|
}
|
302
|
235
|
}
|
303
|
236
|
this.setState({agendaItems: agendaItems})
|
|
@@ -308,7 +241,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
308
|
241
|
agendaItems[startDate].push(event);
|
309
|
242
|
else {
|
310
|
243
|
for (let i = 0; i < agendaItems[startDate].length; i++) {
|
311
|
|
- if (this.isEventBefore(event, agendaItems[startDate][i])) {
|
|
244
|
+ if (PlanningEventManager.isEventBefore(event, agendaItems[startDate][i])) {
|
312
|
245
|
agendaItems[startDate].splice(i, 0, event);
|
313
|
246
|
break;
|
314
|
247
|
} else if (i === agendaItems[startDate].length - 1) {
|
|
@@ -319,65 +252,10 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
319
|
252
|
}
|
320
|
253
|
}
|
321
|
254
|
|
322
|
|
- isEventBefore(event1: Object, event2: Object) {
|
323
|
|
- let date1 = new Date();
|
324
|
|
- let date2 = new Date();
|
325
|
|
- let timeArray = this.getEventStartTime(event1).split(":");
|
326
|
|
- date1.setHours(parseInt(timeArray[0]), parseInt(timeArray[1]));
|
327
|
|
- timeArray = this.getEventStartTime(event2).split(":");
|
328
|
|
- date2.setHours(parseInt(timeArray[0]), parseInt(timeArray[1]));
|
329
|
|
- return date1 < date2;
|
330
|
|
- }
|
331
|
|
-
|
332
|
|
- getEventStartDate(event: Object) {
|
333
|
|
- return event.date_begin.split(" ")[0];
|
334
|
|
- }
|
335
|
|
-
|
336
|
|
- getEventStartTime(event: Object) {
|
337
|
|
- if (event !== undefined && Object.keys(event).length > 0 && event.date_begin !== null)
|
338
|
|
- return this.formatTime(event.date_begin.split(" ")[1]);
|
339
|
|
- else
|
340
|
|
- return "";
|
341
|
|
- }
|
342
|
|
-
|
343
|
|
- getEventEndTime(event: Object) {
|
344
|
|
- if (event !== undefined && Object.keys(event).length > 0 && event.date_end !== null)
|
345
|
|
- return this.formatTime(event.date_end.split(" ")[1]);
|
346
|
|
- else
|
347
|
|
- return "";
|
348
|
|
- }
|
349
|
|
-
|
350
|
|
- getFormattedTime(event: Object) {
|
351
|
|
- if (this.getEventEndTime(event) !== "")
|
352
|
|
- return this.getEventStartTime(event) + " - " + this.getEventEndTime(event);
|
353
|
|
- else
|
354
|
|
- return this.getEventStartTime(event);
|
355
|
|
- }
|
356
|
|
-
|
357
|
|
- formatTime(time: string) {
|
358
|
|
- let array = time.split(':');
|
359
|
|
- return array[0] + ':' + array[1];
|
360
|
|
- }
|
361
|
|
-
|
362
|
|
- onModalClosed() {
|
363
|
|
- this.setState({
|
364
|
|
- modalCurrentDisplayItem: {},
|
365
|
|
- });
|
366
|
|
- }
|
367
|
|
-
|
368
|
255
|
render() {
|
369
|
256
|
const nav = this.props.navigation;
|
370
|
257
|
return (
|
371
|
258
|
<BaseContainer navigation={nav} headerTitle={i18n.t('screens.planning')}>
|
372
|
|
- <Modalize ref={this.modalRef}
|
373
|
|
- modalStyle={{
|
374
|
|
- backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
|
375
|
|
- }}
|
376
|
|
- // adjustToContentHeight // Breaks when displaying full screen, half, then full again
|
377
|
|
- HeaderComponent={() => this.getModalHeader()}
|
378
|
|
- onClosed={() => this.onModalClosed()}>
|
379
|
|
- {this.getModalContent()}
|
380
|
|
- </Modalize>
|
381
|
259
|
<Agenda
|
382
|
260
|
// the list of items that have to be displayed in agenda. If you want to render item as empty date
|
383
|
261
|
// the value of date key kas to be an empty array []. If there exists no value for date key it is
|
|
@@ -431,14 +309,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
431
|
309
|
agendaDayNumColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
|
432
|
310
|
agendaTodayColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
|
433
|
311
|
agendaKnobColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
|
434
|
|
- // Fix for days hiding behind knob
|
435
|
|
- 'stylesheet.calendar.header': {
|
436
|
|
- week: {
|
437
|
|
- marginTop: 0,
|
438
|
|
- flexDirection: 'row',
|
439
|
|
- justifyContent: 'space-between'
|
440
|
|
- }
|
441
|
|
- }
|
442
|
312
|
}}
|
443
|
313
|
/>
|
444
|
314
|
</BaseContainer>
|