/** * Javascript functions for the frontend * * @author Florian Ziegler <fz@f10-home.de> * @author Justin Otherguy <justin@justinotherguy.org> * @author Steffen Vogel <info@steffenvogel.de> * @copyright Copyright (c) 2011, The volkszaehler.org project * @package default * @license http://opensource.org/licenses/gpl-license.php GNU Public License */ /* * This file is part of volkzaehler.org * * volkzaehler.org is free software: you can redistribute it and/or modify it * under the terms of the GNU General Public License as published by the Free * Software Foundation, either version 3 of the License, or any later version. * * volkzaehler.org is distributed in the hope that it will be useful, but * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more * details. * * You should have received a copy of the GNU General Public License along with * volkszaehler.org. If not, see <http://www.gnu.org/licenses/>. */ /** * Initialize the WUI (Web User Interface) */ vz.wui.init = function() { vz.options.tuples = Math.round($('#flot').width() / 3); // initialize dropdown accordion $('#accordion h3').click(function() { $(this).next().toggle('fast'); return false; }).next().hide(); $('#entity-list').show(); // open entity list by default // buttons $('button, input[type=button],[type=image],[type=submit]').button(); $('button[name=options-save]').click(vz.options.saveCookies); $('button[name=entity-add]').click(this.dialogs.init); $('#permalink').click(function() { window.location = vz.wui.getPermalink(); }); $('#snapshot').click(function() { window.location = vz.wui.getSnaplink(); }).hide(); // bind plot actions $('#controls button').click(this.handleControls); $('#controls').buttonset(); // auto refresh if (vz.options.refresh) { $('#refresh').attr('checked', true); vz.wui.setTimeout(); } $('#refresh').change(function() { if (vz.options.refresh = $(this).attr('checked')) { vz.wui.refresh(); // refresh once vz.wui.setTimeout(); } else { vz.wui.clearTimeout(); } }); // plot rendering $('#render-lines').attr('checked', (vz.options.render == 'lines')); $('#render-points').attr('checked', (vz.options.render == 'points')); $('input[name=render][type=radio]').change(function() { if ($(this).attr('checked')) { vz.options.render = $(this).val(); vz.wui.drawPlot(); } }); }; /** * Initialize dialogs */ vz.wui.dialogs.init = function() { // initialize dialogs $('#entity-add.dialog').dialog({ title: 'Kanal hinzufügen', width: 530, resizable: false }); $('#entity-add.dialog > div').tabs(); // load public entities vz.load({ controller: 'entity', success: function(json) { var entities = new Array; json.entities.each(function(index, json) { entities.push(new Entity(json)); }); entities.sort(Entity.compare); entities.each(function(index, entity) { $('#entity-public-entity').append( $('<option>').html(entity.title).val(entity.uuid).data('entity', entity) ); }); vz.middleware[0].public = entities; /* store */ } }); // show available entity types vz.capabilities.definitions.entities.each(function(index, def) { $('#entity-create select[name=type]').append( $('<option>').html(def.translation[vz.options.language]).data('definition', def).val(def.name) ); }); $('#entity-create option[value=power]').attr('selected', 'selected'); // set defaults $('#entity-subscribe-middleware').val(vz.middleware[0].url); $('#entity-public-middleware').append($('<option>').val(vz.middleware[0].url).text('Local (default)')); $('#entity-create-middleware').val(vz.middleware[0].url); $('#entity-subscribe-cookie').attr('checked', 'checked'); $('#entity-public-cookie').attr('checked', 'checked'); // actions $('#entity-subscribe input[type=button]').click(function() { try { var entity = new Entity({ uuid: $('#entity-subscribe-uuid').val(), cookie: Boolean($('#entity-subscribe-cookie').attr('checked')) }); if (middleware = $('#entity-subscribe-middleware').val()) { entity.middleware = middleware; } entity.loadDetails().done(function() { vz.entities.push(entity); vz.entities.saveCookie(); vz.entities.showTable(); vz.entities.loadData().done(vz.wui.drawPlot); }); // reload entity details and load data } catch (e) { vz.wui.dialogs.exception(e); } finally { $('#entity-add').dialog('close'); } }); $('#entity-public input[type=button]').click(function() { var entity = $('#entity-public-entity option:selected').data('entity'); try { entity.cookie = Boolean($('#entity-public-cookie').attr('checked')); entity.middleware = $('#entity-public-middleware option:selected').val(); vz.entities.push(entity); vz.entities.saveCookie(); vz.entities.showTable(); vz.entities.loadData().done(vz.wui.drawPlot); } catch (e) { vz.wui.dialogs.exception(e); } finally { $('#entity-add').dialog('close'); } }); $('#entity-create form').submit(function() { $(this).attr('action', $('#entity-create-middlware').val() + '/channel.json'); $('#entity-add').dialog('close'); }); // update event handler after lazy loading $('button[name=entity-add]').unbind('click', this.init); $('button[name=entity-add]').click(function() { $('#entity-add.dialog').dialog('open'); }); }; /** * Build link to current viewport * * @return string url */ vz.wui.getPermalink = function() { var uuids = new Array; vz.entities.each(function(entity, parent) { if (entity.active && entity.definition.model == 'Volkszaehler\\Model\\Channel') { uuids.push(entity.uuid); } }, true); // recursive! var params = $.param({ from: Math.floor(vz.options.plot.xaxis.min), to: Math.ceil(vz.options.plot.xaxis.max), uuid: uuids.unique() }); return window.location.protocol + '//' + window.location.host + window.location.pathname + '?' + params; } /** * Build link to rendered image of current viewport * * @return string url */ vz.wui.getSnaplink = function() { var uuids = new Array; vz.entities.each(function(entity, parent) { if (entity.active) { uuids.push(entity.uuid); } }, true); // recursive! return vz.options.middlewareUrl + '/data/' + uuids[0] + '.png?' + $.param({ from: Math.floor(vz.options.plot.xaxis.min), to: Math.ceil(vz.options.plot.xaxis.max) }); } vz.wui.zoom = function(from, to) { vz.options.plot.xaxis.min = from; vz.options.plot.xaxis.max = to; // we dont want to zoom/pan into the future if (vz.options.plot.xaxis.max > new Date().getTime()) { var delta = vz.options.plot.xaxis.max - vz.options.plot.xaxis.min; vz.options.plot.xaxis.max = new Date().getTime(); vz.options.plot.xaxis.min = new Date().getTime() - delta; } vz.options.plot.yaxis.max = null; // autoscaling vz.options.plot.yaxis.min = 0; // fixed to 0 vz.entities.loadData().done(vz.wui.drawPlot); } /** * Bind events to handle plot zooming & panning */ vz.wui.initEvents = function() { $('#plot') .bind("plotselected", function (event, ranges) { vz.wui.zoom(ranges.xaxis.from, ranges.xaxis.to); }) /*.bind('plotpan', function (event, plot) { var axes = plot.getAxes(); vz.options.plot.xaxis.min = axes.xaxis.min; vz.options.plot.xaxis.max = axes.xaxis.max; vz.options.plot.yaxis.min = axes.yaxis.min; vz.options.plot.yaxis.max = axes.yaxis.max; }) .bind('mouseup', function(event) { vz.entities.loadData().done(vz.wui.drawPlot); }) .bind('plotzoom', function (event, plot) { var axes = plot.getAxes(); vz.options.plot.xaxis.min = axes.xaxis.min; vz.options.plot.xaxis.max = axes.xaxis.max; vz.options.plot.yaxis.min = axes.yaxis.min; vz.options.plot.yaxis.max = axes.yaxis.max; vz.entities.loadData().done(vz.wui.drawPlot); });*/ }; /** * Move & zoom in the plotting area */ vz.wui.handleControls = function () { var delta = vz.options.plot.xaxis.max - vz.options.plot.xaxis.min; var middle = vz.options.plot.xaxis.min + delta/2; switch($(this).val()) { case 'move-last': vz.wui.zoom( new Date().getTime() - delta, new Date().getTime() ); break; case 'move-back': vz.wui.zoom( vz.options.plot.xaxis.min - delta, vz.options.plot.xaxis.max - delta ); break; case 'move-forward': vz.wui.zoom( vz.options.plot.xaxis.min + delta, vz.options.plot.xaxis.max + delta ); break; case 'zoom-reset': vz.wui.zoom( middle - vz.options.defaultInterval/2, middle + vz.options.defaultInterval/2 ); break; case 'zoom-in': vz.wui.zoom( middle - delta/4, middle + delta/4 ); break; case 'zoom-out': vz.wui.zoom( middle - delta, middle + delta ); break; case 'zoom-hour': hour = 60*60*1000; vz.wui.zoom( middle - hour/2, middle + hour/2 ); break; case 'zoom-day': var day = 24*60*60*1000; vz.wui.zoom( middle - day/2, middle + day/2 ); break; case 'zoom-week': var week = 7*24*60*60*1000; vz.wui.zoom( middle - week/2, middle + week/2 ); break; case 'zoom-month': var month = 30*24*60*60*1000; vz.wui.zoom( middle - month/2, middle + month/2 ); break; case 'zoom-year': var year = 365*24*60*60*1000; vz.wui.zoom( middle - year/2, middle + year/2 ); break; } }; /** * Refresh plot with new data */ vz.wui.refresh = function() { var delta = vz.options.plot.xaxis.max - vz.options.plot.xaxis.min; vz.wui.zoom( // move plot new Date().getTime() - delta, new Date().getTime() ); }; /** * Refresh graphs after timeout ms, with a minimum of vz.options.minTimeout ms */ vz.wui.setTimeout = function() { // clear an already set timeout if (vz.wui.timeout != null) { window.clearTimeout(vz.wui.timeout); vz.wui.timeout = null; } var t = Math.max((vz.options.plot.xaxis.max - vz.options.plot.xaxis.min) / vz.options.tuples, vz.options.minTimeout); vz.wui.timeout = window.setTimeout(vz.wui.refresh, t); $('#refresh-time').html('(' + Math.round(t / 1000) + ' s)'); } /** * Stop auto-refresh of graphs */ vz.wui.clearTimeout = function(text) { $('#refresh-time').html(text || ''); var rc = window.clearTimeout(vz.wui.timeout); vz.wui.timeout = null; return rc; } /** * Rounding precision * * Math.round rounds to whole numbers * to round to one decimal (e.g. 15.2) we multiply by 10, * round and reverse the multiplication again * therefore "vz.options.precision" needs * to be set to 1 (for 1 decimal) in that case */ vz.wui.formatNumber = function(number, prefix) { var siPrefixes = ['k', 'M', 'G', 'T']; var siIndex = 0; while (prefix && number > 1000 && siIndex < siPrefixes.length-1) { number /= 1000; siIndex++; } number = Math.round(number * Math.pow(10, vz.options.precision)) / Math.pow(10, vz.options.precision); // rounding if (prefix) { number += (siIndex > 0) ? ' ' + siPrefixes[siIndex-1] : ' '; } return number; } vz.wui.updateHeadline = function() { var from = $.plot.formatDate(new Date(vz.options.plot.xaxis.min), '%d. %b %y %h:%M', vz.options.plot.xaxis.monthNames); var to = $.plot.formatDate(new Date(vz.options.plot.xaxis.max), '%d. %b %y %h:%M', vz.options.plot.xaxis.monthNames); $('#title').html(from + ' - ' + to); } /** * Draws plot to container */ vz.wui.drawPlot = function () { vz.wui.updateHeadline(); var series = new Array; vz.entities.each(function(entity) { if (entity.active && entity.data && entity.data.tuples && entity.data.tuples.length > 0) { var serie = { data: entity.data.tuples, color: entity.color, lines: { show: (vz.options.render == 'lines'), steps: (entity.definition.interpreter == 'Volkszaehler\\Interpreter\\MeterInterpreter') }, points: { show: (vz.options.render == 'points') } }; series.push(serie); } }, true); // recursive! if (series.length == 0) { $('#overlay').html('<img src="images/empty.png" alt="no data..." /><p>nothing to plot...</p>'); series.push({}); // add empty dataset to show axes } else { $('#overlay').empty(); } vz.plot = $.plot($('#flot'), series, vz.options.plot); // disable automatic refresh if we are in past if (vz.options.refresh && vz.options.plot.xaxis.max < new Date().getTime() - 1000) { vz.wui.clearTimeout('(suspended)'); } else if (vz.options.refresh) { vz.wui.setTimeout(); } }; /* * Error & Exception handling */ vz.wui.dialogs.error = function(error, description, code) { if (code !== undefined) { error = code + ': ' + error; } $('<div>') .append($('<span>').html(description)) .dialog({ title: error, width: 450, dialogClass: 'ui-error', resizable: false, modal: true, buttons: { Ok: function() { $(this).dialog('close'); } } }); }; vz.wui.dialogs.exception = function(exception) { this.error(exception.type, exception.message, exception.code); };