@sedoo/unidoo 0.0.60 → 0.0.64

package/package.json

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

package/src/components/unidoo-heatmap/Heatmap.js

@@ -8,6 +8,8 @@ export default class CalendarHeatmap {
       this.max = Math.ceil((Math.max(...values.map(day => day.count)) / 5) * 4)
     }
     this.values = values.map(v => { return { date: this._valuesDateFormat(v.date), count: v.count } })
+    this.times = this._getTimes(this.year.getFullYear())
+    this.times.sort()
   }
 
   get activities () {
@@ -44,6 +46,13 @@ export default class CalendarHeatmap {
     return new Date(year, month + 1, 0).getDate()
   }
 
+  daysInYear(year) {
+    const start = new Date(year, 0, 0)
+    const end = new Date(year, 11, 31)
+    const diff = end - start
+    return Math.floor(diff / (1000 * 60 * 60 * 24))
+  }
+
   getColorIndex (value) {
     if (value == null || value === undefined) {
       return 0
@@ -72,10 +81,95 @@ export default class CalendarHeatmap {
     }
   }
 
+  getNextAvailableDate(date, countGreaterThanZero) {
+    if (date) {
+      date.setHours(0, 0, 0)
+      if (this.times && this.times.length) {
+        let index = this.times.indexOf(this._encodeDate(date, null))
+        if (index < 0) index = this.times.indexOf(this._encodeDate(date, 1))
+        if (index < 0) index = this.times.indexOf(this._encodeDate(date, 0))
+        if (index >= 0) {
+          const maxIndex = this.times.length - 1
+          let n = index + 1
+          if (countGreaterThanZero) {
+            while (n < maxIndex) {
+              const curr = this.times[n]
+              if (curr.endsWith('i')) return this._decodeDate(curr)
+              n++
+            }
+          } else {
+            while (n < maxIndex) {
+              const curr = this.times[n]
+              if (!curr.endsWith('n')) return this._decodeDate(curr)
+              n++
+            }
+          }
+        } 
+      }
+    }
+    return null
+  }
+
+  getPreviousAvailableDate(date, countGreaterThanZero) {
+    if (date) { 
+      date.setHours(0, 0, 0)
+      if (this.times && this.times.length) {
+        let index = this.times.indexOf(this._encodeDate(date, null))
+        if (index < 0) index = this.times.indexOf(this._encodeDate(date, 1))
+        if (index < 0) index = this.times.indexOf(this._encodeDate(date, 0))
+        if (index > 0) {
+          let n = index - 1
+          if (countGreaterThanZero) {
+            while (n > 0) {
+              const curr = this.times[n]
+              if (curr.endsWith('i')) return this._decodeDate(curr)
+              n--
+            }
+          } else {
+            while (n > 0) {
+              const curr = this.times[n]
+              if (!curr.endsWith('n')) return this._decodeDate(curr)
+              n--
+            }
+          }
+        }
+      }
+    }
+    return null
+  }
+
+  _getTimes (year) {
+    const date = new Date(year, 0, 1)
+    return Array.from({ length: this.daysInYear(year) }, 
+      () => {
+        const dDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+        dDate.setHours(0, 0, 0)
+        const dayValues = this.activities[this._keyDayParser(dDate)]
+        date.setDate(date.getDate() + 1)
+        return this._encodeDate(dDate, (dayValues) ? dayValues.count : null)
+      }
+    )
+  }
+  
   _valuesDateFormat (d) {
     if (!d) return ''
-    const date = (d instanceof Date) ? d : (new Date(d));
-    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
+    const date = this._parseDate(d)
+    return `${date.getFullYear()}-${this._paddNumber(date.getMonth() + 1)}-${this._paddNumber(date.getDate())}`
+  }
+
+  _paddNumber (n) {
+    return ('' + n).padStart(2, '0')
+  }
+
+  _encodeDate (d, count) {
+    const date = this._parseDate(d)
+    return this._valuesDateFormat(date) + ((Number.isFinite(count)) ? ((count > 0) ? 'i' : 'o') : 'n')
+  }
+
+  _decodeDate (d) {
+    if (!d) return null
+    const sdate = d.slice(0, -1)
+    return new Date(sdate)
   }
 
   _parseDate (entry) {

package/src/components/unidoo-heatmap/UnidooHeatmap.vue

@@ -88,19 +88,21 @@ export default {
     }
   },
   data: () => ({
-    now: new Date(new Date().setHours(23,59,59,999)) 
+    now: new Date(new Date().setHours(23, 59, 59, 999)) 
   }),
   watch: {
     dateValue (val) {
       this.focusDate(val)
+      this.updateDateSwitcher(val)
     },
-    year (val) {
-      if (val !== this.year) {
+    year (val, old) {
+      if (val !== old) {
         const rects = document.querySelectorAll('[heatmap-calendar] [month] .monthday')
         rects.forEach(element => {
           element.classList.remove('day-focus')
         });
         this.focusDate(this.dateValue)
+        this.updateDateSwitcher(null)
       }
     }
   },
@@ -121,7 +123,7 @@ export default {
       return DEFAULT_LOCALE
     },
     dateValue() {
-      if(this.value){
+      if (this.value) {
         return (this.value instanceof Date) ? this.value : this.value.date;
       } else {
         return this.value;
@@ -130,14 +132,23 @@ export default {
   },
   beforeMount () {
     Plugin.EventBus.$on("unidoo-heatmap-set-date", params => {
-      if(this.heatmapKey && params.key === this.heatmapKey){
-        if(params.date){
+      if (this.heatmapKey) {
+        if (params.key === this.heatmapKey && params.date) {
           this.setDate(params.date)
-        }
-      } else if(params.date) {
+        } 
+      } else if (params.date) {
         this.setDate(params.date)
       }
     })
+    Plugin.EventBus.$on("unidoo-heatmap-get-date", params => {
+      if (this.heatmapKey) {
+        if (params.key === this.heatmapKey) {
+          this.updateDateSwitcher(this.dateValue)
+        } 
+      } else { 
+        this.updateDateSwitcher(this.dateValue)
+      }
+    })
   },
   methods: {
     computeClass (day) {
@@ -174,7 +185,7 @@ export default {
     handleClick (e, day) {
       if (day) {
         if (day.date <= this.now && (typeof day.count === 'number' || this.missingAllowed)) {
-          if(this.returnObject){
+          if (this.returnObject) {
             this.$emit('input', day);
           } else {
             this.$emit('input', day.date);
@@ -185,8 +196,30 @@ export default {
     setDate (d) {
       if (!d) return
       const day = this.heatmap.getDayFromDate(d);
-      this.handleClick(null, day); 
-    
+      this.handleClick(null, day);
+    },
+    updateDateSwitcher (d) {
+      this.$unidooDateSwitcher.update({
+        hasPrevious: this.hasPreviousDate(d), 
+        hasNext: this.hasNextDate(d), 
+        previousAvailable: this.heatmap.getPreviousAvailableDate(d),
+        nextAvailable: this.heatmap.getNextAvailableDate(d) 
+      }, this.heatmapKey);
+    },
+    hasPreviousDate (d) {
+      if (!d || !this.compairDateWithYear(d)) return false;
+      const syear = (this.year instanceof Date) ? this.year.getFullYear() : this.year;
+      const firstDay = new Date(syear, 0, 1);
+      d.setHours(0, 0, 0, 0);
+      if (d <= firstDay) return false;
+      return true; 
+    },
+    hasNextDate (d) {
+      if (!d || !this.compairDateWithYear(d)) return false
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+      if (d >= today) return false;
+      return true;
     },
     focusDate (d) {
       if (!d) return
@@ -254,6 +287,15 @@ export default {
       return first.getFullYear() === second.getFullYear() &&
         first.getMonth() === second.getMonth() &&
         first.getDate() === second.getDate()
+    },
+    compairDateWithYear (d) { 
+      if (this.year && d) {
+        const sd = '' + ((d instanceof Date) ? d.getFullYear() : d);
+        const syear = '' + ((this.year instanceof Date) ? this.year.getFullYear() : this.year);
+        return syear === sd;
+      } else {
+        return false
+      }
     }
   }
 }

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

@@ -1,46 +1,119 @@
 <template>
   <div date-switch>
-    <v-btn icon x-small  style="margin-right: 5px;" @click="switchDate(-1)">
+    <v-btn icon x-small :disabled="!previousAvailable" 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-icon>mdi-rewind</v-icon>
+    </v-btn>
     <v-icon>mdi-calendar-month</v-icon>
-    <v-btn icon x-small  style="margin-left: 5px;" @click="switchDate(1)">
+    <v-btn icon x-small :disabled="!hasNext" 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-icon>mdi-skip-next</v-icon>
     </v-btn>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'date-switcher',
+import Plugin from '../../plugin.js'
 
+export default {
   props: {
-    date : {
-      type : [String, Date],
+    date: {
+      type: [String, Date],
+      default: null
+    },
+    heatmapKey: {
+      type: String,
       default: null
     }
   },
-
-  computed:{
-    cleanedDate(){
-      if(this.date){
-        if(typeof this.date === 'date'){
-          return date;
-        } else if(typeof this.date === 'string'){
-          return new Date(this.date);
-        }
-      } 
-      return null;
+  data () {
+    return {
+      hasNext: false,
+      hasPrevious: false,
+      nextAvailable: {
+        type: Date,
+        default: null
+      }, 
+      previousAvailable: {
+        type: Date,
+        default: null
+      },
+    }
+  },
+  computed: {
+    cleanedDate() {
+      return this.cleanDate(this.date);
     }
   },
+  beforeMount () {
+    Plugin.EventBus.$on("unidoo-dateswitcher-update", params => {
+      if (this.heatmapKey) {
+        if (params.key === this.heatmapKey && params.data) {
+          this.updateNearDates(params.data);
+        } 
+      } else if (params.data) {
+        this.updateNearDates(params.data);
+      } else {
+        this.reset();
+      }
+    })
+  },
+
+  mounted () {
+    this.$unidooHeatmap.getDate(this.heatmapKey);
+  },
 
   methods: {
-    switchDate(n){
-      if(this.cleanedDate && n){
-        let newDate = new Date(this.cleanedDate);
-        newDate.setDate(this.cleanedDate.getDate() + n);
-        this.$unidooHeatmap.setDate(newDate);
+    reset() {
+      this.hasNext = false
+      this.hasPrevious = false
+      this.nextAvailable = null
+      this.previousAvailable = null
+    },
+    goToNextAvailable() {
+      if (this.hasNext) {
+        this.$unidooHeatmap.setDate(this.cleanDate(this.nextAvailable), this.heatmapKey);
+      }
+    },
+
+    goToPreviousAvailable() {
+      if (this.hasPrevious) {
+        this.$unidooHeatmap.setDate(this.cleanDate(this.previousAvailable), this.heatmapKey);
+      }
+    },
+
+    switchDate(n) {
+      if (this.cleanedDate && n) {
+        if ((n > 0 && this.hasNext) || (n < 0 && this.hasPrevious)) {
+          const newDate = new Date(this.cleanedDate);
+          newDate.setDate(this.cleanedDate.getDate() + n);
+          this.$unidooHeatmap.setDate(newDate, this.heatmapKey);
+        }
+      }
+    },
+
+    updateNearDates(data) {
+      if (data) {
+        this.hasNext = data.hasNext
+        this.hasPrevious = data.hasPrevious
+        this.nextAvailable = data.nextAvailable
+        this.previousAvailable = data.previousAvailable
       }
+    },
+
+    cleanDate(date) {
+      if (date) {
+        if (date instanceof Date) {
+          return date;
+        } else if (typeof date === 'string') {
+          return new Date(date);
+        }
+      } 
+      return null;
     }
   }
 }
@@ -51,9 +124,8 @@ export default {
     display: flex;
     align-items: center;
     padding: 1px;
+    width: fit-content;
     background: rgb(245,245,245);
     border-radius: 5px;
   }
-</style>
-
-
+</style>

package/src/plugin.js

@@ -154,6 +154,16 @@ function install(Vue) {
         setDate(date, key) {
             plugin.EventBus.$emit("unidoo-heatmap-set-date", { date: date, key: key })
         },
+
+        getDate(key) {
+            plugin.EventBus.$emit("unidoo-heatmap-get-date", { key: key })
+        }
+    }
+
+    Vue.prototype.$unidooDateSwitcher = {
+        update(data, key) {
+            plugin.EventBus.$emit("unidoo-dateswitcher-update", { data: data, key: key })
+        },
     }
 }