Browse Source

Refactored dashboard using react custom component

keplyx 2 years ago
parent
commit
e419626c43
2 changed files with 279 additions and 243 deletions
  1. 236
    0
      components/DashboardItem.js
  2. 43
    243
      screens/HomeScreen.js

+ 236
- 0
components/DashboardItem.js View File

@@ -0,0 +1,236 @@
1
+// @flow
2
+
3
+import * as React from 'react';
4
+import {Body, Card, CardItem, H3, Left, Text, Thumbnail} from "native-base";
5
+import CustomMaterialIcon from "./CustomMaterialIcon";
6
+import {View} from "react-native";
7
+import ThemeManager from "../utils/ThemeManager";
8
+import HTML from "react-native-render-html";
9
+import {LinearGradient} from "expo-linear-gradient";
10
+import PlatformTouchable from "react-native-platform-touchable";
11
+
12
+const CARD_BORDER_RADIUS = 10;
13
+
14
+type Props = {
15
+    isAvailable: boolean,
16
+    icon: string,
17
+    color: string,
18
+    title: string,
19
+    subtitle: React.Node,
20
+    clickAction: Function,
21
+    isSquare: boolean,
22
+    isSquareLeft: boolean,
23
+    displayEvent: ?Object,
24
+}
25
+
26
+export default class DashboardItem extends React.Component<Props> {
27
+
28
+    static defaultProps = {
29
+        isSquare: false,
30
+        isSquareLeft: true,
31
+        displayEvent: undefined,
32
+    };
33
+
34
+    /**
35
+     * Convert the date string given by in the event list json to a date object
36
+     * @param dateString
37
+     * @return {Date}
38
+     */
39
+    stringToDate(dateString: ?string): ?Date {
40
+        let date = new Date();
41
+        if (dateString === undefined || dateString === null)
42
+            date = undefined;
43
+        else if (dateString.split(' ').length > 1) {
44
+            let timeStr = dateString.split(' ')[1];
45
+            date.setHours(parseInt(timeStr.split(':')[0]), parseInt(timeStr.split(':')[1]), 0);
46
+        } else
47
+            date = undefined;
48
+        return date;
49
+    }
50
+
51
+    padStr(i: number) {
52
+        return (i < 10) ? "0" + i : "" + i;
53
+    }
54
+
55
+    getFormattedEventTime(event: Object): string {
56
+        let formattedStr = '';
57
+        let startDate = this.stringToDate(event['date_begin']);
58
+        let endDate = this.stringToDate(event['date_end']);
59
+        if (startDate !== undefined && startDate !== null && endDate !== undefined && endDate !== null)
60
+            formattedStr = this.padStr(startDate.getHours()) + ':' + this.padStr(startDate.getMinutes()) +
61
+                ' - ' + this.padStr(endDate.getHours()) + ':' + this.padStr(endDate.getMinutes());
62
+        else if (startDate !== undefined && startDate !== null)
63
+            formattedStr = this.padStr(startDate.getHours()) + ':' + this.padStr(startDate.getMinutes());
64
+        return formattedStr
65
+    }
66
+
67
+    getEventPreviewContainer() {
68
+        if (this.props.displayEvent !== undefined && this.props.displayEvent !== null) {
69
+            return (
70
+                <View>
71
+                    <CardItem style={{
72
+                        paddingTop: 0,
73
+                        paddingBottom: 0,
74
+                        backgroundColor: 'transparent',
75
+                    }}>
76
+                        <Left>
77
+                            {this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null ?
78
+                                <Thumbnail source={{uri: this.props.displayEvent['logo']}} square/> :
79
+                                <View/>}
80
+                            <Body>
81
+                                <Text>{this.props.displayEvent['title']}</Text>
82
+                                <Text note>{this.getFormattedEventTime(this.props.displayEvent)}</Text>
83
+                            </Body>
84
+                        </Left>
85
+                    </CardItem>
86
+                    <CardItem style={{
87
+                        borderRadius: CARD_BORDER_RADIUS,
88
+                        backgroundColor: 'transparent',
89
+                    }}>
90
+                        <Body style={{
91
+                            height: this.props.displayEvent['description'].length > 50 ? 70 : 20,
92
+                            overflow: 'hidden',
93
+                        }}>
94
+                            <HTML html={"<div>" + this.props.displayEvent['description'] + "</div>"}
95
+                                  tagsStyles={{
96
+                                      p: {
97
+                                          color: ThemeManager.getCurrentThemeVariables().textColor,
98
+                                          fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase,
99
+                                      },
100
+                                      div: {color: ThemeManager.getCurrentThemeVariables().textColor},
101
+                                  }}/>
102
+                            <LinearGradient
103
+                                colors={['transparent', ThemeManager.getCurrentThemeVariables().cardDefaultBg]}
104
+                                end={[0, 0.6]}
105
+                                style={{
106
+                                    position: 'absolute',
107
+                                    width: '100%',
108
+                                    height: 60,
109
+                                    bottom: 0,
110
+                                }}>
111
+                                <View style={{
112
+                                    marginLeft: 'auto',
113
+                                    marginTop: 'auto',
114
+                                    flexDirection: 'row'
115
+                                }}>
116
+                                    <Text style={{
117
+                                        marginTop: 'auto',
118
+                                        marginBottom: 'auto',
119
+                                        padding: 0,
120
+                                    }}>
121
+                                        Click to see more
122
+                                    </Text>
123
+                                    <CustomMaterialIcon icon={'chevron-right'}/>
124
+                                </View>
125
+                            </LinearGradient>
126
+                        </Body>
127
+                    </CardItem>
128
+                </View>
129
+            );
130
+        } else
131
+            return <View/>
132
+    }
133
+
134
+    getIcon() {
135
+        return (
136
+            <CustomMaterialIcon
137
+                icon={this.props.icon}
138
+                color={
139
+                    this.props.isAvailable ?
140
+                        this.props.color :
141
+                        ThemeManager.getCurrentThemeVariables().textDisabledColor
142
+                }
143
+                fontSize={this.props.isSquare ? 60 : 40}
144
+                width={this.props.isSquare ? 60 : 40}/>
145
+        );
146
+    }
147
+
148
+    getText() {
149
+        return (
150
+            <View style={{
151
+                width: this.props.isSquare ? '100%' : 'auto',
152
+            }}>
153
+                <H3 style={{
154
+                    color: this.props.isAvailable ?
155
+                        ThemeManager.getCurrentThemeVariables().textColor :
156
+                        ThemeManager.getCurrentThemeVariables().listNoteColor,
157
+                    textAlign: this.props.isSquare ? 'center' : 'left',
158
+                    width: this.props.isSquare ? '100%' : 'auto',
159
+                }}>
160
+                    {this.props.title}
161
+                </H3>
162
+                <Text style={{
163
+                    color: this.props.isAvailable ?
164
+                        ThemeManager.getCurrentThemeVariables().listNoteColor :
165
+                        ThemeManager.getCurrentThemeVariables().textDisabledColor,
166
+                    textAlign: this.props.isSquare ? 'center' : 'left',
167
+                    width: this.props.isSquare ? '100%' : 'auto',
168
+                }}>
169
+                    {this.props.subtitle}
170
+                </Text>
171
+            </View>
172
+        );
173
+    }
174
+
175
+    getContent() {
176
+        if (this.props.isSquare) {
177
+            return (
178
+                <Body>
179
+                    <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
180
+                        {this.getIcon()}
181
+                    </View>
182
+                    {this.getText()}
183
+                </Body>
184
+            );
185
+        } else {
186
+            return (
187
+                <Left>
188
+                    {this.getIcon()}
189
+                    <Body>
190
+                        {this.getText()}
191
+                    </Body>
192
+                </Left>
193
+            );
194
+        }
195
+    }
196
+
197
+
198
+    render() {
199
+        let marginRight = 10;
200
+        if (this.props.isSquare) {
201
+            if (this.props.isSquareLeft)
202
+                marginRight = '4%';
203
+            else
204
+                marginRight = 0
205
+        }
206
+        return (
207
+            <Card style={{
208
+                flex: 0,
209
+                width: this.props.isSquare ? '48%' : 'auto',
210
+                marginLeft: this.props.isSquare ? 0 : 10,
211
+                marginRight: marginRight,
212
+                marginTop: 10,
213
+                borderRadius: CARD_BORDER_RADIUS,
214
+                backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg,
215
+                overflow: 'hidden',
216
+            }}>
217
+                <PlatformTouchable
218
+                    onPress={this.props.clickAction}
219
+                    style={{
220
+                        zIndex: 100,
221
+                        minHeight: this.props.isSquare ? 150 : 'auto',
222
+                    }}
223
+                >
224
+                    <View>
225
+                        <CardItem style={{
226
+                            backgroundColor: 'transparent',
227
+                        }}>
228
+                            {this.getContent()}
229
+                        </CardItem>
230
+                        {this.getEventPreviewContainer()}
231
+                    </View>
232
+                </PlatformTouchable>
233
+            </Card>
234
+        );
235
+    }
236
+}

