events.html: Fetch and Display events from webservices

The commits adds an events directive that fetches the events from coala Webservices and displays them on the website in the card format. Instead of dissplaying all events, only the ongoing events, events occured in last 3 months and the events which are about to occur in next 3 months will be displayed to avoid a long list of cards. Closes #560
coala · Aug 22, 2019 · 42e6778 · 42e6778
1 parent 8e239d6
commit 42e6778
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -38,13 +38,15 @@
         <div class="row">
           <div class="col s12">
             <ul class="tabs uppercase">
-              <li class="tab col m3"><a ng-click="tc.setTab('/projects')" onmousedown="keyPressed(event, '#/projects')" ng-class="{active:tc.isSet('/projects')}">Projects</a>
+              <li class="tab col s2"><a ng-click="tc.setTab('/projects')" onmousedown="keyPressed(event, '#/projects')" ng-class="{active:tc.isSet('/projects')}">Projects</a>
               </li>
-              <li class="tab col m3"><a ng-click="tc.setTab('/mentors')" onmousedown="keyPressed(event, '#/mentors')" ng-class="{active:tc.isSet('/mentors')}">Mentors</a>
+              <li class="tab col s2"><a ng-click="tc.setTab('/mentors')" onmousedown="keyPressed(event, '#/mentors')" ng-class="{active:tc.isSet('/mentors')}">Mentors</a>
               </li>
-              <li class="tab col m3"><a ng-click="tc.setTab('/faq')" onmousedown="keyPressed(event, '#/faq')" onerror="" ng-class="{active:tc.isSet('/faq')}">Faq</a>
+              <li class="tab col s2"><a ng-click="tc.setTab('/faq')" onmousedown="keyPressed(event, '#/faq')" onerror="" ng-class="{active:tc.isSet('/faq')}">Faq</a>
               </li>
-              <li class="tab col m3"><a ng-click="tc.setTab('/forms')" onmousedown="keyPressed(event, '#/forms')" onerror="" ng-class="{active:tc.isSet('/forms')}">Forms</a>
+              <li class="tab col s2"><a ng-click="tc.setTab('/forms')" onmousedown="keyPressed(event, '#/forms')" onerror="" ng-class="{active:tc.isSet('/forms')}">Forms</a>
+              </li>
+              <li class="tab col s2"><a ng-click="tc.setTab('/events')" onmousedown="keyPressed(event, '#/events')" onerror="" ng-class="{active:tc.isSet('/events')}">Events</a>
               </li>
             </ul>
           </div>

diff --git a/partials/tabs/events.html b/partials/tabs/events.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<div class="main-content container-fluid">
+  <div class="row">
+    <div class="col m8 offset-m2">
+      <h1 class="fine center">Organization Events</h1>
+      <br>
+    </div>
+  </div>
+</div>
+<div class="all-events-detail" ng-repeat="category in eventsList">
+    <div class="events-detail" ng-show="category.events.length>0">
+        <h5 class="lighter-font">{{ category.name }}</h5>
+        <hr>
+        <div class="apply-flex">
+            <div class="card blue-grey darken-1 event-card" ng-repeat="event in category.events">
+                <div class="card-content white-text constant-content-height">
+                    <span class="card-title">{{ event.title }}</span>
+                    <p class="break-word">{{ event.description }}</p>
+                    <em class="break-word" ng-show="event.description === null">No event description available!</em>
+                </div>
+                <div class="card-action">
+                    <a>
+                        {{ event.start_date_time | date:"medium" }}
+                        <span ng-show="event.end_date_time !== null">
+                            - {{ event.end_date_time | date:"medium" }}
+                        </span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="apply-flex no-events-available" ng-hide="eventsData.length>0">
+    <h6 class="center-align-text">
+        No Events Found! If you're already a member of organization and a developer,
+        you can share it with us on <a href="https://community.coala.io/">Community website</a>
+        by logging-in.
+    </h6>
+</div>
diff --git a/resources/css/style.css b/resources/css/style.css
@@ -19,6 +19,15 @@
 .black-shadow {
   box-shadow: 0 0 15px 2px black;
 }
+.break-word {
+  word-wrap: break-word;
+}
+.center-align-text {
+  text-align: center;
+}
+.constant-content-height {
+  height: 150px;
+}
 .center-content {
   justify-content: center;
 }
@@ -31,6 +40,13 @@
 .display-none {
   display: none;
 }
+.event-card {
+  width: 320px;
+  margin-right: 20px;
+}
+.events-detail {
+  margin: 15px 0;
+}
 .evenly-spread-content {
   justify-content: space-evenly;
 }
@@ -98,6 +114,15 @@
 i.fa {
   cursor: pointer;
 }
+.lighter-font {
+  font-weight: lighter;
+}
+.no-events-available {
+  font-size: 1.2em;
+  height: 30vh;
+  justify-content: center;
+  flex-direction: column;
+}
 .project-detail-element > .clickable:hover, .clickable:hover .chip:hover {
   cursor: pointer;
   background-color: #f3f5f8;

diff --git a/resources/js/app.js b/resources/js/app.js
@@ -58,6 +58,9 @@
             when('/forms', {
                 template: '<forms></forms>'
             }).
+            when('/events', {
+                template: '<events></events>'
+            }).
             otherwise({
                 redirectTo: '/projects'
             });
@@ -653,4 +656,63 @@
         }
     }]);
 
+    app.directive('events', ['$http', function ($http) {
+        return {
+            restrict: 'E',
+            templateUrl: '/partials/tabs/events.html',
+            controller: function ($scope, $rootScope) {
+                var today = new Date()
+                $scope.eventsData = []
+                $scope.eventsList = {
+                    ongoing_events: {
+                        name: 'Ongoing Event(s)',
+                        events: []
+                    },
+                    upcoming_events: {
+                        name: 'Upcoming Events(s)',
+                        events: []
+                    },
+                    past_events: {
+                        name: 'Past Event(s)',
+                        events: []
+                    }
+                }
+
+                $http.get('https://webservices.coala.io/calendar')
+                .then(function(result){
+                    self.eventsData = result.data
+                })
+
+                $scope.groupEvents = function(){
+                    angular.forEach($scope.eventsData, function(event){
+                        var event_start_time = new Date(event.start_date_time)
+                        if(event.end_date_time === null){
+                            var event_end_time = new Date(today.getTime() + 86400000)
+                        }
+                        else{
+                            var event_end_time = new Date(event.end_date_time)
+                        }
+
+                        if(event_start_time <= today && today <= event_end_time) {
+                            $scope.eventsList.ongoing_events.events.push(event)
+                        }  // ongoing event
+                        else if (event_end_time < today &&
+                            ((today - event_start_time) / (86400000) <= 90)) {
+                            $scope.eventsList.past_events.events.push(event)
+                        }  // has happened in last 3 months
+                        else if(
+                            event_start_time > today && event_end_time > today &&
+                            ((event_start_time - today) / (86400000) <= 90)) {
+                            $scope.eventsList.upcoming_events.events.push(event)
+                        }  // will occur in next 3 months
+                    })
+                }
+
+                $scope.groupEvents()
+
+            },
+            controllerAs: "ed"
+        }
+    }]);
+
 })();