potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

All components now use typescript

Browse source
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",
"material-design-icons": "^3.0.1",
"moment": "^2.22.2",
"ngeohash": "^0.6.0",
"ngeohash": "^0.6.3",
"register-service-worker": "^1.4.1",
"vue": "^2.5.17",
"vue-apollo": "^3.0.0-beta.26",
@ -38,12 +38,10 @@
"@types/mocha": "^5.2.4",
"@vue/cli-plugin-babel": "^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-typescript": "^3.2.0",
"@vue/cli-plugin-unit-mocha": "^3.1.1",
"@vue/cli-service": "^3.1.4",
"@vue/eslint-config-airbnb": "^3.0.5",
"@vue/eslint-config-typescript": "^3.1.0",
"@vue/test-utils": "^1.0.0-beta.26",
"chai": "^4.2.0",

104
js/src/App.vue
View file

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

75
js/src/components/Account/Account.vue
View file

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

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

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

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

@ -58,90 +58,84 @@
</v-container>
</template>
<script>
<script lang="ts">
import Gravatar from 'vue-gravatar';
import RegisterAvatar from './RegisterAvatar';
import { AUTH_TOKEN, AUTH_USER_ID, AUTH_USER_ACTOR } from '@/constants';
import { LOGIN } from '@/graphql/auth';
import Gravatar from 'vue-gravatar';
import RegisterAvatar from './RegisterAvatar.vue';
import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
import { Component, Prop, Vue } from 'vue-property-decorator';
import { LOGIN } from '@/graphql/auth';
export default {
props: {
email: {
type: String,
required: false,
default: '',
@Component({
components: {
'v-gravatar': Gravatar,
avatar: RegisterAvatar,
},
password: {
type: String,
required: false,
default: '',
},
},
beforeCreate() {
if (this.user) {
this.$router.push('/');
}
},
components: {
'v-gravatar': Gravatar,
avatar: RegisterAvatar,
},
mounted() {
this.credentials.email = this.email;
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.';
},
})
export default class Login extends Vue {
@Prop({ type: String, required: false, default: '' }) email!: string;
@Prop({ type: String, required: false, default: '' }) password!: string;
credentials = {
email: '',
password: '',
};
validationSent = false;
error = {
show: false,
text: '',
timeout: 3000,
field: {
email: false,
password: false,
},
};
},
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.';
},
};
user: any;
beforeCreate() {
if (this.user) {
this.$router.push('/');
}
}
mounted() {
this.credentials.email = this.email;
this.credentials.password = this.password;
}
loginAction(e) {
e.preventDefault();
this.$apollo.mutate({
mutation: LOGIN,
variables: {
email: this.credentials.email,
password: this.credentials.password
}
password: this.credentials.password,
},
}).then((result) => {
this.saveUserData(result.data);
this.$router.push({name: 'Home'});
this.$router.push({ name: 'Home' });
}).catch((e) => {
console.log(e);
this.error.show = true;
this.error.text = e.message;
});
},
}
validEmail() {
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_ACTOR, JSON.stringify(login.actor));
localStorage.setItem(AUTH_TOKEN, login.token);
}
},
};
}
</script>

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

