Chapril/mobilizon.chapril.org-mobilizon
Chapril
/
mobilizon.chapril.org-mobilizon
24
0
Fork 0
Code Issues Pull Requests Releases Activity

All components now use typescript

This commit is contained in:
Chocobozzz 2018-12-21 17:10:39 +01:00
parent b409a5583d
commit b1aa589bc7
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
30 changed files with 1347 additions and 2247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

918
js/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
js/package.json
View File

@ -19,7 +19,7 @@
"graphql-tag": "^2.9.0", "graphql-tag": "^2.9.0",
"material-design-icons": "^3.0.1", "material-design-icons": "^3.0.1",
"moment": "^2.22.2", "moment": "^2.22.2",
"ngeohash": "^0.6.0", "ngeohash": "^0.6.3",
"register-service-worker": "^1.4.1", "register-service-worker": "^1.4.1",
"vue": "^2.5.17", "vue": "^2.5.17",
"vue-apollo": "^3.0.0-beta.26", "vue-apollo": "^3.0.0-beta.26",
@ -38,12 +38,10 @@
"@types/mocha": "^5.2.4", "@types/mocha": "^5.2.4",
"@vue/cli-plugin-babel": "^3.1.1", "@vue/cli-plugin-babel": "^3.1.1",
"@vue/cli-plugin-e2e-nightwatch": "^3.1.1", "@vue/cli-plugin-e2e-nightwatch": "^3.1.1",
"@vue/cli-plugin-eslint": "^3.1.5",
"@vue/cli-plugin-pwa": "^3.1.2", "@vue/cli-plugin-pwa": "^3.1.2",
"@vue/cli-plugin-typescript": "^3.2.0", "@vue/cli-plugin-typescript": "^3.2.0",
"@vue/cli-plugin-unit-mocha": "^3.1.1", "@vue/cli-plugin-unit-mocha": "^3.1.1",
"@vue/cli-service": "^3.1.4", "@vue/cli-service": "^3.1.4",
"@vue/eslint-config-airbnb": "^3.0.5",
"@vue/eslint-config-typescript": "^3.1.0", "@vue/eslint-config-typescript": "^3.1.0",
"@vue/test-utils": "^1.0.0-beta.26", "@vue/test-utils": "^1.0.0-beta.26",
"chai": "^4.2.0", "chai": "^4.2.0",

104
js/src/App.vue
View File

@ -150,64 +150,62 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import NavBar from '@/components/NavBar.vue'; import NavBar from '@/components/NavBar.vue';
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants'; import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
@Component({ @Component({
components: { components: {
NavBar NavBar,
} },
}) })
export default class App extends Vue { export default class App extends Vue {
drawer = false drawer = false;
fab = false fab = false;
user = localStorage.getItem(AUTH_USER_ID) user = localStorage.getItem(AUTH_USER_ID);
items = [ items = [
{ {
icon: 'poll', text: 'Events', route: 'EventList', role: null icon: 'poll', text: 'Events', route: 'EventList', role: null,
}, },
{ {
icon: 'group', text: 'Groups', route: 'GroupList', role: null icon: 'group', text: 'Groups', route: 'GroupList', role: null,
}, },
{ {
icon: 'content_copy', text: 'Categories', route: 'CategoryList', role: 'ROLE_ADMIN' icon: 'content_copy', text: 'Categories', route: 'CategoryList', role: 'ROLE_ADMIN',
}, },
{ icon: 'settings', text: 'Settings', role: 'ROLE_USER' }, { icon: 'settings', text: 'Settings', role: 'ROLE_USER' },
{ icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' }, { icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' },
{ icon: 'help', text: 'Help', role: null }, { icon: 'help', text: 'Help', role: null },
{ icon: 'phonelink', text: 'App downloads', role: null } { icon: 'phonelink', text: 'App downloads', role: null },
] ];
error = { error = {
timeout: 3000, timeout: 3000,
show: false, show: false,
text: '' text: '',
} };
show_new_event_button = false actor = localStorage.getItem(AUTH_USER_ACTOR);
actor = localStorage.getItem(AUTH_USER_ACTOR)
get displayed_name () { get displayed_name () {
// FIXME: load actor // FIXME: load actor
return 'no implemented' return 'no implemented';
// return this.actor.display_name === null ? this.actor.username : this.actor.display_name // return this.actor.display_name === null ? this.actor.username : this.actor.display_name
}
showMenuItem (elem) {
// FIXME: load actor
return false
// return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true
}
getUser () {
return this.user === undefined ? false : this.user
}
toggleDrawer () {
this.drawer = !this.drawer
}
} }
showMenuItem (elem) {
// FIXME: load actor
return false;
// return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true
}
getUser () {
return this.user === undefined ? false : this.user;
}
toggleDrawer () {
this.drawer = !this.drawer;
}
}
</script> </script>
<style> <style>

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

@ -31,12 +31,12 @@
<div class="text-xs-center"> <div class="text-xs-center">
<v-avatar size="125px"> <v-avatar size="125px">
<img v-if="!actor.avatarUrl" <img v-if="!actor.avatarUrl"
class="img-circle elevation-7 mb-1" class="img-circle elevation-7 mb-1"
src="https://picsum.photos/125/125/" src="https://picsum.photos/125/125/"
> >
<img v-else <img v-else
class="img-circle elevation-7 mb-1" class="img-circle elevation-7 mb-1"
:src="actor.avatarUrl" :src="actor.avatarUrl"
> >
</v-avatar> </v-avatar>
</div> </div>
@ -44,7 +44,8 @@
<v-layout row> <v-layout row>
<v-flex xs7> <v-flex xs7>
<div class="headline">{{ actor.name }}</div> <div class="headline">{{ actor.name }}</div>
<div><span class="subheading">@{{ actor.preferredUsername }}<span v-if="actor.domain">@{{ actor.domain }}</span></span></div> <div><span class="subheading">@{{ actor.preferredUsername }}<span v-if="actor.domain">@{{ actor.domain }}</span></span>
</div>
<v-card-text v-if="actor.description" v-html="actor.description"></v-card-text> <v-card-text v-if="actor.description" v-html="actor.description"></v-card-text>
</v-flex> </v-flex>
</v-layout> </v-layout>
@ -107,7 +108,9 @@
<div> <div>
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br> <span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
<p>{{ event.description }}</p> <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> <p v-if="event.organizer">Organisé par
<router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link>
</p>
</div> </div>
</v-card-title> </v-card-title>
<v-card-actions> <v-card-actions>
@ -143,7 +146,7 @@
<span class="grey--text" v-html="nl2br(event.description)"></span> <span class="grey--text" v-html="nl2br(event.description)"></span>
</div> </div>
</v-card-title> </v-card-title>
<!-- <v-card-title> <!-- <v-card-title>
<div> <div>
<span class="grey--text" v-if="event.addressType === 'physical'">{{ event.startDate }} à {{ event.location }}</span><br> <span class="grey--text" v-if="event.addressType === 'physical'">{{ event.startDate }} à {{ event.location }}</span><br>
@ -171,46 +174,40 @@
</v-layout> </v-layout>
</template> </template>
<script> <script lang="ts">
import { FETCH_ACTOR } from '@/graphql/actor'; import { FETCH_ACTOR } from '@/graphql/actor';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
export default { @Component({
name: 'Account', apollo: {
data() { actor: {
return { query: FETCH_ACTOR,
actor: null, variables() {
}; return {
}, name: this.$route.params.name,
props: { };
name: { },
type: String,
required: true,
},
},
apollo: {
actor: {
query: FETCH_ACTOR,
variables() {
return {
name: this.$route.params.name,
};
}, },
}, },
}, })
created() { export default class Account extends Vue {
}, @Prop({ type: String, required: true }) name!: string;
watch: {
actor = null;
// call again the method if the route changes // call again the method if the route changes
$route: 'fetchData', @Watch('$route')
}, onRouteChange() {
methods: { // this.fetchData()
}
logoutUser() { logoutUser() {
// TODO : implement logout // TODO : implement logout
this.$router.push({ name: 'Home' }); this.$router.push({ name: 'Home' });
}, }
nl2br: function(text) {
nl2br(text) {
return text.replace(/(?:\r\n|\r|\n)/g, '<br>'); return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
} }
}, };
};
</script> </script>

140
js/src/components/Account/Identities.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<v-layout row> <v-layout row>
<v-flex xs12 sm6 offset-sm3> <v-flex xs12 sm6 offset-sm3>
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular> <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
<v-card v-if="!loading"> <v-card v-if="!loading">
<v-toolbar dark color="primary"> <v-toolbar dark color="primary">
<v-toolbar-title>Identities</v-toolbar-title> <v-toolbar-title>Identities</v-toolbar-title>
</v-toolbar> </v-toolbar>
<v-card-text> <v-card-text>
<v-list two-line> <v-list two-line>
<v-list-tile <v-list-tile
@ -31,22 +31,22 @@
<v-divider v-if="showForm"></v-divider> <v-divider v-if="showForm"></v-divider>
<v-form v-if="showForm"> <v-form v-if="showForm">
<v-text-field <v-text-field
label="Username" label="Username"
required required
type="text" type="text"
v-model="newActor.preferred_username" v-model="newActor.preferred_username"
:rules="[rules.required]" :rules="[rules.required]"
:error="this.state.username.status" :error="this.state.username.status"
:error-messages="this.state.username.msg" :error-messages="this.state.username.msg"
:suffix="this.host()" :suffix="this.host()"
hint="You will be able to create more identities once registered" hint="You will be able to create more identities once registered"
persistent-hint persistent-hint
> >
</v-text-field> </v-text-field>
<v-textarea <v-textarea
name="input-7-1" name="input-7-1"
label="Profile description" label="Profile description"
hint="Will be displayed publicly on your profile" hint="Will be displayed publicly on your profile"
></v-textarea> ></v-textarea>
</v-form> </v-form>
<v-btn <v-btn
@ -57,73 +57,77 @@
right right
fab fab
@click="toggleForm()" @click="toggleForm()"
> >
<v-icon>{{ showForm ? 'check' : 'add' }}</v-icon> <v-icon>{{ showForm ? 'check' : 'add' }}</v-icon>
</v-btn> </v-btn>
</v-card-text> </v-card-text>
</v-card> </v-card>
</v-flex> </v-flex>
</v-layout> </v-layout>
</template> </template>
<script> <script lang="ts">
export default { import { Component, Vue } from 'vue-property-decorator';
name: 'Identities',
data() { @Component
return { export default class Identities extends Vue {
actors: [], actors = [];
newActor: { newActor = {
preferred_username: '', preferred_username: '',
summary: '', summary: '',
}, };
loading: true, loading = true;
showForm: false, showForm = false;
rules: { rules = {
required: value => !!value || 'Required.', required: value => !!value || 'Required.',
}, };
state: { state = {
username: { username: {
status: false, status: false,
msg: [], msg: [],
},
}, },
}; };
},
created() { created() {
this.fetchData(); this.fetchData();
}, }
methods: {
fetchData() { fetchData() {
eventFetch('/user', this.$store) // Implements eventFetch
.then(response => response.json()) // eventFetch('/user', this.$store)
.then((response) => { // .then(response => response.json())
this.actors = response.data.actors; // .then((response) => {
this.loading = false; // this.actors = response.data.actors;
}); // this.loading = false;
}, // });
}
sendData() { sendData() {
this.loading = true; this.loading = true;
this.showForm = false; this.showForm = false;
eventFetch('/actors', this.$store, {
method: 'POST', // Implements eventFetch
body: JSON.stringify({ actor: this.newActor }), // eventFetch('/actors', this.$store, {
}) // method: 'POST',
.then(response => response.json()) // body: JSON.stringify({ actor: this.newActor }),
.then((response) => { // })
this.actors.push(response.data); // .then(response => response.json())
this.loading = false; // .then((response) => {
}); // this.actors.push(response.data);
}, // this.loading = false;
// });
}
toggleForm() { toggleForm() {
if (this.showForm === true) { if (this.showForm === true) {
this.sendData(); this.sendData();
} else { } else {
this.showForm = true; this.showForm = true;
} }
}, }
host() { host() {
return `@${window.location.host}`; return `@${window.location.host}`;
}, }
}, }
};
</script> </script>

