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>
</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
	}
}

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