mille storie
commenti da mastodon, widget con custom widget test...
This commit is contained in:
@@ -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)
|
||||
]
|
||||
|
||||
@@ -5,9 +5,9 @@
|
||||
:img-src='imgPath')
|
||||
strong {{event.title}}
|
||||
div <v-icon name='clock'/> {{event.start_datetime|datetime}}
|
||||
//- span <v-icon name='map-marker-alt'/> {{event.place.name}}
|
||||
span <v-icon name='map-marker-alt'/> {{event.place.name}}
|
||||
br
|
||||
el-tag.mr-1(:color='tag.color || "grey"' v-for='tag in event.tags' :key='tag.tag'
|
||||
el-tag.mr-1(:color='tag.color' v-for='tag in event.tags' :key='tag.tag'
|
||||
size='small' @click.stop='addSearchTag(tag)') {{tag.tag}}
|
||||
</template>
|
||||
<script>
|
||||
@@ -20,7 +20,7 @@ export default {
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
imgPath() {
|
||||
return this.event.image_path && '/uploads/thumb/' + this.event.image_path
|
||||
return this.event.image_path && '/media/thumb/' + this.event.image_path
|
||||
},
|
||||
mine() {
|
||||
return this.event.userId === this.user.id
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
<template lang="pug">
|
||||
div
|
||||
magic-grid(:animate="false" useMin :gap=5 :maxCols=4
|
||||
div(v-loading='loading')
|
||||
magic-grid(:animate="true" useMin :gap=5 :maxCols=4
|
||||
:maxColWidth='400' ref='magicgrid')
|
||||
div.mt-1.item
|
||||
//- Search#search
|
||||
no-ssr
|
||||
Calendar
|
||||
Event.item.mt-1(v-for='event in events'
|
||||
:key='event.id'
|
||||
:event='event')
|
||||
Event.item.mt-1(v-for='event in events'
|
||||
:key='event.id'
|
||||
:event='event')
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
import axios from 'axios'
|
||||
// import filters from '@/filters.js'
|
||||
import Event from '@/components/Event'
|
||||
@@ -23,10 +23,13 @@ import Calendar from '@/components/Calendar'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
// async asyncData ({req}) {
|
||||
// console.log('dentro asyncData')
|
||||
// const { data } = await axios.get('http://localhost:3000/api/event/2019/2')
|
||||
// return { events: data }
|
||||
data () {
|
||||
return { loading: true }
|
||||
},
|
||||
// created () {
|
||||
// const now = new Date()
|
||||
// const page = { month: now.getMonth() - 1, year: now.getFullYear() }
|
||||
// this.updateEvents(page)
|
||||
// },
|
||||
components: { Event, Calendar }, // , Calendar, Search },
|
||||
computed: {
|
||||
@@ -38,9 +41,14 @@ export default {
|
||||
.sort((a, b) => a.start_datetime > b.start_datetime)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.loading = false
|
||||
},
|
||||
methods: mapActions(['updateEvents']),
|
||||
watch: {
|
||||
filteredEvents() {
|
||||
this.$nextTick(this.$refs.magicgrid.positionItems)
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
34
components/List.vue
Normal file
34
components/List.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template lang="pug">
|
||||
div#gancio-widget
|
||||
//- el-card.mb-1(no-body header='Eventi')
|
||||
//- b-list-group#list(flush)
|
||||
p minimal {{minimal}}
|
||||
ul
|
||||
li.flex-column.align-items-start(v-for="event in events" :key='event.id'
|
||||
:to='`/event/${event.id}`' target='_parent')
|
||||
img(v-if='event.image_path' slot="aside" :src="`http://localhost:3000/media/${event.image_path}`" alt="Meia Aside" style='max-height: 60px')
|
||||
strong.mb-1 {{event.title}}
|
||||
br
|
||||
small.float-right {{event.place.name}}
|
||||
//- el-tag.mr-1(v-if='showtags' :color='tag.color || "rgba(64,158,255,.1)"' size='mini' v-for='tag in event.tags' :key='tag.tag') {{tag.tag}}
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
name: 'List',
|
||||
data () {
|
||||
return {
|
||||
events: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
minimal: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
this.events = (await axios.get('http://localhost:3000/api/export/json')).data
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -10,12 +10,13 @@
|
||||
span.d-md-none {{$t('common.add_event')}}
|
||||
b-nav-item(v-if='$auth.loggedIn' to='/settings' v-b-tooltip :title='$t("common.settings")') <v-icon color='orange' name='cog'/>
|
||||
span.d-md-none {{$t('common.settings')}}
|
||||
b-nav-item(v-if='$auth.hasScope(`admin`)' to='/admin' v-b-tooltip :title='$t("common.admin")') <v-icon color='lightblue' name='tools'/>
|
||||
b-nav-item(v-if='$auth.user.is_admin' to='/admin' v-b-tooltip :title='$t("common.admin")') <v-icon color='lightblue' name='tools'/>
|
||||
span.d-md-none {{$t('common.admin')}}
|
||||
b-nav-item(to='/export' v-b-tooltip :title='$t("common.export")') <v-icon name='file-export' color='yellow'/>
|
||||
span.d-md-none {{$t('common.export')}}
|
||||
b-nav-item(v-if='auth.loggedIn' @click='logout' v-b-tooltip :title='$t("common.logout")') <v-icon color='red' name='sign-out-alt'/>
|
||||
b-nav-item(v-if='$auth.loggedIn' @click='logout' v-b-tooltip :title='$t("common.logout")') <v-icon color='red' name='sign-out-alt'/>
|
||||
span.d-md-none {{$t('common.logout')}}
|
||||
b-nav-item
|
||||
b-navbar-nav.ml-auto
|
||||
b-nav-item(to='/about')
|
||||
span {{$t('common.info')}} <v-icon color='#ff9fc4' name='question-circle'/>
|
||||
@@ -26,7 +27,7 @@ import {mapState, mapActions} from 'vuex'
|
||||
export default {
|
||||
name: 'Nav',
|
||||
computed: {
|
||||
...mapState(['filters', 'auth']),
|
||||
...mapState(['filters']),
|
||||
filters_tags: {
|
||||
set (value) {
|
||||
this.setSearchTags(value)
|
||||
|
||||
Reference in New Issue
Block a user