Skip to content

Commit

Permalink
Add Cluster Toggle (#73)
Browse files Browse the repository at this point in the history
* 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: wmo-im/wis2box#590

* Update mdi-icon for cluster
  • Loading branch information
webb-ben authored Dec 7, 2023
1 parent 067942f commit eab9215
Show file tree
Hide file tree
Showing 11 changed files with 108 additions and 25 deletions.
1 change: 1 addition & 0 deletions docker/entrypoint.sh
Original file line number Diff line number Diff line change
Expand Up @@ -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
3 changes: 2 additions & 1 deletion src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
9 changes: 3 additions & 6 deletions src/components/app/AppHeader.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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";
Expand All @@ -44,8 +42,7 @@ export default defineComponent({
name: "AppHeader",
template: "#app-header",
components: {
SelectLocale,
TokenAuth,
AppSettings
},
data: function () {
return {
Expand Down
47 changes: 47 additions & 0 deletions src/components/app/AppSettings.vue
Original file line number Diff line number Diff line change
@@ -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>

16 changes: 13 additions & 3 deletions src/components/app/SelectLocale.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -27,6 +29,7 @@ import { defineComponent } from "vue";
export default defineComponent({
name: "SelectLocale",
template: "#select-locale",
props: ["header"],
computed: {
languages: function () {
const temp = {};
Expand All @@ -35,6 +38,13 @@ export default defineComponent({
}
return temp;
},
color: function () {
if (this.header) {
return "#FFFFFF"
} else {
return "#014e9e"
}
}
},
});
</script>
6 changes: 4 additions & 2 deletions src/components/app/TokenAuth.vue
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
31 changes: 24 additions & 7 deletions src/components/station/WisStation.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,22 +22,39 @@ export default defineComponent({
onEachFeature: this.onEachFeature,
pointToLayer: this.pointToLayer,
},
layer: null,
clusterLayer: null,
};
},
mounted: function () {
this.$nextTick(() => {
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;
Expand Down
4 changes: 3 additions & 1 deletion src/locales/_template.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@
"token": "",
"cancel": "",
"save": "",
"close": ""
"close": "",
"settings": "",
"cluster": ""
},
"footer": {
"powered_by": ""
Expand Down
4 changes: 3 additions & 1 deletion src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@
"token": "Token",
"cancel": "Cancel",
"save": "Save",
"close": "Close"
"close": "Close",
"settings": "Settings",
"cluster": "Cluster"
},
"footer": {
"powered_by": "Powered by"
Expand Down
6 changes: 4 additions & 2 deletions src/locales/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
6 changes: 4 additions & 2 deletions src/locales/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit eab9215

Please sign in to comment.