trendplays/resources/js/panel/panel.vue

<template>
<sidebar :active="active"></sidebar>
<transition name="fade" mode="out-in">
<div v-if="active === ''" id="main">
	<section class="welcome-pane"><h3>Welcome, {{user.name}}!</h3></section>
	<section class="credits-pane"><img src="../../images/wallet2.svg" alt="wallet" class="icon"/><p>Credits: ${{user.credits}}</p></section>
	<section class="alerts-pane"><h4>News and Announcements</h4>
	<p>We've just launched. Thanks for joining us.</p>
	</section>
	<section class="recent-pane"><h4>Recent Activity</h4>
	<table>
		<thead><th>Date</th><th>Name</th><th>Status</th> <th>Quantity</th></thead>
		<tbody>
		<tr v-bind:key='order.id' v-for='order in orders.slice(0, 10)'>
		<template v-if="order.status != 'pending'">
		<td>{{order.updated_at}}</td>
		<td>{{order.service.name}}</td>
		<td :class="order.status"
		class="status"><span>{{order.status.charAt(0).toUpperCase() +
		order.status.slice(1)}}</span></td>
		<td>{{order.quantity}}</td>
		</template>
		</tr>
		</tbody>
	</table>
	</section>
</div>
<div v-else-if="active === '#orders'" id="main">
	<div class="actions"><a class="new-order" href="#orders/new">New</a></div>
	<section class="pending-pane">
	<h4>Pending Orders</h4>
	<ul>
		<template v-bind:key='order.id' v-for="order in orders">
		<div class="pending-item" v-if="order.status == 'pending'">
			<div class="pending-heading">
			<li @click="togglePending($event)">{{order.service.name}} ({{order.updated_at}})</li>
			<img class="chevron" src="../../images/chevron-down.svg" alt="">
			</div>
		<div class="pending-content">
			<p>ID: {{order.id}}<br>URL: {{order.url}}<br>Quantity: {{order.quantity}}<br>Note: {{order.note}}</p>
		</div>
		</div>
		</template>
	</ul>
	</section>
	<section class="history-pane">
		<h4>Order History</h4>
	<table>
		<thead><th>Date</th><th>ID</th><th>Name</th><th>Status</th> <th>Quantity</th></thead>
		<tbody>
		<tr @click="toggleOrderItem($event)" v-bind:key='order.id' v-for='order in orders.slice(historyPage*10-10, historyPage*10)'>
		<td>{{order.updated_at}}</td>
		<td>{{order.id}}</td>
		<td>{{order.service.name}}</td>
		<td :class="order.status"
		class="status"><span>{{order.status.charAt(0).toUpperCase() +
		order.status.slice(1)}}</span></td>
		<td>{{order.quantity}}</td>
		</tr>
		</tbody>
	</table>
	<img @click="moveHistory(false)" class="nav-btn left" src="../../images/arrow-left-circle-fill.svg" alt="">
	<p class="nav-legend">{{historyPage}}/{{Math.ceil(orders.length/10)}}</p>
	<img @click="moveHistory(true)" class="nav-btn right" src="../../images/arrow-right-circle-fill.svg" alt="">
	</section>
</div>
<div id="main" v-else-if="active === '#exit'">
	<section class="logout-pane">
		<h3>Are you sure you want to logout?</h3>
		<a href="/logout">Logout</a>
	</section>
</div>
<div class="settings-page" id="main" v-else-if="active === '#settings'">
	<section class="change-name-pane">
	<h3>Settings</h3>
		<h4>Name</h4>
		<input :value="user.name" name="name" id="changed_name" type="text">
		<button @click="changeName">Save <img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
		<span></span>
	</section>
	<section class="change-email-pane">
		<h4>Email</h4>
		<input :value="user.email" name="email" type="text" id="changed_email">
		<button @click="changeName">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
	</section>
	<section class="change-password-pane">
		<h4>Change Password</h4>
		<h5>Current Password</h5><input name="current_passowrd" id="current_password" type="password">
		<h5>New Password</h5><input id="changed_password" name="passowrd" type="password">
		<h5>Confirm Password</h5><input id="confirm_password" name="confirm_passowrd" type="password">
		<button @click="changePassword">Save<img class="loading-icon" src="../../images/loading-white.svg" alt=""></button>
	</section>
</div>
</transition>
</template>

<script>
import Sidebar from './sidebar.vue'

function togglePending(event) {
	event.target.parentNode.parentNode.classList.toggle('selected')
}

function toggleOrderItem(event) {
	event.target.parentNode.parentNode.classList.toggle('selected')
}

function moveHistory(forward) {
	if (forward) {
		this.historyPage += 1
	} else {
		this.historyPage -= 1
	}
	if (this.historyPage < 1) {
		this.historyPage = 1
		return
	} else if (this.historyPage > this.orders.length/10+1) {
		this.historyPage -= 1
		return
	}
}

function changeName() {
	let name = document.getElementById('changed_name').value
	let info = document.querySelector('.change-name-pane span')
	let pane = document.querySelector('.change-name-pane')

	pane.classList.add('loading')
	fetch("/panel/change-name", {
		method: 'POST',
		headers: {'Content-Type': 'application/json',
			'Accept': 'application/json',
		'X-XSRF-TOKEN': this.token},
		body: JSON.stringify({'name': name}),
	}).then(response => {
		if (response.ok) {
			response.json().then(data => {this.user = data})
			pane.classList.add('completed')
			info.textContent = 'Completed'
		} else {
			pane.classList.add('error')
			info.textContent = 'Error:' + response.status
		}

		pane.classList.remove('loading')
	})
}

export default {
	components: {
		Sidebar,
	},
	data() {
	return {active: window.location.hash, user: '',
	token: '', orders: '', historyPage: 1}
	},
	methods: {togglePending, toggleOrderItem, moveHistory, changeName}
}
</script>