Browse Source

First implementation of planning

keplyx 4 years ago
parent
commit
ddf58959c9

+ 2
- 2
app.json View File

@@ -10,7 +10,7 @@
10 10
       "android",
11 11
       "web"
12 12
     ],
13
-    "version": "1.0.2",
13
+    "version": "1.0.3",
14 14
     "orientation": "portrait",
15 15
     "primaryColor": "#be1522",
16 16
     "icon": "./assets/android.icon.png",
@@ -36,7 +36,7 @@
36 36
     },
37 37
     "android": {
38 38
       "package": "fr.amicaleinsat.application",
39
-      "versionCode": 5,
39
+      "versionCode": 6,
40 40
       "icon": "./assets/android.icon.png",
41 41
       "adaptiveIcon": {
42 42
         "foregroundImage": "./assets/android.adaptive-icon.png",

+ 5
- 0
native-base-theme/variables/platform.js View File

@@ -242,6 +242,7 @@ export default {
242 242
 
243 243
     // Text
244 244
     textColor: "#000",
245
+    textDisabledColor: "#d9e1e8",
245 246
     inverseTextColor: "#fff",
246 247
     noteFontSize: 14,
247 248
     get defaultTextColor() {
@@ -260,6 +261,10 @@ export default {
260 261
     customMaterialIconColor: "#5d5d5d",
261 262
     fetchedDataSectionListErrorText: "#898989",
262 263
 
264
+    // Calendar/Agenda
265
+    agendaBackgroundColor: '#f3f3f4',
266
+    agendaEmptyLine: '#dbdbdc',
267
+
263 268
     // PROXIWASH
264 269
     proxiwashFinishedColor: "rgba(54,165,22,0.31)",
265 270
     proxiwashReadyColor: "transparent",

+ 5
- 0
native-base-theme/variables/platformDark.js View File

@@ -243,6 +243,7 @@ export default {
243 243
 
244 244
     // Text
245 245
     textColor: "#ebebeb",
246
+    textDisabledColor: "#3b3f42",
246 247
     inverseTextColor: "#000",
247 248
     noteFontSize: 14,
248 249
     get defaultTextColor() {
@@ -261,6 +262,10 @@ export default {
261 262
     customMaterialIconColor: "#b3b3b3",
262 263
     fetchedDataSectionListErrorText: "#acacac",
263 264
 
265
+    // Calendar/Agenda
266
+    agendaBackgroundColor: '#373737',
267
+    agendaEmptyLine: '#464646',
268
+
264 269
     // PROXIWASH
265 270
     proxiwashFinishedColor: "rgba(17,149,32,0.53)",
266 271
     proxiwashReadyColor: "transparent",

+ 124
- 0
package-lock.json View File

@@ -1866,6 +1866,16 @@
1866 1866
         "node-int64": "^0.4.0"
1867 1867
       }
1868 1868
     },
1869
+    "buffer": {
1870
+      "version": "4.9.1",
1871
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
1872
+      "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
1873
+      "requires": {
1874
+        "base64-js": "^1.0.2",
1875
+        "ieee754": "^1.1.4",
1876
+        "isarray": "^1.0.0"
1877
+      }
1878
+    },
1869 1879
     "buffer-alloc": {
1870 1880
       "version": "1.2.0",
1871 1881
       "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
@@ -2504,11 +2514,54 @@
2504 2514
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
2505 2515
       "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
2506 2516
     },
2517
+    "dom-serializer": {
2518
+      "version": "0.2.1",
2519
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.1.tgz",
2520
+      "integrity": "sha512-sK3ujri04WyjwQXVoK4PU3y8ula1stq10GJZpqHIUgoGZdsGzAGu65BnU3d08aTVSvO7mGPZUc0wTEDL+qGE0Q==",
2521
+      "requires": {
2522
+        "domelementtype": "^2.0.1",
2523
+        "entities": "^2.0.0"
2524
+      },
2525
+      "dependencies": {
2526
+        "domelementtype": {
2527
+          "version": "2.0.1",
2528
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz",
2529
+          "integrity": "sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ=="
2530
+        },
2531
+        "entities": {
2532
+          "version": "2.0.0",
2533
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
2534
+          "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw=="
2535
+        }
2536
+      }
2537
+    },
2507 2538
     "dom-walk": {
2508 2539
       "version": "0.1.1",
2509 2540
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.1.tgz",
2510 2541
       "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
2511 2542
     },
2543
+    "domelementtype": {
2544
+      "version": "1.3.1",
2545
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
2546
+      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
2547
+    },
2548
+    "domhandler": {
2549
+      "version": "2.4.2",
2550
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
2551
+      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
2552
+      "requires": {
2553
+        "domelementtype": "1"
2554
+      }
2555
+    },
2556
+    "domutils": {
2557
+      "version": "1.7.0",
2558
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
2559
+      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
2560
+      "requires": {
2561
+        "dom-serializer": "0",
2562
+        "domelementtype": "1"
2563
+      }
2564
+    },
2512 2565
     "ee-first": {
2513 2566
       "version": "1.1.1",
2514 2567
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -2540,6 +2593,11 @@
2540 2593
         "once": "^1.4.0"
2541 2594
       }
2542 2595
     },
2596
+    "entities": {
2597
+      "version": "1.1.2",
2598
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
2599
+      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w=="
2600
+    },
2543 2601
     "envinfo": {
2544 2602
       "version": "5.12.1",
2545 2603
       "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-5.12.1.tgz",
@@ -2597,6 +2655,11 @@
2597 2655
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
2598 2656
       "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q=="
2599 2657
     },
2658
+    "events": {
2659
+      "version": "1.1.1",
2660
+      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
2661
+      "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
2662
+    },
2600 2663
     "exec-sh": {
2601 2664
       "version": "0.2.2",
2602 2665
       "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.2.2.tgz",
@@ -4067,6 +4130,36 @@
4067 4130
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz",
4068 4131
       "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w=="
4069 4132
     },
4133
+    "html-entities": {
4134
+      "version": "1.2.1",
4135
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz",
4136
+      "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8="
4137
+    },
4138
+    "htmlparser2": {
4139
+      "version": "3.10.1",
4140
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
4141
+      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
4142
+      "requires": {
4143
+        "domelementtype": "^1.3.1",
4144
+        "domhandler": "^2.3.0",
4145
+        "domutils": "^1.5.1",
4146
+        "entities": "^1.1.1",
4147
+        "inherits": "^2.0.1",
4148
+        "readable-stream": "^3.1.1"
4149
+      },
4150
+      "dependencies": {
4151
+        "readable-stream": {
4152
+          "version": "3.4.0",
4153
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz",
4154
+          "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==",
4155
+          "requires": {
4156
+            "inherits": "^2.0.3",
4157
+            "string_decoder": "^1.1.1",
4158
+            "util-deprecate": "^1.0.1"
4159
+          }
4160
+        }
4161
+      }
4162
+    },
4070 4163
     "http-errors": {
4071 4164
       "version": "1.7.3",
4072 4165
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -4092,6 +4185,11 @@
4092 4185
         "safer-buffer": ">= 2.1.2 < 3"
4093 4186
       }
4094 4187
     },
4188
+    "ieee754": {
4189
+      "version": "1.1.13",
4190
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz",
4191
+      "integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg=="
4192
+    },
4095 4193
     "image-size": {
4096 4194
       "version": "0.6.3",
4097 4195
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.6.3.tgz",
@@ -6131,6 +6229,16 @@
6131 6229
       "resolved": "https://registry.npmjs.org/react-native-branch/-/react-native-branch-2.2.5.tgz",
6132 6230
       "integrity": "sha1-QHTdY7SXPmOX2c5Q6XtXx3pRjp0="
6133 6231
     },
6232
+    "react-native-calendars": {
6233
+      "version": "1.212.0",
6234
+      "resolved": "https://registry.npmjs.org/react-native-calendars/-/react-native-calendars-1.212.0.tgz",
6235
+      "integrity": "sha512-FrWabRJlUeTjCF8qx8cYAId4SbCMmVmO5eE791ykQaTG2/jvQJz2O3MF5QRjJHyaS/QdeEilKf9w/Mk43bM42Q==",
6236
+      "requires": {
6237
+        "lodash": "^4.0.0",
6238
+        "prop-types": "^15.5.10",
6239
+        "xdate": "^0.8.0"
6240
+      }
6241
+    },
6134 6242
     "react-native-drawer": {
6135 6243
       "version": "2.5.1",
6136 6244
       "resolved": "https://registry.npmjs.org/react-native-drawer/-/react-native-drawer-2.5.1.tgz",
@@ -6242,6 +6350,17 @@
6242 6350
       "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.0.1.tgz",
6243 6351
       "integrity": "sha512-RENoo6/sJc3FApP7vJ1Js7WyDuTVh97bbr5aMjJyw3kqpR2/JDHyL/dQFfOvSSAc+VjitpR9/CfPPad7tLRiIA=="
6244 6352
     },
6353
+    "react-native-render-html": {
6354
+      "version": "4.1.2",
6355
+      "resolved": "https://registry.npmjs.org/react-native-render-html/-/react-native-render-html-4.1.2.tgz",
6356
+      "integrity": "sha512-lIW7GfNCsqOzdv0hxiZms24uC9Hu8hqufMyD4FBjfs8HSc4pUKnvBgOljiqEXmjGhDEJM6oY7QGglAV0hL69bQ==",
6357
+      "requires": {
6358
+        "buffer": "^4.5.1",
6359
+        "events": "^1.1.0",
6360
+        "html-entities": "^1.2.0",
6361
+        "htmlparser2": "^3.10.1"
6362
+      }
6363
+    },
6245 6364
     "react-native-safe-area-view": {
6246 6365
       "version": "0.12.0",
6247 6366
       "resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.12.0.tgz",
@@ -8208,6 +8327,11 @@
8208 8327
         "uuid": "^3.3.2"
8209 8328
       }
8210 8329
     },
8330
+    "xdate": {
8331
+      "version": "0.8.2",
8332
+      "resolved": "https://registry.npmjs.org/xdate/-/xdate-0.8.2.tgz",
8333
+      "integrity": "sha1-17AzwASF0CaVuvAET06s2j/JYaM="
8334
+    },
8211 8335
     "xmlbuilder": {
8212 8336
       "version": "9.0.7",
8213 8337
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",

+ 2
- 0
package.json View File

@@ -23,10 +23,12 @@
23 23
     "react-native": "^0.59.9",
24 24
     "react-native-app-intro-slider": "^3.0.0",
25 25
     "react-native-autolink": "^1.8.1",
26
+    "react-native-calendars": "^1.212.0",
26 27
     "react-native-modal": "^11.3.1",
27 28
     "react-native-modalize": "^1.2.1",
28 29
     "react-native-paper": "^2.16.0",
29 30
     "react-native-platform-touchable": "^1.1.1",
31
+    "react-native-render-html": "^4.1.2",
30 32
     "react-native-side-menu": "^1.1.3",
31 33
     "react-native-status-bar-height": "^2.3.1",
32 34
     "react-native-webview": "^5.8.1",

+ 288
- 54
screens/PlanningScreen.js View File

@@ -1,18 +1,33 @@
1 1
 // @flow
2 2
 
3 3
 import * as React from 'react';
4
-import {Button, H3, Text} from 'native-base';
4
+import {Content, H1, H2, H3, Text} from 'native-base';
5 5
 import i18n from "i18n-js";
6
-import {View, Platform} from "react-native";
7
-import CustomMaterialIcon from "../components/CustomMaterialIcon";
6
+import {View, Image} from "react-native";
8 7
 import ThemeManager from "../utils/ThemeManager";
9 8
 import {Linking} from "expo";
10 9
 import BaseContainer from "../components/BaseContainer";
10
+import {Agenda} from 'react-native-calendars';
11
+import HTML from 'react-native-render-html';
12
+import Touchable from 'react-native-platform-touchable';
13
+import Modalize from 'react-native-modalize';
14
+import WebDataManager from "../utils/WebDataManager";
15
+
11 16
 
12 17
 type Props = {
13 18
     navigation: Object,
14 19
 }
15 20
 
21
+type State = {
22
+    modalCurrentDisplayItem: Object,
23
+    refreshing: boolean,
24
+    agendaItems: Object,
25
+};
26
+
27
+const FETCH_URL = "https://amicale-insat.fr/event/json/list";
28
+
29
+const AGENDA_MONTH_SPAN = 6;
30
+
16 31
 /**
17 32
  * Opens a link in the device's browser
18 33
  * @param link The link to open
@@ -24,67 +39,286 @@ function openWebLink(link) {
24 39
 /**
25 40
  * Class defining the app's planning screen
26 41
  */
27
-export default class PlanningScreen extends React.Component<Props> {
42
+export default class PlanningScreen extends React.Component<Props, State> {
28 43
 
44
+    modalRef: { current: null | Modalize };
45
+    webDataManager: WebDataManager;
29 46
 
30
-    render() {
31
-        const nav = this.props.navigation;
47
+    constructor(props: any) {
48
+        super(props);
49
+        this.modalRef = React.createRef();
50
+        this.webDataManager = new WebDataManager(FETCH_URL);
51
+    }
52
+
53
+    componentDidMount() {
54
+        this._onRefresh();
55
+    }
56
+
57
+    state = {
58
+        modalCurrentDisplayItem: {},
59
+        refreshing: false,
60
+        agendaItems: {}
61
+    };
62
+
63
+    getCurrentDate() {
64
+        let today = new Date();
65
+        return this.getFormattedDate(today);
66
+    }
67
+
68
+    getFormattedDate(date: Date) {
69
+        let dd = String(date.getDate()).padStart(2, '0');
70
+        let mm = String(date.getMonth() + 1).padStart(2, '0'); //January is 0!
71
+        let yyyy = date.getFullYear();
72
+        return yyyy + '-' + mm + '-' + dd;
73
+    }
74
+
75
+    generateEmptyCalendar() {
76
+        let end = new Date(new Date().setMonth(new Date().getMonth() + AGENDA_MONTH_SPAN + 1));
77
+        let daysOfYear = {};
78
+        for (let d = new Date(2019, 8, 1); d <= end; d.setDate(d.getDate() + 1)) {
79
+            daysOfYear[this.getFormattedDate(new Date(d))] = []
80
+        }
81
+        return daysOfYear;
82
+    }
83
+
84
+    getModalContent() {
32 85
         return (
33
-            <BaseContainer navigation={nav} headerTitle={i18n.t('screens.planning')}>
34
-                <View style={{
35
-                    flexGrow: 1,
36
-                    justifyContent: 'center',
37
-                    alignItems: 'center',
86
+            <View style={{
87
+                flex: 1,
88
+                padding: 20
89
+            }}>
90
+                <H1 style={{
91
+                    marginTop: 20,
92
+                }}>
93
+                    {this.state.modalCurrentDisplayItem.title}
94
+                </H1>
95
+                <H3 style={{
96
+                    marginTop: 10,
97
+                    color: ThemeManager.getCurrentThemeVariables().listNoteColor
38 98
                 }}>
39
-                    { Platform.OS === 'android' ?
40
-                        <View
41
-                            style={{
42
-                                justifyContent: 'center',
43
-                                alignItems: 'center',
44
-                            }}>
45
-                            <View style={{
46
-                                justifyContent: 'center',
47
-                                alignItems: 'center',
48
-                                width: '100%',
49
-                                height: 100,
50
-                                marginBottom: 20
51
-                            }}>
52
-                                <CustomMaterialIcon
53
-                                    icon={'forklift'}
54
-                                    fontSize={100}
55
-                                    width={100}
56
-                                    color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>
57
-                            </View>
58
-
59
-                            <H3 style={{
60
-                                textAlign: 'center',
61
-                                marginRight: 20,
62
-                                marginLeft: 20,
63
-                                color: ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText
64
-                            }}>
65
-                                {i18n.t('planningScreen.wipTitle')}
66
-                            </H3>
67
-                            <Text style={{
68
-                                textAlign: 'center',
69
-                                color: ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText
70
-                            }}>
71
-                                {i18n.t('planningScreen.wipSubtitle')}
72
-                            </Text>
99
+                    {this.getFormattedTime(this.state.modalCurrentDisplayItem)}
100
+                </H3>
101
+                <Content>
102
+                    {this.state.modalCurrentDisplayItem.logo !== null ?
103
+                        <View style={{width: '100%', height: 200, marginTop: 20, marginBottom: 20}}>
104
+                            <Image style={{flex: 1, resizeMode: "contain"}}
105
+                                   source={{uri: this.state.modalCurrentDisplayItem.logo}}/>
73 106
                         </View>
74
-                        :
75
-                        <View/>
76
-
77
-                    }
107
+                        : <View/>}
78 108
 
109
+                    {this.state.modalCurrentDisplayItem.description !== null ?
110
+                        // Surround description with div to allow text styling if the description is not html
111
+                        <HTML html={"<div>" + this.state.modalCurrentDisplayItem.description + "</div>"}
112
+                              tagsStyles={{
113
+                                  p: {color: ThemeManager.getCurrentThemeVariables().textColor},
114
+                                  div: {color: ThemeManager.getCurrentThemeVariables().textColor}
115
+                              }}/>
116
+                        : <View/>}
117
+                </Content>
118
+            </View>
119
+        );
120
+    }
79 121
 
122
+    showItemDetails(item: Object) {
123
+        this.setState({
124
+            modalCurrentDisplayItem: item
125
+        });
126
+        if (this.modalRef.current) {
127
+            this.modalRef.current.open();
128
+        }
129
+    }
80 130
 
81
-                    <Button block style={{marginTop: 20, marginRight: 10, marginLeft: 10}}
82
-                            onPress={() => openWebLink('https://www.facebook.com/groups/2054302624595234/')}>
83
-                        <Text>Clubs et Evenements</Text>
84
-                    </Button>
131
+    getRenderItem(item: Object) {
132
+        return (
133
+            <Touchable
134
+                style={{
135
+                    backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
136
+                    borderRadius: 10,
137
+                    marginRight: 10,
138
+                    marginTop: 17,
139
+                }}
140
+                onPress={() => this.showItemDetails(item)}>
141
+                <View style={{
142
+                    padding: 10,
143
+                    flex: 1,
144
+                    flexDirection: 'row'
145
+                }}>
146
+                    <View style={{width: '70%'}}>
147
+                        <Text style={{
148
+                            color: ThemeManager.getCurrentThemeVariables().listNoteColor,
149
+                            marginTop: 5,
150
+                            marginBottom: 10
151
+                        }}>
152
+                            {this.getFormattedTime(item)}
153
+                        </Text>
154
+                        <H3 style={{marginBottom: 10}}>{item.title}</H3>
155
+                    </View>
156
+                    <View style={{
157
+                        width: '30%',
158
+                        height: 80
159
+                    }}>
160
+                        {item.logo !== null ?
161
+                            <Image source={{uri: item.logo}}
162
+                                   style={{
163
+                                       flex: 1,
164
+                                       resizeMode: "contain"
165
+                                   }}/>
166
+                            : <View/>}
167
+                    </View>
85 168
                 </View>
169
+            </Touchable>
170
+        );
171
+    }
172
+
173
+    getRenderEmptyDate() {
174
+        return (
175
+            <View style={{
176
+                padding: 10,
177
+                flex: 1,
178
+            }}>
179
+                <View style={{
180
+                    width: '100%',
181
+                    height: 1,
182
+                    backgroundColor: ThemeManager.getCurrentThemeVariables().agendaEmptyLine,
183
+                    marginTop: 'auto',
184
+                    marginBottom: 'auto',
185
+                }}/>
186
+            </View>
187
+        );
188
+    }
189
+
190
+    rowHasChanged(r1: Object, r2: Object) {
191
+        if (r1 !== undefined && r2 !== undefined)
192
+            return r1.title !== r2.title;
193
+        else return !(r1 === undefined && r2 === undefined);
194
+    }
195
+
196
+    /**
197
+     * Refresh data and show a toast if any error occurred
198
+     * @private
199
+     */
200
+    _onRefresh = () => {
201
+        this.setState({refreshing: true});
202
+        this.webDataManager.readData()
203
+            .then((fetchedData) => {
204
+                this.setState({
205
+                    refreshing: false,
206
+                });
207
+                this.generateEventAgenda(fetchedData);
208
+            })
209
+            .catch((err) => {
210
+                this.setState({
211
+                    refreshing: false,
212
+                });
213
+                console.log(err);
214
+            });
215
+    };
216
+
217
+    generateEventAgenda(eventList: Array<Object>) {
218
+        let agendaItems = this.generateEmptyCalendar();
219
+        for (let i = 0; i < eventList.length; i++) {
220
+            if (agendaItems[this.getEventStartDate(eventList[i])] !== undefined)
221
+                agendaItems[this.getEventStartDate(eventList[i])].push(eventList[i]);
222
+        }
223
+        this.setState({agendaItems: agendaItems})
224
+    }
225
+
226
+    getEventStartDate(event: Object) {
227
+        return event.date_begin.split(" ")[0];
228
+    }
229
+
230
+    getEventStartTime(event: Object) {
231
+        if (event !== undefined && Object.keys(event).length > 0 && event.date_begin !== null)
232
+            return this.formatTime(event.date_begin.split(" ")[1]);
233
+        else
234
+            return "";
235
+    }
236
+
237
+    getEventEndTime(event: Object) {
238
+        if (event !== undefined && Object.keys(event).length > 0 && event.date_end !== null)
239
+            return this.formatTime(event.date_end.split(" ")[1]);
240
+        else
241
+            return "";
242
+    }
243
+
244
+    getFormattedTime(event: Object) {
245
+        if (this.getEventEndTime(event) !== "")
246
+            return this.getEventStartTime(event) + " - " + this.getEventEndTime(event)
247
+        else
248
+            return this.getEventStartTime(event);
249
+    }
250
+
251
+    formatTime(time: string) {
252
+        let array = time.split(':');
253
+        return array[0] + ':' + array[1];
254
+    }
255
+
256
+    render() {
257
+        const nav = this.props.navigation;
258
+        return (
259
+            <BaseContainer navigation={nav} headerTitle={i18n.t('screens.planning')}>
260
+                <Modalize ref={this.modalRef}
261
+                          modalStyle={{
262
+                              backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor,
263
+                          }}>
264
+                    {this.getModalContent()}
265
+                </Modalize>
266
+                <Agenda
267
+                    // the list of items that have to be displayed in agenda. If you want to render item as empty date
268
+                    // the value of date key kas to be an empty array []. If there exists no value for date key it is
269
+                    // considered that the date in question is not yet loaded
270
+                    items={this.state.agendaItems}
271
+                    // initially selected day
272
+                    selected={this.getCurrentDate()}
273
+                    // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
274
+                    minDate={"2019-09-01"}
275
+                    // Max amount of months allowed to scroll to the past. Default = 50
276
+                    pastScrollRange={1}
277
+                    // Max amount of months allowed to scroll to the future. Default = 50
278
+                    futureScrollRange={AGENDA_MONTH_SPAN}
279
+                    // If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
280
+                    onRefresh={() => this._onRefresh()}
281
+                    // Set this true while waiting for new data from a refresh
282
+                    refreshing={this.state.refreshing}
283
+                    renderItem={(item) => this.getRenderItem(item)}
284
+                    renderEmptyDate={() => this.getRenderEmptyDate()}
285
+                    rowHasChanged={() => this.rowHasChanged()}
286
+                    // agenda theme
287
+                    theme={{
288
+                        backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
289
+                        calendarBackground: ThemeManager.getCurrentThemeVariables().containerBgColor,
290
+                        textSectionTitleColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
291
+                        selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
292
+                        selectedDayTextColor: '#ffffff',
293
+                        todayTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
294
+                        dayTextColor: ThemeManager.getCurrentThemeVariables().textColor,
295
+                        textDisabledColor: ThemeManager.getCurrentThemeVariables().textDisabledColor,
296
+                        dotColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
297
+                        selectedDotColor: '#ffffff',
298
+                        arrowColor: 'orange',
299
+                        monthTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
300
+                        indicatorColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
301
+                        textDayFontWeight: '300',
302
+                        textMonthFontWeight: 'bold',
303
+                        textDayHeaderFontWeight: '300',
304
+                        textDayFontSize: 16,
305
+                        textMonthFontSize: 16,
306
+                        textDayHeaderFontSize: 16,
307
+                        agendaDayTextColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
308
+                        agendaDayNumColor: ThemeManager.getCurrentThemeVariables().listNoteColor,
309
+                        agendaTodayColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
310
+                        agendaKnobColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
311
+                        // Fix for days hiding behind knob
312
+                        'stylesheet.calendar.header': {
313
+                            week: {
314
+                                marginTop: 0,
315
+                                flexDirection: 'row',
316
+                                justifyContent: 'space-between'
317
+                            }
318
+                        }
319
+                    }}
320
+                />
86 321
             </BaseContainer>
87 322
         );
88 323
     }
89 324
 }
90
-

Loading…
Cancel
Save