From c720600afd9080455a89969d86f820f76e316733 Mon Sep 17 00:00:00 2001 From: keplyx Date: Mon, 9 Mar 2020 19:00:12 +0100 Subject: [PATCH] Improved dashboard event item --- components/DashboardItem.js | 190 ------------------------ components/EventDashboardItem.js | 49 ++++++ components/PreviewEventDashboardItem.js | 65 ++++++++ screens/HomeScreen.js | 30 ++-- utils/PlanningEventManager.js | 48 +++++- 5 files changed, 168 insertions(+), 214 deletions(-) delete mode 100644 components/DashboardItem.js create mode 100644 components/EventDashboardItem.js create mode 100644 components/PreviewEventDashboardItem.js diff --git a/components/DashboardItem.js b/components/DashboardItem.js deleted file mode 100644 index 7e61752..0000000 --- a/components/DashboardItem.js +++ /dev/null @@ -1,190 +0,0 @@ -// @flow - -import * as React from 'react'; -import {MaterialCommunityIcons} from "@expo/vector-icons"; -import {View} from "react-native"; -import ThemeManager from "../utils/ThemeManager"; -import HTML from "react-native-render-html"; -import {LinearGradient} from "expo-linear-gradient"; -import i18n from "i18n-js"; -import {Avatar, Card, Text} from 'react-native-paper'; - -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, - }; - - getIcon: Function; - - constructor() { - super(); - this.getIcon = this.getIcon.bind(this); - } - - /** - * 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) { - const hasImage = this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null; - const getImage = () => ; - return ( - - {hasImage ? - : - } - - 70 ? 100 : 50, - overflow: 'hidden', - }}> - " + this.props.displayEvent['description'] + ""} - tagsStyles={{ - p: { - color: ThemeManager.getCurrentThemeVariables().text, - }, - div: {color: ThemeManager.getCurrentThemeVariables().text}, - }}/> - - - - - - {i18n.t("homeScreen.dashboard.seeMore")} - - - - - - - ); - } else - return - } - - getIcon() { - return ( - - ); - } - - render() { - // console.log("rendering DashboardItem " + this.props.title); - let marginRight = 10; - if (this.props.isSquare) { - if (this.props.isSquareLeft) - marginRight = '4%'; - else - marginRight = 0 - } - const color = this.props.isAvailable ? - ThemeManager.getCurrentThemeVariables().text : - ThemeManager.getCurrentThemeVariables().textDisabled; - return ( - - - - - {this.getEventPreviewContainer()} - - - ); - } -} diff --git a/components/EventDashboardItem.js b/components/EventDashboardItem.js new file mode 100644 index 0000000..a265caa --- /dev/null +++ b/components/EventDashboardItem.js @@ -0,0 +1,49 @@ +// @flow + +import * as React from 'react'; +import {Avatar, Card, withTheme} from 'react-native-paper'; + +function getIcon(icon, color) { + return ( + + ); +} + +function EventDashBoardItem(props) { + const {colors} = props.theme; + const iconColor = props.isAvailable ? + colors.planningColor : + colors.textDisabled; + const textColor = props.isAvailable ? + colors.text : + colors.textDisabled; + return ( + + + getIcon(props.icon, iconColor)} + /> + + {props.children} + + + ); +} + +export default withTheme(EventDashBoardItem); diff --git a/components/PreviewEventDashboardItem.js b/components/PreviewEventDashboardItem.js new file mode 100644 index 0000000..e8322bb --- /dev/null +++ b/components/PreviewEventDashboardItem.js @@ -0,0 +1,65 @@ +// @flow + +import * as React from 'react'; +import {MaterialCommunityIcons} from "@expo/vector-icons"; +import {View} from "react-native"; +import HTML from "react-native-render-html"; +import i18n from "i18n-js"; +import {Avatar, Card, Text, withTheme, Button} from 'react-native-paper'; +import PlanningEventManager from "../utils/PlanningEventManager"; + + +function PreviewEventDashboardItem(props) { + const {colors} = props.theme; + + if (props.event !== undefined && props.event !== null) { + const hasImage = props.event['logo'] !== '' && props.event['logo'] !== null; + const getImage = () => ; + return ( + + {hasImage ? + : + } + 70 ? 100 : 50, + overflow: 'hidden', + }}> + " + props.event['description'] + ""} + tagsStyles={{ + p: {color: colors.text,}, + div: {color: colors.text}, + }}/> + + + + + + + ); + } else + return +} + +export default withTheme(PreviewEventDashboardItem); diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index 69e6639..5cfd4be 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -5,12 +5,13 @@ import {TouchableOpacity, View} from 'react-native'; import i18n from "i18n-js"; import Autolink from 'react-native-autolink'; import ThemeManager from "../utils/ThemeManager"; -import DashboardItem from "../components/DashboardItem"; +import DashboardItem from "../components/EventDashboardItem"; import * as WebBrowser from 'expo-web-browser'; import WebSectionList from "../components/WebSectionList"; import {Avatar, Button, Card, Text} from 'react-native-paper'; import FeedItem from "../components/FeedItem"; import SquareDashboardItem from "../components/SquareDashboardItem"; +import PreviewEventDashboardItem from "../components/PreviewEventDashboardItem"; // import DATA from "../dashboard_data.json"; @@ -24,8 +25,6 @@ const SECTIONS_ID = [ const REFRESH_TIME = 1000 * 20; // Refresh every 20 seconds -const CARD_BORDER_RADIUS = 10; - type Props = { navigation: Object, } @@ -288,17 +287,8 @@ export default class HomeScreen extends React.Component { } - clickAction(isAvailable: boolean, displayEvent: Object) { - if (isAvailable) - this.props.navigation.navigate('PlanningDisplayScreen', {data: displayEvent}); - else - this.props.navigation.navigate('Planning'); - }; - - getDashboardEventItem(content: Array) { let icon = 'calendar-range'; - let color = ThemeManager.getCurrentThemeVariables().planningColor; let title = i18n.t('homeScreen.dashboard.todayEventsTitle'); let subtitle; let futureEvents = this.getFutureEvents(content); @@ -319,17 +309,23 @@ export default class HomeScreen extends React.Component { subtitle = i18n.t('homeScreen.dashboard.todayEventsSubtitleNA'); let displayEvent = this.getDisplayEvent(futureEvents); - const clickAction = this.clickAction.bind(this, isAvailable, displayEvent); + const clickContainerAction = () => this.props.navigation.navigate('Planning'); + const clickPreviewAction = () => this.props.navigation.navigate('PlanningDisplayScreen', {data: displayEvent});; return ( + > + + ); } diff --git a/utils/PlanningEventManager.js b/utils/PlanningEventManager.js index a853057..2206e01 100644 --- a/utils/PlanningEventManager.js +++ b/utils/PlanningEventManager.js @@ -3,9 +3,9 @@ export default class PlanningEventManager { static isEventBefore(event1: Object, event2: Object) { let date1 = new Date(); let date2 = new Date(); - let timeArray = this.getEventStartTime(event1).split(":"); + let timeArray = PlanningEventManager.getEventStartTime(event1).split(":"); date1.setHours(parseInt(timeArray[0]), parseInt(timeArray[1])); - timeArray = this.getEventStartTime(event2).split(":"); + timeArray = PlanningEventManager.getEventStartTime(event2).split(":"); date2.setHours(parseInt(timeArray[0]), parseInt(timeArray[1])); return date1 < date2; } @@ -16,27 +16,61 @@ export default class PlanningEventManager { static getEventStartTime(event: Object) { if (event !== undefined && Object.keys(event).length > 0 && event.date_begin !== null) - return this.formatTime(event.date_begin.split(" ")[1]); + return PlanningEventManager.formatTime(event.date_begin.split(" ")[1]); else return ""; } static getEventEndTime(event: Object) { if (event !== undefined && Object.keys(event).length > 0 && event.date_end !== null) - return this.formatTime(event.date_end.split(" ")[1]); + return PlanningEventManager.formatTime(event.date_end.split(" ")[1]); else return ""; } static getFormattedTime(event: Object) { - if (this.getEventEndTime(event) !== "") - return this.getEventStartTime(event) + " - " + this.getEventEndTime(event); + if (PlanningEventManager.getEventEndTime(event) !== "") + return PlanningEventManager.getEventStartTime(event) + " - " + PlanningEventManager.getEventEndTime(event); else - return this.getEventStartTime(event); + return PlanningEventManager.getEventStartTime(event); } static formatTime(time: string) { let array = time.split(':'); return array[0] + ':' + array[1]; } + + /** + * Convert the date string given by in the event list json to a date object + * @param dateString + * @return {Date} + */ + static 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; + } + + static padStr(i: number) { + return (i < 10) ? "0" + i : "" + i; + } + + static getFormattedEventTime(event: Object): string { + let formattedStr = ''; + let startDate = PlanningEventManager.stringToDate(event['date_begin']); + let endDate = PlanningEventManager.stringToDate(event['date_end']); + if (startDate !== undefined && startDate !== null && endDate !== undefined && endDate !== null) + formattedStr = PlanningEventManager.padStr(startDate.getHours()) + ':' + PlanningEventManager.padStr(startDate.getMinutes()) + + ' - ' + PlanningEventManager.padStr(endDate.getHours()) + ':' + PlanningEventManager.padStr(endDate.getMinutes()); + else if (startDate !== undefined && startDate !== null) + formattedStr = PlanningEventManager.padStr(startDate.getHours()) + ':' + PlanningEventManager.padStr(startDate.getMinutes()); + return formattedStr + } + }