Browse Source

Display the most important incoming event for the current day on the dashboard

keplyx 4 years ago
parent
commit
4449f82c81
1 changed files with 381 additions and 128 deletions
  1. 381
    128
      screens/HomeScreen.js

+ 381
- 128
screens/HomeScreen.js View File

@@ -2,13 +2,16 @@
2 2
 
3 3
 import * as React from 'react';
4 4
 import {Image, Linking, TouchableOpacity, View} from 'react-native';
5
-import {Body, Button, Card, CardItem, Left, Right, Text, Thumbnail, H1, H3} from 'native-base';
5
+import {Body, Button, Card, CardItem, Left, Right, Text, Thumbnail, H1, H3, Content} from 'native-base';
6 6
 import i18n from "i18n-js";
7 7
 import CustomMaterialIcon from '../components/CustomMaterialIcon';
8 8
 import FetchedDataSectionList from "../components/FetchedDataSectionList";
9 9
 import Autolink from 'react-native-autolink';
10 10
 import ThemeManager from "../utils/ThemeManager";
11 11
 import PlatformTouchable from "react-native-platform-touchable";
12
+import HTML from 'react-native-render-html';
13
+import {LinearGradient} from 'expo-linear-gradient';
14
+
12 15
 
13 16
 const ICON_AMICALE = require('../assets/amicale.png');
14 17
 const NAME_AMICALE = 'Amicale INSA Toulouse';
@@ -75,14 +78,36 @@ export default class HomeScreen extends FetchedDataSectionList {
75 78
     }
76 79
 
77 80
     generateDashboardDataset(dashboardData: Object) {
78
-        let dataset = [];
81
+        let dataset = [
82
+            {
83
+                id: 'top',
84
+                content: {}
85
+            },
86
+            {
87
+                id: 'middle',
88
+                content: [{}, {}]
89
+            },
90
+            {
91
+                id: 'bottom',
92
+                content: {}
93
+            },
94
+
95
+        ];
79 96
         for (let [key, value] of Object.entries(dashboardData)) {
80
-            dataset.push(
81
-                {
82
-                    id: key,
83
-                    data: value
84
-                }
85
-            )
97
+            switch (key) {
98
+                case 'today_events':
99
+                    dataset[0]['content'] = value;
100
+                    break;
101
+                case 'proximo_articles':
102
+                    dataset[1]['content'][0] = {id: key, data: value};
103
+                    break;
104
+                case 'today_menu':
105
+                    dataset[1]['content'][1] = {id: key, data: value};
106
+                    break;
107
+                case 'available_machines':
108
+                    dataset[2]['content'] = value;
109
+                    break;
110
+            }
86 111
         }
87 112
         return dataset
88 113
     }
@@ -117,155 +142,383 @@ export default class HomeScreen extends FetchedDataSectionList {
117 142
         }
118 143
     }
119 144
 