118
js/src/components/Account/Login.vue
View File

@ -58,90 +58,84 @@
</v-container> </v-container>
</template> </template>
<script> <script lang="ts">
import Gravatar from 'vue-gravatar'; import Gravatar from 'vue-gravatar';
import RegisterAvatar from './RegisterAvatar'; import RegisterAvatar from './RegisterAvatar.vue';
import { AUTH_TOKEN, AUTH_USER_ID, AUTH_USER_ACTOR } from '@/constants'; import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
import { LOGIN } from '@/graphql/auth'; import { Component, Prop, Vue } from 'vue-property-decorator';
import { LOGIN } from '@/graphql/auth';
export default { @Component({
props: { components: {
email: { 'v-gravatar': Gravatar,
type: String, avatar: RegisterAvatar,
required: false,
default: '',
}, },
password: { })
type: String, export default class Login extends Vue {
required: false, @Prop({ type: String, required: false, default: '' }) email!: string;
default: '', @Prop({ type: String, required: false, default: '' }) password!: string;
},
}, credentials = {
beforeCreate() { email: '',
if (this.user) { password: '',
this.$router.push('/'); };
} validationSent = false;
}, error = {
components: { show: false,
'v-gravatar': Gravatar, text: '',
avatar: RegisterAvatar, timeout: 3000,
}, field: {
mounted() { email: false,
this.credentials.email = this.email; password: false,
this.credentials.password = this.password;
},
data() {
return {
credentials: {
email: '',
password: '',
},
validationSent: false,
error: {
show: false,
text: '',
timeout: 3000,
field: {
email: false,
password: false,
},
},
rules: {
required: value => !!value || 'Required.',
email: (value) => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || 'Invalid e-mail.';
},
}, },
}; };
}, rules = {
methods: { required: value => !!value || 'Required.',
email: (value) => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || 'Invalid e-mail.';
},
};
user: any;
beforeCreate() {
if (this.user) {
this.$router.push('/');
}
}
mounted() {
this.credentials.email = this.email;
this.credentials.password = this.password;
}
loginAction(e) { loginAction(e) {
e.preventDefault(); e.preventDefault();
this.$apollo.mutate({ this.$apollo.mutate({
mutation: LOGIN, mutation: LOGIN,
variables: { variables: {
email: this.credentials.email, email: this.credentials.email,
password: this.credentials.password password: this.credentials.password,
} },
}).then((result) => { }).then((result) => {
this.saveUserData(result.data); this.saveUserData(result.data);
this.$router.push({name: 'Home'}); this.$router.push({ name: 'Home' });
}).catch((e) => { }).catch((e) => {
console.log(e); console.log(e);
this.error.show = true; this.error.show = true;
this.error.text = e.message; this.error.text = e.message;
}); });
}, }
validEmail() { validEmail() {
return this.rules.email(this.credentials.email) === true ? 'v-gravatar' : 'avatar'; return this.rules.email(this.credentials.email) === true ? 'v-gravatar' : 'avatar';
}, }
saveUserData({login: login}) {
saveUserData({ login: login }) {
localStorage.setItem(AUTH_USER_ID, login.user.id); localStorage.setItem(AUTH_USER_ID, login.user.id);
localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor)); localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor));
localStorage.setItem(AUTH_TOKEN, login.token); localStorage.setItem(AUTH_TOKEN, login.token);
} }
}, }
};
</script> </script>

126
js/src/components/Account/PasswordReset.vue
View File

@ -36,75 +36,74 @@
</v-container> </v-container>
</template> </template>
<script> <script lang="ts">
export default {
name: 'PasswordReset', import { Component, Prop, Vue } from 'vue-property-decorator';
props: {
token: { @Component
type: String, export default class PasswordReset extends Vue {
required: true, @Prop({ type: String, required: true }) token!: string;
},
}, credentials = {
computed: { password: '',
samePasswords() { password_confirmation: '',
return this.rules.password_length(this.credentials.password) === true && };
this.credentials.password === this.credentials.password_confirmation; error = {
}, show: false,
}, };
data() { state = {
return { token: {
credentials: { status: null,
password: '', msg: '',
password_confirmation: '',
}, },
error: { password: {
show: false, status: null,
msg: '',
}, },
state: { password_confirmation: {
token: { status: null,
status: null, msg: '',
msg: '',
},
password: {
status: null,
msg: '',
},
password_confirmation: {
status: null,
msg: '',
},
},
rules: {
password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
required: value => !!value || 'Required.',
password_equal: value => value === this.credentials.password || 'Passwords must be the same',
}, },
}; };
}, rules = {
methods: { password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
required: value => !!value || 'Required.',
password_equal: value => value === this.credentials.password || 'Passwords must be the same',
};
get samePasswords() {
return this.rules.password_length(this.credentials.password) === true &&
this.credentials.password === this.credentials.password_confirmation;
}
resetAction(e) { resetAction(e) {
this.resetState(); this.resetState();
e.preventDefault(); e.preventDefault();
console.log(this.token); console.log(this.token);
fetchStory('/users/password-reset/post', this.$store, { method: 'POST', body: JSON.stringify({ password: this.credentials.password, token: this.token }) }).then((data) => { // FIXME: implements fetchStory
localStorage.setItem('token', data.token); // fetchStory('/users/password-reset/post', this.$store, {
localStorage.setItem('refresh_token', data.refresh_token); // method: 'POST',
this.$store.commit('LOGIN_USER', data.account); // body: JSON.stringify({ password: this.credentials.password, token: this.token }),
this.$snotify.success(this.$t('registration.success.login', { username: data.account.username })); // }).then((data) => {
this.$router.push({ name: 'Home' }); // localStorage.setItem('token', data.token);
}, (error) => { // localStorage.setItem('refresh_token', data.refresh_token);
Promise.resolve(error).then((errormsg) => { // this.$store.commit('LOGIN_USER', data.account);
console.log('errormsg', errormsg); // this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
this.error.show = true; // this.$router.push({ name: 'Home' });
Object.entries(JSON.parse(errormsg).errors).forEach(([key, val]) => { // }, (error) => {
console.log('key', key); // Promise.resolve(error).then((errormsg) => {
console.log('val', val[0]); // console.log('errormsg', errormsg);
this.state[key] = { status: false, msg: val[0] }; // this.error.show = true;
console.log('state', this.state); // Object.entries(JSON.parse(errormsg).errors).forEach(([ key, val ]) => {
}); // console.log('key', key);
}); // console.log('val', val[ 0 ]);
}); // this.state[ key ] = { status: false, msg: val[ 0 ] };
}, // console.log('state', this.state);
// });
// });
// });
}
resetState() { resetState() {
this.state = { this.state = {
token: { token: {
@ -120,7 +119,6 @@ export default {
msg: '', msg: '',
}, },
}; };
}, }
}, };
};
</script> </script>

142
js/src/components/Account/Register.vue
View File

@ -68,8 +68,12 @@
<router-link :to="{ name: 'ResendConfirmation', params: { email }}">Didn't receive the instructions ?</router-link> <router-link :to="{ name: 'ResendConfirmation', params: { email }}">Didn't receive the instructions ?</router-link>
</v-form> </v-form>
<div v-if="validationSent"> <div v-if="validationSent">
<h2><translate>A validation email was sent to %{email}</translate></h2> <h2>
<v-alert :value="true" type="info"><translate>Before you can login, you need to click on the link inside it to validate your account</translate></v-alert> <translate>A validation email was sent to %{email}</translate>
</h2>
<v-alert :value="true" type="info">
<translate>Before you can login, you need to click on the link inside it to validate your account</translate>
</v-alert>
</div> </div>
</v-card-text> </v-card-text>
</v-card> </v-card>
@ -78,85 +82,78 @@
</v-container> </v-container>
</template> </template>
<script> <script lang="ts">
import Gravatar from 'vue-gravatar'; import Gravatar from 'vue-gravatar';
import RegisterAvatar from './RegisterAvatar'; import RegisterAvatar from './RegisterAvatar.vue';
import { CREATE_USER } from '@/graphql/user'; import { CREATE_USER } from '@/graphql/user';
import { Component, Prop, Vue } from 'vue-property-decorator';
export default { @Component({
props: { components: {
default_email: { 'v-gravatar': Gravatar,
type: String, avatar: RegisterAvatar,
required: false,
default: '',
}, },
default_password: { })
type: String, export default class Register extends Vue {
required: false, @Prop({ type: String, required: false, default: '' }) default_email!: string;
default: '', @Prop({ type: String, required: false, default: '' }) default_password!: string;
},
}, username = '';
components: { email = this.default_email;
'v-gravatar': Gravatar, password = this.default_password;
avatar: RegisterAvatar, error = {
}, show: false,
data() { };
return { showPassword = false;
username: '', validationSent = false;
email: this.default_email, state = {
password: this.default_password, email: {
error: { status: false,
show: false, msg: [],
}, },
showPassword: false, username: {
validationSent: false, status: false,
state: { msg: [],
email: {
status: false,
msg: [],
},
username: {
status: false,
msg: [],
},
password: {
status: false,
msg: [],
},
}, },
rules: { password: {
password_length: value => value.length > 6 || 'Password must be at least 6 caracters long', status: false,
required: value => !!value || 'Required.', msg: [],
email: (value) => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || 'Invalid e-mail.';
},
}, },
}; };
}, rules = {
methods: { password_length: value => value.length > 6 || 'Password must be at least 6 caracters long',
required: value => !!value || 'Required.',
email: (value) => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || 'Invalid e-mail.';
},
};
resetState() { resetState() {
this.state = { this.state = {
email: { email: {
status: false, status: false,
msg: '', msg: [],
}, },
username: { username: {
status: false, status: false,
msg: '', msg: [],
}, },
password: { password: {
status: false, status: false,
msg: '', msg: [],
}, },
}; };
}, }
host() { host() {
return `@${window.location.host}`; return `@${window.location.host}`;
}, }
validEmail() { validEmail() {
return this.rules.email(this.email) === true ? 'v-gravatar' : 'avatar'; return this.rules.email(this.email) === true ? 'v-gravatar' : 'avatar';
}, }
submit() { submit() {
this.$apollo.mutate({ this.$apollo.mutate({
mutation: CREATE_USER, mutation: CREATE_USER,
@ -171,19 +168,20 @@ export default {
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
}); });
}, }
}, };
};
</script> </script>
<style lang="scss">
.avatar-enter-active {
transition: opacity 1s ease;
}
.avatar-enter, .avatar-leave-to {
opacity: 0;
}
.avatar-leave { <style lang="scss">
display: none; .avatar-enter-active {
} transition: opacity 1s ease;
}
.avatar-enter, .avatar-leave-to {
opacity: 0;
}
.avatar-leave {
display: none;
}
</style> </style>

