Merge pull request #25 from debugger22/feat-filter-org/user

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

@@ -5,7 +5,8 @@ var drawingArea;
 var width;
 var height;
 var volume = 0.6;
-var ULTIMATE_DREAM_KILLER = false;
+var ULTIMATE_DREAM_KILLER = false;  // https://github.com/debugger22/github-audio/pull/19
+var orgRepoFilterNames;
 
 var scale_factor = 6,
     note_overlap = 2,
@@ -22,8 +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_edits = 0;
+    total_sounds = 51;
 
     var celesta = [],
         clav = [],
@@ -37,7 +37,16 @@ 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
@@ -123,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});
@@ -192,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 = [];
+  });
+
 });
 
 
@@ -238,8 +246,8 @@ function playFromQueueExchange1(){
   var event = eventQueue.shift();
   if(event != null && event.message != null && !shouldEventBeIgnored(event) && svg != null){
     playSound(event.message.length*1.1, event.type);
-    if(!document.hidden)
-      drawEvent(event, svg);
+    // if(!document.hidden)
+    drawEvent(event, svg);
   }
   setTimeout(playFromQueueExchange1, Math.floor(Math.random() * 1000) + 500);
   $('.events-remaining-value').html(eventQueue.length);
@@ -249,8 +257,8 @@ function playFromQueueExchange2(){
   var event = eventQueue.shift();
   if(event != null && event.message != null && !shouldEventBeIgnored(event) && svg != null){
     playSound(event.message.length, event.type);
-    if(!document.hidden)
-      drawEvent(event, svg);
+    // if(!document.hidden)
+    drawEvent(event, svg);
   }
   setTimeout(playFromQueueExchange2, Math.floor(Math.random() * 800) + 500);
   $('.events-remaining-value').html(eventQueue.length);