+ 43
- 243
screens/HomeScreen.js View File

@@ -8,9 +8,8 @@ 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
-import PlatformTouchable from "react-native-platform-touchable";
12
-import HTML from 'react-native-render-html';
13
-import {LinearGradient} from 'expo-linear-gradient';
11
+import DashboardItem from "../components/DashboardItem";
12
+// import DATA from "../dashboard_data.json";
14 13
 
15 14
 
16 15
 const ICON_AMICALE = require('../assets/amicale.png');
@@ -149,11 +148,11 @@ export default class HomeScreen extends FetchedDataSectionList {
149 148
     getDashboardItem(item: Object) {
150 149
         let content = item['content'];
151 150
         if (item['id'] === 'top')
152
-            return this.getDashboardTopItem(content);
151
+            return this.getDashboardEventItem(content);
153 152
         else if (item['id'] === 'middle')
154 153
             return this.getDashboardMiddleItem(content);
155 154
         else
156
-            return this.getDashboardBottomItem(content);
155
+            return this.getDashboardProxiwashItem(content);
157 156
     }
158 157
 
159 158
     /**
@@ -286,24 +285,8 @@ export default class HomeScreen extends FetchedDataSectionList {
286 285
         return displayEvent;
287 286
     }
288 287
 
289
-    padStr(i: number) {
290
-        return (i < 10) ? "0" + i : "" + i;
291
-    }
292
-
293
-    getFormattedEventTime(event: Object): string {
294
-        let formattedStr = '';
295
-        let startDate = this.stringToDate(event['date_begin']);
296
-        let endDate = this.stringToDate(event['date_end']);
297
-        if (startDate !== undefined && startDate !== null && endDate !== undefined && endDate !== null)
298
-            formattedStr = this.padStr(startDate.getHours()) + ':' + this.padStr(startDate.getMinutes()) +
299
-                ' - ' + this.padStr(endDate.getHours()) + ':' + this.padStr(endDate.getMinutes());
300
-        else if (startDate !== undefined && startDate !== null)
301
-            formattedStr = this.padStr(startDate.getHours()) + ':' + this.padStr(startDate.getMinutes());
302
-        return formattedStr
303
-    }
304
-
305 288
 
306
-    getDashboardTopItem(content: Array<Object>) {
289
+    getDashboardEventItem(content: Array<Object>) {
307 290
         let icon = 'calendar-range';
308 291
         let color = ThemeManager.getCurrentThemeVariables().planningColor;
309 292
         let title = i18n.t('homeScreen.dashboard.todayEventsTitle');
@@ -329,178 +312,18 @@ export default class HomeScreen extends FetchedDataSectionList {
329 312
         let displayEvent = this.getDisplayEvent(futureEvents);
330 313
 
331 314
         return (
332
-            <Card style={{
333
-                flex: 0,
334
-                marginLeft: 10,
335
-                marginRight: 10,
336
-                marginTop: 10,
337
-                borderRadius: CARD_BORDER_RADIUS,
338
-                backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg,
339
-                overflow: 'hidden',
340
-            }}>
341
-                <PlatformTouchable
342
-                    onPress={clickAction}
343
-                    style={{
344
-                        zIndex: 100,
345
-                    }}
346
-                >
347
-                    <View>
348
-                        <CardItem style={{
349
-                            backgroundColor: 'transparent',
350
-                        }}>
351
-                            <Left>
352
-                                <CustomMaterialIcon
353
-                                    icon={icon}
354
-                                    color={
355
-                                        isAvailable ?
356
-                                            color :
357
-                                            ThemeManager.getCurrentThemeVariables().textDisabledColor
358
-                                    }
359
-                                    fontSize={40}
360
-                                    width={40}/>
361
-                                <Body>
362
-                                    <H3 style={{
363
-                                        color: isAvailable ?
364
-                                            ThemeManager.getCurrentThemeVariables().textColor :
365
-                                            ThemeManager.getCurrentThemeVariables().listNoteColor
366
-                                    }}>
367
-                                        {title}
368
-                                    </H3>
369
-                                    <Text style={{
370
-                                        color: isAvailable ?
371
-                                            ThemeManager.getCurrentThemeVariables().listNoteColor :
372
-                                            ThemeManager.getCurrentThemeVariables().textDisabledColor
373
-                                    }}>
374
-                                        {subtitle}
375
-                                    </Text>
376
-                                </Body>
377
-                            </Left>
378
-                        </CardItem>
379
-                        {displayEvent !== undefined ?
380
-                            <View>
381
-                                <CardItem style={{
382
-                                    paddingTop: 0,
383
-                                    paddingBottom: 0,
384
-                                    backgroundColor: 'transparent',
385
-                                }}>
386
-                                    <Left>
387
-                                        {displayEvent['logo'] !== '' && displayEvent['logo'] !== null ?
388
-                                            <Thumbnail source={{uri: displayEvent['logo']}} square/> :
389
-                                            <View/>}
390
-                                        <Body>
391
-                                            <Text>{displayEvent['title']}</Text>
392
-                                            <Text note>{this.getFormattedEventTime(displayEvent)}</Text>
393
-                                        </Body>
394
-                                    </Left>
395
-                                </CardItem>
396
-                                <CardItem style={{
397
-                                    borderRadius: CARD_BORDER_RADIUS,
398
-                                    backgroundColor: 'transparent',
399
-                                }}>
400
-                                    <Body style={{
401
-                                        height: displayEvent['description'].length > 50 ? 70 : 20,
402
-                                        overflow: 'hidden',
403
-                                    }}>
404
-                                        <HTML html={"<div>" + displayEvent['description'] + "</div>"}
405
-                                              tagsStyles={{
406
-                                                  p: {
407
-                                                      color: ThemeManager.getCurrentThemeVariables().textColor,
408
-                                                      fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase,
409
-                                                  },
410
-                                                  div: {color: ThemeManager.getCurrentThemeVariables().textColor},
411
-                                              }}
412
-                                              onLinkPress={(event, link) => openWebLink(link)}/>
413
-                                        <LinearGradient
414
-                                            colors={['transparent', ThemeManager.getCurrentThemeVariables().cardDefaultBg]}
415
-                                            end={[0, 0.6]}
416
-                                            style={{
417
-                                                position: 'absolute',
418
-                                                width: '100%',
419
-                                                height: 60,
420
-                                                bottom: 0,
421
-                                            }}>
422
-                                            <View style={{
423
-                                                marginLeft: 'auto',
424
-                                                marginTop: 'auto',
425
-                                                flexDirection: 'row'
426
-                                            }}>
427
-                                                <Text style={{
428
-                                                    marginTop: 'auto',
429
-                                                    marginBottom: 'auto',
430
-                                                    padding: 0,
431
-                                                }}>
432
-                                                    Click to see more
433
-                                                </Text>
434
-                                                <CustomMaterialIcon icon={'chevron-right'}/>
435
-                                            </View>
436
-                                        </LinearGradient>
437
-                                    </Body>
438
-                                </CardItem>
439
-                            </View> :
440
-                            <View/>}
441
-                    </View>
442
-                </PlatformTouchable>
443
-            </Card>
315
+            <DashboardItem
316
+                subtitle={subtitle}
317
+                color={color}
318
+                icon={icon}
319
+                clickAction={() => clickAction()}
320
+                title={title}
321
+                isAvailable={isAvailable}
322
+                displayEvent={displayEvent}
323
+            />
444 324
         );
445 325
     }
446 326
 
447
-    getSquareDashboardItem(isAvailable: boolean, icon: string, color: string, title: string, subtitle: React.Node, clickAction: Function, isLeftElement: boolean) {
448
-        return (
449
-            <Card style={{
450
-                flex: 0,
451
-                width: '48%',
452
-                marginLeft: 0,
453
-                marginRight: isLeftElement ? '4%' : 0,
454
-                borderRadius: CARD_BORDER_RADIUS,
455
-                backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg,
456
-                overflow: 'hidden',
457
-            }}>
458
-                <PlatformTouchable
459
-                    onPress={clickAction}
460
-                    style={{
461
-                        zIndex: 100,
462
-                        minHeight: 150,
463
-                    }}
464
-                >
465
-                    <CardItem style={{
466
-                        backgroundColor: 'transparent'
467
-                    }}>
468
-                        <Body>
469
-                            <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
470
-                                <CustomMaterialIcon
471
-                                    icon={icon}
472
-                                    color={
473
-                                        isAvailable ?
474
-                                            color :
475
-                                            ThemeManager.getCurrentThemeVariables().textDisabledColor
476
-                                    }
477
-                                    fontSize={60}
478
-                                    width={60}/>
479
-                            </View>
480
-                            <H3 style={{
481
-                                color: isAvailable ?
482
-                                    ThemeManager.getCurrentThemeVariables().textColor :
483
-                                    ThemeManager.getCurrentThemeVariables().listNoteColor,
484
-                                textAlign: 'center',
485
-                                width: '100%'
486
-                            }}>
487
-                                {title}
488
-                            </H3>
489
-                            <Text style={{
490
-                                color: isAvailable ?
491
-                                    ThemeManager.getCurrentThemeVariables().listNoteColor :
492
-                                    ThemeManager.getCurrentThemeVariables().textDisabledColor,
493
-                                textAlign: 'center',
494
-                                width: '100%'
495
-                            }}>
496
-                                {subtitle}
497
-                            </Text>
498
-                        </Body>
499
-                    </CardItem>
500
-                </PlatformTouchable>
501
-            </Card>
502
-        );
503
-    }
504 327
 
505 328
     getDashboardMiddleItem(content: Object) {
506 329
         let proximoData = content[0]['data'];
@@ -517,8 +340,8 @@ export default class HomeScreen extends FetchedDataSectionList {
517 340
                     <Text>
518 341
                         {
519 342
                             proximoData > 1 ?
520
-                            i18n.t('homeScreen.dashboard.proximoSubtitlePlural') :
521
-                            i18n.t('homeScreen.dashboard.proximoSubtitle')
343
+                                i18n.t('homeScreen.dashboard.proximoSubtitlePlural') :
344
+                                i18n.t('homeScreen.dashboard.proximoSubtitle')
522 345
                         }
523 346
                     </Text>
524 347
                 </Text>;
@@ -543,14 +366,31 @@ export default class HomeScreen extends FetchedDataSectionList {
543 366
                 marginLeft: 10,
544 367
                 marginRight: 10,
545 368
             }}>
546
-                {this.getSquareDashboardItem(isProximoAvailable, proximoIcon, proximoColor, proximoTitle, proximoSubtitle, proximoClickAction, true)}
547
-                {this.getSquareDashboardItem(isMenuAvailable, menuIcon, menuColor, menuTitle, menuSubtitle, menuClickAction, false)}
369
+                <DashboardItem
370
+                    isSquare={true}
371
+                    subtitle={proximoSubtitle}
372
+                    color={proximoColor}
373
+                    icon={proximoIcon}
374
+                    clickAction={() => proximoClickAction()}
375
+                    title={proximoTitle}
376
+                    isAvailable={isProximoAvailable}
377
+                    isSquareLeft={true}/>
378
+                <DashboardItem
379
+                    isSquare={true}
380
+                    subtitle={menuSubtitle}
381
+                    color={menuColor}
382
+                    icon={menuIcon}
383
+                    clickAction={() => menuClickAction()}
384
+                    title={menuTitle}
385
+                    isAvailable={isMenuAvailable}/>
386
+                {/*{this.getSquareDashboardItem(isProximoAvailable, proximoIcon, proximoColor, proximoTitle, proximoSubtitle, proximoClickAction, true)}*/}
387
+                {/*{this.getSquareDashboardItem(isMenuAvailable, menuIcon, menuColor, menuTitle, menuSubtitle, menuClickAction, false)}*/}
548 388
             </View>
