Merge pull request #867 from iamvdo/yeti-add-links-v2

YETI: add links in UI (v2)

src/components/generics/icons/IconYeti.vue

@@ -0,0 +1,9 @@
+<template>
+  <fa-icon class="icon-yeti" icon="exclamation" transform="shrink-6 rotate-45" mask="square" />
+</template>
+
+<style scoped>
+  .icon-yeti {
+    transform: rotate(-45deg) scale(.95);
+  }
+</style>

src/components/map/OlMap.vue

@@ -262,7 +262,9 @@
         // we must save initial geometry
         initialGeometry: null,
 
-        highlightedFeature: null
+        highlightedFeature: null,
+
+        minZoomLevel: DEFAULT_POINT_ZOOM
       };
     },
 
@@ -683,7 +685,7 @@
         this.view.fit(extent, { size: this.map.getSize() });
 
         // set a minimum zoom level
-        this.view.setZoom(Math.min(DEFAULT_POINT_ZOOM, this.view.getZoom()));
+        this.view.setZoom(Math.min(this.minZoomLevel, this.view.getZoom()));
       },
 
       toogleMapLayer(layer) {

src/js/vue-plugins/font-awesome-config.js

@@ -30,6 +30,7 @@ import { faCompass } from '@fortawesome/free-solid-svg-icons/faCompass';
 import { faCompress } from '@fortawesome/free-solid-svg-icons/faCompress';
 import { faDatabase } from '@fortawesome/free-solid-svg-icons/faDatabase';
 import { faEdit } from '@fortawesome/free-solid-svg-icons/faEdit';
+import { faExclamation } from '@fortawesome/free-solid-svg-icons/faExclamation';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle';
 import { faExpand } from '@fortawesome/free-solid-svg-icons/faExpand';
 import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
@@ -72,6 +73,7 @@ import { faShareAlt } from '@fortawesome/free-solid-svg-icons/faShareAlt';
 import { faSignInAlt } from '@fortawesome/free-solid-svg-icons/faSignInAlt';
 import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
 import { faSortAmountUp } from '@fortawesome/free-solid-svg-icons/faSortAmountUp';
+import { faSquare } from '@fortawesome/free-solid-svg-icons/faSquare';
 import { faStar } from '@fortawesome/free-solid-svg-icons/faStar';
 import { faSun } from '@fortawesome/free-solid-svg-icons/faSun';
 import { faTachometerAlt } from '@fortawesome/free-solid-svg-icons/faTachometerAlt';
@@ -237,6 +239,7 @@ export default function install(Vue) {
     faCompress,
     faDatabase,
     faEdit,
+    faExclamation,
     faExclamationCircle,
     faExpand,
     faExternalLinkAlt,
@@ -279,8 +282,8 @@ export default function install(Vue) {
     faSignInAlt,
     faSignOutAlt,
     faSortAmountUp,
+    faSquare,
     faStar,
-    //    faSquare,
     faSun,
     faTachometerAlt,
     faTag,

src/js/vue-plugins/router.js

@@ -62,7 +62,7 @@ const routes = [
   { path: '/following', name: 'following', component: FollowingView },
   { path: '/preferences', name: 'preferences', component: PreferencesView },
   { path: '/mailinglists', name: 'mailinglists', component: MailingListsView },
-  { path: '/yeti/:page?', name: 'yeti', component: YetiView },
+  { path: '/yeti/:document_id(\\d+)?/:page?', name: 'yeti', component: YetiView },
 
   { path: '/wip', name: 'workinprogress', component: WorkInProgressView },
 

src/views/document/utils/boxes/MapBox.vue

@@ -21,15 +21,25 @@
 
     <elevation-profile :document="document" v-if="documentType=='outing'" />
 
-    <div
-      v-if="document.geometry && (document.geometry.geom_detail || documentType == 'waypoint')"
-      class="buttons is-centered">
-      <button class="button is-primary is-small" @click="downloadGpx">
-        GPX
-      </button>
-      <button class="button is-primary is-small" @click="downloadKml">
-        KML
-      </button>
+    <div class="columns is-multiline is-mobile is-clearfix">
+      <div class="column is-full-tablet is-full-desktop is-half-widescreen ">
+        <router-link v-if="yetiDocumentActivities" :to="yetiUrl" class="button is-small">
+          <icon-yeti class="icon" />
+          <span>Voir dans YETI</span>
+        </router-link>
+      </div>
+      <div class="column">
+        <div
+          v-if="document.geometry && (document.geometry.geom_detail || documentType == 'waypoint')"
+          class="buttons is-pulled-right">
+          <button class="button is-primary is-small" @click="downloadGpx">
+            GPX
+          </button>
+          <button class="button is-primary is-small" @click="downloadKml">
+            KML
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -50,6 +60,17 @@
 
     mixins: [ requireDocumentProperty ],
 
+    computed: {
+      yetiDocumentActivities() {
+        const activities = ['skitouring', 'snow_ice_mixed', 'ice_climbing', 'snowshoeing'];
+        return this.document.activities.some(activity => activities.includes(activity));
+      },
+
+      yetiUrl() {
+        return { name: 'yeti', params: { 'document_id': this.document.document_id } };
+      }
+    },
+
     methods: {
       downloadKml() {
         this.downloadFeatures(new ol.format.KML(), '.kml', 'application/vnd.google-earth.kml+xml');

src/views/portals/YetiView.vue

@@ -330,6 +330,16 @@
             </div>
           </div>
 
+          <div class="box is-hidden-mobile" v-if="document">
+            <div class="title is-4 document-title">
+              Route
+            </div>
+            <document-link :document="document">
+              <icon-route class="document-icon" />
+              <document-title :document="document" />
+            </document-link>
+          </div>
+
           <div class="box yeti-logos">
             <div class="columns is-mobile is-vcentered">
               <div class="column has-text-centered">
@@ -382,14 +392,15 @@
                 @change="onUpdateOpacityYetiLayer" />
             </div>
           </div>
-          <map-view ref="map" @zoom="mapZoom = arguments[0]" show-recenter-on />
+          <map-view ref="map" @zoom="mapZoom = arguments[0]" show-recenter-on :documents="document ? [document] : null" />
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+  import c2c from '@/js/apis/c2c';
   import ol from '@/js/libs/ol';
   import axios from 'axios';
   import vueSlider from 'vue-slider-component';
@@ -504,7 +515,9 @@
         mountains: {},
         visibleMountains: {},
         promiseMountains: null,
-        showMountainsList: false
+        showMountainsList: false,
+
+        promiseDocument: null
       };
     },
 
@@ -544,6 +557,10 @@
 
       countVisibleMountains() {
         return Object.values(this.visibleMountains).reduce((a, b) => a + b.length, 0);
+      },
+
+      document() {
+        return (this.promiseDocument && this.promiseDocument.data) ? this.promiseDocument.data : null;
       }
 
     },
@@ -567,6 +584,13 @@
     mounted() {
       this.check();
 
+      // document
+      const doc = this.$route.params.document_id;
+      const lang = this.$language.current;
+      if (doc) {
+        this.promiseDocument = c2c['route'].getCooked(doc, lang).then(this.onDocument);
+      }
+
       // mountains
       this.$refs.map.map.on('moveend', this.onMapMoveEnd);
       axios.get(YETI_URL_MOUNTAINS)
@@ -725,6 +749,9 @@
 
         this.yetiLayer.setMap(this.$refs.map.map);
 
+        // put yeti layer below document layers
+        this.yetiLayer.setZIndex(0);
+
         // set map legend
         this.mapLegend = JSON.parse(xml.getElementsByTagName('wps:ComplexData')[2].textContent);
         this.mapLegend.items.forEach(item => {
@@ -852,6 +879,16 @@
       onSubmitDisclaimer() {
         this.showDisclaimer = false;
         this.$localStorage.set('yeti-disclaimer', 'validated');
+      },
+
+      onDocument() {
+        // set min zoom for map
+        // (that will be used after document is displayed and map is fitted to extent)
+        this.$refs.map.minZoomLevel = VALID_FORM_DATA.minZoom;
+        // put document layers on top
+        ['documentsLayer', 'waypointsLayer'].forEach(layer => {
+          this.$refs.map[layer].setZIndex(1);
+        });
       }
     }
   };
@@ -1307,6 +1344,16 @@
       visibility: hidden;
     }
   }
+
+  .document-title {
+    margin-bottom: 0.5rem !important;
+  }
+
+  .document-icon,
+  .document-icon:hover {
+    color: $dark;
+    margin-right: 3px;
+  }
 </style>
 
 <style lang="scss">

src/views/static-views/TopoguideView.vue

@@ -12,6 +12,7 @@
         <topoguide-view-link to="images" :label="$gettext('images')" icon="icon-image" />
         <topoguide-view-link to="books" :label="$gettext('books')" icon="icon-book" />
         <topoguide-view-link to="areas" :label="$gettext('areas')" icon="icon-area" />
+        <topoguide-view-link to="yeti" label="YETI" icon="icon-yeti" />
       </div>
     </div>
     <div class="section columns is-multiline is-variable is-8">
@@ -140,7 +141,7 @@
     .links{
       justify-content:center;
       flex-flow:wrap row;
-      max-width:550px;
+      max-width:700px;
       margin:auto;
     }
   }