From 2a5528cc8dfb73f4ec99d563c8b83556064eac4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20de=20Metz?= <francois@2metz.fr>
Date: Wed, 22 May 2024 10:23:21 +0200
Subject: [PATCH] Move controls to a subfolder and use the composition API.

---
 js/controls/heatmap_control.vue        | 42 +++++++++++
 js/{ => controls}/language_control.vue |  2 +-
 js/controls/level_control.vue          | 88 +++++++++++++++++++++++
 js/heatmap_control.vue                 | 54 --------------
 js/level_control.vue                   | 97 --------------------------
 js/map.vue                             |  6 +-
 6 files changed, 134 insertions(+), 155 deletions(-)
 create mode 100644 js/controls/heatmap_control.vue
 rename js/{ => controls}/language_control.vue (94%)
 create mode 100644 js/controls/level_control.vue
 delete mode 100644 js/heatmap_control.vue
 delete mode 100644 js/level_control.vue

diff --git a/js/controls/heatmap_control.vue b/js/controls/heatmap_control.vue
new file mode 100644
index 0000000..e4f1749
--- /dev/null
+++ b/js/controls/heatmap_control.vue
@@ -0,0 +1,42 @@
+<template>
+  <mgl-custom-control position="top-right">
+    <button
+      :title="title"
+      class="maplibregl-ctrl-heatmap"
+      type="button"
+      @click="toggleHeatmap"
+    >
+      <span class="maplibregl-ctrl-icon">
+        <v-icon :color="iconColor" size="24px">{{ mdiBlur }}</v-icon>
+      </span>
+    </button>
+  </mgl-custom-control>
+</template>
+
+<script setup>
+import { ref, inject, computed, watch } from 'vue';
+import { MglCustomControl } from '@indoorequal/vue-maplibre-gl';
+import { useI18n } from 'vue-i18n';
+import { mdiBlur } from '@mdi/js';
+
+const { t } = useI18n();
+
+const displayHeatmap = ref(true);
+
+const iconColor = computed(() => {
+  return displayHeatmap ? 'primary' : '';
+});
+
+const title = computed(() => {
+  return displayHeatmap ? t('heatmap.hide') : t('heatmap.show');
+})
+
+function toggleHeatmap() {
+  displayHeatmap.value = !displayHeatmap.value;
+}
+
+const indoorequal = inject('indoorequal');
+watch(displayHeatmap, () => {
+  indoorequal.value.setHeatmapVisible(displayHeatmap.value);
+});
+</script>
diff --git a/js/language_control.vue b/js/controls/language_control.vue
similarity index 94%
rename from js/language_control.vue
rename to js/controls/language_control.vue
index e585673..4479cc3 100644
--- a/js/language_control.vue
+++ b/js/controls/language_control.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { useControl } from '@indoorequal/vue-maplibre-gl';
 import { useI18n } from 'vue-i18n'
