feat: Add filter option (#209)

* feat: initial setup

* style format

* feat: add filter option

* style: format

* fix: pr issue

css/issues.css

@@ -0,0 +1,3 @@
+.active {
+  border: 1px solid rgba(81, 203, 238, 1);
+}

js/issues.js

@@ -7,25 +7,89 @@ let githubprojects = [
   'schmelto/abap',
 ];
 
+var githubissues = document.getElementById('githubissues');
+var githublabels = document.getElementById('githublabels');
+
+// get issues as promis
+function getIssues(project) {
+  return new Promise((resolve, reject) => {
+    fetch(`https://api.github.com/repos/${project}/issues`)
+      .then((response) => response.json())
+      .then((issues) => {
+        resolve(issues);
+      })
+      .catch((err) => {
+        reject(err);
+      });
+  });
+}
+
+let all_issues = [];
+let all_labels = [];
+
 githubprojects.forEach((project) => {
-  getprojectissues(project);
+  getIssues(project).then((issues) => {
+    // push all issues to array
+    all_issues.push(...issues);
+    // get all labels
+    issues.forEach((issue) => {
+      all_labels.push(...issue.labels);
+    });
+  });
 });
 
-var githubissues = document.getElementById('githubissues');
+// await promis and create html
+Promise.all(githubprojects.map(getIssues)).then(() => {
+  // create labels
+  all_labels.forEach((label) => {
+    // only if not already in list
+    if (
+      !githublabels.querySelector(
+        `span[style="background-color: #${label.color}; color: ${invertColor(
+          label.color,
+          true
+        )}; margin-right: 5px"]`
+      )
+    ) {
+      githublabels.innerHTML += `<span class="badge" style="background-color: #${
+        label.color
+      }; color: ${invertColor(label.color, true)}; margin-right: 5px">${
+        label.name
+      }</span>`;
+    }
+  });
+
+  all_issues.forEach((issue) => {
+    if (!issue.pull_request) {
+      githubissues.innerHTML += createIssueCard(issue);
+    }
+  });
 
-function getprojectissues(project) {
-  fetch(`https://api.github.com/repos/${project}/issues`)
-    .then((response) => {
-      return response.json();
-    })
-    .then((issues) => {
-      issues.forEach((issue) => {
-        if (!issue.pull_request) {
-          githubissues.innerHTML += createIssueCard(issue);
-        }
+  // when click on label show only issues with that label and hightlight label
+  githublabels.addEventListener('click', (e) => {
+    let label = e.target.innerText;
+    let label_issues = all_issues.filter((issue) => {
+      return issue.labels.some((label_issue) => {
+        return label_issue.name === label;
       });
     });
-}
+    githubissues.innerHTML = '';
+    // if no label is selected show all issues
+    if (label_issues.length === 0) {
+      label_issues = all_issues;
+    }
+
+    label_issues.forEach((issue) => {
+      if (!issue.pull_request) {
+        githubissues.innerHTML += createIssueCard(issue);
+      }
+    });
+    githublabels.querySelectorAll('span').forEach((label) => {
+      label.classList.remove('active');
+    });
+    e.target.classList.add('active');
+  });
+});
 
 function createIssueCard(issue) {
   let labelstring = addLabels(issue.labels);

pages/issues.html

@@ -11,6 +11,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
 	<link rel="stylesheet" href="../css/styles.css">
+	<link rel="stylesheet" href="../css/issues.css">
 	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 
@@ -32,6 +33,8 @@ <h3 class="text-center">List of open issues from some of my repositories.</h3>
         <h4 class="text-center">Click on the issue to see the full description.</h4>
       </div>
 
+			<div class="text-center" id="githublabels" style="border: none !important"></div>
+			<br><br><br>
       <div id="githubissues" class="flex-col-2"></div>
   </div>