Encore des commits degeu

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Account/Account.vue

@@ -23,7 +23,7 @@
               <v-avatar size="125px">
                 <img v-if="!account.avatar_url"
                   class="img-circle elevation-7 mb-1"
-                  src="http://lorempixel.com/125/125/"
+                  src="https://picsum.photos/125/125/"
                 >
                 <img v-else
                      class="img-circle elevation-7 mb-1"
@@ -84,7 +84,7 @@
                 <v-card-media
                   class="black--text"
                   height="200px"
-                  src="http://lorempixel.com/400/200/"
+                  src="https://picsum.photos/400/200/"
                 >
                   <v-container fill-height fluid>
                     <v-layout fill-height>
@@ -125,7 +125,7 @@
                 <v-card-media
                   class="black--text"
                   height="200px"
-                  src="http://lorempixel.com/400/200/"
+                  src="https://picsum.photos/400/200/"
                 >
                   <v-container fill-height fluid>
                     <v-layout fill-height>

js/src/components/Event/Event.vue

@@ -28,54 +28,63 @@
                 </v-list>
               </v-menu>
             </v-card-title>
+              <v-container grid-list-md text-xs-center>
+                  <v-card-media
+                          src="https://picsum.photos/600/400/"
+                          height="200px"
+                  >
+
+                  </v-card-media>
+                  <v-layout row wrap>
+                      <v-flex xs6>
             <v-spacer></v-spacer>
-            <div class="text-xs-center">
-              <v-card-title class="pl-5 pt-5">
-                <div class="display-1 pl-5 pt-5">{{ event.title }}</div>
-              </v-card-title>
+              <span class="subheading grey--text">{{ event.begins_on | formatDay }}</span>
+              <h1 class="display-2">{{ event.title }}</h1>
+              <div>
+                  <router-link :to="{name: 'Account', params: { name: event.organizer.username } }">
+                      <v-avatar size="25px">
+                          <img class="img-circle elevation-7 mb-1"
+                               :src="event.organizer.avatar"
+                          >
+                      </v-avatar>
+                  </router-link>
+                  <span v-if="event.organizer">Organisé par {{ event.organizer.display_name }}</span>
+              </div>
+                          <p>
+                              <vue-markdown :source="event.description" />
+                          </p>
               <!--<p><router-link :to="{ name: 'Account', params: {id: event.organizer.id} }"><span class="grey&#45;&#45;text">{{ event.organizer.username }}</span></router-link> organises {{ event.title }} <span v-if="event.address.addressLocality">in {{ event.address.addressLocality }}</span> on the {{ event.startDate | formatDate }}.</p>
               <v-card-text v-if="event.description"><vue-markdown :source="event.description"></vue-markdown></v-card-text>-->
-            </div>
+                      </v-flex>
+                      <v-flex xs6>
+                          <v-card-actions>
+                              <v-btn color="success" v-if="!event.participants.map(participant => participant.id).includes($store.state.user.actor.id)" @click="joinEvent" class="btn btn-primary"><v-icon>check</v-icon> Join</v-btn>
+                              <v-btn v-if="event.participants.map(participant => participant.id).includes($store.state.user.actor.id)" @click="leaveEvent" class="btn btn-primary">Leave</v-btn>
+                          </v-card-actions>
+                      </v-flex>
+                  </v-layout>
+              </v-container>
           <v-container fluid grid-list-md>
             <v-subheader>Membres</v-subheader>
             <v-layout row>
-              <v-flex xs2>
-                <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">
+              <v-flex xs2 v-for="actor in event.participants" :key="actor.uuid">
+                <router-link :to="{name: 'Account', params: { name: actor.username }}">
                   <v-avatar size="75px">
-                    <img v-if="!event.organizer.avatar_url"
+                    <img v-if="!actor.avatar"
                          class="img-circle elevation-7 mb-1"
