Differential D1051 Diff 2728 src/resources/vue/Wallet.vue

Changeset View

Standalone View

src/resources/vue/Wallet.vue

Context not available.
	<div class="container" dusk="wallet-component">	<div class="container" dusk="wallet-component">
	<div id="wallet" class="card">	<div id="wallet" class="card">
	<div class="card-body">	<div class="card-body">
	<div class="card-title">Account balance</div>	<div class="card-title">Account balance <span :class="balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(balance) }}</strong></span> </div>
	<div class="card-text">	<div class="card-text">
	<p>Current account balance is	<p>Your current account balance will last until <strong>{{lastUntilDate}}</strong>.<p>
	<span :class="balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(balance) }}</strong></span>
	</p>	<button type="button" class="btn btn-primary" @click="payment()">Add 10 bucks to my account</button>
	<button type="button" class="btn btn-primary" @click="payment()">Add 10 bucks to my wallet</button>
		<p>You can add and cancel services at any time. Your account will be charged accordingly.</p>

		<table class="table table-hover">
		<thead class="thead-light">
		<tr>
		<th scope="col">User Accounts</th>
		<th scope="col">
		<router-link class="btn btn-sm btn-outline-primary float-right" :to="{ name: 'users' }"> edit </router-link>
		</th>
		</tr>
		</thead>
		<tbody>
		<tr v-for="user in users" :id="'user' + user.id" :key="user.id">
		<td>
		{{user.name}}
		</td>
		<td>
		<div class="float-right"> {{$root.price(user.cost)}} </div>
		</td>
		</tr>
		</tbody>
		</table>

		<table class="table table-hover">
		<thead class="thead-light">
		<tr>
		<th scope="col"> Domains </th>
		<th scope="col">
		<router-link class="btn btn-sm btn-outline-primary float-right" :to="{ name: 'domains' }"> edit </router-link>
		</th>
		</tr>
		</thead>
		<tbody>
		<tr v-for="domain in domains" :key="domain.id">
		<td>{{ domain.namespace }}</td>
		<td>
		<div class="float-right"> {{ $root.price(domain.cost) }} </div>
		</td>
		</tr>
		</tbody>
		</table>
	</div>	</div>
	</div>	</div>
	</div>	</div>
Context not available.
	data() {	data() {
	return {	return {
	balance: 0,	balance: 0,
		lastUntilDate: "Mar 15, 2021",
		users: [],
		domains: [],
		skus: []
	}	}
	},	},
		created() {
		axios.get('api/v4/skus')
		.then(response => {
		this.skus = response.data
		})
		.catch(this.$root.errorHandler);

		axios.get('/api/v4/users')
		.then(response => {
		for(const u of response.data) {
		axios.get('api/v4/users/' + u.id)
		.then(response => {
		let user = response.data;
		user.cost = this.skus
		.filter(sku => sku.type == 'user' && sku.id in user.skus)
		.map(sku => { return sku.cost * (user.skus[sku.id].count - sku.units_free) } )
		.reduce((a, b) => a + b, 0);
		this.users.push(user);
		})
		.catch(this.$root.errorHandler);
		}
		})
		.catch(this.$root.errorHandler);

		axios.get('/api/v4/domains')
		.then(response => {
		for (const domain of response.data) {
		domain.cost = this.skus
		.filter(sku => sku.title == 'domain-hosting')
		.map(sku => {return sku.cost})
		.reduce((a, b) => a + b, 0);
		this.domains.push(domain);
		}
		})
		.catch(this.$root.errorHandler);
		},
	mounted() {	mounted() {
	this.balance = 0	this.balance = 0
	// TODO: currencies, multi-wallets, accounts	// TODO: currencies, multi-wallets, accounts
Context not available.