@ -36,75 +36,74 @@
</v-container>
</template>
<script>
export default {
name: 'PasswordReset',
props: {
token: {
type: String,
required: true,
},
},
computed: {
samePasswords() {
return this.rules.password_length(this.credentials.password) === true &&
this.credentials.password === this.credentials.password_confirmation;
},
},
data() {
return {
credentials: {
password: '',
password_confirmation: '',
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class PasswordReset extends Vue {
@Prop({ type: String, required: true }) token!: string;
credentials = {
password: '',
password_confirmation: '',
};
error = {
show: false,
};
state = {
token: {
status: null,
msg: '',
},
error: {
show: false,
password: {
status: null,
msg: '',
},
state: {
token: {
status: null,
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',
password_confirmation: {
status: null,
msg: '',
},
};
},
methods: {
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',
};
get samePasswords() {
return this.rules.password_length(this.credentials.password) === true &&
this.credentials.password === this.credentials.password_confirmation;
}
resetAction(e) {
this.resetState();
e.preventDefault();
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) => {
localStorage.setItem('token', data.token);
localStorage.setItem('refresh_token', data.refresh_token);
this.$store.commit('LOGIN_USER', data.account);
this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
this.$router.push({ name: 'Home' });
}, (error) => {
Promise.resolve(error).then((errormsg) => {
console.log('errormsg', errormsg);
this.error.show = true;
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);
});
});
});
},
// FIXME: implements fetchStory
// fetchStory('/users/password-reset/post', this.$store, {
// method: 'POST',
// body: JSON.stringify({ password: this.credentials.password, token: this.token }),
// }).then((data) => {
// localStorage.setItem('token', data.token);
// localStorage.setItem('refresh_token', data.refresh_token);
// this.$store.commit('LOGIN_USER', data.account);
// this.$snotify.success(this.$t('registration.success.login', { username: data.account.username }));
// this.$router.push({ name: 'Home' });
// }, (error) => {
// Promise.resolve(error).then((errormsg) => {
// console.log('errormsg', errormsg);
// this.error.show = true;
// 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() {
this.state = {
token: {
@ -120,7 +119,6 @@ export default {
msg: '',
},
};
},
},
};
}
};
</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>
</v-form>
<div v-if="validationSent">
<h2><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>
<h2>
<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>
</v-card-text>
</v-card>
@ -78,85 +82,78 @@
</v-container>
</template>
<script>
import Gravatar from 'vue-gravatar';
import RegisterAvatar from './RegisterAvatar';
import { CREATE_USER } from '@/graphql/user';
<script lang="ts">
import Gravatar from 'vue-gravatar';
import RegisterAvatar from './RegisterAvatar.vue';
import { CREATE_USER } from '@/graphql/user';
import { Component, Prop, Vue } from 'vue-property-decorator';
export default {
props: {
default_email: {
type: String,
required: false,
default: '',
@Component({
components: {
'v-gravatar': Gravatar,
avatar: RegisterAvatar,
},
default_password: {
type: String,
required: false,
default: '',
},
},
components: {
'v-gravatar': Gravatar,
avatar: RegisterAvatar,
},
data() {
return {
username: '',
email: this.default_email,
password: this.default_password,
error: {
show: false,
})
export default class Register extends Vue {
@Prop({ type: String, required: false, default: '' }) default_email!: string;
@Prop({ type: String, required: false, default: '' }) default_password!: string;
username = '';
email = this.default_email;
password = this.default_password;
error = {
show: false,
};
showPassword = false;
validationSent = false;
state = {
email: {
status: false,
msg: [],
},
showPassword: false,
validationSent: false,
state: {
email: {
status: false,
msg: [],
},
username: {
status: false,
msg: [],
},
password: {
status: false,
msg: [],
},
username: {
status: false,
msg: [],
},
rules: {
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.';
},
password: {
status: false,
msg: [],
},
};
},
methods: {
rules = {
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() {
this.state = {
email: {
status: false,
msg: '',
msg: [],
},
username: {
status: false,
msg: '',
msg: [],
},
password: {
status: false,
msg: '',
msg: [],
},
};
},
}
host() {
return `@${window.location.host}`;
},
}
validEmail() {
return this.rules.email(this.email) === true ? 'v-gravatar' : 'avatar';
},
}
submit() {
this.$apollo.mutate({
mutation: CREATE_USER,
@ -171,19 +168,20 @@ export default {
}).catch((error) => {
console.error(error);
});
},
},
};
}
};
</script>
<style lang="scss">
.avatar-enter-active {
transition: opacity 1s ease;
}
.avatar-enter, .avatar-leave-to {
opacity: 0;
}
.avatar-leave {
display: none;
}
<style lang="scss">
.avatar-enter-active {
transition: opacity 1s ease;
}
.avatar-enter, .avatar-leave-to {
opacity: 0;
}
.avatar-leave {
display: none;
}
</style>

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

@ -1,9 +1,12 @@
<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>
<script>
export default {
name: 'RegisterAvatar',
};
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component
export default class RegisterAvatar extends Vue {
}
</script>

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

@ -30,53 +30,48 @@
</v-container>
</template>
<script>
export default {
name: 'ResendConfirmation',
props: {
email: {
type: String,
required: false,
default: '',
},
},
data() {
return {
credentials: {
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.';
},
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class ResendConfirmation extends Vue {
@Prop({ type: String, required: false, default: '' }) email!: string;
credentials = {
email: '',
};
validationSent = false;
error = false;
state = {
email: {
status: null,
msg: '',
},
};
},
mounted() {
this.credentials.email = this.email;
},
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) {
e.preventDefault();
fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
this.validationSent = true;
}).catch((err) => {
Promise.resolve(err).then(() => {
this.error = true;
this.validationSent = true;
});
});
},
},
};
// FIXME: implement fetchStory
// fetchStory('/users/resend', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
// this.validationSent = true;
// }).catch((err) => {
// Promise.resolve(err).then(() => {
// this.error = true;
// this.validationSent = true;
// });
// });
}
};
</script>

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

