Skip to content

Commit

Permalink
events.html: Fetch and Display events from webservices
Browse files Browse the repository at this point in the history 
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 coala#560
  • Loading branch information
@KVGarg
KVGarg committed Aug 20, 2019
1 parent ea8c43d commit 76d478e
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 4 deletions.
10 changes: 6 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
38 changes: 38 additions & 0 deletions partials/tabs/events.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<div class="main-content container">
<div class="apply-flex page-details">
<h2>~</h2>
<h2 class="center-align-text page-name">Organization Events</h2>
<h2>~</h2>
</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>
</div>
31 changes: 31 additions & 0 deletions resources/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +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;
}
Expand All @@ -34,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;
}
Expand Down Expand Up @@ -101,6 +114,24 @@
i.fa {
cursor: pointer;
}
.lighter-font {
font-weight: lighter;
}
.no-events-available {
font-size: 1.2em;
height: 30vh;
justify-content: center;
flex-direction: column;
}
.page-details {
justify-content: center;
flex-wrap: nowrap;
}
.page-name {
display: flex;
justify-content: center;
flex-direction: column;
}
.project-detail-element > .clickable:hover, .clickable:hover .chip:hover {
cursor: pointer;
background-color: #f3f5f8;
Expand Down
62 changes: 62 additions & 0 deletions resources/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,9 @@
when('/forms', {
template: '<forms></forms>'
}).
when('/events', {
template: '<events></events>'
}).
otherwise({
redirectTo: '/projects'
});
Expand Down Expand Up @@ -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"
}
}]);

})();

0 comments on commit 76d478e

Please sign in to comment.