375 lines
11 KiB
JavaScript
375 lines
11 KiB
JavaScript
/**
|
|
* Icinga.UI
|
|
*
|
|
* Our user interface
|
|
*/
|
|
(function(Icinga, $) {
|
|
|
|
'use strict';
|
|
|
|
Icinga.UI = function (icinga) {
|
|
|
|
this.icinga = icinga;
|
|
|
|
this.currentLayout = 'default';
|
|
|
|
this.debug = false;
|
|
|
|
this.debugTimer = null;
|
|
|
|
};
|
|
|
|
Icinga.UI.prototype = {
|
|
|
|
initialize: function () {
|
|
$('html').removeClass('no-js').addClass('js');
|
|
this.icinga.timer.register(this.refreshTimeSince, this, 1000);
|
|
this.triggerWindowResize();
|
|
this.fadeNotificationsAway();
|
|
},
|
|
|
|
fadeNotificationsAway: function()
|
|
{
|
|
var icinga = this.icinga;
|
|
$('#notifications li')
|
|
.not('.fading-out')
|
|
.not('.persist')
|
|
.addClass('fading-out')
|
|
.delay(7000)
|
|
.fadeOut('slow',
|
|
function() {
|
|
icinga.ui.fixControls();
|
|
this.remove();
|
|
});
|
|
|
|
},
|
|
|
|
enableDebug: function () {
|
|
this.debug = true;
|
|
this.debugTimer = this.icinga.timer.register(
|
|
this.refreshDebug,
|
|
this,
|
|
1000
|
|
);
|
|
this.fixDebugVisibility();
|
|
|
|
return this;
|
|
},
|
|
|
|
fixDebugVisibility: function () {
|
|
if (this.debug) {
|
|
$('#responsive-debug').css({display: 'block'});
|
|
} else {
|
|
$('#responsive-debug').css({display: 'none'});
|
|
}
|
|
return this;
|
|
},
|
|
|
|
disableDebug: function () {
|
|
if (this.debug === false) { return; }
|
|
|
|
this.debug = false;
|
|
this.icinga.timer.unregister(this.debugTimer);
|
|
this.debugTimer = null;
|
|
this.fixDebugVisibility();
|
|
return this;
|
|
},
|
|
|
|
flipContent: function () {
|
|
var col1 = $('#col1 > div').detach();
|
|
var col2 = $('#col2 > div').detach();
|
|
$('#col2').html('');
|
|
$('#col1').html('');
|
|
|
|
col1.appendTo('#col2');
|
|
col2.appendTo('#col1');
|
|
this.fixControls();
|
|
},
|
|
|
|
triggerWindowResize: function () {
|
|
this.onWindowResize({data: {self: this}});
|
|
},
|
|
|
|
/**
|
|
* Our window got resized, let's fix our UI
|
|
*/
|
|
onWindowResize: function (event) {
|
|
var self = event.data.self;
|
|
self.fixControls();
|
|
|
|
if (self.layoutHasBeenChanged()) {
|
|
self.icinga.logger.info(
|
|
'Layout change detected, switching to',
|
|
self.currentLayout
|
|
);
|
|
}
|
|
self.refreshDebug();
|
|
},
|
|
|
|
layoutHasBeenChanged: function () {
|
|
|
|
var layout = $('html').css('fontFamily').replace(/['",]/g, '');
|
|
var matched;
|
|
|
|
if (null !== (matched = layout.match(/^([a-z]+)-layout$/))) {
|
|
if (matched[1] === this.currentLayout &&
|
|
$('#layout').hasClass(layout)
|
|
) {
|
|
return false;
|
|
} else {
|
|
$('#layout').removeClass(this.currentLayout + '-layout').addClass(layout);
|
|
this.currentLayout = matched[1];
|
|
if (this.currentLayout === 'poor' || this.currentLayout === 'minimal') {
|
|
this.icinga.events.layout1col();
|
|
}
|
|
return true;
|
|
}
|
|
}
|
|
|
|
this.icinga.logger.error(
|
|
'Someone messed up our responsiveness hacks, html font-family is',
|
|
layout
|
|
);
|
|
|
|
return false;
|
|
},
|
|
|
|
layout1col: function () {
|
|
if (! $('#layout').hasClass('twocols')) { return; }
|
|
var $col2 = $('#col2');
|
|
icinga.logger.debug('Switching to single col');
|
|
$('#layout').removeClass('twocols');
|
|
$col2.removeAttr('data-icinga-url');
|
|
$col2.removeAttr('data-icinga-refresh');
|
|
$col2.removeData('icingaUrl');
|
|
$col2.removeData('icingaRefresh');
|
|
this.icinga.loader.stopPendingRequestsFor($col2);
|
|
$col2.html('');
|
|
this.fixControls();
|
|
},
|
|
|
|
layout2col: function () {
|
|
if ($('#layout').hasClass('twocols')) { return; }
|
|
icinga.logger.debug('Switching to double col');
|
|
$('#layout').addClass('twocols');
|
|
this.fixControls();
|
|
},
|
|
|
|
getAvailableColumnSpace: function () {
|
|
return $('#main').width() / this.getDefaultFontSize();
|
|
},
|
|
|
|
setColumnCount: function (count) {
|
|
if (count === 3) {
|
|
$('#main > .container').css({
|
|
width: '33.33333%'
|
|
});
|
|
} else if (count === 2) {
|
|
$('#main > .container').css({
|
|
width: '50%'
|
|
});
|
|
} else {
|
|
$('#main > .container').css({
|
|
width: '100%'
|
|
});
|
|
}
|
|
},
|
|
|
|
setTitle: function (title) {
|
|
document.title = title;
|
|
return this;
|
|
},
|
|
|
|
getColumnCount: function () {
|
|
return $('#main > .container').length;
|
|
},
|
|
|
|
prepareContainers: function () {
|
|
var icinga = this.icinga;
|
|
$('.container').each(function(idx, el) {
|
|
icinga.events.applyHandlers($(el));
|
|
icinga.ui.initializeControls($(el));
|
|
});
|
|
/*
|
|
$('#icinga-main').attr(
|
|
'icingaurl',
|
|
window.location.pathname + window.location.search
|
|
);
|
|
*/
|
|
},
|
|
|
|
refreshDebug: function () {
|
|
|
|
var size = this.getDefaultFontSize().toString();
|
|
var winWidth = $( window ).width();
|
|
var winHeight = $( window ).height();
|
|
var loading = '';
|
|
|
|
$.each(this.icinga.loader.requests, function (el, req) {
|
|
if (loading === '') {
|
|
loading = '<br />Loading:<br />';
|
|
}
|
|
loading += el + ' => ' + req.url;
|
|
});
|
|
|
|
$('#responsive-debug').html(
|
|
' Time: ' +
|
|
this.icinga.utils.formatHHiiss(new Date()) +
|
|
'<br /> 1em: ' +
|
|
size +
|
|
'px<br /> Win: ' +
|
|
winWidth +
|
|
'x'+
|
|
winHeight +
|
|
'px<br />' +
|
|
' Layout: ' +
|
|
this.currentLayout +
|
|
loading
|
|
);
|
|
},
|
|
|
|
refreshTimeSince: function () {
|
|
|
|
$('.timesince').each(function (idx, el) {
|
|
var m = el.innerHTML.match(/^(-?\d+)m\s(-?\d+)s/);
|
|
if (m !== null) {
|
|
var nm = parseInt(m[1]);
|
|
var ns = parseInt(m[2]);
|
|
if (ns < 59) {
|
|
ns++;
|
|
} else {
|
|
ns = 0;
|
|
nm++;
|
|
}
|
|
$(el).html(nm + 'm ' + ns + 's');
|
|
}
|
|
});
|
|
|
|
$('.timeunless').each(function (idx, el) {
|
|
var m = el.innerHTML.match(/^(-?\d+)m\s(-?\d+)s/);
|
|
if (m !== null) {
|
|
var nm = parseInt(m[1]);
|
|
var ns = parseInt(m[2]);
|
|
if (nm >= 0) {
|
|
if (ns > 0) {
|
|
ns--;
|
|
} else {
|
|
ns = 59;
|
|
nm--;
|
|
}
|
|
} else {
|
|
if (ns < 59) {
|
|
ns++;
|
|
} else {
|
|
ns = 0;
|
|
nm--;
|
|
}
|
|
}
|
|
$(el).html(nm + 'm ' + ns + 's');
|
|
}
|
|
});
|
|
},
|
|
|
|
createFontSizeCalculator: function () {
|
|
var $el = $('<div id="fontsize-calc"> </div>');
|
|
$('#layout').append($el);
|
|
return $el;
|
|
},
|
|
|
|
getDefaultFontSize: function () {
|
|
var $calc = $('#fontsize-calc');
|
|
if (! $calc.length) {
|
|
$calc = this.createFontSizeCalculator();
|
|
}
|
|
return $calc.width() / 1000;
|
|
},
|
|
|
|
initializeControls: function (parent) {
|
|
|
|
var self = this;
|
|
|
|
$('.controls', parent).each(function (idx, el) {
|
|
var $el = $(el);
|
|
|
|
if (! $el.next('.fake-controls').length) {
|
|
|
|
var newdiv = $('<div class="fake-controls"></div>');
|
|
newdiv.css({
|
|
height: $el.css('height')
|
|
});
|
|
$el.after(newdiv);
|
|
}
|
|
});
|
|
|
|
this.fixControls(parent);
|
|
},
|
|
|
|
fixControls: function ($parent) {
|
|
|
|
var self = this;
|
|
|
|
if ('undefined' === typeof $parent) {
|
|
|
|
$('#header').css({height: 'auto'});
|
|
$('#main').css({top: $('#header').css('height')});
|
|
$('#sidebar').css({top: $('#header').height() + 'px'});
|
|
$('#header').css({height: $('#header').height() + 'px'});
|
|
$('#inner-layout').css({top: $('#header').css('height')});
|
|
$('.container').each(function (idx, container) {
|
|
self.fixControls($(container));
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
self.icinga.logger.debug('Fixing controls for ', $parent);
|
|
|
|
$('.controls', $parent).each(function (idx, el) {
|
|
var $el = $(el);
|
|
var $fake = $el.next('.fake-controls');
|
|
var y = $parent.scrollTop();
|
|
|
|
$el.css({
|
|
position : 'fixed',
|
|
top : $parent.offset().top,
|
|
width : $fake.css('width')
|
|
});
|
|
|
|
$fake.css({
|
|
height : $el.css('height'),
|
|
display : 'block'
|
|
});
|
|
});
|
|
},
|
|
|
|
toggleFullscreen: function () {
|
|
$('#layout').toggleClass('fullscreen-layout');
|
|
this.fixControls();
|
|
},
|
|
|
|
getWindowId: function () {
|
|
var res = window.name.match(/^Icinga_([a-zA-Z0-9])$/);
|
|
if (res) {
|
|
return res[1];
|
|
}
|
|
return null;
|
|
},
|
|
|
|
hasWindowId: function () {
|
|
var res = window.name.match(/^Icinga_([a-zA-Z0-9])$/);
|
|
return typeof res === 'object';
|
|
},
|
|
|
|
setWindowId: function (id) {
|
|
window.name = 'Icinga_' + id;
|
|
},
|
|
|
|
destroy: function () {
|
|
// This is gonna be hard, clean up the mess
|
|
this.icinga = null;
|
|
}
|
|
|
|
};
|
|
|
|
}(Icinga, jQuery));
|