@ -30,54 +30,51 @@
</v-container>
</template>
<script>
export default {
name: 'SendPasswordReset',
props: {
email: {
type: String,
required: false,
default: '',
},
},
mounted() {
this.credentials.email = this.email;
},
data() {
return {
credentials: {
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.';
},
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class SendPasswordReset extends Vue {
@Prop({ type: String, required: false, default: '' }) email!: string;
credentials = {
email: '',
};
validationSent = false;
error = false;
state = {
email: {
status: null,
msg: '',
},
};
},
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) {
e.preventDefault();
fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
this.error = false;
this.validationSent = true;
}).catch((err) => {
Promise.resolve(err).then((data) => {
this.error = true;
this.state.email = { status: false, msg: data.errors };
});
});
},
// FIXME: implement fetchStory
// fetchStory('/users/password-reset/send', this.$store, { method: 'POST', body: JSON.stringify(this.credentials) }).then(() => {
// this.error = false;
// this.validationSent = true;
// }).catch((err) => {
// Promise.resolve(err).then((data) => {
// this.error = true;
// this.state.email = { status: false, msg: data.errors };
// });
// });
}
resetState() {
this.state = {
email: {
@ -85,7 +82,6 @@ export default {
msg: '',
},
};
},
},
};
}
};
</script>

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

@ -1,36 +1,37 @@
<template>
<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-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>
<h1 v-else><translate>Your account has been validated</translate></h1>
<h1 v-else>
<translate>Your account has been validated</translate>
</h1>
</div>
</v-container>
</template>
<script>
import { VALIDATE_USER } from '@/graphql/user';
<script lang="ts">
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() {
this.$apollo.mutate({
mutation: VALIDATE_USER,
@ -41,18 +42,19 @@ export default {
this.loading = false;
console.log(data);
this.saveUserData(data.data);
this.$router.push({name: 'Home'});
this.$router.push({ name: 'Home' });
}).catch((error) => {
this.loading = false;
console.log(error);
this.failed = true;
});
},
saveUserData({validateUser: login}) {
}
saveUserData({ validateUser: login }) {
localStorage.setItem(AUTH_USER_ID, login.user.id);
localStorage.setItem(AUTH_USER_ACTOR, JSON.stringify(login.actor));
localStorage.setItem(AUTH_TOKEN, login.token);
}
},
};
};
</script>

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

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

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

