Merge pull request #59 from kapillamba4/fix-56

Allow anonymous users to set filters

Author: championswimmer

public_html/index.html

@@ -36,6 +36,12 @@
     </div>
 
     <div class="row no-gutters">
+        <div id="side-menu" class="col-sm-2">
+            <hr style="margin: 0; border-top: solid 1px #999">
+            <div style="padding: 15px; color: #eee; font-size: 16px;" id="sidebar">
+                <div id="filters" style="color: white; display: none"></div>
+            </div>
+        </div>
         <div id="calendarContainer" class="col-sm-10 ml-auto mr-auto wrapper"
              style="padding: 10px; background-color: #F4F6F9">
             <div id="colors" class="row text-center" style="height: 20px;width: 100%">

public_html/index.js

@@ -29,6 +29,10 @@ $(document).ready(function () {
   }
 
   var api = '/api/v1';
+  var eventsData;
+
+
+  $('#filters').show();
 
   function getCentres() {
 
@@ -42,9 +46,11 @@ $(document).ready(function () {
           `);
         });
         showBatchesAndRooms(centres[0]);
+        getFilters(centres[0].id);
 
         $centres.change(() => {
           getCentre(+($centres.val()));
+          getFilters(+($centres.val()));
         })
       } else {
         $.toast({
@@ -107,6 +113,125 @@ $(document).ready(function () {
     });
   }
 
+  function getFilters(centreId) {
+
+    const filters = $('#filters');
+    filters.empty();
+
+    let teachersString = "";
+    let batchesString = "";
+    let roomsString = "";
+
+    $.get(`${api}/teachers`, function (teachersData) {
+      if (teachersData.success && teachersData.data.length > 1) {
+        teachersString = `<div class="filter-column-divs">
+                    <div class="filter-column-divs-heading">Teachers</div>
+                    <div class="filter-column-divs-content">`;
+        for (let i = 0; i < teachersData.data.length; i++) {
+          teachersString += `
+                        <label class="label-style">
+                            <input class="checkbox-style" name="teachers" value="` + teachersData.data[i].id + `" type="checkbox">&nbsp;&nbsp;` + teachersData.data[i].name + `<br/>
+                        </label>
+                        <br>
+                    `;
+        }
+        teachersString += `</div></div>`;
+        filters.append(teachersString);
+
+      }
+
+      $.get(`${api}/centres/${centreId}/batches/active`, function (batchesData) {
+        if (batchesData.success && batchesData.data.length > 1) {
+          batchesString = `<div class="filter-column-divs">
+                    <div class="filter-column-divs-heading">Batches</div>
+                    <div class="filter-column-divs-content">`;
+          for (let i = 0; i < batchesData.data.length; i++) {
+            batchesString += `
+                        <label class="label-style">
+                            <input class="checkbox-style" name="batches" value="` + batchesData.data[i].id + `" type="checkbox">&nbsp;&nbsp;` + batchesData.data[i].name + `<br/>
+                        </label>
+                        <br>
+                    `;
+          }
+          batchesString += `</div></div>`;
+          filters.append(batchesString);
+
+        }
+
+        $.get(`${api}/centres/${centreId}/rooms`, function (roomsData) {
+          if (roomsData.success && roomsData.data.length > 1) {
+            roomsString = `<div class="filter-column-divs">
+                    <div class="filter-column-divs-heading">Rooms</div>
+                    <div class="filter-column-divs-content">`;
+            for (let i = 0; i < roomsData.data.length; i++) {
+              roomsString += `
+                        <label class="label-style">
+                            <input class="checkbox-style" name="rooms" value="` + roomsData.data[i].id + `" type="checkbox">&nbsp;&nbsp;` + roomsData.data[i].name + `<br/>
+                        </label>
+                        <br>
+                    `;
+            }
+            roomsString += `</div></div>`;
+            filters.append(roomsString);
+
+          }
+          $('input[type="checkbox"]').off('change');
+          for (let i = 0; i < batchesData.data.length; i++) {
+            if (batchesData.data[i].name === getBatch) {
+              $(`input[type="checkbox"][value="${batchesData.data[i].id}"]`).prop('checked', true)
+            }
+          }
+
+          $('input[type="checkbox"]').change(function () {
+
+            let teachersArray = [];
+            let batchesArray = [];
+            let roomsArray = [];
+            let count = 0;
+
+            const teachersFilters = $('input[name="teachers"]');
+            const batchesFilters = $('input[name="batches"]');
+            const roomsFilters = $('input[name="rooms"]');
+
+            for (let i = 0; i < teachersFilters.length; i++) {
+              if (teachersFilters[i].checked) {
+                teachersArray.push(+teachersFilters[i].value);
+                count++;
+              }
+            }
+
+            for (let i = 0; i < batchesFilters.length; i++) {
+              if (batchesFilters[i].checked) {
+                batchesArray.push(+batchesFilters[i].value);
+                count++;
+              }
+            }
+
+            for (let i = 0; i < roomsFilters.length; i++) {
+              if (roomsFilters[i].checked) {
+                roomsArray.push(+roomsFilters[i].value);
+                count++;
+              }
+            }
+
+            let filteredevents = eventsData.filter(function (event) {
+              if ((teachersArray.length === 0 || teachersArray.includes(+event.teacherId)) &&
+                (roomsArray.length === 0 || roomsArray.includes(+event.resourceId)) &&
+                (batchesArray.length === 0 || batchesArray.includes(event.batchId)))
+                return true;
+              else
+                return false;
+            })
+
+            $('#calendar').fullCalendar('removeEventSources');
+            $('#calendar').fullCalendar('addEventSource', filteredevents);
+
+          })
+        });
+      });
+    });
+  }
+
   function showBatchesAndRooms(centre) {
 
     const events = [];
@@ -161,7 +286,6 @@ $(document).ready(function () {
             let batches = data.data;
 
             batches.forEach(function (batch) {
-
               let lectures = batch.lectures;
               lectures.forEach((lecture) => {
                 if (lecture.startTime && lecture.endTime) {
@@ -173,7 +297,9 @@ $(document).ready(function () {
                     stick: true,
                     resourceId: lecture.roomId,
                     batchCapacity: batch.size,
+                    batchId: batch.id,
                     batchName: batch.name,
+                    teacherId: batch.teacher.id,
                     teacherName: batch.teacher.name,
                     courseName: batch.course.name
                   });
@@ -182,6 +308,7 @@ $(document).ready(function () {
 
             });
 
+            eventsData = events.slice();
             $('#calendar').fullCalendar({
               // put your options and callbacks here
               schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
@@ -193,7 +320,7 @@ $(document).ready(function () {
               fixedWeekCount: false,
               minTime: "07:00:00",
               maxTime: "22:00:00",
-              height: 'auto',
+              height: $('#calendarContainer').height() - 60,
               events: events,
               dayClick: function (date, jsEvent, view, resourceObj) {
                 $('#calendar').fullCalendar('changeView', 'agendaOneDay', date);
@@ -245,7 +372,7 @@ $(document).ready(function () {
                               Course: ${event.courseName}<br/>
                               Batch: ${event.batchName}<br/>
                               Teacher: ${event.teacherName}<br/>
-                              Batch Capacity: ${event.batchCapacity}<br/>                             
+                              Batch Capacity: ${event.batchCapacity}<br/>
                               Room: ${resources[index].title}<br/>
                     `
                   }).tooltip('show');

public_html/style.css

@@ -1,8 +1,6 @@
 
 body {
     background-color: #F4F6F9;
-    /*height: 100vh;*/
-    /*overflow-y: hidden;*/
 }
 
 .container-fluid {
@@ -11,18 +9,16 @@ body {
 }
 
 #side-menu {
-    /*height: 100vh;*/
-    /*position: fixed;*/
+    height: 100vh;
     background-color: #343a40;
+    padding: 0;
+    overflow-x: hidden;
 }
 
 .header-bar {
     background-color: #343a40;
     z-index: 10;
     height: auto;
-    /*position: fixed;*/
-    /*top: 0px;*/
-    /*width: 100%;*/
     padding-top: 10px;
     padding-bottom: 10px;
 }
@@ -48,9 +44,21 @@ ul {
     padding-left: 20px;
 }
 
-/*#calendar{*/
-/*margin-top: 20px;*/
-/*}*/
+.filter-column-divs{
+    color: #ddd;
+}
+
+.filter-column-divs-heading{
+    padding-bottom: 15px;
+}
+
+.filter-column-divs-content{
+    padding-left: 10px;
+}
+
+.label-style {
+    color: #aaa;
+}
 
 #sidebar .list-group-item {
     border-radius: 0;
@@ -167,21 +175,15 @@ ul {
 }
 
 .titlerow {
-    /*background-color: white;*/
     height: auto;
     padding: 30px;
     padding-top: 0;
     padding-bottom: 0;
-    /*box-shadow: #DDD 0 0 8px 1px ;*/
-    /*border-radius: .125rem;*/
 }
 
 .minicourses {
-    /*background-color: white;*/
     height: auto;
     padding: 20px;
-    /*box-shadow: #DDD 0 0 8px 1px ;*/
-    /*border-radius: .125rem;*/
 }
 
 .minicourses-list {
@@ -199,13 +201,11 @@ ul {
 
 .minicourses-list-li-div {
     width: 100%;
-    /*padding-top: 10px;*/
     height: auto;
     border-bottom: solid 2px #EEE;
     background-color: white;
     box-shadow: #DDD 0 0 8px 1px;
     border-radius: .125rem;
-    /*cursor: pointer;*/
 }
 
 #minicourses-list > li {
@@ -222,4 +222,4 @@ a {
 
 .fc-content {
     color: white;
-}
+}