@sedoo/unidoo 0.0.49 → 0.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sedoo/unidoo",
-    "version": "0.0.49",
+    "version": "0.0.53",
     "private": false,
     "scripts": {
         "build": "vue-cli-service build --target lib --name unidoo src/plugin.js",
@@ -16,6 +16,7 @@
         "src/**/*"
     ],
     "dependencies": {
+        "ol": "^6.8.1",
         "v-tooltip": "^2.1.3",
         "vue-axios": "3.2.4"
     },

package/src/components/UnidooConfirmDialog.vue

@@ -6,7 +6,7 @@
         <v-card-actions>
           <v-spacer></v-spacer>
           <v-btn @click="confirmDialog=false">{{ cancelButtonLabel }}</v-btn>
-          <v-btn color="info" @click="confirm">{{ confirmButtonLabel }}</v-btn>
+          <v-btn color="info" @click="confirm" :loading="loading">{{ confirmButtonLabel }}</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
@@ -27,13 +27,16 @@ export default {
       width: '500px',
       cancelButtonLabel: "Cancel",
       confirmButtonLabel: "Confirm",
-      callback: {}
+      callback: {},
+      loading: false
     }
   },
   methods: {
-    confirm: function() {
+    async confirm () {
+      this.loading = true
+      await this.callback()
       this.confirmDialog = false
-      this.callback()
+      this.loading = false
     },
 
     show (params) {

package/src/components/UnidooTrajectoryMap.vue

@@ -0,0 +1,89 @@
+/* eslint-disable no-new */
+<template>
+  <div ref="map-root" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+  import View from 'ol/View'
+  import Map from 'ol/Map'
+  import TileLayer from 'ol/layer/Tile'
+  import OSM from 'ol/source/OSM'
+    import GeoJSON from 'ol/format/GeoJSON';
+      import VectorLayer from 'ol/layer/Vector'
+  import VectorSource from 'ol/source/Vector'
+  import { Stroke, Style } from 'ol/style';
+  // importing the OpenLayers stylesheet is required for having
+  // good looking buttons!
+  import 'ol/ol.css'
+
+  export default {
+    name: 'MapContainer',
+    components: {},
+    props: {
+    color: {
+      type: String,
+      default: 'red',
+    },
+    json: {
+      type: String,
+      default: '',
+    },
+    },
+    mounted() {
+      this.axios.get(this.json)
+      .then(res => {
+            const geoJsonObject = res.data
+             geoJsonObject.crs = {
+                type: 'name',
+                properties: {
+                name: 'EPSG:3857',
+                },
+            } 
+            const styles = {
+                LineString: new Style({
+                    stroke: new Stroke({
+                    color: this.color,
+                    width: 2,
+                    }),
+                }),
+            }
+            const styleFunction = function (feature) {
+            return styles[feature.getGeometry().getType()];
+            };
+            const vectorSource = new VectorSource({
+                features: new GeoJSON().readFeatures(geoJsonObject, {
+            dataProjection: 'EPSG:4326',
+          featureProjection: 'EPSG:3857'
+        })
+            })
+
+            const vectorLayer = new VectorLayer({
+                source: vectorSource,
+                style: styleFunction,
+                });
+
+            // this is where we create the OpenLayers map
+      // eslint-disable-next-line no-new
+     new Map({
+        // the map will be created using the 'map-root' ref
+        target: this.$refs['map-root'],
+        layers: [
+          // adding a background tiled layer
+          new TileLayer({
+            source: new OSM() // tiles are served by OpenStreetMap
+          }),
+          vectorLayer
+        ],
+
+        // the map view will initially show the whole world
+        view: new View({
+          zoom: 0,
+          center: [0, 0],
+          constrainResolution: true,
+          projection: 'EPSG:3857'
+        }),
+      }).getView().fit(vectorSource.getExtent());
+        })
+    },
+  }
+</script>

package/src/components/unidoo-player/unidoo-player-layout/UnidooPlayerLayout.vue

@@ -46,7 +46,7 @@
                   :id="id"
                   :max="max"
                   :min="min"
-                  :tick-labels="graduation"
+                  :tick-labels="filteredGraduation"
                   hide-details
                   ticks="always"
                   tick-size="4"
@@ -75,7 +75,7 @@
 
                   </template>
                 </v-slider>
-
+                <iframe ref="sizeHandlerIframe" src="about:blank" style="width:100%; height:0; border:0;"></iframe>
               </v-col>
             </v-list-item>
             
@@ -127,7 +127,9 @@ export default {
     isPlaying: false,
     clickedValue: null,
     id: null,
-    isZoomed: false
+    isZoomed: false,
+    filteredGraduation: [],
+    sliderSize: null
   }),
 
   computed: {
@@ -143,6 +145,7 @@ export default {
       const vh = (this.isZoomed) ? '60vh' : '40vh';
       return { gridTemplateRows: ((this.playerBarTop) ? '10px 140px 10px ' + vh + ' 10px' : '10px ' + vh + ' 10px 140px 10px')};
     }
+
   },
 
   watch: {
@@ -172,7 +175,17 @@ export default {
           self.focusSlider();
         })
       }
+    },
+
+    graduation(){
+      this.initGraduation();
+    },
+
+    sliderSize(){
+      this.initGraduation();
     }
