From 053ea0e8746726ccd2238ab5c085a852b7aefefe Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Thu, 14 Jun 2018 15:32:24 +0800
Subject: [PATCH] added transfer amount and exchange amount to upload user bank
 slip added complete steps for user added empty get booking status

---
 .../assets/js/components/ProgressTrack.vue    |  79 +---------
 .../js/pages/bookings/uploadUserBankSlip.vue  | 147 +++++++++++-------
 resources/assets/js/pages/home.vue            |  77 ++++++++-
 3 files changed, 165 insertions(+), 138 deletions(-)

diff --git a/resources/assets/js/components/ProgressTrack.vue b/resources/assets/js/components/ProgressTrack.vue
index 93a12925..0c134e07 100644
--- a/resources/assets/js/components/ProgressTrack.vue
+++ b/resources/assets/js/components/ProgressTrack.vue
@@ -1,8 +1,8 @@
 <template>
     <el-row>
-        <el-steps :active="1" aligncenter="true" process-status="wait" finish-status="success">
+        <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="Wating Payment"></el-step>
             <el-step title="Order Confirmation"></el-step>
             <el-step title="Processing Transfer"></el-step>
             <el-step title="Transfer Complete"></el-step>
@@ -13,7 +13,7 @@
 
 
 <style type="text/css">
