better calendar attrs and same day events

This commit is contained in:
lesion
2019-06-12 23:41:19 +02:00
parent e5fb3b2cca
commit c8895e77ff
4 changed files with 64 additions and 75 deletions

View File

@@ -37,40 +37,28 @@ export default {
const element = document.getElementById(day.day)
if (element) element.scrollIntoView(); //Even IE6 supports this
},
eventToAttribute(event) {
let e = {
key: event.id,
customData: event,
order: event.start_datetime,
}
const day = moment(event.start_datetime).date()
// let color = event.past ? 'rgba(200,200,200,0.5)' : get(event, 'tags[0].color') || 'rgba(170,170,250,0.7)'
if (event.multidate) {
e.dates = {
start: event.start_datetime, end: event.end_datetime
}
e.highlight = {
color: sample(['purple', 'yellow', 'orange', 'red', 'green', 'blue']),
}
} else {
e.dates = event.start_datetime
e.dot = { color: sample(['purple', 'red', 'orange', 'yellow', 'green', 'blue']) }
}
return e
}
},
computed: {
...mapGetters(['filteredEvents']),
...mapState(['events']),
attributes () {
return [
{ key: 'today', dates: new Date(),
highlight: {
backgroundColor: '#aaffaa'
},
},
...this.filteredEvents.map(this.eventToAttribute)
highlight: { color: 'red' },
},
{
key: 'event',
dates: this.filteredEvents
.filter(e => !e.multidate)
.map(e => e.start_datetime ),
dot: { }
},
{
key: 'multidays',
dates: this.filteredEvents
.filter(e => e.multidate)
.map( e => ({ start: e.start_datetime, end: e.end_datetime })),
highlight: { color: 'green' }
}
]
}
}

View File

@@ -7,7 +7,6 @@
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint",
"migrate:dev": "sequelize db:migrate",

View File