@ -15,8 +15,12 @@
</div>
</v-card-title>
<v-card-actions>
<v-btn flat class="orange--text"><translate>Explore</translate></v-btn>
<v-btn flat class="red--text" v-on:click="deleteCategory(category.id)"><translate>Delete</translate></v-btn>
<v-btn flat class="orange--text">
<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>
</v-flex>
@ -30,37 +34,34 @@
</v-container>
</template>
<script>
import { FETCH_CATEGORIES } from '@/graphql/category';
<script lang="ts">
import { FETCH_CATEGORIES } from '@/graphql/category';
import { Component, Vue } from 'vue-property-decorator';
// TODO : remove this hardcode
// TODO : remove this hardcode
export default {
name: 'Home',
data() {
return {
categories: [],
loading: true,
HTTP_ENDPOINT: 'http://localhost:4000',
};
},
apollo: {
categories: {
query: FETCH_CATEGORIES,
@Component({
apollo: {
categories: {
query: FETCH_CATEGORIES,
},
},
},
methods: {
})
export default class List extends Vue {
categories = [];
loading = true;
HTTP_ENDPOINT = 'http://localhost:4000';
deleteCategory(categoryId) {
const router = this.$router;
eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
.then(() => {
this.categories = this.categories.filter(category => category.id !== categoryId);
router.push('/category');
});
},
},
};
// FIXME: remove eventFetch
// eventFetch(`/categories/${categoryId}`, this.$store, { method: 'DELETE' })
// .then(() => {
// this.categories = this.categories.filter(category => category.id !== categoryId);
// router.push('/category');
// });
}
};
</script>
<!-- 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-card class="elevation-12">
<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-card-text>
<v-form>
@ -49,11 +49,11 @@
:required="event.location_type === 'phone'"
></v-text-field>
<v-autocomplete
:items="categories"
v-model="event.category"
item-text="title"
item-value="id"
label="Categories"
:items="categories"
v-model="event.category"
item-text="title"
item-value="id"
label="Categories"
>
</v-autocomplete>
<v-btn color="primary" @click="create">Create event</v-btn>
@ -65,62 +65,58 @@
</v-container>
</template>
<script>
// import Location from '@/components/Location';
import VueMarkdown from 'vue-markdown';
import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event';
import { FETCH_CATEGORIES } from '@/graphql/category';
import { AUTH_USER_ACTOR } from '@/constants';
<script lang="ts">
// import Location from '@/components/Location';
import VueMarkdown from 'vue-markdown';
import { CREATE_EVENT, EDIT_EVENT } from '@/graphql/event';
import { FETCH_CATEGORIES } from '@/graphql/category';
import { AUTH_USER_ACTOR } from '@/constants';
import { Component, Prop, Vue } from 'vue-property-decorator';
export default {
name: 'create-event',
props: {
uuid: {
required: false,
type: String,
@Component({
components: {
VueMarkdown
},
},
components: {
/* Location, */
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: [],
apollo: {
categories: {
query: FETCH_CATEGORIES,
},
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: [],
tagsToSend: [],
tagsFetched: [],
};
},
// created() {
// if (this.uuid) {
// this.fetchEvent();
// }
// },
apollo: {
categories: {
query: FETCH_CATEGORIES,
},
},
methods: {
create() {
participants: [],
} as any // FIXME: correctly type an event
categories = []
tags = []
tagsToSend = []
tagsFetched = []
loading = false
// created() {
// if (this.uuid) {
// this.fetchEvent();
// }
// }
create () {
// this.event.seats = parseInt(this.event.seats, 10);
// this.tagsToSend.forEach((tag) => {
// this.event.tags.push({
@ -128,10 +124,11 @@ export default {
// // '@type': 'Tag',
// });
// });
const actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR));
this.event.category_id = this.event.category;
this.event.organizer_actor_id = actor.id;
this.event.participants = [actor.id];
// FIXME: correctly parse actor JSON
const actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}')
this.event.category_id = this.event.category
this.event.organizer_actor_id = actor.id
this.event.participants = [actor.id]
// this.event.price = parseFloat(this.event.price);
if (this.uuid === undefined) {
@ -146,33 +143,25 @@ export default {
addressType: this.event.location_type,
}
}).then((data) => {
this.loading = false;
this.$router.push({ name: 'Event', params: { uuid: data.data.uuid } });
this.loading = false
this.$router.push({name: 'Event', params: {uuid: data.data.uuid}})
}).catch((error) => {
console.log(error);
});
console.log(error)
})
} else {
this.$apollo.mutate({
mutation: EDIT_EVENT,
}).then((data) => {
this.loading = false;
this.$router.push({ name: 'Event', params: { uuid: data.data.uuid } });
this.loading = false
this.$router.push({name: 'Event', params: {uuid: data.data.uuid}})
}).catch((error) => {
console.log(error);
});
console.log(error)
})
}
this.event.tags = [];
},
// fetchEvent() {
// eventFetch(`/events/${this.id}`, this.$store)
// .then(response => response.json())
// .then((data) => {
// this.loading = false;
// this.event = data;
// console.log(this.event);
// });
// },
getAddressData(addressData) {
this.event.tags = []
}
getAddressData (addressData) {
if (addressData !== null) {
this.event.address = {
geom: {
@ -187,11 +176,11 @@ export default {
addressRegion: addressData.administrative_area_level_1,
postalCode: addressData.postal_code,
streetAddress: `${addressData.street_number} ${addressData.route}`,
};
}
}
},
},
};
}
};
</script>
<style>

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

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

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

