NoLog.cz/gancio-upstream
6
0
Fork 0
mirror of https://framagit.org/les/gancio.git synced 2025-01-31 16:42:22 +01:00
Code Issues Projects Releases Packages Wiki Activity

calendar attributes refactoring (a dot each days)

Browse source
This commit is contained in:
lesion 2022-05-31 15:14:54 +02:00
parent a8534acadd
commit 20e9954ad0
No known key found for this signature in database
GPG key ID: 352918250B012177
2 changed files with 33 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
assets/helper.js
View file

@ -1,56 +1,39 @@
import take from 'lodash/take'
import get from 'lodash/get'
import dayjs from 'dayjs'
export function attributesFromEvents (_events, _tags) {
const colors = ['blue', 'orange', 'yellow', 'teal', 'indigo', 'green', 'red', 'purple', 'pink', 'gray']
const tags = take(_tags, 10).map(t => t.tag)
let attributes = []
attributes.push({ key: 'today', dates: new Date(), bar: { color: 'green', fillMode: 'outline' } })
const now = dayjs().unix()
export function attributesFromEvents (_events) {
function getColor (event, where) {
const color = { class: 'vc-rounded-full', color: 'blue', fillMode: where === 'base' ? 'light' : 'solid' }
const tag = get(event, 'tags[0]')
if (event.start_datetime < now) {
if (event.multidate) {
color.fillMode = where === 'base' ? 'light' : 'outline'
if (where === 'base') {
color.class += ' vc-past'
}
} else {
color.class += ' vc-past'
}
// const colors = ['teal', 'green', 'yellow', 'teal', 'indigo', 'green', 'red', 'purple', 'pink', 'gray']
// merge events with same date
let attributes = []
const now = dayjs().unix()
for(let e of _events) {
const key = dayjs.unix(e.start_datetime).format('YYYYMMDD')
const c = e.start_datetime < now ? 'vc-past' : ''
const i = attributes.find(a => a.day === key)
if (!i) {
attributes.push({ day: key, key: e.id, n: 1, dates: new Date(e.start_datetime * 1000),
dot: { color: 'teal', class: c } })
continue
}
if (!tag) { return color }
const idx = tags.indexOf(tag)
if (idx < 0) { return color }
color.color = colors[idx]
// if (event.start_datetime < now) { color.class += ' vc-past' }
return color
i.n++
if (i.n >= 20 ) {
i.dot = { color: 'purple', class: c }
} else if ( i.n >= 10 ) {
i.dot = { color: 'red', class: c}
} else if ( i.n >= 5 ) {
i.dot = { color: 'orange', class: c}
} else if ( i.n >= 3 ) {
i.dot = { color: 'yellow', class: c}
} else {
i.dot = { color: 'teal', class: c }
}
}
attributes = attributes.concat(_events
.filter(e => !e.multidate)
.map(e => {
return {
key: e.id,
dot: getColor(e),
dates: new Date(e.start_datetime * 1000)
}
}))
attributes = attributes.concat(_events
.filter(e => e.multidate)
.map(e => ({
key: e.id,
highlight: {
start: getColor(e),
base: getColor(e, 'base'),
end: getColor(e)
},
dates: { start: new Date(e.start_datetime * 1000), end: new Date(e.end_datetime * 1000) }
})))
// add a bar to highlight today
attributes.push({ key: 'today', dates: new Date(), highlight: { color: 'green', fillMode: 'outline' } })
return attributes
}

7
components/Calendar.vue
View file

@ -16,7 +16,7 @@
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { mapState } from 'vuex'
import dayjs from 'dayjs'
import { attributesFromEvents } from '../assets/helper'
@ -34,13 +34,12 @@ export default {
}
},
computed: {
...mapState(['tags', 'filters', 'in_past', 'settings']),
...mapState(['settings']),
attributes () {
return attributesFromEvents(this.events, this.tags)
return attributesFromEvents(this.events)
}
},
methods: {
...mapActions(['updateEvents', 'showPastEvents']),
updatePage (page) {
this.$emit('monthchange', page)
},