Toggle buttons

This commit is contained in:
Cryptkeeper 2015-12-18 18:33:43 -06:00
parent 5a9be282f7
commit 8e999cee1b
3 changed files with 50 additions and 9 deletions

@ -179,7 +179,7 @@ h3 {
} }
/* The big graph */ /* The big graph */
#big-graph, #big-graph-controls { #big-graph, #big-graph-controls, #big-graph-checkboxes {
width: 1000px; width: 1000px;
margin: 15px auto 0 auto; margin: 15px auto 0 auto;
} }
@ -188,6 +188,11 @@ h3 {
height: 500px; height: 500px;
} }
#big-graph-controls > table { #big-graph-checkboxes > table {
width: 100%; width: 100%;
}
/* Basic elements */
.button {
} }

@ -35,7 +35,14 @@
</div> </div>
<div id="big-graph"></div> <div id="big-graph"></div>
<div id="big-graph-controls"></div> <div id="big-graph-controls">
<div id="big-graph-checkboxes"></div>
<button onclick="setAllGraphVisibility(true);">Show All</button>
<button onclick="setAllGraphVisibility(false);">Hide All</button>
</div>
<div id="server-container" class="container"></div> <div id="server-container" class="container"></div>

@ -66,6 +66,10 @@ var lastMojangServiceUpdate;
var graphs = {}; var graphs = {};
var lastPlayerEntries = {}; var lastPlayerEntries = {};
var historyPlot;
var displayedGraphData;
var hiddenGraphData = [];
// Generate (and set) the HTML that displays Mojang status. // Generate (and set) the HTML that displays Mojang status.
function updateMojangServices() { function updateMojangServices() {
if (!lastMojangServiceUpdate) { if (!lastMojangServiceUpdate) {
@ -182,6 +186,35 @@ function sortServers() {
} }
} }
function setAllGraphVisibility(visible) {
if (visible) {
var keys = Object.keys(hiddenGraphData);
for (var i = 0; i < keys.length; i++) {
displayedGraphData[keys[i]] = hiddenGraphData[keys[i]];
}
hiddenGraphData = [];
} else {
var keys = Object.keys(displayedGraphData);
for (var i = 0; i < keys.length; i++) {
hiddenGraphData[keys[i]] = displayedGraphData[keys[i]];
}
displayedGraphData = [];
}
$('.graph-control').each(function(index, item) {
item.checked = visible;
});
historyPlot.setData(convertGraphData(displayedGraphData));
historyPlot.setupGrid();
historyPlot.draw();
}
$(document).ready(function() { $(document).ready(function() {
var socket = io.connect({ var socket = io.connect({
reconnect: true, reconnect: true,
@ -192,10 +225,6 @@ $(document).ready(function() {
var mojangServicesUpdater; var mojangServicesUpdater;
var sortServersTask; var sortServersTask;
var historyPlot;
var displayedGraphData;
var hiddenGraphData = [];
socket.on('connect', function() { socket.on('connect', function() {
$('#tagline-text').text('Loading...'); $('#tagline-text').text('Loading...');
}); });
@ -218,7 +247,7 @@ $(document).ready(function() {
$('#server-container').html(''); $('#server-container').html('');
$('#quick-jump-container').html(''); $('#quick-jump-container').html('');
$('#big-graph').html(''); $('#big-graph').html('');
$('#big-graph-controls').html(''); $('#big-graph-checkboxes').html('');
}); });
socket.on('historyGraph', function(rawData) { socket.on('historyGraph', function(rawData) {
@ -247,7 +276,7 @@ $(document).ready(function() {
} }
} }
$('#big-graph-controls').append(html + '</tr></table>'); $('#big-graph-checkboxes').append(html + '</tr></table>');
}); });
socket.on('updateHistoryGraph', function(rawData) { socket.on('updateHistoryGraph', function(rawData) {