-                         src="http://lorempixel.com/125/125/"
+                         src="https://picsum.photos/125/125/"
                     >
                     <img v-else
                          class="img-circle elevation-7 mb-1"
-                         :src="event.organizer.avatar_url"
-                    >
-                  </v-avatar>
-                </router-link>
-                Organisateur <span>{{ event.organizer.username }}</span>
-              </v-flex>
-              <v-flex xs2 v-for="actor in event.participants" :key="actor.id">
-                <router-link :to="{name: 'Account', params: {'id': actor.id}}">
-                  <v-avatar size="75px">
-                    <img v-if="!account.avatar_url"
-                         class="img-circle elevation-7 mb-1"
-                         src="http://lorempixel.com/125/125/"
-                    >
-                    <img v-else
-                         class="img-circle elevation-7 mb-1"
-                         :src="account.avatar_url"
+                         :src="actor.avatar"
                     >
                   </v-avatar>
                 </router-link>
                 <span>{{ actor.username }}</span>
               </v-flex>
+                <span v-if="event.participants.length === 0">No participants yet.</span>
             </v-layout>
           </v-container>
-          <v-card-actions>
-            <button v-if="!event.participants.map(participant => participant.id).includes($store.state.user.actor.id)" @click="joinEvent" class="btn btn-primary">Join</button>
-            <button v-if="event.participants.map(participant => participant.id).includes($store.state.user.actor.id)" @click="leaveEvent" class="btn btn-primary">Leave</button>
-            <button @click="deleteEvent" class="btn btn-danger">Delete</button>
-          </v-card-actions>
           </v-layout>
         </v-card>
       </v-flex>
