keep migrating to vuetify
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template lang="pug">
|
||||
v-container
|
||||
v-card
|
||||
v-tabs
|
||||
v-tabs(v-model='selectedTab')
|
||||
|
||||
//- SETTINGS
|
||||
v-tab {{$t('common.settings')}}
|
||||
|
||||
@@ -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)) {
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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")}}
|
||||
|
||||
@@ -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')}}
|
||||
|
||||
@@ -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))
|
||||
|
||||
@@ -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()
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user