Made the slots selectable. Slots in the past are faded. Part of #9

DoESLiverpool · Feb 2, 2021 · 6849f46 · 6849f46
1 parent 8fd9c68
commit 6849f46
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 17 deletions.
diff --git a/website/static/css/main.css b/website/static/css/main.css
@@ -1,4 +1,6 @@
 
+/* I think all the items below are a copy of the FullCalendar.io CSS - AMc */
+
 /* classes attached to <body> */
 
 .fc-not-allowed,
@@ -1427,3 +1429,15 @@ A VERTICAL event
     color: inherit; /* natural color for navlinks */
   }
 
+
+/* Optimism-specific customisations */
+
+.chosen-booking {
+  background-color: #87d836;
+  border-color: #87d836;
+}
+
+.fc-event-past {
+  background-color: #9dc7f2;
+}
+
diff --git a/website/templates/select-a-time.html b/website/templates/select-a-time.html
@@ -5,11 +5,33 @@
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <script src='/scripts/main.js'></script>
     <script>
+      // Keep tabs on the slot that's been chosen
+      var chosenSlot = undefined;
 
       document.addEventListener('DOMContentLoaded', function() {
         var calendarEl = document.getElementById('calendar');
         var calendar = new FullCalendar.Calendar(calendarEl, {
           initialView: 'timeGridWeek',
+          eventClick: function(info) {
+            console.log('Event: ' + info.event.title);
+            console.log('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
+            console.log('View: ' + info.view.type);
+
+            if (info.el.classList.contains('fc-event-past') == false) {
+              // It's a slot we can select
+              // FIXME We'll need to allow multiple slots for room bookings...
+              // FIXME What happens if we choose a slot, then move forwards a week and come back?
+              // Unselect any existing slot
+              if (chosenSlot) {
+                chosenSlot.el.classList.remove('chosen-booking');
+              }
+              // Select the new slot
+              chosenSlot = info;
+              chosenSlot.el.classList.add('chosen-booking');
+            } else {
+              console.log("Tried to select a slot in the past!");
+            }
+          },
           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) {
@@ -62,25 +84,12 @@ <h2>
         <div id="calendar">
         </div>
 
-        <div class="calendar">
-            {% for d in calendar.dates %}
-                {% for r in d.resources %}
-                    <p>{{ d.date }} Resource name: {{r.resourceName}}</p>
-                    {% for s in r.slots %}
-                      <p>{{s.starts}} - {{s.ends}} {{s.status}}</p>
-                    {% endfor %}
-                {% endfor %}
-            {% endfor %}
+        <div class="container">
+            <a class="btn btn-primary" href="/your-details" role="button">
+                Provide your details &raquo;
+            </a>
         </div>
 
-        <div class="mock-block">
-            <h3>UI to display and select available slots for the resource to go here</h3>
-        </div>
-
-        <a class="btn btn-primary" href="/your-details" role="button">
-            Provide your details &raquo;
-        </a>
-
     </div> <!-- /container -->
 
 </main>