Skip to content

Commit 15c279f

Browse files
KVGargKVGarg
committed
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
1 parent f19f787 commit 15c279f

File tree

4 files changed

+123
-0
lines changed

4 files changed

+123
-0
lines changed

‎index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@
4444
</li>
4545
<li class="tab col m4"><a ng-click="tc.setTab('/faq')" onmousedown="keyPressed(event, '#/faq')" onerror="" ng-class="{active:tc.isSet('/faq')}">Faq</a>
4646
</li>
47+
<li class="tab col m4"><a ng-click="tc.setTab('/events')" onmousedown="keyPressed(event, '#/events')" onerror="" ng-class="{active:tc.isSet('/events')}">Events</a>
48+
</li>
4749
</ul>
4850
</div>
4951
</div>

‎partials/tabs/events.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<div class="main-content container">
3+
<h2 class="center-text">~ Organization Events ~</h2>
4+
<div class="all-events-detail" ng-repeat="category in eventsList">
5+
<div class="events-detail" ng-show="category.events.length>0">
6+
<h5 class="lighter-font">{{ category.name }}</h5>
7+
<hr>
8+
<div class="apply-flex">
9+
<div class="card blue-grey darken-1 event-card" ng-repeat="event in category.events">
10+
<div class="card-content white-text constant-content-height">
11+
<span class="card-title">{{ event.title }}</span>
12+
<p class="break-word">{{ event.description }}</p>
13+
<em class="break-word" ng-show="event.description === undefined">No event description available!</em>
14+
</div>
15+
<div class="card-action">
16+
<a>
17+
{{ event.start_date_time | date:"medium" }}
18+
<span ng-show="event.end_date_time !== undefined">-</span>
19+
{{ event.end_date_time | date:"medium" }}
20+
</a>
21+
</div>
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
<div class="apply-flex no-events-available" ng-hide="eventsData.length>0">
27+
<h6 class="center-text">
28+
No Events Found! If you're already a member of organization and a developer,
29+
you can share it with us on <a href="https://community.coala.io/">Community website</a>
30+
by logging-in.
31+
</h6>
32+
</div>
33+
</div>

‎resources/css/style.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,26 @@
1+
.apply-flex {
2+
display: flex;
3+
flex-flow: row wrap;
4+
}
5+
.break-word {
6+
word-wrap: break-word;
7+
}
8+
.constant-content-height {
9+
height: 150px;
10+
}
11+
.center-text {
12+
text-align: center;
13+
}
14+
.event-card {
15+
width: 320px;
16+
margin-right: 20px;
17+
}
18+
.events-detail {
19+
margin: 15px 0;
20+
}
21+
.evenly-spaced-content {
22+
justify-content: space-evenly;
23+
}
124
.hash_value_dup {
225
position: 'absolute';
326
left: '-9999px';
@@ -32,6 +55,15 @@
3255
.fa-clipboard:hover .hinttext {
3356
visibility: visible;
3457
}
58+
.lighter-font {
59+
font-weight: lighter;
60+
}
61+
.no-events-available {
62+
font-size: 1.2em;
63+
height: 30vh;
64+
justify-content: center;
65+
flex-direction: column;
66+
}
3567
.project-detail-element > .clickable:hover, .clickable:hover .chip:hover {
3668
cursor: pointer;
3769
background-color: #f3f5f8;

‎resources/js/app.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,9 @@
5555
when('/faq', {
5656
template: '<faq></faq>'
5757
}).
58+
when('/events', {
59+
template: '<events></events>'
60+
}).
5861
otherwise({
5962
redirectTo: '/projects'
6063
});
@@ -416,4 +419,57 @@
416419
}
417420
}]);
418421

422+
app.directive('events', ['$http', function ($http) {
423+
return {
424+
restrict: 'E',
425+
templateUrl: '/partials/tabs/events.html',
426+
controller: function ($scope, $rootScope, $log) {
427+
var today = new Date()
428+
$scope.eventsData = []
429+
$scope.eventsList = {
430+
ongoing_events: {
431+
name: 'Ongoing Event(s)',
432+
events: []
433+
},
434+
upcoming_events: {
435+
name: 'Upcoming Events(s)',
436+
events: []
437+
},
438+
past_events: {
439+
name: 'Past Event(s)',
440+
events: []
441+
}
442+
}
443+
444+
$http.get('https://webservices.coala.io/calendar')
445+
.then(function(result){
446+
self.eventsData = result.data
447+
})
448+
449+
$scope.groupEvents = function(){
450+
angular.forEach($scope.eventsData, function(event){
451+
var event_start_time = new Date(event.start_date_time)
452+
var event_end_time = new Date(event.end_date_time)
453+
if(event_start_time <= today && today <= event_end_time){
454+
$scope.eventsList.ongoing_events.events.push(event)
455+
} // ongoing event
456+
else if (event_end_time < today && ((today - event_start_time) / (86400000) <= 90)) {
457+
$scope.eventsList.past_events.events.push(event)
458+
} // has happened in last 3 months
459+
else if(
460+
event_start_time > today && event_end_time > today &&
461+
((event_start_time - today) / (86400000) <= 90)){
462+
$scope.eventsList.upcoming_events.events.push(event)
463+
} // will occur in next 3 months
464+
$log.log(event)
465+
})
466+
}
467+
468+
$scope.groupEvents()
469+
470+
},
471+
controllerAs: "ed"
472+
}
473+
}]);
474+
419475
})();

0 commit comments

Comments
 (0)