13
js/src/components/Account/RegisterAvatar.vue
View File

@ -1,9 +1,12 @@
<template> <template>
<img class="img-circle elevation-7 mb-1" src="@/assets/profile.svg"> <img class="img-circle elevation-7 mb-1" src="@/assets/profile.svg">
</template> </template>
<script>
export default { <script lang="ts">
name: 'RegisterAvatar', import { Component, Vue } from 'vue-property-decorator';
};
@Component
export default class RegisterAvatar extends Vue {
}
</script> </script>

85
js/src/components/Account/ResendConfirmation.vue
View File

@ -30,53 +30,48 @@
</v-container> </v-container>
</template> </template>
<script> <script lang="ts">
export default { import { Component, Prop, Vue } from 'vue-property-decorator';
name: 'ResendConfirmation',
props: { @Component
email: { export default class ResendConfirmation extends Vue {
type: String, @Prop({ type: String, required: false, default: '' }) email!: string;
required: false,
default: '', credentials = {
}, email: '',
}, };
data() { validationSent = false;
return { error = false;
credentials: { state = {
email: '', email: {
}, status: null,
validationSent: false, msg: '',
error: false,
state: {
email: {
status: null,
msg: '',
},
},
rules: {
required: value => !!value || 'Required.',
email: (value) => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || 'Invalid e-mail.';
},
}, },
}; };
}, rules = {
mounted() { required: value => !!value || 'Required.',
this.credentials.email = this.email; email: (value) => {
}, const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
methods: { return pattern.test(value) || 'Invalid e-mail.';
},
};
mounted() {
this.credentials.email = this.email;
}
resendConfirmationAction(e) { resendConfirmationAction(e) {
e.preventDefault(); e.preventDefault();
fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
this.validationSent = true; // FIXME: implement fetchStory
}).catch((err) => { // fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
Promise.resolve(err).then(() => { // this.validationSent = true;
this.error = true; // }).catch((err) => {
this.validationSent = true; // Promise.resolve(err).then(() => {
}); // this.error = true;
}); // this.validationSent = true;
}, // });
}, // });
}; }
};
</script> </script>

90
js/src/components/Account/SendPasswordReset.vue
View File

@ -30,54 +30,51 @@
</v-container> </v-container>
</template> </template>
<script> <script lang="ts">
export default { import { Component, Prop, Vue } from 'vue-property-decorator';
name: 'SendPasswordReset',
props: { @Component
email: { export default class SendPasswordReset extends Vue {
type: String, @Prop({ type: String, required: false, default: '' }) email!: string;
required: false,
default: '', credentials = {
}, email: '',
}, };
mounted() { validationSent = false;
this.credentials.email = this.email; error = false;
}, state = {
data() { email: {
return { status: null,
credentials: { msg: '',
email: '',
},
validationSent: false,
error: false,
state: {
email: {
status: null,
msg: '',
},
},
rules: {
required: value => !!value || 'Required.',
email: (value) => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || 'Invalid e-mail.';
},
}, },
}; };
},
methods: { rules = {
required: value => !!value || 'Required.',
email: (value) => {
const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return pattern.test(value) || 'Invalid e-mail.';
},
};
mounted() {
this.credentials.email = this.email;
}
resendConfirmationAction(e) { resendConfirmationAction(e) {
e.preventDefault(); e.preventDefault();
fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => { // FIXME: implement fetchStory
this.error = false; // fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
this.validationSent = true; // this.error = false;
}).catch((err) => { // this.validationSent = true;
Promise.resolve(err).then((data) => { // }).catch((err) => {
this.error = true; // Promise.resolve(err).then((data) => {
this.state.email = { status: false, msg: data.errors }; // this.error = true;
}); // this.state.email = { status: false, msg: data.errors };
}); // });
}, // });
}
resetState() { resetState() {
this.state = { this.state = {
email: { email: {
@ -85,7 +82,6 @@ export default {
msg: '', msg: '',
}, },
}; };
}, }
}, };
};
</script> </script>

58
js/src/components/Account/Validate.vue
View File

@ -1,36 +1,37 @@
<template> <template>
<v-container> <v-container>
<h1 v-if="loading"><translate>Your account is being validated</translate></h1> <h1 v-if="loading">
<translate>Your account is being validated</translate>
</h1>
<div v-else> <div v-else>
<div v-if="failed"> <div v-if="failed">
<v-alert :value="true" variant="danger"><translate>Error while validating account</translate></v-alert> <v-alert :value="true" variant="danger">
<translate>Error while validating account</translate>
</v-alert>
</div> </div>
<h1 v-else><translate>Your account has been validated</translate></h1> <h1 v-else>
<translate>Your account has been validated</translate>
</h1>
</div> </div>
</v-container> </v-container>
</template> </template>
<script> <script lang="ts">
import { VALIDATE_USER } from '@/graphql/user'; import { VALIDATE_USER } from '@/graphql/user';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
@Component
export default class Validate extends Vue {
@Prop({ type: String, required: true }) token!: string;
loading = true;
failed = false;
created() {
this.validateAction();
}
export default {
name: 'Validate',
data() {
return {
loading: true,
failed: false,
};
},
props: {
token: {
type: String,
required: true,
},
},
created() {
this.validateAction();
},
methods: {
validateAction() { validateAction() {
this.$apollo.mutate({ this.$apollo.mutate({
mutation: VALIDATE_USER, mutation: VALIDATE_USER,
@ -41,18 +42,19 @@ export default {
this.loading = false; this.loading = false;
console.log(data); console.log(data);
this.saveUserData(data.data); this.saveUserData(data.data);
this.$router.push({name: 'Home'}); this.$router.push({ name: 'Home' });
}).catch((error) => { }).catch((error) => {
this.loading = false; this.loading = false;
console.log(error); console.log(error);
this.failed = true; this.failed = true;
}); });
}, }
saveUserData({validateUser: login}) {
saveUserData({ validateUser: login }) {
localStorage.setItem(AUTH_USER_ID, login.user.id); localStorage.setItem(AUTH_USER_ID, login.user.id);
localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor)); localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor));
localStorage.setItem(AUTH_TOKEN, login.token); localStorage.setItem(AUTH_TOKEN, login.token);
} }
},
}; };
</script> </script>

62
js/src/components/Category/Create.vue
View File

@ -4,7 +4,9 @@
<v-flex xs12 sm8 md4> <v-flex xs12 sm8 md4>
<v-card class="elevation-12"> <v-card class="elevation-12">
<v-toolbar dark color="primary"> <v-toolbar dark color="primary">
<v-toolbar-title><translate>Create a new category</translate></v-toolbar-title> <v-toolbar-title>
<translate>Create a new category</translate>
</v-toolbar-title>
</v-toolbar> </v-toolbar>
<v-card-text> <v-card-text>
<v-form> <v-form>
@ -29,7 +31,9 @@
@change="onFilePicked" @change="onFilePicked"
> >
</v-flex> </v-flex>
<v-btn color="primary" @click="create"><translate>Create category</translate></v-btn> <v-btn color="primary" @click="create">
<translate>Create category</translate>
</v-btn>
</v-form> </v-form>
</v-card-text> </v-card-text>
</v-card> </v-card>
@ -38,50 +42,48 @@
</v-container> </v-container>
</template> </template>
<script> <script lang="ts">
import { UPLOAD_PICTURE } from '@/graphql/upload'; import { CREATE_CATEGORY } from '@/graphql/category';
import { CREATE_CATEGORY } from '@/graphql/category'; import { Component, Vue } from 'vue-property-decorator';
export default { @Component
name: 'create-category', export default class CreateCategory extends Vue {
data() { title = '';
return { description = '';
title: '', image = {
description: '', url: '',
image: { name: '',
url: '', file: '',
name: '',
file: '',
},
}; };
},
methods: {
create() { create() {
this.$apollo.mutate({ this.$apollo.mutate({
mutation: CREATE_CATEGORY, mutation: CREATE_CATEGORY,
variables: { variables: {
title: this.title, title: this.title,
description: this.description, description: this.description,
picture: this.$refs.image.files[0], picture: (this.$refs['image'] as any).files[ 0 ],
} },
}).then((data) => { }).then((data) => {
console.log(data); console.log(data);
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
}); });
}, }
pickFile () {
this.$refs.image.click () pickFile() {
}, (this.$refs['image'] as any).click();
}
onFilePicked(e) { onFilePicked(e) {
const files = e.target.files; const files = e.target.files;
if(files[0] === undefined || files[0].name.lastIndexOf('.') <= 0) { if (files[ 0 ] === undefined || files[ 0 ].name.lastIndexOf('.') <= 0) {
console.error("File is incorrect") console.error('File is incorrect');
} }
this.image.name = files[0].name; this.image.name = files[ 0 ].name;
}, }
},
}; };
</script> </script>
<style> <style>

57
js/src/components/Category/List.vue
View File

