improved controls
added overlay for loading animation
This commit is contained in:
parent
ab92155d66
commit
8ba0edb040
3 changed files with 33 additions and 19 deletions
|
@ -38,7 +38,10 @@
|
|||
<body>
|
||||
|
||||
<div id="content">
|
||||
<div id="plot"></div>
|
||||
<div id="plot">
|
||||
<div id="flot"></div>
|
||||
<div id="overlay">Test</div>
|
||||
</div>
|
||||
|
||||
<div id="accordion">
|
||||
<div id="controls">
|
||||
|
|
|
@ -42,7 +42,11 @@ vz.wui.init = function() {
|
|||
}).next().hide();
|
||||
|
||||
// make buttons fancy
|
||||
$('button, input[type=button]').button();
|
||||
$('button, input[type=button],[type=image]').button();
|
||||
|
||||
// bind plot actions
|
||||
$('#controls button').click(this.handleControls);
|
||||
$('#controls').buttonset();
|
||||
|
||||
// tuple resolution
|
||||
var tup = $('#tuples');
|
||||
|
@ -127,11 +131,6 @@ vz.wui.dialogs.init = function() {
|
|||
* Bind events to handle plot zooming & panning
|
||||
*/
|
||||
vz.wui.initEvents = function() {
|
||||
// bind plot actions
|
||||
$('#controls button').button().click(vz.wui.handleControls);
|
||||
$('#controls').buttonset();
|
||||
|
||||
|
||||
$('#plot')
|
||||
.bind("plotselected", function (event, ranges) {
|
||||
vz.options.plot.xaxis.min = ranges.xaxis.from;
|
||||
|
@ -361,7 +360,7 @@ vz.entities.each = function(cb) {
|
|||
* Load json data from the backend
|
||||
*/
|
||||
vz.entities.loadData = function() {
|
||||
//$('#plot').html('<div class="plotcenter"><img src="images/loading.gif" alt="loading..." /><p>Loading...</p></div>');
|
||||
$('#overlay').html('<img src="images/loading.gif" alt="loading..." /><p>Loading...</p>');
|
||||
this.each(function(entity, parent) {
|
||||
if (entity.active && entity.type != 'group') { // TODO add group data aggregation
|
||||
vz.load('data', entity.uuid,
|
||||
|
@ -404,12 +403,15 @@ vz.drawPlot = function () {
|
|||
}
|
||||
});
|
||||
|
||||
if (data.length > 0) {
|
||||
vz.plot = $.plot($('#plot'), data, vz.options.plot);
|
||||
if (data.length == 0) {
|
||||
$('#overlay').html('<img src="images/empty.png" alt="no data..." /><p>Nothing to plot...</p>');
|
||||
data.push({}); // add empty dataset to show axis
|
||||
}
|
||||
else {
|
||||
$('#plot').html('<div class="plotcenter"><img src="images/empty.png" alt="no data..." /><p>Nothing to plot...</p></div>');
|
||||
$('#overlay').empty();
|
||||
}
|
||||
|
||||
vz.plot = $.plot($('#flot'), data, vz.options.plot);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
@ -34,9 +34,26 @@ tbody tr td {
|
|||
}
|
||||
|
||||
#plot {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#flot {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: absolute;
|
||||
width: 800px;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
|
||||
display: block;
|
||||
margin: auto;
|
||||
padding-top: 150px;
|
||||
text-align: center;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#footer {
|
||||
text-align: center;
|
||||
font-size: 0.7em;
|
||||
|
@ -129,14 +146,6 @@ tbody tr td {
|
|||
width: 20px;
|
||||
}
|
||||
|
||||
.plotcenter {
|
||||
display: block;
|
||||
margin: auto;
|
||||
padding-top: 150px;
|
||||
text-align: center;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
/* additional theming for user interface */
|
||||
.ui-error .ui-widget-header {
|
||||
background-image: url("../images/ui-bg_gloss-wave_35_red_500x100.png");
|
||||
|
|
Loading…
Add table
Reference in a new issue