Now pulls the available slots to populate the calendar via AJAX from …

…the API server. Part of #9
DoESLiverpool · Jan 5, 2021 · 8fd9c68 · 8fd9c68
1 parent b864a4d
commit 8fd9c68
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 15 deletions.
diff --git a/api/app.js b/api/app.js
@@ -1,4 +1,5 @@
 const express = require('express');
+const cors = require('cors');
 const app = express();
 
 require('dotenv').config();
@@ -9,6 +10,7 @@ const bookingRoutes = require('./routes/bookings');
 const calendarRoutes = require('./routes/calendar');
 const slotRoutes = require('./routes/slots');
 
+app.use(cors());
 app.use(express.json());
 app.use('/api/resources', resourceRoutes);
 app.use('/api/bookings', bookingRoutes);

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
   "homepage": "https://github.com/DoESLiverpool/optimism#readme",
   "dependencies": {
     "axios": "^0.20.0",
+    "cors": "^2.8.5",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "fullcalendar": "^5.3.2",

diff --git a/website/routes/select-a-time.js b/website/routes/select-a-time.js
@@ -22,7 +22,7 @@ router.get('/select-a-time', function (req, res) {
 
     const resourceUrl = `${apiUrl}/resources/${resourceId}`;
     const calendarUrl = `${apiUrl}/calendar/${fromDate.format('YYYY-MM-DD')}/${toDate.format('YYYY-MM-DD')}/${resourceId}`;
-    const templateVariables = {};
+    const templateVariables = { apiUrl: settings.apiUrl };
 
     axios.get(resourceUrl)
         .then(function (response) {

diff --git a/website/templates/select-a-time.html b/website/templates/select-a-time.html
@@ -2,27 +2,34 @@
 
 {% block header %}
     <link href='/css/main.css' rel='stylesheet' />
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <script src='/scripts/main.js'></script>
     <script>
 
       document.addEventListener('DOMContentLoaded', function() {
         var calendarEl = document.getElementById('calendar');
         var calendar = new FullCalendar.Calendar(calendarEl, {
           initialView: 'timeGridWeek',
-          events: [
-            {% for d in calendar.dates %}
-                {% for r in d.resources %}
-                    {% for s in r.slots %}
-                      {
-                        title: '{{r.resourceName}} - {{s.status}}',
-                        start: '{{s.starts}}',
-                        end: '{{s.ends}}',
-                        allDay: false
-                      },
-                    {% endfor %}
-                {% endfor %}
-            {% endfor %}
-          ]
+          events:  function(info, successCallback, failureCallback) {
+              axios.get("{{apiUrl}}/calendar/"+info.startStr.substr(0,info.startStr.indexOf("T"))+"/"+info.endStr.substr(0,info.endStr.indexOf("T"))+"/{{resource.id}}")
+                  .then(function(details) {
+                      var events = [];
+                      details.data.dates.forEach(function(d) {
+                          d.resources.forEach(function(r) {
+                              r.slots.forEach(function(s) {
+                                  events.push({
+                                      title: r.resourceName+" - "+s.status,
+                                      start: s.starts,
+                                      end: s.ends,
+                                      allDay: false
+                                  });
+                              });
+                          });
+                      });
+                      successCallback(events);
+                  })
+                  .catch(failureCallback);
+          }
         });
         calendar.render();
       });