@ -1,242 +1,245 @@
<template>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-progress-circular v-if="$apollo.loading" indeterminate color="primary"></v-progress-circular>
<div>{{ event }}</div>
<v-card v-if="event">
<!-- <v-img
src="https://picsum.photos/600/400/"
height="200px"
>
<v-container fill-height fluid>
<v-layout fill-height>
<v-flex xs12 align-end flexbox>
<v-card-title>
<v-btn icon @click="$router.go(-1)" class="white--text">
<v-icon>chevron_left</v-icon>
</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-progress-circular v-if="$apollo.loading" indeterminate color="primary"></v-progress-circular>
<div>{{ event }}</div>
<v-card v-if="event">
<!-- <v-img
src="https://picsum.photos/600/400/"
height="200px"
>
<v-container fill-height fluid>
<v-layout fill-height>
<v-flex xs12 align-end flexbox>
<v-card-title>
<v-btn icon @click="$router.go(-1)" class="white--text">
<v-icon>chevron_left</v-icon>
</v-btn>
<v-spacer></v-spacer>
<span class="subheading grey--text">{{ event.begins_on | formatDay }}</span>
<h1 class="display-1">{{ event.title }}</h1>
<div>
<!-- <router-link :to="{name: 'Account', params: { name: event.organizerActor.preferredUsername } }">
<v-avatar size="25px">
<img class="img-circle elevation-7 mb-1"
:src="event.organizer_actor.avatarUrl"
>
</v-avatar>
</router-link> -->
<!-- <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-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-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 @click="deleteEvent()" v-if="actorIsOrganizer()">
<v-list-tile-title>Delete</v-list-tile-title>
</v-list-tile>
</v-list>
</v-layout>
</v-flex>
<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-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>
<span class="subheading grey--text">{{ event.begins_on | formatDay }}</span>
<h1 class="display-1">{{ event.title }}</h1>
<div>
<!-- <router-link :to="{name: 'Account', params: { name: event.organizerActor.preferredUsername } }">
<v-avatar size="25px">
<img class="img-circle elevation-7 mb-1"
:src="event.organizer_actor.avatarUrl"
>
</v-avatar>
</router-link> -->
<!-- <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-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-container>
</v-card>
</v-flex>
<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-layout>
</template>
<script>
import VueMarkdown from 'vue-markdown';
import { FETCH_EVENT } from '@/graphql/event';
import { LOGGED_ACTOR } from '@/graphql/actor';
<script lang="ts">
import { FETCH_EVENT } from '@/graphql/event';
import { Component, Prop, Vue } from 'vue-property-decorator';
import VueMarkdown from 'vue-markdown';
export default {
name: 'Home',
components: {
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,
};
},
@Component({
components: {
VueMarkdown,
},
// loggedActor: {
// query: LOGGED_ACTOR,
// }
},
methods: {
apollo: {
event: {
query: FETCH_EVENT,
variables() {
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() {
const router = this.$router;
eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
.then(() => router.push({ name: 'EventList' }));
},
// FIXME: remove eventFetch
// eventFetch(`/events/${this.uuid}`, this.$store, { method: 'DELETE' })
// .then(() => router.push({ name: 'EventList' }));
}
joinEvent() {
eventFetch(`/events/${this.uuid}/join`, this.$store, { method: 'POST' })
.then(response => response.json())
.then((data) => {
console.log(data);
});
},
// FIXME: remove eventFetch
// eventFetch(`/events/${this.uuid}/join`, this.$store, { method: 'POST' })
// .then(response => response.json())
// .then((data) => {
// console.log(data);
// });
}
leaveEvent() {
eventFetch(`/events/${this.uuid}/leave`, this.$store)
.then(response => response.json())
.then((data) => {
console.log(data);
});
},
// FIXME: remove eventFetch
// eventFetch(`/events/${this.uuid}/leave`, this.$store)
// .then(response => response.json())
// .then((data) => {
// console.log(data);
// });
}
downloadIcsEvent() {
eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
.then(response => response.text())
.then((response) => {
const blob = new Blob([response], { type: 'text/calendar' });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = `${this.event.title}.ics`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
},
// FIXME: remove eventFetch
// eventFetch(`/events/${this.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
// .then(response => response.text())
// .then((response) => {
// const blob = new Blob([ response ], { type: 'text/calendar' });
// const link = document.createElement('a');
// link.href = window.URL.createObjectURL(blob);
// link.download = `${this.event.title}.ics`;
// document.body.appendChild(link);
// link.click();
// document.body.removeChild(link);
// });
}
// actorIsParticipant() {
// return this.loggedActor && this.event.participants.map(participant => participant.actor.preferredUsername).includes(this.loggedActor.preferredUsername) || this.actorIsOrganizer();
// },
// }
//
// actorIsOrganizer() {
// return this.loggedActor && this.loggedActor.preferredUsername === this.event.organizer.preferredUsername;
// },
},
props: {
uuid: {
type: String,
required: true,
},
},
};
// }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.v-card__media__background {
filter: contrast(0.4);
}
.v-card__media__background {
filter: contrast(0.4);
}
</style>

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

