Add banlist interface

www/assets/js/callbacks.js

@@ -55,6 +55,7 @@ function initCallbacks() {
                 addUserDropdown(users[i], users[i].children[1].innerHTML);
             }
 
+            $('#modnav').show();
             $('#chancontrols').show();
         }
         RANK = data.rank;
@@ -105,6 +106,10 @@ function initCallbacks() {
         rebuildPlaylist();
     });
 
+    socket.on('banlist', function(data) {
+        updateBanlist(data.entries);
+    });
+
     socket.on('usercount', function(data) {
         $('#usercount').text(data.count + " connected users");
     });

www/assets/js/client.js

@@ -235,6 +235,19 @@ $('#opt_submit').click(function() {
     socket.emit('channelOpts', opts);
 });
 
+$('#show_chancontrols').click(function() {
+    $('#show_chancontrols').parent().addClass("active");
+    $('#show_banlist').parent().removeClass("active");
+    $('#banlist').hide();
+    $('#chancontrols').show();
+});
+
+$('#show_banlist').click(function() {
+    $('#show_chancontrols').parent().removeClass("active");
+    $('#show_banlist').parent().addClass("active");
+    $('#banlist').show();
+    $('#chancontrols').hide();
+});
 
 function searchLibrary() {
     socket.emit('searchLibrary', {

www/assets/js/functions.js

@@ -599,3 +599,26 @@ function showAnnouncement(title, text) {
     $('<h3/>').text(title).appendTo(div);
     $('<p/>').html(text).appendTo(div);
 }
+
+function updateBanlist(entries) {
+    var tbl = $('#banlist table');
+    if(tbl.children().length > 1) {
+        $(tbl.children()[1]).remove();
+    }
+    for(var i = 0; i < entries.length; i++) {
+        var tr = $('<tr/>').appendTo(tbl);
+        var remove = $('<button/>').addClass("btn btn-mini btn-danger")
+            .appendTo($('<td/>').appendTo(tr));
+        $('<i/>').addClass("icon-remove-circle").appendTo(remove);
+        var ip = $('<td/>').text(entries[i].ip).appendTo(tr);
+        var name = $('<td/>').text(entries[i].name).appendTo(tr);
+        var banner = $('<td/>').text(entries[i].banner).appendTo(tr);
+
+        var callback = (function(ip) { return function() {
+            socket.emit('chatMsg', {
+                msg: "/unban " + ip
+            });
+        } })(entries[i].ip);
+        remove.click(callback);
+    }
+}

www/index.html

@@ -93,8 +93,20 @@
                 </ul>
             </div>
         </div>
-        <div class="row" style="margin-top: 20px; display: none" id="chancontrols">
-            <div class="span10 offset1 well">
+        <div class="row" style="display: none;" id="modnav">
+            <div class="span10 offset1">
+                <ul class="nav nav-tabs">
+                    <li class="active">
+                        <a href="javascript:void(0)" id="show_chancontrols">Channel Controls</a>
+                    </li>
+                    <li>
+                        <a href="javascript:void(0)" id="show_banlist">Ban List</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="row" style="display: none" id="chancontrols">
+            <div class="span10 offset1">
                 <form action="javascript:void(0)">
                     <fieldset>
                         <legend>Channel Options</legend>
@@ -134,6 +146,18 @@
                 </form>
             </div>
         </div>
+        <div class="row" id="banlist" style="display: none;">
+            <div class="span10 offset1">
+                <table class="table table-striped">
+                    <thead>
+                        <th></th>
+                        <th>IP</th>
+                        <th>Name</th>
+                        <th>Banned By</th>
+                    </thead>
+                </table>
+            </div>
+        </div>
     </div> <!-- /container -->
 
     <script src="https://w.soundcloud.com/player/api.js"></script>