|
@@ -1,11 +1,11 @@
|
1
|
1
|
// @flow
|
2
|
2
|
|
3
|
3
|
import * as React from 'react';
|
4
|
|
-import {StyleSheet, View} from 'react-native';
|
|
4
|
+import {FlatList, StyleSheet, View} from 'react-native';
|
5
|
5
|
import i18n from "i18n-js";
|
6
|
6
|
import DashboardItem from "../components/Home/EventDashboardItem";
|
7
|
7
|
import WebSectionList from "../components/Lists/WebSectionList";
|
8
|
|
-import {FAB, Text, withTheme} from 'react-native-paper';
|
|
8
|
+import {FAB, withTheme} from 'react-native-paper';
|
9
|
9
|
import FeedItem from "../components/Home/FeedItem";
|
10
|
10
|
import SquareDashboardItem from "../components/Home/SmallDashboardItem";
|
11
|
11
|
import PreviewEventDashboardItem from "../components/Home/PreviewEventDashboardItem";
|
|
@@ -159,24 +159,58 @@ class HomeScreen extends React.Component<Props> {
|
159
|
159
|
content: undefined
|
160
|
160
|
},
|
161
|
161
|
];
|
162
|
|
- for (let [key, value] of Object.entries(dashboardData)) {
|
|
162
|
+ for (let [key, value: number | Object | Array<string>] of Object.entries(dashboardData)) {
|
163
|
163
|
switch (key) {
|
164
|
|
- case 'today_events':
|
165
|
|
- dataset[2]['content'] = value;
|
166
|
|
- break;
|
167
|
164
|
case 'available_machines':
|
168
|
|
- dataset[0]['content'][0] = {id: key, data: value};
|
|
165
|
+ dataset[0]['content'][0] = {
|
|
166
|
+ id: 'washers',
|
|
167
|
+ data: value.washers,
|
|
168
|
+ icon: 'washing-machine',
|
|
169
|
+ color: this.colors.proxiwashColor,
|
|
170
|
+ onPress: this.onProxiwashClick,
|
|
171
|
+ isAvailable: value.washers > 0
|
|
172
|
+ };
|
|
173
|
+ dataset[0]['content'][1] = {
|
|
174
|
+ ...dataset[0]['content'][0],
|
|
175
|
+ id: 'dryers',
|
|
176
|
+ data: value.dryers,
|
|
177
|
+ icon: 'tumble-dryer',
|
|
178
|
+ isAvailable: value.dryers > 0
|
|
179
|
+ };
|
169
|
180
|
break;
|
170
|
181
|
case 'available_tutorials':
|
171
|
|
- dataset[0]['content'][1] = {id: key, data: value};
|
|
182
|
+ dataset[0]['content'][2] = {
|
|
183
|
+ id: key,
|
|
184
|
+ data: value,
|
|
185
|
+ icon: 'school',
|
|
186
|
+ color: this.colors.tutorinsaColor,
|
|
187
|
+ onPress: this.onTutorInsaClick,
|
|
188
|
+ isAvailable: parseInt(value) > 0
|
|
189
|
+ };
|
172
|
190
|
break;
|
173
|
191
|
case 'proximo_articles':
|
174
|
|
- dataset[0]['content'][2] = {id: key, data: value};
|
|
192
|
+ dataset[0]['content'][3] = {
|
|
193
|
+ id: key,
|
|
194
|
+ data: value,
|
|
195
|
+ icon: 'shopping',
|
|
196
|
+ color: this.colors.proximoColor,
|
|
197
|
+ onPress: this.onProximoClick,
|
|
198
|
+ isAvailable: parseInt(value) > 0
|
|
199
|
+ };
|
175
|
200
|
break;
|
176
|
201
|
case 'today_menu':
|
177
|
|
- dataset[0]['content'][3] = {id: key, data: value};
|
|
202
|
+ dataset[0]['content'][4] = {
|
|
203
|
+ id: key,
|
|
204
|
+ data: 0,
|
|
205
|
+ icon: 'silverware-fork-knife',
|
|
206
|
+ color: this.colors.menu,
|
|
207
|
+ onPress: this.onMenuClick,
|
|
208
|
+ isAvailable: value.length > 0
|
|
209
|
+ };
|
|
210
|
+ break;
|
|
211
|
+ case 'today_events':
|
|
212
|
+ dataset[2]['content'] = value;
|
178
|
213
|
break;
|
179
|
|
-
|
180
|
214
|
}
|
181
|
215
|
}
|
182
|
216
|
return dataset
|
|
@@ -191,14 +225,14 @@ class HomeScreen extends React.Component<Props> {
|
191
|
225
|
getDashboardItem(item: Object) {
|
192
|
226
|
let content = item['content'];
|
193
|
227
|
if (item['id'] === 'event')
|
194
|
|
- return this.getDashboardEventItem(content);
|
|
228
|
+ return this.getDashboardEvent(content);
|
195
|
229
|
else if (item['id'] === 'top')
|
196
|
|
- return this.getDashboardTopItem(content);
|
|
230
|
+ return this.getDashboardRow(content);
|
197
|
231
|
else
|
198
|
|
- return this.getActionsDashboardItem();
|
|
232
|
+ return this.getDashboardActions();
|
199
|
233
|
}
|
200
|
234
|
|
201
|
|
- getActionsDashboardItem() {
|
|
235
|
+ getDashboardActions() {
|
202
|
236
|
return <ActionsDashBoardItem {...this.props}/>;
|
203
|
237
|
}
|
204
|
238
|
|
|
@@ -317,6 +351,8 @@ class HomeScreen extends React.Component<Props> {
|
317
|
351
|
return displayEvent;
|
318
|
352
|
}
|
319
|
353
|
|
|
354
|
+ onEventContainerClick = () => this.props.navigation.navigate('planning');
|
|
355
|
+
|
320
|
356
|
/**
|
321
|
357
|
* Gets the event render item.
|
322
|
358
|
* If a preview is available, it will be rendered inside
|
|
@@ -324,42 +360,17 @@ class HomeScreen extends React.Component<Props> {
|
324
|
360
|
* @param content
|
325
|
361
|
* @return {*}
|
326
|
362
|
*/
|
327
|
|
- getDashboardEventItem(content: Array<Object>) {
|
328
|
|
- let icon = 'calendar-range';
|
329
|
|
- let title = i18n.t('homeScreen.dashboard.todayEventsTitle');
|
330
|
|
- let subtitle;
|
|
363
|
+ getDashboardEvent(content: Array<Object>) {
|
331
|
364
|
let futureEvents = this.getFutureEvents(content);
|
332
|
|
- let isAvailable = futureEvents.length > 0;
|
333
|
|
- if (isAvailable) {
|
334
|
|
- subtitle =
|
335
|
|
- <Text>
|
336
|
|
- <Text style={{fontWeight: "bold"}}>{futureEvents.length}</Text>
|
337
|
|
- <Text>
|
338
|
|
- {
|
339
|
|
- futureEvents.length > 1 ?
|
340
|
|
- i18n.t('homeScreen.dashboard.todayEventsSubtitlePlural') :
|
341
|
|
- i18n.t('homeScreen.dashboard.todayEventsSubtitle')
|
342
|
|
- }
|
343
|
|
- </Text>
|
344
|
|
- </Text>;
|
345
|
|
- } else
|
346
|
|
- subtitle = i18n.t('homeScreen.dashboard.todayEventsSubtitleNA');
|
347
|
|
-
|
348
|
365
|
let displayEvent = this.getDisplayEvent(futureEvents);
|
349
|
|
- const clickContainerAction = () => this.props.navigation.navigate('planning');
|
350
|
|
- const clickPreviewAction = () => this.props.navigation.navigate('home-planning-information', {data: displayEvent});
|
351
|
|
-
|
|
366
|
+ const clickPreviewAction = () =>
|
|
367
|
+ this.props.navigation.navigate('home-planning-information', {data: displayEvent});
|
352
|
368
|
return (
|
353
|
369
|
<DashboardItem
|
354
|
|
- {...this.props}
|
355
|
|
- subtitle={subtitle}
|
356
|
|
- icon={icon}
|
357
|
|
- clickAction={clickContainerAction}
|
358
|
|
- title={title}
|
359
|
|
- isAvailable={isAvailable}
|
|
370
|
+ eventNumber={futureEvents.length}
|
|
371
|
+ clickAction={this.onEventContainerClick}
|
360
|
372
|
>
|
361
|
373
|
<PreviewEventDashboardItem
|
362
|
|
- {...this.props}
|
363
|
374
|
event={displayEvent}
|
364
|
375
|
clickAction={clickPreviewAction}
|
365
|
376
|
/>
|
|
@@ -367,66 +378,34 @@ class HomeScreen extends React.Component<Props> {
|
367
|
378
|
);
|
368
|
379
|
}
|
369
|
380
|
|
|
381
|
+ dashboardRowRenderItem = ({item}: Object) => {
|
|
382
|
+ return(
|
|
383
|
+ <SquareDashboardItem
|
|
384
|
+ color={item.color}
|
|
385
|
+ icon={item.icon}
|
|
386
|
+ clickAction={item.onPress}
|
|
387
|
+ isAvailable={item.isAvailable}
|
|
388
|
+ badgeNumber={item.data}
|
|
389
|
+ />
|
|
390
|
+ );
|
|
391
|
+ };
|
|
392
|
+
|
370
|
393
|
/**
|
371
|
394
|
* Gets a classic dashboard item.
|
372
|
395
|
*
|
373
|
396
|
* @param content
|
374
|
397
|
* @return {*}
|
375
|
398
|
*/
|
376
|
|
- getDashboardTopItem(content: Array<Object>) {
|
377
|
|
- let proxiwashData = content[0]['data'];
|
378
|
|
- let tutorinsaData = content[1]['data'];
|
379
|
|
- let proximoData = content[2]['data'];
|
380
|
|
- let menuData = content[3]['data'];
|
381
|
|
- return (
|
382
|
|
- <View style={{
|
383
|
|
- flex: 1,
|
384
|
|
- flexDirection: 'row',
|
385
|
|
- justifyContent: 'center',
|
386
|
|
- flexWrap: 'wrap',
|
387
|
|
- margin: 10,
|
388
|
|
- }}>
|
389
|
|
- <SquareDashboardItem
|
390
|
|
- color={this.colors.proxiwashColor}
|
391
|
|
- icon={'washing-machine'}
|
392
|
|
- clickAction={this.onProxiwashClick}
|
393
|
|
- isAvailable={parseInt(proxiwashData['washers']) > 0}
|
394
|
|
- badgeNumber={proxiwashData['washers']}
|
395
|
|
- />
|
396
|
|
- <SquareDashboardItem
|
397
|
|
- color={this.colors.proxiwashColor}
|
398
|
|
- icon={'tumble-dryer'}
|
399
|
|
- clickAction={this.onProxiwashClick}
|
400
|
|
- isAvailable={parseInt(proxiwashData['dryers']) > 0}
|
401
|
|
- badgeNumber={proxiwashData['dryers']}
|
402
|
|
- />
|
403
|
|
- <SquareDashboardItem
|
404
|
|
- color={this.colors.tutorinsaColor}
|
405
|
|
- icon={'school'}
|
406
|
|
- clickAction={this.onTutorInsaClick}
|
407
|
|
- isAvailable={tutorinsaData > 0}
|
408
|
|
- badgeNumber={tutorinsaData}
|
409
|
|
- />
|
410
|
|
- <SquareDashboardItem
|
411
|
|
- color={this.colors.proximoColor}
|
412
|
|
- icon={'shopping'}
|
413
|
|
- clickAction={this.onProximoClick}
|
414
|
|
- isAvailable={parseInt(proximoData) > 0}
|
415
|
|
- badgeNumber={parseInt(proximoData)}
|
416
|
|
- />
|
417
|
|
- <SquareDashboardItem
|
418
|
|
- color={this.colors.menuColor}
|
419
|
|
- icon={'silverware-fork-knife'}
|
420
|
|
- clickAction={this.onMenuClick}
|
421
|
|
- isAvailable={menuData.length > 0}
|
422
|
|
- badgeNumber={0}
|
423
|
|
- />
|
424
|
|
- </View>
|
425
|
|
- );
|
426
|
|
- }
|
427
|
|
-
|
428
|
|
- openLink(link: string) {
|
429
|
|
- Linking.openURL(link);
|
|
399
|
+ getDashboardRow(content: Array<Object>) {
|
|
400
|
+ return <FlatList
|
|
401
|
+ data={content}
|
|
402
|
+ renderItem={this.dashboardRowRenderItem}
|
|
403
|
+ horizontal={true}
|
|
404
|
+ contentContainerStyle={{
|
|
405
|
+ marginLeft: 'auto',
|
|
406
|
+ marginRight: 'auto',
|
|
407
|
+ }}
|
|
408
|
+ />;
|
430
|
409
|
}
|
431
|
410
|
|
432
|
411
|
/**
|
|
@@ -436,7 +415,7 @@ class HomeScreen extends React.Component<Props> {
|
436
|
415
|
* @return {*}
|
437
|
416
|
*/
|
438
|
417
|
getFeedItem(item: Object) {
|
439
|
|
- const onOutLinkPress = this.openLink.bind(this, item.permalink_url);
|
|
418
|
+ const onOutLinkPress = () => Linking.openURL(item.permalink_url);
|
440
|
419
|
return (
|
441
|
420
|
<FeedItem
|
442
|
421
|
title={NAME_AMICALE}
|