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>
<PastOrders :orders="orders" v-else-if="active === '#orders'" id="main">
</PastOrders>
<NewOrder :orders="orders" v-else-if="active === '#new-order'" id="main">
</NewOrder>
<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>
<settings :token="token" :user="user" class="settings-page" id="main" v-else-if="active === '#settings'"></settings>
</transition>
</template>

<script>
import Sidebar from './sidebar.vue'
import Settings from './settings.vue'
import PastOrders from './orders.vue'


export default {
	components: {
		Sidebar, Settings, PastOrders
	},
	data() {
	return {active: window.location.hash, user: '',
	token: '', orders: ''}
	},
	methods: {},
}
</script>