Add a feature to filter out events of specified repos/orgs

Author: debugger22

app/index.html

@@ -69,8 +69,8 @@ <h2 class="online-users-text"><span class="odometer online-users-count"></span>
       </div>
     </div>
     <div id="config-area">
-      <div id="consumption-rate-div">
-        Set events consumption rate <div id="eventConsumptionSlider"></div>
+      <div id="org-repo-filter-div">
+        Enter your organization's or repository's names to filter events&nbsp; <input type="text" id="org-repo-filter-name" placeholder="github google facebook"/>
       </div>
       <div class="site-description">
         <h4>About</h4>

app/public/css/main.css

@@ -155,23 +155,29 @@ circle {
     font-weight: 300;
 }
 
-#consumption-rate-div{
+#org-repo-filter-div{
     width: 50%;
     margin: 0 auto;
     margin-bottom: 0px;
-    visibility: hidden;
 }
 
-#eventConsumptionSlider{
-    margin-top: 20px;
-    width: 300px;
+#org-repo-filter-name{
+    width: 20%;
+    color: gray;
+    padding: 5px;
+    padding-left: 10px;
+    border: none;
+    background: #F1F1F1;
+    font-family: 'Josefin Sans', sans-serif;
+    font-size: 1em;
 }
 
 .site-description{
     font-size: 1em;
     line-height: 1.6em;
     width: 50%;
     margin: 0 auto;
+    margin-top: 50px;
 }
 
 footer{

app/public/js/main.js

@@ -6,6 +6,7 @@ var width;
 var height;
 var volume = 0.6;
 var ULTIMATE_DREAM_KILLER = false;  // https://github.com/debugger22/github-audio/pull/19
+var orgRepoFilterNames;
 
 var scale_factor = 6,
     note_overlap = 2,
@@ -22,7 +23,7 @@ var svg_background_color_online = '#0288D1',
     pull_request_color = 'rgb(46, 204, 113)',
     comment_color = 'rgb(46, 204, 113)'
     edit_color = '#fff',
-    total_sounds = 51,
+    total_sounds = 51;
 
     var celesta = [],
         clav = [],
@@ -31,12 +32,21 @@ var svg_background_color_online = '#0288D1',
 
 
 
-var socket = io(document.location.hostname + ":8000");
+var socket = io(document.location.hostname);
 socket.on('github', function (data) {
   $('.online-users-count').html(data.connected_users);
   data.data.forEach(function(event){
     if(!isEventInQueue(event)){
-      eventQueue.push(event);
+      // Filter out events only specified by the user
+      if(orgRepoFilterNames != null && orgRepoFilterNames != []){
+        // Don't consider pushes to github.io repos when org filter is on
+        if(new RegExp(orgRepoFilterNames.join("|")).test(event.repo_name)
+           && event.repo_name.indexOf('github.io') == -1){
+          eventQueue.push(event);
+        }
+      }else{
+        eventQueue.push(event);
+      }
     }
   });
   // Don't let the eventQueue grow more than 1000
@@ -122,12 +132,6 @@ $(function(){
     }
   });
 
-  $('#eventConsumptionSlider').slider({
-    'min': 1,
-    'max': 100
-  });
-
-
   // Main drawing area
   svg = d3.select("#area").append("svg");
   svg.attr({width: width, height: height});
@@ -191,6 +195,11 @@ $(function(){
   // Make header and footer visible
   $('body').css('visibility', 'visible');
 
+  $('#org-repo-filter-name').on('input', function() {
+    orgRepoFilterNames = $('#org-repo-filter-name').val().split(' ');
+    eventQueue = [];
+  });
+
 });