Browse Source

Added basic dashboard

keplyx 4 years ago
parent
commit
f806152370
3 changed files with 189 additions and 58 deletions
  1. 6
    2
      components/FetchedDataSectionList.js
  2. 178
    55
      screens/HomeScreen.js
  3. 5
    1
      screens/SelfMenuScreen.js

+ 6
- 2
components/FetchedDataSectionList.js View File

@@ -168,7 +168,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
168 168
      * @param title
169 169
      * @return {*}
170 170
      */
171
-    getRenderSectionHeader(title: String) {
171
+    getRenderSectionHeader(title: string) {
172 172
         return <View/>;
173 173
     }
174 174
 
@@ -268,6 +268,10 @@ export default class FetchedDataSectionList extends React.Component<Props, State
268 268
         return <View/>
269 269
     }
270 270
 
271
+    hasStickyHeader() {
272
+        return false;
273
+    }
274
+
271 275
     /**
272 276
      * Get the section list render using the generated dataset
273 277
      *
@@ -281,7 +285,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
281 285
         return (
282 286
             <SectionList
283 287
                 sections={dataset}
284
-                stickySectionHeadersEnabled
288
+                stickySectionHeadersEnabled={this.hasStickyHeader()}
285 289
                 refreshControl={
286 290
                     <RefreshControl
287 291
                         refreshing={this.state.refreshing}

+ 178
- 55
screens/HomeScreen.js View File

@@ -2,17 +2,22 @@
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, Text, Thumbnail} from 'native-base';
5
+import {Body, Button, Card, CardItem, Left, Right, Text, Thumbnail, H1, H3} 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
-import AsyncStorageManager from "../utils/AsyncStorageManager";
11
+import PlatformTouchable from "react-native-platform-touchable";
12 12
 
13 13
 const ICON_AMICALE = require('../assets/amicale.png');
14 14
 const NAME_AMICALE = 'Amicale INSA Toulouse';
15
-const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/facebook/facebook_data.json";
15
+const DATA_URL = "https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/dashboard/dashboard_data.json";
16
+
17
+const SECTIONS_ID = [
18
+    'dashboard',
19
+    'news_feed'
20
+];
16 21
 
17 22
 
18 23
 /**
@@ -45,19 +50,44 @@ export default class HomeScreen extends FetchedDataSectionList {
45 50
     }
46 51
 
47 52
     createDataset(fetchedData: Object) {
48
-        let data = [];
49
-        if (fetchedData.data !== undefined)
50
-            data = fetchedData.data;
53
+        let newsData = [];
54
+        let dashboardData = [];
55
+        if (fetchedData['news_feed'] !== undefined)
56
+            newsData = fetchedData['news_feed']['data'];
57
+        if (fetchedData['dashboard'] !== undefined)
58
+            dashboardData = this.generateDashboardDataset(fetchedData['dashboard']);
51 59
         return [
52 60
             {
53 61
                 title: '',
54
-                data: data,
62
+                data: dashboardData,
63
+                extraData: super.state,
64
+                keyExtractor: this.getKeyExtractor,
65
+                id: SECTIONS_ID[0]
66
+            },
67
+            {
68
+                title: 'News Feed',
69
+                data: newsData,
55 70
                 extraData: super.state,
56
-                keyExtractor: this.getKeyExtractor
71
+                keyExtractor: this.getKeyExtractor,
72
+                id: SECTIONS_ID[1]
57 73
             }
58 74
         ];
59 75
     }
60 76
 
77
+    generateDashboardDataset(dashboardData: Object) {
78
+        let dataset = [];
79
+        for (let [key, value] of Object.entries(dashboardData)) {
80
+            dataset.push(
81
+                {
82
+                    id: key,
83
+                    data: value
84
+                }
85
+            )
86
+        }
87
+        return dataset
88
+    }
89
+
90
+
61 91
     /**
62 92
      * Converts a dateString using Unix Timestamp to a formatted date
63 93
      * @param dateString {string} The Unix Timestamp representation of a date
@@ -68,56 +98,149 @@ export default class HomeScreen extends FetchedDataSectionList {
68 98
         return date.toLocaleString();
69 99
     }
70 100
 
101
+    getRenderSectionHeader(title: string) {
102
+        if (title === '') {
103
+            return <View/>;
104
+        } else {
105
+            return (
106
+                <View style={{
107
+                    backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor
108
+                }}>
109
+                    <H1 style={{
110
+                        marginLeft: 'auto',
111
+                        marginRight: 'auto',
112
+                        marginTop: 10,
113
+                        marginBottom: 10
114
+                    }}>{title}</H1>
115
+                </View>
116
+            );
117
+        }
118
+    }
119
+
120
+    getDashboardItemData(item: Object) {
121
+        let icon = '';
122
+        let title = '';
123
+        let subtitle = '';
124
+        let clickAction;
125
+        switch (item['id']) {
126
+            case 'today_events':
127
+                icon = 'calendar-range';
128
+                title = 'Today\s events';
129
+                if (item['data'].length === 0)
130
+                    subtitle = 'Pas d\'event ajd';
131
+                else
132
+                    subtitle = item['data'].length + ' events ajd';
133
+                clickAction = () => this.props.navigation.navigate('Planning');
134
+                break;
135
+            case 'proximo_articles':
136
+                icon = 'shopping';
137
+                title = 'Proximo';
138
+                subtitle = item['data'] + ' articles disponibles';
139
+                clickAction = () => this.props.navigation.navigate('Proximo');
140
+                break;
141
+            case 'available_machines':
142
+                icon = 'washing-machine';
143
+                title = 'Machines disponibles';
144
+                subtitle = item['data']['dryers'] + ' dryers and ' + item['data']['washers'] + ' washers.';
145
+                clickAction = () => this.props.navigation.navigate('Proxiwash');
146
+                break;
147
+            case 'today_menu':
148
+                icon = 'silverware-fork-knife';
149
+                title = 'Menu du jour';
150
+                if (item['data'].length === 0)
151
+                    subtitle = 'non disponible';
152
+                else
153
+                    subtitle = 'Click here to show the menu';
154
+                clickAction = () => this.props.navigation.navigate('SelfMenuScreen');
155
+                break;
156
+        }
157
+        return {
158
+            icon: icon,
159
+            title: title,
160
+            subtitle: subtitle,
161
+            clickAction: clickAction
162
+        }
163
+    }
164
+
165
+
71 166
     getRenderItem(item: Object, section: Object, data: Object) {
72
-        return (
73
-            <Card style={{
74
-                flex: 0,
75
-                marginLeft: 10,
76
-                marginRight: 10
77
-            }}>
78
-                <CardItem>
79
-                    <Left>
80
-                        <Thumbnail source={ICON_AMICALE} square/>
167
+        if (section['id'] === SECTIONS_ID[0]) {
168
+            let itemData = this.getDashboardItemData(item);
169
+            return (
170
+                <Card style={{
171
+                    flex: 0,
172
+                    marginLeft: 10,
173
+                    marginRight: 10
174
+                }}>
175
+                    <PlatformTouchable
176
+                        onPress={itemData['clickAction']}
177
+                    >
178
+                        <CardItem>
179
+                            <Left>
180
+                                <CustomMaterialIcon
181
+                                    icon={itemData['icon']}
182
+                                    fontSize={40}
183
+                                    width={40}/>
184
+                                <Body>
185
+                                    <H3>{itemData['title']}</H3>
186
+                                    <Text>{itemData['subtitle']}</Text>
187
+                                </Body>
188
+                            </Left>
189
+                        </CardItem>
190
+                    </PlatformTouchable>
191
+                </Card>
192
+            );
193
+        } else {
194
+            return (
195
+                <Card style={{
196
+                    flex: 0,
197
+                    marginLeft: 10,
198
+                    marginRight: 10
199
+                }}>
200
+                    <CardItem>
201
+                        <Left>
202
+                            <Thumbnail source={ICON_AMICALE} square/>
203
+                            <Body>
204
+                                <Text>{NAME_AMICALE}</Text>
205
+                                <Text note>{HomeScreen.getFormattedDate(item.created_time)}</Text>
206
+                            </Body>
207
+                        </Left>
208
+                    </CardItem>
209
+                    <CardItem>
81 210
                         <Body>
82
-                            <Text>{NAME_AMICALE}</Text>
83
-                            <Text note>{HomeScreen.getFormattedDate(item.created_time)}</Text>
211
+                            {item.full_picture !== '' && item.full_picture !== undefined ?
212
+                                <TouchableOpacity onPress={() => openWebLink(item.full_picture)}
213
+                                                  style={{width: '100%', height: 250}}>
214
+                                    <Image source={{uri: item.full_picture}}
215
+                                           style={{flex: 1, resizeMode: "contain"}}
216
+                                           resizeMode="contain"
217
+                                    />
218
+                                </TouchableOpacity>
219
+                                : <View/>}
220
+                            {item.message !== undefined ?
221
+                                <Autolink
222
+                                    text={item.message}
223
+                                    hashtag="facebook"
224
+                                    style={{color: ThemeManager.getCurrentThemeVariables().textColor}}
225
+                                /> : <View/>
226
+                            }
84 227
                         </Body>
85
-                    </Left>
86
-                </CardItem>
87
-                <CardItem>
88
-                    <Body>
89
-                        {item.full_picture !== '' && item.full_picture !== undefined ?
90
-                            <TouchableOpacity onPress={() => openWebLink(item.full_picture)}
91
-                                              style={{width: '100%', height: 250}}>
92
-                                <Image source={{uri: item.full_picture}}
93
-                                       style={{flex: 1, resizeMode: "contain"}}
94
-                                       resizeMode="contain"
95
-                                />
96
-                            </TouchableOpacity>
97
-                            : <View/>}
98
-                        {item.message !== undefined ?
99
-                            <Autolink
100
-                                text={item.message}
101
-                                hashtag="facebook"
102
-                                style={{color: ThemeManager.getCurrentThemeVariables().textColor}}
103
-                            /> : <View/>
104
-                        }
105
-                    </Body>
106
-                </CardItem>
107
-                <CardItem>
108
-                    <Left>
109
-                        <Button transparent
110
-                                onPress={() => openWebLink(item.permalink_url)}>
111
-                            <CustomMaterialIcon
112
-                                icon="facebook"
113
-                                color="#57aeff"
114
-                                width={20}/>
115
-                            <Text>En savoir plus</Text>
116
-                        </Button>
117
-                    </Left>
118
-                </CardItem>
119
-            </Card>
120
-        );
228
+                    </CardItem>
229
+                    <CardItem>
230
+                        <Left>
231
+                            <Button transparent
232
+                                    onPress={() => openWebLink(item.permalink_url)}>
233
+                                <CustomMaterialIcon
234
+                                    icon="facebook"
235
+                                    color="#57aeff"
236
+                                    width={20}/>
237
+                                <Text>En savoir plus</Text>
238
+                            </Button>
239
+                        </Left>
240
+                    </CardItem>
241
+                </Card>
242
+            );
243
+        }
121 244
     }
122 245
 
123 246
 }

+ 5
- 1
screens/SelfMenuScreen.js View File

@@ -60,6 +60,10 @@ export default class SelfMenuScreen extends FetchedDataSectionList {
60 60
         return true;
61 61
     }
62 62
 
63
+    hasStickyHeader(): boolean {
64
+        return true;
65
+    }
66
+
63 67
     createDataset(fetchedData: Object) {
64 68
         let result = [];
65 69
         // Prevent crash by giving a default value when fetchedData is empty (not yet available)
@@ -94,7 +98,7 @@ export default class SelfMenuScreen extends FetchedDataSectionList {
94 98
         return this.daysOfWeek[date.getDay() - 1] + " " + date.getDate() + " " + this.monthsOfYear[date.getMonth()] + " " + date.getFullYear();
95 99
     }
96 100
 
97
-    getRenderSectionHeader(title: String) {
101
+    getRenderSectionHeader(title: string) {
98 102
         return (
99 103
             <Card style={{
100 104
                 marginLeft: 10,

Loading…
Cancel
Save