From fc6cc1354c6133aa45c43b2217faabb0fece025a Mon Sep 17 00:00:00 2001
From: tobiaschielens <tobias.chielens@gmail.com>
Date: Tue, 15 Oct 2019 10:16:35 +0200
Subject: [PATCH 1/3] Starting to make calendar dynamic

---
 public/config/config.local                 |   2 +-
 src/components/fullevent/fullevent.html    | 148 +++++++++++++++++++++
 src/components/fullevent/fullevent.js      | 140 +++++++++++++++++++
 src/components/fullevent/fullevent.scss    |   4 +
 src/components/fullevent/fullevent.spec.js |  29 ++++
 src/components/fullevent/index.vue         |   3 +
 src/views/calendar/calendar.html           |   8 ++
 src/views/calendar/calendar.js             |  17 ++-
 8 files changed, 343 insertions(+), 8 deletions(-)
 create mode 100644 src/components/fullevent/fullevent.html
 create mode 100644 src/components/fullevent/fullevent.js
 create mode 100644 src/components/fullevent/fullevent.scss
 create mode 100644 src/components/fullevent/fullevent.spec.js
 create mode 100644 src/components/fullevent/index.vue

diff --git a/public/config/config.local b/public/config/config.local
index 028a5264..d36e1e4d 100644
--- a/public/config/config.local
+++ b/public/config/config.local
@@ -1,6 +1,6 @@
 export default ({
   tfApiUrl: 'https://radar.threefold.io/api/',
-  jsApiUrl: `http://172.17.0.2/api/actors/`,
+  jsApiUrl: `https://172.17.0.2/web/gedis/http/`,
 
   apiUrl: 'https://ffc-signaling.staging.jimber.org',
   janus: 'http://ffc-video.jimber.staging.org/janus',
diff --git a/src/components/fullevent/fullevent.html b/src/components/fullevent/fullevent.html
new file mode 100644
index 00000000..a16ada7f
--- /dev/null
+++ b/src/components/fullevent/fullevent.html
@@ -0,0 +1,148 @@
+<section class="fullevent">
+  <v-form ref="contactForm">
+    <input type="file" style="display: none" ref="image" accept="image/*" @change="onFilePicked">
+    <v-col class="pt-0">
+      <div style="position: absolute; right:10px; top: 10px;">
+        <slot name="actions">
+          <v-btn v-if="edit" dark icon @click="updateContact">
+            <v-icon small>fas fa-save</v-icon>
+          </v-btn>
+          <v-btn v-if="edit" dark icon @click="cancelUpdate">
+            <v-icon small>fas fa-times</v-icon>
+          </v-btn>
+          <v-btn v-if="!edit" dark icon @click="updateFavorite(!currentEvent.favorite)">
+            <v-icon v-if="currentEvent.favorite" small>fas fa-star</v-icon>
+            <v-icon v-else small>far fa-star</v-icon>
+          </v-btn>
+          <v-btn v-if="!edit" dark icon @click="edit = true">
+            <v-icon small>fas fa-pencil-alt</v-icon>
+          </v-btn>
+          <v-menu v-if="!edit">
+            <template v-slot:activator="{ on }">
+              <v-btn dark icon v-on="on">
+                <v-icon small>fas fa-ellipsis-v</v-icon>
+              </v-btn>
+            </template>
+            <v-list>
+              <v-list-item @click="deleteThisContact">
+                <v-list-item-icon>
+                  <v-icon>fas fa-trash</v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>Delete contact</v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </slot>
+      </div>
+      <v-row class="primary pa-5" align="center">
+        <v-flex class="pl-2">
+          <v-row class="px-4">
+            <v-text-field :disabled="!edit" :rules="[$rules.required, $rules.noLongerThan100]" dark
+              v-model="currentEvent.eventName" label="Event name"></v-text-field>
+          </v-row>
+          <!-- <v-text-field :disabled="!edit" dark v-model="currentEvent.tags" label="Tags"/>!-->
+        </v-flex>
+      </v-row>
+      <v-col>
+        <h2 class="font-weight-thin">
+          Event details
+        </h2>
+        <v-row>
+          <v-col cols="6">
+            <v-dialog v-if="currentEvent.startDate || edit" ref="startDateDialog"
+              :return-value.sync="currentEvent.startDate" width="290px">
+              <template v-slot:activator="{ on }">
+                <v-text-field :disabled="!edit" v-model="currentEvent.startDate" label="Start date"
+                  prepend-icon="fas fa-calendar" readonly v-on="on">
+                </v-text-field>
+              </template>
+              <v-date-picker v-model="currentEvent.startDate" scrollable>
+                <div class="flex-grow-1"></div>
+                <v-btn text color="primary" @click="startDateDialog = false">Cancel</v-btn>
+                <v-btn text color="primary" @click="$refs.startDateDialog.save(currentEvent.startDate)">OK</v-btn>
+              </v-date-picker>
+            </v-dialog>
+          </v-col>
+          <v-col cols="6">
+            <v-dialog v-if="currentEvent.toDate || edit" ref="toDateDialog"
+              :return-value.sync="currentEvent.toDate" width="290px">
+              <template v-slot:activator="{ on }">
+                <v-text-field :disabled="!edit" v-model="currentEvent.toDate" label="End date"
+                  prepend-icon="fas fa-calendar" readonly v-on="on">
+                </v-text-field>
+              </template>
+              <v-date-picker v-model="currentEvent.toDate" scrollable>
+                <div class="flex-grow-1"></div>
+                <v-btn text color="primary" @click="toDateDialog = false">Cancel</v-btn>
+                <v-btn text color="primary" @click="$refs.toDateDialog.save(currentEvent.toDate)">OK</v-btn>
+              </v-date-picker>
+            </v-dialog>
+          </v-col>
+        </v-row>
+        <v-row>
+            <v-col cols="6">
+              <v-dialog v-if="currentEvent.startTime || edit" ref="startTimeDialog"
+                :return-value.sync="currentEvent.startTime" width="290px">
+                <template v-slot:activator="{ on }">
+                  <v-text-field :disabled="!edit" v-model="currentEvent.startTime" label="Start time"
+                    prepend-icon="fas fa-watch" readonly v-on="on">
+                  </v-text-field>
+                </template>
+                <v-time-picker v-model="currentEvent.startTime" scrollable>
+                  <div class="flex-grow-1"></div>
+                  <v-btn text color="primary" @click="startTimeDialog = false">Cancel</v-btn>
+                  <v-btn text color="primary" @click="$refs.startTimeDialog.save(currentEvent.startTime)">OK</v-btn>
+                </v-time-picker>
+              </v-dialog>
+            </v-col>
+            <v-col cols="6">
+              <v-dialog v-if="currentEvent.endTime || edit" ref="endTimeDialog"
+                :return-value.sync="currentEvent.endTime" width="290px">
+                <template v-slot:activator="{ on }">
+                  <v-text-field :disabled="!edit" v-model="currentEvent.endTime" label="End time"
+                    prepend-icon="fas fa-watch" readonly v-on="on">
+                  </v-text-field>
+                </template>
+                <v-time-picker v-model="currentEvent.endTime" scrollable>
+                    <div class="flex-grow-1"></div>
+                    <v-btn text color="primary" @click="endTimeDialog = false">Cancel</v-btn>
+                    <v-btn text color="primary" @click="$refs.endTimeDialog.save(currentEvent.endTime)">OK</v-btn>
+                  </v-time-picker>
+              </v-dialog>
+            </v-col>
+          </v-row>
+
+        <!-- <v-divider v-if="currentEvent.guests && currentEvent.guests.length" class="my-5"></v-divider> -->
+        <!-- <v-row align="center" v-for="(item, index) in currentEvent.guests" :key="`guest${index}`">
+          <v-col cols="1" justify="center" class="text-center">
+            <v-icon :disabled="!edit" v-if="!index">
+              fas fa-phone
+            </v-icon>
+          </v-col>
+          <v-col cols="7" class="py-0">
+            <v-row>
+              <v-col cols="2" class="py-0">
+                <v-text-field :disabled="!edit" v-model="item.extensions" label="Extensions"></v-text-field>
+              </v-col>
+              <v-col class="py-0">
+                <v-text-field :disabled="!edit" v-model="item.number" label="Phone number"></v-text-field>
+              </v-col>
+            </v-row>
+          </v-col>
+          <v-col cols="3" class="py-0">
+            <v-autocomplete :disabled="!edit" v-model="item.description" label="Description" :items="description">
+            </v-autocomplete>
+          </v-col>
+          <v-col cols="1" class="py-0">
+            <v-btn v-if="edit && index" icon small class="secondary" @click="removeNumber(index)">
+              <v-icon small class="white--text">fas fa-times</v-icon>
+            </v-btn>
+            <v-btn v-if="edit" icon small class="secondary" @click="addPhoneNumber">
+              <v-icon small class="white--text">fas fa-plus</v-icon>
+            </v-btn>
+          </v-col>
+        </v-row> -->
+      </v-col>
+    </v-col>
+  </v-form>
+</section>
\ No newline at end of file
diff --git a/src/components/fullevent/fullevent.js b/src/components/fullevent/fullevent.js
new file mode 100644
index 00000000..e664eaf9
--- /dev/null
+++ b/src/components/fullevent/fullevent.js
@@ -0,0 +1,140 @@
+import { mapActions } from 'vuex'
+import config from '../../../public/config'
+import cloneDeep from 'lodash.clonedeep'
+
+export default {
+  name: 'fullevent',
+  components: {},
+  props: {
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    contact: {
+      type: Object,
+      default: () => {
+        return {
+          addresses: [{}],
+          email: [{}],
+          phone_numbers: [{}]
+        }
+      }
+    }
+  },
+  data () {
+    return {
+      description: config.description,
+      edit: this.editable,
+      currentEvent: {
+        
+      },
+      startDateDialog: false
+    }
+  },
+  computed: {
+    currentSalutations: {
+      get () {
+        return this.currentEvent.salutation ? this.currentEvent.salutation.split(',') : []
+      },
+      set (val) {
+        this.currentEvent.salutation = val.join(',')
+      }
+    }
+  },
+  mounted () {
+    this.currentEvent = cloneDeep(this.contact)
+    this.edit = cloneDeep(this.editable)
+  },
+  methods: {
+    ...mapActions([
+      'deleteContact',
+      'createContact'
+    ]),
+    updateFavorite (isFavorite) {
+      this.currentEvent.favorite = isFavorite
+      this.createContact(this.currentEvent)
+    },
+    openFilePicker () {
+      this.$refs.image.click()
+    },
+    onFilePicked (e) {
+      const files = e.target.files
+      if (e.target.files && e.target.files[0]) {
+        var fr = new window.FileReader()
+        fr.addEventListener('load', (x) => {
+          this.currentEvent.picture = x.target.result
+        })
+        fr.readAsDataURL(files[0])
+      }
+    },
+    updateContact () {
+      if (this.$refs.contactForm.validate()) {
+        for (let index = 0; index < this.currentEvent.email.length; index++) {
+          const element = this.currentEvent.email[index]
+          if (!element.email) {
+            this.currentEvent.email.splice(index, 1)
+          }
+        }
+        for (let index = 0; index < this.currentEvent.phone_numbers.length; index++) {
+          const element = this.currentEvent.phone_numbers[index]
+          if (!element.number) {
+            this.currentEvent.phone_numbers.splice(index, 1)
+          }
+        }
+        for (let index = 0; index < this.currentEvent.addresses.length; index++) {
+          const element = this.currentEvent.addresses[index]
+          if (!element.street_name) {
+            this.currentEvent.addresses.splice(index, 1)
+          }
+        }
+        this.createContact(this.currentEvent)
+        this.edit = false
+        this.$emit('update')
+      }
+    },
+    cancelUpdate () {
+      this.currentEvent = cloneDeep(this.contact)
+      this.edit = false
+      this.$refs.contactForm.resetValidation()
+      this.$emit('cancel')
+    },
+    addPhoneNumber () {
+      this.currentEvent.phone_numbers.push({})
+    },
+    removeNumber (index) {
+      // TODO show dialog "are you sure"
+      this.currentEvent.phone_numbers.splice(index, 1)
+    },
+    addAddress () {
+      this.currentEvent.addresses.push({})
+    },
+    removeAddress (index) {
+      // TODO show dialog "are you sure"
+      this.currentEvent.addresses.splice(index, 1)
+    },
+    addEmail () {
+      this.currentEvent.email.push({})
+    },
+    removeEmail (index) {
+      // TODO show dialog "are you sure"
+      this.currentEvent.email.splice(index, 1)
+    },
+    deleteThisContact () {
+      // TODO show dialog "are you sure"
+      this.deleteContact(this.currentEvent.id)
+      this.$emit('delete:contact', this.currentEvent.id)
+    }
+  },
+  watch: {
+    edit: {
+      immediate: true,
+      handler (val) {
+        if (val) {
+          if (!this.currentEvent.phone_numbers.length) this.currentEvent.phone_numbers.push({})
+          if (!this.currentEvent.email.length) this.currentEvent.email.push({})
+          if (!this.currentEvent.addresses.length) this.currentEvent.addresses.push({})
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/fullevent/fullevent.scss b/src/components/fullevent/fullevent.scss
new file mode 100644
index 00000000..d0408c0a
--- /dev/null
+++ b/src/components/fullevent/fullevent.scss
@@ -0,0 +1,4 @@
+.fullcontact {
+    height: 100%;
+    width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/fullevent/fullevent.spec.js b/src/components/fullevent/fullevent.spec.js
new file mode 100644
index 00000000..6712d5bd
--- /dev/null
+++ b/src/components/fullevent/fullevent.spec.js
@@ -0,0 +1,29 @@
+import Vue from 'vue';
+import FullcontactComponent from './index.vue';
+
+// Here are some Jasmine 2.0 tests, though you can
+// use any test runner / assertion library combo you prefer
+describe('FullcontactComponent', () => {
+  // Inspect the raw component options
+  it('has a created hook', () => {
+    // expect(typeof FullcontactComponent.created).toBe('function');
+  })
+  // Evaluate the results of functions in
+  // the raw component options
+  it('sets the correct default data', () => {
+    // expect(typeof FullcontactComponent.data).toBe('function')
+    // const defaultData = FullcontactComponent.data();
+    // expect(defaultData.message).toBe('hello!');
+  })
+  // Inspect the component instance on mount
+  it('correctly sets the message when created', () => {
+    // const vm = new Vue(FullcontactComponent).$mount();
+    // expect(vm.message).toBe('bye!');
+  })
+  // Mount an instance and inspect the render output
+  it('renders the correct message', () => {
+    // const Ctor = Vue.extend(FullcontactComponent);
+    // const vm = new Ctor().$mount();
+    // expect(vm.$el.textContent).toBe('bye!');
+  })
+})
\ No newline at end of file
diff --git a/src/components/fullevent/index.vue b/src/components/fullevent/index.vue
new file mode 100644
index 00000000..54d23f54
--- /dev/null
+++ b/src/components/fullevent/index.vue
@@ -0,0 +1,3 @@
+<template src="./fullevent.html"></template>
+<script src="./fullevent.js"></script>
+<style src="./fullevent.scss" scoped lang="scss"></style>
diff --git a/src/views/calendar/calendar.html b/src/views/calendar/calendar.html
index 31a0dfea..5e904546 100644
--- a/src/views/calendar/calendar.html
+++ b/src/views/calendar/calendar.html
@@ -24,4 +24,12 @@
       </v-card-text>
     </v-card>
   </v-col>
+  <v-dialog v-model="addEventDialog" max-width="900px" @click:outside="clearAndClose">
+      <v-card>
+        <full-event :key="Math.random()" editable @update="clearAndClose" @cancel="clearAndClose"/>
+      </v-card>
+    </v-dialog>
+    <v-btn fixed app bottom right fab dark color="secondary" @click="addEventDialog = true" style="z-index: 99">
+      <v-icon>fas fa-plus</v-icon>
+    </v-btn>
 </section>
\ No newline at end of file
diff --git a/src/views/calendar/calendar.js b/src/views/calendar/calendar.js
index 882afdfd..76d4dfe1 100644
--- a/src/views/calendar/calendar.js
+++ b/src/views/calendar/calendar.js
@@ -1,10 +1,14 @@
+import fullEvent from '../../components/fullevent'
+
 export default {
   name: 'calendar',
-  components: {},
+  components: { fullEvent },
   props: [],
   data () {
     return {
       today: '2019-01-08',
+      openEvent: {},
+      addEventDialog: false,
       events: [
         {
           name: 'Weekly Meeting',
@@ -19,11 +23,7 @@ export default {
           name: 'Mash Potatoes',
           start: '2019-01-09 12:30',
           end: '2019-01-09 15:30'
-        },
-//         {
-//           name: '<img src="x" onerror=alert()>',
-//           start: '2019-01-10'
-//         }
+        }
       ]
     }
   },
@@ -34,6 +34,9 @@ export default {
     this.$refs.calendar.scrollToTime('08:00')
   },
   methods: {
-
+    clearAndClose () {
+      this.newEvent = {}
+      this.addEventDialog = false
+    }
   }
 }

From 164ec77f58aa06474c6dd4fe1a4ef9b018177b55 Mon Sep 17 00:00:00 2001
From: tobiaschielens <tobias.chielens@gmail.com>
Date: Thu, 17 Oct 2019 10:29:08 +0200
Subject: [PATCH 2/3] Add event works

---
 .../calendarnavigation.html                   |  29 ++++
 .../calendarnavigation/calendarnavigation.js  |  32 +++++
 .../calendarnavigation.scss                   |   3 +
 .../calendarnavigation.spec.js                |  29 ++++
 src/components/calendarnavigation/index.vue   |   3 +
 src/components/fullevent/fullevent.html       | 132 ++++++++----------
 src/components/fullevent/fullevent.js         | 124 ++--------------
 src/services/calendarService.js               |  51 +++++++
 src/store/calendarStore.js                    |  67 +++++++++
 src/store/index.js                            |   4 +-
 src/views/calendar/calendar.html              |  23 +--
 src/views/calendar/calendar.js                |  43 +++---
 12 files changed, 323 insertions(+), 217 deletions(-)
 create mode 100644 src/components/calendarnavigation/calendarnavigation.html
 create mode 100644 src/components/calendarnavigation/calendarnavigation.js
 create mode 100644 src/components/calendarnavigation/calendarnavigation.scss
 create mode 100644 src/components/calendarnavigation/calendarnavigation.spec.js
 create mode 100644 src/components/calendarnavigation/index.vue
 create mode 100644 src/services/calendarService.js
 create mode 100644 src/store/calendarStore.js

diff --git a/src/components/calendarnavigation/calendarnavigation.html b/src/components/calendarnavigation/calendarnavigation.html
new file mode 100644
index 00000000..95153c15
--- /dev/null
+++ b/src/components/calendarnavigation/calendarnavigation.html
@@ -0,0 +1,29 @@
+<section class="calendarnavigation">
+  <v-navigation-drawer permanent class="transparent elevation-0 pl-3">
+    <v-list dense class="pl-2">
+      <v-list-item-group v-model="selectedBox" color="primary">
+      <v-list-item link v-for="(calendar, index) in calendars" :key="index" @click="setSelectedCalendar(calendar.id)">
+        <v-list-item-icon>
+          <v-icon small>fad fa-calendar-alt</v-icon>
+        </v-list-item-icon>
+        <v-list-item-content>
+          <v-list-item-title>{{calendar.name}}</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+      </v-list-item-group>
+    </v-list>
+  </v-navigation-drawer>
+
+  <v-col>
+  <v-row align="center" class="ml-0">
+    <v-flex>
+      <v-text-field v-model="newCalendar" label="Calendar name" class="pl-3">
+      </v-text-field>
+    </v-flex>
+    <v-flex>
+      <v-btn small color="success" @click="addCal">add</v-btn>
+    </v-flex>
+  </v-row>
+</v-col>
+
+</section>
\ No newline at end of file
diff --git a/src/components/calendarnavigation/calendarnavigation.js b/src/components/calendarnavigation/calendarnavigation.js
new file mode 100644
index 00000000..8b9305a7
--- /dev/null
+++ b/src/components/calendarnavigation/calendarnavigation.js
@@ -0,0 +1,32 @@
+import { mapActions, mapGetters } from 'vuex'
+
+export default {
+  name: 'calendarnavigation',
+  components: {},
+  props: [],
+  data () {
+    return {
+      selectedBox: 0,
+      newCalendar: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'calendars'
+    ])
+  },
+  mounted () {
+  },
+  methods: {
+    ...mapActions([
+      'addCalendar'
+    ]),
+    addCal () {
+      this.addCalendar(this.newCalendar)
+      this.newCalendar = ''
+    },
+    setSelectedCalendar (calendarId) {
+      this.$emit('setSelectedCalendar', calendarId)
+    }
+  }
+}
diff --git a/src/components/calendarnavigation/calendarnavigation.scss b/src/components/calendarnavigation/calendarnavigation.scss
new file mode 100644
index 00000000..2d41c541
--- /dev/null
+++ b/src/components/calendarnavigation/calendarnavigation.scss
@@ -0,0 +1,3 @@
+.emailnavigation {
+
+}
diff --git a/src/components/calendarnavigation/calendarnavigation.spec.js b/src/components/calendarnavigation/calendarnavigation.spec.js
new file mode 100644
index 00000000..a8f716b7
--- /dev/null
+++ b/src/components/calendarnavigation/calendarnavigation.spec.js
@@ -0,0 +1,29 @@
+import Vue from 'vue';
+import EmailnavigationComponent from './index.vue';
+
+// Here are some Jasmine 2.0 tests, though you can
+// use any test runner / assertion library combo you prefer
+describe('EmailnavigationComponent', () => {
+  // Inspect the raw component options
+  it('has a created hook', () => {
+    // expect(typeof EmailnavigationComponent.created).toBe('function');
+  })
+  // Evaluate the results of functions in
+  // the raw component options
+  it('sets the correct default data', () => {
+    // expect(typeof EmailnavigationComponent.data).toBe('function')
+    // const defaultData = EmailnavigationComponent.data();
+    // expect(defaultData.message).toBe('hello!');
+  })
+  // Inspect the component instance on mount
+  it('correctly sets the message when created', () => {
+    // const vm = new Vue(EmailnavigationComponent).$mount();
+    // expect(vm.message).toBe('bye!');
+  })
+  // Mount an instance and inspect the render output
+  it('renders the correct message', () => {
+    // const Ctor = Vue.extend(EmailnavigationComponent);
+    // const vm = new Ctor().$mount();
+    // expect(vm.$el.textContent).toBe('bye!');
+  })
+})
\ No newline at end of file
diff --git a/src/components/calendarnavigation/index.vue b/src/components/calendarnavigation/index.vue
new file mode 100644
index 00000000..e68fde3a
--- /dev/null
+++ b/src/components/calendarnavigation/index.vue
@@ -0,0 +1,3 @@
+<template src="./calendarnavigation.html"></template>
+<script src="./calendarnavigation.js"></script>
+<style src="./calendarnavigation.scss" scoped lang="scss"></style>
diff --git a/src/components/fullevent/fullevent.html b/src/components/fullevent/fullevent.html
index a16ada7f..9238c689 100644
--- a/src/components/fullevent/fullevent.html
+++ b/src/components/fullevent/fullevent.html
@@ -1,19 +1,11 @@
 <section class="fullevent">
-  <v-form ref="contactForm">
-    <input type="file" style="display: none" ref="image" accept="image/*" @change="onFilePicked">
+  <v-form ref="eventForm">
     <v-col class="pt-0">
       <div style="position: absolute; right:10px; top: 10px;">
         <slot name="actions">
-          <v-btn v-if="edit" dark icon @click="updateContact">
+          <v-btn v-if="edit" dark icon @click="saveEvent">
             <v-icon small>fas fa-save</v-icon>
           </v-btn>
-          <v-btn v-if="edit" dark icon @click="cancelUpdate">
-            <v-icon small>fas fa-times</v-icon>
-          </v-btn>
-          <v-btn v-if="!edit" dark icon @click="updateFavorite(!currentEvent.favorite)">
-            <v-icon v-if="currentEvent.favorite" small>fas fa-star</v-icon>
-            <v-icon v-else small>far fa-star</v-icon>
-          </v-btn>
           <v-btn v-if="!edit" dark icon @click="edit = true">
             <v-icon small>fas fa-pencil-alt</v-icon>
           </v-btn>
@@ -24,14 +16,17 @@
               </v-btn>
             </template>
             <v-list>
-              <v-list-item @click="deleteThisContact">
+              <v-list-item>
                 <v-list-item-icon>
                   <v-icon>fas fa-trash</v-icon>
                 </v-list-item-icon>
-                <v-list-item-title>Delete contact</v-list-item-title>
+                <v-list-item-title>Delete event</v-list-item-title>
               </v-list-item>
             </v-list>
           </v-menu>
+          <v-btn dark icon @click="cancel">
+            <v-icon small>fas fa-times</v-icon>
+          </v-btn>
         </slot>
       </div>
       <v-row class="primary pa-5" align="center">
@@ -43,6 +38,24 @@
           <!-- <v-text-field :disabled="!edit" dark v-model="currentEvent.tags" label="Tags"/>!-->
         </v-flex>
       </v-row>
+      <v-col>
+        <h2 class="font-weight-thin">
+          Select calendar
+        </h2>
+        <v-row>
+        <v-col class="d-flex" cols="12" sm="6">
+            <v-select
+              :items="calendars"
+              item-text = "name"
+              item-value="id"
+              filled
+              value="selectedCalendarId"
+              label="Calendar"
+              v-model="currentEvent.selectedCalendarId"
+            ></v-select>
+          </v-col>
+        </v-row>
+      </v-col>
       <v-col>
         <h2 class="font-weight-thin">
           Event details
@@ -56,7 +69,7 @@ <h2 class="font-weight-thin">
                   prepend-icon="fas fa-calendar" readonly v-on="on">
                 </v-text-field>
               </template>
-              <v-date-picker v-model="currentEvent.startDate" scrollable>
+              <v-date-picker v-model="currentEvent.startDate" scrollable :rules="[$rules.required]">
                 <div class="flex-grow-1"></div>
                 <v-btn text color="primary" @click="startDateDialog = false">Cancel</v-btn>
                 <v-btn text color="primary" @click="$refs.startDateDialog.save(currentEvent.startDate)">OK</v-btn>
@@ -64,8 +77,8 @@ <h2 class="font-weight-thin">
             </v-dialog>
           </v-col>
           <v-col cols="6">
-            <v-dialog v-if="currentEvent.toDate || edit" ref="toDateDialog"
-              :return-value.sync="currentEvent.toDate" width="290px">
+            <v-dialog v-if="currentEvent.toDate || edit" ref="toDateDialog" :return-value.sync="currentEvent.toDate"
+              width="290px">
               <template v-slot:activator="{ on }">
                 <v-text-field :disabled="!edit" v-model="currentEvent.toDate" label="End date"
                   prepend-icon="fas fa-calendar" readonly v-on="on">
@@ -80,68 +93,37 @@ <h2 class="font-weight-thin">
           </v-col>
         </v-row>
         <v-row>
-            <v-col cols="6">
-              <v-dialog v-if="currentEvent.startTime || edit" ref="startTimeDialog"
-                :return-value.sync="currentEvent.startTime" width="290px">
-                <template v-slot:activator="{ on }">
-                  <v-text-field :disabled="!edit" v-model="currentEvent.startTime" label="Start time"
-                    prepend-icon="fas fa-watch" readonly v-on="on">
-                  </v-text-field>
-                </template>
-                <v-time-picker v-model="currentEvent.startTime" scrollable>
-                  <div class="flex-grow-1"></div>
-                  <v-btn text color="primary" @click="startTimeDialog = false">Cancel</v-btn>
-                  <v-btn text color="primary" @click="$refs.startTimeDialog.save(currentEvent.startTime)">OK</v-btn>
-                </v-time-picker>
-              </v-dialog>
-            </v-col>
-            <v-col cols="6">
-              <v-dialog v-if="currentEvent.endTime || edit" ref="endTimeDialog"
-                :return-value.sync="currentEvent.endTime" width="290px">
-                <template v-slot:activator="{ on }">
-                  <v-text-field :disabled="!edit" v-model="currentEvent.endTime" label="End time"
-                    prepend-icon="fas fa-watch" readonly v-on="on">
-                  </v-text-field>
-                </template>
-                <v-time-picker v-model="currentEvent.endTime" scrollable>
-                    <div class="flex-grow-1"></div>
-                    <v-btn text color="primary" @click="endTimeDialog = false">Cancel</v-btn>
-                    <v-btn text color="primary" @click="$refs.endTimeDialog.save(currentEvent.endTime)">OK</v-btn>
-                  </v-time-picker>
-              </v-dialog>
-            </v-col>
-          </v-row>
-
-        <!-- <v-divider v-if="currentEvent.guests && currentEvent.guests.length" class="my-5"></v-divider> -->
-        <!-- <v-row align="center" v-for="(item, index) in currentEvent.guests" :key="`guest${index}`">
-          <v-col cols="1" justify="center" class="text-center">
-            <v-icon :disabled="!edit" v-if="!index">
-              fas fa-phone
-            </v-icon>
-          </v-col>
-          <v-col cols="7" class="py-0">
-            <v-row>
-              <v-col cols="2" class="py-0">
-                <v-text-field :disabled="!edit" v-model="item.extensions" label="Extensions"></v-text-field>
-              </v-col>
-              <v-col class="py-0">
-                <v-text-field :disabled="!edit" v-model="item.number" label="Phone number"></v-text-field>
-              </v-col>
-            </v-row>
-          </v-col>
-          <v-col cols="3" class="py-0">
-            <v-autocomplete :disabled="!edit" v-model="item.description" label="Description" :items="description">
-            </v-autocomplete>
+          <v-col cols="6">
+            <v-dialog v-if="currentEvent.startTime || edit" ref="startTimeDialog"
+              :return-value.sync="currentEvent.startTime" width="290px">
+              <template v-slot:activator="{ on }">
+                <v-text-field :disabled="!edit" v-model="currentEvent.startTime" label="Start time"
+                  prepend-icon="fas fa-watch" readonly v-on="on">
+                </v-text-field>
+              </template>
+              <v-time-picker v-model="currentEvent.startTime" scrollable>
+                <div class="flex-grow-1"></div>
+                <v-btn text color="primary" @click="startTimeDialog = false">Cancel</v-btn>
+                <v-btn text color="primary" @click="$refs.startTimeDialog.save(currentEvent.startTime)">OK</v-btn>
+              </v-time-picker>
+            </v-dialog>
           </v-col>
-          <v-col cols="1" class="py-0">
-            <v-btn v-if="edit && index" icon small class="secondary" @click="removeNumber(index)">
-              <v-icon small class="white--text">fas fa-times</v-icon>
-            </v-btn>
-            <v-btn v-if="edit" icon small class="secondary" @click="addPhoneNumber">
-              <v-icon small class="white--text">fas fa-plus</v-icon>
-            </v-btn>
+          <v-col cols="6">
+            <v-dialog v-if="currentEvent.endTime || edit" ref="endTimeDialog" :return-value.sync="currentEvent.endTime"
+              width="290px">
+              <template v-slot:activator="{ on }">
+                <v-text-field :disabled="!edit" v-model="currentEvent.endTime" label="End time"
+                  prepend-icon="fas fa-watch" readonly v-on="on">
+                </v-text-field>
+              </template>
+              <v-time-picker v-model="currentEvent.endTime" scrollable>
+                <div class="flex-grow-1"></div>
+                <v-btn text color="primary" @click="endTimeDialog = false">Cancel</v-btn>
+                <v-btn text color="primary" @click="$refs.endTimeDialog.save(currentEvent.endTime)">OK</v-btn>
+              </v-time-picker>
+            </v-dialog>
           </v-col>
-        </v-row> -->
+        </v-row>
       </v-col>
     </v-col>
   </v-form>
diff --git a/src/components/fullevent/fullevent.js b/src/components/fullevent/fullevent.js
index e664eaf9..93b45c50 100644
--- a/src/components/fullevent/fullevent.js
+++ b/src/components/fullevent/fullevent.js
@@ -5,136 +5,34 @@ import cloneDeep from 'lodash.clonedeep'
 export default {
   name: 'fullevent',
   components: {},
-  props: {
-    editable: {
-      type: Boolean,
-      default: false
-    },
-    contact: {
-      type: Object,
-      default: () => {
-        return {
-          addresses: [{}],
-          email: [{}],
-          phone_numbers: [{}]
-        }
-      }
-    }
-  },
+  props: [ 'calendars', 'selectedCalendarId' ],
   data () {
     return {
-      description: config.description,
-      edit: this.editable,
+      edit: true,
       currentEvent: {
-        
-      },
-      startDateDialog: false
+      }
     }
   },
   computed: {
-    currentSalutations: {
-      get () {
-        return this.currentEvent.salutation ? this.currentEvent.salutation.split(',') : []
-      },
-      set (val) {
-        this.currentEvent.salutation = val.join(',')
-      }
-    }
   },
   mounted () {
-    this.currentEvent = cloneDeep(this.contact)
-    this.edit = cloneDeep(this.editable)
   },
   methods: {
     ...mapActions([
-      'deleteContact',
-      'createContact'
+      'addEvent'
     ]),
-    updateFavorite (isFavorite) {
-      this.currentEvent.favorite = isFavorite
-      this.createContact(this.currentEvent)
-    },
-    openFilePicker () {
-      this.$refs.image.click()
+    saveEvent () {
+      this.addEvent(this.currentEvent)
+      this.clearAndClose()
     },
-    onFilePicked (e) {
-      const files = e.target.files
-      if (e.target.files && e.target.files[0]) {
-        var fr = new window.FileReader()
-        fr.addEventListener('load', (x) => {
-          this.currentEvent.picture = x.target.result
-        })
-        fr.readAsDataURL(files[0])
-      }
-    },
-    updateContact () {
-      if (this.$refs.contactForm.validate()) {
-        for (let index = 0; index < this.currentEvent.email.length; index++) {
-          const element = this.currentEvent.email[index]
-          if (!element.email) {
-            this.currentEvent.email.splice(index, 1)
-          }
-        }
-        for (let index = 0; index < this.currentEvent.phone_numbers.length; index++) {
-          const element = this.currentEvent.phone_numbers[index]
-          if (!element.number) {
-            this.currentEvent.phone_numbers.splice(index, 1)
-          }
-        }
-        for (let index = 0; index < this.currentEvent.addresses.length; index++) {
-          const element = this.currentEvent.addresses[index]
-          if (!element.street_name) {
-            this.currentEvent.addresses.splice(index, 1)
-          }
-        }
-        this.createContact(this.currentEvent)
-        this.edit = false
-        this.$emit('update')
-      }
-    },
-    cancelUpdate () {
-      this.currentEvent = cloneDeep(this.contact)
-      this.edit = false
-      this.$refs.contactForm.resetValidation()
+    clearAndClose () {
+      this.currentEvent = {}
       this.$emit('cancel')
     },
-    addPhoneNumber () {
-      this.currentEvent.phone_numbers.push({})
-    },
-    removeNumber (index) {
-      // TODO show dialog "are you sure"
-      this.currentEvent.phone_numbers.splice(index, 1)
-    },
-    addAddress () {
-      this.currentEvent.addresses.push({})
-    },
-    removeAddress (index) {
-      // TODO show dialog "are you sure"
-      this.currentEvent.addresses.splice(index, 1)
-    },
-    addEmail () {
-      this.currentEvent.email.push({})
-    },
-    removeEmail (index) {
-      // TODO show dialog "are you sure"
-      this.currentEvent.email.splice(index, 1)
-    },
-    deleteThisContact () {
-      // TODO show dialog "are you sure"
-      this.deleteContact(this.currentEvent.id)
-      this.$emit('delete:contact', this.currentEvent.id)
+    cancel () {
+      this.$emit('cancel')
     }
   },
   watch: {
-    edit: {
-      immediate: true,
-      handler (val) {
-        if (val) {
-          if (!this.currentEvent.phone_numbers.length) this.currentEvent.phone_numbers.push({})
-          if (!this.currentEvent.email.length) this.currentEvent.email.push({})
-          if (!this.currentEvent.addresses.length) this.currentEvent.addresses.push({})
-        }
-      }
-    }
   }
 }
diff --git a/src/services/calendarService.js b/src/services/calendarService.js
new file mode 100644
index 00000000..eba7bf36
--- /dev/null
+++ b/src/services/calendarService.js
@@ -0,0 +1,51 @@
+import Axios from 'axios'
+import config from '../../public/config'
+import moment from 'moment'
+const headers = { headers: { 'Content-Type': 'application/json' } }
+export default ({
+  getCalendarIds () {
+    return Axios.post(`${config.jsApiUrl}calendar/list_calendars`)
+  },
+  getFullCalendar (id) {
+    return Axios.post(`${config.jsApiUrl}calendar/get_calendar`, {
+      args: {
+        cal_id: id
+      }
+    })
+  },
+  addCalendar (calendarName) {
+    return Axios.post(`${config.jsApiUrl}calendar/add_calendar`, {
+      args: {
+        name: calendarName,
+        cal_id: calendarName
+      }
+    })
+  },
+  getEvent (calendarId, eventId) {
+    return Axios.post(`${config.jsApiUrl}calendar/get_event`, {
+      args: {
+        cal_id: calendarId,
+        uid: eventId
+      }
+    })
+  },
+  addEvent (event) {
+    console.log(event.startDate)
+    console.log(event.startTime)
+    console.log(moment(event.startDate + ' ' + event.startTime))
+    console.log("------------")
+    console.log(event.toDate)
+    console.log(event.endTime)
+    console.log(moment(event.toDate + ' ' + event.endTime))
+
+    return Axios.post(`${config.jsApiUrl}calendar/add_event`, {      
+      args: {
+        cal_id: event.selectedCalendarId,
+        uid: event.eventName,
+        summary: event.eventName,
+        dtstart: moment(event.startDate + ' ' + event.startTime).unix(),
+        dtend: moment(event.toDate + ' ' + event.endTime).unix()
+      }
+    })
+  }
+})
diff --git a/src/store/calendarStore.js b/src/store/calendarStore.js
new file mode 100644
index 00000000..54992b5e
--- /dev/null
+++ b/src/store/calendarStore.js
@@ -0,0 +1,67 @@
+import calendarService from '../services/calendarService'
+import moment from 'moment'
+export default ({
+  state: {
+    calendars: [],
+    events: []
+  },
+  actions: {
+    getCalendars: (context) => {
+      calendarService.getCalendarIds().then((response) => {
+        context.dispatch('getFullCalendars', response.data.calendars)
+      })
+    },
+    getFullCalendars (context, calendarIds) {
+      let calendars = []
+
+      calendarIds.forEach(calendarId => {
+        calendarService.getFullCalendar(calendarId).then((response) => {
+          calendars.push(response.data.calendar)
+        })
+      })
+      context.commit('setCalendars', calendars)
+    },
+    addCalendar (context, calendarName) {
+      calendarService.addCalendar(calendarName).then((response) => {
+        context.dispatch('getCalendars')
+      })
+    },
+    getFullEvents (context, obj) {
+      let calendarId = obj.calendarId
+      let eventIds = obj.eventIds
+      let events = []
+
+      eventIds.forEach(eventId => {
+        calendarService.getEvent(calendarId, eventId).then((response) => {
+          events.push(response.data.event)
+        })
+      })
+      context.commit('setEvents', events)
+    },
+    addEvent (context, event) {
+      calendarService.addEvent(event).then((response) => {
+        context.dispatch('getCalendars')
+      })
+    }
+  },
+  mutations: {
+    setCalendars: (state, calendars) => {
+      state.calendars = calendars
+    },
+    setEvents: (state, events) => {
+      state.events = events
+    }
+  },
+  getters: {
+    calendars: (state) => state.calendars,
+    events: (state) => state.events.map(ev=> {
+      return {
+        start: moment.unix(ev.dtstart).format("YYYY-MM-DD HH:mm"),
+        end: moment.unix(ev.dtend).format("YYYY-MM-DD HH:mm"),
+        name: ev.summary,
+        cal_id: ev.calendar_id,
+        uid: ev.uid
+      }
+    })
+  }
+})
diff --git a/src/store/index.js b/src/store/index.js
index 52cca28a..b1ee1142 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -5,6 +5,7 @@ import contactStore from './contactStore'
 import ffcStore from './ffcStore'
 import authStore from './authStore'
 import mailStore from './mailStore'
+import calendarStore from './calendarStore'
 
 Vue.use(Vuex)
 
@@ -14,6 +15,7 @@ export default new Vuex.Store({
     contactStore,
     ffcStore,
     authStore,
-    mailStore
+    mailStore,
+    calendarStore
   }
 })
diff --git a/src/views/calendar/calendar.html b/src/views/calendar/calendar.html
index 5e904546..ccd45a33 100644
--- a/src/views/calendar/calendar.html
+++ b/src/views/calendar/calendar.html
@@ -1,35 +1,42 @@
 <section class="calendar">
-  <v-col>
+  <v-row>
+      <v-flex md2>
+          <!-- <email-navigation @click:create="showCreateMail = true; showBodyOfCreateMail = true" @selectMailBox="selectMailBox"/> -->
+          <calendar-navigation @setSelectedCalendar="setSelectedCalendar"/>
+        </v-flex>
+      <v-flex>
     <v-card>
       <v-card-text>
         <v-calendar ref="calendar" :now="today" :value="today" :events="events" color="primary" type="week">
           <!-- the events at the top (all-day) -->
-          <template v-slot:day-header="{ date }">
+          <template v-if="events.lenght" v-slot:day-header="{ date }">
             <template v-for="event in eventsMap[date]">
               <!-- all day events don't have time -->
-              <div v-if="!event.time" :key="event.title" class="my-event" @click="open(event)" v-html="event.title">
+              <div v-if="!event.time" :key="event.title" class="my-event" @click="open(event)">
+                {{event.summary}}
               </div>
             </template>
           </template>
           <!-- the events at the bottom (timed) -->
-          <template v-slot:day-body="{ date, timeToY, minutesToPixels }">
+          <template v-if="events.lenght" v-slot:day-body="{ date, timeToY, minutesToPixels }">
             <template v-for="event in eventsMap[date]">
               <!-- timed events -->
               <div v-if="event.time" :key="event.title"
                 :style="{ top: timeToY(event.time) + 'px', height: minutesToPixels(event.duration) + 'px' }"
-                class="my-event with-time" @click="open(event)" v-html="event.title"></div>
+                class="my-event with-time" @click="open(event)">{{event.summary}}</div>
             </template>
           </template>
         </v-calendar>
       </v-card-text>
     </v-card>
-  </v-col>
+  </v-flex>
+  </v-row>
   <v-dialog v-model="addEventDialog" max-width="900px" @click:outside="clearAndClose">
       <v-card>
-        <full-event :key="Math.random()" editable @update="clearAndClose" @cancel="clearAndClose"/>
+        <full-event :selectedCalendarId="selectedCalendarId" :calendars="calendars" editable @update="clearAndClose" @cancel="clearAndClose"/>
       </v-card>
     </v-dialog>
-    <v-btn fixed app bottom right fab dark color="secondary" @click="addEventDialog = true" style="z-index: 99">
+    <v-btn v-if="(calendars.length > 0)" fixed app bottom right fab dark color="secondary" @click="addEventDialog = true" style="z-index: 99">
       <v-icon>fas fa-plus</v-icon>
     </v-btn>
 </section>
\ No newline at end of file
diff --git a/src/views/calendar/calendar.js b/src/views/calendar/calendar.js
index 76d4dfe1..38e816ce 100644
--- a/src/views/calendar/calendar.js
+++ b/src/views/calendar/calendar.js
@@ -1,42 +1,45 @@
 import fullEvent from '../../components/fullevent'
-
+import calendarNavigation from '../../components/calendarnavigation'
+import { mapGetters, mapActions } from 'vuex'
 export default {
   name: 'calendar',
-  components: { fullEvent },
+  components: { fullEvent, calendarNavigation },
   props: [],
   data () {
     return {
-      today: '2019-01-08',
+      today: '2019-10-16',
       openEvent: {},
       addEventDialog: false,
-      events: [
-        {
-          name: 'Weekly Meeting',
-          start: '2019-01-07 09:00',
-          end: '2019-01-07 10:00'
-        },
-        {
-          name: 'Thomas\' Birthday',
-          start: '2019-01-10'
-        },
-        {
-          name: 'Mash Potatoes',
-          start: '2019-01-09 12:30',
-          end: '2019-01-09 15:30'
-        }
-      ]
+      selectedCalendarId: ''
     }
   },
   computed: {
-
+    ...mapGetters([
+      'calendars',
+      'events'
+    ])
   },
   mounted () {
     this.$refs.calendar.scrollToTime('08:00')
+    this.getCalendars()
   },
   methods: {
+    ...mapActions([
+      'getCalendars',
+      'setEvents',
+      'getFullEvents'
+    ]),
     clearAndClose () {
       this.newEvent = {}
       this.addEventDialog = false
+    },
+    setSelectedCalendar (calendarId) {
+      this.selectedCalendarId = calendarId
+      let eventIds = this.calendars.find(x => x.id === calendarId).events
+      this.getFullEvents({
+        calendarId: this.selectedCalendarId,
+        eventIds: eventIds
+      })
     }
   }
 }

From 3f3fa05a5c9a79099ef91628312243ab63276cfb Mon Sep 17 00:00:00 2001
From: tobiaschielens <tobias.chielens@gmail.com>
Date: Thu, 17 Oct 2019 13:12:59 +0200
Subject: [PATCH 3/3] add event works

---
 src/components/fullevent/fullevent.js | 1 +
 src/views/calendar/calendar.html      | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/fullevent/fullevent.js b/src/components/fullevent/fullevent.js
index 93b45c50..919d4073 100644
--- a/src/components/fullevent/fullevent.js
+++ b/src/components/fullevent/fullevent.js
@@ -10,6 +10,7 @@ export default {
     return {
       edit: true,
       currentEvent: {
+        selectedCalendarId: this.selectedCalendarId
       }
     }
   },
diff --git a/src/views/calendar/calendar.html b/src/views/calendar/calendar.html
index ccd45a33..96f6a31a 100644
--- a/src/views/calendar/calendar.html
+++ b/src/views/calendar/calendar.html
@@ -33,7 +33,7 @@
   </v-row>
   <v-dialog v-model="addEventDialog" max-width="900px" @click:outside="clearAndClose">
       <v-card>
-        <full-event :selectedCalendarId="selectedCalendarId" :calendars="calendars" editable @update="clearAndClose" @cancel="clearAndClose"/>
+        <full-event :selectedCalendarId="selectedCalendarId" :calendars="calendars" editable @update="clearAndClose" @cancel="clearAndClose" :key="Math.random()"/>
       </v-card>
     </v-dialog>
     <v-btn v-if="(calendars.length > 0)" fixed app bottom right fab dark color="secondary" @click="addEventDialog = true" style="z-index: 99">