@ -15,8 +15,12 @@
</div> </div>
</v-card-title> </v-card-title>
<v-card-actions> <v-card-actions>
<v-btn flat class="orange--text"><translate>Explore</translate></v-btn> <v-btn flat class="orange--text">
<v-btn flat class="red--text" v-on:click="deleteCategory(category.id)"><translate>Delete</translate></v-btn> <translate>Explore</translate>
</v-btn>
<v-btn flat class="red--text" v-on:click="deleteCategory(category.id)">
<translate>Delete</translate>
</v-btn>
</v-card-actions> </v-card-actions>
</v-card> </v-card>
</v-flex> </v-flex>
@ -30,37 +34,34 @@
</v-container> </v-container>
</template> </template>
<script> <script lang="ts">
import { FETCH_CATEGORIES } from '@/graphql/category'; import { FETCH_CATEGORIES } from '@/graphql/category';
import { Component, Vue } from 'vue-property-decorator';
// TODO : remove this hardcode // TODO : remove this hardcode
@Component({
export default { apollo: {
name: 'Home', categories: {
data() { query: FETCH_CATEGORIES,
return { },
categories: [],
loading: true,
HTTP_ENDPOINT: 'http://localhost:4000',
};
},
apollo: {
categories: {
query: FETCH_CATEGORIES,
}, },
}, })
methods: { export default class List extends Vue {
categories = [];
loading = true;
HTTP_ENDPOINT = 'http://localhost:4000';
deleteCategory(categoryId) { deleteCategory(categoryId) {
const router = this.$router; const router = this.$router;
eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' }) // FIXME: remove eventFetch
.then(() => { // eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
this.categories = this.categories.filter(category => category.id !== categoryId); // .then(() => {
router.push('/category'); // this.categories = this.categories.filter(category => category.id !== categoryId);
}); // router.push('/category');
}, // });
}, }
}; };
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->

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

@ -4,7 +4,7 @@
<v-flex xs12 sm8 md4> <v-flex xs12 sm8 md4>
<v-card class="elevation-12"> <v-card class="elevation-12">
<v-toolbar dark color="primary"> <v-toolbar dark color="primary">
<v-toolbar-title>Create a new event</v-toolbar-title> <v-toolbar-title>Create a new event</v-toolbar-title>
</v-toolbar> </v-toolbar>
<v-card-text> <v-card-text>
<v-form> <v-form>
@ -49,11 +49,11 @@
:required="event.location_type === 'phone'" :required="event.location_type === 'phone'"
></v-text-field> ></v-text-field>
<v-autocomplete <v-autocomplete
:items="categories" :items="categories"
v-model="event.category" v-model="event.category"
item-text="title" item-text="title"
item-value="id" item-value="id"
label="Categories" label="Categories"
> >
</v-autocomplete> </v-autocomplete>
<v-btn color="primary" @click="create">Create event</v-btn> <v-btn color="primary" @click="create">Create event</v-btn>
@ -65,62 +65,58 @@
</v-container> </v-container>
</template> </template>
<script> <script lang="ts">
// import Location from '@/components/Location'; // import Location from '@/components/Location';
import VueMarkdown from 'vue-markdown'; import VueMarkdown from 'vue-markdown';
import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event'; import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event';
import { FETCH_CATEGORIES } from '@/graphql/category'; import { FETCH_CATEGORIES } from '@/graphql/category';
import { AUTH_USER_ACTOR } from '@/constants'; import { AUTH_USER_ACTOR } from '@/constants';
import { Component, Prop, Vue } from 'vue-property-decorator';
export default { @Component({
name: 'create-event', components: {
props: { VueMarkdown
uuid: {
required: false,
type: String,
}, },
}, apollo: {
components: { categories: {
/* Location, */ query: FETCH_CATEGORIES,
VueMarkdown,
},
data() {
return {
e1: 0,
event: {
title: null,
description: '',
begins_on: (new Date()).toISOString().substr(0, 10),
ends_on: new Date(),
seats: null,
physical_address: null,
location_type: 'physical',
online_address: null,
tel_num: null,
price: null,
category: null,
category_id: null,
tags: [],
participants: [],
}, },
categories: [], }
})
export default class CreateEvent extends Vue {
@Prop({required: false, type: String}) uuid!: string
e1 = 0
event = {
title: null,
organizer_actor_id: null,
description: '',
begins_on: (new Date()).toISOString().substr(0, 10),
ends_on: new Date(),
seats: null,
physical_address: null,
location_type: 'physical',
online_address: null,
tel_num: null,
price: null,
category: null,
category_id: null,
tags: [], tags: [],
tagsToSend: [], participants: [],
tagsFetched: [], } as any // FIXME: correctly type an event
}; categories = []
}, tags = []
// created() { tagsToSend = []
// if (this.uuid) { tagsFetched = []
// this.fetchEvent(); loading = false
// }
// }, // created() {
apollo: { // if (this.uuid) {
categories: { // this.fetchEvent();
query: FETCH_CATEGORIES, // }
}, // }
},
methods: { create () {
create() {
// this.event.seats = parseInt(this.event.seats, 10); // this.event.seats = parseInt(this.event.seats, 10);
// this.tagsToSend.forEach((tag) => { // this.tagsToSend.forEach((tag) => {
// this.event.tags.push({ // this.event.tags.push({
@ -128,10 +124,11 @@ export default {
// // '@type': 'Tag', // // '@type': 'Tag',
// }); // });
// }); // });
const actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR)); // FIXME: correctly parse actor JSON
this.event.category_id = this.event.category; const actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}')
this.event.organizer_actor_id = actor.id; this.event.category_id = this.event.category
this.event.participants = [actor.id]; this.event.organizer_actor_id = actor.id
this.event.participants = [actor.id]
// this.event.price = parseFloat(this.event.price); // this.event.price = parseFloat(this.event.price);
if (this.uuid === undefined) { if (this.uuid === undefined) {
@ -146,33 +143,25 @@ export default {
addressType: this.event.location_type, addressType: this.event.location_type,
} }
}).then((data) => { }).then((data) => {
this.loading = false; this.loading = false
this.$router.push({ name: 'Event', params: { uuid: data.data.uuid } }); this.$router.push({name: 'Event', params: {uuid: data.data.uuid}})
}).catch((error) => { }).catch((error) => {
console.log(error); console.log(error)
}); })
} else { } else {
this.$apollo.mutate({ this.$apollo.mutate({
mutation: EDIT_EVENT, mutation: EDIT_EVENT,
}).then((data) => { }).then((data) => {
this.loading = false; this.loading = false
this.$router.push({ name: 'Event', params: { uuid: data.data.uuid } }); this.$router.push({name: 'Event', params: {uuid: data.data.uuid}})
}).catch((error) => { }).catch((error) => {
console.log(error); console.log(error)
}); })
} }
this.event.tags = []; this.event.tags = []
}, }
// fetchEvent() {
// eventFetch(`/events/${this.id}`, this.$store) getAddressData (addressData) {
// .then(response => response.json())
// .then((data) => {
// this.loading = false;
// this.event = data;
// console.log(this.event);
// });
// },
getAddressData(addressData) {
if (addressData !== null) { if (addressData !== null) {
this.event.address = { this.event.address = {
geom: { geom: {
@ -187,11 +176,11 @@ export default {
addressRegion: addressData.administrative_area_level_1, addressRegion: addressData.administrative_area_level_1,
postalCode: addressData.postal_code, postalCode: addressData.postal_code,
streetAddress: `${addressData.street_number} ${addressData.route}`, streetAddress: `${addressData.street_number} ${addressData.route}`,
}; }
} }
}, }
},
}; };
</script> </script>
<style> <style>

47
js/src/components/Event/Edit.vue
View File

@ -97,28 +97,29 @@
</v-container> </v-container>
</template> </template>
<script> <script lang="ts">
export default { import { Component, Prop, Vue } from 'vue-property-decorator';
props: ['id'],
data() { @Component
return { export default class EventEdit extends Vue {
loading: true, @Prop(String) id!: string;
event: null,
}; loading = true;
}, event = null;
created() {
this.fetchData(); created() {
}, this.fetchData();
methods: { }
fetchData() { fetchData() {
eventFetch(`/events/${this.id}`, this.$store) // FIXME: remove eventFetch
.then(response => response.json()) // eventFetch(`/events/${this.id}`, this.$store)
.then((data) => { // .then(response => response.json())
this.loading = false; // .then((data) => {
this.event = data; // this.loading = false;
console.log(this.event); // this.event = data;
}); // console.log(this.event);
}, // });
}, }
}; };
</script> </script>

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

