Display the most important incoming event for the current day on the dashboard
This commit is contained in:
keplyx
parent
44294bb7ca
commit
4449f82c81
1 changed files with 381 additions and 128 deletions
|
|
@ -2,13 +2,16 @@
|
|||
|
||||
import * as React from 'react';
|
||||
import {Image, Linking, TouchableOpacity, View} from 'react-native';
|
||||
import {Body, Button, Card, CardItem, Left, Right, Text, Thumbnail, H1, H3} from 'native-base';
|
||||
import {Body, Button, Card, CardItem, Left, Right, Text, Thumbnail, H1, H3, Content} from 'native-base';
|
||||
import i18n from "i18n-js";
|
||||
import CustomMaterialIcon from '../components/CustomMaterialIcon';
|
||||
import FetchedDataSectionList from "../components/FetchedDataSectionList";
|
||||
import Autolink from 'react-native-autolink';
|
||||
import ThemeManager from "../utils/ThemeManager";
|
||||
import PlatformTouchable from "react-native-platform-touchable";
|
||||
import HTML from 'react-native-render-html';
|
||||
import {LinearGradient} from 'expo-linear-gradient';
|
||||
|
||||
|
||||
const ICON_AMICALE = require('../assets/amicale.png');
|
||||
const NAME_AMICALE = 'Amicale INSA Toulouse';
|
||||
|
|
@ -75,14 +78,36 @@ export default class HomeScreen extends FetchedDataSectionList {
|
|||
}
|
||||
|
||||
generateDashboardDataset(dashboardData: Object) {
|
||||
let dataset = [];
|
||||
let dataset = [
|
||||
{
|
||||
id: 'top',
|
||||
content: {}
|
||||
},
|
||||
{
|
||||
id: 'middle',
|
||||
content: [{}, {}]
|
||||
},
|
||||
{
|
||||
id: 'bottom',
|
||||
content: {}
|
||||
},
|
||||
|
||||
];
|
||||
for (let [key, value] of Object.entries(dashboardData)) {
|
||||
dataset.push(
|
||||
{
|
||||
id: key,
|
||||
data: value
|
||||
}
|
||||
)
|
||||
switch (key) {
|
||||
case 'today_events':
|
||||
dataset[0]['content'] = value;
|
||||
break;
|
||||
case 'proximo_articles':
|
||||
dataset[1]['content'][0] = {id: key, data: value};
|
||||
break;
|
||||
case 'today_menu':
|
||||
dataset[1]['content'][1] = {id: key, data: value};
|
||||
break;
|
||||
case 'available_machines':
|
||||
dataset[2]['content'] = value;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return dataset
|
||||
}
|
||||
|
|
@ -117,155 +142,383 @@ export default class HomeScreen extends FetchedDataSectionList {
|
|||
}
|
||||
}
|
||||
|
||||
getDashboardItemData(item: Object) {
|
||||
let icon = '';
|
||||
let title = '';
|
||||
let subtitle;
|
||||
let clickAction;
|
||||
let isAvailable = false;
|
||||
let color = ThemeManager.getCurrentThemeVariables().disabledTextColor;
|
||||
switch (item['id']) {
|
||||
case 'today_events':
|
||||
icon = 'calendar-range';
|
||||
color = ThemeManager.getCurrentThemeVariables().planningColor;
|
||||
title = i18n.t('homeScreen.dashboard.todayEventsTitle');
|
||||
isAvailable = item['data'].length > 0;
|
||||
if (isAvailable) {
|
||||
subtitle =
|
||||
<Text>
|
||||
<Text style={{fontWeight: "bold"}}>{item['data'].length}</Text>
|
||||
<Text>{i18n.t('homeScreen.dashboard.todayEventsSubtitle')}</Text>
|
||||
</Text>;
|
||||
} else
|
||||
subtitle = i18n.t('homeScreen.dashboard.todayEventsSubtitleNA');
|
||||
clickAction = () => this.props.navigation.navigate('Planning');
|
||||
break;
|
||||
case 'proximo_articles':
|
||||
icon = 'shopping';
|
||||
color = ThemeManager.getCurrentThemeVariables().proximoColor;
|
||||
title = i18n.t('homeScreen.dashboard.proximoTitle');
|
||||
isAvailable = parseInt(item['data']) > 0;
|
||||
if (isAvailable) {
|
||||
subtitle =
|
||||
<Text>
|
||||
<Text style={{fontWeight: "bold"}}>{item['data']}</Text>
|
||||
<Text>{i18n.t('homeScreen.dashboard.proximoSubtitle')}</Text>
|
||||
</Text>;
|
||||
} else
|
||||
subtitle = i18n.t('homeScreen.dashboard.proximoSubtitleNA');
|
||||
clickAction = () => this.props.navigation.navigate('Proximo');
|
||||
break;
|
||||
case 'available_machines':
|
||||
icon = 'washing-machine';
|
||||
color = ThemeManager.getCurrentThemeVariables().proxiwashColor;
|
||||
title = i18n.t('homeScreen.dashboard.proxiwashTitle');
|
||||
isAvailable = parseInt(item['data']['dryers']) > 0 || parseInt(item['data']['washers']) > 0;
|
||||
if (isAvailable) {
|
||||
subtitle =
|
||||
<Text>
|
||||
<Text style={{
|
||||
fontWeight: parseInt(item['data']['dryers']) > 0 ?
|
||||
'bold' :
|
||||
'normal',
|
||||
color: parseInt(item['data']['dryers']) > 0 ?
|
||||
ThemeManager.getCurrentThemeVariables().textColor :
|
||||
ThemeManager.getCurrentThemeVariables().listNoteColor
|
||||
}}>
|
||||
{item['data']['dryers']}
|
||||
</Text>
|
||||
<Text>{i18n.t('homeScreen.dashboard.proxiwashSubtitle1')}</Text>
|
||||
<Text style={{
|
||||
fontWeight: parseInt(item['data']['washers']) > 0 ?
|
||||
'bold' :
|
||||
'normal',
|
||||
color: parseInt(item['data']['washers']) > 0 ?
|
||||
ThemeManager.getCurrentThemeVariables().textColor :
|
||||
ThemeManager.getCurrentThemeVariables().listNoteColor
|
||||
}}>
|
||||
{item['data']['washers']}
|
||||
</Text>
|
||||
<Text>{i18n.t('homeScreen.dashboard.proxiwashSubtitle2')}</Text>
|
||||
</Text>;
|
||||
} else
|
||||
subtitle = i18n.t('homeScreen.dashboard.proxiwashSubtitleNA');
|
||||
clickAction = () => this.props.navigation.navigate('Proxiwash');
|
||||
break;
|
||||
case 'today_menu':
|
||||
icon = 'silverware-fork-knife';
|
||||
color = ThemeManager.getCurrentThemeVariables().menuColor;
|
||||
title = i18n.t('homeScreen.dashboard.menuTitle');
|
||||
isAvailable = item['data'].length > 0;
|
||||
if (isAvailable) {
|
||||
subtitle = i18n.t('homeScreen.dashboard.menuSubtitle');
|
||||
} else
|
||||
subtitle = i18n.t('homeScreen.dashboard.menuSubtitleNA');
|
||||
clickAction = () => this.props.navigation.navigate('SelfMenuScreen');
|
||||
break;
|
||||
getDashboardItem(item: Object) {
|
||||
let content = item['content'];
|
||||
if (item['id'] === 'top')
|
||||
return this.getDashboardTopItem(content);
|
||||
else if (item['id'] === 'middle')
|
||||
return this.getDashboardMiddleItem(content);
|
||||
else
|
||||
return this.getDashboardBottomItem(content);
|
||||
}
|
||||
|
||||
getDisplayEvent(events: Array<Object>): Object {
|
||||
let displayEvent = undefined;
|
||||
|
||||
if (events.length === 1) {
|
||||
displayEvent = this.getEventDisplayData(events[0]);
|
||||
} else {
|
||||
for (let event of events) {
|
||||
if (event['date_begin'] === undefined || event['date_end'] === undefined)
|
||||
continue;
|
||||
|
||||
let date_begin = event['date_begin'].split(' ')[1];
|
||||
let date_end = event['date_end'].split(' ')[1];
|
||||
let startDate = new Date();
|
||||
let endDate = new Date();
|
||||
let limit = new Date();
|
||||
let now = new Date();
|
||||
startDate.setHours(parseInt(date_begin.split(':')[0]), date_begin.split(':')[1], 0);
|
||||
endDate.setHours(parseInt(date_end.split(':')[0]), date_end.split(':')[1], 0);
|
||||
limit.setHours(18, 0, 0); // Only display events after 18:00 as these are the most important
|
||||
if (limit.getTime() < startDate.getTime() && now.getTime() < endDate.getTime()) {
|
||||
displayEvent = this.getEventDisplayData(event);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return displayEvent;
|
||||
}
|
||||
|
||||
getEventDisplayData(event: Object): Object {
|
||||
let date = '';
|
||||
if (event['date_begin'].split(' ').length > 2) {
|
||||
date = event['date_begin'].split(' ')[1];
|
||||
date = date.split(':')[0] + ':' + date.split(':')[1];
|
||||
}
|
||||
return {
|
||||
icon: icon,
|
||||
color: color,
|
||||
title: title,
|
||||
subtitle: subtitle,
|
||||
clickAction: clickAction,
|
||||
isAvailable: isAvailable
|
||||
logo: event['logo'],
|
||||
title: event['title'],
|
||||
date: date,
|
||||
description: event['description'],
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
getRenderItem(item: Object, section: Object, data: Object) {
|
||||
if (section['id'] === SECTIONS_ID[0]) {
|
||||
let itemData = this.getDashboardItemData(item);
|
||||
return (
|
||||
<Card style={{
|
||||
flex: 0,
|
||||
marginLeft: 10,
|
||||
marginRight: 10,
|
||||
borderRadius: 50,
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg
|
||||
}}>
|
||||
<PlatformTouchable
|
||||
onPress={itemData['clickAction']}
|
||||
style={{
|
||||
zIndex: 100,
|
||||
borderRadius: 50
|
||||
}}
|
||||
>
|
||||
getDashboardTopItem(content: Array<Object>) {
|
||||
let icon = 'calendar-range';
|
||||
let color = ThemeManager.getCurrentThemeVariables().planningColor;
|
||||
let title = i18n.t('homeScreen.dashboard.todayEventsTitle');
|
||||
let isAvailable = content.length > 0;
|
||||
let subtitle = '';
|
||||
if (isAvailable) {
|
||||
subtitle =
|
||||
<Text>
|
||||
<Text style={{fontWeight: "bold"}}>{content.length}</Text>
|
||||
<Text>{i18n.t('homeScreen.dashboard.todayEventsSubtitle')}</Text>
|
||||
</Text>;
|
||||
} else
|
||||
subtitle = i18n.t('homeScreen.dashboard.todayEventsSubtitleNA');
|
||||
let clickAction = () => this.props.navigation.navigate('Planning');
|
||||
|
||||
let displayEvent = this.getDisplayEvent(content);
|
||||
|
||||
return (
|
||||
<Card style={{
|
||||
flex: 0,
|
||||
marginLeft: 10,
|
||||
marginRight: 10,
|
||||
borderRadius: 30,
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg
|
||||
}}>
|
||||
<PlatformTouchable
|
||||
onPress={clickAction}
|
||||
style={{
|
||||
zIndex: 100,
|
||||
borderRadius: 30
|
||||
}}
|
||||
>
|
||||
<View>
|
||||
<CardItem style={{
|
||||
borderRadius: 50,
|
||||
backgroundColor: 'transparent'
|
||||
borderRadius: 30,
|
||||
backgroundColor: 'transparent',
|
||||
}}>
|
||||
<Left>
|
||||
<CustomMaterialIcon
|
||||
icon={itemData['icon']}
|
||||
icon={icon}
|
||||
color={
|
||||
itemData['isAvailable'] ?
|
||||
itemData['color'] :
|
||||
isAvailable ?
|
||||
color :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabledColor
|
||||
}
|
||||
fontSize={40}
|
||||
width={40}/>
|
||||
<Body>
|
||||
<H3 style={{
|
||||
color: itemData['isAvailable'] ?
|
||||
color: isAvailable ?
|
||||
ThemeManager.getCurrentThemeVariables().textColor :
|
||||
ThemeManager.getCurrentThemeVariables().listNoteColor
|
||||
}}>
|
||||
{itemData['title']}
|
||||
{title}
|
||||
</H3>
|
||||
<Text style={{
|
||||
color: itemData['isAvailable'] ?
|
||||
color: isAvailable ?
|
||||
ThemeManager.getCurrentThemeVariables().listNoteColor :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabledColor
|
||||
}}>
|
||||
{itemData['subtitle']}
|
||||
{subtitle}
|
||||
</Text>
|
||||
</Body>
|
||||
</Left>
|
||||
</CardItem>
|
||||
</PlatformTouchable>
|
||||
</Card>
|
||||
);
|
||||
{displayEvent !== undefined ?
|
||||
<View>
|
||||
<CardItem style={{
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0
|
||||
}}>
|
||||
<Left>
|
||||
{displayEvent['logo'] !== '' && displayEvent['logo'] !== null ?
|
||||
<Thumbnail source={{uri: displayEvent['logo']}} square/> :
|
||||
<View/>}
|
||||
<Body>
|
||||
<Text>{displayEvent['title']}</Text>
|
||||
<Text note>{displayEvent['date']}</Text>
|
||||
</Body>
|
||||
</Left>
|
||||
</CardItem>
|
||||
<CardItem style={{
|
||||
borderRadius: 30,
|
||||
backgroundColor: 'transparent',
|
||||
}}>
|
||||
<Body style={{
|
||||
height: 70,
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<HTML html={"<div>" + displayEvent['description'] + "</div>"}
|
||||
tagsStyles={{
|
||||
p: {
|
||||
color: ThemeManager.getCurrentThemeVariables().textColor,
|
||||
fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase,
|
||||
},
|
||||
div: {color: ThemeManager.getCurrentThemeVariables().textColor},
|
||||
}}
|
||||
onLinkPress={(event, link) => openWebLink(link)}/>
|
||||
<LinearGradient
|
||||
colors={['transparent', ThemeManager.getCurrentThemeVariables().cardDefaultBg]}
|
||||
end={[0, 0.6]}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
height: 60,
|
||||
bottom: 0
|
||||
}}>
|
||||
<View style={{
|
||||
marginLeft: 'auto',
|
||||
marginTop: 'auto',
|
||||
flexDirection: 'row'
|
||||
}}>
|
||||
<Text style={{
|
||||
marginTop: 'auto',
|
||||
marginBottom: 'auto',
|
||||
padding: 0,
|
||||
}}>
|
||||
Click to see more
|
||||
</Text>
|
||||
<CustomMaterialIcon icon={'chevron-right'}/>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
</Body>
|
||||
</CardItem>
|
||||
</View> :
|
||||
<View/>}
|
||||
</View>
|
||||
</PlatformTouchable>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
getSquareDashboardItem(isAvailable: boolean, icon: string, color: string, title: string, subtitle: string, clickAction: Function, isLeftElement: boolean) {
|
||||
return (
|
||||
<Card style={{
|
||||
flex: 0,
|
||||
width: '48%',
|
||||
marginLeft: 0,
|
||||
marginRight: isLeftElement ? '4%' : 0,
|
||||
borderRadius: 30,
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg
|
||||
}}>
|
||||
<PlatformTouchable
|
||||
onPress={clickAction}
|
||||
style={{
|
||||
zIndex: 100,
|
||||
borderRadius: 30
|
||||
}}
|
||||
>
|
||||
<CardItem style={{
|
||||
borderRadius: 30,
|
||||
backgroundColor: 'transparent'
|
||||
}}>
|
||||
<Body>
|
||||
<View style={{marginLeft: 'auto', marginRight: 'auto'}}>
|
||||
<CustomMaterialIcon
|
||||
icon={icon}
|
||||
color={
|
||||
isAvailable ?
|
||||
color :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabledColor
|
||||
}
|
||||
fontSize={60}
|
||||
width={60}/>
|
||||
</View>
|
||||
<H3 style={{
|
||||
color: isAvailable ?
|
||||
ThemeManager.getCurrentThemeVariables().textColor :
|
||||
ThemeManager.getCurrentThemeVariables().listNoteColor,
|
||||
textAlign: 'center',
|
||||
width: '100%'
|
||||
}}>
|
||||
{title}
|
||||
</H3>
|
||||
<Text style={{
|
||||
color: isAvailable ?
|
||||
ThemeManager.getCurrentThemeVariables().listNoteColor :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabledColor,
|
||||
textAlign: 'center',
|
||||
width: '100%'
|
||||
}}>
|
||||
{subtitle}
|
||||
</Text>
|
||||
</Body>
|
||||
</CardItem>
|
||||
</PlatformTouchable>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
getDashboardMiddleItem(content: Object) {
|
||||
let proximoData = content[0]['data'];
|
||||
let menuData = content[1]['data'];
|
||||
let proximoIcon = 'shopping';
|
||||
let proximoColor = ThemeManager.getCurrentThemeVariables().proximoColor;
|
||||
let proximoTitle = i18n.t('homeScreen.dashboard.proximoTitle');
|
||||
let isProximoAvailable = parseInt(proximoData) > 0;
|
||||
let proximoSubtitle = '';
|
||||
if (isProximoAvailable) {
|
||||
proximoSubtitle =
|
||||
<Text>
|
||||
<Text style={{fontWeight: "bold"}}>{proximoData}</Text>
|
||||
<Text>{i18n.t('homeScreen.dashboard.proximoSubtitle')}</Text>
|
||||
</Text>;
|
||||
} else
|
||||
proximoSubtitle = i18n.t('homeScreen.dashboard.proximoSubtitleNA');
|
||||
let proximoClickAction = () => this.props.navigation.navigate('Proximo');
|
||||
|
||||
|
||||
let menuIcon = 'silverware-fork-knife';
|
||||
let menuColor = ThemeManager.getCurrentThemeVariables().menuColor;
|
||||
let menuTitle = i18n.t('homeScreen.dashboard.menuTitle');
|
||||
let isMenuAvailable = menuData.length > 0;
|
||||
let menuSubtitle = '';
|
||||
if (isMenuAvailable) {
|
||||
menuSubtitle = i18n.t('homeScreen.dashboard.menuSubtitle');
|
||||
} else
|
||||
menuSubtitle = i18n.t('homeScreen.dashboard.menuSubtitleNA');
|
||||
let menuClickAction = () => this.props.navigation.navigate('SelfMenuScreen');
|
||||
return (
|
||||
<View style={{
|
||||
flexDirection: 'row',
|
||||
marginLeft: 10,
|
||||
marginRight: 10,
|
||||
}}>
|
||||
{this.getSquareDashboardItem(isProximoAvailable, proximoIcon, proximoColor, proximoTitle, proximoSubtitle, proximoClickAction, true)}
|
||||
{this.getSquareDashboardItem(isMenuAvailable, menuIcon, menuColor, menuTitle, menuSubtitle, menuClickAction, false)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
getDashboardBottomItem(content: Object) {
|
||||
let icon = 'washing-machine';
|
||||
let color = ThemeManager.getCurrentThemeVariables().proxiwashColor;
|
||||
let title = i18n.t('homeScreen.dashboard.proxiwashTitle');
|
||||
let isAvailable = parseInt(content['dryers']) > 0 || parseInt(content['washers']) > 0;
|
||||
let subtitle;
|
||||
if (isAvailable) {
|
||||
subtitle =
|
||||
<Text>
|
||||
<Text style={{
|
||||
fontWeight: parseInt(content['dryers']) > 0 ?
|
||||
'bold' :
|
||||
'normal',
|
||||
color: parseInt(content['dryers']) > 0 ?
|
||||
ThemeManager.getCurrentThemeVariables().textColor :
|
||||
ThemeManager.getCurrentThemeVariables().listNoteColor
|
||||
}}>
|
||||
{content['dryers']}
|
||||
</Text>
|
||||
<Text>{i18n.t('homeScreen.dashboard.proxiwashSubtitle1')}</Text>
|
||||
<Text style={{
|
||||
fontWeight: parseInt(content['washers']) > 0 ?
|
||||
'bold' :
|
||||
'normal',
|
||||
color: parseInt(content['washers']) > 0 ?
|
||||
ThemeManager.getCurrentThemeVariables().textColor :
|
||||
ThemeManager.getCurrentThemeVariables().listNoteColor
|
||||
}}>
|
||||
{content['washers']}
|
||||
</Text>
|
||||
<Text>{i18n.t('homeScreen.dashboard.proxiwashSubtitle2')}</Text>
|
||||
</Text>;
|
||||
} else
|
||||
subtitle = i18n.t('homeScreen.dashboard.proxiwashSubtitleNA');
|
||||
let clickAction = () => this.props.navigation.navigate('Proxiwash');
|
||||
return (
|
||||
<Card style={{
|
||||
flex: 0,
|
||||
marginLeft: 10,
|
||||
marginRight: 10,
|
||||
borderRadius: 50,
|
||||
backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg
|
||||
}}>
|
||||
<PlatformTouchable
|
||||
onPress={clickAction}
|
||||
style={{
|
||||
zIndex: 100,
|
||||
borderRadius: 50
|
||||
}}
|
||||
>
|
||||
<CardItem style={{
|
||||
borderRadius: 50,
|
||||
backgroundColor: 'transparent'
|
||||
}}>
|
||||
<Left>
|
||||
<CustomMaterialIcon
|
||||
icon={icon}
|
||||
color={
|
||||
isAvailable ?
|
||||
color :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabledColor
|
||||
}
|
||||
fontSize={40}
|
||||
width={40}/>
|
||||
<Body>
|
||||
<H3 style={{
|
||||
color: isAvailable ?
|
||||
ThemeManager.getCurrentThemeVariables().textColor :
|
||||
ThemeManager.getCurrentThemeVariables().listNoteColor
|
||||
}}>
|
||||
{title}
|
||||
</H3>
|
||||
<Text style={{
|
||||
color: isAvailable ?
|
||||
ThemeManager.getCurrentThemeVariables().listNoteColor :
|
||||
ThemeManager.getCurrentThemeVariables().textDisabledColor
|
||||
}}>
|
||||
{subtitle}
|
||||
</Text>
|
||||
</Body>
|
||||
</Left>
|
||||
</CardItem>
|
||||
</PlatformTouchable>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
getRenderItem(item: Object, section: Object, data: Object) {
|
||||
if (section['id'] === SECTIONS_ID[0]) {
|
||||
return this.getDashboardItem(item);
|
||||
} else {
|
||||
return (
|
||||
<Card style={{
|
||||
|
|
|
|||
Loading…
Reference in a new issue