Commit 96c74d44 authored by Sébastiaan Versteeg's avatar Sébastiaan Versteeg
Browse files

Change info text in event details

parent a7a7d79d
......@@ -22,23 +22,63 @@ const Event = (props) => {
const startDate = Moment(data.start).format('D MMM YYYY, HH:mm');
const endDate = Moment(data.end).format('D MMM YYYY, HH:mm');
let text = '';
const infoTexts = [];
// let text = '';
infoTexts.push(
<View key="start-holder" style={styles.infoHolder}>
<Text style={styles.infoText} key="start-title">Van:</Text>
<Text style={styles.infoValueText} key="start-value">{startDate}</Text>
</View>,
);
infoTexts.push(
<View key="end-holder" style={styles.infoHolder}>
<Text style={styles.infoText} key="end-title">Tot:</Text>
<Text style={styles.infoValueText} key="end-value">{endDate}</Text>
</View>,
);
infoTexts.push(
<View key="loc-holder" style={styles.infoHolder}>
<Text style={styles.infoText} key="loc-title">Locatie:</Text>
<Text style={styles.infoValueText} key="loc-value">{data.location}</Text>
</View>,
);
infoTexts.push(
<View key="price-holder" style={styles.infoHolder}>
<Text style={styles.infoText} key="price-title">Prijs:</Text>
<Text style={styles.infoValueText} key="price-value">{data.price}</Text>
</View>,
);
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`;
infoTexts.push(
<View key="registrationend-holder" style={styles.infoHolder}>
<Text style={styles.infoText} key="registrationend-title">Aanmelddeadline:</Text>
<Text style={styles.infoValueText} key="registrationend-value">{registrationDeadline}</Text>
</View>,
);
infoTexts.push(
<View key="canceldeadline-holder" style={styles.infoHolder}>
<Text style={styles.infoText} key="canceldeadline-title">Afmelddeadline:</Text>
<Text style={styles.infoValueText} key="canceldeadline-value">{cancelDeadline}</Text>
</View>,
);
let participantsText = `${data.num_participants} aanmeldingen`;
if (data.max_participants) {
text += ` (${data.max_participants} max)`;
participantsText += ` (${data.max_participants} max)`;
}
text += '\n';
infoTexts.push(
<View key="participants-holder" style={styles.infoHolder}>
<Text style={styles.infoText} key="participants-title">Aantal aanmeldingen:</Text>
<Text style={styles.infoValueText} key="participants-value">{participantsText}</Text>
</View>,
);
if (data.user_registration) {
let registrationState;
......@@ -52,11 +92,21 @@ const Event = (props) => {
registrationState = 'Je bent afgemeld';
}
text += `Aanmeldstatus: ${registrationState}`;
infoTexts.push(
<View key="status-holder" style={styles.infoHolder}>
<Text style={styles.infoText} key="status-title">Aanmeldstatus:</Text>
<Text style={styles.infoValueText} key="status-value">{registrationState}</Text>
</View>,
);
}
}
return text;
return (
<View>
{infoTexts}
</View>
);
};
const eventInfo = (event) => {
......@@ -181,9 +231,7 @@ const Event = (props) => {
<ScrollView backgroundColor={colors.background} contentContainerStyle={styles.eventView}>
<Image style={styles.locationImage} source={{ uri: `https://maps.googleapis.com/maps/api/staticmap?center=${props.data.map_location}&zoom=13&size=450x250&markers=${props.data.map_location}` }} />
<Text style={styles.titleText}>{props.data.title}</Text>
<Text style={styles.infoText}>
{eventDesc(props.data)}
</Text>
{eventDesc(props.data)}
{eventActions(props.data)}
{eventInfo(props.data)}
<View style={styles.divider} />
......
......@@ -25,7 +25,11 @@ const styles = create({
lineHeight: 20.0,
color: colors.darkGrey,
},
infoHolder: {
flexDirection: 'row',
},
infoText: {
flex: 1,
android: {
fontFamily: 'sans-serif-medium',
},
......@@ -36,6 +40,22 @@ const styles = create({
fontSize: 14,
lineHeight: 22.0,
color: colors.darkGrey,
width: '50%',
paddingRight: 8,
},
infoValueText: {
flex: 1,
android: {
fontFamily: 'sans-serif',
},
ios: {
fontFamily: 'System',
fontWeight: '300',
},
fontSize: 14,
lineHeight: 22.0,
color: colors.darkGrey,
width: '50%',
},
registrationText: {
marginTop: 16,
......
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