From 353bed9af50c44e81653631216a07a9f86aa3bfe Mon Sep 17 00:00:00 2001
From: KVGarg <co16326.ccet@gmail.com>
Date: Mon, 12 Aug 2019 15:16:38 +0530
Subject: [PATCH] events.html: Get & Show 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 https://github.com/coala/projects/issues/560
---
 index.html                | 10 ++++---
 partials/tabs/events.html | 39 ++++++++++++++++++++++++
 resources/css/style.css   | 25 ++++++++++++++++
 resources/js/app.js       | 62 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 132 insertions(+), 4 deletions(-)
 create mode 100644 partials/tabs/events.html
diff --git a/index.html b/index.html
index 0488d153..e3ee1d01 100644
--- 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
new file mode 100644
index 00000000..b2ca401c
--- /dev/null
+++ 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
index 9aee65e0..c3a090c7 100644
--- 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
index 0a22c397..b0567be4 100644
--- 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"
+        }
+    }]);
+
 })();
