better cabinet toggling

Author: treboryx

src/components/Map.vue

@@ -38,11 +38,7 @@
       <gmap-polygon :options="polygonOptions" :paths="paths"></gmap-polygon>
     </GmapMap>
     <!-- "top: 0; right: 0; width: calc(100% - 100px); position: absolute; z-index: 100" -->
-    <div
-      v-if="!hamburger"
-      style="position: absolute; top: 70px; z-index: 999;"
-      class="w-full"
-    >
+    <div v-if="!hamburger" style="position: absolute; top: 70px; z-index: 999;" class="w-full">
       <label>
         <gmap-autocomplete
           placeholder="Type an address Ex. Filellinon 10, Athens, Greece"
@@ -55,74 +51,62 @@
           @click="addButton"
         >
           Add
-        </button> -->
+        </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="relative h-full w-full" v-if="!hamburger">
+      <div class="absolute bottom-0 right-0 h-64 w-16" style="text-align: left;">
         <button
           @click="
             buttons.ote.isOn = !buttons.ote.isOn;
-            showCabinets('ote');
-          "
-          :class="
-            buttons.ote.isOn
+            showCabinets('ote'); buttons.ote.isOn
               ? (buttons.ote.text = '✔ OTE')
               : (buttons.ote.text = 'OTE')
           "
-          type="button"
+          :class="buttons.ote.isOn ? 'bg-blue-300': 'bg-blue-700'"
           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"
+          class="hover:bg-blue-500 text-white font-bold py-2 px-4 rounded"
         >
-          {{ buttons.ote.text }}
+          <img :src="markerIcons.OTE" />
         </button>
         <button
           @click="
             buttons.wind.isOn = !buttons.wind.isOn;
-            showCabinets('wind');
-          "
-          :class="
-            buttons.wind.isOn
+            showCabinets('wind'); buttons.wind.isOn
               ? (buttons.wind.text = '✔ WIND')
               : (buttons.wind.text = 'WIND')
           "
+          :class="buttons.wind.isOn ? 'bg-blue-400': 'bg-blue-500'"
           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"
+          class="hover:bg-blue-400 text-white font-bold py-2 px-4 rounded"
         >
-          {{ buttons.wind.text }}
+          <img :src="markerIcons.WIND" />
         </button>
         <button
           @click="
             buttons.vf.isOn = !buttons.vf.isOn;
-            showCabinets('vf');
-          "
-          :class="
-            buttons.vf.isOn
+            showCabinets('vf');  buttons.vf.isOn
               ? (buttons.vf.text = '✔ Vodafone')
               : (buttons.vf.text = 'Vodafone')
           "
+          :class="buttons.vf.isOn ? 'bg-red-300': 'bg-red-700'"
           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"
+          class="hover:bg-red-500 text-white font-bold py-2 px-4 rounded"
         >
-          {{ buttons.vf.text }}
+          <img :src="markerIcons.Vodafone" />
         </button>
         <button
           @click="
             buttons.rurcon.isOn = !buttons.rurcon.isOn;
-            showCabinets('rurcon');
-          "
-          :class="
-            buttons.rurcon.isOn
-              ? (buttons.rurcon.text = '✔ Rural Connect')
-              : (buttons.rurcon.text = 'Rural Connect')
+            showCabinets('rurcon'); buttons.rurcon.isOn
+              ? (buttons.rurcon.text = '✔')
+              : (buttons.rurcon.text = '')
           "
+          :class="buttons.rurcon.isOn ? 'bg-orange-300': 'bg-orange-800'"
           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"
+          class="hover:bg-orange-700 text-white font-bold py-2 px-4 rounded"
         >
-          {{ buttons.rurcon.text }}
+          <img :src="markerIcons.RURALCONNECT" />
         </button>
       </div>
     </div>
@@ -148,35 +132,29 @@
       class="rounded relative h-48 w-36 left-2 invisible lg:visible xl:visible"
       style="position: relative; top: 250px; z-index: 999;"
     >
-      <div
-        class="rounded bg-white shadow-md h-48 w-36 p-6 flex flex-col justify-around"
-      >
+      <div class="rounded bg-white shadow-md h-48 w-36 p-6 flex flex-col justify-around">
         <div>
           <p class="text-base text-gray-600">Cabinets</p>
         </div>
         <div>
           <p class="text-2xl text-gray-700 font-bold">
-            <animated-number
-              :value="numberOfCabinets"
-              :duration="3000"
-              round="1"
-            />
+            <animated-number :value="numberOfCabinets" :duration="3000" round="1" />
           </p>
         </div>
         <div>
           <p class="text-base text-gray-600">Centers</p>
         </div>
         <div>
           <p class="text-2xl text-gray-700 font-bold">
-            <animated-number
-              :value="numberOfCenters"
-              :duration="5000"
-              round="1"
-            />
+            <animated-number :value="numberOfCenters" :duration="5000" round="1" />
           </p>
         </div>
       </div>
     </div>
+    <div
+      style="position: absolute; bottom: 0px; z-index: 0;"
+      class="w-full text-base text-white"
+    >hello@fttx.gr</div>
   </div>
 </template>
 <script>
@@ -306,7 +284,7 @@ export default {
       const infowindow = new google.maps.InfoWindow({
         content: d.infoText,
       });
-      marker.addListener("click", function() {
+      marker.addListener("click", function () {
         this.showInfo;
         infowindow.open(this.map, marker);
       });
@@ -343,7 +321,7 @@ export default {
         });
         marker.setVisible(false);
         marker.db = d;
-        marker.addListener("click", function() {
+        marker.addListener("click", function () {
           ref.infoWindow(marker);
         });
         this.markers.push(marker);
@@ -392,15 +370,15 @@ export default {
               icon: this.markerIcons[format[cab]],
             });
             marker.db = d;
-            marker.addListener("click", function() {
+            marker.addListener("click", function () {
               ref.infoWindow(marker);
             });
             this.markers.push(marker);
             temp.push(marker);
           });
         }
         this.markerCluster.addMarkers(temp);
-        this.$toast.success(`Loaded ${buttons[cab]} cabinets`);
+        this.$toast.success(`Loaded ${format[cab]} cabinets`);
         // this.clusterMyMarkers();
       }
       if (!this.buttons[cab].isOn) {
@@ -409,7 +387,7 @@ export default {
           ca.setVisible(false);
         });
         this.clusterMyMarkers("clear");
-        this.$toast.warning(`Unloaded ${buttons[cab]} cabinets`);
+        this.$toast.warning(`Unloaded ${format[cab]} cabinets`);
       }
     },
     infoWindow(marker) {
@@ -589,14 +567,8 @@ 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),
       };
     },
   },