@ -1,98 +1,102 @@
<template>
<v-layout>
<v-flex xs12 sm8 offset-sm2>
<v-card>
<h1>{{ $t("event.list.title") }}</h1>
<v-flex xs12 sm8 offset-sm2>
<v-card>
<h1>{{ $t('event.list.title') }}</h1>
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
<v-chip close v-model="locationChip" label color="pink" text-color="white" v-if="$router.currentRoute.params.location">
<v-icon left>location_city</v-icon>{{ locationText }}
</v-chip>
<v-container grid-list-sm fluid>
<v-layout row wrap>
<v-flex xs4 v-for="event in events" :key="event.id">
<v-card>
<v-card-media v-if="!event.image"
class="white--text"
height="200px"
src="https://picsum.photos/g/400/200/"
>
<v-container fill-height fluid>
<v-layout fill-height>
<v-flex xs12 align-end flexbox>
<span class="headline black--text">{{ event.title }}</span>
</v-flex>
</v-layout>
</v-container>
</v-card-media>
<v-card-title primary-title>
<div>
<v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
<v-chip close v-model="locationChip" label color="pink" text-color="white" v-if="$router.currentRoute.params.location">
<v-icon left>location_city</v-icon>
{{ locationText }}
</v-chip>
<v-container grid-list-sm fluid>
<v-layout row wrap>
<v-flex xs4 v-for="event in events" :key="event.id">
<v-card>
<v-card-media v-if="!event.image"
class="white--text"
height="200px"
src="https://picsum.photos/g/400/200/"
>
<v-container fill-height fluid>
<v-layout fill-height>
<v-flex xs12 align-end flexbox>
<span class="headline black--text">{{ event.title }}</span>
</v-flex>
</v-layout>
</v-container>
</v-card-media>
<v-card-title primary-title>
<div>
<span class="grey--text">{{ event.begins_on | formatDate }}</span><br>
<router-link :to="{name: 'Account', params: { name: event.organizer.username } }">
<v-avatar size="25px">
<img class="img-circle elevation-7 mb-1"
:src="event.organizer.avatar"
>
</v-avatar>
<v-avatar size="25px">
<img class="img-circle elevation-7 mb-1"
:src="event.organizer.avatar"
>
</v-avatar>
</router-link>
<span v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'name': event.organizer.username}}">{{ event.organizer.username }}</router-link></span>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange" @click="downloadIcsEvent(event)">Share</v-btn>
<v-btn flat color="orange" @click="viewEvent(event)">Explore</v-btn>
<v-btn flat color="red" @click="deleteEvent(event)">Delete</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
<router-link :to="{ name: 'CreateEvent' }" class="btn btn-default">Create</router-link>
</v-card>
</v-flex>
<span v-if="event.organizer">Organisé par <router-link
:to="{name: 'Account', params: {'name': event.organizer.username}}">{{ event.organizer.username }}</router-link></span>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat color="orange" @click="downloadIcsEvent(event)">Share</v-btn>
<v-btn flat color="orange" @click="viewEvent(event)">Explore</v-btn>
<v-btn flat color="red" @click="deleteEvent(event)">Delete</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
<router-link :to="{ name: 'CreateEvent' }" class="btn btn-default">Create</router-link>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
import ngeohash from 'ngeohash';
import VueMarkdown from 'vue-markdown';
import VCardTitle from 'vuetify/es5/components/VCard/VCardTitle';
<script lang="ts">
import ngeohash from 'ngeohash';
import VueMarkdown from 'vue-markdown';
import VCardTitle from 'vuetify/es5/components/VCard/VCardTitle';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
export default {
name: 'EventList',
components: {
VCardTitle,
VueMarkdown,
},
data() {
return {
events: [],
loading: true,
locationChip: false,
locationText: '',
};
},
props: ['location'],
created() {
this.fetchData(this.$router.currentRoute.params.location);
},
watch: {
locationChip(val) {
@Component({
components: {
VCardTitle: VCardTitle as any,
VueMarkdown,
},
})
export default class EventList extends Vue {
@Prop(String) location!: string;
events = [];
loading = true;
locationChip = false;
locationText = '';
created() {
this.fetchData(this.$router.currentRoute.params[ 'location' ]);
}
beforeRouteUpdate(to, from, next) {
this.fetchData(to.params.location);
next();
}
@Watch('locationChip')
onLocationChipChange(val) {
if (val === false) {
this.$router.push({ name: 'EventList' });
}
},
},
beforeRouteUpdate(to, from, next) {
this.fetchData(to.params.location);
next();
},
methods: {
}
geocode(lat, lon) {
console.log({ lat, lon });
console.log(ngeohash.encode(lat, lon, 10));
return ngeohash.encode(lat, lon, 10);
},
}
fetchData(location) {
let queryString = '/events';
if (location) {
@ -101,37 +105,43 @@ export default {
this.locationText = `${latitude.toString()} : ${longitude.toString()}`;
}
this.locationChip = true;
eventFetch(queryString, this.$store)
.then(response => response.json())
.then((response) => {
this.loading = false;
this.events = response.data;
console.log(this.events);
});
},
// FIXME: remove eventFetch
// eventFetch(queryString, this.$store)
// .then(response => response.json())
// .then((response) => {
// this.loading = false;
// this.events = response.data;
// console.log(this.events);
// });
}
deleteEvent(event) {
const router = this.$router;
eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
.then(() => router.push('/events'));
},
// FIXME: remove eventFetch
// eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
// .then(() => router.push('/events'));
}
viewEvent(event) {
this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
},
}
downloadIcsEvent(event) {
eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
.then(response => response.text())
.then((response) => {
const blob = new Blob([response], { type: 'text/calendar' });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = `${event.title}.ics`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
},
},
};
// FIXME: remove eventFetch
// eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
// .then(response => response.text())
// .then((response) => {
// const blob = new Blob([ response ], { type: 'text/calendar' });
// const link = document.createElement('a');
// link.href = window.URL.createObjectURL(blob);
// link.download = `${event.title}.ics`;
// document.body.appendChild(link);
// link.click();
// document.body.removeChild(link);
// });
}
};
</script>
<!-- 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 xs12>
<v-text-field
label="Title"
v-model="group.name"
:counter="100"
required
label="Title"
v-model="group.name"
:counter="100"
required
></v-text-field>
</v-flex>
<v-flex md6>
@ -36,27 +36,27 @@
></vue-markdown>
</v-flex>
<!--<v-flex md12>-->
<!--<vuetify-google-autocomplete-->
<!--id="map"-->
<!--append-icon="search"-->
<!--classname="form-control"-->
<!--placeholder="Start typing"-->
<!--enable-geolocation-->
<!--v-on:placechanged="getAddressData"-->
<!--&gt;-->
<!--</vuetify-google-autocomplete>-->
<!--<vuetify-google-autocomplete-->
<!--id="map"-->
<!--append-icon="search"-->
<!--classname="form-control"-->
<!--placeholder="Start typing"-->
<!--enable-geolocation-->
<!--v-on:placechanged="getAddressData"-->
<!--&gt;-->
<!--</vuetify-google-autocomplete>-->
<!--</v-flex>-->
<!--<v-flex md12>-->
<!--<v-select-->
<!--v-bind:items="categories"-->
<!--v-model="group.category"-->
<!--item-text="title"-->
<!--item-value="@id"-->
<!--label="Categories"-->
<!--single-line-->
<!--bottom-->
<!--types="(cities)"-->
<!--&gt;</v-select>-->
<!--<v-select-->
<!--v-bind:items="categories"-->
<!--v-model="group.category"-->
<!--item-text="title"-->
<!--item-value="@id"-->
<!--label="Categories"-->
<!--single-line-->
<!--bottom-->
<!--types="(cities)"-->
<!--&gt;</v-select>-->
<!--</v-flex>-->
</v-layout>
</v-form>
@ -64,51 +64,54 @@
</v-container>
</template>
<script>
import VueMarkdown from 'vue-markdown';
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
<script lang="ts">
import VueMarkdown from 'vue-markdown';
import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
import { Component, Vue } from 'vue-property-decorator';
export default {
name: 'create-group',
components: {
VueMarkdown,
VuetifyGoogleAutocomplete,
},
data() {
return {
e1: 0,
group: {
preferred_username: '',
name: '',
summary: '',
// category: null,
},
categories: [],
@Component({
components: {
VueMarkdown,
VuetifyGoogleAutocomplete,
},
})
export default class CreateGroup extends Vue {
e1 = 0;
// FIXME: correctly type group
group: { preferred_username: string, name: string, summary: string, address?: any } = {
preferred_username: '',
name: '',
summary: '',
// category: null,
};
},
mounted() {
this.fetchCategories();
},
methods: {
categories = [];
mounted() {
this.fetchCategories();
}
create() {
// this.group.organizer = "/accounts/" + this.$store.state.user.id;
eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
.then(response => response.json())
.then((data) => {
this.loading = false;
this.$router.push({ path: 'Group', params: { id: data.id } });
});
},
// FIXME: remove eventFetch
// eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
// .then(response => response.json())
// .then((data) => {
// this.loading = false;
// this.$router.push({ path: 'Group', params: { id: data.id } });
// });
}
fetchCategories() {
eventFetch('/categories', this.$store)
.then(response => response.json())
.then((data) => {
this.loading = false;
this.categories = data.data;
});
},
// FIXME: remove eventFetch
// eventFetch('/categories', this.$store)
// .then(response => response.json())
// .then((data) => {
// this.loading = false;
// this.categories = data.data;
// });
}
getAddressData(addressData) {
this.group.address = {
geo: {
@ -121,9 +124,9 @@ export default {
postalCode: addressData.postal_code,
streetAddress: `${addressData.street_number} ${addressData.route}`,
};
},
},
};
}
};
</script>
<style>

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

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

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

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

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

