472 lines
14 KiB
Vue
472 lines
14 KiB
Vue
<template lang="pug">
|
|
v-card.h-event.eventDetail
|
|
v-container
|
|
v-list-item(two-line)
|
|
v-list-item-content
|
|
v-list-item-title
|
|
time.dt-start(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")')
|
|
v-icon mdi-date
|
|
b {{event|when}}
|
|
small ({{event.start_datetime|from}})
|
|
v-list-item-title
|
|
b.p-location {{event.place.name}}
|
|
span - {{event.place.address}}
|
|
h2 {{event.title}}
|
|
|
|
.v-btn--absolute.v-btn--right.v-btn--top
|
|
v-btn.mr-1(nuxt icon outlined color='primary'
|
|
:to='`/event/${event.prev}`' :disabled='!event.prev')
|
|
v-icon mdi-arrow-left
|
|
v-btn(nuxt bottom right outlined icon color='primary'
|
|
:to='`/event/${event.next}`' :disabled='!event.next')
|
|
v-icon mdi-arrow-right
|
|
|
|
v-container
|
|
v-dialog(v-model='showEmbed')
|
|
EmbedEvent(:event='event')
|
|
|
|
//- TOFIX: avoid reflow
|
|
//- event image
|
|
v-img.main_image.mb-3(
|
|
contain
|
|
:src='imgPath'
|
|
:lazy-src='thumbImgPath'
|
|
v-if='event.image_path')
|
|
//- template(v-slot:placeholder)
|
|
//- v-row(
|
|
//- class="fill-height ma-0"
|
|
//- align="center"
|
|
//- justify="center")
|
|
//- v-progress-circular(indeterminate
|
|
//- color="grey lighten-5")
|
|
|
|
div.p-description(v-html='event.description')
|
|
v-chip.p-category.ml-1(small v-for='tag in event.tags' color='primary' outlined :key='tag') {{tag}}
|
|
|
|
//- info & actions
|
|
v-btn(text color='primary'
|
|
v-clipboard:success='copyLink'
|
|
v-clipboard:copy='`${settings.baseurl}/event/${event.id}`') {{$t('common.copy_link')}}
|
|
|
|
v-btn(@click='showEmbed=true' text color='primary') {{$t('common.embed')}}
|
|
|
|
v-btn(:href='`${settings.baseurl}/api/event/${event.id}.ics`' text color='primary') {{$t('common.add_to_calendar')}}
|
|
EventAdmin(v-if='is_mine' :event='event')
|
|
|
|
//- hr
|
|
|
|
//- resources from fediverse
|
|
#resources.mt-1(v-if='settings.enable_federation')
|
|
div.float-right(v-if='!settings.hide_boosts')
|
|
small.mr-3 🔖 {{event.likes.length}}
|
|
small ✊ {{event.boost.length}}<br/>
|
|
|
|
p.p-2
|
|
v-btn(type='text' @click='showFollowMe=true') {{$t('event.interact_with_me')}}
|
|
span(v-if='settings.enable_resources && event.resources.length') - {{$tc('common.n_resources', event.resources.length)}}
|
|
|
|
v-dialog(v-model='showFollowMe' destroy-on-close)
|
|
h4(slot='title') {{$t('common.follow_me_title')}}
|
|
FollowMe
|
|
|
|
v-dialog.showResource#resourceDialog(v-model='showResources' fullscreen
|
|
width='95vw'
|
|
destroy-on-close
|
|
@keydown.native.right='$refs.carousel.next()'
|
|
@keydown.native.left='$refs.carousel.prev()')
|
|
v-carousel(:interval='10000' ref='carousel' arrow='always')
|
|
v-carousel-item(v-for='attachment in selectedResource.data.attachment' :key='attachment.url')
|
|
v-img(:src='attachment.url')
|
|
v-card.mb-1(v-if='settings.enable_resources' v-for='resource in event.resources' :key='resource.id' :class='{disabled: resource.hidden}')
|
|
span
|
|
v-dropdown.mr-2(v-if='$auth.user && $auth.user.is_admin')
|
|
v-btn(circle icon='el-icon-more' size='mini')
|
|
v-menu(slot='dropdown')
|
|
el-dropdown-item(v-if='!resource.hidden' icon='el-icon-remove' @click.native='hideResource(resource, true)') {{$t('admin.hide_resource')}}
|
|
el-dropdown-item(v-else icon='el-icon-success' @click.native='hideResource(resource, false)') {{$t('admin.show_resource')}}
|
|
el-dropdown-item(icon='el-icon-delete' @click.native='deleteResource(resource)') {{$t('admin.delete_resource')}}
|
|
el-dropdown-item(icon='el-icon-lock' @click.native='blockUser(resource)') {{$t('admin.block_user')}}
|
|
a(:href='resource.data.url || resource.data.context')
|
|
small {{resource.data.published|dateFormat('ddd, D MMMM HH:mm')}}
|
|
|
|
div.mt-1(v-html='resource_filter(resource.data.content)')
|
|
span.previewImage(@click='showResource(resource)')
|
|
img(v-for='img in resource.data.attachment' :src='img.url')
|
|
|
|
</template>
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
import EventAdmin from './eventAdmin'
|
|
import EmbedEvent from './embedEvent'
|
|
import FollowMe from '../../components/FollowMe'
|
|
import moment from 'moment-timezone'
|
|
const htmlToText = require('html-to-text')
|
|
|
|
export default {
|
|
name: 'Event',
|
|
transition: null,
|
|
components: { EventAdmin, EmbedEvent, FollowMe },
|
|
async asyncData ({ $axios, params, error, store }) {
|
|
try {
|
|
const event = await $axios.$get(`/event/${params.id}`)
|
|
return { event, id: Number(params.id) }
|
|
} catch (e) {
|
|
error({ statusCode: 404, message: 'Event not found' })
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
showEmbed: false,
|
|
showFollowMe: false,
|
|
showResources: false,
|
|
selectedResource: { data: { attachment: [] } }
|
|
}
|
|
},
|
|
head () {
|
|
if (!this.event) {
|
|
return {}
|
|
}
|
|
const tags_feed = this.event.tags.map(tag => ({
|
|
rel: 'alternate',
|
|
type: 'application/rss+xml',
|
|
title: `${this.settings.title} events tagged ${tag}`,
|
|
href: this.settings.baseurl + `/feed/rss?tags=${tag}`
|
|
}))
|
|
const place_feed = {
|
|
rel: 'alternate',
|
|
type: 'application/rss+xml',
|
|
title: `${this.settings.title} events @${this.event.place.name}`,
|
|
href: this.settings.baseurl + `/feed/rss?places=${this.event.place.id}`
|
|
}
|
|
|
|
return {
|
|
title: `${this.settings.title} - ${this.event.title}`,
|
|
meta: [
|
|
// hid is used as unique identifier. Do not use `vmid` for it as it will not work
|
|
{
|
|
hid: 'description',
|
|
name: 'description',
|
|
content: this.plainDescription
|
|
},
|
|
{
|
|
hid: 'og-description',
|
|
name: 'og:description',
|
|
content: this.plainDescription
|
|
},
|
|
{ hid: 'og-title', property: 'og:title', content: this.event.title },
|
|
{
|
|
hid: 'og-url',
|
|
property: 'og:url',
|
|
content: `${this.settings.baseurl}/event/${this.event.id}`
|
|
},
|
|
{ property: 'og:type', content: 'event' },
|
|
{
|
|
property: 'og:image',
|
|
content: this.thumbImgPath
|
|
},
|
|
{ property: 'og:site_name', content: this.settings.title },
|
|
{
|
|
property: 'og:updated_time',
|
|
content: moment.unix(this.event.start_datetime).format()
|
|
},
|
|
{
|
|
property: 'article:published_time',
|
|
content: moment.unix(this.event.start_datetime).format()
|
|
},
|
|
{ property: 'article:section', content: 'event' },
|
|
{ property: 'twitter:card', content: 'summary' },
|
|
{ property: 'twitter:title', content: this.event.title },
|
|
{
|
|
property: 'twitter:image',
|
|
content: this.thumbImgPath
|
|
},
|
|
{
|
|
property: 'twitter:description',
|
|
content: this.plainDescription
|
|
}
|
|
],
|
|
link: [
|
|
{ rel: 'image_src', href: this.thumbImgPath },
|
|
{
|
|
rel: 'alternate',
|
|
type: 'application/rss+xml',
|
|
title: this.settings.title,
|
|
href: this.settings.baseurl + '/feed/rss'
|
|
},
|
|
...tags_feed,
|
|
place_feed
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['settings']),
|
|
plainDescription () {
|
|
return htmlToText.fromString(this.event.description.replace('\n', '').slice(0, 1000))
|
|
},
|
|
imgPath () {
|
|
return '/media/' + this.event.image_path
|
|
},
|
|
thumbImgPath () {
|
|
if (this.event.image_path) {
|
|
return this.settings.baseurl + '/media/thumb/' + this.event.image_path
|
|
} else {
|
|
return this.settings.baseurl + '/logo.png'
|
|
}
|
|
},
|
|
is_mine () {
|
|
if (!this.$auth.user) {
|
|
return false
|
|
}
|
|
return (
|
|
this.event.userId === this.$auth.user.id || this.$auth.user.is_admin
|
|
)
|
|
}
|
|
},
|
|
methods: {
|
|
showResource (resource) {
|
|
this.showResources = true
|
|
this.selectedResource = resource
|
|
document.getElementById('resourceDialog').focus()
|
|
},
|
|
async remove () {
|
|
try {
|
|
await this.$root.$confirm(this.$t('event.remove_confirmation'), this.$t('common.confirm'), {
|
|
confirmButtonText: this.$t('common.ok'),
|
|
cancelButtonText: this.$t('common.cancel'),
|
|
type: 'error'
|
|
})
|
|
await this.$axios.delete(`/user/event/${this.event.id}`)
|
|
this.delEvent(Number(this.event.id))
|
|
this.$router.replace('/')
|
|
} catch (e) {
|
|
console.error(e)
|
|
}
|
|
},
|
|
async toggle () {
|
|
try {
|
|
if (this.event.is_visible) {
|
|
await this.$axios.$get(`/event/unconfirm/${this.event.id}`)
|
|
this.event.is_visible = false
|
|
} else {
|
|
await this.$axios.$get(`/event/confirm/${this.event.id}`)
|
|
this.event.is_visible = true
|
|
}
|
|
} catch (e) {
|
|
console.error(e)
|
|
}
|
|
},
|
|
async hideResource (resource, hidden) {
|
|
await this.$axios.$put(`/resources/${resource.id}`, { hidden })
|
|
resource.hidden = hidden
|
|
},
|
|
async blockUser (resource) {
|
|
try {
|
|
await this.$root.$confirm(this.$t('admin.user_block_confirm'), {
|
|
confirmButtonText: this.$t('common.ok'),
|
|
cancelButtonText: this.$t('common.cancel'),
|
|
type: 'error'
|
|
})
|
|
await this.$axios.post('/instances/toggle_user_block', { ap_id: resource.ap_user.ap_id })
|
|
this.$root.$message({ message: this.$t('admin.user_blocked', { user: resource.ap_user.ap_id }), type: 'success' })
|
|
} catch (e) { }
|
|
},
|
|
async deleteResource (resource) {
|
|
try {
|
|
await this.$root.$confirm(this.$t('admin.delete_resource_confirm'),
|
|
this.$t('common.confirm'), {
|
|
confirmButtonText: this.$t('common.ok'),
|
|
cancelButtonText: this.$t('common.cancel'),
|
|
type: 'error'
|
|
})
|
|
await this.$axios.delete(`/resources/${resource.id}`)
|
|
this.event.resources = this.event.resources.filter(r => r.id !== resource.id)
|
|
} catch (e) { }
|
|
},
|
|
copyLink () {
|
|
this.$root.$message({ message: this.$t('common.copied'), type: 'success' })
|
|
},
|
|
// TOFIX
|
|
resource_filter (value) {
|
|
return value.replace(
|
|
/<a.*href="([^">]+).*>(?:.(?!<\/a>))*.<\/a>/,
|
|
(orig, url) => {
|
|
// get extension
|
|
const ext = url.slice(-4)
|
|
if (['.mp3', '.ogg'].includes(ext)) {
|
|
return `<audio controls><source src='${url}'></audio>`
|
|
} else {
|
|
return orig
|
|
}
|
|
}
|
|
)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang='less'>
|
|
.eventDetail {
|
|
.main_image {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
max-height: 83vh;
|
|
}
|
|
|
|
}
|
|
// time {
|
|
// margin: 0rem 0rem 0rem 1rem;
|
|
// display: inline-block;
|
|
// }
|
|
|
|
// #arrow {
|
|
// position: absolute;
|
|
// top: 1em;
|
|
// right: 1em;
|
|
// }
|
|
|
|
// .el-header {
|
|
// height: auto !important;
|
|
// position: sticky;
|
|
// padding-top: .4em;
|
|
// top: 0px;
|
|
// border-bottom: 1px solid lightgray;
|
|
// z-index: 1;
|
|
// overflow: hidden;
|
|
// }
|
|
|
|
// .embedDialog {
|
|
// .el-dialog {
|
|
// min-height: 500px;
|
|
// max-width: 1000px;
|
|
// width: 100%;
|
|
// }
|
|
// }
|
|
|
|
// .followDialog {
|
|
// .el-dialog {
|
|
// min-height: 300px;
|
|
// max-width: 600px;
|
|
// width: 100%;
|
|
// .el-dialog__body {
|
|
// word-break: normal !important;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// .head {
|
|
// z-index: 1;
|
|
// position: sticky;
|
|
// top: 0px;
|
|
// padding-top: 10px;
|
|
// padding-bottom: 10px;
|
|
// background-color: white;
|
|
// border-bottom: 1px solid #e6e6e6;
|
|
// }
|
|
|
|
// .menu {
|
|
// border-right: none;
|
|
// background-color: transparent;
|
|
// }
|
|
|
|
// div.menu {
|
|
// border-left: 1px solid #e6e6e6;
|
|
// p {
|
|
// margin: 1rem 0rem 1rem 1rem;
|
|
// }
|
|
// }
|
|
|
|
// .title {
|
|
// display: table-cell;
|
|
// padding-right: 70px;
|
|
// height: 2.1em;
|
|
// font-size: 1.6rem;
|
|
// color: #404246;
|
|
// line-height: 1;
|
|
// vertical-align: middle;
|
|
// }
|
|
|
|
// pre {
|
|
// white-space: pre-line;
|
|
// word-break: break-word;
|
|
// font-size: 1em;
|
|
// font-family: inherit;
|
|
|
|
// p:empty {
|
|
// min-height: 1em;
|
|
// }
|
|
// // font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen,
|
|
// // Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial,
|
|
// // sans-serif !important;
|
|
// }
|
|
|
|
// .main_image {
|
|
// width: 100%;
|
|
// transition: height .100s;
|
|
// height: auto;
|
|
|
|
// img {
|
|
// // object-fit: contain;
|
|
// margin: 0 auto;
|
|
// max-height: 88vh;
|
|
// }
|
|
|
|
// .loading {
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// align-items: center;
|
|
// font-size: 30px;
|
|
// margin: 0 auto;
|
|
// height: 100px;
|
|
// }
|
|
// }
|
|
|
|
// #resources {
|
|
// img {
|
|
// max-width: 100%;
|
|
// }
|
|
// .card-header {
|
|
// border-left: 3px solid transparent;
|
|
// }
|
|
// .card-header:hover {
|
|
// border-left: 3px solid #888;
|
|
// }
|
|
// .invisible {
|
|
// visibility: visible !important;
|
|
// }
|
|
// .disabled {
|
|
// opacity: 0.5;
|
|
// }
|
|
// .previewImage {
|
|
// display: flex;
|
|
// flex-flow: wrap;
|
|
// justify-content: space-evenly;
|
|
// img {
|
|
// margin-left: 5px;
|
|
// margin-top: 5px;
|
|
// object-fit: cover;
|
|
// min-height: 100px;
|
|
// max-width: 45%;
|
|
// border-radius: 5px;
|
|
// border: 1px solid #ccc;
|
|
// }
|
|
// }
|
|
// }
|
|
// .nextprev {
|
|
// font-size: 10px;
|
|
// margin-bottom: 5px;
|
|
// }
|
|
// }
|
|
|
|
// @media only screen and (max-width: 768px) {
|
|
// #eventDetail {
|
|
// .menu {
|
|
// border: 0px !important;
|
|
// }
|
|
|
|
// .title {
|
|
// // font-size: 1.1em;
|
|
// line-height: 1.4em;
|
|
// color: black;
|
|
// }
|
|
// }
|
|
// }
|
|
</style>
|