Commit 82f92c7c authored by les's avatar les
Browse files

[feat] embeddable event widget/iframe

parent 8632eb4a
<template lang='pug'>
.container
#error
el-main
el-card#error
h1(v-if="error.statusCode === 404") {{error.message}}
h1(v-else) An error occurred: {{error.message}}
</template>
......
<template lang="pug">
nuxt-link.embed_event(:to='`/event/${link}`' target='_blank' :class='{ withImg: event.image_path }')
//- image
img.float-left(v-if='event.image_path' :src='`/media/thumb/${event.image_path}`')
.event-info
//- title
.date {{event|when('home')}}<br/>
h4 {{event.title}}
//- date / place
.date {{event.place.name}}<br/> {{event.place.address}}
//- ul.tags(v-if='event.tags')
//- li(v-for='tag in event.tags' :key='tag') {{tag}}
//- li(v-if='settings.enable_federation && event.comments && event.comments.length') <u>{{$tc('common.comments', event.comments.length)}}</u>
</template>
<script>
import { mapState } from 'vuex'
import Event from '../../components/Event'
import moment from 'dayjs'
import get from 'lodash/get'
export default {
layout: 'event_iframe',
components: { Event },
data: {
loading: true
},
async asyncData ({ $axios, params, error, store }) {
try {
const [ id, start_datetime ] = params.event_id.split('_')
const event = await $axios.$get(`/event/${id}`)
console.error(event.tags)
event.start_datetime = start_datetime ? Number(start_datetime) : event.start_datetime
event.end_datetime = event.end_datetime
return { event, id: Number(id) }
} catch (e) {
error({ statusCode: 404, message: 'Event not found' })
}
},
computed: {
...mapState(['settings']),
date () {
return new Date(this.event.start_datetime).getDate()
},
link () {
if (this.event.recurrent) {
return `${this.event.id}_${this.event.start_datetime}`
}
return this.event.id
}
}
}
/**
* <style>
.embedded_gancio {
border: none;
width: 450px;
height: 220px;
float: left;
}</style>
<iframe src='http://localhost:13120/embed/1' class='embedded_gancio'></iframe>
*/
</script>
<style lang='less'>
a {
transition: margin .1s;
}
a:hover {
transform: prospective(10) translateX(10);
margin-left: 15px;
}
.embed_event {
background-image: url('/favicon.ico');
background-repeat: no-repeat;
background-position-x: right;
background-position-y: bottom;
img {
width: 150px;
object-fit: cover;
object-position: top;
margin-right: 5px;
height: 100%;
}
.event-info {
height: 100%;
color: #eee !important;
display: flex;
flex-direction: column;
padding: 5px;
.date {
color: #999;
}
}
background-color: #1f1f1f;
display: inline-block;
border: 1px solid #b1a3a3;
margin: 0px auto;
padding: 0px;
width: 400px;
height: 210px;
overflow: hidden;
border-radius: 10px;
// transition: all .2s;
margin: 0px;
}
// .embed_event:hover {
// transform: scale(1.03);
// }
</style>
\ No newline at end of file
......@@ -94,8 +94,7 @@ const eventController = {
const format = req.params.format || 'json'
const is_admin = req.user && req.user.is_admin
const id = req.params.event_id
const event = await Event.findByPk(id, {
plain: true,
let event = await Event.findByPk(id, {
attributes: {
exclude: ['createdAt', 'updatedAt']
},
......@@ -109,6 +108,8 @@ const eventController = {
})
if (event && (event.is_visible || is_admin)) {
event = event.toJSON()
event.tags = event.tags.map(t => t.tag)
if (format === 'json') {
res.json(event)
} else if (format === 'ics') {
......
Markdown is supported
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