|
- <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 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">
- <li v-if="order.status == 'pending'">{{order.service.name}} - {{order.updated_at}}</li>
- </template>
- </ul>
- </section>
- </div>
- </transition>
- </template>
-
- <script>
- import Sidebar from './sidebar.vue'
-
- export default {
- components: {
- Sidebar,
- },
- data() {
- return {active: window.location.hash, user: '',
- token: '', orders: ''}},
- }
- </script>
|