@ -1,242 +1,245 @@
<template> <template>
<v-layout row> <v-layout row>
<v-flex xs12 sm6 offset-sm3> <v-flex xs12 sm6 offset-sm3>
<v-progress-circular v-if="$apollo.loading" indeterminate color="primary"></v-progress-circular> <v-progress-circular v-if="$apollo.loading" indeterminate color="primary"></v-progress-circular>
<div>{{ event }}</div> <div>{{ event }}</div>
<v-card v-if="event"> <v-card v-if="event">
<!-- <v-img <!-- <v-img
src="https://picsum.photos/600/400/" src="https://picsum.photos/600/400/"
height="200px" height="200px"
> >
<v-container fill-height fluid> <v-container fill-height fluid>
<v-layout fill-height> <v-layout fill-height>
<v-flex xs12 align-end flexbox> <v-flex xs12 align-end flexbox>
<v-card-title> <v-card-title>
<v-btn icon @click="$router.go(-1)" class="white--text"> <v-btn icon @click="$router.go(-1)" class="white--text">
<v-icon>chevron_left</v-icon> <v-icon>chevron_left</v-icon>
</v-btn> </v-btn>
<v-spacer></v-spacer>
<v-btn icon class="mr-3 white--text" v-if="actorIsOrganizer()" :to="{ name: 'EditEvent', params: {uuid: event.uuid}}">
<v-icon>edit</v-icon>
</v-btn>
<v-menu bottom left>
<v-btn icon slot="activator" class="white--text">
<v-icon>more_vert</v-icon>
</v-btn>
<v-list>
<v-list-tile @click="downloadIcsEvent()">
<v-list-tile-title>Download</v-list-tile-title>
</v-list-tile>
<v-list-tile @click="deleteEvent()" v-if="actorIsOrganizer()">
<v-list-tile-title>Delete</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-card-title>
</v-flex>
</v-layout>
</v-container>
</v-img> -->
<v-container grid-list-md>
<v-layout row wrap>
<v-flex md10>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<span class="subheading grey--text">{{ event.begins_on | formatDay }}</span> <v-btn icon class="mr-3 white--text" v-if="actorIsOrganizer()" :to="{ name: 'EditEvent', params: {uuid: event.uuid}}">
<h1 class="display-1">{{ event.title }}</h1> <v-icon>edit</v-icon>
<div> </v-btn>
<!-- <router-link :to="{name: 'Account', params: { name: event.organizerActor.preferredUsername } }"> <v-menu bottom left>
<v-avatar size="25px"> <v-btn icon slot="activator" class="white--text">
<img class="img-circle elevation-7 mb-1" <v-icon>more_vert</v-icon>
:src="event.organizer_actor.avatarUrl" </v-btn>
> <v-list>
</v-avatar> <v-list-tile @click="downloadIcsEvent()">
</router-link> --> <v-list-tile-title>Download</v-list-tile-title>
<!-- <span v-if="event.organizerActor">Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span> -->
</div>
<!-- <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>
</v-flex>
<!-- <v-flex md2>
<p v-if="actorIsOrganizer()">
Vous êtes organisateur de cet événement.
</p>
<div v-else>
<p v-if="actorIsParticipant()">
Vous avez annoncé aller à cet événement.
</p>
<p v-else>Vous y allez ?
<span class="text--darken-2 grey--text">{{ event.participants.length }} personnes y vont.</span>
</p>
</div>
<v-card-actions v-if="!actorIsOrganizer()">
<v-btn v-if="!actorIsParticipant()" @click="joinEvent" color="success"><v-icon>check</v-icon> Join</v-btn>
<v-btn v-if="actorIsParticipant()" @click="leaveEvent" color="error">Leave</v-btn>
</v-card-actions>
</v-flex> -->
</v-layout>
</v-container>
<v-divider></v-divider>
<v-container>
<v-layout row wrap>
<v-flex xs12 md4 order-md1>
<v-layout
column
fill-height
>
<v-list two-line>
<v-list-tile>
<v-list-tile-action>
<v-icon color="indigo">access_time</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ event.begins_on | formatDate }}</v-list-tile-title>
<v-list-tile-sub-title>{{ event.ends_on | formatDate }}</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile> </v-list-tile>
<v-list-tile @click="deleteEvent()" v-if="actorIsOrganizer()">
<v-divider inset></v-divider> <v-list-tile-title>Delete</v-list-tile-title>
<v-list-tile>
<v-list-tile-action>
<v-icon color="indigo">place</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title><span v-if="event.address_type === 'physical'">
{{ event.physical_address.streetAddress }}
</span></v-list-tile-title>
<v-list-tile-sub-title>Mobile</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile> </v-list-tile>
</v-list> </v-list>
</v-layout> </v-menu>
</v-flex> </v-card-title>
<v-flex md8 xs12> </v-flex>
<p> </v-layout>
<h2>Details</h2> </v-container>
<vue-markdown :source="event.description" v-if="event.description" :toc-first-level="3"></vue-markdown> </v-img> -->
</p> <v-container grid-list-md>
<v-subheader>Participants</v-subheader> <v-layout row wrap>
<!-- <v-flex md2 v-for="participant in event.participants" :key="participant.actor.uuid"> <v-flex md10>
<router-link :to="{name: 'Account', params: { name: participant.actor.preferredUsername }}"> <v-spacer></v-spacer>
<v-card> <span class="subheading grey--text">{{ event.begins_on | formatDay }}</span>
<v-avatar size="75px"> <h1 class="display-1">{{ event.title }}</h1>
<img v-if="!participant.actor.avatarUrl" <div>
class="img-circle elevation-7 mb-1" <!-- <router-link :to="{name: 'Account', params: { name: event.organizerActor.preferredUsername } }">
src="https://picsum.photos/125/125/" <v-avatar size="25px">
> <img class="img-circle elevation-7 mb-1"
<img v-else :src="event.organizer_actor.avatarUrl"
class="img-circle elevation-7 mb-1" >
:src="participant.actor.avatarUrl" </v-avatar>
> </router-link> -->
</v-avatar> <!-- <span v-if="event.organizerActor">Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span> -->
<v-card-title> </div>
<span>{{ participant.actor.preferredUsername }}</span> <!-- <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-title> <v-card-text v-if="event.description">
</v-card> <vue-markdown :source="event.description"></vue-markdown>
</router-link> </v-card-text>
</v-flex> --> </v-flex>
</v-flex> <!-- <v-flex md2>
<span v-if="event.participants.length === 0">No participants yet.</span> <p v-if="actorIsOrganizer()">
Vous êtes organisateur de cet événement.
</p>
<div v-else>
<p v-if="actorIsParticipant()">
Vous avez annoncé aller à cet événement.
</p>
<p v-else>Vous y allez ?
<span class="text--darken-2 grey--text">{{ event.participants.length }} personnes y vont.</span>
</p>
</div>
<v-card-actions v-if="!actorIsOrganizer()">
<v-btn v-if="!actorIsParticipant()" @click="joinEvent" color="success"><v-icon>check</v-icon> Join</v-btn>
<v-btn v-if="actorIsParticipant()" @click="leaveEvent" color="error">Leave</v-btn>
</v-card-actions>
</v-flex> -->
</v-layout>
</v-container>
<v-divider></v-divider>
<v-container>
<v-layout row wrap>
<v-flex xs12 md4 order-md1>
<v-layout
column
fill-height
>
<v-list two-line>
<v-list-tile>
<v-list-tile-action>
<v-icon color="indigo">access_time</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>{{ event.begins_on | formatDate }}</v-list-tile-title>
<v-list-tile-sub-title>{{ event.ends_on | formatDate }}</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
<v-divider inset></v-divider>
<v-list-tile>
<v-list-tile-action>
<v-icon color="indigo">place</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title><span v-if="event.address_type === 'physical'">
{{ event.physical_address.streetAddress }}
</span></v-list-tile-title>
<v-list-tile-sub-title>Mobile</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-layout> </v-layout>
</v-container> </v-flex>
</v-card> <v-flex md8 xs12>
<p>
<h2>Details</h2>
<vue-markdown :source="event.description" v-if="event.description" :toc-first-level="3"></vue-markdown>
</p>
<v-subheader>Participants</v-subheader>
<!-- <v-flex md2 v-for="participant in event.participants" :key="participant.actor.uuid">
<router-link :to="{name: 'Account', params: { name: participant.actor.preferredUsername }}">
<v-card>
<v-avatar size="75px">
<img v-if="!participant.actor.avatarUrl"
class="img-circle elevation-7 mb-1"
src="https://picsum.photos/125/125/"
>
<img v-else
class="img-circle elevation-7 mb-1"
:src="participant.actor.avatarUrl"
>
</v-avatar>
<v-card-title>
<span>{{ participant.actor.preferredUsername }}</span>
</v-card-title>
</v-card>
</router-link>
</v-flex> -->
</v-flex>
<span v-if="event.participants.length === 0">No participants yet.</span>
</v-layout>
</v-container>
</v-card>
</v-flex> </v-flex>
</v-layout> </v-layout>
</template> </template>
<script> <script lang="ts">
import VueMarkdown from 'vue-markdown'; import { FETCH_EVENT } from '@/graphql/event';
import { FETCH_EVENT } from '@/graphql/event'; import { Component, Prop, Vue } from 'vue-property-decorator';
import { LOGGED_ACTOR } from '@/graphql/actor'; import VueMarkdown from 'vue-markdown';
export default { @Component({
name: 'Home', components: {
components: { VueMarkdown,
VueMarkdown,
},
data() {
return {
event: {
name: '',
slug: '',
title: '',
uuid: this.uuid,
description: '',
organizer: {
id: null,
username: null,
},
participants: [],
},
};
},
apollo: {
event: {
query: FETCH_EVENT,
variables() {
return {
uuid: this.uuid,
};
},
}, },
// loggedActor: { apollo: {
// query: LOGGED_ACTOR, event: {
// } query: FETCH_EVENT,
}, variables() {
methods: { return {
uuid: this.uuid,
};
},
},
// loggedActor: {
// query: LOGGED_ACTOR,
// }
},
})
export default class Event extends Vue {
@Prop({ type: String, required: true }) uuid!: string;
event = {
name: '',
slug: '',
title: '',
uuid: this.uuid,
description: '',
organizer: {
id: null,
username: null,
},
participants: [],
};
deleteEvent() { deleteEvent() {
const router = this.$router; const router = this.$router;
eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' }) // FIXME: remove eventFetch
.then(() => router.push({ name: 'EventList' })); // eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
}, // .then(() => router.push({ name: 'EventList' }));
}
joinEvent() { joinEvent() {
eventFetch(`/events/${this.uuid}/join`, this.$store, { method: 'POST' }) // FIXME: remove eventFetch
.then(response => response.json()) // eventFetch(`/events/${this.uuid}/join`, this.$store, { method: 'POST' })
.then((data) => { // .then(response => response.json())
console.log(data); // .then((data) => {
}); // console.log(data);
}, // });
}
leaveEvent() { leaveEvent() {
eventFetch(`/events/${this.uuid}/leave`, this.$store) // FIXME: remove eventFetch
.then(response => response.json()) // eventFetch(`/events/${this.uuid}/leave`, this.$store)
.then((data) => { // .then(response => response.json())
console.log(data); // .then((data) => {
}); // console.log(data);
}, // });
}
downloadIcsEvent() { downloadIcsEvent() {
eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' }) // FIXME: remove eventFetch
.then(response => response.text()) // eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
.then((response) => { // .then(response => response.text())
const blob = new Blob([response], { type: 'text/calendar' }); // .then((response) => {
const link = document.createElement('a'); // const blob = new Blob([ response ], { type: 'text/calendar' });
link.href = window.URL.createObjectURL(blob); // const link = document.createElement('a');
link.download = `${this.event.title}.ics`; // link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link); // link.download = `${this.event.title}.ics`;
link.click(); // document.body.appendChild(link);
document.body.removeChild(link); // link.click();
}); // document.body.removeChild(link);
}, // });
}
// actorIsParticipant() { // actorIsParticipant() {
// return this.loggedActor && this.event.participants.map(participant => participant.actor.preferredUsername).includes(this.loggedActor.preferredUsername) || this.actorIsOrganizer(); // return this.loggedActor && this.event.participants.map(participant => participant.actor.preferredUsername).includes(this.loggedActor.preferredUsername) || this.actorIsOrganizer();
// }, // }
//
// actorIsOrganizer() { // actorIsOrganizer() {
// return this.loggedActor && this.loggedActor.preferredUsername === this.event.organizer.preferredUsername; // return this.loggedActor && this.loggedActor.preferredUsername === this.event.organizer.preferredUsername;
// }, // }
}, }
props: {
uuid: {
type: String,
required: true,
},
},
};
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style> <style>
.v-card__media__background { .v-card__media__background {
filter: contrast(0.4); filter: contrast(0.4);
} }
</style> </style>

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

