start with import event feature

pages/add/ImportDialog.vue

@@ -0,0 +1,57 @@
+<template lang="pug">
+  v-card(color='secondary')
+    v-card-title {{$t('event.importURL')}}
+    v-card-text
+      v-form(v-model='valid' ref='form' lazy-validation)
+        v-text-field(v-model='URL' :loading='loading' :error='error' :error-messages='errorMessage')
+
+      p {{event}}
+    v-card-actions
+      v-spacer
+      v-btn(@click='$emit("close")' color='warning') {{$t('common.cancel')}}
+      v-btn(@click='importURL' :loading='loading' :disabled='loading'
+        color='primary') {{$t('common.import')}}
+
+
+</template>
+<script>
+export default {
+  name: 'ImportDialog',
+  data () {
+    return {
+      errorMessage: '',
+      error: false,
+      loading: false,
+      valid: false,
+      URL: '',
+      event: {}
+    }
+  },
+  methods: {
+    async importURL() {
+      if (!this.URL) {
+        this.errorMessage = this.$validators.required('common.URL')('')
+        this.error = true
+        return
+      }
+      this.error = false
+      this.errorMessage = ''
+      this.loading = true
+
+      try {
+        const ret = await this.$axios.$get('/event/import', { params: { URL: this.URL }})
+        this.event = ret
+        // check if contain an h-event
+        this.$emit('imported', ret)
+        console.error(ret)
+      } catch (e) {
+        console.error(e)
+        this.error = true
+        this.errorMessage = String(e)
+      }
+
+      this.loading = false
+    }
+  }
+}
+</script>

pages/add/_edit.vue

@@ -1,9 +1,15 @@
 <template lang="pug">
   v-container.container
     v-card
-      v-card-title {{edit?$t('common.edit_event'):$t('common.add_event')}}
+      v-card-title
+        h4 {{edit?$t('common.edit_event'):$t('common.add_event')}}
+        v-spacer
+        v-btn(link text color='primary' @click='openImportDialog=true') <v-icon>mdi-file-import</v-icon> {{$t('event.import_URL')}}
+      v-dialog(v-model='openImportDialog')
+        ImportDialog(@close='openImportDialog=false' @imported='eventImported')
+
       v-card-text
-        v-form(v-model='valid')
+        v-form(v-model='valid' ref='form' lazy-validation)
 
           //- Not logged event
           div(v-if='!$auth.loggedIn')
@@ -151,7 +157,7 @@
 
       v-card-actions
         v-spacer
