diff --git a/components/DashboardItem.js b/components/DashboardItem.js new file mode 100644 index 0000000..780400d --- /dev/null +++ b/components/DashboardItem.js @@ -0,0 +1,236 @@ +// @flow + +import * as React from 'react'; +import {Body, Card, CardItem, H3, Left, Text, Thumbnail} from "native-base"; +import CustomMaterialIcon from "./CustomMaterialIcon"; +import {View} from "react-native"; +import ThemeManager from "../utils/ThemeManager"; +import HTML from "react-native-render-html"; +import {LinearGradient} from "expo-linear-gradient"; +import PlatformTouchable from "react-native-platform-touchable"; + +const CARD_BORDER_RADIUS = 10; + +type Props = { + isAvailable: boolean, + icon: string, + color: string, + title: string, + subtitle: React.Node, + clickAction: Function, + isSquare: boolean, + isSquareLeft: boolean, + displayEvent: ?Object, +} + +export default class DashboardItem extends React.Component { + + static defaultProps = { + isSquare: false, + isSquareLeft: true, + displayEvent: undefined, + }; + + /** + * Convert the date string given by in the event list json to a date object + * @param dateString + * @return {Date} + */ + stringToDate(dateString: ?string): ?Date { + let date = new Date(); + if (dateString === undefined || dateString === null) + date = undefined; + else if (dateString.split(' ').length > 1) { + let timeStr = dateString.split(' ')[1]; + date.setHours(parseInt(timeStr.split(':')[0]), parseInt(timeStr.split(':')[1]), 0); + } else + date = undefined; + return date; + } + + padStr(i: number) { + return (i < 10) ? "0" + i : "" + i; + } + + getFormattedEventTime(event: Object): string { + let formattedStr = ''; + let startDate = this.stringToDate(event['date_begin']); + let endDate = this.stringToDate(event['date_end']); + if (startDate !== undefined && startDate !== null && endDate !== undefined && endDate !== null) + formattedStr = this.padStr(startDate.getHours()) + ':' + this.padStr(startDate.getMinutes()) + + ' - ' + this.padStr(endDate.getHours()) + ':' + this.padStr(endDate.getMinutes()); + else if (startDate !== undefined && startDate !== null) + formattedStr = this.padStr(startDate.getHours()) + ':' + this.padStr(startDate.getMinutes()); + return formattedStr + } + + getEventPreviewContainer() { + if (this.props.displayEvent !== undefined && this.props.displayEvent !== null) { + return ( + + + + {this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null ? + : + } + + {this.props.displayEvent['title']} + {this.getFormattedEventTime(this.props.displayEvent)} + + + + + 50 ? 70 : 20, + overflow: 'hidden', + }}> + " + this.props.displayEvent['description'] + ""} + tagsStyles={{ + p: { + color: ThemeManager.getCurrentThemeVariables().textColor, + fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase, + }, + div: {color: ThemeManager.getCurrentThemeVariables().textColor}, + }}/> + + + + Click to see more + + + + + + + + ); + } else + return + } + + getIcon() { + return ( + + ); + } + + getText() { + return ( + +

+ {this.props.title} +

+ + {this.props.subtitle} + + + ); + } + + getContent() { + if (this.props.isSquare) { + return ( + + + {this.getIcon()} + + {this.getText()} + + ); + } else { + return ( + + {this.getIcon()} + + {this.getText()} + + + ); + } + } + + + render() { + let marginRight = 10; + if (this.props.isSquare) { + if (this.props.isSquareLeft) + marginRight = '4%'; + else + marginRight = 0 + } + return ( + + + + + {this.getContent()} + + {this.getEventPreviewContainer()} + + + + ); + } +} diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index a9ed8b7..01f618f 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -8,9 +8,8 @@ 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'; +import DashboardItem from "../components/DashboardItem"; +// import DATA from "../dashboard_data.json"; const ICON_AMICALE = require('../assets/amicale.png'); @@ -149,11 +148,11 @@ export default class HomeScreen extends FetchedDataSectionList { getDashboardItem(item: Object) { let content = item['content']; if (item['id'] === 'top') - return this.getDashboardTopItem(content); + return this.getDashboardEventItem(content); else if (item['id'] === 'middle') return this.getDashboardMiddleItem(content); else - return this.getDashboardBottomItem(content); + return this.getDashboardProxiwashItem(content); } /** @@ -286,24 +285,8 @@ export default class HomeScreen extends FetchedDataSectionList { return displayEvent; } - padStr(i: number) { - return (i < 10) ? "0" + i : "" + i; - } - getFormattedEventTime(event: Object): string { - let formattedStr = ''; - let startDate = this.stringToDate(event['date_begin']); - let endDate = this.stringToDate(event['date_end']); - if (startDate !== undefined && startDate !== null && endDate !== undefined && endDate !== null) - formattedStr = this.padStr(startDate.getHours()) + ':' + this.padStr(startDate.getMinutes()) + - ' - ' + this.padStr(endDate.getHours()) + ':' + this.padStr(endDate.getMinutes()); - else if (startDate !== undefined && startDate !== null) - formattedStr = this.padStr(startDate.getHours()) + ':' + this.padStr(startDate.getMinutes()); - return formattedStr - } - - - getDashboardTopItem(content: Array) { + getDashboardEventItem(content: Array) { let icon = 'calendar-range'; let color = ThemeManager.getCurrentThemeVariables().planningColor; let title = i18n.t('homeScreen.dashboard.todayEventsTitle'); @@ -329,178 +312,18 @@ export default class HomeScreen extends FetchedDataSectionList { let displayEvent = this.getDisplayEvent(futureEvents); return ( - - - - - - - -