@ -1,98 +1,102 @@
<template> <template>
<v-layout> <v-layout>
<v-flex xs12 sm8 offset-sm2> <v-flex xs12 sm8 offset-sm2>
<v-card> <v-card>
<h1>{{ $t("event.list.title") }}</h1> <h1>{{ $t('event.list.title') }}</h1>
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular> <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-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-icon left>location_city</v-icon>
</v-chip> {{ locationText }}
<v-container grid-list-sm fluid> </v-chip>
<v-layout row wrap> <v-container grid-list-sm fluid>
<v-flex xs4 v-for="event in events" :key="event.id"> <v-layout row wrap>
<v-card> <v-flex xs4 v-for="event in events" :key="event.id">
<v-card-media v-if="!event.image" <v-card>
class="white--text" <v-card-media v-if="!event.image"
height="200px" class="white--text"
src="https://picsum.photos/g/400/200/" height="200px"
> src="https://picsum.photos/g/400/200/"
<v-container fill-height fluid> >
<v-layout fill-height> <v-container fill-height fluid>
<v-flex xs12 align-end flexbox> <v-layout fill-height>
<span class="headline black--text">{{ event.title }}</span> <v-flex xs12 align-end flexbox>
</v-flex> <span class="headline black--text">{{ event.title }}</span>
</v-layout> </v-flex>
</v-container> </v-layout>
</v-card-media> </v-container>
<v-card-title primary-title> </v-card-media>
<div> <v-card-title primary-title>
<div>
<span class="grey--text">{{ event.begins_on | formatDate }}</span><br> <span class="grey--text">{{ event.begins_on | formatDate }}</span><br>
<router-link :to="{name: 'Account', params: { name: event.organizer.username } }"> <router-link :to="{name: 'Account', params: { name: event.organizer.username } }">
<v-avatar size="25px"> <v-avatar size="25px">
<img class="img-circle elevation-7 mb-1" <img class="img-circle elevation-7 mb-1"
:src="event.organizer.avatar" :src="event.organizer.avatar"
> >
</v-avatar> </v-avatar>
</router-link> </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> <span v-if="event.organizer">Organisé par <router-link
</div> :to="{name: 'Account', params: {'name': event.organizer.username}}">{{ event.organizer.username }}</router-link></span>
</v-card-title> </div>
<v-card-actions> </v-card-title>
<v-btn flat color="orange" @click="downloadIcsEvent(event)">Share</v-btn> <v-card-actions>
<v-btn flat color="orange" @click="viewEvent(event)">Explore</v-btn> <v-btn flat color="orange" @click="downloadIcsEvent(event)">Share</v-btn>
<v-btn flat color="red" @click="deleteEvent(event)">Delete</v-btn> <v-btn flat color="orange" @click="viewEvent(event)">Explore</v-btn>
</v-card-actions> <v-btn flat color="red" @click="deleteEvent(event)">Delete</v-btn>
</v-card> </v-card-actions>
</v-flex> </v-card>
</v-layout> </v-flex>
</v-container> </v-layout>
<router-link :to="{ name: 'CreateEvent' }" class="btn btn-default">Create</router-link> </v-container>
</v-card> <router-link :to="{ name: 'CreateEvent' }" class="btn btn-default">Create</router-link>
</v-flex> </v-card>
</v-flex>
</v-layout> </v-layout>
</template> </template>
<script> <script lang="ts">
import ngeohash from 'ngeohash'; import ngeohash from 'ngeohash';
import VueMarkdown from 'vue-markdown'; import VueMarkdown from 'vue-markdown';
import VCardTitle from 'vuetify/es5/components/VCard/VCardTitle'; import VCardTitle from 'vuetify/es5/components/VCard/VCardTitle';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
export default { @Component({
name: 'EventList', components: {
components: { VCardTitle: VCardTitle as any,
VCardTitle, VueMarkdown,
VueMarkdown, },
}, })
data() { export default class EventList extends Vue {
return { @Prop(String) location!: string;
events: [],
loading: true, events = [];
locationChip: false, loading = true;
locationText: '', locationChip = false;
}; locationText = '';
},
props: ['location'], created() {
created() { this.fetchData(this.$router.currentRoute.params[ 'location' ]);
this.fetchData(this.$router.currentRoute.params.location); }
},
watch: { beforeRouteUpdate(to, from, next) {
locationChip(val) { this.fetchData(to.params.location);
next();
}
@Watch('locationChip')
onLocationChipChange(val) {
if (val === false) { if (val === false) {
this.$router.push({ name: 'EventList' }); this.$router.push({ name: 'EventList' });
} }
}, }
},
beforeRouteUpdate(to, from, next) {
this.fetchData(to.params.location);
next();
},
methods: {
geocode(lat, lon) { geocode(lat, lon) {
console.log({ lat, lon }); console.log({ lat, lon });
console.log(ngeohash.encode(lat, lon, 10)); console.log(ngeohash.encode(lat, lon, 10));
return ngeohash.encode(lat, lon, 10); return ngeohash.encode(lat, lon, 10);
}, }
fetchData(location) { fetchData(location) {
let queryString = '/events'; let queryString = '/events';
if (location) { if (location) {
@ -101,37 +105,43 @@ export default {
this.locationText = `${latitude.toString()} : ${longitude.toString()}`; this.locationText = `${latitude.toString()} : ${longitude.toString()}`;
} }
this.locationChip = true; this.locationChip = true;
eventFetch(queryString, this.$store) // FIXME: remove eventFetch
.then(response => response.json()) // eventFetch(queryString, this.$store)
.then((response) => { // .then(response => response.json())
this.loading = false; // .then((response) => {
this.events = response.data; // this.loading = false;
console.log(this.events); // this.events = response.data;
}); // console.log(this.events);
}, // });
}
deleteEvent(event) { deleteEvent(event) {
const router = this.$router; const router = this.$router;
eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' }) // FIXME: remove eventFetch
.then(() => router.push('/events')); // eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
}, // .then(() => router.push('/events'));
}
viewEvent(event) { viewEvent(event) {
this.$router.push({ name: 'Event', params: { uuid: event.uuid } }); this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
}, }
downloadIcsEvent(event) { downloadIcsEvent(event) {
eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' }) // FIXME: remove eventFetch
.then(response => response.text()) // eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
.then((response) => { // .then(response => response.text())
const blob = new Blob([response], { type: 'text/calendar' }); // .then((response) => {
const link = document.createElement('a'); // const blob = new Blob([ response ], { type: 'text/calendar' });
link.href = window.URL.createObjectURL(blob); // const link = document.createElement('a');
link.download = `${event.title}.ics`; // link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link); // link.download = `${event.title}.ics`;
link.click(); // document.body.appendChild(link);
document.body.removeChild(link); // link.click();
}); // document.body.removeChild(link);
}, // });
}, }
};
};
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->

133
js/src/components/Group/Create.vue
View File

@ -13,10 +13,10 @@
</v-flex> </v-flex>
<v-flex xs12> <v-flex xs12>
<v-text-field <v-text-field
label="Title" label="Title"
v-model="group.name" v-model="group.name"
:counter="100" :counter="100"
required required
></v-text-field> ></v-text-field>
</v-flex> </v-flex>
<v-flex md6> <v-flex md6>
@ -36,27 +36,27 @@
></vue-markdown> ></vue-markdown>
</v-flex> </v-flex>
<!--<v-flex md12>--> <!--<v-flex md12>-->
<!--<vuetify-google-autocomplete--> <!--<vuetify-google-autocomplete-->
<!--id="map"--> <!--id="map"-->
<!--append-icon="search"--> <!--append-icon="search"-->
<!--classname="form-control"--> <!--classname="form-control"-->
<!--placeholder="Start typing"--> <!--placeholder="Start typing"-->
<!--enable-geolocation--> <!--enable-geolocation-->
<!--v-on:placechanged="getAddressData"--> <!--v-on:placechanged="getAddressData"-->
<!--&gt;--> <!--&gt;-->
<!--</vuetify-google-autocomplete>--> <!--</vuetify-google-autocomplete>-->
<!--</v-flex>--> <!--</v-flex>-->
<!--<v-flex md12>--> <!--<v-flex md12>-->
<!--<v-select--> <!--<v-select-->
<!--v-bind:items="categories"--> <!--v-bind:items="categories"-->
<!--v-model="group.category"--> <!--v-model="group.category"-->
<!--item-text="title"--> <!--item-text="title"-->
<!--item-value="@id"--> <!--item-value="@id"-->
<!--label="Categories"--> <!--label="Categories"-->
<!--single-line--> <!--single-line-->
<!--bottom--> <!--bottom-->
<!--types="(cities)"--> <!--types="(cities)"-->
<!--&gt;</v-select>--> <!--&gt;</v-select>-->
<!--</v-flex>--> <!--</v-flex>-->
</v-layout> </v-layout>
</v-form> </v-form>
@ -64,51 +64,54 @@
</v-container> </v-container>
</template> </template>
<script> <script lang="ts">
import VueMarkdown from 'vue-markdown'; import VueMarkdown from 'vue-markdown';
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete'; import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
import { Component, Vue } from 'vue-property-decorator';
export default { @Component({
name: 'create-group', components: {
VueMarkdown,
components: { VuetifyGoogleAutocomplete,
VueMarkdown, },
VuetifyGoogleAutocomplete, })
}, export default class CreateGroup extends Vue {
data() { e1 = 0;
return { // FIXME: correctly type group
e1: 0, group: { preferred_username: string, name: string, summary: string, address?: any } = {
group: { preferred_username: '',
preferred_username: '', name: '',
name: '', summary: '',
summary: '', // category: null,
// category: null,
},
categories: [],
}; };
}, categories = [];
mounted() {
this.fetchCategories(); mounted() {
}, this.fetchCategories();
methods: { }
create() { create() {
// this.group.organizer = "/accounts/" + this.$store.state.user.id; // this.group.organizer = "/accounts/" + this.$store.state.user.id;
eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) }) // FIXME: remove eventFetch
.then(response => response.json()) // eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
.then((data) => { // .then(response => response.json())
this.loading = false; // .then((data) => {
this.$router.push({ path: 'Group', params: { id: data.id } }); // this.loading = false;
}); // this.$router.push({ path: 'Group', params: { id: data.id } });
}, // });
}
fetchCategories() { fetchCategories() {
eventFetch('/categories', this.$store) // FIXME: remove eventFetch
.then(response => response.json()) // eventFetch('/categories', this.$store)
.then((data) => { // .then(response => response.json())
this.loading = false; // .then((data) => {
this.categories = data.data; // this.loading = false;
}); // this.categories = data.data;
}, // });
}
getAddressData(addressData) { getAddressData(addressData) {
this.group.address = { this.group.address = {
geo: { geo: {
@ -121,9 +124,9 @@ export default {
postalCode: addressData.postal_code, postalCode: addressData.postal_code,
streetAddress: `${addressData.street_number} ${addressData.route}`, streetAddress: `${addressData.street_number} ${addressData.route}`,
}; };
}, }
},
}; };
</script> </script>
<style> <style>

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

@ -12,7 +12,7 @@
</v-btn> </v-btn>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<!--<v-btn icon class="mr-3" v-if="$store.state.user && $store.state.actor.id === actor.id">--> <!--<v-btn icon class="mr-3" v-if="$store.state.user && $store.state.actor.id === actor.id">-->
<!--<v-icon>edit</v-icon>--> <!--<v-icon>edit</v-icon>-->
<!--</v-btn>--> <!--</v-btn>-->
<v-btn icon> <v-btn icon>
<v-icon>more_vert</v-icon> <v-icon>more_vert</v-icon>
@ -42,12 +42,12 @@
@{{ group.domain }} @{{ group.domain }}
</span> </span>
</span> </span>
<v-chip color="indigo" text-color="white"> <v-chip color="indigo" text-color="white">
<v-avatar> <v-avatar>
<v-icon>group</v-icon> <v-icon>group</v-icon>
</v-avatar> </v-avatar>
Group Group
</v-chip> </v-chip>
</div> </div>
<v-card-text v-if="group.description" v-html="group.description"></v-card-text> <v-card-text v-if="group.description" v-html="group.description"></v-card-text>
</v-flex> </v-flex>
@ -119,9 +119,9 @@
<v-flex v-for="event in group.participatingEvents" :key="event.id"> <v-flex v-for="event in group.participatingEvents" :key="event.id">
<v-card> <v-card>
<v-card-media <v-card-media
class="black--text" class="black--text"
height="200px" height="200px"
src="https://picsum.photos/400/200/" src="https://picsum.photos/400/200/"
> >
<v-container fill-height fluid> <v-container fill-height fluid>
<v-layout fill-height> <v-layout fill-height>
@ -135,7 +135,10 @@
<div> <div>
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br> <span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
<p>{{ event.description }}</p> <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> <p v-if="event.organizer">Organisé par
<router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}
</router-link>
</p>
</div> </div>
</v-card-title> </v-card-title>
<v-card-actions> <v-card-actions>
@ -160,9 +163,9 @@
<v-flex v-for="event in group.organizingEvents" :key="event.id"> <v-flex v-for="event in group.organizingEvents" :key="event.id">
<v-card> <v-card>
<v-card-media <v-card-media
class="black--text" class="black--text"
height="200px" height="200px"
src="https://picsum.photos/400/200/" src="https://picsum.photos/400/200/"
> >
<v-container fill-height fluid> <v-container fill-height fluid>
<v-layout fill-height> <v-layout fill-height>
@ -176,7 +179,10 @@
<div> <div>
<span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br> <span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
<p>{{ event.description }}</p> <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> <p v-if="event.organizer">Organisé par
<router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}
</router-link>
</p>
</div> </div>
</v-card-title> </v-card-title>
<v-card-actions> <v-card-actions>
@ -201,38 +207,35 @@
</v-container> </v-container>
</template> </template>
<script> <script lang="ts">
export default { import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
name: 'Group',
data() { @Component
return { export default class Group extends Vue {
group: null, @Prop({ type: String, required: true }) name!: string;
loading: true,
}; group = null;
}, loading = true;
props: {
name: { created() {
type: String, this.fetchData();
required: true, }
},
}, @Watch('$route')
created() { onRouteChanged() {
this.fetchData(); // call again the method if the route changes
}, this.fetchData();
watch: { }
// call again the method if the route changes
$route: 'fetchData',
},
methods: {
fetchData() { fetchData() {
eventFetch(`/actors/${this.name}`, this.$store) // FIXME: remove eventFetch
.then(response => response.json()) // eventFetch(`/actors/${this.name}`, this.$store)
.then((response) => { // .then(response => response.json())
this.group = response.data; // .then((response) => {
this.loading = false; // this.group = response.data;
console.log(this.group); // this.loading = false;
}); // console.log(this.group);
}, // });
}, }
}; };
</script> </script>

