Archived
313 lines
9.3 KiB
JavaScript
313 lines
9.3 KiB
JavaScript
import React, { Component } from 'react';
|
|
import {Linking, StyleSheet, ScrollView, Text, Platform, View, Image, TouchableHighlight,
|
|
TouchableOpacity} from "react-native";
|
|
import HTMLView from 'react-native-htmlview';
|
|
import moment from "moment";
|
|
import {Button, Icon, Text as NBText} from "native-base";
|
|
|
|
moment.locale('nb');
|
|
|
|
const CHATEAU_NEUF_ADDRESS = 'Chateau Neuf, Slemdalsveien 15, 0369 Oslo';
|
|
|
|
export default class EventDetail extends Component {
|
|
|
|
_formatTime(time) {
|
|
return moment(time).format('HH:mm');
|
|
}
|
|
|
|
_formatMonth(time) {
|
|
return moment(time).format('MMM');
|
|
}
|
|
|
|
_formatDay(time) {
|
|
return moment(time).format('DD.');
|
|
}
|
|
_formatLocalDay(time) {
|
|
return moment(time).format('ddd')
|
|
}
|
|
|
|
_formatYear(time) {
|
|
return moment(time).format('YYYY');
|
|
}
|
|
|
|
_formatRelative(time) {
|
|
return moment(time).fromNow();
|
|
}
|
|
_formatLocation() {
|
|
if(this.props.item.venue !== 'Annetsteds') {
|
|
return CHATEAU_NEUF_ADDRESS;
|
|
}
|
|
return 'Ukjent adresse'
|
|
}
|
|
|
|
_formatTicketText() {
|
|
/* FIXME: This should be handled by API */
|
|
const {item} = this.props;
|
|
let reg_kr = '';
|
|
let mem_kr = '';
|
|
if (item.price_regular === '0') {
|
|
item.price_regular = 'Gratis'
|
|
}
|
|
if (item.price_member === '0') {
|
|
item.price_member = 'Gratis'
|
|
}
|
|
if (item.price_regular !== 'Gratis') {
|
|
reg_kr = " kr"
|
|
}
|
|
if (item.price_member !== 'Gratis') {
|
|
mem_kr = " kr"
|
|
}
|
|
|
|
let text = '';
|
|
if (item.price_regular && item.price_member) {
|
|
text = `Pris: ${item.price_regular}${reg_kr} / Medlemmer: ${item.price_member}${mem_kr}`;
|
|
}
|
|
else if (item.price_regular) {
|
|
text = `Pris: ${item.price_regular}${reg_kr}`;
|
|
}
|
|
else if (item.price_member) {
|
|
text = `Pris (Medlemmer): ${item.price_member}${mem_kr}`;
|
|
} else {
|
|
return '';
|
|
}
|
|
return text;
|
|
}
|
|
|
|
onUrlPress(link) {
|
|
Linking.openURL(link);
|
|
}
|
|
onLocationPress(venue) {
|
|
if( venue !== 'Annetsteds' ) {
|
|
Linking.openURL(`https://www.google.com/maps/dir/?api=1&destination=${CHATEAU_NEUF_ADDRESS}`);
|
|
}
|
|
}
|
|
|
|
showPriceAndTicket() {
|
|
const {item} = this.props;
|
|
const text = this._formatTicketText();
|
|
|
|
if(text === '') {
|
|
return;
|
|
}
|
|
|
|
if(item.ticket_url) {
|
|
return (
|
|
<TouchableOpacity style={styles.metaInner} onPress={() => this.onUrlPress(item.ticket_url)}>
|
|
<View style={styles.metaIcon}><Icon name="card" style={styles.icons} /></View>
|
|
<View style={{flexDirection: 'column'}}>
|
|
<Text style={styles.metaText}>{text}</Text>
|
|
<Text style={styles.metaSubtitle}>Kjøp billett</Text>
|
|
</View>
|
|
</TouchableOpacity>);
|
|
}
|
|
|
|
return (
|
|
<View style={styles.metaInner}>
|
|
<View style={styles.metaIcon}><Icon name="card" style={styles.icons} /></View>
|
|
<View style={{flexDirection: 'column'}}>
|
|
<Text style={styles.metaText}>{text}</Text>
|
|
<Text style={styles.metaSubtitle}>Billett i døra</Text>
|
|
</View>
|
|
</View>)
|
|
}
|
|
|
|
showFacebutton() {
|
|
const {item} = this.props;
|
|
if (!item.facebook_url) { return;}
|
|
|
|
return (
|
|
<TouchableOpacity onPress={() => this.onUrlPress(item.facebook_url)} style={styles.metaInner}>
|
|
<View style={[styles.metaIcon, {marginTop: 0}]}><Icon name="logo-facebook" style={styles.icons} /></View>
|
|
<View>
|
|
<Text style={[styles.metaText, {paddingTop: 2}]}>På Facebook</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
showImage() {
|
|
const {item} = this.props;
|
|
|
|
if (item.thumbnail.medium_large) {
|
|
return <Image source={{uri: item.thumbnail.medium_large}} style={styles.image} />;
|
|
}
|
|
}
|
|
|
|
showYear() {
|
|
const {item} = this.props;
|
|
|
|
if(moment().year() !== moment(item.start_time).year()) {
|
|
return <Text style={styles.year}>{this._formatYear(item.start_time)}</Text>
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {item} = this.props;
|
|
|
|
return (
|
|
<ScrollView>
|
|
{this.showImage()}
|
|
<View style={styles.card}>
|
|
{/* Date and title */}
|
|
<View style={styles.dateAndTitle}>
|
|
<View style={styles.dateContainer}>
|
|
<View style={styles.dateCard}>
|
|
<Text style={styles.day}>{this._formatDay(item.start_time)}</Text>
|
|
<Text style={styles.month}>{this._formatMonth(item.start_time)}</Text>
|
|
{this.showYear()}
|
|
</View>
|
|
</View>
|
|
<View style={styles.titleContainer}>
|
|
<Text style={styles.title} numberOfLines={2}>{item.title.decoded}</Text>
|
|
</View>
|
|
</View>
|
|
{/* Time and calendar */}
|
|
<TouchableOpacity style={styles.metaInner}>
|
|
<View style={styles.metaIcon}><Icon name="time" style={styles.icons} /></View>
|
|
<View style={{flexDirection: 'column'}}>
|
|
<Text style={styles.metaText}>{this._formatLocalDay(item.start_time)} kl. {this._formatTime(item.start_time)} - {this._formatTime(item.end_time)}</Text>
|
|
<Text style={styles.metaSubtitle}>{this._formatRelative(item.start_time)}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
{/* Location and maps */}
|
|
<TouchableOpacity style={styles.metaInner} onPress={() => this.onLocationPress(item.venue)}>
|
|
<View style={[styles.metaIcon, {paddingLeft: 1}]}><Icon name="pin" style={styles.icons} /></View>
|
|
<View style={{flexDirection: 'column'}}>
|
|
<Text style={styles.metaText}>{item.venue}</Text>
|
|
<Text style={styles.metaSubtitle} numberOfLines={1}>{this._formatLocation()}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
{this.showPriceAndTicket()}
|
|
{this.showFacebutton()}
|
|
<HTMLView style={styles.content} stylesheet={HTMLStyles} value={item.content.rendered}/>
|
|
</View>
|
|
</ScrollView>
|
|
)
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
dateAndTitle: {
|
|
flexDirection: 'row',
|
|
marginBottom: 8
|
|
},
|
|
titleContainer: {
|
|
paddingLeft: 10,
|
|
justifyContent: 'center',
|
|
flex: 4,
|
|
},
|
|
title: {
|
|
fontSize: 20,
|
|
fontWeight: 'bold',
|
|
color: '#000',
|
|
},
|
|
card: {
|
|
borderColor: '#e1e8ee',
|
|
borderWidth: 1,
|
|
...Platform.select({
|
|
ios: {
|
|
shadowColor: 'rgba(0,0,0, .2)',
|
|
shadowOffset: {height: 0, width: 0},
|
|
shadowOpacity: 1,
|
|
shadowRadius: 1,
|
|
},
|
|
android: {
|
|
elevation: 1,
|
|
},
|
|
}),
|
|
padding: 8,
|
|
margin: 8,
|
|
backgroundColor: '#fff',
|
|
},
|
|
image: {
|
|
height: 260,
|
|
width: null
|
|
},
|
|
time: {
|
|
fontSize: 14,
|
|
color: '#666'
|
|
},
|
|
metaInner: {
|
|
flexDirection: 'row',
|
|
marginVertical: 8,
|
|
},
|
|
metaIcon: {
|
|
width: 16,
|
|
paddingTop: 3,
|
|
marginHorizontal: 8,
|
|
marginVertical: 8,
|
|
},
|
|
metaText: {
|
|
color: '#000',
|
|
},
|
|
metaSubtitle: {
|
|
color: '#666',
|
|
},
|
|
content: {
|
|
borderTopWidth: StyleSheet.hairlineWidth,
|
|
borderColor: '#ccc',
|
|
marginTop: 8,
|
|
paddingTop: 10,
|
|
},
|
|
dateContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
},
|
|
dateCard: {
|
|
borderColor: '#e1e8ee',
|
|
borderWidth: 1,
|
|
...Platform.select({
|
|
ios: {
|
|
shadowColor: 'rgba(0,0,0, .2)',
|
|
shadowOffset: {height: 0, width: 0},
|
|
shadowOpacity: 2,
|
|
shadowRadius: 2,
|
|
},
|
|
android: {
|
|
elevation: 1,
|
|
},
|
|
}),
|
|
backgroundColor: '#fff',
|
|
paddingBottom: 6,
|
|
width: 62,
|
|
},
|
|
day: {
|
|
paddingTop: 5,
|
|
fontSize: 20,
|
|
color: '#000',
|
|
textAlign: 'center',
|
|
},
|
|
month: {
|
|
textAlign: 'center',
|
|
paddingHorizontal: 16,
|
|
},
|
|
year: {
|
|
fontSize: 10,
|
|
color: '#fff',
|
|
backgroundColor: '#f58220',
|
|
textAlign: 'center',
|
|
paddingRight: 20,
|
|
paddingBottom: 3,
|
|
paddingLeft: 20,
|
|
paddingTop: 3,
|
|
},
|
|
icons: {
|
|
fontSize: 16,
|
|
},
|
|
|
|
});
|
|
|
|
//FIXME: Ninja margin
|
|
const HTMLStyles = StyleSheet.create({
|
|
p: {
|
|
fontSize: 16,
|
|
marginBottom: -30,
|
|
color: '#000',
|
|
},
|
|
ul: {
|
|
fontSize: 16,
|
|
color: '#000',
|
|
marginTop: -20,
|
|
marginBottom: -30,
|
|
},
|
|
}); |