-import { updateStyle } from './style_language';
+import { updateStyle } from '../style_language';
 
 class LanguageControl {
   constructor(options) {
diff --git a/js/controls/level_control.vue b/js/controls/level_control.vue
new file mode 100644
index 0000000..6d6cb58
--- /dev/null
+++ b/js/controls/level_control.vue
@@ -0,0 +1,88 @@
+<template>
+  <mgl-custom-control
+    class="maplibregl-ctrl level-ctrl"
+    position="bottom-right"
+  >
+    <v-btn
+      v-for="level in displayedLevels"
+      :color="level == value ? 'primary' : 'white'"
+      class="button d-block mb-2"
+      @click="setLevel(level)"
+    >
+      {{ level }}
+    </v-btn>
+  </mgl-custom-control>
+</template>
+
+<script setup>
+import { ref, inject, onMounted, watch } from 'vue';
+import { MglCustomControl } from '@indoorequal/vue-maplibre-gl';
+
+const indoorequal = inject('indoorequal');
+
+const emit = defineEmits(['input', 'levels']);
+const props = defineProps({
+  value: {
+    type: String,
+    required: true
+  }
+})
+
+const displayedLevels = ref([]);
+
+function sortLevels(a, b) {
+  if (isNaN(parseInt(a, 10))) {
+    if (a < b) {
+      return -1;
+    } else if (a > b) {
+      return 1;
+    }
+    return 0;
+  } else {
+    return a - b;
+  }
+}
+onMounted(() => {
+  const updateLevels = (levels) => {
+    displayedLevels.value = levels.sort(sortLevels).reverse();
+    if (displayedLevels.value.length > 0 && !displayedLevels.value.includes(indoorequal.value.level)) {
+      if (displayedLevels.value.includes('0')) {
+        setLevel('0');
+      } else {
+        setLevel(displayedLevels.value[displayedLevels.value.length - 1]);
+      }
+    }
+    emit('levels', levels);
+  }
+  updateLevels(indoorequal.value.levels);
+  indoorequal.value.setLevel(props.value);
+  indoorequal.value.on('levelchange', (level) => emit('input', level));
+  indoorequal.value.on('levelschange', (levels) => updateLevels(levels));
+});
+
+function setLevel(level) {
+  indoorequal.value.setLevel(level);
+}
+
+watch(
+  () => props.value,
+  (newLevel) => {
+    if (newLevel !== indoorequal.value.level) {
+      setLevel(newLevel);
+    }
+  }
+);
+</script>
+
+
+<style>
+.level-ctrl {
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+</style>
+<style scoped>
+.button {
+  margin: 0 auto;
+}
+</style>
diff --git a/js/heatmap_control.vue b/js/heatmap_control.vue
deleted file mode 100644
index e84f0d1..0000000
--- a/js/heatmap_control.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <mgl-custom-control position="top-right">
-    <button
-      :title="title"
-      class="maplibregl-ctrl-heatmap"
-      type="button"
-      @click="toggleHeatmap"
-    >
-      <span class="maplibregl-ctrl-icon">
-        <v-icon :color="iconColor" size="24px">{{ mdiBlur }}</v-icon>
-      </span>
-    </button>
-  </mgl-custom-control>
-</template>
-
-<script>
-import { MglCustomControl } from '@indoorequal/vue-maplibre-gl';
-import { mdiBlur } from '@mdi/js';
-
-export default {
-  components: { MglCustomControl },
-  
-  inject: ['indoorequal'],
-
-  data() {
-    return {
-      mdiBlur,
-      heatmap: true
-    };
-  },
-
-  computed: {
-    iconColor() {
-      return this.heatmap ? 'primary' : '';
-    },
-
-    title() {
-      return this.heatmap ? this.$t('heatmap.hide') : this.$t('heatmap.show');
-    }
-  },
-
-  methods: {
-    toggleHeatmap() {
-      this.heatmap = !this.heatmap;
-    }
-  },
-
-  watch: {
-    heatmap(visible) {
-      this.indoorequal.setHeatmapVisible(this.heatmap);
-    }
-  },
-};
-</script>
diff --git a/js/level_control.vue b/js/level_control.vue
deleted file mode 100644
index 82b0463..0000000
--- a/js/level_control.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<template>
-  <mgl-custom-control
-    class="maplibregl-ctrl level-ctrl"
-    position="bottom-right"
-  >
-    <v-btn
-      v-for="level in levels"
-      :color="level == value ? 'primary' : 'white'"
-      class="button d-block mb-2"
-      @click="setLevel(level)"
-    >
-      {{ level }}
-    </v-btn>
-  </mgl-custom-control>
-</template>
-
-<script>
-import { MglCustomControl } from '@indoorequal/vue-maplibre-gl';
-
-export default {
-  components: { MglCustomControl },
-
-  inject: ['indoorequal'],
-
-  emits: ['input', 'levels'],
-
-  props: {
-    value: {
-      type: String,
-      required: true
-    },
-  },
-
-  data() {
-    return {
-      levels: []
-    };
-  },
-
-  mounted() {
-    function sortLevels(a, b) {
-      if (isNaN(parseInt(a, 10))) {
-        if (a < b) {
-          return -1;
-        } else if (a > b) {
-          return 1;
-        }
-        return 0;
-      } else {
-        return a - b;
-      }
-    }
-    const updateLevels = (levels) => {
-      this.levels = levels.sort(sortLevels).reverse();
-      if (this.levels.length > 0 && !this.levels.includes(this.indoorequal.level)) {
-        if (this.levels.includes('0')) {
-          this.setLevel('0');
-        } else {
-          this.setLevel(this.levels[this.levels.length - 1]);
-        }
-      }
-      this.$emit('levels', levels);
-    }
-    updateLevels(this.indoorequal.levels);
-    this.indoorequal.setLevel(this.value);
-    this.indoorequal.on('levelchange', (level) => this.$emit('input', level));
-    this.indoorequal.on('levelschange', (levels) => updateLevels(levels));
-  },
-
-  methods: {
-    setLevel(level) {
-      this.indoorequal.setLevel(level);
-    }
-  },
-
-  watch: {
-    value(newLevel) {
-      if (newLevel !== this.indoorequal.level) {
-        this.setLevel(newLevel);
-      }
-    }
-  }
-};
-</script>
-
-
-<style>
-.level-ctrl {
-  max-height: calc(100vh - 200px);
-  overflow-y: auto;
-}
-</style>
-<style scoped>
-.button {
-  margin: 0 auto;
-}
-</style>
diff --git a/js/map.vue b/js/map.vue
index 285bdff..9f86fa5 100644
--- a/js/map.vue
+++ b/js/map.vue
@@ -33,9 +33,9 @@ import IndoorEqual from 'maplibre-gl-indoorequal';
 import bbox from '@turf/bbox';
 import { mapStyle } from './maptiler';
 import { indoorEqualApiKey, tilesUrl } from '../config.json';
-import LanguageControl from './language_control';
-import LevelControl from './level_control';
-import HeatmapControl from './heatmap_control';
+import LanguageControl from './controls/language_control';
+import LevelControl from './controls/level_control';
+import HeatmapControl from './controls/heatmap_control';
 
 export default {
   components: {