85
js/src/components/Group/GroupList.vue
View File

@ -22,11 +22,16 @@
<v-card-title> <v-card-title>
<div> <div>
<p>{{ group.summary }}</p> <p>{{ group.summary }}</p>
<p v-if="group.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': group.organizer.id}}">{{ group.organizer.username }}</router-link></p> <p v-if="group.organizer">Organisé par
<router-link :to="{name: 'Account', params: {'id': group.organizer.id}}">{{ group.organizer.username }}</router-link>
</p>
</div> </div>
</v-card-title> </v-card-title>
<v-card-actions> <v-card-actions>
<v-btn flat color="green" @click="joinGroup(group)"><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="orange" @click="viewActor(group)">Explore</v-btn>
<v-btn flat color="red" @click="deleteGroup(group)">Delete</v-btn> <v-btn flat color="red" @click="deleteGroup(group)">Delete</v-btn>
</v-card-actions> </v-card-actions>
@ -37,48 +42,54 @@
</v-container> </v-container>
</template> </template>
<script> <script lang="ts">
export default {
name: 'GroupList', import { Component, Vue } from 'vue-property-decorator';
data() {
return { @Component
groups: [], export default class GroupList extends Vue {
loading: true, groups = [];
}; loading = true;
},
created() { created() {
this.fetchData(); this.fetchData();
}, }
methods: {
username_with_domain(actor) { usernameWithDomain(actor) {
return actor.username + (actor.domain === null ? '' : `@${actor.domain}`); return actor.username + (actor.domain === null ? '' : `@${actor.domain}`);
}, }
fetchData() { fetchData() {
eventFetch('/groups', this.$store) // FIXME: remove eventFetch
.then(response => response.json()) // eventFetch('/groups', this.$store)
.then((data) => { // .then(response => response.json())
console.log(data); // .then((data) => {
this.loading = false; // console.log(data);
this.groups = data.data; // this.loading = false;
}); // this.groups = data.data;
}, // });
}
deleteGroup(group) { deleteGroup(group) {
const router = this.$router; const router = this.$router;
eventFetch(`/groups/${this.username_with_domain(group)}`, this.$store, { method: 'DELETE' }) // FIXME: remove eventFetch
.then(response => response.json()) // eventFetch(`/groups/${this.usernameWithDomain(group)}`, this.$store, { method: 'DELETE' })
.then(() => router.push('/groups')); // .then(response => response.json())
}, // .then(() => router.push('/groups'));
}
viewActor(actor) { viewActor(actor) {
this.$router.push({ name: 'Group', params: { name: this.username_with_domain(actor) } }); this.$router.push({ name: 'Group', params: { name: this.usernameWithDomain(actor) } });
}, }
joinGroup(group) { joinGroup(group) {
const router = this.$router; const router = this.$router;
eventFetch(`/groups/${this.username_with_domain(group)}/join`, this.$store, { method: 'POST' }) // FIXME: remove eventFetch
.then(response => response.json()) // eventFetch(`/groups/${this.usernameWithDomain(group)}/join`, this.$store, { method: 'POST' })
.then(() => router.push({ name: 'Group', params: { name: this.username_with_domain(group) } })); // .then(response => response.json())
}, // .then(() => router.push({ name: 'Group', params: { name: this.usernameWithDomain(group) } }));
}, }
}; };
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->

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