-        v-btn(@click='done' :loading='loading' :disabled='!valid || loading || !date'
+        v-btn(@click='done' :loading='loading' :disabled='!valid || loading'
           color='primary') {{edit?$t('common.edit'):$t('common.send')}}
 
 </template>
@@ -161,10 +167,11 @@ import _ from 'lodash'
 import moment from 'dayjs'
 import Editor from '@/components/Editor'
 import List from '@/components/List'
+import ImportDialog from './ImportDialog'
 
 export default {
   name: 'NewEvent',
-  components: { List, Editor },
+  components: { List, Editor, ImportDialog },
   validate ({ store }) {
     return (store.state.auth.loggedIn || store.state.settings.allow_anon_event)
   },
@@ -211,6 +218,7 @@ export default {
       valid: false,
       dueDateMenu: false,
       fromDateMenu: false,
+      openImportDialog: false,
       event: {
         type: 'normal',
         place: { name: '', address: '' },
@@ -363,6 +371,10 @@ export default {
   },
   methods: {
     ...mapActions(['addEvent', 'updateEvent', 'updateMeta', 'updateEvents']),
+    eventImported (event) {
+      console.error('sono dentro event imported', event)
+      this.event = event
+    },
     selectPlace (p) {
       console.error('sono dentro selectePlace')
       const place = p && this.places.find(place => place.id === p.id)
@@ -386,6 +398,7 @@ export default {
       this.event.image = {}
     },
     async done () {
+      if (!this.$refs.form.validate()) return
       this.loading = true
       let start_datetime, end_datetime
       const [start_hour, start_minute] = this.time.start.split(':')

pages/event/_id.vue

@@ -8,7 +8,7 @@
       //- v-list-item(two-line)
       //-   v-list-item-content
       .text-h5.text-sm-h4
-        b {{event.title}}
+        b.p-name {{event.title}}
       v-row
         v-col.col-12.col-lg-9
           //- TOFIX: avoid reflow
@@ -34,10 +34,10 @@
                 b.ml-2 {{event|when}}
               p.subtitle-1 {{event.start_datetime|from}}
               
-              .text-h5
+              .text-h5.p-location
                 v-icon mdi-map-marker
-                b.p-location.ml-2 {{event.place.name}}
+                b.vcard.ml-2 {{event.place.name}}
-              p.subtitle-1 {{event.place.address}}
+              p.adr {{event.place.address}}
 
               //- info & actions
             v-list
@@ -56,7 +56,7 @@
         v-dialog(v-model='showEmbed')
           EmbedEvent(:event='event' @close='showEmbed=false')
 
-        div.p-description(v-html='event.description')
+        p.p-description.text-h6(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

server/api/index.js

@@ -12,7 +12,7 @@ const apUserController = require('./controller/ap_user')
 const resourceController = require('./controller/resource')
 const oauthController = require('./controller/oauth')
 const announceController = require('./controller/announce')
-
+const helpers = require('../helpers')
 const storage = require('./storage')
 const upload = multer({ storage })
 
@@ -87,6 +87,8 @@ api.put('/place', isAdmin, eventController.updatePlace)
  */
 api.post('/event', hasPerm('event:write'), upload.single('image'), eventController.add)
 api.put('/event', hasPerm('event:write'), upload.single('image'), eventController.update)
+api.get('/event/import', helpers.importURL)
+
 
 // remove event
 api.delete('/event/:id', hasPerm('event:remove'), eventController.remove)
@@ -103,13 +105,14 @@ api.delete('/event/notification/:code', eventController.delNotification)
 
 api.get('/settings', settingsController.getAllRequest)
 api.post('/settings', isAdmin, settingsController.setRequest)
-api.get('/event/:event_id.:format?', cors, eventController.get)
 api.post('/settings/logo', isAdmin, multer({ dest: config.upload_path }).single('logo'), settingsController.setLogo)
 
 // confirm event
 api.get('/event/confirm/:event_id', hasPerm('event:write'), eventController.confirm)
 api.get('/event/unconfirm/:event_id', hasPerm('event:write'), eventController.unconfirm)
 
+// import event
+
 // get event
 api.get('/event/:event_id.:format?', cors, eventController.get)
 

server/helpers.js

@@ -9,6 +9,8 @@ const path = require('path')
 const sharp = require('sharp')
 const axios = require('axios')
 const crypto = require('crypto')
+const Microformats = require('microformat-node')
+const get = require('lodash/get')
 
 const DOMPurify = require('dompurify')
 const { JSDOM } = require('jsdom')
@@ -104,6 +106,35 @@ module.exports = {
 
       outStream.on('finish', () => resolve(filename))
     })
+  },
+
+  async importURL (req, res) {
+    const URL = req.query.URL
+    try {
+      const response = await axios.get(URL)
+      Microformats.get({ html: response.data, filter: ['h-event'] }, (err, data) => {
+        if (!data.items.length || !data.items[0].properties) return res.sendStatus(404)
+        const event = data.items[0].properties
+        console.error(event)
+        return res.json({
+          title: get(event, 'name[0]', ''),
+          description: get(event, 'content[0]', ''),
+          place: get(event, 'location[0].properties.name', ''),
+          address: get(event, 'location[0].properties.street-address'),
+          start: get(event, 'start[0]', ''),
+          end: get(event, 'end[0]', ''),
+          tags: get(event, 'category', []),
+          image: get(event, 'featured[0]')
+        })
+      })
+      // const event = dom.window.document.querySelected(".h-event")
+      // console.error(event)
+      // console.error(response)
+    } catch(e){
+      console.error(e)
+    }
+
+    // res.json('ok')
   }
 
 }