Skip to content

Commit 42e6778

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 8e239d6 commit 42e6778

File tree

4 files changed

+132
-4
lines changed

4 files changed

+132
-4
lines changed

‎index.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,15 @@
3838
<div class="row">
3939
<div class="col s12">
4040
<ul class="tabs uppercase">
41-
<li class="tab col m3"><a ng-click="tc.setTab('/projects')" onmousedown="keyPressed(event, '#/projects')" ng-class="{active:tc.isSet('/projects')}">Projects</a>
41+
<li class="tab col s2"><a ng-click="tc.setTab('/projects')" onmousedown="keyPressed(event, '#/projects')" ng-class="{active:tc.isSet('/projects')}">Projects</a>
4242
</li>
43-
<li class="tab col m3"><a ng-click="tc.setTab('/mentors')" onmousedown="keyPressed(event, '#/mentors')" ng-class="{active:tc.isSet('/mentors')}">Mentors</a>
43+
<li class="tab col s2"><a ng-click="tc.setTab('/mentors')" onmousedown="keyPressed(event, '#/mentors')" ng-class="{active:tc.isSet('/mentors')}">Mentors</a>
4444
</li>
45-
<li class="tab col m3"><a ng-click="tc.setTab('/faq')" onmousedown="keyPressed(event, '#/faq')" onerror="" ng-class="{active:tc.isSet('/faq')}">Faq</a>
45+
<li class="tab col s2"><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 m3"><a ng-click="tc.setTab('/forms')" onmousedown="keyPressed(event, '#/forms')" onerror="" ng-class="{active:tc.isSet('/forms')}">Forms</a>
47+
<li class="tab col s2"><a ng-click="tc.setTab('/forms')" onmousedown="keyPressed(event, '#/forms')" onerror="" ng-class="{active:tc.isSet('/forms')}">Forms</a>
48+
</li>
49+
<li class="tab col s2"><a ng-click="tc.setTab('/events')" onmousedown="keyPressed(event, '#/events')" onerror="" ng-class="{active:tc.isSet('/events')}">Events</a>
4850
</li>
4951
</ul>
5052
</div>

‎partials/tabs/events.html

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

‎resources/css/style.css

+25
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,15 @@
1919
.black-shadow {
2020
box-shadow: 0 0 15px 2px black;
2121
}
22+
.break-word {
23+
word-wrap: break-word;
24+
}
25+
.center-align-text {
26+
text-align: center;
27+
}
28+
.constant-content-height {
29+
height: 150px;
30+
}
2231
.center-content {
2332
justify-content: center;
2433
}
@@ -31,6 +40,13 @@
3140
.display-none {
3241
display: none;
3342
}
43+
.event-card {
44+
width: 320px;
45+
margin-right: 20px;
46+
}
47+
.events-detail {
48+
margin: 15px 0;
49+
}
3450
.evenly-spread-content {
3551
justify-content: space-evenly;
3652
}
@@ -98,6 +114,15 @@
98114
i.fa {
99115
cursor: pointer;
100116
}
117+
.lighter-font {
118+
font-weight: lighter;
119+
}
120+
.no-events-available {
121+
font-size: 1.2em;
122+
height: 30vh;
123+
justify-content: center;
124+
flex-direction: column;
125+
}
101126
.project-detail-element > .clickable:hover, .clickable:hover .chip:hover {
102127
cursor: pointer;
103128
background-color: #f3f5f8;

‎resources/js/app.js

+62
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,9 @@
5858
when('/forms', {
5959
template: '<forms></forms>'
6060
}).
61+
when('/events', {
62+
template: '<events></events>'
63+
}).
6164
otherwise({
6265
redirectTo: '/projects'
6366
});
@@ -653,4 +656,63 @@
653656
}
654657
}]);
655658

659+
app.directive('events', ['$http', function ($http) {
660+
return {
661+
restrict: 'E',
662+
templateUrl: '/partials/tabs/events.html',
663+
controller: function ($scope, $rootScope) {
664+
var today = new Date()
665+
$scope.eventsData = []
666+
$scope.eventsList = {
667+
ongoing_events: {
668+
name: 'Ongoing Event(s)',
669+
events: []
670+
},
671+
upcoming_events: {
672+
name: 'Upcoming Events(s)',
673+
events: []
674+
},
675+
past_events: {
676+
name: 'Past Event(s)',
677+
events: []
678+
}
679+
}
680+
681+
$http.get('https://webservices.coala.io/calendar')
682+
.then(function(result){
683+
self.eventsData = result.data
684+
})
685+
686+
$scope.groupEvents = function(){
687+
angular.forEach($scope.eventsData, function(event){
688+
var event_start_time = new Date(event.start_date_time)
689+
if(event.end_date_time === null){
690+
var event_end_time = new Date(today.getTime() + 86400000)
691+
}
692+
else{
693+
var event_end_time = new Date(event.end_date_time)
694+
}
695+
696+
if(event_start_time <= today && today <= event_end_time) {
697+
$scope.eventsList.ongoing_events.events.push(event)
698+
} // ongoing event
699+
else if (event_end_time < today &&
700+
((today - event_start_time) / (86400000) <= 90)) {
701+
$scope.eventsList.past_events.events.push(event)
702+
} // has happened in last 3 months
703+
else if(
704+
event_start_time > today && event_end_time > today &&
705+
((event_start_time - today) / (86400000) <= 90)) {
706+
$scope.eventsList.upcoming_events.events.push(event)
707+
} // will occur in next 3 months
708+
})
709+
}
710+
711+
$scope.groupEvents()
712+
713+
},
714+
controllerAs: "ed"
715+
}
716+
}]);
717+
656718
})();

0 commit comments

Comments
 (0)