@ -1,128 +1,134 @@
<template>
<v-container>
<v-img
:gradient="gradient"
src="https://picsum.photos/1200/900"
dark
height="300"
v-if="!user"
>
<v-container fill-height>
<v-layout align-center>
<v-flex text-xs-center>
<h1 class="display-3">Find events you like</h1>
<h2>Share it with Mobilizon</h2>
<v-btn :to="{ name: 'Register' }"><translate>Register</translate></v-btn>
</v-flex>
</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-img
:gradient="gradient"
src="https://picsum.photos/1200/900"
dark
height="300"
v-if="!user"
>
<v-container fill-height>
<v-layout align-center>
<v-flex text-xs-center>
<h1 class="display-3">Find events you like</h1>
<h2>Share it with Mobilizon</h2>
<v-btn :to="{ name: 'Register' }">
<translate>Register</translate>
</v-btn>
</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>
</template>
<script>
import ngeohash from 'ngeohash';
import {AUTH_USER_ACTOR, AUTH_USER_ID} from '@/constants';
import { FETCH_EVENTS } from '@/graphql/event';
<script lang="ts">
import ngeohash from 'ngeohash';
import { AUTH_USER_ACTOR, AUTH_USER_ID } from '@/constants';
import { FETCH_EVENTS } from '@/graphql/event';
import { Component, Vue } from 'vue-property-decorator';
export default {
name: 'Home',
data() {
return {
gradient: 'to top right, rgba(63,81,181, .7), rgba(25,32,72, .7)',
searchTerm: null,
location_field: {
loading: false,
search: null,
@Component({
apollo: {
events: {
query: FETCH_EVENTS,
},
events: [],
locations: [],
city: { name: null },
country: { name: null },
actor: JSON.parse(localStorage.getItem(AUTH_USER_ACTOR)),
user: localStorage.getItem(AUTH_USER_ID),
},
})
export default class Home extends Vue {
gradient = 'to top right, rgba(63,81,181, .7), rgba(25,32,72, .7)';
searchTerm = null;
location_field = {
loading: false,
search: null,
};
},
apollo: {
events: {
query: FETCH_EVENTS,
},
},
computed: {
displayed_name() {
events = [];
locations = [];
city = { name: null };
country = { name: null };
// FIXME: correctly parse local storage
actor = JSON.parse(localStorage.getItem(AUTH_USER_ACTOR) || '{}');
user = localStorage.getItem(AUTH_USER_ID);
get displayed_name() {
return this.actor.name === null ? this.actor.preferredUsername : this.actor.name;
},
},
methods: {
}
fetchLocations() {
eventFetch('/locations', this.$store)
.then(response => (response.json()))
.then((response) => {
this.locations = response;
});
},
// FIXME: remove eventFetch
// eventFetch('/locations', this.$store)
// .then(response => (response.json()))
// .then((response) => {
// this.locations = response;
// });
}
geoLocalize() {
const router = this.$router;
if (sessionStorage.getItem('City')) {
router.push({ name: 'EventList', params: { location: localStorage.getItem('City') } });
const sessionCity = sessionStorage.getItem('City')
if (sessionCity) {
router.push({ name: 'EventList', params: { location: sessionCity } });
} else {
navigator.geolocation.getCurrentPosition((pos) => {
const crd = pos.coords;
@ -136,27 +142,29 @@ export default {
maximumAge: 0,
});
}
},
}
getAddressData(addressData) {
const geohash = ngeohash.encode(addressData.latitude, addressData.longitude, 11);
sessionStorage.setItem('City', geohash);
this.$router.push({ name: 'EventList', params: { location: geohash } });
},
}
viewEvent(event) {
this.$router.push({ name: 'Event', params: { uuid: event.uuid } });
},
}
ipLocation() {
return this.city.name ? this.city.name : this.country.name;
},
},
};
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.search-autocomplete {
border: 1px solid #dbdbdb;
color: rgba(0,0,0,.87);
color: rgba(0, 0, 0, .87);
}
.events-nearby {

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

@ -24,29 +24,28 @@
</div>
</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) {
this.center = {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng(),
};
this.markers = [{
this.markers = [ {
position: { lat: this.center.lat, lng: this.center.lng },
}];
} ];
this.$emit('input', place.formatted_address);
},
},
};
}
};
</script>

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

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

3
js/src/registerServiceWorker.ts
View file

@ -5,8 +5,7 @@ import { register } from 'register-service-worker';
if (process.env.NODE_ENV === 'production') {
register(`${process.env.BASE_URL}service-worker.js`, {
ready() {
console.log('App is being served from cache by a service worker.\n' +
'For more details, visit https://goo.gl/AFskqB');
console.log('App is being served from cache by a service worker.\nFor more details, visit https://goo.gl/AFskqB');
},
cached() {
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 {
namespace JSX {
@ -7,7 +7,7 @@ declare global {
// tslint:disable no-empty-interface
interface ElementClass extends Vue {}
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' {
import Vue from 'vue'
export default Vue
import Vue from 'vue';
export default Vue;
}

3
js/tslint.json
View file

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