Skip to content

Commit 76d478e

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 ea8c43d commit 76d478e

File tree

4 files changed

+137
-4
lines changed

4 files changed

+137
-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

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

‎resources/css/style.css

+31
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,15 @@
1919
.black-shadow {
2020
box-shadow: 0 0 15px 2px black;
2121
}
22+
.break-word {
23+
word-wrap: break-word;
24+
}
2225
.center-align-text {
2326
text-align: center;
2427
}
28+
.constant-content-height {
29+
height: 150px;
30+
}
2531
.center-content {
2632
justify-content: center;
2733
}
@@ -34,6 +40,13 @@
3440
.display-none {
3541
display: none;
3642
}
43+
.event-card {
44+
width: 320px;
45+
margin-right: 20px;
46+
}
47+
.events-detail {
48+
margin: 15px 0;
49+
}
3750
.evenly-spread-content {
3851
justify-content: space-evenly;
3952
}
@@ -101,6 +114,24 @@
101114
i.fa {
102115
cursor: pointer;
103116
}
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+
}
126+
.page-details {
127+
justify-content: center;
128+
flex-wrap: nowrap;
129+
}
130+
.page-name {
131+
display: flex;
132+
justify-content: center;
133+
flex-direction: column;
134+
}
104135
.project-detail-element > .clickable:hover, .clickable:hover .chip:hover {
105136
cursor: pointer;
106137
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)