Calendar listing + add event

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',

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>

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)
+    }
+  }
+}

src/components/calendarnavigation/calendarnavigation.scss

@@ -0,0 +1,3 @@
+.emailnavigation {
+
+}

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!');
+  })
+})

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>

src/components/fullevent/fullevent.html

@@ -0,0 +1,130 @@
+<section class="fullevent">
+  <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="saveEvent">
+            <v-icon small>fas fa-save</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>
+                <v-list-item-icon>
+                  <v-icon>fas fa-trash</v-icon>
+                </v-list-item-icon>
+                <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">
+        <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">
+          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
+        </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 :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>
+              </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-col>
+    </v-col>
+  </v-form>
+</section>

src/components/fullevent/fullevent.js

@@ -0,0 +1,39 @@
+import { mapActions } from 'vuex'
+import config from '../../../public/config'
+import cloneDeep from 'lodash.clonedeep'
+
+export default {
+  name: 'fullevent',
+  components: {},
+  props: [ 'calendars', 'selectedCalendarId' ],
+  data () {
+    return {
+      edit: true,
+      currentEvent: {
+        selectedCalendarId: this.selectedCalendarId
+      }
+    }
+  },
+  computed: {
+  },
+  mounted () {
+  },
+  methods: {
+    ...mapActions([
+      'addEvent'
+    ]),
+    saveEvent () {
+      this.addEvent(this.currentEvent)
+      this.clearAndClose()
+    },
+    clearAndClose () {
+      this.currentEvent = {}
+      this.$emit('cancel')
+    },
+    cancel () {
+      this.$emit('cancel')
+    }
+  },
+  watch: {
+  }
+}

src/components/fullevent/fullevent.scss

@@ -0,0 +1,4 @@
+.fullcontact {
+    height: 100%;
+    width: 100%;
+}

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!');
+  })
+})

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>

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()
+      }
+    })
+  }
+})