diff options
| -rw-r--r-- | www/index.html | 71 | ||||
| -rw-r--r-- | www/js/rhctl.js | 64 | ||||
| -rw-r--r-- | www/styles/main.css | 37 |
3 files changed, 155 insertions, 17 deletions
diff --git a/www/index.html b/www/index.html index 9ec29c1..3b9b01b 100644 --- a/www/index.html +++ b/www/index.html @@ -38,10 +38,42 @@ <div class="col-md-5 col-md-offset-3"> <div class="row"> <div class="col-xs-2"><h3>Mood:<h3></div> - <div id="rhctlmood" class="col-xs-1"></div> + <div id="rhctlmood" class="col-xs-1"> + <img src="/img/mood-undefined.png" /> + </div> <div class="col-xs-3 col-xs-offset-1"><h3>Active Server:<h3></div> - <div id="rhctlactiveserver" class="col-xs-3"></div> + <div id="rhctlactiveserver" class="col-xs-3"> + <span class="label label-default">none</span> + </div> + </div> + <div class="row"> + <div id="rhctlservertable" class="col-xs-4"> + <table class="table"> + <tr> + <th>Server</th> + <th>Health</th> + <th>Channel</th> + </tr> + </table> + </div> + <div id="rhctlaudiotable" class="col-xs-8"> + <h4>Audio Routing</h4> + <table class="table"> + <tr> + <th>Out</th> + <th>1</th> + <th>2</th> + <th>3</th> + <th>4</th> + <th>5</th> + <th>6</th> + <th>7</th> + <th>8</th> + <th>Silence</th> + </tr> + </table> + </div> </div> <div class="row"> <div id="rhctlraw"></div> @@ -51,10 +83,37 @@ </div> - <script type="text/javascript"> - clock_init(); - rhctl_init(); - </script> + <div id="hiddenTemplates" class="hidden"> + + <table> + <tr class="servertableEntryTemplate"> + <td class="server-name">-</td> + <td class="server-health"><img src="/img/server-undefined.png" title="unkown" /></td> + <td class="server-channel">-</td> + </tr> + </table> + + <table> + <tr class="audiotableEntryTemplate"> + <td class="audio-out">-</td> + <td class="audio-in audio-in1"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td> + <td class="audio-in audio-in2"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td> + <td class="audio-in audio-in3"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td> + <td class="audio-in audio-in4"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td> + <td class="audio-in audio-in5"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td> + <td class="audio-in audio-in6"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td> + <td class="audio-in audio-in7"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td> + <td class="audio-in audio-in8"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></td> + <td class="audio-silence"><span class="glyphicon glyphicon-volume-off" aria-hidden="true"></span></td> + </tr> + </table> + + </div> + + <script type="text/javascript"> + clock_init(); + rhctl_init(); + </script> </body> </html> diff --git a/www/js/rhctl.js b/www/js/rhctl.js index c8e1f26..ea7adb8 100644 --- a/www/js/rhctl.js +++ b/www/js/rhctl.js @@ -55,6 +55,7 @@ function Rhctl() { } this.sock_onclose = function(event) { + this.draw_callbacks.fireWith(window, []); this.sock.close(); delete this.sock; setTimeout(this.connect.bind(this), 1000); @@ -75,22 +76,39 @@ var rhctl = new Rhctl(); function rhctl_init() { rhctl.connect(); - $('#rhctlraw').text("loading..."); + rhctl_draw_state() rhctl.addCallback(rhctl_draw_state); } function rhctl_draw_state(state) { - $('#rhctlraw').text(JSON.stringify(state, null, '\t')); + var raw = $('#rhctlraw'); + var mood = $('#rhctlmood img').removeClass(); + var srv = $('#rhctlactiveserver span').removeClass().addClass('label'); + var srvTable = $('#rhctlservertable table'); + srvTable.find("tr:gt(0)").remove();; + var audioTable = $('#rhctlaudiotable table'); + audioTable.find("tr:gt(0)").remove();; - var mood = $('<img>').attr('src', '/img/mood-' + state.Mood + '.png'); + if(!state) { + raw.text("connecting..."); + mood.attr('src', '/img/mood-undefined.png'); + srv.addClass('label-default').text('none'); + return; + } + + // Raw message + raw.text(JSON.stringify(state, null, '\t')); + + // Mood + mood.attr('src', '/img/mood-' + state.Mood + '.png'); if(state.Settled) { mood.attr('title', state.Mood); } else { mood.addClass('blink').attr('title', state.Mood + ' (Settling)'); } - $('#rhctlmood').empty().append(mood); - var srv = $('<span>').addClass('label').text(state.ActiveServer); + // Active Server + srv.text(state.ActiveServer); switch(state.ActiveServer) { case 'master': srv.addClass('label-success'); @@ -104,5 +122,39 @@ function rhctl_draw_state(state) { } srv.addClass('label-default'); } - $('#rhctlactiveserver').empty().append($('<h1>').append(srv)); + + // Server Table + $.each(state.Server, function(key, value) { + var entry = $('#hiddenTemplates .servertableEntryTemplate').clone().removeClass('servertableEntryTemplate'); + entry.find('.server-name').text(key); + if(value.Channel) { + entry.find('.server-channel').text(value.Channel); + } + var h = entry.find('.server-health img'); + switch(value.Health) { + case 'alive': + case 'dead': + h.attr('src', '/img/server-' + value.Health + '.png').attr('title', value.Health); + break; + default: + } + srvTable.append(entry) + }); + + + // Audio Outputs + $.each(state.Switch.Audio, function(index, value) { + var entry = $('#hiddenTemplates .audiotableEntryTemplate').clone().removeClass('audiotableEntryTemplate'); + entry.find('.audio-out').text(index+1); + $.each(value.Inputs, function(index, value) { + if(value) { + entry.find('.audio-in' + (index+1) + ' span').removeClass('glyphicon-unchecked').addClass('glyphicon-check'); + } + }); + if(!value.Silence) { + entry.find('.audio-silence span').removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up'); + } + + audioTable.append(entry) + }); } diff --git a/www/styles/main.css b/www/styles/main.css index ad774b8..37b5b80 100644 --- a/www/styles/main.css +++ b/www/styles/main.css @@ -47,13 +47,40 @@ margin-bottom: 1em; } +#rhctlactiveserver span { + font-size: 2em; +} + +#rhctlservertable table { + margin-top: 2em; + width: 100%; +} + +#rhctlaudiotable h4 { + margin-top: 2em; + text-align: center; + width: 100%; +} + +#rhctlaudiotable table { + width: 100%; +} + +#rhctlaudiotable .audio-out,.audio-in { + font-size: 1.1em; +} + +#rhctlaudiotable .audio-silence { + font-size: 2em; +} + @keyframes blink { - 0%{opacity:1;} - 50%{opacity:0.2;} - 100%{opacity:1;} + 0% {opacity:1;} + 50% {opacity:0.2;} + 100% {opacity:1;} } .blink { - transition:all 0.5s ease-in-out; - animation:blink normal 1s infinite ease-in-out; + transition: all 0.5s ease-in-out; + animation: blink normal 1s infinite ease-in-out; } |