From 82f92c7c57cc016817a1a558ab41f1f5704bb783 Mon Sep 17 00:00:00 2001
From: les <lesion@autistici.org>
Date: Sat, 26 Oct 2019 00:27:12 +0200
Subject: [PATCH] [feat] embeddable event widget/iframe

---
 layouts/error.vue              |   4 +-
 pages/embed/_event_id.vue      | 119 +++++++++++++++++++++++++++++++++
 server/api/controller/event.js |   5 +-
 3 files changed, 124 insertions(+), 4 deletions(-)
 create mode 100644 pages/embed/_event_id.vue

diff --git a/layouts/error.vue b/layouts/error.vue
index 6c08605e..1445050e 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -1,6 +1,6 @@
 <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>
diff --git a/pages/embed/_event_id.vue b/pages/embed/_event_id.vue
new file mode 100644
index 00000000..1f598b09
--- /dev/null
+++ b/pages/embed/_event_id.vue
@@ -0,0 +1,119 @@
+<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
diff --git a/server/api/controller/event.js b/server/api/controller/event.js
index 3f58f8ac..2a7f1dea 100644
--- a/server/api/controller/event.js
+++ b/server/api/controller/event.js
@@ -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') {