86 lines
1.9 KiB
Vue
86 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 border-1 mt-5"
|
|
src="/build/images/tracer_schmolle150x150.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>
|