@ -1,128 +1,134 @@
<template> <template>
<v-container> <v-container>
<v-img <v-img
:gradient="gradient" :gradient="gradient"
src="https://picsum.photos/1200/900" src="https://picsum.photos/1200/900"
dark dark
height="300" height="300"
v-if="!user" v-if="!user"
> >
<v-container fill-height> <v-container fill-height>
<v-layout align-center> <v-layout align-center>
<v-flex text-xs-center> <v-flex text-xs-center>
<h1 class="display-3">Find events you like</h1> <h1 class="display-3">Find events you like</h1>
<h2>Share it with Mobilizon</h2> <h2>Share it with Mobilizon</h2>
<v-btn :to="{ name: 'Register' }"><translate>Register</translate></v-btn> <v-btn :to="{ name: 'Register' }">
</v-flex> <translate>Register</translate>
</v-layout> </v-btn>
</v-container>
</v-img>
<v-layout v-else>
<v-flex xs12 sm8 offset-sm2>
<v-layout row wrap>
<v-flex xs12 sm6>
<h1><translate :translate-params="{username: actor.preferredUsername}">Welcome back %{username}</translate></h1>
</v-flex>
<v-flex xs12 sm6>
<v-layout align-center>
<span class="events-nearby title">Events nearby </span><v-text-field
solo
append-icon="place"
:value="ipLocation()"
></v-text-field>
</v-layout>
</v-flex>
</v-layout>
<div v-if="$apollo.loading">
Still loading
</div>
<v-card v-if="events.length > 0">
<v-layout row wrap>
<v-flex md4 v-for="event in events" :key="event.uuid">
<v-card :to="{ name: 'Event', params:{ uuid: event.uuid } }">
<v-img 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-img>
<v-card-title primary-title>
<div>
<span class="grey--text">{{ event.begins_on | formatDay }}</span><br>
<router-link :to="{name: 'Account', params: { name: event.organizerActor.preferredUsername } }">
<v-avatar size="25px">
<img class="img-circle elevation-7 mb-1"
:src="event.organizerActor.avatarUrl"
>
</v-avatar>
</router-link>
<span v-if="event.organizerActor">Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span>
</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-card>
<v-alert v-else :value="true" type="error">
No events found
</v-alert>
</v-flex> </v-flex>
</v-layout> </v-layout>
</v-container>
</v-img>
<v-layout v-else>
<v-flex xs12 sm8 offset-sm2>
<v-layout row wrap>
<v-flex xs12 sm6>
<h1>
<translate :translate-params="{username: actor.preferredUsername}">Welcome back %{username}</translate>
</h1>
</v-flex>
<v-flex xs12 sm6>
<v-layout align-center>
<span class="events-nearby title">Events nearby </span>
<v-text-field
solo
append-icon="place"
:value="ipLocation()"
></v-text-field>
</v-layout>
</v-flex>
</v-layout>
<div v-if="$apollo.loading">
Still loading
</div>
<v-card v-if="events.length > 0">
<v-layout row wrap>
<v-flex md4 v-for="event in events" :key="event.uuid">
<v-card :to="{ name: 'Event', params:{ uuid: event.uuid } }">
<v-img 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-img>
<v-card-title primary-title>
<div>
<span class="grey--text">{{ event.begins_on | formatDay }}</span><br>
<router-link :to="{name: 'Account', params: { name: event.organizerActor.preferredUsername } }">
<v-avatar size="25px">
<img class="img-circle elevation-7 mb-1"
:src="event.organizerActor.avatarUrl"
>
</v-avatar>
</router-link>
<span v-if="event.organizerActor">Organisé par {{ event.organizerActor.name ? event.organizerActor.name : event.organizerActor.preferredUsername }}</span>
</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-card>
<v-alert v-else :value="true" type="error">
No events found
</v-alert>
</v-flex>
</v-layout>
</v-container> </v-container>
</template> </template>
<script> <script lang="ts">
import ngeohash from 'ngeohash'; import ngeohash from 'ngeohash';
import {AUTH_USER_ACTOR, AUTH_USER_ID} from '@/constants'; import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
import { FETCH_EVENTS } from '@/graphql/event'; import { FETCH_EVENTS } from '@/graphql/event';
import { Component, Vue } from 'vue-property-decorator';
export default { @Component({
name: 'Home', apollo: {
data() { events: {
return { query: FETCH_EVENTS,
gradient: 'to top right, rgba(63,81,181, .7), rgba(25,32,72, .7)',
searchTerm: null,
location_field: {
loading: false,
search: null,
}, },
events: [], },
locations: [], })
city: { name: null }, export default class Home extends Vue {
country: { name: null }, gradient = 'to top right, rgba(63,81,181, .7), rgba(25,32,72, .7)';
actor: JSON.parse(localStorage.getItem(AUTH_USER_ACTOR)), searchTerm = null;
user: localStorage.getItem(AUTH_USER_ID), location_field = {
loading: false,
search: null,
}; };
}, events = [];
apollo: { locations = [];
events: { city = { name: null };
query: FETCH_EVENTS, country = { name: null };
}, // FIXME: correctly parse local storage
}, actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}');
computed: { user = localStorage.getItem(AUTH_USER_ID);
displayed_name() {
get displayed_name() {
return this.actor.name === null ? this.actor.preferredUsername : this.actor.name; return this.actor.name === null ? this.actor.preferredUsername : this.actor.name;
}, }
},
methods: {
fetchLocations() { fetchLocations() {
eventFetch('/locations', this.$store) // FIXME: remove eventFetch
.then(response => (response.json())) // eventFetch('/locations', this.$store)
.then((response) => { // .then(response => (response.json()))
this.locations = response; // .then((response) => {
}); // this.locations = response;
}, // });
}
geoLocalize() { geoLocalize() {
const router = this.$router; const router = this.$router;
if (sessionStorage.getItem('City')) { const sessionCity = sessionStorage.getItem('City')
router.push({ name: 'EventList', params: { location: localStorage.getItem('City') } }); if (sessionCity) {
router.push({ name: 'EventList', params: { location: sessionCity } });
} else { } else {
navigator.geolocation.getCurrentPosition((pos) => { navigator.geolocation.getCurrentPosition((pos) => {
const crd = pos.coords; const crd = pos.coords;
@ -136,27 +142,29 @@ export default {
maximumAge: 0, maximumAge: 0,
}); });
} }
}, }
getAddressData(addressData) { getAddressData(addressData) {
const geohash = ngeohash.encode(addressData.latitude, addressData.longitude, 11); const geohash = ngeohash.encode(addressData.latitude, addressData.longitude, 11);
sessionStorage.setItem('City', geohash); sessionStorage.setItem('City', geohash);
this.$router.push({ name: 'EventList', params: { location: geohash } }); this.$router.push({ name: 'EventList', params: { location: geohash } });
}, }
viewEvent(event) { viewEvent(event) {
this.$router.push({ name: 'Event', params: { uuid: event.uuid } }); this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
}, }
ipLocation() { ipLocation() {
return this.city.name ? this.city.name : this.country.name; return this.city.name ? this.city.name : this.country.name;
}, }
}, }
};
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style scoped>
.search-autocomplete { .search-autocomplete {
border: 1px solid #dbdbdb; border: 1px solid #dbdbdb;
color: rgba(0,0,0,.87); color: rgba(0, 0, 0, .87);
} }
.events-nearby { .events-nearby {

31
js/src/components/Location.vue
View File

@ -24,29 +24,28 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class Location extends Vue {
@Prop(String) address!: string;
description = 'Paris, France';
center = { lat: 48.85, lng: 2.35 };
markers: any[] = [];
export default {
data() {
return {
description: 'Paris, France',
center: { lat: 48.85, lng: 2.35 },
markers: [],
};
},
props: ['address'],
methods: {
setPlace(place) { setPlace(place) {
this.center = { this.center = {
lat: place.geometry.location.lat(), lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(), lng: place.geometry.location.lng(),
}; };
this.markers = [{ this.markers = [ {
position: { lat: this.center.lat, lng: this.center.lng }, position: { lat: this.center.lat, lng: this.center.lng },
}]; } ];
this.$emit('input', place.formatted_address); this.$emit('input', place.formatted_address);
}, }
}, };
};
</script> </script>

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

@ -96,75 +96,74 @@
</style> </style>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'; import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants'; import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
import { SEARCH } from '@/graphql/search'; import { SEARCH } from '@/graphql/search';
@Component({ @Component({
apollo: { apollo: {
search: { search: {
query: SEARCH, query: SEARCH,
variables() { variables() {
return { return {
searchText: this.searchText, searchText: this.searchText,
}; };
},
skip() {
return !this.searchText;
},
}, },
} skip() {
}) return !this.searchText;
export default class NavBar extends Vue { },
@Prop({ required: true, type: Function }) toggleDrawer!: Function; },
},
})
export default class NavBar extends Vue {
@Prop({ required: true, type: Function }) toggleDrawer!: Function;
notificationMenu = false; notificationMenu = false;
notifications = [ notifications = [
{ header: 'Coucou' }, { header: 'Coucou' },
{ title: 'T\'as une notification', subtitle: 'Et elle est cool' }, { title: 'T\'as une notification', subtitle: 'Et elle est cool' },
]; ];
model = null; model = null;
search: any[] = []; search: any[] = [];
searchText: string | null = null; searchText: string | null = null;
searchSelect = null; searchSelect = null;
actor: string | null = localStorage.getItem(AUTH_USER_ACTOR); actor = localStorage.getItem(AUTH_USER_ACTOR);
user: string | null = localStorage.getItem(AUTH_USER_ID); user = localStorage.getItem(AUTH_USER_ID);
get items() { get items() {
return this.search.map(searchEntry => { return this.search.map(searchEntry => {
switch (searchEntry.__typename) { switch (searchEntry.__typename) {
case 'Actor':
searchEntry.label = searchEntry.preferredUsername + (searchEntry.domain === null ? '' : `@${searchEntry.domain}`);
break;
case 'Event':
searchEntry.label = searchEntry.title;
break;
}
return searchEntry;
});
}
@Watch('model')
onModelChanged(val) {
switch (val.__typename) {
case 'Event':
this.$router.push({ name: 'Event', params: { uuid: val.uuid } });
break;
case 'Actor': case 'Actor':
this.$router.push({ name: 'Account', params: { name: this.username_with_domain(val) } }); searchEntry.label = searchEntry.preferredUsername + (searchEntry.domain === null ? '' : `@${searchEntry.domain}`);
break;
case 'Event':
searchEntry.label = searchEntry.title;
break; break;
} }
} return searchEntry;
});
username_with_domain(actor) {
return actor.preferredUsername + (actor.domain === null ? '' : `@${actor.domain}`);
}
enter() {
console.log('enter');
this.$apollo.queries[ 'search' ].refetch();
}
} }
@Watch('model')
onModelChanged(val) {
switch (val.__typename) {
case 'Event':
this.$router.push({ name: 'Event', params: { uuid: val.uuid } });
break;
case 'Actor':
this.$router.push({ name: 'Account', params: { name: this.username_with_domain(val) } });
break;
}
}
username_with_domain(actor) {
return actor.preferredUsername + (actor.domain === null ? '' : `@${actor.domain}`);
}
enter() {
console.log('enter');
this.$apollo.queries['search'].refetch();
}
}
</script> </script>

10
js/src/graphql/event.ts
View File

@ -90,11 +90,11 @@ export const CREATE_EVENT = gql`
$addressType: AddressType!, $addressType: AddressType!,
) { ) {
createEvent( createEvent(
title: $title, title: $title,
description: $description, description: $description,
beginsOn: $beginsOn, beginsOn: $beginsOn,
organizerActorId: $organizerActorId, organizerActorId: $organizerActorId,
categoryId: $categoryId, categoryId: $categoryId,
addressType: $addressType) { addressType: $addressType) {
uuid, uuid,
title, title,

2
js/src/graphql/search.ts
View File

@ -16,4 +16,4 @@ query SearchEvents($searchText: String!) {
} }
} }
} }
`; `;

3
js/src/registerServiceWorker.ts
View File

@ -5,8 +5,7 @@ import { register } from 'register-service-worker';
if (process.env.NODE_ENV === 'production') { if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, { register(`${process.env.BASE_URL}service-worker.js`, {
ready() { ready() {
console.log('App is being served from cache by a service worker.\n' + console.log('App is being served from cache by a service worker.\nFor more details, visit https://goo.gl/AFskqB');
'For more details, visit https://goo.gl/AFskqB');
}, },
cached() { cached() {
console.log('Content has been cached for offline use.'); console.log('Content has been cached for offline use.');

4
js/src/shims-tsx.d.ts vendored
View File

@ -1,4 +1,4 @@
import Vue, { VNode } from 'vue' import Vue, { VNode } from 'vue';
declare global { declare global {
namespace JSX { namespace JSX {
@ -7,7 +7,7 @@ declare global {
// tslint:disable no-empty-interface // tslint:disable no-empty-interface
interface ElementClass extends Vue {} interface ElementClass extends Vue {}
interface IntrinsicElements { interface IntrinsicElements {
[elem: string]: any [elem: string]: any;
} }
} }
} }

4
js/src/shims-vue.d.ts vendored
View File

@ -1,4 +1,4 @@
declare module '*.vue' { declare module '*.vue' {
import Vue from 'vue' import Vue from 'vue';
export default Vue export default Vue;
} }

3
js/tslint.json
View File

@ -2,6 +2,7 @@
"extends": "tslint-config-airbnb", "extends": "tslint-config-airbnb",
"rules": { "rules": {
"max-line-length": [ true, 140 ], "max-line-length": [ true, 140 ],
"import-name": false "import-name": false,
"ter-arrow-parens": false
} }
} }