Differential D925 Diff 2164 src/resources/vue/components/Dashboard.vue

Changeset View

Standalone View

src/resources/vue/components/Dashboard.vue

	<template>			<template>
	<div class="container">			<div class="container">
	<div class="row">			<div 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 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">&check;</span><span v-else>&cir;</span>
				{{ item.title }}
				</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', {			axios.get('/api/auth/info').then(response => {
	headers: {			this.data = response.data
	Authorization: 'Bearer ' + localStorage.getItem('token')			this.parseStatusInfo(response.data.statusInfo)
	}			delete this.data.statusInfo
	})			})
	.then(response => {			},
	this.data = response.data.data			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
				// FIXME: Definitely stopping such requests after logout
				// adding the header to all axios requests calls
				// for some more general solution
				let token = localStorage.getItem('token')
				if (!token) {
				return;
				}

				axios.get('/api/auth/info', {
				headers: { Authorization: 'Bearer ' + token }
				}).then(response => {
				this.parseStatusInfo(response.data.statusInfo)
				}).catch(error => {
				this.parseStatusInfo(info)
	})			})
				}, 10000);
				}

				return info
				}
	}			}
	}			}
	</script>			</script>