From 39b0dc3a3092890ab8fb39b8ba065b347808575b 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: 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 https://github.com/coala/projects/issues/560
---
index.html | 2 ++
partials/tabs/events.html | 34 +++++++++++++++++++++
resources/css/style.css | 32 ++++++++++++++++++++
resources/js/app.js | 62 +++++++++++++++++++++++++++++++++++++++
4 files changed, 130 insertions(+)
create mode 100644 partials/tabs/events.html
diff --git a/index.html b/index.html
index dcd9166e..0d5dcb11 100644
--- a/index.html
+++ b/index.html
@@ -44,6 +44,8 @@
</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>
+ <li class="tab col m4"><a ng-click="tc.setTab('/events')" onmousedown="keyPressed(event, '#/events')" onerror="" ng-class="{active:tc.isSet('/events')}">Events</a>
+ </li>
</ul>
</div>
</div>
diff --git a/partials/tabs/events.html b/partials/tabs/events.html
new file mode 100644
index 00000000..e65b4a66
--- /dev/null
+++ 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
index f2395d87..86e240dd 100644
--- 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
index af811167..aa5ab5ac 100644
--- 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"
+ }
+ }]);
+
})();