');
initHoverables(this.basicView);
this.facilityItem = this.basicView.find('.facilityItem');
/***************************************************************************
* Interfaces (observer, view)
**************************************************************************/
this.update = function(action, object) {
// we're listing on a facility-holder
switch (action) {
case 'add':
// don't allow facility changes
if (this.currentFacility != null)
return;
// we've got a new item, hopefully a facility :)
if (!object || !object.viewType || object.viewType != 'FAC')
return;
this.currentFacility = object;
this.selectedModel = object;
// hide loader icon
this.facilityItem.find('.icon-loading').hide();
// set header
this.basicView.find('.fac-name').html(this.currentFacility.name);
// intstall fac name listener
this.currentFacility.addObserver( {
object : this,
update : function(action, object) {
if (action == 'name')
this.object.basicView.find('.fac-name').html(
this.object.currentFacility.name)
}
});
// create the room view for this facility.
this.createRoomView(this.currentFacility);
this.createDeviceView(this.currentFacility);
this.createMeterView(this.currentFacility);
// fire a facility selection event if not requested otherwise
if (this.options.initialSelect) this.notify('select', this.selectedModel);
break;
case 'remove':
// we need to remove our rooms... :( this should not happen actually.
this.roomView.dispose();
this.roomView = null;
break;
case 'select':
this.basicView
.find(
'.item-info.ui-state-active, .facilityItem.ui-state-active')
.removeClass('ui-state-active');
// spill over to default for notifying our observers
default:
//console.info('notifying ',action,'with ',object);
this.notify(action, object);
break;
}
};
this.initHTML = function(container) {
this.basicView.appendTo(container);
// make sure we're initialized with correct heights.
this.basicView.bind('onshow', this, function(e) {
if (e.data.heightInitialized)
return;
// this is needed only once
e.data.heightInitialized = true;
// check the height of our contents.
if (e.data.basicView.find('.ui-accordion-content')
.css('height') !== 0)
return;
// hasn't been shown before, so rebuild it to initialze content
// heights.
e.data.basicView.children('.children').accordion('destroy');
e.data.basicView.children('.children').accordion( {
fillSpace : true
});
});
// this.basicView.children('.children').accordion('destroy');
this.basicView.children('.children').accordion( {
fillSpace : true
});
};
/***************************************************************************
* additional functions
**************************************************************************/
// can create a fresh room view from scratch.
this.createRoomView = function(facility) {
// find container
var container = this.basicView.children('.children').find('.rooms');
// if not there, do not create
if (container.size() == 0)
return;
// replace existing view.
if (this.roomView != null) {
this.roomView.dispose();
}
// this is the treeview for all rooms, it gets initialized as pure treeview (without a itemview) on the facility
this.roomView = new TreeView(facility, this.options);
// need event notification of this child.
this.roomView.addObserver(this);
// direct child children, and there we search for rooms.
this.roomView.initHTML(container);
return this.roomView;
};
this.createDeviceView = function(parent) {
// find container
var container = this.basicView.children('.children').find('.devices');
// if not there, do not create
if (container.size() == 0)
return;
if (this.deviceView != null) {
this.deviceView.dispose();
}
this.deviceView = new DeviceListView(parent, this.options, {viewType : 'DEV'}, {});
// need event notification of this child.
this.deviceView.addObserver(this);
this.deviceView.initHTML(container);
return this.deviceView;
};
this.createMeterView = function(parent) {
// find container
var container = this.basicView.children('.children').find('.meters');
// if not there, do not create
if (container.size() == 0)
return;
if (this.meterView != null) {
this.meterView.dispose();
}
this.meterView = new DeviceListView(parent, this.options, {
globality : 'FAC'
}, {}); // globality is a device-specific field.
// need event notification of this child.
this.meterView.addObserver(this);
this.meterView.initHTML(container);
return this.meterView;
};
/***************************************************************************
* initialization
**************************************************************************/
this.facilityItem.find('a').data('view', this).click(
function() {
$(this).data('view').update('select',
$(this).data('view').currentFacility);
$(this).parent().addClass('ui-state-active');
return false;
});
// init if model isn't empty, but use only the first item (must be an
// facility).
if (this.model.children.length > 0) {
if (this.model.children[0].viewType == 'FAC') {
this.update('add', this.model.children[0]);
}
}
}
// creates a treeview, creates the item-views itself
function TreeView(tree, options) {
if (!tree) {
return null;
}
// intialize options
if (!options)
this.options = {};
else
this.options = options;
// possible actions: [rename, remove, add, manual-input]
if (!this.options.actions)
this.options.actions = new Array(); // default: no action enabled.
if (!this.options.expandToLevel)
this.options.expandToLevel = 3; // default: you can see the 3rd level.
/***************************************************************************
* inheritance
**************************************************************************/
this.inheritFrom = Observable;
this.inheritFrom();
this.inheritFrom = Observer;
this.inheritFrom();
//
this.model = tree;
this.model.addObserver(this);
this.childViews = new Array();
/***************************************************************************
* private members
**************************************************************************/
var that = this;
// factory method for item views
function createItemView(itemModel) {
switch (itemModel.viewType) {
case 'DEV':
return new DeviceItemView(itemModel, that.options);
break;
default:
return new TreeItemView(itemModel, that.options);
break;
}
}
function applyActionFilter(item) {
for ( var i = 0; i < that.options.actions.length; i++) {
item.basicView.find(
'.actions:first .' + that.options.actions[i] + '-item')
.show();
}
}
function addItem(item)
{
var newItemView = createItemView(item);
applyActionFilter(newItemView);
// we want to get notified on view events
newItemView.addObserver(that);
// save it for reference
that.childViews.push(newItemView);
// create container html
var newChildContainer = $('
')
.appendTo(that.basicView)
.hide()
;
// let the child view initialize its html under a given element
newItemView.initHTML($('.item-content', newChildContainer));
// show it
newChildContainer.show('normal');
// make it draggable
newChildContainer.draggable({
appendTo: 'body',
cursor: 'move',
distance: 7,
revert: true,
revertDuration: 0,
opacity: .75,
stack: {group: 'devices', min: 150}
});
return newItemView;
}
/**********************************
* public members, initializations
**********************************/
// basic html code and back-reference for event handlers
this.basicView = $('
').data('view', this);
// create all item views.
for ( var i = 0; i < this.model.children.length; i++) {
addItem(this.model.children[i]);
}
// enable drag'n'drop for moving devices between sections
function initDragNDrop() {
that.basicView.find('li.item.DEV')
}
// appends its html to a given node, needs to be called once
this.initHTML = function(parent) {
this.basicView.appendTo(parent);
// make devices draggable
initDragNDrop();
var dropper = this.basicView.parents('.tree-item');
if (dropper.size() == 0) dropper = this.basicView.parent();
// accept devices to be dropped.
dropper.droppable({
accept: 'li.item.DEV',
hoverClass: 'ui-state-highlight',
greedy: true,
drop: function(event, ui) {
// we need the device model
var model = ui.draggable.find('.tree-item').data('view').model;
that.model.moveChild(model);
}
});
};
// is called on model canges and child-view events
this.update = function(action, object) {
//console.info('tree updating: "', action, '" with ', object);
switch (action) {
case 'remove':
// an item has been deleted
for (i = 0; i < this.childViews.length; i++) {
if (this.childViews[i].model == object) {
// find child-container and hide it, then remove it
this.childViews[i].basicView
.parents('.item:first')
.hide('normal', function() {$(this).remove();})
;
// notify observer about removal of view
this.notify('removeView', this.childViews[i]);
// dispose corresponding childview
this.childViews.splice(i, 1);
break;
}
}
break;
case 'add':
// an item has been added, corresponding view must be created and notify observer about addition of childView
this.notify('addView', addItem(object));
break;
case 'select':
//this one comes from a child view
this.basicView.find('.ui-state-active').removeClass(
'ui-state-active');
// spill over to the default action as we want to notify
// nevertheless.
default:
this.notify(action, object);
}
};
this.dispose = function() {
// delete it from the DOM
this.basicView.remove();
};
}
/*
* this view class does not inherit from a treeView! its independent.
* Nevertheless it embeds an additional treeView for the subtree. This
* gives more control about nesting.
*/
function TreeItemView(treeItemModel, options) {
//inherit from observable
this.inheritFrom = Observable;
this.inheritFrom();
// init options, we COPY the given options with the help the JSON parser.
if (!options)
this.options = {};
else
this.options = JSON.parse(JSON.stringify(options));
if (!this.options.actions)
this.options.actions = new Array('expand');
else if (!this.options.actions.contains('expand'))
this.options.actions.push('expand');
if (this.options.expandToLevel === undefined
|| this.options.expandToLevel === null)
this.options.expandToLevel = 2; // default: you can see the 3rd level.
else
this.options.expandToLevel--; // we do count down here.
// skip zero is it gets interpreted as null
if (this.options.expandToLevel == 0)
this.options.expandToLevel = -1;
/***************************************************************************
* public members
**************************************************************************/
this.actionItems = {
expand : $('')
}
this.model = treeItemModel;
this.model.addObserver(this);
// the actual item to be inserted
this.basicView = $('
' + '
'
+ '' + this.model.name + ''
+ '' + '
'
+ ''
+ '
').data('view', this);
// inject action Items
this.basicView.find('.item-name').before(this.actionItems.expand);
this.refreshActions = function() {
if (this.model.children.length > 0
&& this.options.actions.contains('expand')) {
this.actionItems.expand.show('fast');
} else {
this.actionItems.expand.hide();
}
}
/****************************
* interfaces: observer, view
***************************/
this.initHTML = function(parent) {
this.refreshActions();
this.basicView = this.basicView.appendTo(parent);
initIconTooltips(this.basicView);
};
this.update = function(action, object) {
this.refreshActions();
switch (action) {
case 'name':
// care about the interesting events
$('.item-name:first', this.basicView).html(this.model.name);
break;
case 'add':
// expand tree if a subitem was added.
if (this.actionItems.expand.is('.closed'))
this.actionItems.expand.click();
break;
case 'remove':
break;
default:
// don't care about unknown events, maybe another observer knows how to handle.
this.notify(action, object);
break;
}
};
this.dispose = function() {
// delete it from the DOM
this.basicView.remove();
};
/***************************************************************************
* initialization
**************************************************************************/
// devices should not be able to contain other devices - model is a bit to
// powerful here, but the view hides this
if (this.model.viewType != 'DEV') {
// create embedded tree
this.treeView = new TreeView(this.model, this.options);
this.treeView.addObserver(this);
this.treeView.initHTML($('.sub-content', this.basicView));
}
// hover states
this.basicView
.children('.item-info,.item-info .actions a,.expander')
.hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
)
;
// collapse, expand
this.actionItems.expand.data('view', this)
.click( function(e) {
if ($(this).hasClass('closed')) {
// open
$(this).removeClass('closed').addClass('expanded')
.children().removeClass('ui-icon-triangle-1-e')
.addClass('ui-icon-triangle-1-s').end()
.data('view').basicView.children('.sub-content')
.show('blind', {}, 'fast');
} else if ($(this).hasClass('expanded')) {
// close.
$(this).removeClass('expanded').addClass('closed')
.children().removeClass('ui-icon-triangle-1-s')
.addClass('ui-icon-triangle-1-e').end()
.data('view').basicView.children('.sub-content')
.hide('blind', {}, 'fast');
}
return false;
});
// registering event handler and installing a back-reference therefore.
this.basicView
.children('.item-info')
.data('view', this)
.click(function(e) {
$(this).data('view').notify('select',$(this).data('view').model);
$(this).addClass('ui-state-active');
})
;
}
/**
* subclass treeitem for device specific view
* - click is handled differently
* - on creation details must be entered wizard-like
* - additional details may be altered afterwards
* - if we're a manual meter, provide a manualInput action-item.
*
*/
function DeviceItemView(treeItemModel, options) {
/********************
* inheritance
********************/
this.inheritFrom = TreeItemView;
this.inheritFrom(treeItemModel, options);
/***************************************************************************
* private helpers
**************************************************************************/
var mySelf = this;
/**********************************
* interfaces overrides: observer
**********************************/
this.superUpdate = this.update;
this.update = function(action, object) {
// call super
this.superUpdate(action, object);
// react only on state changes
if (action != 'state' || !this.options.actions.contains('manualInput'))
return;
// evaluate model state
var state = this.model.getField('state');
// object holds the old state. if it's equal do nothing.
// if (state == object) return;
// react on state changes. transition is from "object" to "state"
switch (state) {
// new means that there isn't a driver for this device
case 'new':
this.notify('select', this.model);
case null:
break;
}
};
/********************
* initialization
********************/
this.detailView = $('.sub-content', this.basicView).removeClass(
'sub-content').addClass('device-details').addClass('hidden') // regardless
// of
// expandToLevel,
// this
// should
// be
// hidden.
.css('border-top-width', '0px')
;
}
function DeviceListView(treeModel, options, includeFilters, excludeFilters) {
// intialize options
if (!options)
this.options = {};
else
this.options = options;
// possible actions: [rename, remove, add, manual-input]
if (!this.options.actions)
this.options.actions = new Array(); // default: no action enabled.
/***************************************************************************
* inheritance
**************************************************************************/
this.inheritFrom = Observable;
this.inheritFrom();
/***************************************************************************
* private members
**************************************************************************/
var that = this;
// helper to determine the full location breadcrumb
function createFullLocation(itemModel) {
var item = itemModel;
var result = "";
while (item.parent && item.parent.name && item.parent.viewType != 'FAC') {
result = item.parent.name + ' > ' + result;
item = item.parent;
}
result = result.replace(' ', ' ')
return result;
}
function applyActionFilter(item) {
for ( var i = 0; i < that.options.actions.length; i++) {
// console.info('Action ',that.options.actions[i], ' matched. (',that.options.actions,')');
item.basicView.find(
'.actions .' + that.options.actions[i] + '-item').show(1);
}
}
/**
* helper to check if the filter matches. includes take precedence over excludes.
* that means, if you provide an include filter, the whole exclude filter gets ignored. Also we're
* very strict here, include every providedd field MUST be present and MATCH on includes, an exception are objects,
* which are only checked for existence. Regarding excludes if only one single field is present AND matches,
* the device gets excluded.
* @return True if the filters match, false otherwise
*/
function matchFilter(device) {
// only filter devices. rooms and sections are not wanted.
if (!device || !device.viewType || device.viewType != 'DEV') return false;
result = true;
if (includeFilters) {
// include if every field matches.
for (var field in includeFilters) {
if (!device[field] || (typeof(device[field]) != 'object' && device[field] != includeFilters[field])) {
// fail. we can halt and return.
// console.info('Not Included',device.name,':
// ',device[field],'=!',includeFilters[field],' (',field,')
// ');
result = false;
break;
}
}
// console.info('Included',device.name);
} else if (excludeFilters) {
// exclude if one matches
for (var field in excludeFilters) {
if (device[field] && device[field] == excludeFilters[field]) {
// fail. we can halt and return.
result = false;
break;
}
}
}
return result;
}
function unRegisterLocationObserver(model, listener) {
var item = model;
while (item.parent) {
item.parent.removeObserver(listener);
item = item.parent;
}
}
function registerLocationObserver(model, listener) {
var item = model;
while (item.parent) {
item.parent.addObserver(listener);
item = item.parent;
}
}
function addItem(model) {
// don't add if filter doesn't match
if (!matchFilter(model))
return;
// console.info('-- added ', model.name);
// create and init a fresh view
that.devices[model.viewType + model.id] = new DeviceItemView(model);
// modify the view a bit
that.devices[model.viewType + model.id].basicView
.find('.actions')
.prepend(
'
');
// enable only chosen actions.
applyActionFilter(that.devices[model.viewType + model.id]);
// add a tiny inline observer :)
that.devices[model.viewType + model.id].locationObserver = {
subject : that.devices[model.viewType + model.id],
shortView : that.devices[model.viewType + model.id].basicView
.find('.short-location'),
fullView : that.devices[model.viewType + model.id].basicView
.find('.full-location'),
update : function(action, object) {
if (action == 'name') {
// one of the parents have been updated.
this.shortView
.html((this.subject.model.parent.viewType != 'FAC' ? this.subject.model.parent.name
: ''));
this.fullView.html(createFullLocation(this.subject.model.parent));
}
}
};
// add it to all parents
registerLocationObserver(model,
that.devices[model.viewType + model.id].locationObserver);
// call location update once to initialize.
that.devices[model.viewType + model.id].locationObserver.update('name',
null);
// override dispose for removing the wrapping
that.devices[model.viewType + model.id].dispose = function() {
that.devices[model.viewType + model.id].basicView.parent().remove();
}
// call the modified updater for override the initialization of the item.
that.devices[model.viewType + model.id].update('parent', model.name);
// append it.
that.devices[model.viewType + model.id].initHTML($(
'
').appendTo(that.basicView));
// install select listener
that.devices[model.viewType + model.id].addObserver(that);
// console.info('Listview ', that.basicView, ' observing ',
// that.devices[model.viewType+model.id].basicView, ' for selects.');
}
// simple recurser to add everywhere as view
function addSubTree(model) {
// we're checking for adds, removes and selects
model.addObserver(that);
// this observer checks whether our filter matches or unmatches on
// changes
model.addObserver( {
view : that,
model : model,
update : function(action, object) {
//console.info('a:',action,' o:',object);
if (action == 'add' || action == 'remove' || action == 'select')
return;
// console.info(' -- v:
// ',this.view.basicView.parent().prev().find('a').text(),' m:
// ',this.model.name);
if (!this.view.devices[this.model.viewType + this.model.id]) {
// check whether we may match the item now (is checked right before add)
// console.info('-- filtered');
addItem(this.model);
} else {
// check whether we do not match the item anymore
for (key in this.view.devices) {
//console.info(' -- Displayed: ', key);
}
if (!matchFilter(this.model)) {
//console.info(' -- Compare: ',this.model.name, ' ', this.view.devices[this.model].model.name);
unRegisterLocationObserver(this.model,
this.view.devices[this.model].locationObserver)
this.view.devices[this.model].dispose();
delete this.view.devices[this.model];
// console.info(' -- deleted.');
}
}
}
});
// this checks for filter and creates view if matches.
addItem(model);
for ( var i = 0; i < model.children.length; i++) {
addSubTree(model.children[i]);
}
}
/*****************************
* public fields
*****************************/
this.model = treeModel;
this.devices = new Array();
this.basicView = $('
');
/***************************************************************************
* Initialization
**************************************************************************/
addSubTree(treeModel);
/***************************************************************************
* interfaces: Observer, View
**************************************************************************/
this.update = function(action, object) {
switch (action) {
case 'add':
addSubTree(object);
break;
case 'remove':
if (this.devices[object.viewType + object.id] != null) {
unRegisterLocationObserver(object, this.devices[object.viewType
+ object.id].locationObserver)
this.devices[object.viewType + object.id].dispose();
delete this.devices[object.viewType + object.id];
}
break;
case 'select': // gets called by child views
// remove the currently active class
this.basicView.find('.ui-state-active').removeClass(
'ui-state-active');
this.notify('select', object);
break;
default:
}
}
this.initHTML = function(container) {
this.basicView.appendTo(container);
this.basicView.find('.short-location').hover(
function() {
$(this).parent().find('.full-location').stop(false, true)
.show('slide', {
direction : "right"
}, '100').css( {
display : 'inline-block'
});
},
function() {
$(this).parent().find('.full-location').stop(false, true)
.hide('slide', {
direction : "right"
}, '100');
});
};
this.dispose = function() {
this.basicView.remove();
}
/*****************************
* public methods
*****************************/
}
function EditView(urls, model) {
// the urls for specific item properties to be matched.
this.urls = urls;
this.model = model;
if (this.model)
this.model.addObserver(this);
this.basicView = null;
var that = this;
function updateForm() {
if (that.basicView == null)
return;
that.basicView.css('visibility', 'hidden');
that.basicView.parent().addClass('loading');
// TODO echo that a model should be selected.
if (!that)
return;
var url = '';
var data = null;
KEY_LOOP: for (field in that.urls) {
if (typeof (that.model[field]) != 'undefined') {
VALUE_LOOP: for (key in that.urls[field]) {
if (that.model[field] == key) {
url = that.urls[field][key].url;
data = {}
data[that.urls[field][key].idKey] = that.model.id;
// matched one possibility, so break both loops.
break KEY_LOOP;
}
}
}
}
// if no matching URL was found
if (url == '') {
that.basicView.parent().removeClass('loading');
return;
}
that.basicView.load(url, data, function() {
that.basicView.parent().removeClass('loading');
that.basicView.css('visibility', 'visible');
kgCore.ajaxFormInitializer(null, 'success', null, $(this), null);
});
}
function addCursor() {
var cursor = $('');
that.basicView.append(cursor);
// determine active element
// var activeElement = that.masterView.
}
this.refresh = function() {
updateForm()
};
this.update = function(action, object) {
switch (action) {
case 'select':
if (!object)
return;
// listen to somebody else.
if (this.model) {
this.model.removeObserver(this);
}
this.model = object;
this.model.addObserver(this);
// update the Form
updateForm();
break;
case 'addView':
// select the freshman!
if (object && object.basicView)
object.basicView.children('.item-info').click();
break;
case 'removeView':
if (!object || !object.model)
break;
if (object.model == this.model) {
this.basicView.css('visibility', 'hidden');
this.basicView.contents().remove();
}
break;
}
};
this.setMasterView = function(masterView) {
this.masterView = masterView;
this.masterView.addObserver(this);
}
this.initHTML = function(container) {
this.basicView = $(container);
this.basicView.data('view', this);
}
}
function ChartView(model) {
this.model = model;
if (this.model)
this.model.addObserver(this);
this.type = 'PCH'; // PowerConsumptionHistory
this.basicView = $('