Commit 739a3e42 authored by Gijs Hendriksen's avatar Gijs Hendriksen Committed by Wietse Kuipers
Browse files

Added styling for calendar

parent 5db69856
import React from 'react';
import { Text, View, ListView } from 'react-native';
import { Text, View, SectionList } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../actions/calendar';
import EventCard from './EventCard';
import styles from './style/calendar';
const weekDays = ['Zo', 'Ma', 'Di', 'Wo', 'Do', 'Vr', 'Za'];
const months = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni',
'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'];
/**
* Takes a list of events and groups them by month and day.
*/
const eventListToSections = (eventList) => {
const sections = {};
for (let i = 0; i < eventList.length; i += 1) {
const start = new Date(eventList[i].start);
const month = start.getMonth();
const day = start.getDate();
if (!(month in sections)) {
sections[month] = {
key: months[month],
data: {},
};
}
if (!(day in sections[month].data)) {
sections[month].data[day] = {
dayNumber: day,
dayOfWeek: weekDays[start.getUTCDay()],
events: [],
};
}
sections[month].data[day].events.push(eventList[i]);
}
return Object.keys(sections).sort((a, b) => a - b).map((month) => {
sections[month].data = Object.keys(sections[month].data).sort((a, b) => a - b).map((day) => {
sections[month].data[day].events.sort(
(a, b) => new Date(a.start).getTime() - new Date(b.start).getTime(),
);
return sections[month].data[day];
});
return sections[month];
});
};
const renderItem = (item) => {
const { dayNumber, dayOfWeek, events } = item.item;
return (
<View style={styles.day} >
<View style={styles.dateInfo} >
<Text style={styles.dayNumber} >{dayNumber}</Text>
<Text style={styles.dayOfWeek}>{dayOfWeek}</Text>
</View>
<View style={styles.eventList} >
{events.map(
event => <EventCard event={event} key={event.pk} />,
)}
</View>
</View>
);
};
const Calendar = (props) => {
if (!props.calendarFetched) {
props.retrieveCalendar(props.token);
......@@ -15,14 +78,17 @@ const Calendar = (props) => {
</View>
);
}
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
const dataSource = ds.cloneWithRows(props.eventList);
return (
<View>
<ListView
dataSource={dataSource}
renderRow={rowData => <EventCard event={rowData} />}
enableEmptySections
<SectionList
style={styles.sectionList}
renderItem={renderItem}
renderSectionHeader={
itemHeader => <Text style={styles.sectionHeader}>{itemHeader.section.key}</Text>
}
sections={eventListToSections(props.eventList)}
keyExtractor={item => item.dayNumber}
stickySectionHeadersEnabled
/>
</View>
);
......@@ -34,8 +100,10 @@ Calendar.propTypes = {
title: React.PropTypes.string,
description: React.PropTypes.string,
start: React.PropTypes.string,
end: React.PropTypes.string,
location: React.PropTypes.string,
price: React.PropTypes.string,
registered: React.PropTypes.bool,
})).isRequired,
calendarFetched: React.PropTypes.bool.isRequired,
retrieveCalendar: React.PropTypes.func.isRequired,
......
import React from 'react';
import { View, Text, Button } from 'react-native';
import { View, Text, TouchableHighlight } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../actions/events';
import styles from './style/eventCard';
/**
* Extracts time in hh:mm format from a Date object
*/
const dateToTime = date => (
`${(`0${date.getHours()}`).slice(-2)}:${(`0${date.getMinutes()}`).slice(-2)}`
);
const EventCard = (props) => {
const date = new Date(props.event.start).toISOString().substring(0, 10);
const startTime = dateToTime(new Date(props.event.start));
const endTime = dateToTime(new Date(props.event.end));
return (
<View>
<Text style={styles.boldText}>{props.event.title}</Text>
<Text>{date}</Text>
<Text style={styles.italicText}>{props.event.description}</Text>
<Text>-----------------------------------------</Text>
<Button title="Openen" onPress={() => props.loadEvent(props.event.pk, props.token)} />
</View>
<TouchableHighlight
onPress={() => props.loadEvent(props.event.pk, props.token)}
style={styles.button}
>
<View style={[styles.card, props.event.registered ? styles.registered : styles.unregistered]}>
<Text style={styles.eventTitle}>{props.event.title}</Text>
<Text style={styles.eventInfo}>{`${startTime} - ${endTime} | ${props.event.location}`}</Text>
</View>
</TouchableHighlight>
);
};
......@@ -23,9 +34,11 @@ EventCard.propTypes = {
title: React.PropTypes.string,
description: React.PropTypes.string,
start: React.PropTypes.string,
end: React.PropTypes.string,
location: React.PropTypes.string,
price: React.PropTypes.string,
pk: React.PropTypes.number,
registered: React.PropTypes.bool,
}).isRequired,
loadEvent: React.PropTypes.func.isRequired,
token: React.PropTypes.string.isRequired,
......
import { StyleSheet } from 'react-native';
import { colors } from '../../style';
const styles = StyleSheet.create({
day: {
flex: 1,
flexDirection: 'row',
},
dateInfo: {
flexDirection: 'column',
alignItems: 'center',
flex: 1,
padding: 10,
},
dayNumber: {
fontSize: 28,
},
dayOfWeek: {
fontSize: 18,
},
eventList: {
flex: 7,
},
sectionList: {
backgroundColor: colors.white,
},
sectionHeader: {
backgroundColor: colors.white,
fontSize: 22,
padding: 10,
paddingLeft: 20,
color: colors.black,
},
});
export default styles;
import { StyleSheet } from 'react-native';
import { colors } from '../../style';
const styles = StyleSheet.create({
italicText: {
fontStyle: 'italic',
button: {
margin: 10,
},
card: {
padding: 20,
},
registered: {
backgroundColor: colors.magenta,
},
boldText: {
unregistered: {
backgroundColor: colors.gray,
},
eventTitle: {
fontWeight: 'bold',
color: colors.white,
},
eventInfo: {
color: colors.white,
},
});
......
......@@ -6,6 +6,7 @@ export const colors = {
white: '#FFFFFF',
black: '#000000',
lightGray: '#BBBBBB',
gray: '#6A6869',
textColour: '#313131',
darkGrey: '#373737',
dividerGrey: 'rgba(0, 0, 0, 0.12)',
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment