From 4449f82c81e4cffff9a12595321ad943c9ebd000 Mon Sep 17 00:00:00 2001
From: keplyx <keplyx@gmail.com>
Date: Tue, 8 Oct 2019 19:16:42 +0200
Subject: [PATCH] Display the most important incoming event for the current day
 on the dashboard

---
 screens/HomeScreen.js | 509 +++++++++++++++++++++++++++++++-----------
 1 file changed, 381 insertions(+), 128 deletions(-)

diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
index 88bc9af..37b3220 100644
--- a/screens/HomeScreen.js
+++ b/screens/HomeScreen.js
@@ -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={{