More details in EventDetails

src/modules/events/EventDetails.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {StyleSheet, ScrollView, Text, Platform, View, Image} from "react-native";
+import {Linking, StyleSheet, ScrollView, Text, Platform, View, Image, TouchableHighlight, Button} from "react-native";
 import HTMLView from 'react-native-htmlview';
 import moment from "moment";
 
@@ -7,36 +7,85 @@ export default class EventDetails extends Component {
 
     _formatTime(time) {
         moment.locale('nb');
-        return moment(time).format('llll');
+        return moment(time).format('HH:mm');
+    }
+
+    _formatMonth(time) {
+        moment.locale('nb');
+        return moment(time).format('MMM');
+    }
+
+    _formatDay(time) {
+        moment.locale('nb');
+        return moment(time).format('DD');
+    }
+
+    _formatYear(time) {
+        moment.locale('nb');
+        return moment(time).format('YYYY');
+    }
+
+    _onUrlPress(link) {
+        Linking.openURL(link);
     }
 
     render() {
         const item = this.props.item;
+        let image = null;
+        if (item.thumbnail.medium_large) {
+            image = <Image source={{uri: item.thumbnail.medium_large}} style={styles.image} resizeMode="cover" />;
+        }
+        let price = null;
+        if (item.price_regular && item.price_regular) {
+            price = <Text style={styles.info}>Pris: {item.price_regular} - Medlemer: {item.price_member}</Text>;
+        }
+        let faceButton = null;
+        if (item.facebook_url) {
+            faceButton = <TouchableHighlight style={styles.faceButton} underlayColor="#fff"
+                                            onPress={() => this._onUrlPress(item.facebook_url)}>
+                            <Image style={styles.faceIcon} resizeMode="contain"
+                                   source={require('./img/facebook_circle_color-256.png')} />
+                         </TouchableHighlight>;
+        }
+        let ticket = null;
+        if (item.ticket_url) {
+            ticket = <View style={styles.ticketButton}>
+                        <Button onPress={() => this._onUrlPress(item.ticket_url)}
+                                title="Kjøp bilett"/>
+                    </View>;
+        }
         return (
-             <ScrollView>
-                 <Image source={{uri: item.thumbnail.medium_large}} style={styles.image} resizeMode="cover" />
-                 <View style={styles.card}>
-                     <Text style={styles.header}>{item.title.decoded}</Text>
-                     <Text style={styles.time}>{this._formatTime(item.start_time)}</Text>
-                     <HTMLView style={styles.content} stylesheet={HTMLStyles} value={item.content.rendered}/>
-                 </View>
-             </ScrollView>
+            <ScrollView>
+                {image}
+                <View style={styles.card}>
+                    <Text style={styles.header} numberOfLines={2}>{item.title.decoded}</Text>
+                    <View style={{flexDirection: 'row'}}>
+                        <View style={styles.date}>
+                            <Text style={styles.day}>{this._formatDay(item.start_time)}</Text>
+                            <Text style={styles.month}>{this._formatMonth(item.start_time)}</Text>
+                            <Text style={styles.year}>{this._formatYear(item.start_time)}</Text>
+                        </View>
+                        <View style={styles.infoContainer}>
+                            <Text style={styles.info}>{item.venue}</Text>
+                            <Text style={styles.info}>kl. {this._formatTime(item.start_time)}</Text>
+                            {price}
+                        </View>
+                        {faceButton}
+                    </View>
+                    {ticket}
+                    <HTMLView style={styles.content} stylesheet={HTMLStyles} value={item.content.rendered}/>
+                </View>
+            </ScrollView>
         )
     }
 }
 
 const styles = StyleSheet.create({
     header: {
-        fontSize: 16,
+        fontSize: 20,
         fontWeight: 'bold',
         color: '#000',
     },
-    paragraph: {
-        fontSize: 16,
-        color: '#000',
-        paddingBottom: 10,
-        lineHeight: 25,
-    },
     card: {
         borderColor: '#e1e8ee',
         borderWidth: 1,
@@ -62,9 +111,67 @@ const styles = StyleSheet.create({
         fontSize: 14,
         color: '#666'
     },
+    info: {
+        color: '#000',
+    },
     content: {
-        paddingTop: 10,
+        paddingTop: 20,
+    },
+    date: {
+        borderColor: '#e1e8ee',
+        borderWidth: 1,
+        ...Platform.select({
+            ios: {
+                shadowColor: 'rgba(0,0,0, .2)',
+                shadowOffset: {height: 0, width: 0},
+                shadowOpacity: 2,
+                shadowRadius: 2,
+            },
+            android: {
+                elevation: 2,
+            },
+        }),
+        marginTop: 10,
+        backgroundColor: '#eee',
+    },
+    day: {
+        paddingTop: 5,
+        fontSize: 20,
+        color: '#000',
+        textAlign: 'center',
+    },
+    month: {
+        textAlign: 'center',
+        paddingBottom: 5,
+    },
+    year: {
+        fontSize: 10,
+        color: '#fff',
+        backgroundColor: '#f58220',
+        textAlign: 'center',
+        paddingRight: 20,
+        paddingBottom: 3,
+        paddingLeft: 20,
+        paddingTop: 3,
+    },
+    infoContainer: {
+        flex: 3,
+        marginLeft: 20,
+        marginTop: 20,
+    },
+    faceButton: {
+        marginTop: 10,
+        flex: 1,
+    },
+    faceIcon: {
+        height: 70,
+        width: 70,
+        alignSelf: 'flex-end',
+    },
+    ticketButton: {
+        paddingTop: 20,
     }
+
 });
 
 //FIXME: Ninja margin