From f0927638c960425025df98458b9b98fe6d5c0845 Mon Sep 17 00:00:00 2001
From: Adam Goldsmith <adam@adamgoldsmith.name>
Date: Wed, 31 Mar 2021 15:01:51 -0400
Subject: [PATCH] Add periodic refresh of calendar data

---
 src/App.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index db363d9..f589754 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,7 +6,7 @@
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
 import equicolor from 'equicolor';
 
-import FullCalendar from '@fullcalendar/vue';
+import FullCalendar, { FullCalendarComponent } from '@fullcalendar/vue';
 import { CalendarProps } from '@fullcalendar/vue/options';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import googleCalendarPlugin from '@fullcalendar/google-calendar';
@@ -15,6 +15,7 @@ import '@fullcalendar/core/main.css';
 import '@fullcalendar/daygrid/main.css';
 import '@fullcalendar/timegrid/main.css';
 import { EventInput } from '@fullcalendar/core';
+import { Calendar } from '@fullcalendar/core';
 
 const calendars: { [key: string]: string } = {
   computer_lab: '6mmjp85e4732ru6skf1dda54ls@group.calendar.google.com',
@@ -41,10 +42,10 @@ export default class App extends Vue {
     height: 'auto',
     minTime: '8:00',
     googleCalendarApiKey: 'AIzaSyAQ46fgaqbekkmJqaKR0NCXntaJA6H8JoQ',
-    eventSources: Object.entries(calendars).map(([name, id]) => {
+    eventSources: Object.entries(calendars).map(([name, id], idx) => {
       return {
         googleCalendarId: id,
-        color: colors.pop(),
+        color: colors[idx],
         eventDataTransform: this.eventDataTransform,
       };
     }),
@@ -60,6 +61,19 @@ export default class App extends Vue {
     },
   };
 
+  created() {
+    // refresh data every five minutes
+    window.setInterval(this.refresh, 5 * 60 * 1000);
+  }
+
+  refresh() {
+    const calendarComponent = this.$refs.calendar as FullCalendarComponent;
+    const calendar = calendarComponent.getApi() as Calendar;
+    calendar.getEventSources().map((es) => {
+      es.refetch();
+    });
+  }
+
   eventDataTransform(eventData: EventInput): EventInput {
     const match = eventData.title.match(/([^\/]*) \/ ([^-]*) - (.*)/);
     if (match !== null) {