summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--www/index.html71
-rw-r--r--www/js/rhctl.js64
-rw-r--r--www/styles/main.css37
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;
}​