feat: implement initial prototype

package.json

@@ -5,18 +5,20 @@
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
-    "start": "sirv public --no-clear"
+    "start": "sirv public --cors --no-clear"
   },
   "devDependencies": {
     "@fullcalendar/daygrid": "^5.10.1",
     "@fullcalendar/timegrid": "^5.10.1",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
+    "dav": "^1.8.0",
     "postcss": "^8.3.11",
     "prettier": "^2.4.1",
     "prettier-plugin-svelte": "^2.5.0",
     "rollup": "^2.3.4",
     "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-dev": "^2.0.3",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-postcss": "^4.0.1",
     "rollup-plugin-svelte": "^7.0.0",
@@ -25,6 +27,8 @@
     "svelte-fullcalendar": "^1.1.1"
   },
   "dependencies": {
+    "@nextcloud/cdav-library": "^1.0.0",
+    "ical.js": "^1.5.0",
     "sirv-cli": "^1.0.0"
   }
 }

rollup.config.js

@@ -5,9 +5,11 @@ import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
 import css from 'rollup-plugin-css-only';
 import postcss from 'rollup-plugin-postcss';
+import dev from 'rollup-plugin-dev';
 
 const production = !process.env.ROLLUP_WATCH;
 
+/*
 function serve() {
 	let server;
 
@@ -27,7 +29,7 @@ function serve() {
 			process.on('exit', toExit);
 		}
 	};
-}
+}*/
 
 export default {
 	input: 'src/main.js',
@@ -64,7 +66,13 @@ export default {
 
 		// In dev mode, call `npm run start` once
 		// the bundle has been generated
-		!production && serve(),
+		!production && dev({
+			dirs: ['public'],
+			proxy: [
+				{ from: '/cal', to: 'https://nuage.beta.rz.ens.wtf/remote.php/dav/public-calendars/' }
+			],
+			port: 5000
+		}),
 
 		// Watch the `public` directory and refresh the
 		// browser on changes when not in production

shell.nix

@@ -1,5 +1,5 @@
 { pkgs ? import ./nix {} }:
 pkgs.npmlock2nix.shell {
   src = ./.;
-  nodejs = pkgs.nodejs-12_x;
+  nodejs = pkgs.nodejs-14_x;
 }

src/App.svelte

@@ -1,16 +1,24 @@
 <script>
+  import { onMount } from 'svelte';
   import FullCalendar from 'svelte-fullcalendar';
   import timeGridPlugin from '@fullcalendar/timegrid';
   import frLocale from '@fullcalendar/core/locales/fr';
-
-  export let events;
+  import { refreshEvents } from './calendar';
 
   let options = {
     initialView: 'timeGridWeek',
     plugins: [timeGridPlugin],
     locale: frLocale,
-    events
+    events: []
   };
+
+  onMount(async () => {
+    const evts = await refreshEvents();
+    options.events = evts[0];
+    options = { ...options };
+  });
+
+  $: console.log(options);
 </script>
 
 <div style="height:100vh">

src/calendar.js

@@ -0,0 +1,52 @@
+import ICAL from 'ical.js';
+
+const calendarIds = [
+  "5WrcagPPARQ3BD87"
+];
+
+function mkCalendarUrl(id) {
+  return `/cal/${id}/?export&accept=jcal`;
+}
+
+function fetchCalendar(id) {
+  return fetch(mkCalendarUrl(id), { credentials: 'omit' }).then(resp => resp.json()).catch(err => console.error(err));
+}
+
+class Calendar {
+  constructor (calendar) {
+    this.calName = calendar[1][3][3];
+    this.events = calendar[2].filter(item => item[0] === 'vevent').map(item => this._parse_vevent(item[1]));
+  }
+
+  _parse_vevent(vevent) {
+    const event = {};
+    vevent.forEach(elt => {
+      event[elt[0]] = elt[3];
+    });
+    return event;
+  }
+}
+
+function mkEventsFromCalendar(id) {
+  return fetchCalendar(id).then(calendar => {
+    if (calendar[0] !== 'vcalendar') return;
+    const cal = new Calendar(calendar)
+    return cal.events.map(evt => ({ title: evt.summary, start: new Date(evt.dtstart), end: new Date(evt.dtend) }))
+  });
+}
+
+export function mkEvent(title, start, duration, ...rest) {
+  start = new Date(start)
+  const end = new Date(start)
+  end.setMinutes(start.getMinutes() + duration)
+  return {
+    title,
+    start,
+    end,
+    ...rest
+  }
+}
+
+export function refreshEvents() {
+  return Promise.all(calendarIds.map(mkEventsFromCalendar))
+}

src/main.js

@@ -1,24 +1,7 @@
 import App from './App.svelte';
 
-function mkEvent(title, start, duration, ...rest) {
-  start = new Date(start)
-  const end = new Date(start)
-  end.setMinutes(start.getMinutes() + duration)
-  return {
-    title,
-    start,
-    end,
-    ...rest
-  }
-}
-
 const app = new App({
 	target: document.body,
-	props: {
-    events: [
-      mkEvent('Me donner À MANGER', '2021-11-16T12:00', 30),
-    ]
-	}
 });
 
 export default app;