125 lines
4.0 KiB
Vue
125 lines
4.0 KiB
Vue
<!-- components/Profile.vue -->
|
|
<template>
|
|
<div>
|
|
<section class="hero is-primary">
|
|
<div class="hero-body">
|
|
<div class="container has-text-centered">
|
|
<div class="clearfix">
|
|
ID: {{recorder_id}}
|
|
<b-img left style="margin-right: 20px;" src="https://picsum.photos/125/125/?image=58"
|
|
alt="Left image"></b-img>
|
|
<h2 class="title" v-if="recorder.name">{{recorder.name}}</h2>
|
|
<h2 class="title" v-else-if="recorder.name">
|
|
{{recorder.name}} {{recorder.name}}</h2>
|
|
<h2 class="title" v-else>{{recorder.name}}</h2>
|
|
|
|
<p>
|
|
<font-awesome-icon icon="envelope"/> {{recorder.name}}
|
|
<a class="badge badge-pill badge-info">
|
|
<font-awesome-icon icon="pencil-alt"/></a>
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
<hr/>
|
|
|
|
<p><strong>{{$t('first_name')}}: </strong>{{recorder.name}}</p>
|
|
<p><strong>{{$t('last_name')}}: </strong>{{recorder.name}}</p>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{recorder}}
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {EventBus} from '@/utils';
|
|
import {getRemainingJwtValiditySeconds} from '../utils';
|
|
import getRepository from '@/api/RepositoryFactory';
|
|
|
|
const userRepository = getRepository('user');
|
|
|
|
export default {
|
|
props: ['recorder_id'],
|
|
data() {
|
|
return {
|
|
email: '',
|
|
errorMsg: '',
|
|
tokenValidity: -1,
|
|
refreshTokenValidity: -1,
|
|
formEditField: {},
|
|
languages: [
|
|
{flag: 'us', language: 'en', title: 'English'},
|
|
{flag: 'es', language: 'es', title: 'Español'},
|
|
{flag: 'de', language: 'de', title: 'Deutsch'},
|
|
],
|
|
form: {
|
|
first_name: '',
|
|
last_name: '',
|
|
nickname: '',
|
|
email: '',
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
authenticate() {
|
|
this.$store.dispatch('login', {email: this.email, password: this.password})
|
|
.then(() => this.$router.push('/'));
|
|
},
|
|
updateProfile(fieldName) {
|
|
this.$parent.$data.isLoading = true;
|
|
this.$set(this.formEditField, fieldName, false);
|
|
const data = {};
|
|
data[fieldName] = this.form[fieldName];
|
|
this.$log.debug(this.form);
|
|
userRepository.updateProfile(data)
|
|
.then(() => {
|
|
this.$store.dispatch('loadProfile')
|
|
.then(() => {
|
|
this.$parent.$data.isLoading = false;
|
|
});
|
|
});
|
|
},
|
|
changeLocale(locale) {
|
|
this.$i18n.locale = locale;
|
|
// Vue.$moment.locale(locale);
|
|
},
|
|
},
|
|
mounted() {
|
|
console.log('recorder_id: ' + this.id);
|
|
this.$store.dispatch('loadRecorders');
|
|
this.$store.dispatch('loadRecorderModels');
|
|
},
|
|
beforeDestroy() {
|
|
EventBus.$off('failedLoadingProfile');
|
|
},
|
|
computed: {
|
|
recorder() {
|
|
return this.$store.state.recorders;
|
|
},
|
|
recorderModels() {
|
|
return this.$store.state.recorderModels;
|
|
},
|
|
access_token() {
|
|
return this.$store.state.access_token;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.error-msg {
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
.lang-btn {
|
|
padding: 15px;
|
|
border: 2px solid green;
|
|
font-size: 18px;
|
|
margin: 15px;
|
|
}
|
|
</style>
|