Skip to content

GitLab

Commit 18d5e970 authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Style event details

parent a3e13831
Hide whitespace changes
Inline Side-by-side
app/app.js
View file @ 18d5e970
import React, { Component } from 'react'; import React, { Component } from 'react';
import { AsyncStorage } from 'react-native'; import { AsyncStorage } from 'react-native';
import { createStore, applyMiddleware, combineReducers } from 'redux'; import { applyMiddleware, combineReducers, createStore } from 'redux';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import thunk from 'redux-thunk'; import thunk from 'redux-thunk';
import Moment from 'moment';
import 'moment/locale/nl';
import * as reducers from './reducers'; import * as reducers from './reducers';
import ReduxNavigator from './components/navigator'; import ReduxNavigator from './components/navigator';
...@@ -25,6 +27,7 @@ const pairsToObject = (obj, pair) => { ...@@ -25,6 +27,7 @@ const pairsToObject = (obj, pair) => {
class Main extends Component { class Main extends Component {
componentDidMount() { componentDidMount() {
Moment.locale('nl');
AsyncStorage.multiGet([USERNAMEKEY, TOKENKEY, DISPLAYNAMEKEY, PHOTOKEY]) AsyncStorage.multiGet([USERNAMEKEY, TOKENKEY, DISPLAYNAMEKEY, PHOTOKEY])
.then( .then(
(result) => { (result) => {
......
app/components/Event.js
View file @ 18d5e970
import React from 'react'; import React from 'react';
import { View, Text } from 'react-native'; import { ScrollView, Text, View } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Moment from 'moment';
import 'moment/locale/nl';
import styles from './style/event'; import styles from './style/event';
const REGISTRATION_NOT_NEEDED = -1;
const REGISTRATION_NOT_YET_OPEN = 0;
// eslint-disable-next-line no-unused-vars
const REGISTRATION_OPEN = 1;
const REGISTRATION_OPEN_NO_CANCEL = 2;
const REGISTRATION_CLOSED = 3;
const REGISTRATION_CLOSED_CANCEL_ONLY = 4;
const Event = (props) => { const Event = (props) => {
if (props.success) { if (props.success) {
const eventDesc = (data) => {
const startDate = Moment(data.start).format('D MMM YYYY, HH:mm');
const endDate = Moment(data.end).format('D MMM YYYY, HH:mm');
let text = '';
text += `Van: ${startDate}\n`;
text += `Tot: ${endDate}\n`;
text += `Locatie: ${data.location}\n`;
text += `Prijs: €${data.price}\n`;
if (data.status > REGISTRATION_NOT_NEEDED) {
const registrationDeadline = Moment(data.registration_end).format('D MMM YYYY, HH:m');
const cancelDeadline = Moment(data.cancel_deadline).format('D MMM YYYY, HH:m');
text += `Aanmelddeadline: ${registrationDeadline}\n`;
text += `Afmelddeadline: ${cancelDeadline}\n`;
text += `Aantal aanmeldingen: ${data.num_participants} aanmeldingen (${data.max_participants} max)\n`;
if (data.user_registration) {
let registrationState;
if (data.user_registration.is_late_cancellation) {
registrationState = 'Je bent afgemeld na de afmelddeadline';
} else if (data.user_registration.queue_position === null) {
registrationState = 'Je bent aangemeld';
} else if (data.user_registration.queue_position > 0) {
registrationState = `Wachtlijst positie ${data.user_registration.queue_position}`;
} else {
registrationState = 'Je bent afgemeld';
}
text += `Aanmeldstatus: ${registrationState}`;
}
}
return text;
};
const eventInfo = (event) => {
let text = '';
if (event.status === REGISTRATION_NOT_YET_OPEN) {
const registrationStart = Moment(event.registration_start).format('D MMM YYYY, HH:m');
text = `Aanmelden opent ${registrationStart}`;
} else if (event.status === REGISTRATION_CLOSED ||
event.status === REGISTRATION_CLOSED_CANCEL_ONLY) {
text = 'Aanmelden is niet meer mogelijk';
} else if (event.status === REGISTRATION_NOT_NEEDED) {
text = 'Geen aanmelding vereist';
if (event.no_registration_message) {
text = event.no_registration_message;
}
}
if ((event.status === REGISTRATION_OPEN_NO_CANCEL || event.status === REGISTRATION_CLOSED) &&
!event.user_registration.is_cancelled && event.fine > 0 &&
event.user_registration.queue_position === null) {
text += `Afmelden is niet meer mogelijk zonder de volledige kosten van €${event.fine} te ` +
'betalen. Let op: je kunt je hierna niet meer aanmelden.';
}
if (text.length > 0) {
return (<Text style={styles.registrationText}>{text}</Text>);
}
return (<View />);
};
// eslint-disable-next-line arrow-body-style
const eventActions = () => {
// Needed once registration on server implemented
// if (event.registration_allowed) {
// if ((event.user_registration === null || event.user_registration.is_cancelled) &&
// (event.status === REGISTRATION_OPEN || event.status === REGISTRATION_OPEN_NO_CANCEL)) {
// const text = event.max_participants < event.num_participants ?
// 'Aanmelden' : 'Zet me op de wachtlijst';
// return (
// <View style={styles.registrationActions}>
// <Button color={colors.magenta} title={text} onPress={() => {}} />
// </View>
// );
// } else if (event.user_registration && !event.user_registration.is_cancelled &&
// event.status !== REGISTRATION_NOT_NEEDED && event.status !== REGISTRATION_NOT_YET_OPEN) {
// if ((event.status === REGISTRATION_OPEN || event.status === REGISTRATION_OPEN_NO_CANCEL)
// && event.user_registration && !event.user_registration.is_cancelled
// && event.has_fields) {
// return (
// <View style={styles.registrationActions}>
// <Button
// color={colors.magenta} title="Aanmelding bijwerken" onPress={() => {}}
// />
// <View style={styles.secondButtonMargin}>
// <Button color={colors.magenta} title="Afmelden" onPress={() => {}} />
// </View>
// </View>
// );
// }
// return (
// <View style={styles.registrationActions}>
// <Button color={colors.magenta} title="Afmelden" onPress={() => {}} />
// </View>
// );
// }
// }
return (<View />);
};
return ( return (
<View> <ScrollView contentContainerStyle={styles.eventView}>
<Text style={styles.titleText}>{props.data.title}</Text> <Text style={styles.titleText}>{props.data.title}</Text>
<Text>{props.data.description}</Text> <Text style={styles.infoText}>
<Text>Locatie: {props.data.location}</Text> {eventDesc(props.data)}
<Text>Prijs: {props.data.price}</Text> </Text>
<Text>Boete: {props.data.fine}</Text> {eventActions(props.data)}
</View> {eventInfo(props.data)}
{/* <Button color={colors.magenta} style={styles.registerButton}
title="Aanmelden" onPress={() => {}} />*/}
<View style={styles.divider} />
<Text style={styles.descText}>{props.data.description}</Text>
</ScrollView>
); );
} }
return ( return (
...@@ -27,13 +147,25 @@ Event.propTypes = { ...@@ -27,13 +147,25 @@ Event.propTypes = {
description: React.PropTypes.string.isRequired, description: React.PropTypes.string.isRequired,
start: React.PropTypes.string.isRequired, start: React.PropTypes.string.isRequired,
end: React.PropTypes.string.isRequired, end: React.PropTypes.string.isRequired,
organiser: React.PropTypes.oneOfType([ organiser: React.PropTypes.number.isRequired,
React.PropTypes.number,
React.PropTypes.string,
]).isRequired,
location: React.PropTypes.string.isRequired, location: React.PropTypes.string.isRequired,
price: React.PropTypes.string.isRequired, status: React.PropTypes.number.isRequired,
fine: React.PropTypes.string.isRequired, registration_allowed: React.PropTypes.bool.isRequired,
has_fields: React.PropTypes.bool.isRequired,
registration_start: React.PropTypes.string,
registration_end: React.PropTypes.string,
cancel_deadline: React.PropTypes.string,
max_participants: React.PropTypes.number,
num_participants: React.PropTypes.number,
price: React.PropTypes.string,
fine: React.PropTypes.string,
user_registration: React.PropTypes.shape({
registered_on: React.PropTypes.string,
queue_position: React.PropTypes.number,
is_cancelled: React.PropTypes.bool,
is_late_cancellation: React.PropTypes.bool,
}),
no_registration_message: React.PropTypes.string,
}).isRequired, }).isRequired,
success: React.PropTypes.bool.isRequired, success: React.PropTypes.bool.isRequired,
}; };
......
app/components/style/event.js
View file @ 18d5e970
import { StyleSheet } from 'react-native'; import { create, colors } from '../../style';
import { colors } from '../../style'; const styles = create({
eventView: {
const styles = StyleSheet.create({ padding: 16,
},
titleText: { titleText: {
fontSize: 24, marginBottom: 16,
fontWeight: 'bold', fontFamily: 'sans-serif-medium',
color: colors.darkMagenta, fontSize: 20,
lineHeight: 20.0,
color: colors.darkGrey,
},
infoText: {
fontFamily: 'sans-serif-medium',
fontSize: 14,
lineHeight: 22.0,
color: colors.darkGrey,
},
registrationText: {
marginTop: 16,
},
registrationActions: {
flexDirection: 'row',
alignItems: 'flex-start',
marginTop: 16,
},
secondButtonMargin: {
marginLeft: 16,
},
descText: {
fontSize: 14,
lineHeight: 24.0,
color: colors.black,
},
divider: {
marginLeft: -16,
marginRight: -16,
marginTop: 16,
marginBottom: 16,
alignSelf: 'stretch',
borderStyle: 'solid',
borderWidth: 1,
borderColor: colors.dividerGrey,
},
italicText: {
fontStyle: 'italic',
}, },
}); });
......
app/reducers/events.js
View file @ 18d5e970
...@@ -2,14 +2,16 @@ import * as types from '../actions/actionTypes'; ...@@ -2,14 +2,16 @@ import * as types from '../actions/actionTypes';
const initialState = { const initialState = {
data: { data: {
pk: -1,
title: '', title: '',
description: '', description: '',
start: '', start: '',
end: '', end: '',
organiser: '', organiser: -1,
category: '',
location: '', location: '',
price: '', status: -1,
fine: '', registered: false,
}, },
success: false, success: false,
}; };
......
app/style.js
View file @ 18d5e970
import { StyleSheet, Platform } from 'react-native';
export const colors = { export const colors = {
magenta: '#E62272', magenta: '#E62272',
darkMagenta: '#C2185B', darkMagenta: '#C2185B',
...@@ -5,4 +7,42 @@ export const colors = { ...@@ -5,4 +7,42 @@ export const colors = {
black: '#000000', black: '#000000',
lightGray: '#BBBBBB', lightGray: '#BBBBBB',
textColour: '#313131', textColour: '#313131',
darkGrey: '#373737',
dividerGrey: 'rgba(0, 0, 0, 0.12)',
}; };
export function create(styles) {
const platformStyles = {};
Object.keys(styles).forEach((name) => {
// eslint-disable-next-line prefer-const
let { ios, android, ...style } = { ...styles[name] };
if (ios && Platform.OS === 'ios') {
style = { ...style, ...ios };
}
if (android && Platform.OS === 'android') {
style = { ...style, ...android };
}
if (name === 'ios' && Platform.OS === 'ios') {
Object.keys(style).forEach((styleName) => {
if (platformStyles[styleName]) {
platformStyles[styleName] = { ...platformStyles[styleName], ...style[styleName] };
}
});
}
if (name === 'android' && Platform.OS === 'android') {
Object.keys(style).forEach((styleName) => {
if (platformStyles[styleName]) {
platformStyles[styleName] = { ...platformStyles[styleName], ...style[styleName] };
}
});
}
if (name !== 'ios' && name !== 'android') {
platformStyles[name] = style;
}
});
return StyleSheet.create(platformStyles);
}
package.json
View file @ 18d5e970
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
] ]
}, },
"dependencies": { "dependencies": {
"moment": "^2.18.1",
"prop-types": "^15.5.8", "prop-types": "^15.5.8",
"react": "16.0.0-alpha.6", "react": "16.0.0-alpha.6",
"react-native": "0.44.0", "react-native": "0.44.0",
......
yarn.lock
View file @ 18d5e970
...@@ -3617,7 +3617,7 @@ mkdirp@0.x.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0: ...@@ -3617,7 +3617,7 @@ mkdirp@0.x.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0:
dependencies: dependencies:
minimist "0.0.8" minimist "0.0.8"
moment@2.x.x: moment@2.x.x, moment@^2.18.1:
version "2.18.1" version "2.18.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f" resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
......
Markdown is supported
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