vue analytics, created sub directory for images

Author: treboryx

package-lock.json

@@ -15,7 +15,8 @@
     "gh-pages": "^3.1.0",
     "marker-clusterer-plus": "^2.1.4",
     "tailwindcss": "^1.6.2",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-analytics": "^5.22.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.2.0",

package.json

@@ -5,7 +5,11 @@
         <div class="flex items-center justify-between h-16">
           <div class="flex items-center">
             <div class="flex-shrink-0">
-              <img class="h-10 w-10" src="@/assets/fttx-logo.png" alt="FTTx.gr logo" />
+              <img
+                class="h-10 w-10"
+                src="@/assets/img/fttx-logo.png"
+                alt="FTTx.gr logo"
+              />
             </div>
             <div class="hidden md:block">
               <div class="ml-10 flex items-baseline">
@@ -17,7 +21,8 @@
                   ]"
                   @click.prevent="currentPage('map')"
                   class="px-3 py-2 rounded-md text-sm font-medium focus:outline-none focus:text-white focus:bg-gray-700"
-                >Map</a>
+                  >Map</a
+                >
                 <a
                   :class="[
                     currPage == 'add' ? 'text-white bg-gray-900' : '',
@@ -26,11 +31,13 @@
                   @click.prevent="currentPage('add')"
                   href="/"
                   class="ml-4 px-3 py-2 rounded-md text-sm font-medium hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
-                >Add Cabinet</a>
+                  >Add Cabinet</a
+                >
                 <a
                   href="https://github.com/fttx-gr"
                   class="text-gray-300 ml-4 px-3 py-2 rounded-md text-sm font-medium hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
-                >GitHub</a>
+                  >GitHub</a
+                >
               </div>
             </div>
           </div>
@@ -41,7 +48,12 @@
                 class="p-1 border-2 border-transparent text-gray-400 rounded-full hover:text-white focus:outline-none focus:text-white focus:bg-gray-700"
                 aria-label="Notifications"
               >
-                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                <svg
+                  class="h-6 w-6"
+                  stroke="currentColor"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
                   <path
                     stroke-linecap="round"
                     stroke-linejoin="round"
@@ -67,16 +79,16 @@ export default {
       profileDropdown: false,
       vcoConfig: {
         events: ["dblclick", "click"],
-        isActive: true
-      }
+        isActive: true,
+      },
     };
   },
   methods: {
     currentPage(page) {
       this.currPage = page;
       this.$emit("setPage", page);
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped lang="postcss">
@@ -98,4 +110,4 @@ body {
   transform: translateY(-50px);
   opacity: 0;
 }
-</style>
+</style>

src/assets/fttx-logo.png renamed to src/assets/img/fttx-logo.png

@@ -47,11 +47,16 @@
         <button
           class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline ml-2"
           @click="usePlace"
-        >Add</button>
+        >
+          Add
+        </button>
       </label>
     </div>
     <div class="relative h-full w-full">
-      <div class="absolute bottom-0 right-0 h-64 w-48" style="text-align: left;">
+      <div
+        class="absolute bottom-0 right-0 h-64 w-48"
+        style="text-align: left;"
+      >
         <button
           @click="
             buttons.ote.isOn = !buttons.ote.isOn;
@@ -65,7 +70,9 @@
           type="button"
           style="position: fixed; z-index: 999; bottom: 600px;"
           class="bg-blue-700 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded"
-        >{{ buttons.ote.text }}</button>
+        >
+          {{ buttons.ote.text }}
+        </button>
         <button
           @click="
             buttons.wind.isOn = !buttons.wind.isOn;
@@ -78,7 +85,9 @@
           "
           style="position: fixed; z-index: 999; bottom: 550px;"
           class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded"
-        >{{ buttons.wind.text }}</button>
+        >
+          {{ buttons.wind.text }}
+        </button>
         <button
           @click="
             buttons.vf.isOn = !buttons.vf.isOn;
@@ -91,7 +100,9 @@
           "
           style="position: fixed; z-index: 999; bottom: 500px;"
           class="bg-red-700 hover:bg-red-500 text-white font-bold py-2 px-4 rounded"
-        >{{ buttons.vf.text }}</button>
+        >
+          {{ buttons.vf.text }}
+        </button>
         <button
           @click="
             buttons.rurcon.isOn = !buttons.rurcon.isOn;
@@ -104,7 +115,9 @@
           "
           style="position: fixed; z-index: 999; bottom: 450px;"
           class="bg-orange-800 hover:bg-orange-700 text-white font-bold py-2 px-4 rounded"
-        >{{ buttons.rurcon.text }}</button>
+        >
+          {{ buttons.rurcon.text }}
+        </button>
       </div>
     </div>
 
@@ -223,10 +236,10 @@ export default {
       };
 
       const markerIcon = {
-        Vodafone: require("../assets/vf-marker-minified.png"),
-        OTE: require("../assets/ote-marker-minified.png"),
-        WIND: require("../assets/wind-marker-minified.png"),
-        RURALCONNECT: require("../assets/rurcon-marker-minified.png"),
+        Vodafone: require("../assets/img/vf-marker-minified.png"),
+        OTE: require("../assets/img/ote-marker-minified.png"),
+        WIND: require("../assets/img/wind-marker-minified.png"),
+        RURALCONNECT: require("../assets/img/rurcon-marker-minified.png"),
       };
       if (this.buttons[cab].isOn) {
         let temp = [];
@@ -261,7 +274,7 @@ export default {
             const infowindow = new google.maps.InfoWindow({
               content: d.infoText,
             });
-            marker.addListener("click", function () {
+            marker.addListener("click", function() {
               infowindow.open(this.map, marker);
             });
             this.markers.push(marker);
@@ -394,8 +407,14 @@ export default {
       }
 
       return {
-        lat: this.map.getCenter().lat().toFixed(4),
-        lng: this.map.getCenter().lng().toFixed(4),
+        lat: this.map
+          .getCenter()
+          .lat()
+          .toFixed(4),
+        lng: this.map
+          .getCenter()
+          .lng()
+          .toFixed(4),
       };
     },
   },
@@ -413,13 +432,13 @@ export default {
       const marker = new google.maps.Marker({
         position: d.position,
         map: this.map,
-        icon: require("../assets/ote-marker-dslam-minified.png"),
+        icon: require("../assets/img/ote-marker-dslam-minified.png"),
       });
       marker.db = d;
       const infowindow = new google.maps.InfoWindow({
         content: d.infoText,
       });
-      marker.addListener("click", function () {
+      marker.addListener("click", function() {
         this.showInfo;
         infowindow.open(this.map, marker);
       });