549 389
         );
550 390
     }
551 391
 
552 392
 
553
-    getDashboardBottomItem(content: Object) {
393
+    getDashboardProxiwashItem(content: Object) {
554 394
         let icon = 'washing-machine';
555 395
         let color = ThemeManager.getCurrentThemeVariables().proxiwashColor;
556 396
         let title = i18n.t('homeScreen.dashboard.proxiwashTitle');
@@ -602,53 +442,13 @@ export default class HomeScreen extends FetchedDataSectionList {
602 442
             subtitle = i18n.t('homeScreen.dashboard.proxiwashSubtitleNA');
603 443
         let clickAction = () => this.props.navigation.navigate('Proxiwash');
604 444
         return (
605
-            <Card style={{
606
-                flex: 0,
607
-                marginLeft: 10,
608
-                marginRight: 10,
609
-                borderRadius: CARD_BORDER_RADIUS,
610
-                backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg,
611
-                overflow: 'hidden',
612
-            }}>
613
-                <PlatformTouchable
614
-                    onPress={clickAction}
615
-                    style={{
616
-                        zIndex: 100,
617
-                    }}
618
-                >
619
-                    <CardItem style={{
620
-                        backgroundColor: 'transparent'
621
-                    }}>
622
-                        <Left>
623
-                            <CustomMaterialIcon
624
-                                icon={icon}
625
-                                color={
626
-                                    isAvailable ?
627
-                                        color :
628
-                                        ThemeManager.getCurrentThemeVariables().textDisabledColor
629
-                                }
630
-                                fontSize={40}
631
-                                width={40}/>
632
-                            <Body>
633
-                                <H3 style={{
634
-                                    color: isAvailable ?
635
-                                        ThemeManager.getCurrentThemeVariables().textColor :
636
-                                        ThemeManager.getCurrentThemeVariables().listNoteColor
637
-                                }}>
638
-                                    {title}
639
-                                </H3>
640
-                                <Text style={{
641
-                                    color: isAvailable ?
642
-                                        ThemeManager.getCurrentThemeVariables().listNoteColor :
643
-                                        ThemeManager.getCurrentThemeVariables().textDisabledColor
644
-                                }}>
645
-                                    {subtitle}
646
-                                </Text>
647
-                            </Body>
648
-                        </Left>
649
-                    </CardItem>
650
-                </PlatformTouchable>
651
-            </Card>
445
+            <DashboardItem
446
+                subtitle={subtitle}
447
+                color={color}
448
+                icon={icon}
449
+                clickAction={() => clickAction()}
450
+                title={title}
451
+                isAvailable={isAvailable}/>
652 452
         );
653 453
     }
654 454
 

Loading…
Cancel
Save