From 274ebe34902b2737790176040da8c0d3117492e2 Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Thu, 14 Jun 2018 11:56:22 +0800
Subject: [PATCH] added progress tracker

---
 .../assets/js/components/ProgressTrack.vue    | 108 ++++++++++++++++++
 .../js/pages/bookings/uploadUserBankSlip.vue  |   5 +-
 2 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 resources/assets/js/components/ProgressTrack.vue

diff --git a/resources/assets/js/components/ProgressTrack.vue b/resources/assets/js/components/ProgressTrack.vue
new file mode 100644
index 00000000..93a12925
--- /dev/null
+++ b/resources/assets/js/components/ProgressTrack.vue
@@ -0,0 +1,108 @@
+<template>
+    <el-row>
+        <el-steps :active="1" aligncenter="true" process-status="wait" finish-status="success">
+            <el-step title="Booking"></el-step>
+            <el-step title="Wating for upload Bank in Slip"></el-step>
+            <el-step title="Order Confirmation"></el-step>
+            <el-step title="Processing Transfer"></el-step>
+            <el-step title="Transfer Complete"></el-step>
+            <el-step title="Order Complete"></el-step>
+        </el-steps>
+    </el-row>
+</template>
+
+
+<style type="text/css">
+    .el-row {
+        margin: 20px 0;
+    }
+
+    .el-steps {
+        padding-top: 70px;
+    }
+
+    .el-step .el-step__main {
+        transform: translateY(-70px);
+    }
+    .el-step__title.is-wait {
+        text-align: left;
+        font-size: 10pt;
+    }
+    .el-step__title {
+        line-height: 1.4;
+    }
+
+    .el-step .is-success .el-step__line {
+        background-color: #67c23a;
+    }
+
+    .el-table td {
+        border-bottom: none;
+    }
+
+    .el-table__body tr.current-row>td {
+        background-color: inherit;
+    }
+
+    .el-table--enable-row-hover .el-table__body tr:hover>td {
+        background-color: inherit;
+    }
+
+    .el-table__body-wrapper table {
+        position: relative;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .textcenter {
+        text-align: center
+    }
+
+    .textleft {
+        text-align: left;
+    }
+
+    .textright {
+        text-align: right;
+    }
+
+    .order-wrapper {
+        border: solid 3px #333333;
+        border-radius: 20px;
+        padding: 20px 50px;
+        position: relative;
+    }
+
+    .order-wrapper::before {
+        content: "";
+        background-color: white;
+        width: 40px;
+        height: 40px;
+        border-top: solid 3px #333333;
+        border-right: solid 3px #333333;
+        transform: rotate(-45deg);
+        position: absolute;
+        top: -24px;
+        left: 250px;
+    }
+
+    .separator {
+        border-right: solid 3px #333333;
+    }
+
+    .order-table .el-table__body-wrapper table tbody tr:nth-child(3) td:nth-child(5) {
+        border-bottom: solid 1px black;
+    }
+
+    .order-table .el-table__body-wrapper table tbody tr:nth-child(4) td:nth-child(5) {
+        border-bottom: solid 1px black;
+    }
+
+    .order-table .el-table__body-wrapper table tbody tr:nth-child(5) td:nth-child(5) {
+        border-bottom: solid 1px black;
+    }
+
+    .order-table .el-table__body-wrapper table tbody tr:nth-child(6) td:nth-child(5) {
+        border-bottom: solid 2px black;
+    }
+</style>
\ No newline at end of file
diff --git a/resources/assets/js/pages/bookings/uploadUserBankSlip.vue b/resources/assets/js/pages/bookings/uploadUserBankSlip.vue
index 733f0998..6434dd26 100644
--- a/resources/assets/js/pages/bookings/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/bookings/uploadUserBankSlip.vue
@@ -1,5 +1,6 @@
 <template>
   <el-main>
+    <progress-track></progress-track>
     <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
     <div align="center">
       <h3>Your order has been book</h3>
@@ -45,11 +46,13 @@
 
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
 
 export default {
   name: 'MyComponent',
   components: {
-    'vue-countdown': VueCountdown
+    'vue-countdown': VueCountdown,
+    'progress-track': ProgressTrack
   },
   data () {
     return {