keep migrating to vuetify

This commit is contained in:
les
2021-01-11 00:17:56 +01:00
parent 539c0fa933
commit 3abb39f62b
24 changed files with 1382 additions and 1389 deletions

View File

@@ -1,7 +1,7 @@
<template lang="pug">
v-container
v-card
v-tabs
v-tabs(v-model='selectedTab')
//- SETTINGS
v-tab {{$t('common.settings')}}

View File

@@ -2,6 +2,7 @@
v-row
v-date-picker.col-md-6(
mode='dateTime'
is24hr
:input-debounce="200"
:min='today'
:minute-increment="5"
@@ -15,7 +16,6 @@ v-row
:value='inputValue'
:label="$t('event.from')"
:rules="[$validators.required('common.when')]"
:hint="$t(`event.description`)"
ref='date'
prepend-icon='mdi-calendar'
persistent-hint
@@ -24,6 +24,7 @@ v-row
v-date-picker.col-md-4(
mode='dateTime'
is24hr
:minute-increment="5"
:input-debounce="200"
:min='today'
@@ -35,8 +36,7 @@ v-row
template(v-slot="{ inputValue, inputEvents }")
v-text-field(
:value='inputValue'
:label="$t('event.from')"
:hint="$t(`event.description`)"
:label="$t('event.due')"
ref='date'
prepend-icon='mdi-calendar'
persistent-hint
@@ -60,20 +60,19 @@ v-row
//- v-btn-toggle.col-md-4(@change='changeType' color='primary' :value='value.type')
//- v-btn(value='normal') {{$t('event.normal')}}
//- v-btn(value='multidate') {{$t('event.multidate')}}
v-switch.col-md-2(v-model='is_recurrent' :label="$t('event.recurrent')" inset)
v-menu(v-if='settings.allow_recurrent_event && is_recurrent' offset-y open-on-hover)
template(v-slot:activator="{ on, attrs }")
v-btn.col-md-2.mt-2(color='primary' value='recurrent' v-on='on') {{$t('event.recurrent')}}
v-list
v-list-item-group(color='primary' v-model='frequency')
v-list-item(v-for='f in frequencies' :key='f.value'
@click='selectFrequency(f.value)') {{f.text}}
v-switch.col-md-2(:input-value='isRecurrent' :label="$t('event.recurrent')" inset @change='updateRecurrent')
//- v-menu(v-if='settings.allow_recurrent_event && isRecurrent' offset-y open-on-hover)
//- template(v-slot:activator="{ on, attrs }")
//- v-btn.col-md-2.mt-2(color='primary' value='recurrent' v-on='on') {{$t('event.recurrent')}}
//- v-btn-group(v-if='settings.allow_recurrent_event && isRecurrent')
v-btn-toggle.col-md-12(dense group text link v-if='isRecurrent' color='primary' v-model='value.recurrent.frequency')
v-btn(text link v-for='f in frequencies' :key='f.value' :value='f.value'
@click='selectFrequency(f.value)') {{f.text}}
//- div.text-center.mb-2(v-if='value.type === "recurrent"')
//- span(v-if='value.recurrent.frequency !== "1m" && value.recurrent.frequency !== "2m"') {{whenPatterns}}
//- v-btn-toggle.mt-1(v-else v-model='value.recurrent.type' color='primary')
//- v-btn(v-for='whenPattern in whenPatterns' :value='whenPattern.key' :key='whenPatterns.key' small)
//- span {{whenPattern.label}}
div.col-md-12(v-if='isRecurrent')
p(v-if='value.recurrent.frequency !== "1m" && value.recurrent.frequency !== "2m"') 🡲 {{whenPatterns}}
v-btn-toggle(v-else dense group v-model='value.recurrent.type' color='primary')
v-btn(text link v-for='whenPattern in whenPatterns' :value='whenPattern.key' :key='whenPatterns.key') {{whenPattern.label}}
//- List(v-if='type==="normal" && todayEvents.length' :events='todayEvents' :title='$t("event.same_day")')
@@ -91,7 +90,6 @@ export default {
},
data () {
return {
is_recurrent: false,
today: dayjs().format('YYYY-MM-DD'),
frequency: '',
frequencies: [
@@ -103,17 +101,19 @@ export default {
},
computed: {
...mapState(['settings', 'events']),
isRecurrent () {
return !!this.value.recurrent
},
whenPatterns () {
if (!this.value.date) { return }
const date = dayjs(this.value.date)
if (!this.value.from) { return }
const date = dayjs(this.value.from)
const freq = this.value.recurrent.frequency
const weekDay = date.format('dddd')
if (freq === '1w' || freq === '2w') {
return this.$t(`event.recurrent_${freq}_days`, { days: weekDay })
return this.$t(`event.recurrent_${freq}_days`, { days: weekDay }).toUpperCase()
} else if (freq === '1m' || freq === '2m') {
const monthDay = date.format('D')
const n = Math.floor((monthDay - 1) / 7) + 1
const patterns = [
@@ -150,19 +150,16 @@ export default {
}
},
methods: {
updateRecurrent (value) {
this.$emit('input', { ...this.value, recurrent: value ? {} : null })
},
change (what, date) {
const v = this.value
v[what] = date
this.$emit('input', v)
},
changeType (type) {
this.$emit('input', { date: null, recurrent: {} })
if (type !== 'recurrent') {
this.frequency = ''
}
},
selectFrequency (f) {
this.$emit('input', { recurrent: { frequency: f }, date: null })
this.$emit('input', { recurrent: { frequency: f }, from: this.value.from, due: this.value.due })
}
// pick (date) {
// if (this.value.type === 'normal' || this.value.type === 'recurrent' || (this.value.date && this.value.date.length === 2)) {

View File

@@ -2,7 +2,8 @@
v-card(color='secondary')
v-card-title {{$t('common.import')}}
v-card-text
v-form(v-model='valid' ref='form' lazy-validation)
p(v-html="$t('event.import_description')")
v-form(v-model='valid' ref='form' lazy-validation @submit.prevent='importGeneric')
v-text-field(v-model='URL'
:label="$t('common.url')"
:hint="$t('event.import_URL')"
@@ -18,7 +19,7 @@
persistent-hint
)
p {{event}}
p {{events}}
v-card-actions
v-spacer
v-btn(@click='$emit("close")' color='warning') {{$t('common.cancel')}}
@@ -39,7 +40,7 @@ export default {
loading: false,
valid: false,
URL: '',
event: {}
events: {}
}
},
methods: {
@@ -54,8 +55,7 @@ export default {
const reader = new FileReader()
reader.readAsText(this.file)
reader.onload = () => {
const data = reader.result
const event = ical.parse(data)
const event = ical.parse(reader.result)
this.event = {
title: event.name
}
@@ -73,9 +73,9 @@ export default {
try {
const ret = await this.$axios.$get('/event/import', { params: { URL: this.URL } })
this.event = ret
this.events = ret
// check if contain an h-event
this.$emit('imported', ret)
// this.$emit('imported', ret)
} catch (e) {
console.error(e)
this.error = true

View File

@@ -23,7 +23,6 @@
@change='v => event.title = v'
:value = 'event.title'
:rules="[$validators.required('common.title')]"
:hint="$t('event.what_description')"
prepend-icon='mdi-format-title'
:label="$t('common.title')"
autofocus

View File

@@ -2,7 +2,7 @@
v-container
//- EVENT PAGE
//- gancio supports microformats (http://microformats.org/wiki/h-event)
v-card.h-event(v-on:keyup="$router.push(`/event/${event.next}`)")
v-card.h-event
v-card-text
//- admin controls
@@ -32,7 +32,8 @@ v-container
time.dt-start.text-h5(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')
v-icon mdi-calendar
b.ml-2 {{event|when}}
p.subtitle-1 {{event.start_datetime|from}}
div.subtitle-1 {{event.start_datetime|from}}
small(v-if='event.parentId') ({{event|recurrentDetail}})
.text-h5.p-location
v-icon mdi-map-marker

View File

@@ -2,11 +2,16 @@
v-card(color='secondary')
v-card-title(v-text="$t('common.embed_title')")
v-card-text
v-row(:gutter='10')
v-col(:span='12' :xs='24')
v-row
v-col.col-12
v-alert.mb-1.mt-1(type='info' show-icon) {{$t('common.embed_help')}}
v-text-field(v-model='code')
v-col.mt-2(:span='12' :xs='24' v-html='code')
v-btn(slot='prepend' plain text color='primary'
v-clipboard:copy='code'
v-clipboard:success='copyLink') {{$t("common.copy")}}
v-icon.ml-1 mdi-content-copy
v-col.mt-2(v-html='code')
v-card-actions
v-spacer
v-btn(color='warning' @click="$emit('close')") {{$t("common.cancel")}}

View File

@@ -6,10 +6,7 @@ div
v-btn(text color='primary' v-if='!event.parentId' @click='remove(false)') {{$t('common.remove')}}
template(v-if='event.parentId')
v-divider {{$t('event.recurrent')}}
p.text-secondary
i.el-icon-refresh
small {{event|recurrentDetail}}
//- v-divider {{$t('event.recurrent')}}
v-btn(text color='primary' v-if='event.parent.is_visible' @click='toggle(true)') {{$t('common.pause')}}
v-btn(text color='primary' v-else @click='toggle(true)') {{$t('common.start')}}
v-btn(text color='primary' @click='$router.push(`/add/${event.parentId}`)') {{$t('common.edit')}}

View File

@@ -29,10 +29,6 @@
v-clipboard:success='copyLink') {{$t("common.copy")}}
v-icon.ml-1 mdi-content-copy
v-tab(v-if='settings.enable_federation') {{$t('common.fediverse')}}
v-tab-item
FollowMe
v-tab ics/ical
v-tab-item
v-card
@@ -62,6 +58,9 @@
color='primary' v-clipboard:copy='listScript' v-clipboard:success='copyLink') {{$t('common.copy')}}
v-icon.ml-1 mdi-content-copy
v-tab(v-if='settings.enable_federation') {{$t('common.fediverse')}}
v-tab-item(v-if='settings.enable_federation')
FollowMe
//- TOFIX
//- v-tab.pt-1(label='calendar' name='calendar')
//- v-tab-item
@@ -125,6 +124,7 @@ export default {
return `<iframe style='border: 0px; width: 100%;' src="${this.settings.baseurl}/embed/list?${params.join('&')}"></iframe>`
},
link () {
const typeMap = ['rss', 'ics', 'list']
const tags = this.filters.tags.join(',')
const places = this.filters.places.join(',')
let query = ''
@@ -138,7 +138,7 @@ export default {
}
}
return `${this.settings.baseurl}/feed/${this.type}${query}`
return `${this.settings.baseurl}/feed/${typeMap[this.type]}${query}`
},
showLink () {
return (['rss', 'ics'].includes(this.type))

View File

@@ -6,7 +6,7 @@
//- Calendar and search bar
v-row#calbarmb-2
.col-xl-5.col-lg-5.col-md-6.col-sm-12.col-xs-12
.col-xl-5.col-lg-5.col-md-7.col-sm-12.col-xs-12
//- this is needed as v-calendar does not support SSR
//- https://github.com/nathanreyes/v-calendar/issues/336
client-only
@@ -14,12 +14,11 @@
.col
Search(:filters='filters' @update='updateFilters')
v-chip(v-if='selectedDay' close @click:close='dayChange(selectedDay)') {{selectedDay}}
v-chip(v-if='selectedDay' close @click:close='dayChange({ date: selectedDay})') {{selectedDay}}
//- Events
#events
Event(v-for='event in events'
:key='event.id' :event='event'
Event(v-for='(event, idx) in events' :key='event.id' :event='event' :show='idx>=firstVisibleItem && idx<=lastVisibleItem'
@tagclick='tagClick' @placeclick='placeClick')
</template>
@@ -35,33 +34,68 @@ import Calendar from '@/components/Calendar'
export default {
name: 'Index',
components: { Event, Search, Announcement, Calendar },
async asyncData ({ params, $api }) {
async asyncData ({ params, $api, store }) {
const events = await $api.getEvents({
start: dayjs().unix()
start: dayjs().unix(),
end: null,
filters: { show_recurrent: store.state.settings.allow_recurrent_event && store.state.settings.recurrent_event_visible }
})
return { events }
},
data () {
data ({ $store }) {
return {
date: dayjs().format('YYYY-MM-DD'),
events: [],
start: dayjs().unix(),
end: null,
filters: { tags: [], places: [] },
selectedDay: null
filters: { tags: [], places: [], show_recurrent: $store.state.settings.allow_recurrent_event && $store.state.settings.recurrent_event_visible },
selectedDay: null,
firstVisibleItem: 0,
lastVisibleItem: 20
}
},
computed: {
...mapState(['settings', 'announcements']),
...mapState(['settings', 'announcements'])
},
mounted () {
let last_known_scroll_position = 0
let ticking = false
document.addEventListener('scroll', e => {
last_known_scroll_position = window.scrollY
if (!ticking) {
window.requestAnimationFrame(() => {
this.scroll(last_known_scroll_position)
ticking = false
})
ticking = true
}
})
},
methods: {
...mapActions(['setFilters']),
scroll (y) {
const rowHeight = 370
const nItems = this.events.length
const fullHeight = document.getElementById('events').offsetHeight
const nRows = fullHeight / rowHeight
const itemPerRow = nItems / nRows
const visibleRows = 10
this.firstVisibleItem = Math.trunc(((y - 370) / rowHeight) * itemPerRow) - (5 * itemPerRow)
this.lastVisibleItem = this.firstVisibleItem + (visibleRows * itemPerRow)
console.error('Scrolled to ', y, ' nItems', nItems, 'fullHeight', fullHeight, ' itemPerRow', itemPerRow, ' nRow', nRows)
console.error('mostro dal ', this.firstVisibleItem, this.lastVisibleItem)
},
async updateEvents () {
this.events = await this.$api.getEvents({
start: this.start,
end: this.end,
places: this.filters.places,
tags: this.filters.tags
tags: this.filters.tags,
show_recurrent: this.filters.show_recurrent
})
this.setFilters(this.filters)
},
@@ -101,18 +135,17 @@ export default {
this.updateEvents()
},
dayChange (day) {
if (this.selectedDay === day) {
const date = dayjs(day.date).format('YYYY-MM-DD')
if (this.selectedDay === date) {
this.selectedDay = null
this.date = dayjs().format('YYYY-MM-DD')
this.start = dayjs().unix() // .startOf('week').unix()
this.end = null
this.updateEvents()
return
}
this.start = dayjs(day).unix()
this.start = dayjs(date).startOf('day').unix()
this.end = dayjs(day).endOf('day').unix()
this.date = dayjs(day).format('YYYY-MM-DD')
this.selectedDay = day
this.selectedDay = date
this.updateEvents()
}
},