Differential D1207 Diff 3118 src/resources/vue/Dashboard.vue

Changeset View

Standalone View

src/resources/vue/Dashboard.vue

	<template>			<template>
	<div v-if="!$root.isLoading" class="container" dusk="dashboard-component">			<div class="container" dusk="dashboard-component">
	<div v-if="!isReady" id="status-box" class="card">			<status-component v-bind:status="status" @status-update="statusUpdate"></status-component>
	<div class="card-body">
	<div class="card-title">Account status: <span class="text-danger">Not ready</span></div>
	<div class="card-text">
	<p>The process to create your account has not been completed yet.
	Some features may be disabled or readonly.</p>
	<ul class="status-list">
	<li v-for="item in statusProcess" :key="item.label">
	<svg-icon :icon="['far', item.state ? 'check-square' : 'square']"
	:class="item.state ? 'text-success' : 'text-muted'"
	></svg-icon>
	<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 id="dashboard-nav">			<div id="dashboard-nav">
	<router-link class="card link-profile" :to="{ name: 'profile' }">			<router-link class="card link-profile" :to="{ name: 'profile' }">
	<svg-icon icon="user-cog"></svg-icon><span class="name">Your profile</span>			<svg-icon icon="user-cog"></svg-icon><span class="name">Your profile</span>
	</router-link>			</router-link>
	<router-link class="card link-domains" :to="{ name: 'domains' }">			<router-link class="card link-domains" :to="{ name: 'domains' }">
	<svg-icon icon="globe"></svg-icon><span class="name">Domains</span>			<svg-icon icon="globe"></svg-icon><span class="name">Domains</span>
	</router-link>			</router-link>
	<router-link class="card link-users" :to="{ name: 'users' }">			<router-link class="card link-users" :to="{ name: 'users' }">
	<svg-icon icon="users"></svg-icon><span class="name">User accounts</span>			<svg-icon icon="users"></svg-icon><span class="name">User accounts</span>
	</router-link>			</router-link>
	<router-link class="card link-wallet" :to="{ name: 'wallet' }">			<router-link class="card link-wallet" :to="{ name: 'wallet' }">
	<svg-icon icon="wallet"></svg-icon><span class="name">Wallet</span>			<svg-icon icon="wallet"></svg-icon><span class="name">Wallet</span>
	<span v-if="balance < 0" class="badge badge-danger">{{ $root.price(balance) }}</span>			<span v-if="balance < 0" class="badge badge-danger">{{ $root.price(balance) }}</span>
	</router-link>			</router-link>
	</div>			</div>
	</div>			</div>
	</template>			</template>

	<script>			<script>
				import StatusComponent from './Widgets/Status'

	export default {			export default {
				components: {
				StatusComponent
				},
	data() {			data() {
	return {			return {
	isReady: true,			status: {},
	statusProcess: [],
	request: null,
	balance: 0			balance: 0
	}			}
	},			},
	mounted() {			mounted() {
	const authInfo = this.$store.state.isLoggedIn ? this.$store.state.authInfo : null			const authInfo = this.$store.state.isLoggedIn ? this.$store.state.authInfo : null

	if (authInfo) {			if (authInfo) {
	this.parseStatusInfo(authInfo.statusInfo)			this.status = authInfo.statusInfo
	this.getBalance(authInfo)			this.getBalance(authInfo)
	} else {			} else {
	this.$root.startLoading()			this.$root.startLoading()
	axios.get('/api/auth/info')			axios.get('/api/auth/info')
	.then(response => {			.then(response => {
	this.$store.state.authInfo = response.data			this.$store.state.authInfo = response.data
	this.parseStatusInfo(response.data.statusInfo)			this.status = response.data.statusInfo
	this.getBalance(response.data)			this.getBalance(response.data)
	this.$root.stopLoading()			this.$root.stopLoading()
	})			})
	.catch(this.$root.errorHandler)			.catch(this.$root.errorHandler)
	}			}
	},			},
	methods: {			methods: {
	// Displays account status information
	parseStatusInfo(info) {
	this.statusProcess = info.process
	this.isReady = info.isReady

	// 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.isReady && !window.infoRequest) {
	window.infoRequest = setTimeout(() => {
	delete window.infoRequest
	// Stop updates after user logged out
	if (!this.$store.state.isLoggedIn) {
	return;
	}

	axios.get('/api/auth/info')
	.then(response => {
	this.$store.state.authInfo = response.data
	this.parseStatusInfo(response.data.statusInfo)
	})
	.catch(error => {
	this.parseStatusInfo(info)
	})
	}, 10000);
	}
	},
	getBalance(authInfo) {			getBalance(authInfo) {
	this.balance = 0;			this.balance = 0;
	// TODO: currencies, multi-wallets, accounts			// TODO: currencies, multi-wallets, accounts
	authInfo.wallets.forEach(wallet => {			authInfo.wallets.forEach(wallet => {
	this.balance += wallet.balance			this.balance += wallet.balance
	})			})
				},
				statusUpdate(user) {
				this.status = Object.assign({}, this.status, user)
				this.$store.state.authInfo.statusInfo = this.status
	}			}
	}			}
	}			}
	</script>			</script>