Merge pull request #1058 from geoadmin/feat-PB-66-add-new-babs-icons-…

…to-mapviewer

PB-66: Add new babs icons to mapviewer

src/api/icon.api.js

@@ -37,12 +37,17 @@ export class DrawingIconSet {
      *   set
      * @param {String} templateURL A template URL to access this icon set's metadata
      *   ({icon_set_name} needs to be replaced with this icon set's name)
+     * @param {Boolean} hasDescription Tells if this icon set has icon descriptions
+     * @param {String} Language Two letter iso code that corresponds to a specific language, if the
+     *   icon set does not correspond to a language it is null
      */
-    constructor(name, isColorable, iconsURL, templateURL) {
+    constructor(name, isColorable, iconsURL, templateURL, hasDescription, language) {
         this._name = name
         this._isColorable = isColorable
         this._iconsURL = iconsURL
         this._templateURL = templateURL
+        this._hasDescription = hasDescription
+        this._language = language
         this._icons = []
     }
 
@@ -72,6 +77,19 @@ export class DrawingIconSet {
         return this._templateURL
     }
 
+    /** @returns {Boolean} Tells if this icon set has icon descriptions */
+    get hasDescription() {
+        return this._hasDescription
+    }
+
+    /**
+     * @returns {String} Two letter iso code that corresponds to a specific language, if the icon
+     *   set does not correspond to a language it is null
+     */
+    get language() {
+        return this._language
+    }
+
     /** @returns {DrawingIcon[]} List of all icons from this icon set */
     get icons() {
         return [...this._icons]
@@ -99,15 +117,17 @@ export class DrawingIcon {
      *   replacing {icon_scale} and {{r},{g},{b}} respectively, see {@link DrawingIcon.generateURL})
      * @param {String} iconSetName Name of the icon set in which belongs this icon (an icon can only
      *   belong to one icon set)
+     * @param {String} description Description of icon in all available languages
      * @param {Number[]} anchor Offset to apply to this icon when placed on a coordinate ([x,y]
      *   format)
      * @param {Number[]} size Size of the icons in pixel assuming a scaling factor of 1
      */
-    constructor(name, imageURL, imageTemplateURL, iconSetName, anchor, size) {
+    constructor(name, imageURL, imageTemplateURL, iconSetName, description, anchor, size) {
         this._name = name
         this._imageURL = imageURL
         this._imageTemplateURL = imageTemplateURL
         this._iconSetName = iconSetName
+        this._description = description
         this._anchor = anchor
         this._size = size
     }
@@ -148,6 +168,11 @@ export class DrawingIcon {
         return this._iconSetName
     }
 
+    /** @returns {String} Description for this icon as JSON object in all available languages */
+    get description() {
+        return this._description
+    }
+
     /**
      * @returns {String} Stringified JSON representation of this object. Is called by
      *   {@link ol.format.KML} if this object is part of the properties of a feature.
@@ -196,7 +221,9 @@ export async function loadAllIconSetsFromBackend() {
                 rawSet.name,
                 rawSet.colorable,
                 rawSet.icons_url,
-                rawSet.template_url
+                rawSet.template_url,
+                rawSet.has_description,
+                rawSet.language
             )
             // retrieving all icons for this icon set
             setPromises.push(loadIconsForIconSet(iconSet))
@@ -226,6 +253,7 @@ async function loadIconsForIconSet(iconSet) {
                     rawIcon.url,
                     rawIcon.template_url,
                     iconSet.name,
+                    rawIcon.description,
                     rawIcon.anchor,
                     rawIcon.size
                 )

src/modules/i18n/index.js

@@ -11,7 +11,7 @@ import rm from './locales/rm.json'
 export const languages = { de, fr, it, en, rm }
 
 const OFFICIAL_SWISS_LANG = ['de', 'fr', 'it', 'rm']
-const SUPPORTED_LANG = ['en', ...OFFICIAL_SWISS_LANG]
+export const SUPPORTED_LANG = ['en', ...OFFICIAL_SWISS_LANG]
 
 const locales = Object.entries(languages).reduce((obj, entry) => {
     const key = langToLocal(entry[0])

src/modules/i18n/locales/de.json

@@ -392,9 +392,9 @@
     "modify_existing_vertex_linepolygon": "Klicke, um den Punkt zu löschen (mind. 2 Punkte).<br/> Punkt verschieben: klicken und ziehen ",
     "modify_existing_vertex_marker": "Verschieben des Symbols: klicken und ziehen ",
     "modify_existing_vertex_measure": "Klicke, um den Punkt zu löschen (mind. 2 Punkte).<br/> Punkt verschieben: klicken und ziehen ",
-    "modify_icon_category_babs-D_label": "Zivile Signaturen D",
-    "modify_icon_category_babs-F_label": "Zivile Signaturen F",
-    "modify_icon_category_babs-I_label": "Zivile Signaturen I",
+    "modify_icon_category_babs-de_label": "Zivile Signaturen",
+    "modify_icon_category_babs-fr_label": "Zivile Signaturen",
+    "modify_icon_category_babs-it_label": "Zivile Signaturen",
     "modify_icon_category_babs_label": "Zivile Signaturen",
     "modify_icon_category_default_label": "Standard",
     "modify_icon_category_label": "Signaturen",

src/modules/i18n/locales/en.json

@@ -392,9 +392,9 @@
     "modify_existing_vertex_linepolygon": "Click to delete the point (2 points min.)<br/>Click then drag to move the point",
     "modify_existing_vertex_marker": "Click then drag to move the marker",
     "modify_existing_vertex_measure": "Click to delete the point (2 points min.)<br/>Click then drag to move the point",
-    "modify_icon_category_babs-D_label": "Civil symbols D",
-    "modify_icon_category_babs-F_label": "Civil symbols F",
-    "modify_icon_category_babs-I_label": "Civil symbols I",
+    "modify_icon_category_babs-de_label": "Civil symbols",
+    "modify_icon_category_babs-fr_label": "Civil symbols",
+    "modify_icon_category_babs-it_label": "Civil symbols",
     "modify_icon_category_babs_label": "Civil symbols",
     "modify_icon_category_default_label": "default",
     "modify_icon_category_label": "symbols",

src/modules/i18n/locales/fr.json

@@ -392,9 +392,9 @@
     "modify_existing_vertex_linepolygon": "Cliquer pour supprimer le point (2 points min.)<br/>Cliquer puis bouger le curseur pour déplacer le point ",
     "modify_existing_vertex_marker": "Cliquer puis bouger le curseur pour déplacer le symbole",
     "modify_existing_vertex_measure": "Cliquer pour supprimer le point (2 points min.)<br/>Cliquer puis bouger le curseur pour déplacer le point",
-    "modify_icon_category_babs-D_label": "Signes conventionnels civils D",
-    "modify_icon_category_babs-F_label": "Signes conventionnels civils F",
-    "modify_icon_category_babs-I_label": "Signes conventionnels civils I",
+    "modify_icon_category_babs-de_label": "Signes conventionnels civils",
+    "modify_icon_category_babs-fr_label": "Signes conventionnels civils",
+    "modify_icon_category_babs-it_label": "Signes conventionnels civils",
     "modify_icon_category_babs_label": "Signes conventionnels civils",
     "modify_icon_category_default_label": "défaut",
     "modify_icon_category_label": "Signes",

src/modules/i18n/locales/it.json

@@ -392,9 +392,9 @@
     "modify_existing_vertex_linepolygon": "Cliccare per eliminare il punto (2 punti min.)<br/>Cliccare quindi trascinare per spostare il punto",
     "modify_existing_vertex_marker": "Cliccare quindi trascinare per spostare il simbolo",
     "modify_existing_vertex_measure": "Cliccare per eliminare il punto (2 punti min.)<br/>Cliccare quindi trascinare per spostare il punto",
-    "modify_icon_category_babs-D_label": "Segni convenzionali civili D",
-    "modify_icon_category_babs-F_label": "Segni convenzionali civili F",
-    "modify_icon_category_babs-I_label": "Segni convenzionali civili I",
+    "modify_icon_category_babs-de_label": "Segni convenzionali civili",
+    "modify_icon_category_babs-fr_label": "Segni convenzionali civili",
+    "modify_icon_category_babs-it_label": "Segni convenzionali civili",
     "modify_icon_category_babs_label": "Segni convenzionali civili",
     "modify_icon_category_default_label": "predefinito",
     "modify_icon_category_label": "Segni",

src/modules/i18n/locales/rm.json

@@ -390,9 +390,9 @@
     "modify_existing_vertex_linepolygon": "Cliccar per stizzar il punct (2 puncts minimum).</br> Spustar punct :cliccar e trair",
     "modify_existing_vertex_marker": "Spustar signalisaziun :cliccar e trair",
     "modify_existing_vertex_measure": "Cliccar per stizzar il punct (2 puncts minimum).</br> Spustar punct :cliccar e trair",
-    "modify_icon_category_babs-D_label": "Zivile Signaturen D",
-    "modify_icon_category_babs-F_label": "Zivile Signaturen F",
-    "modify_icon_category_babs-I_label": "Zivile Signaturen I",
+    "modify_icon_category_babs-de_label": "Zivile Signaturen",
+    "modify_icon_category_babs-fr_label": "Zivile Signaturen",
+    "modify_icon_category_babs-it_label": "Zivile Signaturen",
     "modify_icon_category_babs_label": "Zivile Signaturen",
     "modify_icon_category_default_label": "Standard",
     "modify_icon_category_label": "Segni",

src/modules/infobox/components/styling/DrawingStyleIconSelector.vue

@@ -35,7 +35,7 @@
             <div
                 class="rounded d-flex align-items-center p-2"
                 data-cy="drawing-style-toggle-all-icons-button"
-                @click="showAllSymbols = !showAllSymbols"
+                @click="toggleshowAllSymbols()"
             >
                 <div>{{ $t('modify_icon_label') }}</div>
                 <font-awesome-icon
@@ -47,11 +47,12 @@
                 <button
                     v-for="icon in currentIconSet.icons"
                     :key="icon.name"
-                    class="btn btn-sm"
+                    class="icon-description btn btn-sm"
                     :class="{
                         'btn-light': feature.icon.name !== icon.name,
                         'btn-primary': feature.icon.name === icon.name,
                     }"
+                    :data-tippy-content="getIconDescription(icon.description)"
                     :data-cy="`drawing-style-icon-selector-${icon.name}`"
                     @click="onCurrentIconChange(icon)"
                 >
@@ -67,6 +68,7 @@
                             )
                         "
                         crossorigin="anonymous"
+                        @load="onImageLoad"
                     />
                 </button>
             </div>
@@ -77,12 +79,16 @@
 
 <script>
 import { useI18n } from 'vue-i18n'
+import { useStore } from 'vuex'
 
 import EditableFeature from '@/api/features/EditableFeature.class'
+import { SUPPORTED_LANG } from '@/modules/i18n/index'
 import DrawingStyleColorSelector from '@/modules/infobox/components/styling/DrawingStyleColorSelector.vue'
 import DrawingStyleSizeSelector from '@/modules/infobox/components/styling/DrawingStyleSizeSelector.vue'
 import DropdownButton, { DropdownItem } from '@/utils/components/DropdownButton.vue'
+import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
 import { MEDIUM } from '@/utils/featureStyleUtils'
+import log from '@/utils/logging'
 
 export default {
     components: {
@@ -102,9 +108,21 @@ export default {
     },
     emits: ['change', 'change:iconSize', 'change:icon', 'change:iconColor'],
     setup() {
+        const { refreshTippyAttachment, removeTippy } = useTippyTooltip(
+            '.icon-description[data-tippy-content]',
+            {
+                placement: 'top',
+                translate: false,
+                allowHTML: true,
+            }
+        )
         const i18n = useI18n()
+        const store = useStore()
         return {
             i18n,
+            store,
+            refreshTippyAttachment,
+            removeTippy,
         }
     },
     data: function () {
@@ -114,20 +132,26 @@ export default {
             // we store it because we don't want the selection window's icon to change size
             // only the icon on the map should
             defaultIconSize: MEDIUM,
+            loadedImages: 0,
         }
     },
     computed: {
         currentIconSetName() {
             return this.currentIconSet
-                ? this.i18n.t(`modify_icon_category_${this.currentIconSet.name}_label`)
+                ? this.i18n.t(`modify_icon_category_${this.currentIconSet.name}_label`, 1, {
+                      locale: this.currentIconSet.language,
+                  })
                 : ''
         },
         iconSetDropdownItems() {
             return this.iconSets.map((iconSet) => {
                 return new DropdownItem(
                     iconSet.name,
-                    this.i18n.t(`modify_icon_category_${iconSet.name}_label`),
-                    iconSet
+                    this.i18n.t(`modify_icon_category_${iconSet.name}_label`, 1, {
+                        locale: iconSet.language,
+                    }),
+                    iconSet,
+                    `modify_icon_category_${iconSet.name}_label`
                 )
             })
         },
@@ -147,6 +171,14 @@ export default {
         generateColorizedURL(icon) {
             return icon.generateURL(this.feature.fillColor)
         },
+        toggleshowAllSymbols() {
+            this.showAllSymbols = !this.showAllSymbols
+            if (this.showAllSymbols) {
+                this.refreshTippyAttachment()
+            } else {
+                this.removeTippy()
+            }
+        },
         onCurrentIconColorChange(color) {
             this.$emit('change:iconColor', color)
             this.$emit('change')
@@ -172,6 +204,29 @@ export default {
                 return { filter: 'drop-shadow(0px 0px 0 white)' }
             }
         },
+        getIconDescription(description) {
+            const lang = this.store.state.i18n.lang
+            if (description) {
+                let str = ''
+                for (const [key, value] of Object.entries(description)) {
+                    str = str + `<div>${lang == key ? `<strong>${value}</strong>` : value}</div>`
+                    if (!SUPPORTED_LANG.includes(key)) {
+                        log.error('Language key provided is not supported: ', key)
+                    }
+                }
+                return str
+            }
+            return null
+        },
+        onImageLoad() {
+            this.loadedImages = this.loadedImages + 1
+            if (this.loadedImages == this.currentIconSet.icons.length) {
+                this.loadedImages = 0
+                if (this.currentIconSet.hasDescription && this.showAllSymbols) {
+                    this.refreshTippyAttachment()
+                }
+            }
+        },
     },
 }
 </script>

src/utils/components/DropdownButton.vue

@@ -33,6 +33,7 @@
                 <a
                     class="dropdown-item"
                     :class="{ active: currentValue === item.value }"
+                    :data-tippy-content="item.description"
                     :data-cy="`dropdown-item-${item.id}`"
                     @click="selectItem(item)"
                 >
@@ -46,17 +47,19 @@
 <script>
 import { Dropdown } from 'bootstrap'
 
+import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
 import { randomIntBetween } from '@/utils/numberUtils'
 
 /**
  * Represents an option in the select made for a dropdown. If no value is given, the title of the
  * item will be considered the value.
  */
 export class DropdownItem {
-    constructor(id, title, value = null) {
+    constructor(id, title, value = null, description = null) {
         this._id = id
         this._title = title
         this._value = value || title
+        this._description = description
     }
 
     get id() {
@@ -69,6 +72,9 @@ export class DropdownItem {
     get value() {
         return this._value
     }
+    get description() {
+        return this._description
+    }
 }
 
 /**
@@ -114,6 +120,9 @@ export default {
         },
     },
     emits: ['click', 'select:item'],
+    setup() {
+        useTippyTooltip('.dropdown-item[data-tippy-content]', { placement: 'left' })
+    },
     data() {
         return {
             // generating a unique HTML ID for this dropdown