+
+
   },
 
   created() {
@@ -189,10 +202,12 @@ export default {
       this.play();
     }
     document.dispatchEvent(new CustomEvent('show-play'));
+    this.initIframe();
   },
 
   beforeDestroy() {
     this.stop();
+    this.clearIframe();
   },
 
   destroyed() {
@@ -204,7 +219,6 @@ export default {
   },
 
   methods: {
-
     play() {
       if (this.max === 0 || !this.canPlay) {
         return;
@@ -321,6 +335,75 @@ export default {
       this.$emit('reload-frames');
     },
 
+    initGraduation(){
+      let result = [];
+      if(this.graduation){
+        const gradsLength = this.graduation.length;
+        let delta = 1;
+        if(this.sliderSize && gradsLength && this.graduation[0]){
+          const firstGrad = this.graduation[0].length * 9; // nb chars * number of pixels for 1 character
+          let exceed = Math.ceil(this.sliderSize - (gradsLength * firstGrad) - 30); // add 30px of margin
+          exceed = (exceed < 0) ? - exceed : 0;
+          const gradsExceed = exceed / firstGrad;
+          if(gradsLength - gradsExceed){
+            delta = Math.ceil(gradsLength / (gradsLength - gradsExceed)); 
+          } else {
+            delta = Math.ceil(gradsLength);
+          }
+        }
+
+        let n = 0;
+        this.graduation.forEach(element => {
+          if (n % delta) {
+            result.push(null);
+            } else {
+            result.push(element);
+          }
+          n++;
+        });
+      } 
+        
+      this.filteredGraduation = result;
+    },
+
+    initIframe(){
+      const iframe = this.$refs.sizeHandlerIframe;
+      if(iframe){
+        const box = iframe.getBoundingClientRect();
+        this.sliderSize = box.width - 114 -9 -32 -10; // - padding and margin
+        const iframeWin = iframe.contentWindow;
+        this.resizeListener = this.handleResize.bind(this);
+        iframeWin.addEventListener('resize', this.resizeListener);
+      }
+    },
+
+    clearIframe(){
+      const iframe = this.$refs.sizeHandlerIframe;
+      if(iframe){
+        const iframeWin = iframe.contentWindow;
+        if(iframeWin){
+          iframeWin.removeEventListener('resize', this.resizeListener);
+        }
+        this.resizeListener = null;
+      }
+    },
+
+    handleResize(){
+      // add a delay of 500ms to handle slider width resize
+      if(this.timer !== null){
+        clearTimeout(this.timer);
+      }
+      const self = this;
+      this.timer = setTimeout(() => {
+        const box = self.$refs.sizeHandlerIframe.getBoundingClientRect();
+        const sliderWidth = box.width - 114 -9 -32 -10;
+        if(self.sliderSize != sliderWidth){
+          self.sliderSize = sliderWidth;
+        }
+        self.time = null;
+      }, 200);
+    },
+
     create_UUID() {
       var dt = new Date().getTime();
       var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {

package/src/components/unidoo-player/unidoo-simple-player/UnidooSimplePlayer.vue

@@ -144,27 +144,10 @@ export default {
     
     initGraduation() {
       if (this.entries && this.entries.length) {
-        const entriesLength = this.entries.length;
-        if (entriesLength <= 8) {
           this.graduation = []
           this.entries.forEach(element => {
             this.graduation.push(element.type);
           });
-        } else {
-          const firstType = this.entries[0].type;
-          const typeLengthFactor = (firstType.length < 5) ? 1 : (firstType.length / 6);
-          const delta = (entriesLength <= 30) ? 2 : Math.round((entriesLength * typeLengthFactor) / 10);
-          this.graduation = []
-          let n = 0;
-          this.entries.forEach(element => {
-            if (n % delta) {
-              this.graduation.push(null);
-            } else {
-              this.graduation.push(element.type);
-            }
-            n++;
-          });
-        }
       }
     },
 

package/src/plugin.js

@@ -149,7 +149,7 @@ function install(Vue) {
             plugin.EventBus.$emit("unidoo-crud-show", params)
         },
     }
-
+  
     Vue.prototype.$unidooHeatmap = {
         setDate(date, key) {
             plugin.EventBus.$emit("unidoo-heatmap-set-date", { date: date, key: key })