87 lines
1.9 KiB
Vue
87 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
v-if="isLoading"
|
||
|
|
class="circle"
|
||
|
|
>
|
||
|
|
<i class="fa fa-spinner fa-spin fa-3x fa-fw"/>
|
||
|
|
<span class="sr-only">Loading …</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
v-else
|
||
|
|
class="container box rounded bg-dark mt-5 mb-5"
|
||
|
|
>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-3">
|
||
|
|
<div class="d-flex flex-column align-items-center text-center p-3 py-5">
|
||
|
|
Profile of {{ user.username }}
|
||
|
|
<img
|
||
|
|
class="rounded-circle mt-5"
|
||
|
|
width="150px"
|
||
|
|
src="/build/images/tracer_schmolle.png"
|
||
|
|
alt="profile image"
|
||
|
|
>
|
||
|
|
<span class="font-weight-bold">{{ user.username }}</span>
|
||
|
|
<!--<span class="font-weight-bold"><a
|
||
|
|
href="{{ path('app_main', { '_switch_user': app.user.username }) }}">switch user {{
|
||
|
|
user.username
|
||
|
|
}}</span>
|
||
|
|
-->
|
||
|
|
<span class="text-white-50">
|
||
|
|
<i class="fa fa-lg fa-envelope me-1"/>{{ user.email }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-5">
|
||
|
|
<div class="p-3 py-5">
|
||
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
||
|
|
<h4 class="text-right">
|
||
|
|
User Projects …
|
||
|
|
</h4>
|
||
|
|
</div>
|
||
|
|
<div class="row mt-2"/>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
<div class="mt-5 text-center">
|
||
|
|
<button class="btn btn-primary profile-button" type="button">Save Profile</button>
|
||
|
|
</div>
|
||
|
|
-->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import axios from 'axios';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'ProfileView',
|
||
|
|
data: () => ({
|
||
|
|
user: null,
|
||
|
|
isLoading: true
|
||
|
|
}),
|
||
|
|
computed: {
|
||
|
|
getUserEndpoint() {
|
||
|
|
if (this.$route.params.username) {
|
||
|
|
return `/api/users?username=${this.$route.params.username}`;
|
||
|
|
}
|
||
|
|
return '/api/users?username=tracer';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
axios
|
||
|
|
.get(this.getUserEndpoint)
|
||
|
|
.then((response) => {
|
||
|
|
console.log(response);
|
||
|
|
[this.user] = response.data['hydra:member'];
|
||
|
|
|
||
|
|
console.log(this.user);
|
||
|
|
this.isLoading = false;
|
||
|
|
})
|
||
|
|
.catch((error) => {
|
||
|
|
console.log(error);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|