@@ -17,8 +17,8 @@
//- WHERE
el-tab-pane
span(slot='label') <v-icon name='map-marker-alt'/> {{$t('common.where')}}
p(v-html="$t('event.where_description')")
span(slot='label') <v-icon name='map-marker-alt'/> {{$t('common.where')}}
p(v-html="$t('event.where_description')")
el-select.mb-3(v-model='event.place.name'
@change='placeChoosed'
@@ -48,7 +48,7 @@
is-expanded
:min-date='new Date()'
)
el-row
el-col(:span='12')
div {{$t('event.time_start_description')}}
@@ -70,11 +70,11 @@
span {{$t('event.description_description')}}
el-input.mb-3(v-model='event.description' type='textarea' :rows='9')
span {{$t('event.tag_description')}}
br
br
el-select(v-model='event.tags' multiple filterable allow-create
default-first-option placeholder='Tag')
el-option(v-for='tag in tags' :key='tag.tag'
:label='tag' :value='tag')
:label='tag' :value='tag')
el-button.float-right(@click.native='next' :disabled='!couldProceed') {{$t('common.next')}}
@@ -107,7 +107,7 @@ export default {
const month = moment().month()+1
const year = moment().year()
return {
event: {
event: {
place: { name: '', address: '' },
title: '', description: '', tags: [],
multidate: false,
@@ -164,7 +164,7 @@ export default {
if (event.multidate) {
data.date = { start: new Date(event.start_datetime), end: new Date(event.end_datetime) }
} else {
data.date = new Date(event.start_datetime)// moment(event.start_datetime)
data.date = new Date(event.start_datetime)
}
data.time.start = moment(event.start_datetime).format('HH:mm')
data.time.end = moment(event.end_datetime).format('HH:mm')
@@ -177,7 +177,6 @@ export default {
data.loading = false
return data
}
console.error('prima del return')
return { loading: false }
},
computed: {
@@ -190,15 +189,34 @@ export default {
}),
todayEvents () {
const date = moment(this.date)
return this.events.filter(e => date.isSame(moment(e.start_datetime), 'day'))
return this.events.filter(e =>
!e.multidate ?
date.isSame(moment(e.start_datetime), 'day') :
moment(e.start_datetime).isSame(date, 'day') ||
moment(e.start_datetime).isBefore(date) && moment(e.end_datetime).isAfter(date)
)
},
...mapGetters(['filteredEvents']),
attributes () {
const tmp_events = this.events
.filter(e => this.id ? e.id !== this.event.id : true)
.filter(e => !e.past)
return tmp_events.map(this.eventToAttribute)
return [
{ key: 'today', dates: new Date(),
highlight: { color: 'red' },
},
{
key: 'event',
dates: this.filteredEvents
.filter(e => !e.multidate)
.map(e => e.start_datetime ),
dot: { }
},
{
key: 'multidays',
dates: this.filteredEvents
.filter(e => e.multidate)
.map( e => ({ start: e.start_datetime, end: e.end_datetime })),
highlight: { color: 'green' }
}
]
},
disableAddress () {
return this.places_name.find(p => p.name === this.event.place.name)
@@ -209,42 +227,22 @@ export default {
case 0+t:
return true
case 1+t:
return this.event.place.name.length>0 &&
return this.event.place.name.length>0 &&
this.event.place.address.length>0
case 2+t:
if (this.date && this.time.start) return true
case 3+t:
return this.event.title.length>0
case 4+t:
return this.event.place.name.length>0 &&
this.event.place.address.length>0 &&
return this.event.place.name.length>0 &&
this.event.place.address.length>0 &&
(this.date && this.time.start) &&
this.event.title.length>0
this.event.title.length>0
}
}
},
methods: {
...mapActions(['addEvent', 'updateEvent', 'updateMeta', 'updateEvents']),
eventToAttribute(event) {
let e = {
key: event.id,
customData: event,
order: event.start_datetime,
}
const day = moment(event.start_datetime).date()
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) {
e.dates = {
start: event.start_datetime, end: event.end_datetime
}
e.highlight = { }
} else {
e.dates = event.start_datetime
e.dot = { }
}
return e
},
next () {
this.activeTab = String(Number(this.activeTab)+1)
if (this.activeTab === "2") {

View File

@@ -2,7 +2,8 @@
el-card#eventDetail(v-loading='!loaded')
//- close button
nuxt-link.float-right(to='/')
el-button(circle icon='el-icon-close' type='danger' size='small' plain)
el-button(type='danger' plain circle)
v-icon(name='times')
div(v-if='!event')
h5 {{$t('event.not_found')}}
@@ -12,9 +13,11 @@
h5.text-center {{event.title}}
div.nextprev
nuxt-link(v-if='prev' :to='`/event/${prev.id}`')
el-button(icon='el-icon-arrow-left' round type='success')
el-button( round type='success')
v-icon(name='chevron-left')
nuxt-link.float-right(v-if='next' :to='`/event/${next.id}`')
el-button(icon='el-icon-arrow-right' round type='success')
el-button(round type='success')
v-icon(name='chevron-right')
//- image
img(:src='imgPath' v-if='event.image_path' @load='image_loaded')
@@ -32,13 +35,13 @@
//- show hide, confirm, delete, edit buttons when allowed
div(v-if='mine')
hr
el-button(v-if='event.is_visible' size='mini' plain type='warning' @click.prevents='toggle' icon='el-icon-view') {{$t('common.hide')}}
el-button(v-else plain type='success' size='mini' @click.prevents='toggle' icon='el-icon-view') {{$t('common.confirm')}}
el-button(plain type='danger' size='mini' @click.prevent='remove' icon='el-icon-remove') {{$t('common.remove')}}
el-button(plain type='primary' size='mini' @click='$router.replace(`/add/${event.id}`)' icon='el-icon-edit') {{$t('common.edit')}}
el-button(v-if='event.is_visible' size='mini' plain type='warning' @click.prevents='toggle') {{$t('common.hide')}}
el-button(v-else plain type='success' size='mini' @click.prevents='toggle') {{$t('common.confirm')}}
el-button(plain type='danger' size='mini' @click.prevent='remove') {{$t('common.remove')}}
el-button(plain type='primary' size='mini' @click='$router.replace(`/add/${event.id}`)') {{$t('common.edit')}}
//- comments
.card-body(v-if='event.activitypub_id')
.card-body(v-if='event.activitypub_id && settings')
strong {{$t('common.related')}} -
a(:href='`https://mastodon.cisti.org/web/statuses/${event.activitypub_id}`') {{$t('common.add')}}
.card-header(v-for='comment in event.comments' :key='comment.id')
@@ -93,6 +96,7 @@ export default {
},
computed: {
...mapGetters(['filteredEvents']),
...mapState(['settings']),
next () {
let found = false
return this.filteredEvents.find(e => {