Verified Commit 8b6c2684 authored by les's avatar les
Browse files

media preview + improve import dialog

parent 486d4300
......@@ -4,22 +4,22 @@
v-card-text
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')"
persistent-hint
:loading='loading' :error='error'
:error-messages='errorMessage')
v-row
v-col
v-text-field(v-model='URL'
:label="$t('common.url')"
:hint="$t('event.import_URL')"
persistent-hint
:loading='loading' :error='error'
:error-messages='errorMessage')
v-col
v-file-input(
v-model='file'
accept=".ics"
:label="$t('event.ics')"
:hint="$t('event.import_ICS')"
persistent-hint)
v-file-input(
v-model='file'
accept=".ics"
:label="$t('event.ics')"
:hint="$t('event.import_ICS')"
persistent-hint
)
p {{events}}
v-card-actions
v-spacer
v-btn(@click='$emit("close")' color='warning') {{$t('common.cancel')}}
......@@ -29,6 +29,8 @@
</template>
<script>
import ical from 'ical.js'
import get from 'lodash/get'
import { mapState } from 'vuex'
export default {
name: 'ImportDialog',
......@@ -40,9 +42,10 @@ export default {
loading: false,
valid: false,
URL: '',
events: {}
event: {}
}
},
computed: mapState(['places']),
methods: {
importGeneric () {
if (this.file) {
......@@ -55,15 +58,24 @@ export default {
const reader = new FileReader()
reader.readAsText(this.file)
reader.onload = () => {
const event = ical.parse(reader.result)
const ret = ical.parse(reader.result)
const component = new ical.Component(ret)
const events = component.getAllSubcomponents('vevent')
const event = new ical.Event(events[0])
this.event = {
title: event.name
title: get(event, 'summary', ''),
description: get(event, 'description', ''),
place: { name: get(event, 'location', '') },
start_datetime: get(event, 'startDate', '').toUnixTime(),
end_datetime: get(event, 'endDate', '').toUnixTime()
}
this.$emit('imported', this.event)
}
},
async importURL () {
if (!this.URL) {
this.errorMessage = this.$validators.required('common.URL')('')
this.errorMessage = this.$validators.required('common.url')('')
this.error = true
return
}
......
......@@ -21,8 +21,8 @@
v-text-field.col-md-6(ref='address'
prepend-icon='mdi-map'
v-show='!disableAddress'
:rules="[$validators.required('common.address')]"
:disabled='disableAddress'
:rules="[ v => disableAddress ? true : $validators.required('common.address')(v)]"
:label="$t('common.address')"
@change="changeAddress"
:value="value.address")
......
......@@ -56,6 +56,7 @@
:delimiters="[',', ' ']"
:items="tags.map(t => t.tag)"
:label="$t('common.tags')")
v-img.col-12.col-sm-2.ml-3(v-if='mediaPreview' :src='mediaPreview')
v-card-actions
v-spacer
......@@ -70,12 +71,11 @@ import Editor from '@/components/Editor'
import List from '@/components/List'
import ImportDialog from './ImportDialog'
import DateInput from './DateInput'
import HourInput from './HourInput'
import WhereInput from './WhereInput'
export default {
name: 'NewEvent',
components: { List, Editor, ImportDialog, WhereInput, HourInput, DateInput },
components: { List, Editor, ImportDialog, WhereInput, DateInput },
validate ({ store }) {
return (store.state.auth.loggedIn || store.state.settings.allow_anon_event)
},
......@@ -107,6 +107,7 @@ export default {
data.event.description = event.description
data.event.id = event.id
data.event.tags = event.tags
data.event.image_path = event.image_path
return data
}
return {}
......@@ -117,6 +118,7 @@ export default {
return {
valid: false,
openImportDialog: false,
openMediaDialog: false,
event: {
place: { name: '', address: '' },
title: '',
......@@ -140,12 +142,27 @@ export default {
}
},
computed: {
...mapState(['tags', 'places', 'settings'])
...mapState(['tags', 'places', 'settings']),
mediaPreview () {
if (!this.event.image && !this.event.image_path) {
return false
}
const url = this.event.image ? URL.createObjectURL(this.event.image) : `/media/thumb/${this.event.image_path}`
return url
}
},
methods: {
...mapActions(['updateMeta']),
eventImported (event) {
this.event = Object.assign(this.event, event)
this.date = {
recurrent: this.event.recurrent,
from: new Date(dayjs.unix(this.event.start_datetime)),
due: new Date(dayjs.unix(this.event.end_datetime)),
multidate: event.multidate,
fromHour: true,
dueHour: true
}
},
cleanFile () {
this.event.image = {}
......
<template lang="pug">
v-container
v-container#event
//- EVENT PAGE
//- gancio supports microformats (http://microformats.org/wiki/h-event)
v-card.h-event
......@@ -15,7 +15,7 @@ v-container
:src='imgPath'
:lazy-src='thumbImgPath'
v-if='event.image_path')
.p-description.text-body-1(v-else v-html='event.description')
.p-description.text-body-1.pa-3.grey.darken-4.rounded(v-else v-html='event.description')
//- template(v-slot:placeholder)
//- v-row(
......@@ -66,7 +66,7 @@ v-container
:href='`/api/event/${event.slug || event.id}.ics`')
v-icon mdi-calendar-export
.p-description.text-body-1(v-if='event.image_path' v-html='event.description')
.p-description.text-body-1.pa-3.grey.darken-4.rounded(v-if='event.image_path && event.description' v-html='event.description')
//- resources from fediverse
#resources.mt-1(v-if='settings.enable_federation')
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment