@sedoo/unidoo 0.0.67 → 0.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sedoo/unidoo",
-    "version": "0.0.67",
+    "version": "0.0.71",
     "private": false,
     "scripts": {
         "build": "vue-cli-service build --target lib --name unidoo src/plugin.js",

package/src/components/unidoo-heatmap/date-switcher.vue

@@ -1,16 +1,16 @@
 <template>
   <div date-switch>
-    <v-btn icon x-small :disabled="!previousAvailable" style="margin-right: 4px;" @click="goToPreviousAvailable(1)">
+    <v-btn icon x-small :disabled="!previousAvailable" title="Previous available" style="margin-right: 4px;" @click="goToPreviousAvailable(1)">
       <v-icon>mdi-skip-previous</v-icon>
     </v-btn>
-    <v-btn icon x-small :disabled="!hasPrevious" style="margin-right: 8px;" @click="switchDate(-1)">
+    <v-btn icon x-small :disabled="!hasPrevious" title="Previous day" style="margin-right: 8px;" @click="switchDate(-1)">
       <v-icon>mdi-rewind</v-icon>
     </v-btn>
     <v-icon>mdi-calendar-month</v-icon>
-    <v-btn icon x-small :disabled="!hasNext" style="margin-left: 8px;" @click="switchDate(1)">
+    <v-btn icon x-small :disabled="!hasNext" title="Next day" style="margin-left: 8px;" @click="switchDate(1)">
       <v-icon>mdi-fast-forward</v-icon>
     </v-btn>
-    <v-btn icon x-small :disabled="!nextAvailable" style="margin-left: 4px;" @click="goToNextAvailable(1)">
+    <v-btn icon x-small :disabled="!nextAvailable" title="Next available" style="margin-left: 4px;" @click="goToNextAvailable(1)">
       <v-icon>mdi-skip-next</v-icon>
     </v-btn>
   </div>

package/src/components/unidoo-player/level-selector/level-selector-row.vue

@@ -1,27 +1,27 @@
 <template>
   <div selector-row>
-    <v-row container>
+    <div container>
       
       <span label>{{label}} : </span>
 
       <span line v-if="options && options.length > 0">
-        <span v-for="key in options"
-          value
-          :key="key"
-          :class="'level ' + ((availableOptions.includes(key)) ? 'clickable-level ' : 'disabled-level ')  + focus(key)"
-          @click="emitInput(key, (availableOptions.includes(key)))"
-        >{{key}}</span>
+        <span v-for="item in options"
+          :key="item.value"
+          :title="item.legend"
+          :class="'level ' + ((availableOptions.includes(item.value)) ? 'clickable-level ' : 'disabled-level ')  + focus(item.value)"
+          @click="emitInput(item.value, (availableOptions.includes(item.value)))"
+        >{{item.value}}</span>
       </span>
       <span line v-else>
-        <span v-for="key in availableOptions"
-          value
-          :key="key"
-          :class="'level ' + 'clickable-level ' + focus(key)"
-          @click="$emit('input', key)"
-        >{{key}}</span>
+        <span v-for="item in availableOptions"
+          :key="item.value"
+          :title="item.legend"
+          :class="'level ' + 'clickable-level ' + focus(item.value)"
+          @click="$emit('input', item.value)"
+        >{{item.value}}</span>
       </span>
     
-    </v-row>  
+    </div>  
     
   </div>
 </template>
@@ -55,7 +55,7 @@ export default {
   watch: {
     availableOptions(val) {
       if (val.length) {
-        if(this.value && val.includes(this.value)){
+        if (this.value && val.includes(this.value)) {
           this.$emit('input', this.value);
         } else {
           this.$emit('input', val[0]);
@@ -67,14 +67,14 @@ export default {
 
   methods: {
 
-    emitInput(key, available){
-      if(available){
+    emitInput(key, available) {
+      if (available) {
         this.$emit('input', key);
       }
     },
 
     focus(key) {
-      return this.value == key ? 'level-focused' : '';
+      return this.value === key ? 'level-focused' : '';
     }
   }
 
@@ -87,6 +87,7 @@ export default {
 
   [selector-row] [container]{
     display: flex;
+    flex-wrap: wrap;
     justify-items: center;
     align-items: center;
   }
@@ -139,4 +140,3 @@ export default {
   }
 
 </style>
-

package/src/components/unidoo-player/level-selector/level-selector.vue

@@ -2,7 +2,7 @@
   <div selector>
     <v-col level-selector v-if="levels && data">
 
-      <v-row style="margin: 0 -12px;" v-for="(key) in levelKeys"
+      <div style="display: flex; flex-wrap: wrap; margin: 0 -12px;" v-for="(key) in levelKeys"
         :key="key"
       >
         <level-selector-row
@@ -12,7 +12,7 @@
           :options="getAllOptions(key)"
         ></level-selector-row>
 
-      </v-row>
+      </div>
     </v-col>
   </div>
 </template>
@@ -31,7 +31,7 @@ export default {
       type: Array
     },
 
-    showUnavailable:{
+    showUnavailable: {
       type: Boolean,
       default: true
     }
@@ -41,7 +41,7 @@ export default {
     selector: null,
     levelOptions: null, // tree used to update options
     options: null,
-    entries:  null,
+    entries: null,
     levelKeys: null,
     availableOptions: null
   }),
@@ -60,16 +60,16 @@ export default {
     
   },
 
-  mounted(){
+  mounted() {
     this.initData(this.data);
   },
 
   methods: {
 
     initData(data) {
-      if(data){
-        if(data.entries && data.entries.length){
-          if(data.levels){
+      if (data) {
+        if (data.entries && data.entries.length) {
+          if (data.levels) {
             this.initLevels(data.levels, data.entries);
           } else {
             this.$emit('input', this.sort(data.entries));
@@ -82,7 +82,7 @@ export default {
       }
     },
 
-    loadSelector(val){
+    loadSelector(val) {
       // update options by level
       if (val) {
         if (!this.availableOptions) {
@@ -93,7 +93,7 @@ export default {
         const self = this;
         keys.forEach(k => {
           const values = self.optionsFromLevel(k);
-          if (JSON.stringify(values) != JSON.stringify(self.availableOptions[k])) {
+          if (JSON.stringify(values) !== JSON.stringify(self.availableOptions[k])) {
             self.availableOptions[k] = values;
           }
         })
@@ -102,9 +102,8 @@ export default {
       this.$emit('input', this.sort(this.entries[this.getLevelIdFromSelector(val)]));
     },
 
-   initLevels(levels, entries){
-
-      if(levels.length > 0 && entries.length > 0){
+   initLevels(levels, entries) {
+      if (levels.length > 0 && entries.length > 0) {
         this.levelKeys = [];
         this.levels = {};
         this.entries = {};
@@ -112,67 +111,62 @@ export default {
 
         levels.forEach(l => {
           this.levelKeys.push(l.name);
-          this.levels[l.name] = { label : l.label };
+          this.levels[l.name] = { label: l.label };
         });
 
         this.levelKeys.sort();
         
         // init default selector using first entry
-        let defaultSelector = {};
+        const defaultSelector = {};
         entries[0].levels.forEach(l => {
           defaultSelector[l.name] = l.value;
         });
 
         // init options tree
-        let tempOptions = {};
+        const tempOptions = {};
         entries.forEach(entry => {
-          if(entry.levels){
-            
-            
-            let entryLevels = [...entry.levels];
+          if (entry.levels) {
+            const entryLevels = [...entry.levels];
             entryLevels.sort((a, b) => b.name.localeCompare(a.name));            
 
             let branch = null;
             entryLevels.forEach(l => {
-              let tuple = {};
+              const tuple = {};
               tuple[l.value] = branch
               branch = tuple;
-              
             });
 
             this.mergeDeep(tempOptions, branch);
 
-            let curLevels = entry.levels;
+            const curLevels = entry.levels;
             curLevels.sort((a, b) => a.name.localeCompare(b.name));
 
             let levelId = '';
             curLevels.forEach(l => {
-              
-              if(this.levels[l.name]){
-                if(!this.levels[l.name].values) this.levels[l.name].values = [];
-                this.pushIfNotExist(this.levels[l.name].values, l.value);
-
+              if (this.levels[l.name]) {
+                if (!this.levels[l.name].values) this.levels[l.name].values = [];
+                this.pushIfObjectNotExist(this.levels[l.name].values, { value: l.value, legend: this.getLegend(l.value) });
+                // this.pushIfNotExist(this.levels[l.name].values, l.value);
               }
 
               // compute id with options combination
               levelId += ((levelId) ? SEPARATOR : '') + l.value;
             });
 
-            if(!this.entries[levelId]) this.entries[levelId] = [];
+            if (!this.entries[levelId]) this.entries[levelId] = [];
 
             // store data by options combination
             this.entries[levelId].push(entry);
           }
-
         });
         
         this.levelOptions = tempOptions;
   
-        if(this.selector){
+        if (this.selector) {
           // try to return data from entries map and last selector value
           // else use selector default value
-          let lastSelectionEntries = this.entries[this.getLevelIdFromSelector(this.selector)];
-          if(lastSelectionEntries && lastSelectionEntries.length > 0){
+          const lastSelectionEntries = this.entries[this.getLevelIdFromSelector(this.selector)];
+          if (lastSelectionEntries && lastSelectionEntries.length > 0) {
             this.loadSelector(this.selector);
           } else {
             this.selector = defaultSelector;
@@ -183,6 +177,17 @@ export default {
       }
     },
 
+    getLegend(value){
+      if(value && this.data && this.data.legend){
+        const legend = this.data.legend.find(el => (el.code && el.code.toUpperCase() === value.toUpperCase()));
+        if(legend) {
+          return legend.label;
+        } else {
+          return null;
+        }
+      }
+    },
+
     mergeDeep(target, source) {
       const isObject = (obj) => obj && typeof obj === 'object';
 
@@ -195,7 +200,7 @@ export default {
         const sourceValue = source[key];
 
         if (isObject(targetValue) && isObject(sourceValue)) {
-          let t = Object.assign({}, targetValue);
+          const t = Object.assign({}, targetValue);
           target[key] = this.mergeDeep(t, sourceValue);
         } else {
           target[key] = sourceValue;
@@ -205,10 +210,10 @@ export default {
       return target;
     },
 
-    getLevelIdFromSelector(selectorValue){
+    getLevelIdFromSelector(selectorValue) {
       let levelId = '';
-      if(selectorValue){
-        let keys = Object.keys(selectorValue);  
+      if (selectorValue) {
+        const keys = Object.keys(selectorValue);  
         keys.sort();
 
         keys.forEach(k => {
@@ -218,21 +223,20 @@ export default {
       return levelId;
     },
 
-    optionsFromLevel(key){
-      if(this.levelOptions && this.selector){
-
+    optionsFromLevel(key) {
+      if (this.levelOptions && this.selector) {
         const selectorKeys = Object.keys(this.selector);
         selectorKeys.sort();
 
         const index = selectorKeys.indexOf(key);
-        const indexes = selectorKeys.slice(0,index);
+        const indexes = selectorKeys.slice(0, index);
 
         // traverse levelOptions by level using selector values
         let result = this.levelOptions;
         const self = this;
         indexes.forEach(k => {
           const tmp = result[self.selector[k]];
-          if(tmp){
+          if (tmp) {
             result = tmp;
           } else {
             result = result[Object.keys(result)[0]];
@@ -243,8 +247,8 @@ export default {
       }
     },
 
-    getAllOptions(key){
-      if(this.showUnavailable && this.levels[key]){
+    getAllOptions(key) {
+      if (this.showUnavailable && this.levels[key]) {
         return this.levels[key].values;
       } else {
         return null;
@@ -257,9 +261,16 @@ export default {
         }
     },
 
-    sort(array){
+    pushIfObjectNotExist(array, element) { 
+        if (array && !array.some(e => e.value === element.value)) {
+            array.push(element);
+        }
+    },
+
+
+    sort(array) {
       if (array) {
-        if (array.length > 1){
+        if (array.length > 1) {
           let compare = null;
       
           compare = function(a, b) {
@@ -271,10 +282,10 @@ export default {
               second = parseInt(b.type);
             }
 
-            if ( first > second ){
+            if (first > second) {
               return 1;
             }
-            if ( first < second ){
+            if (first < second) {
               return -1;
             }
             return 0;
@@ -287,14 +298,11 @@ export default {
       } else {
         return array;
       }
-      
     },
   }
 
 }
 </script>
 <style scoped>
- 
 
 </style>
-