kulapio · biigpongsatorn · Jul 23, 2019 · Jul 23, 2019 · Jul 23, 2019 · Jul 23, 2019
diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="app">
-    <div class="left">
+    <div class="ctn-left">
       <Sidebar/>
     </div>
-    <div class="right">
+    <div class="ctn-right">
       <router-view/>
     </div>
   </div>
@@ -22,25 +22,23 @@ export default {
 
 <style scoped>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
-  max-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
 }
-.left {
+.ctn-left {
   float: left;
   width: 226px;
 }
-.right {
+.ctn-right {
   float: left;
-  width: calc(100vw - 226px);
+  width: calc(100% - 226px);
   height: 100vh;
   padding: 1.5rem;
-  overflow: auto;
   background-image: url("/bg.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
+  overflow: hidden;
 }
 </style>
diff --git a/src/assets/css/avenir-font/AvenirLTStd-Black.woff b/src/assets/css/avenir-font/AvenirLTStd-Black.woff
diff --git a/src/assets/css/avenir-font/AvenirLTStd-BlackOblique.woff b/src/assets/css/avenir-font/AvenirLTStd-BlackOblique.woff
diff --git a/src/assets/css/avenir-font/AvenirLTStd-Book.woff b/src/assets/css/avenir-font/AvenirLTStd-Book.woff
diff --git a/src/assets/css/avenir-font/AvenirLTStd-BookOblique.woff b/src/assets/css/avenir-font/AvenirLTStd-BookOblique.woff
diff --git a/src/assets/css/avenir-font/AvenirLTStd-Heavy.woff b/src/assets/css/avenir-font/AvenirLTStd-Heavy.woff
diff --git a/src/assets/css/avenir-font/AvenirLTStd-HeavyOblique.woff b/src/assets/css/avenir-font/AvenirLTStd-HeavyOblique.woff
diff --git a/src/assets/css/avenir-font/AvenirLTStd-Light.woff b/src/assets/css/avenir-font/AvenirLTStd-Light.woff
diff --git a/src/assets/css/avenir-font/AvenirLTStd-LightOblique.woff b/src/assets/css/avenir-font/AvenirLTStd-LightOblique.woff
diff --git a/src/assets/css/avenir-font/AvenirLTStd-Medium.woff b/src/assets/css/avenir-font/AvenirLTStd-Medium.woff
diff --git a/src/assets/css/avenir-font/AvenirLTStd-MediumOblique.woff b/src/assets/css/avenir-font/AvenirLTStd-MediumOblique.woff
diff --git a/src/assets/css/avenir-font/AvenirLTStd-Oblique.woff b/src/assets/css/avenir-font/AvenirLTStd-Oblique.woff
diff --git a/src/assets/css/avenir-font/AvenirLTStd-Roman.woff b/src/assets/css/avenir-font/AvenirLTStd-Roman.woff
diff --git a/src/assets/css/avenir-font/example.html b/src/assets/css/avenir-font/example.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <link rel="stylesheet" type="text/css"
+          href="style.css"/>
+</head>
+
+<body>
+
+<h1>Generated from: http://www.cufonfonts.com</h1><br/>
+<h1 style="font-family:'Avenir LT Std 55 Roman';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
+<h1 style="font-family:'Avenir LT Std 55 Oblique';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
+<h1 style="font-family:'Avenir LT Std 35 Light';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
+<h1 style="font-family:'Avenir LT Std 35 Light Oblique';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
+<h1 style="font-family:'Avenir LT Std 45 Book';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
+<h1 style="font-family:'Avenir LT Std 45 Book Oblique';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
+<h1 style="font-family:'Avenir LT Std 65 Medium';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
+<h1 style="font-family:'Avenir LT Std 65 Medium Oblique';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
+<h1 style="font-family:'Avenir LT Std 85 Heavy';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
+<h1 style="font-family:'Avenir LT Std 85 Heavy Oblique';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
+<h1 style="font-family:'Avenir LT Std 95 Black';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
+<h1 style="font-family:'Avenir LT Std 95 Black Oblique';font-weight:normal;font-size:42px">AaBbCcDdEeFfGgHhŞşIıİi Example</h1>
+
+
+</body>
+</html>
diff --git a/src/assets/css/avenir-font/style.css b/src/assets/css/avenir-font/style.css
@@ -0,0 +1,96 @@
+/* #### Generated By: http://www.cufonfonts.com #### */
+
+@font-face {
+font-family: 'Avenir LT Std 55 Roman';
+font-style: normal;
+font-weight: normal;
+src: local('Avenir LT Std 55 Roman'), url('AvenirLTStd-Roman.woff') format('woff');
+}
+
+
+@font-face {
+font-family: 'Avenir LT Std 55 Oblique';
+font-style: normal;
+font-weight: normal;
+src: local('Avenir LT Std 55 Oblique'), url('AvenirLTStd-Oblique.woff') format('woff');
+}
+
+
+@font-face {
+font-family: 'Avenir LT Std 35 Light';
+font-style: normal;
+font-weight: normal;
+src: local('Avenir LT Std 35 Light'), url('AvenirLTStd-Light.woff') format('woff');
+}
+
+
+@font-face {
+font-family: 'Avenir LT Std 35 Light Oblique';
+font-style: normal;
+font-weight: normal;
+src: local('Avenir LT Std 35 Light Oblique'), url('AvenirLTStd-LightOblique.woff') format('woff');
+}
+
+
+@font-face {
+font-family: 'Avenir LT Std 45 Book';
+font-style: normal;
+font-weight: normal;
+src: local('Avenir LT Std 45 Book'), url('AvenirLTStd-Book.woff') format('woff');
+}
+
+
+@font-face {
+font-family: 'Avenir LT Std 45 Book Oblique';
+font-style: normal;
+font-weight: normal;
+src: local('Avenir LT Std 45 Book Oblique'), url('AvenirLTStd-BookOblique.woff') format('woff');
+}
+
+
+@font-face {
+font-family: 'Avenir LT Std 65 Medium';
+font-style: normal;
+font-weight: normal;
+src: local('Avenir LT Std 65 Medium'), url('AvenirLTStd-Medium.woff') format('woff');
+}
+
+
+@font-face {
+font-family: 'Avenir LT Std 65 Medium Oblique';
+font-style: normal;
+font-weight: normal;
+src: local('Avenir LT Std 65 Medium Oblique'), url('AvenirLTStd-MediumOblique.woff') format('woff');
+}
+
+
+@font-face {
+font-family: 'Avenir LT Std 85 Heavy';
+font-style: normal;
+font-weight: normal;
+src: local('Avenir LT Std 85 Heavy'), url('AvenirLTStd-Heavy.woff') format('woff');
+}
+
+
+@font-face {
+font-family: 'Avenir LT Std 85 Heavy Oblique';
+font-style: normal;
+font-weight: normal;
+src: local('Avenir LT Std 85 Heavy Oblique'), url('AvenirLTStd-HeavyOblique.woff') format('woff');
+}
+
+
+@font-face {
+font-family: 'Avenir LT Std 95 Black';
+font-style: normal;
+font-weight: normal;
+src: local('Avenir LT Std 95 Black'), url('AvenirLTStd-Black.woff') format('woff');
+}
+
+
+@font-face {
+font-family: 'Avenir LT Std 95 Black Oblique';
+font-style: normal;
+font-weight: normal;
+src: local('Avenir LT Std 95 Black Oblique'), url('AvenirLTStd-BlackOblique.woff') format('woff');
+}
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -11,3 +11,8 @@ body {
   overflow:hidden !important;
   text-overflow: ellipsis;
 }
+/* CustomFont.eot */
+@font-face {
+  font-family: "Avenir";
+  src: url("./avenir-font/AvenirLTStd-Medium.woff");
+}
diff --git a/src/assets/img/cappuccino/image-coffee-5.jpg b/src/assets/img/cappuccino/image-coffee-5.jpg
diff --git a/src/assets/img/cappuccino/[email protected] b/src/assets/img/cappuccino/[email protected]
diff --git a/src/assets/img/caramel_frappe/image-coffee-3.jpg b/src/assets/img/caramel_frappe/image-coffee-3.jpg
diff --git a/src/assets/img/caramel_frappe/[email protected] b/src/assets/img/caramel_frappe/[email protected]
diff --git a/src/assets/img/choco_frappe/image-coffee-2.jpg b/src/assets/img/choco_frappe/image-coffee-2.jpg
diff --git a/src/assets/img/choco_frappe/[email protected] b/src/assets/img/choco_frappe/[email protected]
diff --git a/src/assets/img/espresso/image-coffee-1.jpg b/src/assets/img/espresso/image-coffee-1.jpg
diff --git a/src/assets/img/espresso/[email protected] b/src/assets/img/espresso/[email protected]
diff --git a/src/assets/img/kick_frappe/image-coffee-4.jpg b/src/assets/img/kick_frappe/image-coffee-4.jpg
diff --git a/src/assets/img/kick_frappe/[email protected] b/src/assets/img/kick_frappe/[email protected]
diff --git a/src/assets/img/logo/KULAP-LOGO.png b/src/assets/img/logo/KULAP-LOGO.png
diff --git a/src/assets/img/logo/app-logo.jpg b/src/assets/img/logo/app-logo.jpg
diff --git a/src/assets/img/logo/[email protected] → src/assets/img/logo/app-logo2.jpg b/src/assets/img/logo/[email protected] → src/assets/img/logo/app-logo2.jpg
diff --git a/src/assets/img/logo/kulap-bakery-logo.jpg b/src/assets/img/logo/kulap-bakery-logo.jpg
diff --git a/src/assets/img/logo/[email protected] b/src/assets/img/logo/[email protected]
diff --git a/src/assets/img/menu/breakfast/set1.png b/src/assets/img/menu/breakfast/set1.png
diff --git a/src/assets/img/menu/breakfast/set2.png b/src/assets/img/menu/breakfast/set2.png
diff --git a/src/assets/img/menu/breakfast/set3.png b/src/assets/img/menu/breakfast/set3.png
diff --git a/src/assets/img/menu/breakfast/set4.jpg b/src/assets/img/menu/breakfast/set4.jpg
diff --git a/src/assets/img/menu/breakfast/set5.png b/src/assets/img/menu/breakfast/set5.png
diff --git a/src/assets/img/menu/classcafe/Cha-Thai.png b/src/assets/img/menu/classcafe/Cha-Thai.png
diff --git a/src/assets/img/menu/classcafe/IcedCaramelMachiato.png b/src/assets/img/menu/classcafe/IcedCaramelMachiato.png
diff --git a/src/assets/img/menu/classcafe/IcedCocoa.png b/src/assets/img/menu/classcafe/IcedCocoa.png
diff --git a/src/assets/img/menu/classcafe/IcedEspresso.png b/src/assets/img/menu/classcafe/IcedEspresso.png
diff --git a/...sets/img/cappuccino/[email protected] → src/assets/img/menu/coffee/cappuccino.jpg b/...sets/img/cappuccino/[email protected] → src/assets/img/menu/coffee/cappuccino.jpg
diff --git a/.../img/caramel_frappe/[email protected] → ...assets/img/menu/coffee/caramel_frappe.jpg b/.../img/caramel_frappe/[email protected] → ...assets/img/menu/coffee/caramel_frappe.jpg
diff --git a/...ts/img/choco_frappe/[email protected] → src/assets/img/menu/coffee/choco_frappe.jpg b/...ts/img/choco_frappe/[email protected] → src/assets/img/menu/coffee/choco_frappe.jpg
diff --git a/...assets/img/espresso/[email protected] → src/assets/img/menu/coffee/espresso.jpg b/...assets/img/espresso/[email protected] → src/assets/img/menu/coffee/espresso.jpg
diff --git a/...ets/img/kick_frappe/[email protected] → src/assets/img/menu/coffee/kick_frappe.jpg b/...ets/img/kick_frappe/[email protected] → src/assets/img/menu/coffee/kick_frappe.jpg
diff --git a/src/assets/img/menu/fastfood/1.jpg b/src/assets/img/menu/fastfood/1.jpg
diff --git a/src/assets/img/menu/fastfood/2.jpg b/src/assets/img/menu/fastfood/2.jpg
diff --git a/src/assets/img/menu/fastfood/3.jpg b/src/assets/img/menu/fastfood/3.jpg
diff --git a/src/assets/img/menu/fastfood/4.jpg b/src/assets/img/menu/fastfood/4.jpg
diff --git a/src/assets/img/menu/snack/chocolate.png b/src/assets/img/menu/snack/chocolate.png
diff --git a/src/assets/img/menu/snack/corn-snack.png b/src/assets/img/menu/snack/corn-snack.png
diff --git a/src/assets/img/menu/snack/french-fries.png b/src/assets/img/menu/snack/french-fries.png
diff --git a/src/assets/img/menu/snack/oreo.png b/src/assets/img/menu/snack/oreo.png
diff --git a/src/assets/img/menu/snack/potato-chips.png b/src/assets/img/menu/snack/potato-chips.png
diff --git a/src/assets/img/menu/specialdrink/1.jpg b/src/assets/img/menu/specialdrink/1.jpg
diff --git a/src/assets/img/menu/specialdrink/2.jpg b/src/assets/img/menu/specialdrink/2.jpg
diff --git a/src/assets/img/menu/specialdrink/3.jpg b/src/assets/img/menu/specialdrink/3.jpg
diff --git a/src/assets/img/menu/specialdrink/4.jpg b/src/assets/img/menu/specialdrink/4.jpg
diff --git a/src/assets/img/menu/specialdrink/5.jpg b/src/assets/img/menu/specialdrink/5.jpg
diff --git a/src/components/Bill.vue b/src/components/Bill.vue
@@ -16,22 +16,27 @@
         </div>
         <div class="column"/>
       </div>
-      <div
-        v-for="(item, i) in items"
-        :key="i"
-        class="table-body columns"
-      >
-        <div class="column is-half is-dots">
-          {{ item.title }}
-        </div>
-        <div class="column">
-          {{ item.amount }}
-        </div>
-        <div class="column">
-          {{ item.price }}
-        </div>
-        <div class="column">
-          del
+      <div class="ovf-auto">
+        <div
+          v-for="(item, i) in items"
+          :key="i"
+          class="table-body columns">
+          <div class="column is-half is-dots">
+            {{ item.title }}
+          </div>
+          <div class="column">
+            {{ item.amount }}
+          </div>
+          <div class="column">
+            {{ item.price }}
+          </div>
+          <div class="column">
+            <img
+              class="del-btn"
+              src="@/assets/img/delete.svg"
+              @click="clickDeleteItem(item)"
+            >
+          </div>
         </div>
       </div>
       <div class="summary">
@@ -49,15 +54,14 @@
     <div class="pay-button" @click="openCheckout()">
       PAY ({{ total | numberWithCommas }})
     </div>
-    <div class="clear-button" @click="clear()">
+    <!-- <div class="clear-button" @click="clear()">
       CLEAR
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
 import { mapState, mapActions } from 'vuex'
-import BigNumber from 'bignumber.js'
 
 export default {
   name: 'Bill',
@@ -76,7 +80,8 @@ export default {
   },
   methods: {
     ...mapActions({
-      clearItems: 'clearItems'
+      clearItems: 'clearItems',
+      deleteItem: 'deleteItem'
     }),
     openCheckout () {
       if (this.items.length) {
@@ -85,12 +90,21 @@ export default {
     },
     clear () {
       this.clearItems()
+    },
+    clickDeleteItem (item) {
+      this.deleteItem(item)
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.ovf-auto {
+  overflow: auto;
+  width: 100%;
+  height: calc(100% - 130px);
+}
+
 .bill {
   width: 100%;
 
@@ -178,4 +192,7 @@ export default {
     cursor: pointer;
   }
 }
+.del-btn {
+  cursor: pointer;
+}
 </style>
diff --git a/src/components/ItemList.vue b/src/components/ItemList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="columns is-multiline is-mobile">
     <div
-      v-for="(item, i) in items"
+      v-for="(item, i) in items[menuPage]"
       :key="i"
       class="column is-4"
     >
@@ -13,7 +13,7 @@
           {{ item.subtitle }}
         </div>
         <div class="img-item">
-          <img :src="require(`../assets/img/${item.image}.jpg`)">
+          <img :src="require(`../assets/img/${item.image}`)">
         </div>
         <div class="price">
           <img :src="require('@/assets/img/libra/icon-libra.png')">
@@ -27,6 +27,7 @@
 <script>
 import { mapActions, mapState } from 'vuex'
 import BigNumber from 'bignumber.js'
+import { menuList } from '@/constants'
 
 export default {
   name: 'ItemList',
@@ -39,36 +40,7 @@ export default {
   },
   data () {
     return {
-      items: [{
-        title: 'Espresso',
-        subtitle: 'Blue Ridge Blend',
-        price: 4.35,
-        image: 'espresso/image-coffee-1'
-      },
-      {
-        title: 'Choco Frappe',
-        subtitle: 'Locally Roasted',
-        price: 7.00,
-        image: 'choco_frappe/image-coffee-2'
-      },
-      {
-        title: 'Caramel Frappe',
-        subtitle: 'Decaf Colombia',
-        price: 7.50,
-        image: 'caramel_frappe/image-coffee-3'
-      },
-      {
-        title: 'Kick Frappe',
-        subtitle: 'Locally Roasted',
-        price: 7.50,
-        image: 'kick_frappe/image-coffee-4'
-      },
-      {
-        title: 'Cappuccino',
-        subtitle: 'Decaf Colombia',
-        price: 4.50,
-        image: 'cappuccino/image-coffee-5'
-      }]
+      items: menuList
     }
   },
   methods: {
@@ -84,17 +56,16 @@ export default {
       this.$router.push({ name: 'Checkout' })
     },
     order (item) {
-      this.updateTotal(this.total.plus(BigNumber(item.price)))
       this.addItem(item)
-      console.log(this.total.toString(10))
     },
     clear () {
       this.updateTotal(BigNumber(0))
     }
   },
   computed: {
     ...mapState({
-      total: state => state.total
+      total: state => state.total,
+      menuPage: state => state.menuPage
     }),
     groupItmes () {
       let groups = []