final component updates

Author: mukolweke

src/App.vue

@@ -5,11 +5,8 @@
             <div class="panel-heading">Cytonn Cafe</div>
             <div class="panel-body">
                 <make-order><slot></slot></make-order>
-                <display-current-order>
-                    <slot></slot>
-                </display-current-order>
+
                 <hr>
-                <display-order><slot></slot></display-order>
             </div>
         </div>
 
@@ -29,7 +26,6 @@
     import Vue from 'vue';
 
     Vue.component('make-order', require('./components/make-order').default);
-    Vue.component('display-order', require('./components/display-order').default);
     Vue.component('display-customers', require('./components/display-customers').default);
     Vue.component('display-current-order', require('./components/display-current-order').default);
     Vue.component('display-events', require('./components/display-events').default);
@@ -71,6 +67,77 @@
         background: transparent;
         border: 1px solid black;
     }
+
+    .p2 {
+        margin-left: 180px;
+
+    }
+
+    .alert .panel-heading {
+        background: yellow;
+    }
+
+    .del {
+        background: red;
+    }
+
+    .p2 ul li {
+        text-decoration: none;
+        list-style: none;
+        text-align: left;
+    }
+
+    .p3 {
+        margin-left: 10px;
+    }
+
+    .p3 ul li {
+        text-decoration: none;
+        list-style: none;
+        text-align: left;
+    }
+
+    .row:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+
+    .panel-heading {
+        background: #9dd85c;
+        height: 30px;
+    }
+
+    .panel-body {
+        padding: 20px;
+    }
+
+    table {
+        border-collapse: collapse;
+        margin: 0 auto;
+    }
+
+    thead {
+        color: red;
+    }
+
+    table, th, td {
+        border: 1px solid black;
+    }
+
+    td {
+        width: 200px;
+    }
+
+    .button {
+        width: 200px;
+        height: 20px;
+        margin: 10px auto;
+    }
+
+    .hidden {
+        visibility: hidden;
+    }
 </style>
 // import makeorder from './components/make-order'
 

src/components/display-current-order.vue

@@ -1,29 +1,18 @@
 <template>
     <div>
-        Your Order: {{userName}} - {{foodOrder}} ::: Status == {{actionStatus}}
+        Your Order: {{userName}} - {{foodOrder}} ::
     </div>
 
 </template>
 
 <script>
     export default {
         name: "display-current-order",
-        props:['userName','foodOrder','actionStatus']
+        props:['userName','foodOrder',]
     }
 </script>
 
 
 <style scoped>
-    * {
-        box-sizing: border-box;
-    }
 
-    #app {
-        font-family: 'Avenir', Helvetica, Arial, sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        text-align: center;
-        color: #2c3e50;
-        margin-top: 60px;
-    }
 </style>

src/components/display-customers.vue

@@ -32,23 +32,6 @@
         box-sizing: border-box;
     }
 
-    #app {
-        font-family: 'Avenir', Helvetica, Arial, sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        text-align: center;
-        color: #2c3e50;
-        margin-top: 60px;
-    }
-
-    .panel {
-        width: 900px;
-        /*height: 200px;*/
-        background: transparent;
-        border: 1px solid black;
-        margin: 0 auto;
-    }
-
     .panelDown {
         float: left;
         width: 450px;
@@ -67,19 +50,13 @@
         background: yellow;
     }
 
-    .del {
-        background: red;
-    }
 
     .p2 ul li {
         text-decoration: none;
         list-style: none;
         text-align: left;
     }
 
-    .p3 {
-        margin-left: 10px;
-    }
 
     .p3 ul li {
         text-decoration: none;
@@ -102,30 +79,4 @@
         padding: 20px;
     }
 
-    table {
-        border-collapse: collapse;
-        margin: 0 auto;
-    }
-
-    thead {
-        color: red;
-    }
-
-    table, th, td {
-        border: 1px solid black;
-    }
-
-    td {
-        width: 200px;
-    }
-
-    .button {
-        width: 200px;
-        height: 20px;
-        margin: 10px auto;
-    }
-
-    .hidden {
-        visibility: hidden;
-    }
 </style>

src/components/display-events.vue

@@ -34,7 +34,6 @@
         box-sizing: border-box;
     }
 
-
     .panelDown {
         float: left;
         width: 450px;
@@ -44,21 +43,10 @@
         border: 1px solid black;
     }
 
-    .p2 {
-        margin-left: 180px;
-
-    }
-
     .alert .panel-heading {
         background: yellow;
     }
 
-    .p2 ul li {
-        text-decoration: none;
-        list-style: none;
-        text-align: left;
-    }
-
     .p3 {
         margin-left: 10px;
     }
@@ -78,21 +66,5 @@
         padding: 20px;
     }
 
-    table {
-        border-collapse: collapse;
-        margin: 0 auto;
-    }
-
-    thead {
-        color: red;
-    }
-
-    table, th, td {
-        border: 1px solid black;
-    }
-
-    td {
-        width: 200px;
-    }
 
 </style>

src/components/display-order.vue

@@ -1,22 +1,19 @@
 <template>
 <div>
     <h4>Current Order List</h4>
-    {{currentOrder}}
     <table>
         <thead>
         <tr>
             <td>CLIENT</td>
             <td>ORDER</td>
-            <td>ACTION</td>
             <td>CHANGE</td>
         </tr>
         </thead>
         <tbody>
 
-        <tr v-bind:key="order.userName" v-for="(order, index) in foodOrders">
+        <tr v-bind:key="order.userName" v-for="(order, index) in currentOrder">
             <td>{{order.userName}}</td>
             <td>{{order.foodOrder}}</td>
-            <td>{{order.actionStatus}}</td>
             <td>
                 <button class="button del" type="button" v-on:click="delToDoTask(index)">Order Delete
                 </button>
@@ -51,7 +48,7 @@
 
             delToDoTask(index) {
 
-                this.foodOrders.splice(index, 1);
+                this.currentOrder.splice(index, 1);
                 // this.foodOrders = this.foodOrders.filter(order => order.id !== taskObj.id);
             },
         }
@@ -64,41 +61,6 @@
         box-sizing: border-box;
     }
 
-    #app {
-        font-family: 'Avenir', Helvetica, Arial, sans-serif;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-        text-align: center;
-        color: #2c3e50;
-        margin-top: 60px;
-    }
-
-    .panel {
-        width: 900px;
-        /*height: 200px;*/
-        background: transparent;
-        border: 1px solid black;
-        margin: 0 auto;
-    }
-
-    .panelDown {
-        float: left;
-        width: 450px;
-        padding: 10px;
-        margin-top: 20px;
-        background: transparent;
-        border: 1px solid black;
-    }
-
-    .p2 {
-        margin-left: 180px;
-
-    }
-
-    .alert .panel-heading {
-        background: yellow;
-    }
-
     .del {
         background: red;
     }
@@ -109,30 +71,12 @@
         text-align: left;
     }
 
-    .p3 {
-        margin-left: 10px;
-    }
-
     .p3 ul li {
         text-decoration: none;
         list-style: none;
         text-align: left;
     }
 
-    .row:after {
-        content: "";
-        display: table;
-        clear: both;
-    }
-
-    .panel-heading {
-        background: #9dd85c;
-        height: 30px;
-    }
-
-    .panel-body {
-        padding: 20px;
-    }
 
     table {
         border-collapse: collapse;
@@ -157,7 +101,4 @@
         margin: 10px auto;
     }
 
-    .hidden {
-        visibility: hidden;
-    }
 </style>