mille storie

commenti da mastodon, widget con custom widget test...

components/Calendar.vue

@@ -1,15 +1,24 @@
 <template lang="pug">
     v-calendar#calendar.card(
+      title-position='left'
+      locale='it'
+      is-dark
       show-caps
       :attributes='attributes'
       :from-page.sync='page'
       is-expanded is-inline)
-      //- div(slot='popover', slot-scope='{ customData }')
-      //- router-link(:to="`/event/${customData.id}`") {{customData.start_datetime|hour}} - {{customData.title}} @{{customData.place.name}}
+      div(slot='popover', slot-scope='{ customData, attributes }')
+        p {{attributes}}
+        //- router-link(:to="`/event/${customData.id}`") {{customData.start_datetime|hour}} - {{customData.title}}
+        //- div(v-if='customData.days && customData.days[selectedEvent]')
+          p {{customData.days[customData.selectedEvent].title}}
+          p {{customData.days[customData.selectedEvent].tags}}
+          el-button(@click='customData.selectedEvent=customData.selectedEvent+1') {{customData.selectedEvent}}/{{customData.days.length}} 
+            v-icon(name='clock' @click='customData.selectedEvent=customData.selectedEvent+1')
+        //- @{{customData.place.name}}
 </template>
 <script>
 import { mapState, mapActions } from 'vuex'
-// import filters from '@/filters'
 import moment from 'dayjs'
 import { intersection } from 'lodash'
 
@@ -21,12 +30,11 @@ export default {
     const year = moment().year()
     return {
       page: { month, year},
+      selectedEvent: {},
+      daysWithEvents: {}
     }
   },
   
-  // async mounted () {
-    // await this.updateEvents(this.page)
-  // },
   watch: {
     page () {
       this.updateEvents(this.page)
@@ -34,17 +42,28 @@ export default {
   },
   methods: {
     ...mapActions(['updateEvents']),
+    nextEvent () {
+
+    },
     eventToAttribute(event) {
       let e = {
         key: event.id,
         customData: event,
         order: event.start_datetime,
-        // popover: {
-        //   slot: 'popover',
-        //   visibility: 'hover'
-        // }
       }
-      
+      const day = moment(event.start_datetime).date()
+      if (!this.daysWithEvents[day]) {
+        this.daysWithEvents[day] = []
+        e.popover = {
+          slot: 'popover',
+          visibility: 'hover',
+          isInteractive: true,
+          hideIndicator: true,
+        }
+        e.customData.days = this.daysWithEvents[day]
+      }
+      this.daysWithEvents[day].push({title: event.title, when: event.start_datetime, tags: event.tags })
+
       let color = event.tags && event.tags.length && event.tags[0].color ? event.tags[0].color : 'rgba(170,170,250,0.7)'
       if (event.past) color = 'rgba(200,200,200,0.5)'
       if (event.multidate) {
@@ -65,14 +84,14 @@ export default {
     filteredEvents () {
       return this.$store.getters.filteredEvents
     },
-    ...mapState(['events', 'filters', 'user', 'logged']),
+    ...mapState(['events', 'filters']),
     attributes () {
       return [
-        { key: 'todaly', dates: new Date(),
+        { key: 'today', dates: new Date(),
           highlight: {
             backgroundColor: '#aaffaa'
           },
-          // popover: {label: this.$t('Today')}
+          popover: {label: this.$t('common.today')}
         }, 
         ...this.filteredEvents.map(this.eventToAttribute)
       ]