Changeset View
Changeset View
Standalone View
Standalone View
src/resources/vue/components/Dashboard.vue
<template> | <template> | ||||
<div class="container"> | <div class="container"> | ||||
<div class="row"> | <div v-if="!$root.isLoading" id="dashboard-box" class="card"> | ||||
<div class="col-md-8 col-md-offset-2"> | <div class="card-body"> | ||||
<div class="panel panel-default"> | <div class="card-title">Dashboard</div> | ||||
<div class="panel-heading">Dashboard</div> | <div class="card-text"> | ||||
<div class="panel-body"> | <p>{{ data }}</p> | ||||
<p>Data: {{ data }}</p> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div v-if="!$root.isLoading" id="status-box" class="card"> | |||||
<div class="card-body"> | |||||
<div class="card-title">Status</div> | |||||
<div class="card-text"> | |||||
<ul style="list-style: none; padding: 0"> | |||||
<li v-for="item in statusProcess"> | |||||
<span v-if="item.state">✓</span><span v-else>○</span> | |||||
<router-link v-if="item.link" :to="{ path: item.link }">{{ item.title }}</router-link> | |||||
<span v-if="!item.link">{{ item.title }}</span> | |||||
</li> | |||||
</ul> | |||||
</div> | |||||
</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
export default { | export default { | ||||
data() { | data() { | ||||
return { | return { | ||||
data: 'nothing' | data: [], | ||||
statusProcess: [] | |||||
} | } | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
axios.get('/api/auth/info', { | const authInfo = this.$store.state.isLoggedIn ? this.$store.state.authInfo : null | ||||
headers: { | |||||
Authorization: 'Bearer ' + localStorage.getItem('token') | if (authInfo) { | ||||
} | this.data = authInfo | ||||
this.parseStatusInfo(authInfo.statusInfo) | |||||
} else { | |||||
this.$root.startLoading() | |||||
axios.get('/api/auth/info') | |||||
.then(response => { | |||||
this.data = response.data | |||||
this.$store.state.authInfo = response.data | |||||
this.parseStatusInfo(response.data.statusInfo) | |||||
this.$root.stopLoading() | |||||
}) | |||||
.catch(error => { | |||||
// TODO: what should happen on error here? | |||||
this.$root.stopLoading() | |||||
}) | }) | ||||
} | |||||
}, | |||||
methods: { | |||||
// Displays account status information | |||||
parseStatusInfo(info) { | |||||
this.statusProcess = info.process | |||||
// Update status process info every 10 seconds | |||||
// FIXME: This probably should have some limit, or the interval | |||||
// should grow (well, until it could be done with websocket notifications) | |||||
if (info.status != 'active') { | |||||
setTimeout(() => { | |||||
// Stop updates after user logged out | |||||
if (!this.$store.state.isLoggedIn) { | |||||
return; | |||||
} | |||||
axios.get('/api/auth/info') | |||||
.then(response => { | .then(response => { | ||||
this.data = response.data.data | this.$store.state.authInfo = response.data | ||||
this.parseStatusInfo(response.data.statusInfo) | |||||
}) | }) | ||||
.catch(error => { | |||||
this.parseStatusInfo(info) | |||||
}) | |||||
}, 10000); | |||||
} | |||||
} | |||||
} | } | ||||
} | } | ||||
</script> | </script> |