mille storie

commenti da mastodon, widget con custom widget test...
This commit is contained in:
lesion
2019-04-29 00:27:29 +02:00
parent 3b80dd5f73
commit ac5ef6e324
34 changed files with 573 additions and 275 deletions

View File

@@ -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)
]

View File

@@ -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

View File

@@ -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
View 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>

View File

@@ -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)