rmt-26-zurich-fox · naamalia23 · Aug 17, 2022 · Aug 17, 2022 · Aug 17, 2022 · Aug 17, 2022
diff --git a/client/.firebase/hosting.ZGlzdA.cache b/client/.firebase/hosting.ZGlzdA.cache
@@ -0,0 +1,4 @@
+favicon.ico,1660733083878,d5451f0f0f0bcbcd433bbdf4f6e7e5d89d8ecce2650649e969ccb5e5cd499ab2
+index.html,1660883544453,adf26ad9a4f74bfabf52fac1faf7a8c43176a594c13159c940e63aa95df9423f
+assets/index.278b10e3.css,1660883544452,4bec23719a5ff8ceb317764f34b3dc1ec8995c0603d1d2925bdbf71befcef2cf
+assets/index.6f5fc177.js,1660883544452,ca368d6eac0531ad4b947c2822eeadd9f5140eaab881c6eefb1a50ede2d41e39
diff --git a/client/.firebaserc b/client/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "nurul-coffeeshop"
+  }
+}
diff --git a/client/firebase.json b/client/firebase.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/client/index.html b/client/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
     <link
       href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
@@ -12,35 +12,17 @@
       crossorigin="anonymous"
     />
 
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
-      integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
-      crossorigin=""/>
-
+    <script
+      type="text/javascript"
+      src="https://app.sandbox.midtrans.com/snap/snap.js"
+      data-client-key="SB-Mid-client-6Whwl_gvCnMreIIt"
+    ></script>
   </head>
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
 
-    <div id="map" style="width: auto; height: 500px"></div>
-    <!-- Make sure you put this AFTER Leaflet's CSS -->
-    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
-      integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
-      crossorigin=""></script>
-
-    <script>
-      var base_lat = 5.5516;
-      var base_lng = 95.3177;
-      var base_url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
-
-      var map = L.map('map').setView([base_lat, base_lng], 13);
-      L.tileLayer(base_url, {
-          maxZoom: 19,
-          attribution: '© OpenStreetMap'
-      }).addTo(map);
-
-      var marker = L.marker([base_lat, base_lng]).addTo(map);
-    </script>
     <script src="https://accounts.google.com/gsi/client" async defer></script>
-
+    <script src="https://unpkg.com/vue3-google-map"></script>
   </body>
 </html>
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -8,12 +8,14 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@fawmi/vue-google-maps": "^0.9.72",
     "axios": "^0.27.2",
     "pinia": "^2.0.17",
     "sweetalert": "^2.1.2",
     "sweetalert2": "^11.4.28",
     "vue": "^3.2.37",
-    "vue-router": "^4.1.3"
+    "vue-router": "^4.1.3",
+    "vue3-google-map": "^0.13.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.4",

diff --git a/client/src/assets/styles.css b/client/src/assets/styles.css
diff --git a/client/src/components/FooterBar.vue b/client/src/components/FooterBar.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="footer">
+    <footer
+      class="text-center text-white fixed-bottom"
+      style="background-color: #21081a"
+    >
+      <!-- Copyright -->
+      <div class="text-center p-3" style="background-color: rgb(0, 0, 0)">
+        © 2022 Copyright:
+        <a class="text-white" href="#">The Cafe!</a>
+      </div>
+      <!-- Copyright -->
+    </footer>
+  </div>
+</template>
+
+<style>
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 200px;
+  padding-top: 100px;
+}
+</style>
diff --git a/client/src/components/NavBar.vue b/client/src/components/NavBar.vue
@@ -33,7 +33,7 @@ export default {
   <div>
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
       <div class="container-fluid">
-        <a class="navbar-brand" href="#">CoffeeShop</a>
+        <a class="navbar-brand" href="#">The Cafe!</a>
         <button
           class="navbar-toggler"
           type="button"

diff --git a/client/src/components/ProductCard.vue b/client/src/components/ProductCard.vue
@@ -22,16 +22,16 @@ export default{
 </script>
 
 <template>
-  <div class="col-12 col-md-3 py-4">
+  <div class="col-12 col-md-2 py-4">
     <div class="card">
       <img :src="product.imageUrl" class="card-img-top" />
       <div class="card-body">
-        <h5 class="card-title">{{ product.id }}-{{ product.name }}</h5>
+        <h5 class="card-title">{{ product.name }}</h5>
         <p class="card-text">{{ product.description }}</p>
         <span>{{ this.formatRupiah(product.price) }}</span>
 
-        <div class="d-flex justify-content-between" aria-label="Basic example">
-          <button @click="addProductToCartLocal" class="round-black-btn small-btn">Add to Cart</button>
+        <div class="d-flex center" aria-label="Basic example">
+          <button @click="addProductToCartLocal" class="round-black-btn small-btn center">Add to Cart</button>
         </div>
       </div>
     </div>
@@ -49,6 +49,7 @@ export default{
   transition: all 0.5s ease-in-out 0s;
   cursor: pointer;
   font-size: 14px;
+  margin: auto;
 }
 .round-black-btn:hover,
 .round-black-btn:focus {

diff --git a/client/src/main.js b/client/src/main.js
@@ -1,14 +1,20 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
+import VueGoogleMaps from '@fawmi/vue-google-maps'
 
 import App from "./App.vue";
 import router from "./router";
 
-// import "./assets/main.css";
 
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
 
-app.mount("#app");
+// app.mount("#app");
+
+app.use(VueGoogleMaps, {
+    load: {
+        key: 'AIzaSyCC8DuJiwmnfvfXzx4H9f_Rqt9WxP7s3iE',
+    },
+}).mount('#app')