Add basic components, fc, router & store

Signed-off-by: Thomas Citharel <[email protected]>

css/app/calendar.scss

@@ -58,3 +58,11 @@
 #fullcalendar td.fc-day.fc-sun {
 	background-color: var(--color-background-darker);
 }
+
+@import 'calendarlist.scss';
+@import 'confirmation.scss';
+@import 'datepicker.scss';
+@import 'eventdialog.scss';
+@import 'globals.scss';
+@import 'print.scss';
+@import 'settings.scss';

src/App.vue

@@ -21,11 +21,83 @@
  -->
 
 <template>
-	<router-view />
+	<div class="app">
+		<app-navigation menu="menu">
+			<settings-section v-if="!loading" slot="settings-content" />
+		</app-navigation>
+		<router-view />
+	</div>
 </template>
 
 <script>
+import { AppNavigation } from 'nextcloud-vue'
+import client from './services/cdav.js'
+
 export default {
-	name: 'App'
+	name: 'App',
+	components: {
+		AppNavigation,
+	},
+	data() {
+		return {
+		}
+	},
+	computed: {
+		// store getters
+		calendars() {
+			return this.$store.getters.getCalendars
+		},
+	},
+	beforeMount() {
+		// get calendars then get events
+		client.connect({ enableCalDAV: true }).then(() => {
+			console.debug('Connected to dav!', client)
+			this.$store.dispatch('getCalendars')
+				.then((calendars) => {
+
+					// No calendars? Create a new one!
+					if (calendars.length === 0) {
+						this.$store.dispatch('appendCalendar', { displayName: t('calendars', 'Calendars') })
+							.then(() => {
+								this.fetchEvents()
+							})
+					// else, let's get those events!
+					} else {
+						this.fetchEvents()
+					}
+				})
+				// check local storage for orderKey
+			// if (localStorage.getItem('orderKey')) {
+			// 	// run setOrder mutation with local storage key
+			// 	this.$store.commit('setOrder', localStorage.getItem('orderKey'))
+			// }
+		})
+	},
+	methods: {
+		menu() {
+			return {
+				menu: {
+					id: 'navigation',
+					items: [
+
+					]
+				}
+			}
+		},
+		/**
+		 * Fetch the events of each calendar
+		 */
+		fetchEvents() {
+			// wait for all calendars to have fetch their events
+			Promise.all(this.calendars.map(calendar => this.$store.dispatch('getEventsFromCalendar', { calendar })))
+				.then(results => {
+					this.loading = false
+					// eslint-disable-next-line
+					console.log(results)
+				})
+				// no need for a catch, the action does not throw
+				// and the error is handled there
+		},
+	}
 }
 </script>

src/components/Edit.vue

@@ -0,0 +1,20 @@
+<template>
+	<div class="editor">
+		<!-- title -->
+		<!-- timepicker -->
+		<!-- details -->
+		<!-- invitees-list -->
+		<!-- invitees-list-new -->
+		<!-- invitees-list-item -->
+		<!-- alarm-list -->
+		<!-- alarm-list-new -->
+		<!-- alarm-list-item -->
+		<!-- repeat -->
+		<!-- eventual other apps modules -->
+	</div>
+</template>
+<script>
+export default {
+	name: 'Edit',
+}
+</script>

src/components/Sidebar.vue

@@ -0,0 +1,23 @@
+<template>
+	<div class="sidebar">
+		<!-- Datepicker -->
+		<!-- View buttons -->
+		<!-- Today button -->
+		<!-- Calendar list -->
+		<!-- calendar-list-new -->
+		<!-- calendar-list-item -->
+		<!-- colorpicker -->
+		<!-- subscription-list -->
+		<!-- subscription-list-new -->
+		<!-- subscription-list-item -->
+		<!-- colorpicker -->
+		<!-- Settings -->
+		<!-- import-progressbar (similar to contacts) -->
+
+	</div>
+</template>
+<script>
+export default {
+	name: 'Sidebar',
+}
+</script>

src/components/View.vue

@@ -0,0 +1,35 @@
+<template>
+	<div class="view">
+		<!-- Full calendar -->
+		<div ref="fullcalendar" class="fullcalendar-wrapper" />
+		<!-- Edit modal -->
+		<router-view />
+	</div>
+</template>
+<script>
+import { Calendar } from 'fullcalendar'
+import '../../node_modules/fullcalendar/dist/fullcalendar.css'
+
+export default {
+	name: 'View',
+	// props: {
+	// 	view: {
+	// 		type: String,
+	// 		required: true,
+	// 	},
+	// 	firstday: {
+	// 		type: String,
+	// 		required: true,
+	// 	}
+	// },
+	data() {
+		return {
+			calendar: null
+		}
+	},
+	mounted() {
+		this.calendar = new Calendar(this.$refs.fullcalendar)
+		this.calendar.render()
+	},
+}
+</script>

src/main.js

@@ -23,8 +23,8 @@ import '@babel/polyfill'
 
 import Vue from 'vue'
 import App from './App'
-// import router from './router'
-// import store from './store'
+import router from './router'
+import store from './store'
 // import { sync } from 'vuex-router-sync'
 
 // CSP config for webpack dynamic chunk loading
@@ -47,7 +47,7 @@ Vue.prototype.OCA = OCA
 
 export default new Vue({
 	el: '#content',
-	// router,
-	// store,
+	router,
+	store,
 	render: h => h(App)
 })

src/models/event.js

@@ -0,0 +1,2 @@
+export default class {
+}

src/router.js

@@ -0,0 +1,51 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import View from './components/View'
+import Edit from './components/Edit'
+
+Vue.use(Router)
+
+const router = new Router({
+	mode: 'history',
+	base: OC.generateUrl('/apps/calendar'),
+	routes: [
+		{
+			path: '/',
+			name: 'Root',
+			component: View,
+			// redirect: {
+			// 	name: 'View',
+			// 	params: {
+			// 		view: 'now',
+			// 		firstday: 'now'
+			// 	},
+			// }
+		},
+		{
+			path: '/{view}/{firstday}',
+			props: true,
+			children: [
+				{
+					path: '/',
+					name: 'View',
+					component: View,
+					props: true
+				},
+				{
+					path: '/edit/{mode}/{object}/{recurrence}',
+					name: 'Edit',
+					component: Edit,
+					props: true
+				},
+				{
+					path: '/new/{mode}/{recurrence}',
+					name: 'Edit',
+					component: Edit,
+					props: true,
+				},
+			],
+		},
+	],
+})
+
+export default router

src/services/cdav.js

@@ -0,0 +1,47 @@
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <[email protected]>
+ *
+ * @author John Molakvoæ <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import DavClient from 'cdav-library'
+
+function xhrProvider() {
+	var headers = {
+		'X-Requested-With': 'XMLHttpRequest',
+		'requesttoken': OC.requestToken
+	}
+	var xhr = new XMLHttpRequest()
+	var oldOpen = xhr.open
+
+	// override open() method to add headers
+	xhr.open = function() {
+		var result = oldOpen.apply(this, arguments)
+		for (let name in headers) {
+			xhr.setRequestHeader(name, headers[name])
+		}
+		return result
+	}
+	OC.registerXHRForErrorProcessing(xhr)
+	return xhr
+}
+
+export default new DavClient({
+	rootUrl: OC.linkToRemote('dav')
+}, xhrProvider)

src/services/parseIcs.js

@@ -0,0 +1,3 @@
+export default function(ics, calendar) {
+
+}