From eab9215b0b9a2c5c76580802f3b299b1e8cd874b Mon Sep 17 00:00:00 2001
From: Benjamin Webb <40066515+webb-ben@users.noreply.github.com>
Date: Thu, 7 Dec 2023 10:41:07 -0500
Subject: [PATCH] Add Cluster Toggle (#73)

* Create Settings Menu

- Create Settings menu in app header
- Move Language and Token widgets inside settings menu
- Add icons to menu options
- Display active language on language selection

* Add Marker cluster toggle

requires: https://github.com/wmo-im/wis2box/pull/590

* Update mdi-icon for cluster
---
 docker/entrypoint.sh                  |  1 +
 src/App.vue                           |  3 +-
 src/components/app/AppHeader.vue      |  9 ++---
 src/components/app/AppSettings.vue    | 47 +++++++++++++++++++++++++++
 src/components/app/SelectLocale.vue   | 16 +++++++--
 src/components/app/TokenAuth.vue      |  6 ++--
 src/components/station/WisStation.vue | 31 ++++++++++++++----
 src/locales/_template.json            |  4 ++-
 src/locales/en.json                   |  4 ++-
 src/locales/es.json                   |  6 ++--
 src/locales/fr.json                   |  6 ++--
 11 files changed, 108 insertions(+), 25 deletions(-)
 create mode 100644 src/components/app/AppSettings.vue

diff --git a/docker/entrypoint.sh b/docker/entrypoint.sh
index ca1347b..bc8e775 100644
--- a/docker/entrypoint.sh
+++ b/docker/entrypoint.sh
@@ -7,5 +7,6 @@ window.VUE_APP_MQTT='${WIS2BOX_MQTT_URL}'\n
 window.VUE_APP_WAF='${WIS2BOX_URL}/data/'\n
 window.VUE_APP_BASEMAP_URL='${WIS2BOX_BASEMAP_URL:-https://\{s\}.tile.openstreetmap.org/\{z\}/\{x\}/\{y\}.png}'\n
 window.VUE_APP_BASEMAP_ATTRIBUTION='${WIS2BOX_BASEMAP_ATTRIBUTION:-&copy; <a href=\"https://osm.org/copyright\">OpenStreetMap</a> contributors}'\n
+window.VUE_APP_CLUSTER='${WIS2BOX_UI_CLUSTER}'\n
 "
 echo $env >> /usr/share/nginx/html/env.js
diff --git a/src/App.vue b/src/App.vue
index 6250d80..db14485 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,7 +46,8 @@ export default {
       url: '',
       dialog: false,
       token: '',
-      interceptor: null
+      interceptor: null,
+      cluster: window.VUE_APP_CLUSTER === true || window.VUE_APP_CLUSTER === 'true'
     };
   },
   computed: {
diff --git a/src/components/app/AppHeader.vue b/src/components/app/AppHeader.vue
index 544db54..5b9bedd 100644
--- a/src/components/app/AppHeader.vue
+++ b/src/components/app/AppHeader.vue
@@ -21,8 +21,7 @@
                 <img :src="logo" class="pl-6 my-3" />
               </a>
               <v-spacer />
-              <token-auth :header="true" />
-              <select-locale class="pr-6" />
+              <app-settings class="ma-3" />
             </v-row>
           </v-container>
         </v-responsive>
@@ -32,8 +31,7 @@
 </template>
 
 <script>
-import SelectLocale from "./SelectLocale.vue";
-import TokenAuth from "./TokenAuth.vue";
+import AppSettings from "./AppSettings.vue";
 import logo from "@/assets/img/logo.png";
 import banner from "@/assets/img/wmo-banner.png";
 import foot from "@/assets/img/wmo-foot.png";
@@ -44,8 +42,7 @@ export default defineComponent({
   name: "AppHeader",
   template: "#app-header",
   components: {
-    SelectLocale,
-    TokenAuth,
+    AppSettings
   },
   data: function () {
     return {
diff --git a/src/components/app/AppSettings.vue b/src/components/app/AppSettings.vue
new file mode 100644
index 0000000..d1a2fe6
--- /dev/null
+++ b/src/components/app/AppSettings.vue
@@ -0,0 +1,47 @@
+
+
+<template id="select-locale">
+  <div class="select-locale">
+    <v-menu :close-on-content-click="false">
+      <template v-slot:activator="{ props }">
+        <v-btn variant="text" color="#FFFFFF" class="font-weight-bold" v-bind="props">
+          <v-icon icon="mdi-cog" />&nbsp;{{ $t('util.settings') }}
+        </v-btn>
+      </template>
+
+      <v-list>
+        <v-list-item class="px-0">
+          <select-locale :header="false" />
+        </v-list-item>
+        <v-list-item class="px-0">
+          <token-auth :header="false" />
+        </v-list-item>
+        <v-list-item class="px-0">
+          <v-btn block :ripple="false" variant="text" color="#014e9e" class="font-weight-bold">
+            <v-icon icon="mdi-map-marker-multiple" />&nbsp;{{ $t('util.cluster') }}
+            <template v-slot:append>
+              <v-switch hide-details color="#014e9e" v-model="$root.cluster" />
+            </template>
+          </v-btn>
+        </v-list-item>
+    </v-list>
+    </v-menu>
+  </div>
+</template>
+  
+<script>
+import { defineComponent } from "vue";
+
+import SelectLocale from "./SelectLocale.vue";
+import TokenAuth from "./TokenAuth.vue";
+
+export default defineComponent({
+  name: "AppSettings",
+  template: "#app-settings",
+  components: {
+    SelectLocale,
+    TokenAuth,
+  },
+});
+</script>
+  
diff --git a/src/components/app/SelectLocale.vue b/src/components/app/SelectLocale.vue
index 6f51f37..7cb390e 100644
--- a/src/components/app/SelectLocale.vue
+++ b/src/components/app/SelectLocale.vue
@@ -1,15 +1,17 @@
 <template id="select-locale">
   <div class="select-locale">
-    <v-menu>
+    <v-menu location="start">
       <template v-slot:activator="{ props }">
-        <v-btn color="#FFFFFF" class="font-weight-bold" v-bind="props">
-          {{ $t('language') }}
+        <v-btn block variant="text" :color="color" class="font-weight-bold" v-bind="props">
+          <v-icon icon="mdi-web" />&nbsp;{{ $t('code') }}
         </v-btn>
       </template>
       <v-list>
         <v-list-item
           v-for="(name, lang) in languages"
           :key="`lang-${name}`"
+          :active="$i18n.locale === lang"
+          active-color="#014e9e"
           @click="$i18n.locale = lang"
         >
           <v-list-item-title>{{ name }}</v-list-item-title>
@@ -27,6 +29,7 @@ import { defineComponent } from "vue";
 export default defineComponent({
   name: "SelectLocale",
   template: "#select-locale",
+  props: ["header"],
   computed: {
     languages: function () {
       const temp = {};
@@ -35,6 +38,13 @@ export default defineComponent({
       }
       return temp;
     },
+    color: function () {
+      if (this.header) {
+        return "#FFFFFF"
+      } else {
+        return "#014e9e"
+      }
+    }
   },
 });
 </script>
diff --git a/src/components/app/TokenAuth.vue b/src/components/app/TokenAuth.vue
index 50763d7..3ee92b4 100644
--- a/src/components/app/TokenAuth.vue
+++ b/src/components/app/TokenAuth.vue
@@ -1,8 +1,10 @@
 <template id="token-auth">
   <div class="token-auth">
-    <v-menu v-model="menu" :close-on-content-click="false">
+    <v-menu location="start" v-model="menu" :close-on-content-click="false">
       <template v-slot:activator="{ props }">
-        <v-btn :color="color" class="font-weight-bold" v-bind="props" v-html="$t('util.token')" />
+        <v-btn block variant="text" :color="color" class="font-weight-bold" v-bind="props">
+          <v-icon icon="mdi-key-variant" />&nbsp;{{ $t('util.token') }}
+        </v-btn>
       </template>
       <v-card min-width="256">
         <v-text-field class="mx-3" v-model="token" :label="$t('util.token')" type="password" variant="underlined"
diff --git a/src/components/station/WisStation.vue b/src/components/station/WisStation.vue
index 2a1ceae..8e74057 100644
--- a/src/components/station/WisStation.vue
+++ b/src/components/station/WisStation.vue
@@ -22,6 +22,8 @@ export default defineComponent({
         onEachFeature: this.onEachFeature,
         pointToLayer: this.pointToLayer,
       },
+      layer: null,
+      clusterLayer: null,
     };
   },
   mounted: function () {
@@ -29,15 +31,30 @@ export default defineComponent({
       this.onReady()
     })
   },
+  watch: {
+    "$root.cluster": function () {
+      this.renderLayer();
+    }
+  },
   methods: {
     onReady() {
-      var markerCluster = new MarkerClusterGroup({
-        disableClusteringAtZoom: 9,
-        chunkedLoading: true,
-        chunkInterval: 500,
-      });
-      markerCluster.addLayer(new geoJSON(this.stations, this.geojsonOptions));
-      this.map.addLayer(markerCluster);
+      this.layer = new geoJSON(this.stations, this.geojsonOptions);
+      this.clusterLayer = new MarkerClusterGroup({
+          disableClusteringAtZoom: 9,
+          chunkedLoading: true,
+          chunkInterval: 500,
+        });
+      this.clusterLayer.addLayer(this.layer);
+      this.renderLayer();
+    },
+    renderLayer() {
+      if (this.$root.cluster){
+        this.layer.removeFrom(this.map);
+        this.map.addLayer(this.clusterLayer);
+      } else {
+        this.clusterLayer.removeFrom(this.map)
+        this.map.addLayer(this.layer);
+      }
     },
     mapClick(e) {
       this.features_.station = e.target.feature;
diff --git a/src/locales/_template.json b/src/locales/_template.json
index 9994822..fe90dda 100644
--- a/src/locales/_template.json
+++ b/src/locales/_template.json
@@ -12,7 +12,9 @@
     "token": "",
     "cancel": "",
     "save": "",
-    "close": ""
+    "close": "",
+    "settings": "",
+    "cluster": ""
   },
   "footer": {
     "powered_by": ""
diff --git a/src/locales/en.json b/src/locales/en.json
index 6f99f08..0f0664d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -12,7 +12,9 @@
     "token": "Token",
     "cancel": "Cancel",
     "save": "Save",
-    "close": "Close"
+    "close": "Close",
+    "settings": "Settings",
+    "cluster": "Cluster"
   },
   "footer": {
     "powered_by": "Powered by"
diff --git a/src/locales/es.json b/src/locales/es.json
index f4b97f1..75f6752 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -9,10 +9,12 @@
     "documentation": "Documentación"
   },
   "util": {
-    "token": "Autentificador",
+    "token": "Llave",
     "cancel": "Anular",
     "save": "Guardar",
-    "close": "Cerrar"
+    "close": "Cerrar",
+    "settings": "Ajustes",
+    "cluster": "Trozo"
   },
   "footer": {
     "powered_by": "Desarrollada por"
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 0d44873..0e651d6 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -9,10 +9,12 @@
     "documentation": "Documentation"
   },
   "util": {
-    "token": "Jeton d'accès",
+    "token": "Jeton",
     "cancel": "Annuler",
     "save": "Conserver",
-    "close": "Fermer"
+    "close": "Fermer",
+    "settings": "Paramètres",
+    "cluster": "Grappe"
   },
   "footer": {
     "powered_by": "Alimenté par"