-    .el-row {
+    /* .el-row {
         margin: 20px 0;
     }
 
@@ -25,7 +25,6 @@
         transform: translateY(-70px);
     }
     .el-step__title.is-wait {
-        text-align: left;
         font-size: 10pt;
     }
     .el-step__title {
@@ -34,75 +33,5 @@
 
     .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 6434dd26..a23394d5 100644
--- a/resources/assets/js/pages/bookings/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/bookings/uploadUserBankSlip.vue
@@ -1,35 +1,48 @@
 <template>
   <el-main>
     <progress-track></progress-track>
-    <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
+
     <div align="center">
-      <h3>Your order has been book</h3>
-      <h3>Please upload the bank slip</h3>
+      <h4 style="margin-top:5%;">Waiting For Payment</h4>
     </div>
+  
+    <el-row justify="center" align="center">
+      <el-table :data="bookingDetails" style="width: 50%; margin: 0 auto; margin-top: 2%; margin-bottom:2%" :show-header="false" align="center">
+        <el-table-column prop="label" align="right" />
+        <el-table-column class-name="booking-details" prop="data" align="left"/>
+      </el-table>
+    </el-row>
+
+    <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
+
 
     <div align="center">
       Time Left :
-      <vue-countdown ref="countdown" :seconds="3600" :auto-start="false" label="Time Left :" @time-expire="handleTimeExpire"/>
+      <vue-countdown ref="countdown" :seconds="3600" :auto-start="false" label="Time Left :" @time-expire="handleTimeExpire" />
 
       <!-- <button v-on:click="startTimer">Start timer</button> -->
-    </div><br>
+    </div>
+    <br>
+
+
 
     <!-- upload image -->
-    <el-upload
-      :on-preview="handlePictureCardPreview"
-      :on-remove="handleRemove"
-      list-type="picture-card" align="center">
-      <i class="el-icon-plus"/>
+    <el-upload :on-preview="handlePictureCardPreview" :on-remove="handleRemove" list-type="picture-card" align="center">
+      <i class="el-icon-plus" />
     </el-upload>
     <el-dialog :visible.sync="dialogVisible">
       <img :src="dialogImageUrl" width="100%" alt="">
-    </el-dialog><br>
+    </el-dialog>
+    <br>
     <!-- upload image end -->
 
     <!-- <el-form label-width="300px">
         <el-form-item label="Amount (RM) :"> -->
     <div align="center">
-      Amount (RM) : <el-input placeholder="Enter Amount" style="width: 20%"/><br><br>
+      Bankin Amount (RM) :
+      <el-input placeholder="Enter Amount" style="width: 20%" />
+      <br>
+      <br>
     </div>
     <!-- </el-form-item>
     </el-form> -->
@@ -43,51 +56,67 @@
 
   </el-main>
 </template>
-
-<script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
-import ProgressTrack from '~/components/ProgressTrack'
-
-export default {
-  name: 'MyComponent',
-  components: {
-    'vue-countdown': VueCountdown,
-    'progress-track': ProgressTrack
-  },
-  data () {
-    return {
-      start: false,
-      dialogImageUrl: '',
-      dialogVisible: false
-    }
-  },
-  mounted () {
-    this.$refs.countdown.start()
-  },
-  methods: {
-    handleRemove (file, fileList) {
-      console.log(file, fileList)
-    },
-    handlePictureCardPreview (file) {
-      this.dialogImageUrl = file.url
-      this.dialogVisible = true
-    },
-    submitUserSlip(){
-      this.$message({
-        showClose: true,
-        message: 'Your bankinslip has been submitted, please wait admin to approve.',
-        type: 'success',
-        duration: 5000,
-      });
-      this.$router.push({ name: 'home' })
-    },
-    handleTimeExpire () {
-      alert('Time is up!')
-    },
-    startTimer () {
-      this.start = true
-    },
-
-  }
+<style>
+.booking-details{
+  font-weight: bold;
 }
-</script>
+</style>
+<script>
+  import VueCountdown from '@dmaksimovic/vue-countdown'
+  import ProgressTrack from '~/components/ProgressTrack'
+
+  export default {
+    name: 'MyComponent',
+    components: {
+      'vue-countdown': VueCountdown,
+      'progress-track': ProgressTrack
+    },
+    data() {
+      return {
+        start: false,
+        dialogImageUrl: '',
+        dialogVisible: false,
+        bookingDetails: [
+        {
+          label: 'Exchange',
+          data: 'RMB 10,000',
+        },
+        {
+          label: 'Payment',
+          data: 'MYR 5,000',
+        },
+        ]
+      }
+    },
+    mounted() {
+      this.$refs.countdown.start()
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file, fileList)
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url
+        this.dialogVisible = true
+      },
+      submitUserSlip() {
+        this.$message({
+          showClose: true,
+          message: 'Your bankinslip has been submitted, please wait admin to approve.',
+          type: 'success',
+          duration: 5000,
+        });
+        this.$router.push({
+          name: 'home'
+        })
+      },
+      handleTimeExpire() {
+        alert('Time is up!')
+      },
+      startTimer() {
+        this.start = true
+      },
+
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 6a75e97d..cbbff03b 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -145,7 +145,7 @@
         </el-table-column> -->
           <!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
             <el-table-column
-              label="No."
+              label="Status"
               width="106">
               <template slot-scope="scope">
                 <el-popover trigger="hover" placement="top">
@@ -159,7 +159,7 @@
           <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
           <el-table-column prop="timeout" label="Bankin Timeout"/>
           <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag" label=""
-                           width="200" filter-placement="bottom-end" >
+                           width="180" filter-placement="bottom-end" >
           <template slot-scope="scope">
             <el-button
               size="mini"
@@ -207,7 +207,8 @@ export default {
       dialogFormVisible: false,
       dialogFormVisible1: false,
       formLabelWidth: '0px',
-      bookingTable: [{
+      bookingTable: [
+        {
         date: '12/1/2018',
         booking_no: '001',
         rate: '1.23',
@@ -216,7 +217,58 @@ export default {
         status: '(1/6)',
         status_desc: 'Waiting for payment',
         timeout: '56:00:00'
-      }],
+        },
+        {
+        date: '12/1/2018',
+        booking_no: '002',
+        rate: '1.23',
+        amount: 'RM 1000',
+        transfer_amount: 'RMB 10000',
+        status: '(2/6)',
+        status_desc: 'Waiting verification',
+        timeout: '56:00:00'
+        },
+        {
+        date: '12/1/2018',
+        booking_no: '003',
+        rate: '1.23',
+        amount: 'RM 1000',
+        transfer_amount: 'RMB 10000',
+        status: '(3/6)',
+        status_desc: 'Processing transfer',
+        timeout: '56:00:00'
+        },
+        {
+        date: '12/1/2018',
+        booking_no: '004',
+        rate: '1.23',
+        amount: 'RM 1000',
+        transfer_amount: 'RMB 10000',
+        status: '(4/6)',
+        status_desc: 'Transfer Complete, please upload your PO',
+        timeout: '56:00:00'
+        },
+        {
+        date: '12/1/2018',
+        booking_no: '005',
+        rate: '1.23',
+        amount: 'RM 1000',
+        transfer_amount: 'RMB 10000',
+        status: '(5/6)',
+        status_desc: 'Processing invoice',
+        timeout: '56:00:00'
+        },
+        {
+        date: '12/1/2018',
+        booking_no: '006',
+        rate: '1.23',
+        amount: 'RM 1000',
+        transfer_amount: 'RMB 10000',
+        status: '(6/6)',
+        status_desc: 'Order Completed',
+        timeout: '56:00:00'
+        }
+      ],
       bookingConfirmTable: [{
         data1: 'Order Number :',
         data2: '001'
@@ -331,6 +383,23 @@ export default {
       //     console.log(error)
       //   })
     },
+    BookingStatus(id){
+      axios.post('api/booking/'+ id + '/status', newBooking)
+        .then((response) => {
+          console.log(response)
+
+          // this code to insert the input data into the database (success)
+          // this.Booking.amount = amount;
+          // this.Booking.account_name = account_name;
+          // this.Booking.bank_name = bank_name;
+          // this.Booking.branch = bank_branch;
+          // this.Booking.account_num = account_num;
+          // this.term = term;
+        })
+        .catch((error) => {
+          console.log(error)
+      })
+    },
     BookingList () {
       axios.get('api/booking')
         .then((response) => {