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 coala#560
KVGarg · Aug 16, 2019 · 39f51f5 · 39f51f5
1 parent f19f787
commit 39f51f5
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -38,11 +38,13 @@
         <div class="row">
           <div class="col s12">
             <ul class="tabs uppercase">
-              <li class="tab col m4"><a ng-click="tc.setTab('/projects')" onmousedown="keyPressed(event, '#/projects')" ng-class="{active:tc.isSet('/projects')}">Projects</a>
+              <li class="tab col m3"><a ng-click="tc.setTab('/projects')" onmousedown="keyPressed(event, '#/projects')" ng-class="{active:tc.isSet('/projects')}">Projects</a>
               </li>
-              <li class="tab col m4"><a ng-click="tc.setTab('/mentors')" onmousedown="keyPressed(event, '#/mentors')" ng-class="{active:tc.isSet('/mentors')}">Mentors</a>
+              <li class="tab col m3"><a ng-click="tc.setTab('/mentors')" onmousedown="keyPressed(event, '#/mentors')" ng-class="{active:tc.isSet('/mentors')}">Mentors</a>
               </li>
-              <li class="tab col m4"><a ng-click="tc.setTab('/faq')" onmousedown="keyPressed(event, '#/faq')" onerror="" ng-class="{active:tc.isSet('/faq')}">Faq</a>
+              <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>
+              <li class="tab col m3"><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,34 @@
+<!DOCTYPE html>
+<div class="main-content container">
+    <h2 class="center-text">~ Organization Events ~</h2>
+    <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-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>
+</div>
diff --git a/resources/css/style.css b/resources/css/style.css
@@ -1,3 +1,26 @@
+.apply-flex {
+  display: flex;
+  flex-flow: row wrap;
+}
+.break-word {
+  word-wrap: break-word;
+}
+.constant-content-height {
+  height: 150px;
+}
+.center-text {
+  text-align: center;
+}
+.event-card {
+  width: 320px;
+  margin-right: 20px;
+}
+.events-detail {
+  margin: 15px 0;
+}
+.evenly-spaced-content {
+  justify-content: space-evenly;
+}
 .hash_value_dup {
   position: 'absolute';
   left: '-9999px';
@@ -32,6 +55,15 @@
 .fa-clipboard:hover .hinttext {
   visibility: visible;
 }
+.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
@@ -55,6 +55,9 @@
             when('/faq', {
                 template: '<faq></faq>'
             }).
+            when('/events', {
+                template: '<events></events>'
+            }).
             otherwise({
                 redirectTo: '/projects'
             });
@@ -416,4 +419,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"
+        }
+    }]);
+
 })();