testing ics / h-event import

assets/style.less

@@ -1,3 +1,6 @@
+// .v-list {
+//     color: pink;
+// }
 // :focus {outline:none;}
 // ::-moz-focus-inner {border:0;}
 

components/Editor.vue

@@ -84,6 +84,7 @@ export default {
   name: 'Editor',
   components: { EditorContent, EditorMenuBar, EditorMenuBubble },
   props: {
+    label: { type: String, default: 'Editor' },
     value: { type: String, default: '' },
     border: { type: Boolean, default: false },
     noSave: { type: Boolean, default: false },
@@ -155,6 +156,15 @@ export default {
   font-style: italic;
 }
 .editor {
+  .label {
+    left: 0px;
+    position: absolute;
+    transition: translateY .3s, scale .3s;
+    &.focused {
+      color: orange;
+      transform: translateY(-10px) scale(0.75);
+    }
+  }
   // max-height: auto;
   // height: auto;
     overflow-y: auto;

locales/en.json

@@ -83,7 +83,8 @@
         "place": "Place",
         "tags": "Tags",
         "theme": "Theme",
-        "reset": "Reset"
+        "reset": "Reset",
+        "import": "Import"
     },
     "login": {
         "description": "By logging in you can publish new events.",
@@ -149,7 +150,9 @@
         "interact_with_me_at": "Interact with me on fediverse at",
         "follow_me_description": "One of the ways to stay up to date on events published here on {title},\nis following the account <u>{account}</u> from the fediverse, for example via mastodon, and possibly add resources to an event from there.<br/><br/>\nIf you have never heard of Mastodon and the fediverse we recommend reading <a href='https://www.savjee.be/videos/simply-explained/mastodon-and-fediverse-explained/'>this article</a>.<br/><br/>Enter your instance below (e.g. mastodon.social)",
         "interact_with_me": "Follow me",
-        "remove_recurrent_confirmation": "Are you sure you want to remove this recurring event?\nPast events will be maintained, but no further events will be created."
+        "remove_recurrent_confirmation": "Are you sure you want to remove this recurring event?\nPast events will be maintained, but no further events will be created.",
+        "import_URL": "Import from URL",
+        "import_ICS": "Import from ICS"
     },
     "admin": {
         "place_description": "If you have gotten the place or address wrong, you can change it.<br/>All current and past events associated with this place will change address.",

package.json

@@ -44,7 +44,9 @@
     "email-templates": "^7.1.1",
     "express": "^4.17.1",
     "express-oauth-server": "^2.0.0",
+    "fs": "^0.0.1-security",
     "http-signature": "^1.3.5",
+    "ical.js": "^1.4.0",
     "ics": "^2.25.0",
     "inquirer": "^7.3.3",
     "jsdom": "^16.4.0",
@@ -59,7 +61,7 @@
     "multer": "^1.4.2",
     "nuxt": "^2.14.6",
     "nuxt-express-module": "^0.0.11",
-    "pg": "^8.4.0",
+    "pg": "^8.4.1",
     "sequelize": "^6.3.5",
     "sequelize-cli": "^6.2.0",
     "sharp": "^0.26.1",
@@ -78,7 +80,7 @@
     "@nuxtjs/eslint-config": "^3.1.0",
     "@nuxtjs/vuetify": "^1.11.2",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.10.0",
+    "eslint": "^7.11.0",
     "eslint-config-prettier": "^6.12.0",
     "eslint-config-standard": ">=14.1.1",
     "eslint-loader": "^4.0.2",
@@ -89,15 +91,15 @@
     "eslint-plugin-promise": ">=4.0.1",
     "eslint-plugin-standard": ">=4.0.1",
     "eslint-plugin-vue": "^7.0.1",
-    "less-loader": "^7.0.1",
+    "less-loader": "^7.0.2",
     "nodemon": "^2.0.4",
     "prettier": "^2.1.2",
     "pug-plain-loader": "^1.0.0",
     "sass": "^1.27.0",
-    "sass-loader": "^10.0.2",
+    "sass-loader": "^10.0.3",
     "vue-cli-plugin-vuetify": "~2.0.7",
     "vuetify-loader": "^1.3.0",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^4.0.0"
   },
   "resolutions": {
     "prosemirror-model": "1.11.2"

pages/add/ImportDialog.vue

@@ -1,24 +1,40 @@
 <template lang="pug">
   v-card(color='secondary')
-    v-card-title {{$t('event.importURL')}}
+    v-card-title {{$t('common.import')}}
     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')
+        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-file-input(
+          v-model='file'
+          accept=".ics"
+          :label="$t('common.ics')"
+          :hint="$t('event.import_ICS')"
+          persistent-hint
+        )
 
       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'
+      v-btn(@click='importGeneric' :loading='loading' :disabled='loading'
         color='primary') {{$t('common.import')}}
 
 
 </template>
 <script>
+import ical from 'ical.js'
+
 export default {
   name: 'ImportDialog',
   data () {
     return {
+      file: null,
       errorMessage: '',
       error: false,
       loading: false,
@@ -28,6 +44,26 @@ export default {
     }
   },
   methods: {
+    importGeneric () {
+      if (this.file) {
+        this.importICS()
+      } else {
+        this.importURL()
+      }
+    },
+    async importICS() { 
+      const reader = new FileReader()
+      reader.readAsText(this.file)
+      reader.onload = () => {
+        const data = reader.result
+        console.error(data)
+        const event = ical.parse(data)
+        console.error(event)
+        this.event = {
+          title: event.name 
+        }
+      }      
+    },
     async importURL() {
       if (!this.URL) {
         this.errorMessage = this.$validators.required('common.URL')('')

pages/add/_edit.vue

@@ -4,7 +4,8 @@
       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-btn(link text color='primary' @click='openImportDialog=true') 
+          <v-icon>mdi-file-import</v-icon> {{$t('common.import')}}
       v-dialog(v-model='openImportDialog')
         ImportDialog(@close='openImportDialog=false' @imported='eventImported')
 

pages/event/_id.vue

@@ -1,18 +1,19 @@
 <template lang="pug">
-  v-card.h-event.eventDetail
+
-    v-container
+  //- EVENT PAGE
+  //- gancio supports microformats (http://microformats.org/wiki/h-event)
+  v-card.h-event
+    v-card-text
 
       //- event admin controls
       EventAdmin(v-if='is_mine' :event='event')
 
-      //- v-list-item(two-line)
+      //- Title
-      //-   v-list-item-content
       .text-h5.text-sm-h4
         b.p-name {{event.title}}
+
       v-row
         v-col.col-12.col-lg-9
-          //- TOFIX: avoid reflow
-          //- event image
           v-img.main_image.mb-3(
             contain
             :src='imgPath'
@@ -49,24 +50,14 @@
               v-list-item(link)
                 v-list-item-content.primary--text.text-uppercase(@click='showEmbed=true' text color='primary') {{$t('common.embed')}}
 
-              v-list-item(link)
+              v-list-item(link :href='`/api/event/${event.id}.ics`')
-                v-list-item-content.primary--text.text-uppercase(:href='`${settings.baseurl}/api/event/${event.id}.ics`' text color='primary') {{$t('common.add_to_calendar')}}
+                v-list-item-content.primary--text.text-uppercase
+                //- v-btn(nuxt block link :href='`/api/event/${event.id}.ics`' text color='primary') {{$t('common.add_to_calendar')}}
 
-    v-container
-        v-dialog(v-model='showEmbed')
-          EmbedEvent(:event='event' @close='showEmbed=false')
 
-        p.p-description.text-h6(v-html='event.description')
+      .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}}
+      v-chip.p-category.ml-1(v-for='tag in event.tags' color='primary'
-
+        outlined :key='tag' v-text='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')}}
 
       //- resources from fediverse
       #resources.mt-1(v-if='settings.enable_federation')
@@ -124,6 +115,9 @@
           :to='`/event/${event.next}`' :disabled='!event.next')
           v-icon mdi-arrow-right
 
+      v-dialog(v-model='showEmbed')
+        EmbedEvent(:event='event' @close='showEmbed=false')
+
 </template>
 <script>
 import { mapState } from 'vuex'

server/api/models/event.js

@@ -87,7 +87,7 @@ Event.prototype.toAP = function (username, locale, to = []) {
     id: `${config.baseurl}/federation/m/${this.id}`,
     name: this.title,
     url: `${config.baseurl}/event/${this.id}`,
-    type: 'Event',
+    type: 'Note',
     startTime: moment.unix(this.start_datetime).locale(locale).format(),
     endTime: moment.unix(this.end_datetime).locale(locale).format(),
     location: {