hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Front-end stuff

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2018-05-19 10:19:21 +02:00
parent cf0cbc8bde
commit e47ff97ac6
30 changed files with 435 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
js/src/components/Account/Account.vue
View File

@@ -10,7 +10,7 @@
<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.account.id === account.id">
<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>
@@ -33,9 +33,9 @@
<v-container fluid grid-list-lg>
<v-layout row>
<v-flex xs7>
<div class="headline">{{ account.display_name }}</div>
<div><span class="subheading">@{{ account.username }}</span><span v-if="account.server">@{{ account.server.address }}</span></div>
<v-card-text v-if="account.description" v-html="account.description"></v-card-text>
<div class="headline">{{ actor.display_name }}</div>
<div><span class="subheading">@{{ actor.username }}</span><span v-if="actor.server">@{{ actor.server.address }}</span></div>
<v-card-text v-if="actor.description" v-html="actor.description"></v-card-text>
</v-flex>
</v-layout>
</v-container>
@@ -74,10 +74,10 @@
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-container fluid grid-list-md v-if="account.participatingEvents && account.participatingEvents.length > 0">
<v-container fluid grid-list-md v-if="actor.participatingEvents && actor.participatingEvents.length > 0">
<v-subheader>Participated at</v-subheader>
<v-layout row wrap>
<v-flex v-for="event in account.participatingEvents" :key="event.id">
<v-flex v-for="event in actor.participatingEvents" :key="event.id">
<v-card>
<v-card-media
class="black--text"
@@ -115,10 +115,10 @@
</v-flex>
</v-layout>
</v-container>
<v-container fluid grid-list-md v-if="account.organizingEvents && account.organizingEvents.length > 0">
<v-container fluid grid-list-md v-if="actor.organizingEvents && actor.organizingEvents.length > 0">
<v-subheader>Organized events</v-subheader>
<v-layout row wrap>
<v-flex v-for="event in account.organizingEvents" :key="event.id">
<v-flex v-for="event in actor.organizingEvents" :key="event.id">
<v-card>
<v-card-media
class="black--text"
@@ -169,11 +169,16 @@ export default {
name: 'Account',
data() {
return {
account: null,
loading: true,
actor: null,
loading: true,
}
},
props: ['id'],
props: {
name: {
type: String,
required: true,
}
},
mounted() {
this.fetchData();
},
@@ -183,12 +188,12 @@ export default {
},
methods: {
fetchData() {
eventFetch(`/accounts/${this.id}`, this.$store)
eventFetch(`/actors/${this.name}`, this.$store)
.then(response => response.json())
.then((response) => {
this.account = response.data;
this.actor = response.data;
this.loading = false;
console.log(this.account);
console.log(this.actor);
})
}
}

377
js/src/components/Event/Create.vue
View File

@@ -1,195 +1,201 @@
<template>
<v-container fluid grid-list-md>
<v-container fluid grid-list-sm>
<h3>Create a new event</h3>
<v-form>
<v-stepper v-model="e1" vertical>
<v-stepper-step step="1" :complete="e1 > 1">Basic Informations
<small>Title and description</small>
</v-stepper-step>
<v-stepper-content step="1">
<v-layout row wrap>
<v-flex xs12>
<v-text-field
label="Title"
v-model="event.title"
:counter="100"
required
></v-text-field>
</v-flex>
<v-flex md6>
<v-stepper v-model="e1">
<v-stepper-header>
<v-stepper-step step="1" :complete="e1 > 1" editable>Basic Informations
<small>Title and description</small>
</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="2" :complete="e1 > 2" editable>Date and place</v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3" :complete="e1 > 3">Extra informations</v-stepper-step>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content step="1">
<v-layout row wrap>
<v-flex xs12>
<v-text-field
label="Description"
v-model="event.description"
multiLine
label="Title"
v-model="event.title"
:counter="100"
required
></v-text-field>
</v-flex>
<v-flex md6>
<vue-markdown class="markdown-render"
:watches="['show','html','breaks','linkify','emoji','typographer','toc']"
:source="event.description"
:show="true" :html="false" :breaks="true" :linkify="true"
:emoji="true" :typographer="true" :toc="false"
></vue-markdown>
</v-flex>
<v-flex md12>
<v-select
v-bind:items="categories"
v-model="event.category"
item-text="title"
item-value="@id"
label="Categories"
single-line
bottom
></v-select>
</v-flex>
<v-flex md12>
<!--<v-text-field
v-model="tagsToSend"
label="Tags"
></v-text-field>-->
<v-select
v-model="tagsToSend"
label="Tags"
chips
tags
:items="tagsFetched"
></v-select>
</v-flex>
</v-layout>
<v-btn color="primary" @click.native="e1 = 2">Next</v-btn>
</v-stepper-content>
<v-stepper-step step="2" :complete="e1 > 2">Date and place</v-stepper-step>
<v-stepper-content step="2">
Event starts at:
<v-text-field type="datetime-local" v-model="event.begins_on"></v-text-field>
<!--<v-layout row wrap>
</v-flex>
<v-flex md6>
<v-dialog
persistent
v-model="modals.beginning.date"
lazy
full-width
>
<v-text-field
slot="activator"
label="Beginning of the event date"
v-model="event.startDate.date"
prepend-icon="event"
readonly
></v-text-field>
<v-date-picker v-model="event.startDate.date" scrollable dateFormat="val => new Date(val).">
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
<v-btn flat primary @click.native="save()">Save</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-dialog>
<v-text-field
label="Description"
v-model="event.description"
multiLine
required
></v-text-field>
</v-flex>
<v-flex md6>
<v-dialog
persistent
v-model="modals.beginning.time"
lazy
>
<v-text-field
slot="activator"
label="Beginning of the event time"
v-model="event.startDate.time"
prepend-icon="access_time"
readonly
></v-text-field>
<v-time-picker v-model="event.startDate.time" actions format="24h">
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
<v-btn flat primary @click.native="save()">Save</v-btn>
</v-card-actions>
</template>
</v-time-picker>
</v-dialog>
<vue-markdown class="markdown-render"
:watches="['show','html','breaks','linkify','emoji','typographer','toc']"
:source="event.description"
:show="true" :html="false" :breaks="true" :linkify="true"
:emoji="true" :typographer="true" :toc="false"
></vue-markdown>
</v-flex>
</v-layout>-->
Event ends at:
<v-text-field type="datetime-local" v-model="event.ends_on"></v-text-field>
<!--<v-layout row wrap>
<v-flex md6>
<v-dialog
persistent
v-model="modals.end.date"
lazy
full-width
>
<v-text-field
slot="activator"
label="End of the event date"
v-model="event.endDate.date"
prepend-icon="event"
readonly
></v-text-field>
<v-date-picker v-model="event.endDate.date" scrollable >
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
<v-btn flat primary @click.native="save()">Save</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-dialog>
</v-flex>
<v-flex md6>
<v-dialog
persistent
v-model="modals.end.time"
lazy
>
<v-text-field
slot="activator"
label="End of the event time"
v-model="event.endDate.time"
prepend-icon="access_time"
readonly
></v-text-field>
<v-time-picker v-model="event.endDate.time" format="24h" actions >
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
<v-btn flat primary @click.native="save()">Save</v-btn>
</v-card-actions>
</template>
</v-time-picker>
</v-dialog>
</v-flex>
</v-layout>-->
<v-flex md12>
<v-select
v-bind:items="categories"
v-model="event.category"
item-text="title"
item-value="@id"
label="Categories"
single-line
bottom
></v-select>
</v-flex>
<v-flex md12>
<!--<v-text-field
v-model="tagsToSend"
label="Tags"
></v-text-field>-->
<v-select
v-model="tagsToSend"
label="Tags"
chips
tags
:items="tagsFetched"
></v-select>
</v-flex>
</v-layout>
<v-btn color="primary" @click.native="e1 = 2">Next</v-btn>
</v-stepper-content>
<v-stepper-content step="2">
Event starts at:
<v-text-field type="datetime-local" v-model="event.begins_on"></v-text-field>
<!--<v-layout row wrap>
<v-flex md6>
<v-dialog
persistent
v-model="modals.beginning.date"
lazy
full-width
>
<v-text-field
slot="activator"
label="Beginning of the event date"
v-model="event.startDate.date"
prepend-icon="event"
readonly
></v-text-field>
<v-date-picker v-model="event.startDate.date" scrollable dateFormat="val => new Date(val).">
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
<v-btn flat primary @click.native="save()">Save</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-dialog>
</v-flex>
<v-flex md6>
<v-dialog
persistent
v-model="modals.beginning.time"
lazy
>
<v-text-field
slot="activator"
label="Beginning of the event time"
v-model="event.startDate.time"
prepend-icon="access_time"
readonly
></v-text-field>
<v-time-picker v-model="event.startDate.time" actions format="24h">
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
<v-btn flat primary @click.native="save()">Save</v-btn>
</v-card-actions>
</template>
</v-time-picker>
</v-dialog>
</v-flex>
</v-layout>-->
Event ends at:
<v-text-field type="datetime-local" v-model="event.ends_on"></v-text-field>
<!--<v-layout row wrap>
<v-flex md6>
<v-dialog
persistent
v-model="modals.end.date"
lazy
full-width
>
<v-text-field
slot="activator"
label="End of the event date"
v-model="event.endDate.date"
prepend-icon="event"
readonly
></v-text-field>
<v-date-picker v-model="event.endDate.date" scrollable >
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
<v-btn flat primary @click.native="save()">Save</v-btn>
</v-card-actions>
</template>
</v-date-picker>
</v-dialog>
</v-flex>
<v-flex md6>
<v-dialog
persistent
v-model="modals.end.time"
lazy
>
<v-text-field
slot="activator"
label="End of the event time"
v-model="event.endDate.time"
prepend-icon="access_time"
readonly
></v-text-field>
<v-time-picker v-model="event.endDate.time" format="24h" actions >
<template scope="{ save, cancel }">
<v-card-actions>
<v-btn flat primary @click.native="cancel()">Cancel</v-btn>
<v-btn flat primary @click.native="save()">Save</v-btn>
</v-card-actions>
</template>
</v-time-picker>
</v-dialog>
</v-flex>
</v-layout>-->
<vuetify-google-autocomplete
id="map"
append-icon="search"
classname="form-control"
placeholder="Start typing"
label="Location"
enable-geolocation
types="geocode"
v-on:placechanged="getAddressData"
>
</vuetify-google-autocomplete>
<v-btn color="primary" @click.native="e1 = 3">Next</v-btn>
</v-stepper-content>
<v-stepper-step step="3" :complete="e1 > 3">Extra informations</v-stepper-step>
<v-stepper-content step="3">
<v-text-field
label="Number of seats"
v-model="event.seats"
></v-text-field>
<v-text-field
label="Price"
prefix="$"
type="float"
v-model="event.price"
></v-text-field>
</v-stepper-content>
<vuetify-google-autocomplete
id="map"
append-icon="search"
classname="form-control"
placeholder="Start typing"
label="Location"
enable-geolocation
types="geocode"
v-on:placechanged="getAddressData"
>
</vuetify-google-autocomplete>
<v-btn color="primary" @click.native="e1 = 3">Next</v-btn>
</v-stepper-content>
<v-stepper-content step="3">
<v-text-field
label="Number of seats"
v-model="event.seats"
></v-text-field>
<v-text-field
label="Price"
prefix="$"
type="float"
v-model="event.price"
></v-text-field>
</v-stepper-content>
</v-stepper-items>
</v-stepper>
</v-form>
<v-btn color="primary" @click="create">Create event</v-btn>
@@ -240,7 +246,7 @@
participants: [],
},
categories: [],
tags: [{ name: 'test' }, { name: 'montag' }],
tags: [],
tagsToSend: [],
tagsFetched: [],
};
@@ -259,13 +265,13 @@
this.event.seats = parseInt(this.event.seats, 10);
this.tagsToSend.forEach((tag) => {
this.event.tags.push({
name: tag,
title: tag,
// '@type': 'Tag',
});
});
this.event.category_id = this.event.category.id;
this.event.organizer_account_id = this.$store.state.user.account.id;
this.event.participants = [this.$store.state.user.account.id];
this.event.organizer_actor_id = this.$store.state.user.actor.id;
this.event.participants = [this.$store.state.user.actor.id];
this.event.price = parseFloat(this.event.price);
if (this.id === undefined) {
@@ -283,6 +289,7 @@
this.$router.push({name: 'Event', params: {id: data.id}});
});
}
this.event.tags = [];
},
fetchCategories() {
eventFetch('/categories', this.$store)

38
js/src/components/Event/Event.vue
View File

@@ -11,7 +11,7 @@
<v-icon>chevron_left</v-icon>
</v-btn>
<v-spacer></v-spacer>
<v-btn icon class="mr-3" v-if="event.organizer.id === $store.state.user.account.id" :to="{ name: 'EditEvent', params: {id: event.id}}">
<v-btn icon class="mr-3" v-if="event.organizer.id === $store.state.user.actor.id" :to="{ name: 'EditEvent', params: {id: event.id}}">
<v-icon>edit</v-icon>
</v-btn>
<v-menu bottom left>
@@ -22,7 +22,7 @@
<v-list-tile @click="downloadIcsEvent()">
<v-list-tile-title>Download</v-list-tile-title>
</v-list-tile>
<v-list-tile @click="deleteEvent()" v-if="$store.state.user.account.id === event.organizer.id">
<v-list-tile @click="deleteEvent()" v-if="$store.state.user.actor.id === event.organizer.id">
<v-list-tile-title>Delete</v-list-tile-title>
</v-list-tile>
</v-list>
@@ -54,8 +54,8 @@
</router-link>
Organisateur <span>{{ event.organizer.username }}</span>
</v-flex>
<v-flex xs2 v-for="account in event.participants" :key="account.id">
<router-link :to="{name: 'Account', params: {'id': account.id}}">
<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"
@@ -67,13 +67,13 @@
>
</v-avatar>
</router-link>
<span>{{ account.username }}</span>
<span>{{ actor.username }}</span>
</v-flex>
</v-layout>
</v-container>
<v-card-actions>
<button v-if="!event.participants.map(participant => participant.id).includes($store.state.user.account.id)" @click="joinEvent" class="btn btn-primary">Join</button>
<button v-if="event.participants.map(participant => participant.id).includes($store.state.user.account.id)" @click="leaveEvent" class="btn btn-primary">Leave</button>
<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>
@@ -97,7 +97,8 @@
loading: true,
error: false,
event: {
id: this.id,
name: this.name,
slug: this.slug,
title: '',
description: '',
organizer: {
@@ -111,11 +112,11 @@
methods: {
deleteEvent() {
const router = this.$router;
eventFetch(`/events/${this.id}`, this.$store, { method: 'DELETE' })
eventFetch(`/events/${this.name}/${this.slug}`, this.$store, { method: 'DELETE' })
.then(() => router.push({'name': 'EventList'}));
},
fetchData() {
eventFetch(`/events/${this.id}`, this.$store)
eventFetch(`/events/${this.name}/${this.slug}`, this.$store)
.then(response => response.json())
.then((data) => {
this.loading = false;
@@ -129,21 +130,21 @@
});
},
joinEvent() {
eventFetch(`/events/${this.id}/join`, this.$store)
eventFetch(`/events/${this.name}/${this.slug}/join`, this.$store)
.then(response => response.json())
.then((data) => {
console.log(data);
});
},
leaveEvent() {
eventFetch(`/events/${this.id}/leave`, this.$store)
eventFetch(`/events/${this.name}/${this.slug}/leave`, this.$store)
.then(response => response.json())
.then((data) => {
console.log(data);
});
},
downloadIcsEvent() {
eventFetch('/events/' + this.event.id + '/ics', this.$store, {responseType: 'arraybuffer'})
eventFetch(`/events/${this.name}/${this.slug}/ics`, this.$store, {responseType: 'arraybuffer'})
.then((response) => response.text())
.then(response => {
const blob = new Blob([response],{type: 'text/calendar'});
@@ -156,7 +157,16 @@
})
},
},
props: ['id'],
props: {
name: {
type: String,
required: true,
},
slug: {
type: String,
required: true
},
},
created() {
this.fetchData();
},

16
js/src/components/Event/EventList.vue
View File

@@ -28,12 +28,12 @@
<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: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></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-actions>
<v-btn flat color="orange" @click="downloadIcsEvent(event)">Share</v-btn>
<v-btn flat color="orange" @click="viewEvent(event.id)">Explore</v-btn>
<v-btn flat color="red" @click="deleteEvent(event.id)">Delete</v-btn>
<v-btn flat color="orange" @click="viewEvent(event)">Explore</v-btn>
<v-btn flat color="red" @click="deleteEvent(event)">Delete</v-btn>
</v-card-actions>
</v-card>
</v-flex>
@@ -98,16 +98,16 @@
this.events = response.data;
});
},
deleteEvent(id) {
deleteEvent(event) {
const router = this.$router;
eventFetch('/events/' + id, this.$store, {'method': 'DELETE'})
eventFetch(`/events/${event.organizer.username}/${event.slug}`, this.$store, {'method': 'DELETE'})
.then(() => router.push('/events'));
},
viewEvent(id) {
this.$router.push({ name: 'Event', params: { id } })
viewEvent(event) {
this.$router.push({ name: 'Event', params: { name: event.organizer.username, slug: event.slug } })
},
downloadIcsEvent(event) {
eventFetch('/events/' + event.id + '/export', this.$store, {responseType: 'arraybuffer'})
eventFetch(`/events/${event.organizer.username}/${event.slug}/export`, this.$store, {responseType: 'arraybuffer'})
.then((response) => response.text())
.then(response => {
const blob = new Blob([response],{type: 'text/calendar'});

4
js/src/components/Group/Group.vue
View File

@@ -73,7 +73,7 @@
<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.account.id}}">
<router-link :to="{name: 'Account', params: {'id': member.actor.id}}">
<v-badge overlap>
<span slot="badge" v-if="member.role == 3"><v-icon>stars</v-icon></span>
<v-avatar size="75px">
@@ -88,7 +88,7 @@
</v-avatar>
</v-badge>
</router-link>
<span>{{ groupAccount.account.username }}</span>
<span>{{ groupAccount.actor.username }}</span>
</v-flex>
</v-layout>
</v-container>

2
js/src/components/Home.vue
View File

@@ -50,7 +50,7 @@ export default {
},
computed: {
displayed_name: function() {
return this.$store.state.user.account.display_name === null ? this.$store.state.user.account.username : this.$store.state.user.account.display_name
return this.$store.state.user.actor.display_name === null ? this.$store.state.user.actor.username : this.$store.state.user.actor.display_name
},
},
methods: {

4
js/src/components/NavBar.vue
View File

@@ -58,7 +58,7 @@
</v-card-actions>
</v-card>
</v-menu>
<v-btn flat @click="$router.push({name: 'Account', params: {'id': getUser().account.id}})" v-if="$store.state.user">{{ this.displayed_name }}</v-btn>
<v-btn flat @click="$router.push({name: 'Account', params: {'id': getUser().actor.id}})" v-if="$store.state.user">{{ this.displayed_name }}</v-btn>
</v-toolbar>
</template>
@@ -97,7 +97,7 @@
},
computed: {
displayed_name: function() {
return this.$store.state.user.account.display_name === null ? this.$store.state.user.account.username : this.$store.state.user.account.display_name
return this.$store.state.user.actor.display_name === null ? this.$store.state.user.actor.username : this.$store.state.user.actor.display_name
},
},
methods: {