@@ -97,9 +106,10 @@
         loading: true,
         error: false,
         event: {
-          name: this.name,
-          slug: this.slug,
+          name: '',
+          slug: '',
           title: '',
+          uuid: this.uuid,
           description: '',
           organizer: {
             id: null,
@@ -112,11 +122,11 @@
     methods: {
       deleteEvent() {
         const router = this.$router;
-        eventFetch(`/events/${this.name}/${this.slug}`, this.$store, { method: 'DELETE' })
+        eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
           .then(() => router.push({'name': 'EventList'}));
       },
       fetchData() {
-        eventFetch(`/events/${this.name}/${this.slug}`, this.$store)
+        eventFetch(`/events/${this.uuid}`, this.$store)
           .then(response => response.json())
           .then((data) => {
             this.loading = false;
@@ -130,21 +140,21 @@
         });
       },
       joinEvent() {
-        eventFetch(`/events/${this.name}/${this.slug}/join`, this.$store)
+        eventFetch(`/events/${this.uuid}/join`, this.$store)
           .then(response => response.json())
           .then((data) => {
             console.log(data);
           });
       },
       leaveEvent() {
-        eventFetch(`/events/${this.name}/${this.slug}/leave`, this.$store)
+        eventFetch(`/events/${this.uuid}/leave`, this.$store)
           .then(response => response.json())
           .then((data) => {
             console.log(data);
           });
       },
       downloadIcsEvent() {
-        eventFetch(`/events/${this.name}/${this.slug}/ics`, this.$store, {responseType: 'arraybuffer'})
+        eventFetch(`/events/${this.uuid}/ics`, this.$store, {responseType: 'arraybuffer'})
           .then((response) => response.text())
           .then(response => {
             const blob = new Blob([response],{type: 'text/calendar'});
@@ -158,14 +168,10 @@
       },
     },
     props: {
-        name: {
+        uuid: {
             type: String,
             required: true,
         },
-        slug: {
-            type: String,
-            required: true
-        },
     },
     created() {
       this.fetchData();

js/src/components/Event/EventList.vue

@@ -1,35 +1,43 @@
 <template>
-  <v-container>
+  <v-layout>
+      <v-flex xs12 sm8 offset-sm2>
+          <v-card>
     <h1>{{ $t("event.list.title") }}</h1>
 
     <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
     <v-chip close v-model="locationChip" label color="pink" text-color="white" v-if="$router.currentRoute.params.location">
       <v-icon left>location_city</v-icon>{{ locationText }}
     </v-chip>
-    <v-layout row wrap justify-space-around>
-      <v-flex xs12 md3 v-for="event in events" :key="event.id">
+              <v-container grid-list-sm fluid>
+    <v-layout row wrap>
+      <v-flex xs4 v-for="event in events" :key="event.id">
         <v-card>
-          <v-card-media v-if="event.image"
+          <v-card-media v-if="!event.image"
             class="white--text"
             height="200px"
-            src="http://lorempixel.com/400/200/"
+            src="https://picsum.photos/g/400/200/"
           >
             <v-container fill-height fluid>
               <v-layout fill-height>
                 <v-flex xs12 align-end flexbox>
-                  <span class="headline">{{ event.title }}</span>
+                  <span class="headline black--text">{{ event.title }}</span>
                 </v-flex>
               </v-layout>
             </v-container>
           </v-card-media>
-          <v-card-title v-else primary-title>
-            <div class="headline">{{ event.title }}</div>
-          </v-card-title>
-          <v-container>
-              <!--<span class="grey&#45;&#45;text">{{ event.startDate | formatDate }} à <router-link :to="{name: 'EventList', params: {location: geocode(event.address.geo.latitude, event.address.geo.longitude, 10) }}">{{ event.address.addressLocality }}</router-link></span><br>-->
-              <p><vue-markdown>{{ event.description }}</vue-markdown></p>
-              <p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'name': event.organizer.username}}">{{ event.organizer.username }}</router-link></p>
-          </v-container>
+            <v-card-title primary-title>
+                <div>
+                    <span class="grey--text">{{ event.begins_on | formatDate }}</span><br>
+                    <router-link :to="{name: 'Account', params: { name: event.organizer.username } }">
+                        <v-avatar size="25px">
+                            <img class="img-circle elevation-7 mb-1"
+                                 :src="event.organizer.avatar"
+                            >
+                        </v-avatar>
+                    </router-link>
+                    <span v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'name': event.organizer.username}}">{{ event.organizer.username }}</router-link></span>
+                </div>
+            </v-card-title>
           <v-card-actions>
             <v-btn flat color="orange" @click="downloadIcsEvent(event)">Share</v-btn>
             <v-btn flat color="orange" @click="viewEvent(event)">Explore</v-btn>
@@ -38,8 +46,11 @@
         </v-card>
       </v-flex>
     </v-layout>
+              </v-container>
     <router-link :to="{ name: 'CreateEvent' }" class="btn btn-default">Create</router-link>
-  </v-container>
+          </v-card>
+      </v-flex>
+  </v-layout>
 </template>
 
 <script>
@@ -96,18 +107,19 @@
           .then((response) => {
             this.loading = false;
             this.events = response.data;
+            console.log(this.events);
           });
       },
       deleteEvent(event) {
         const router = this.$router;
-        eventFetch(`/events/${event.organizer.username}/${event.slug}`, this.$store, {'method': 'DELETE'})
+        eventFetch(`/events/${event.uuid}`, this.$store, {'method': 'DELETE'})
           .then(() => router.push('/events'));
       },
       viewEvent(event) {
-        this.$router.push({ name: 'Event', params: { name: event.organizer.username, slug: event.slug } })
+        this.$router.push({ name: 'Event', params: { uuid: event.uuid } })
       },
       downloadIcsEvent(event) {
-        eventFetch(`/events/${event.organizer.username}/${event.slug}/export`, this.$store, {responseType: 'arraybuffer'})
+        eventFetch(`/events/${event.uuid}/ics`, this.$store, {responseType: 'arraybuffer'})
           .then((response) => response.text())
           .then(response => {
             const blob = new Blob([response],{type: 'text/calendar'});

js/src/components/Group/Group.vue

@@ -4,37 +4,57 @@
       <v-flex xs12 sm6 offset-sm3>
         <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
         <v-card v-if="!loading">
-          <v-layout column class="media">
-            <v-card-title>
-              <v-btn icon @click="$router.go(-1)">
-                <v-icon>chevron_left</v-icon>
-              </v-btn>
-              <v-spacer></v-spacer>
-              <v-btn icon class="mr-3" v-if="$store.state.user">
-                <v-icon>edit</v-icon>
-              </v-btn>
-              <v-btn icon>
-                <v-icon>more_vert</v-icon>
-              </v-btn>
-            </v-card-title>
-            <v-spacer></v-spacer>
-            <div class="text-xs-center">
-              <v-avatar size="125px">
-                <img v-if="!group.avatar_url"
-                     class="img-circle elevation-7 mb-1"
-                     src="http://lorempixel.com/125/125/"
-                >
-                <img v-else
-                     class="img-circle elevation-7 mb-1"
-                     :src="group.avatar_url"
-                >
-              </v-avatar>
-              <v-card-title class="pl-5 pt-5">
-                <div class="display-1 pl-5 pt-5">{{ group.title }}<span v-if="group.server">@{{ group.server.address }}</span></div>
+          <v-card-media :src="group.banner" height="400px">
+            <v-layout column class="media">
+              <v-card-title>
+                <v-btn icon @click="$router.go(-1)">
+                  <v-icon>chevron_left</v-icon>
+                </v-btn>
+                <v-spacer></v-spacer>
+                <!--<v-btn icon class="mr-3" v-if="$store.state.user && $store.state.user.actor.id === actor.id">-->
+                  <!--<v-icon>edit</v-icon>-->
+                <!--</v-btn>-->
+                <v-btn icon>
+                  <v-icon>more_vert</v-icon>
+                </v-btn>
               </v-card-title>
-              <v-card-text v-html="group.description"></v-card-text>
-            </div>
-          </v-layout>
+              <v-spacer></v-spacer>
+              <div class="text-xs-center">
+                <v-avatar size="125px">
+                  <img v-if="!group.avatar"
+                       class="img-circle elevation-7 mb-1"
+                       src="https://picsum.photos/125/125/"
+                  >
+                  <img v-else
+                       class="img-circle elevation-7 mb-1"
+                       :src="group.avatar"
+                  >
+                </v-avatar>
+              </div>
+              <v-container fluid grid-list-lg>
+                <v-layout row>
+                  <v-flex xs7>
+                    <div class="headline">{{ group.display_name }}</div>
+                    <div>
+                        <span class="subheading">
+                            ~{{ group.username }}
+                            <span v-if="group.domain">
+                                @{{ group.domain }}
+                            </span>
+                        </span>
+                        <v-chip color="indigo" text-color="white">
+                            <v-avatar>
+                                <v-icon>group</v-icon>
+                            </v-avatar>
+                            Group
+                        </v-chip>
+                    </div>
+                    <v-card-text v-if="group.description" v-html="group.description"></v-card-text>
+                  </v-flex>
+                </v-layout>
+              </v-container>
+            </v-layout>
+          </v-card-media>
           <v-list three-line>
             <v-list-tile>
               <v-list-tile-action>
@@ -59,48 +79,90 @@
               </v-list-tile-content>
             </v-list-tile>
             <v-divider inset></v-divider>
-            <v-list-tile v-if="group.address">
+            <v-list-tile>
               <v-list-tile-action>
                 <v-icon color="indigo">location_on</v-icon>
               </v-list-tile-action>
               <v-list-tile-content>
-                <v-list-tile-title>{{ group.address.streetAddress }}</v-list-tile-title>
-                <v-list-tile-sub-title>{{ group.address.postalCode }} {{ group.address.locality }}</v-list-tile-sub-title>
+                <v-list-tile-title>1400 Main Street</v-list-tile-title>
+                <v-list-tile-sub-title>Orlando, FL 79938</v-list-tile-sub-title>
               </v-list-tile-content>
             </v-list-tile>
           </v-list>
           <v-container fluid grid-list-md v-if="group.members.length > 0">
             <v-subheader>Membres</v-subheader>
             <v-layout row>
-              <v-flex xs2 v-for="member in group.members" :key="member.id">
-                <router-link :to="{name: 'Account', params: {'id': member.actor.id}}">
+              <v-flex xs2 v-for="member in group.members" :key="member.actor.username">
+                <router-link :to="{name: 'Account', params: { name: member.actor.username } }">
                   <v-badge overlap>
-                    <span slot="badge" v-if="member.role == 3"><v-icon>stars</v-icon></span>
+                    <span slot="badge" v-if="member.role === 1"><v-icon>star_half</v-icon></span>
+                    <span slot="badge" v-if="member.role === 2"><v-icon>star</v-icon></span>
                     <v-avatar size="75px">
-                      <img v-if="!member.account.avatar_url"
+                      <img v-if="!member.actor.avatar"
                            class="img-circle elevation-7 mb-1"
-                           src="http://lorempixel.com/125/125/"
+                           src="https://picsum.photos/125/125/"
                       >
                       <img v-else
                            class="img-circle elevation-7 mb-1"
-                           :src="member.account.avatar_url"
+                           :src="member.actor.avatar"
                       >
                     </v-avatar>
                   </v-badge>
                 </router-link>
-                <span>{{ groupAccount.actor.username }}</span>
+                <span>{{ member.actor.username }}</span>
               </v-flex>
             </v-layout>
           </v-container>
-          <v-container fluid grid-list-md v-if="group.events.length > 0">
+          <v-container fluid grid-list-md v-if="group.participatingEvents && group.participatingEvents.length > 0">
             <v-subheader>Participated at</v-subheader>
             <v-layout row wrap>
-              <v-flex v-for="event in group.events" :key="event.id">
+              <v-flex v-for="event in group.participatingEvents" :key="event.id">
                 <v-card>
                   <v-card-media
-                    class="black--text"
-                    height="200px"
-                    src="http://lorempixel.com/400/200/"
+                          class="black--text"
+                          height="200px"
+                          src="https://picsum.photos/400/200/"
+                  >
+                    <v-container fill-height fluid>
+                      <v-layout fill-height>
+                        <v-flex xs12 align-end flexbox>
+                          <span class="headline">{{ event.title }}</span>
+                        </v-flex>
+                      </v-layout>
+                    </v-container>
+                  </v-card-media>
+                  <v-card-title>
+                    <div>
+                      <span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
+                      <p>{{ event.description }}</p>
+                      <p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
+                    </div>
+                  </v-card-title>
+                  <v-card-actions>
+                    <v-spacer></v-spacer>
+                    <v-btn icon>
+                      <v-icon>favorite</v-icon>
+                    </v-btn>
+                    <v-btn icon>
+                      <v-icon>bookmark</v-icon>
+                    </v-btn>
+                    <v-btn icon>
+                      <v-icon>share</v-icon>
+                    </v-btn>
+                  </v-card-actions>
+                </v-card>
+              </v-flex>
+            </v-layout>
+          </v-container>
+          <v-container fluid grid-list-md v-if="group.organizingEvents && group.organizingEvents.length > 0">
+            <v-subheader>Organized events</v-subheader>
+            <v-layout row wrap>
+              <v-flex v-for="event in group.organizingEvents" :key="event.id">
+                <v-card>
+                  <v-card-media
+                          class="black--text"
+                          height="200px"
+                          src="https://picsum.photos/400/200/"
                   >
                     <v-container fill-height fluid>
                       <v-layout fill-height>
@@ -140,40 +202,39 @@
 </template>
 
 <script>
+    import eventFetch from '@/api/eventFetch';
 
-  import eventFetch from '@/api/eventFetch';
-
-  export default {
-    name: 'Group',
-    props: ['id'],
-    data() {
-      return {
-        group: {
-          id: this.id,
-          title: '',
-          description: '',
+    export default {
+        name: 'Group',
+        data() {
+            return {
+                group: null,
+                loading: true,
+            }
         },
-        loading: true,
-      }
-    },
-    methods: {
-      fetchData() {
-        eventFetch(`/groups/${this.id}`, this.$store)
-          .then(response => response.json())
-          .then((data) => {
-            this.loading = false;
-            this.group = data.data;
-          });
-      },
-      deleteGroup() {
-        const router = this.$router;
-        eventFetch(`/groups/${this.id}`, this.$store, { method: 'DELETE' })
-          .then(response => response.json())
-          .then(() => router.push('/groups'));
-      },
-    },
-    created() {
-      this.fetchData();
-    },
-  }
+        props: {
+            name: {
+                type: String,
+                required: true,
+            }
+        },
+        created() {
+            this.fetchData();
+        },
+        watch: {
+            // call again the method if the route changes
+            '$route': 'fetchData'
+        },
+        methods: {
+            fetchData() {
+                eventFetch(`/actors/${this.name}`, this.$store)
+                    .then(response => response.json())
+                    .then((response) => {
+                        this.group = response.data;
+                        this.loading = false;
+                        console.log(this.group);
+                    })
+            }
+        }
+    }
 </script>

js/src/components/Group/GroupList.vue

@@ -9,7 +9,7 @@
           <v-card-media
             class="black--text"
             height="200px"
-            src="http://lorempixel.com/400/200/"
+            src="https://picsum.photos/400/200/"
           >
             <v-container fill-height fluid>
               <v-layout fill-height>
@@ -26,9 +26,9 @@
             </div>
           </v-card-title>
           <v-card-actions>
-            <v-btn flat color="green" @click="joinGroup(group.id)"><v-icon v-if="group.locked">lock</v-icon>Join</v-btn>
+            <v-btn flat color="green" @click="joinGroup(group)"><v-icon v-if="group.locked">lock</v-icon>Join</v-btn>
             <v-btn flat color="orange" @click="viewActor(group)">Explore</v-btn>
-            <v-btn flat color="red" @click="deleteEvent(group.id)">Delete</v-btn>
+            <v-btn flat color="red" @click="deleteGroup(group)">Delete</v-btn>
           </v-card-actions>
         </v-card>
       </v-flex>
@@ -64,20 +64,20 @@
             this.groups = data.data;
           });
       },
-      deleteEvent(id) {
+      deleteGroup(group) {
         const router = this.$router;
-        eventFetch('/groups/' + id, this.$store, {'method': 'DELETE'})
+        eventFetch(`/groups/${this.username_with_domain(group)}`, this.$store, {'method': 'DELETE'})
           .then(response => response.json())
           .then(() => router.push('/groups'));
       },
       viewActor(actor) {
-        this.$router.push({ name: 'Account', params: { name: this.username_with_domain(actor) } })
+        this.$router.push({ name: 'Group', params: { name: this.username_with_domain(actor) } })
       },
-      joinGroup(id) {
+      joinGroup(group) {
         const router = this.$router;
-        eventFetch('/groups/' + id + '/join', this.$store)
+        eventFetch(`/groups/${this.username_with_domain(group)}/join`, this.$store, { method: 'POST' })
           .then(response => response.json())
-          .then(() => router.push('/group/' + id))
+          .then(() => router.push({ name: 'Group', params: { name: this.username_with_domain(group) } }));
       }
     },
   };

js/src/components/Home.vue

@@ -1,10 +1,59 @@
 <template>
   <v-container>
-    <h1 class="welcome" v-if="$store.state.user">{{ $t("home.welcome", { 'username': this.displayed_name }) }}</h1>
-    <h1 class="welcome" v-else>{{ $t("home.welcome_off", { 'username': $store.state.user.username}) }}</h1>
-    <router-link :to="{ name: 'EventList' }">{{ $t('home.events') }}</router-link>
-    <router-link v-if="$store.state.user === false" :to="{ name: 'Login' }">{{ $t('home.login') }}</router-link>
-    <router-link v-if="$store.state.user === false" :to="{ name: 'Register' }">{{ $t('home.register') }}</router-link>
+      <v-jumbotron
+              :gradient="gradient"
+              src="https://picsum.photos/1200/900"
+              dark
+              v-if="$store.state.user === false"
+      >
+          <v-container fill-height>
+              <v-layout align-center>
+                  <v-flex text-xs-center>
+                      <h1 class="display-3">Find events you like</h1>
+                      <h2>Share it with Eventos</h2>
+                      <v-btn>{{ $t("home.register") }}</v-btn>
+                  </v-flex>
+              </v-layout>
+          </v-container>
+      </v-jumbotron>
+      <v-layout>
+          <v-flex xs12 sm8 offset-sm2>
+              <v-card>
+      <v-layout row wrap>
+          <v-flex xs4 v-for="event in events" :key="event.uuid">
+              <v-card :to="{ name: 'Event', params:{ uuid: event.uuid } }">
+                  <v-card-media v-if="!event.image"
+                                class="white--text"
+                                height="200px"
+                                src="https://picsum.photos/g/400/200/"
+                  >
+                      <v-container fill-height fluid>
+                          <v-layout fill-height>
+                              <v-flex xs12 align-end flexbox>
+                                  <span class="headline black--text">{{ event.title }}</span>
+                              </v-flex>
+                          </v-layout>
+                      </v-container>
+                  </v-card-media>
+                  <v-card-title primary-title>
+                      <div>
+                          <span class="grey--text">{{ event.begins_on | formatDate }}</span><br>
+                          <router-link :to="{name: 'Account', params: { name: event.organizer.username } }">
+                              <v-avatar size="25px">
+                                  <img class="img-circle elevation-7 mb-1"
+                                       :src="event.organizer.avatar"
+                                  >
+                              </v-avatar>
+                          </router-link>
+                          <span v-if="event.organizer">Organisé par {{ event.organizer.display_name }}</span>
+                      </div>
+                  </v-card-title>
+              </v-card>
+          </v-flex>
+      </v-layout>
+              </v-card>
+          </v-flex>
+      </v-layout>
     <v-layout row>
       <v-flex xs6>
         <v-btn large @click="geoLocalize"><v-icon>my_location</v-icon>Me géolocaliser</v-btn>
@@ -36,6 +85,7 @@ export default {
   name: 'Home',
   data() {
     return {
+      gradient: 'to top right, rgba(63,81,181, .7), rgba(25,32,72, .7)',
       user: null,
       searchTerm: null,
       location_field: {
@@ -43,10 +93,11 @@ export default {
         search: null,
       },
       locations: [],
+      events: [],
     };
   },
-  mounted() {
-    // this.fetchLocations();
+  created() {
+    this.fetchData();
   },
   computed: {
     displayed_name: function() {
@@ -61,6 +112,14 @@ export default {
           this.locations = response;
         });
     },
+    fetchData() {
+      eventFetch('/events', this.$store)
+        .then(response => response.json())
+        .then((response) => {
+          this.loading = false;
+          this.events = response.data;
+        });
+    },
     geoLocalize() {
       const router = this.$router;
       if (sessionStorage.getItem('City')) {
@@ -85,6 +144,9 @@ export default {
       sessionStorage.setItem('City', geohash);
       this.$router.push({name: 'EventList', params: {location: geohash}});
     },
+    viewEvent(event) {
+      this.$router.push({ name: 'Event', params: { uuid: event.uuid } })
+    },
   },
 };
 </script>

js/src/components/NavBar.vue

@@ -9,7 +9,7 @@
     <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
       <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
       <router-link :to="{ name: 'Home' }">
-        Libre-Event
+        Eventos
       </router-link>
     </v-toolbar-title>
     <v-select