projects.html: Get issues detail from webservices

The commit adds a method, to get related issues states
from coala Webservices and adds the issue state to a
HashMap which is being used to get issue css class,
when the project pop-ups.

Closes #298

partials/tabs/projects.html

@@ -106,7 +106,7 @@ <h6><b>Filter Google Summer of Code Projects</b></h6>
         <div ng-show="currentProject.developers_involved.length>0" class="project-detail-element">
           <div class="small-heading uppercase">Developers Involved</div> <span class="pr-element-detail chip" ng-repeat="developers in currentProject.developers_involved">@{{developers}}</span> </div>
         <div ng-show="currentProject.issues.length>0" class="project-detail-element">
-          <div class="small-heading uppercase">Related issues</div> <span ng-click="redirect(issue)" class="pr-element-detail chip clickable" ng-repeat="issue in currentProject.issues">{{ issue | format_issue }}</span>
+          <div class="small-heading uppercase">Related issues</div> <span ng-click="redirect(issue)" class="pr-element-detail chip clickable" ng-class="lc.getIssueStateClass(issue)" ng-repeat="issue in currentProject.issues">{{ issue | format_issue }}</span>
           <br>
           <br>
           <br>

resources/css/style.css

@@ -31,6 +31,10 @@
 .center-content {
   justify-content: center;
 }
+.closed {
+  background-color: #cb2431;
+  color: white
+}
 .close-filters {
   right: 6%;
   margin-top: 1.25rem;
@@ -117,12 +121,23 @@ i.fa {
 .lighter-font {
   font-weight: lighter;
 }
+.merged {
+  background-color: #6f42c1;
+  color: white;
+}
 .no-events-available {
   font-size: 1.2em;
   height: 30vh;
   justify-content: center;
   flex-direction: column;
 }
+.no-state {
+  background-color: #e4e4e4;
+}
+.open, .opened {
+  background-color: #2cbe4e;
+  color: white;
+}
 .project-detail-element > .clickable:hover, .clickable:hover .chip:hover {
   cursor: pointer;
   background-color: #f3f5f8;

resources/js/app.js

@@ -121,6 +121,7 @@
                     self.displayFilters = !self.displayFilters
                     $('select').material_select();
                 }
+                self.issueStates = {}
 
                 $scope.sortOrder = function(project) {
                     return mapping[project.status];
@@ -480,6 +481,34 @@
                 }
 
                 $scope.getAllFilters();
+                self.getIssueStateClass = function(issue){
+                    return self.issueStates[issue]
+                }
+
+                function getIssueState(issue) {
+                    self.issueStates[issue] = 'no-state'
+                    $http({
+                        method: 'GET',
+                        url: 'https://webservices.coala.io/issue/details',
+                        params: { url: issue }
+                    }).then(function (response) {
+                        var issue_data = response.data
+                        self.issueStates[issue] = issue_data.state
+                    })
+                }
+
+                function getAllRelatedIssuesState(){
+                    $http.get('data/projects.liquid')
+                        .then(function (res) {
+                            angular.forEach(res.data, function(project){
+                                angular.forEach(project.issues, function(issue){
+                                    getIssueState(issue)
+                                })
+                            })
+                        })
+                }
+                getAllRelatedIssuesState()
+
             },
             controllerAs: 'lc'
         }