120
-    getDashboardItemData(item: Object) {
121
-        let icon = '';
122
-        let title = '';
123
-        let subtitle;
124
-        let clickAction;
125
-        let isAvailable = false;
126
-        let color = ThemeManager.getCurrentThemeVariables().disabledTextColor;
127
-        switch (item['id']) {
128
-            case 'today_events':
129
-                icon = 'calendar-range';
130
-                color = ThemeManager.getCurrentThemeVariables().planningColor;
131
-                title = i18n.t('homeScreen.dashboard.todayEventsTitle');
132
-                isAvailable = item['data'].length > 0;
133
-                if (isAvailable) {
134
-                    subtitle =
135
-                        <Text>
136
-                            <Text style={{fontWeight: "bold"}}>{item['data'].length}</Text>
137
-                            <Text>{i18n.t('homeScreen.dashboard.todayEventsSubtitle')}</Text>
138
-                        </Text>;
139
-                } else
140
-                    subtitle = i18n.t('homeScreen.dashboard.todayEventsSubtitleNA');
141
-                clickAction = () => this.props.navigation.navigate('Planning');
142
-                break;
143
-            case 'proximo_articles':
144
-                icon = 'shopping';
145
-                color = ThemeManager.getCurrentThemeVariables().proximoColor;
146
-                title = i18n.t('homeScreen.dashboard.proximoTitle');
147
-                isAvailable = parseInt(item['data']) > 0;
148
-                if (isAvailable) {
149
-                    subtitle =
150
-                        <Text>
151
-                            <Text style={{fontWeight: "bold"}}>{item['data']}</Text>
152
-                            <Text>{i18n.t('homeScreen.dashboard.proximoSubtitle')}</Text>
153
-                        </Text>;
154
-                } else
155
-                    subtitle = i18n.t('homeScreen.dashboard.proximoSubtitleNA');
156
-                clickAction = () => this.props.navigation.navigate('Proximo');
157
-                break;
158
-            case 'available_machines':
159
-                icon = 'washing-machine';
160
-                color = ThemeManager.getCurrentThemeVariables().proxiwashColor;
161
-                title = i18n.t('homeScreen.dashboard.proxiwashTitle');
162
-                isAvailable = parseInt(item['data']['dryers']) > 0 || parseInt(item['data']['washers']) > 0;
163
-                if (isAvailable) {
164
-                    subtitle =
165
-                        <Text>
166
-                            <Text style={{
167
-                                fontWeight: parseInt(item['data']['dryers']) > 0 ?
168
-                                    'bold' :
169
-                                    'normal',
170
-                                color: parseInt(item['data']['dryers']) > 0 ?
171
-                                    ThemeManager.getCurrentThemeVariables().textColor :
172
-                                    ThemeManager.getCurrentThemeVariables().listNoteColor
173
-                            }}>
174
-                                {item['data']['dryers']}
175
-                            </Text>
176
-                            <Text>{i18n.t('homeScreen.dashboard.proxiwashSubtitle1')}</Text>
177
-                            <Text style={{
178
-                                fontWeight: parseInt(item['data']['washers']) > 0 ?
179
-                                    'bold' :
180
-                                    'normal',
181
-                                color: parseInt(item['data']['washers']) > 0 ?
182
-                                    ThemeManager.getCurrentThemeVariables().textColor :
183
-                                    ThemeManager.getCurrentThemeVariables().listNoteColor
184
-                            }}>
185
-                                {item['data']['washers']}
186
-                            </Text>
187
-                            <Text>{i18n.t('homeScreen.dashboard.proxiwashSubtitle2')}</Text>
188
-                        </Text>;
189
-                } else
190
-                    subtitle = i18n.t('homeScreen.dashboard.proxiwashSubtitleNA');
191
-                clickAction = () => this.props.navigation.navigate('Proxiwash');
192
-                break;
193
-            case 'today_menu':
194
-                icon = 'silverware-fork-knife';
195
-                color = ThemeManager.getCurrentThemeVariables().menuColor;
196
-                title = i18n.t('homeScreen.dashboard.menuTitle');
197
-                isAvailable = item['data'].length > 0;
198
-                if (isAvailable) {
199
-                    subtitle = i18n.t('homeScreen.dashboard.menuSubtitle');
200
-                } else
201
-                    subtitle = i18n.t('homeScreen.dashboard.menuSubtitleNA');
202
-                clickAction = () => this.props.navigation.navigate('SelfMenuScreen');
203
-                break;
145
+    getDashboardItem(item: Object) {
146
+        let content = item['content'];
147
+        if (item['id'] === 'top')
148
+            return this.getDashboardTopItem(content);
149
+        else if (item['id'] === 'middle')
150
+            return this.getDashboardMiddleItem(content);
151
+        else
152
+            return this.getDashboardBottomItem(content);
153
+    }
154
+
155
+    getDisplayEvent(events: Array<Object>): Object {
156
+        let displayEvent = undefined;
157
+
158
+        if (events.length === 1) {
159
+            displayEvent = this.getEventDisplayData(events[0]);
160
+        } else {
161
+            for (let event of events) {
162
+                if (event['date_begin'] === undefined || event['date_end'] === undefined)
163
+                    continue;
164
+
165
+                let date_begin = event['date_begin'].split(' ')[1];
166
+                let date_end = event['date_end'].split(' ')[1];
167
+                let startDate = new Date();
168
+                let endDate = new Date();
169
+                let limit = new Date();
170
+                let now = new Date();
171
+                startDate.setHours(parseInt(date_begin.split(':')[0]), date_begin.split(':')[1], 0);
172
+                endDate.setHours(parseInt(date_end.split(':')[0]), date_end.split(':')[1], 0);
173
+                limit.setHours(18, 0, 0); // Only display events after 18:00 as these are the most important
174
+                if (limit.getTime() < startDate.getTime() && now.getTime() < endDate.getTime()) {
175
+                    displayEvent = this.getEventDisplayData(event);
176
+                    break;
177
+                }
178
+            }
179
+        }
180
+        return displayEvent;
181
+    }
182
+
183
+    getEventDisplayData(event: Object): Object {
184
+        let date = '';
185
+        if (event['date_begin'].split(' ').length > 2) {
186
+            date = event['date_begin'].split(' ')[1];
187
+            date = date.split(':')[0] + ':' + date.split(':')[1];
204 188
         }
205 189
         return {
206
-            icon: icon,
207
-            color: color,
208
-            title: title,
209
-            subtitle: subtitle,
210
-            clickAction: clickAction,
211
-            isAvailable: isAvailable
190
+            logo: event['logo'],
191
+            title: event['title'],
192
+            date: date,
193
+            description: event['description'],
212 194
         }
213 195
     }
214 196
 
215 197
 
216
-    getRenderItem(item: Object, section: Object, data: Object) {
217
-        if (section['id'] === SECTIONS_ID[0]) {
218
-            let itemData = this.getDashboardItemData(item);
219
-            return (
220
-                <Card style={{
221
-                    flex: 0,
222
-                    marginLeft: 10,
223
-                    marginRight: 10,
224
-                    borderRadius: 50,
225
-                    backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg
226
-                }}>
227
-                    <PlatformTouchable
228
-                        onPress={itemData['clickAction']}
229
-                        style={{
230
-                            zIndex: 100,
231
-                            borderRadius: 50
232
-                        }}
233
-                    >
198
+    getDashboardTopItem(content: Array<Object>) {
199
+        let icon = 'calendar-range';
200
+        let color = ThemeManager.getCurrentThemeVariables().planningColor;
201
+        let title = i18n.t('homeScreen.dashboard.todayEventsTitle');
202
+        let isAvailable = content.length > 0;
203
+        let subtitle = '';
204
+        if (isAvailable) {
205
+            subtitle =
206
+                <Text>
207
+                    <Text style={{fontWeight: "bold"}}>{content.length}</Text>
208
+                    <Text>{i18n.t('homeScreen.dashboard.todayEventsSubtitle')}</Text>
209
+                </Text>;
210
+        } else
211
+            subtitle = i18n.t('homeScreen.dashboard.todayEventsSubtitleNA');
212
+        let clickAction = () => this.props.navigation.navigate('Planning');
213
+
214
+        let displayEvent = this.getDisplayEvent(content);
215
+
216
+        return (
217
+            <Card style={{
218
+                flex: 0,
219
+                marginLeft: 10,
220
+                marginRight: 10,
221
+                borderRadius: 30,
222
+                backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg
223
+            }}>
224
+                <PlatformTouchable
225
+                    onPress={clickAction}
226
+                    style={{
227
+                        zIndex: 100,
228
+                        borderRadius: 30
229
+                    }}
230
+                >
231
+                    <View>
234 232
                         <CardItem style={{
235
-                            borderRadius: 50,
236
-                            backgroundColor: 'transparent'
233
+                            borderRadius: 30,
234
+                            backgroundColor: 'transparent',
237 235
                         }}>
238 236
                             <Left>
239 237
                                 <CustomMaterialIcon
240
-                                    icon={itemData['icon']}
238
+                                    icon={icon}
241 239
                                     color={
242
-                                        itemData['isAvailable'] ?
243
-                                            itemData['color'] :
240
+                                        isAvailable ?
241
+                                            color :
244 242
                                             ThemeManager.getCurrentThemeVariables().textDisabledColor
245 243
                                     }
246 244
                                     fontSize={40}
247 245
                                     width={40}/>
248 246
                                 <Body>
249 247
                                     <H3 style={{
250
-                                        color: itemData['isAvailable'] ?
248
+                                        color: isAvailable ?
251 249
                                             ThemeManager.getCurrentThemeVariables().textColor :
252 250
                                             ThemeManager.getCurrentThemeVariables().listNoteColor
253 251
                                     }}>
254
-                                        {itemData['title']}
252
+                                        {title}
255 253
                                     </H3>
256 254
                                     <Text style={{
257
-                                        color: itemData['isAvailable'] ?
255
+                                        color: isAvailable ?
258 256
                                             ThemeManager.getCurrentThemeVariables().listNoteColor :
259 257
                                             ThemeManager.getCurrentThemeVariables().textDisabledColor
260 258
                                     }}>
261
-                                        {itemData['subtitle']}
259
+                                        {subtitle}
262 260
                                     </Text>
263 261
                                 </Body>
264 262
                             </Left>
265 263
                         </CardItem>
266
-                    </PlatformTouchable>
267
-                </Card>
268
-            );
264
+                        {displayEvent !== undefined ?
265
+                            <View>
266
+                                <CardItem style={{
267
+                                    paddingTop: 0,
268
+                                    paddingBottom: 0
269
+                                }}>
270
+                                    <Left>
271
+                                        {displayEvent['logo'] !== '' && displayEvent['logo'] !== null ?
272
+                                            <Thumbnail source={{uri: displayEvent['logo']}} square/> :
273
+                                            <View/>}
274
+                                        <Body>
275
+                                            <Text>{displayEvent['title']}</Text>
276
+                                            <Text note>{displayEvent['date']}</Text>
277
+                                        </Body>
278
+                                    </Left>
279
+                                </CardItem>
280
+                                <CardItem style={{
281
+                                    borderRadius: 30,
282
+                                    backgroundColor: 'transparent',
283
+                                }}>
284
+                                    <Body style={{
285
+                                        height: 70,
286
+                                        overflow: 'hidden',
287
+                                    }}>
288
+                                        <HTML html={"<div>" + displayEvent['description'] + "</div>"}
289
+                                              tagsStyles={{
290
+                                                  p: {
291
+                                                      color: ThemeManager.getCurrentThemeVariables().textColor,
292
+                                                      fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase,
293
+                                                  },
294
+                                                  div: {color: ThemeManager.getCurrentThemeVariables().textColor},
295
+                                              }}
296
+                                              onLinkPress={(event, link) => openWebLink(link)}/>
297
+                                        <LinearGradient
298
+                                            colors={['transparent', ThemeManager.getCurrentThemeVariables().cardDefaultBg]}
299
+                                            end={[0, 0.6]}
300
+                                            style={{
301
+                                                position: 'absolute',
302
+                                                width: '100%',
303
+                                                height: 60,
304
+                                                bottom: 0
305
+                                            }}>
306
+                                            <View style={{
307
+                                                marginLeft: 'auto',
308
+                                                marginTop: 'auto',
309
+                                                flexDirection: 'row'
310
+                                            }}>
311
+                                                <Text style={{
312
+                                                    marginTop: 'auto',
313
+                                                    marginBottom: 'auto',
314
+                                                    padding: 0,
315
+                                                }}>
316
+                                                    Click to see more
317
+                                                </Text>
318
+                                                <CustomMaterialIcon icon={'chevron-right'}/>
319
+                                            </View>
320
+                                        </LinearGradient>
321
+                                    </Body>
322
+                                </CardItem>
323
+                            </View> :
324
+                            <View/>}
325
+                    </View>
326
+                </PlatformTouchable>
327
+            </Card>
328
+        );
329
+    }
330
+
331
+    getSquareDashboardItem(isAvailable: boolean, icon: string, color: string, title: string, subtitle: string, clickAction: Function, isLeftElement: boolean) {
332
+        return (
333
+            <Card style={{
334
+                flex: 0,
335
+                width: '48%',
336
+                marginLeft: 0,
337
+                marginRight: isLeftElement ? '4%' : 0,
338
+                borderRadius: 30,
339
+                backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg
340
+            }}>
341
+                <PlatformTouchable
342
+                    onPress={clickAction}
343
+                    style={{
344
+                        zIndex: 100,
345
+                        borderRadius: 30
346
+                    }}
347
+                >
348
+                    <CardItem style={{
349
+                        borderRadius: 30,
350
+                        backgroundColor: 'transparent'
351
+                    }}>
352
+                        <Body>
353
+                            <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
354
+                                <CustomMaterialIcon
355
+                                    icon={icon}
356
+                                    color={
357
+                                        isAvailable ?
358
+                                            color :
359
+                                            ThemeManager.getCurrentThemeVariables().textDisabledColor
360
+                                    }
361
+                                    fontSize={60}
362
+                                    width={60}/>
363
+                            </View>
364
+                            <H3 style={{
365
+                                color: isAvailable ?
366
+                                    ThemeManager.getCurrentThemeVariables().textColor :
367
+                                    ThemeManager.getCurrentThemeVariables().listNoteColor,
368
+                                textAlign: 'center',
369
+                                width: '100%'
370
+                            }}>
371
+                                {title}
372
+                            </H3>
373
+                            <Text style={{
374
+                                color: isAvailable ?
375
+                                    ThemeManager.getCurrentThemeVariables().listNoteColor :
376
+                                    ThemeManager.getCurrentThemeVariables().textDisabledColor,
377
+                                textAlign: 'center',
378
+                                width: '100%'
379
+                            }}>
380
+                                {subtitle}
381
+                            </Text>
382
+                        </Body>
383
+                    </CardItem>
384
+                </PlatformTouchable>
385
+            </Card>
386
+        );
387
+    }
388
+
389
+    getDashboardMiddleItem(content: Object) {
390
+        let proximoData = content[0]['data'];
391
+        let menuData = content[1]['data'];
392
+        let proximoIcon = 'shopping';
393
+        let proximoColor = ThemeManager.getCurrentThemeVariables().proximoColor;
394
+        let proximoTitle = i18n.t('homeScreen.dashboard.proximoTitle');
395
+        let isProximoAvailable = parseInt(proximoData) > 0;
396
+        let proximoSubtitle = '';
397
+        if (isProximoAvailable) {
398
+            proximoSubtitle =
399
+                <Text>
400
+                    <Text style={{fontWeight: "bold"}}>{proximoData}</Text>
401
+                    <Text>{i18n.t('homeScreen.dashboard.proximoSubtitle')}</Text>
402
+                </Text>;
403
+        } else
404
+            proximoSubtitle = i18n.t('homeScreen.dashboard.proximoSubtitleNA');
405
+        let proximoClickAction = () => this.props.navigation.navigate('Proximo');
406
+
407
+
408
+        let menuIcon = 'silverware-fork-knife';
409
+        let menuColor = ThemeManager.getCurrentThemeVariables().menuColor;
410
+        let menuTitle = i18n.t('homeScreen.dashboard.menuTitle');
411
+        let isMenuAvailable = menuData.length > 0;
412
+        let menuSubtitle = '';
413
+        if (isMenuAvailable) {
414
+            menuSubtitle = i18n.t('homeScreen.dashboard.menuSubtitle');
415
+        } else
416
+            menuSubtitle = i18n.t('homeScreen.dashboard.menuSubtitleNA');
417
+        let menuClickAction = () => this.props.navigation.navigate('SelfMenuScreen');
418
+        return (
419
+            <View style={{
420
+                flexDirection: 'row',
421
+                marginLeft: 10,
422
+                marginRight: 10,
423
+            }}>
424
+                {this.getSquareDashboardItem(isProximoAvailable, proximoIcon, proximoColor, proximoTitle, proximoSubtitle, proximoClickAction, true)}
425
+                {this.getSquareDashboardItem(isMenuAvailable, menuIcon, menuColor, menuTitle, menuSubtitle, menuClickAction, false)}
426
+            </View>
427
+        );
428
+    }
429
+
430
+
431
+    getDashboardBottomItem(content: Object) {
432
+        let icon = 'washing-machine';
433
+        let color = ThemeManager.getCurrentThemeVariables().proxiwashColor;
434
+        let title = i18n.t('homeScreen.dashboard.proxiwashTitle');
435
+        let isAvailable = parseInt(content['dryers']) > 0 || parseInt(content['washers']) > 0;
436
+        let subtitle;
437
+        if (isAvailable) {
438
+            subtitle =
439
+                <Text>
440
+                    <Text style={{
441
+                        fontWeight: parseInt(content['dryers']) > 0 ?
442
+                            'bold' :
443
+                            'normal',
444
+                        color: parseInt(content['dryers']) > 0 ?
445
+                            ThemeManager.getCurrentThemeVariables().textColor :
446
+                            ThemeManager.getCurrentThemeVariables().listNoteColor
447
+                    }}>
448
+                        {content['dryers']}
449
+                    </Text>
450
+                    <Text>{i18n.t('homeScreen.dashboard.proxiwashSubtitle1')}</Text>
451
+                    <Text style={{
452
+                        fontWeight: parseInt(content['washers']) > 0 ?
453
+                            'bold' :
454
+                            'normal',
455
+                        color: parseInt(content['washers']) > 0 ?
456
+                            ThemeManager.getCurrentThemeVariables().textColor :
457
+                            ThemeManager.getCurrentThemeVariables().listNoteColor
458
+                    }}>
459
+                        {content['washers']}
460
+                    </Text>
461
+                    <Text>{i18n.t('homeScreen.dashboard.proxiwashSubtitle2')}</Text>
462
+                </Text>;
463
+        } else
464
+            subtitle = i18n.t('homeScreen.dashboard.proxiwashSubtitleNA');
465
+        let clickAction = () => this.props.navigation.navigate('Proxiwash');
466
+        return (
467
+            <Card style={{
468
+                flex: 0,
469
+                marginLeft: 10,
470
+                marginRight: 10,
471
+                borderRadius: 50,
472
+                backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg
473
+            }}>
474
+                <PlatformTouchable
475
+                    onPress={clickAction}
476
+                    style={{
477
+                        zIndex: 100,
478
+                        borderRadius: 50
479
+                    }}
480
+                >
481
+                    <CardItem style={{
482
+                        borderRadius: 50,
483
+                        backgroundColor: 'transparent'
484
+                    }}>
485
+                        <Left>
486
+                            <CustomMaterialIcon
487
+                                icon={icon}
488
+                                color={
489
+                                    isAvailable ?
490
+                                        color :
491
+                                        ThemeManager.getCurrentThemeVariables().textDisabledColor
492
+                                }
493
+                                fontSize={40}
494
+                                width={40}/>
495
+                            <Body>
496
+                                <H3 style={{
497
+                                    color: isAvailable ?
498
+                                        ThemeManager.getCurrentThemeVariables().textColor :
499
+                                        ThemeManager.getCurrentThemeVariables().listNoteColor
500
+                                }}>
501
+                                    {title}
502
+                                </H3>
503
+                                <Text style={{
504
+                                    color: isAvailable ?
505
+                                        ThemeManager.getCurrentThemeVariables().listNoteColor :
506
+                                        ThemeManager.getCurrentThemeVariables().textDisabledColor
507
+                                }}>
508
+                                    {subtitle}
509
+                                </Text>
510
+                            </Body>
511
+                        </Left>
512
+                    </CardItem>
513
+                </PlatformTouchable>
514
+            </Card>
515
+        );
516
+    }
517
+
518
+
519
+    getRenderItem(item: Object, section: Object, data: Object) {
520
+        if (section['id'] === SECTIONS_ID[0]) {
521
+            return this.getDashboardItem(item);
269 522
         } else {
270 523
             return (
271 524
                 <Card style={{

Loading…
Cancel
Save