- {title} -

- - {subtitle} - - - - - {displayEvent !== undefined ? - - - - {displayEvent['logo'] !== '' && displayEvent['logo'] !== null ? - : - } - - {displayEvent['title']} - {this.getFormattedEventTime(displayEvent)} - - - - - 50 ? 70 : 20, - overflow: 'hidden', - }}> - " + displayEvent['description'] + ""} - tagsStyles={{ - p: { - color: ThemeManager.getCurrentThemeVariables().textColor, - fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase, - }, - div: {color: ThemeManager.getCurrentThemeVariables().textColor}, - }} - onLinkPress={(event, link) => openWebLink(link)}/> - - - - Click to see more - - - - - - - : - } - - - + clickAction()} + title={title} + isAvailable={isAvailable} + displayEvent={displayEvent} + /> ); } - getSquareDashboardItem(isAvailable: boolean, icon: string, color: string, title: string, subtitle: React.Node, clickAction: Function, isLeftElement: boolean) { - return ( - - - - - - - -

- {title} -

- - {subtitle} - - - - - - ); - } getDashboardMiddleItem(content: Object) { let proximoData = content[0]['data']; @@ -517,8 +340,8 @@ export default class HomeScreen extends FetchedDataSectionList { { proximoData > 1 ? - i18n.t('homeScreen.dashboard.proximoSubtitlePlural') : - i18n.t('homeScreen.dashboard.proximoSubtitle') + i18n.t('homeScreen.dashboard.proximoSubtitlePlural') : + i18n.t('homeScreen.dashboard.proximoSubtitle') } ; @@ -543,14 +366,31 @@ export default class HomeScreen extends FetchedDataSectionList { marginLeft: 10, marginRight: 10, }}> - {this.getSquareDashboardItem(isProximoAvailable, proximoIcon, proximoColor, proximoTitle, proximoSubtitle, proximoClickAction, true)} - {this.getSquareDashboardItem(isMenuAvailable, menuIcon, menuColor, menuTitle, menuSubtitle, menuClickAction, false)} + proximoClickAction()} + title={proximoTitle} + isAvailable={isProximoAvailable} + isSquareLeft={true}/> + menuClickAction()} + title={menuTitle} + isAvailable={isMenuAvailable}/> + {/*{this.getSquareDashboardItem(isProximoAvailable, proximoIcon, proximoColor, proximoTitle, proximoSubtitle, proximoClickAction, true)}*/} + {/*{this.getSquareDashboardItem(isMenuAvailable, menuIcon, menuColor, menuTitle, menuSubtitle, menuClickAction, false)}*/} ); } - getDashboardBottomItem(content: Object) { + getDashboardProxiwashItem(content: Object) { let icon = 'washing-machine'; let color = ThemeManager.getCurrentThemeVariables().proxiwashColor; let title = i18n.t('homeScreen.dashboard.proxiwashTitle'); @@ -602,53 +442,13 @@ export default class HomeScreen extends FetchedDataSectionList { subtitle = i18n.t('homeScreen.dashboard.proxiwashSubtitleNA'); let clickAction = () => this.props.navigation.navigate('Proxiwash'); return ( - - - - - - -

- {title} -

- - {subtitle} - - - - - - + clickAction()} + title={title} + isAvailable={isAvailable}/> ); }