Merge branch 'wegue-oss:master' into master

Author: wljrodrigues

app-starter/components/AppHeader.vue

@@ -35,6 +35,7 @@
       <template v-slot:activator="{on}">
 
       <v-btn icon v-on="on"
+        class="wgu-menu-button"
         color="onprimary"
         :title="$t('wgu-toolbar-menu.title')">
         <v-icon medium>menu</v-icon>

src/components/geolocator/Geolocator.vue

@@ -1,6 +1,7 @@
 <template>
 <span>
    <v-btn @click="geolocateUserAndShowMarkerOnMap" icon
+      class="wgu-action-button"
       color="onprimary"
       :title="$t('wgu-geolocator.title')">
       <v-icon v-if='this.isSearchingForGeolocation'>update</v-icon>

src/components/infoclick/InfoClickWin.vue

@@ -14,6 +14,11 @@
         <v-card-text v-if="!this.attributeData && !this.coordsData" class="no-data">
           {{ $t('wgu-infoclick.mapClick') }}
         </v-card-text>
+        <v-card-actions v-show="attributeData">
+          <v-spacer class="text-overline">{{ featureIdx + 1 }}/{{ numfeats }}: {{ layerName }}</v-spacer>
+          <v-btn v-show="numfeats > 1" x-small @click="prevFeat" ><v-icon>mdi-menu-left</v-icon></v-btn>
+          <v-btn v-show="numfeats > 1" x-small @click="nextFeat" ><v-icon>mdi-menu-right</v-icon></v-btn>
+        </v-card-actions>
 
         <!-- feature property grid -->
         <wgu-property-table :properties="attributeData" />
@@ -65,6 +70,7 @@ import ModuleCard from './../modulecore/ModuleCard';
 import { WguEventBus } from '../../WguEventBus.js';
 import PropertyTable from './PropertyTable';
 import CoordsTable from './CoordsTable';
+import MapInteractionUtil from '../../util/MapInteraction';
 
 export default {
   name: 'wgu-infoclick-win',
@@ -86,7 +92,11 @@ export default {
     return {
       moduleName: 'wgu-infoclick',
       attributeData: null,
-      coordsData: null
+      coordsData: null,
+      featureIdx: 0,
+      features: null,
+      layerName: null,
+      numfeats: null
     }
   },
   created () {
@@ -115,29 +125,65 @@ export default {
      */
     onMapClick (evt) {
       const me = this;
-      const featureLayer = me.map.forEachFeatureAtPixel(evt.pixel,
+      me.features = []
+      me.map.forEachFeatureAtPixel(evt.pixel,
         (feature, layer) => {
-          return [feature, layer];
+          me.features.push([feature, layer])
         });
 
       // collect feature attributes --> PropertyTable
-      if (featureLayer) {
-        const feat = featureLayer[0];
-        const props = feat.getProperties();
-        // do not show geometry property
-        delete props.geometry;
-
-        me.attributeData = props;
+      if (this.features.length !== 0) {
+        this.featureIdx = 0
+        this.numfeats = me.features.length
+        this.viewProps(this.featureIdx)
       } else {
-        me.attributeData = null;
+        this.attributeData = null;
       }
 
       // collect click coordinate + projection --> CoordsTable
-      me.coordsData = {
+      this.coordsData = {
         coordinate: evt.coordinate,
-        projection: me.map.getView().getProjection().getCode()
+        projection: this.map.getView().getProjection().getCode()
       };
     },
+
+    prevFeat () {
+      this.featureIdx -= 1
+      if (this.featureIdx < 0) {
+        this.featureIdx = this.features.length - 1
+      }
+      this.viewProps(this.featureIdx)
+    },
+
+    nextFeat () {
+      this.featureIdx += 1
+      if (this.featureIdx > this.features.length - 1) {
+        this.featureIdx = 0
+      }
+      this.viewProps(this.featureIdx)
+    },
+
+    viewProps (idx) {
+      const infofeat = this.features[idx][0];
+      const props = infofeat.getProperties();
+      // do not show geometry property
+      delete props.geometry;
+      this.attributeData = props;
+      this.layerName = this.features[idx][1].get('name')
+      const lid = this.features[idx][1].get('lid')
+
+      const correspondingInteraction = MapInteractionUtil.getSelectInteraction(this.map, lid);
+
+      // we can only select layers that have a select interaction
+      if (!correspondingInteraction) {
+        return;
+      }
+
+      // add to map selection
+      correspondingInteraction.getFeatures().clear();
+      correspondingInteraction.getFeatures().push(infofeat);
+    },
+
     /**
      * (Un-)Register map interactions when the visibility of the module changes.
      *

src/components/localeswitcher/LocaleSwitcher.vue

@@ -9,7 +9,7 @@
           color="onprimary"
           background-color="transparent"
           :title="$t('wgu-localeswitcher.title')"
-          class="ma-2"
+          class="ma-2 wgu-menu-button"
           icon
           v-on="on"
           v-bind="attrs"

src/components/maxextentbutton/ZoomToMaxExtentButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-btn icon color="onprimary" @click="onClick"
+  <v-btn icon color="onprimary" @click="onClick" class="wgu-action-button"
     :title="$t('wgu-zoomtomaxextent.title')">
     <v-icon medium>{{icon}}</v-icon>
   </v-btn>

src/components/modulecore/ToggleButton.vue

@@ -4,6 +4,7 @@
     dense
     color="onprimary"
     background-color="transparent"
+    class="wgu-toggle-button"
     :title="$t(moduleName + '.title')"
     v-model="show">
     <v-btn icon :value="true" color="onprimary" @click="toggleUi">

tests/unit/specs/components/infoclick/InfoClickWin.spec.js

@@ -86,7 +86,7 @@ describe('infoclick/InfoClickWin.vue', () => {
         layers: [layer]
       });
       map.forEachFeatureAtPixel = () => {
-        return [feat, layer];
+        vm.features.push([feat, layer]);
       };
       vm.map = map;
       vm.onMapClick(mockEvt);