/**
This module manages active list of remote stations (screens) retrieved from the server
Poll for stations status every n seconds, as well as remote manage each station individually.
@class StationsListView
@constructor
@param {String} i_container element that CompCampaignNavigator inserts itself into
@return {Object} instantiated StationsListView
**/
define(['jquery', 'backbone', 'StationsCollection', 'LiveInput'], function ($, Backbone, StationsCollection, LiveInput) {
BB.SERVICES.STATIONS_LIST_VIEW = 'StationsListView';
var StationsListView = Backbone.View.extend({
/**
Constructor
@method initialize
**/
initialize: function () {
var self = this;
BB.comBroker.setService(BB.SERVICES['STATIONS_LIST_VIEW'], self);
self.m_snapshotInProgress = undefined;
self.m_imageReloadCount = 0;
self.m_imagePath = '';
self.m_selected_station_id = undefined;
self.m_property = BB.comBroker.getService(BB.SERVICES['PROPERTIES_VIEW']);
self.m_property.initPanel(Elements.STATION_PROPERTIES);
self.m_stationCollection = new StationsCollection();
self.listenTo(self.m_stationCollection, 'add', function (i_model) {
$(Elements.STATION_ALERT).hide();
self._onAddStation(i_model);
self._listenStationSelected();
});
self.listenTo(self.m_stationCollection, 'change', function (i_model) {
self._onUpdateStation(i_model);
});
BB.comBroker.listen(BB.EVENTS.STATION_NAME_CHANGED, function (e) {
var stationID = e.edata.stationID;
var stationName = e.edata.stationName;
var a = $(Elements.STATION_LIST_VIEW).find('[data-station_id="' + stationID + '"]');
$(Elements.STATION_LIST_VIEW).find('[data-station_id="' + stationID + '"]').find(Elements.CLASS_LIVE_RENAME).text(stationName);
});
self._wireUI();
self._initStationRename();
self._wireSnapshot();
self._populateStationCampaignDropDown(-1);
self._listenEnableServerMode();
self._listenIpChange();
self._listenPortChange();
},
/**
Listen to changes in IP selection to assign to station local server
@method _listenIpChange
**/
_listenIpChange: function () {
var self = this;
var input = self.m_liveSationIpInput = new LiveInput({
el: Elements.STATION_SERVER_IP,
dataLocalize: 'stationServerIp',
placeHolder: 'Station IP',
value: ''
}).on('LIVE_INPUT_CHANGED', function (e) {
var stationRecord = BB.Pepper.getStationRecord(self.m_selected_station_id);
stationRecord.lan_server_ip = e.value;
BB.Pepper.setStationRecord(self.m_selected_station_id, stationRecord);
}
).on('LIVE_INPUT_VALID_ERROR', function (e) {
}
);
input.rules({
1: [input.getValidator().noEmpty, $(Elements.MSG_LIVEINPUT_NOT_BLANK).text()],
2: [input.getValidator().isIP, $(Elements.MSG_LIVEINPUT_NO_IP).text()]
});
},
/**
Listen to changes in port selection to assign to station local server
@method _listenPortChange
**/
_listenPortChange: function () {
var self = this;
var input = self.m_liveSationPortInput = new LiveInput({
el: Elements.STATION_SERVER_PORT,
dataLocalize: 'stationServerPort',
placeHolder: 'Station Port',
value: '1024'
}).on('LIVE_INPUT_CHANGED', function (e) {
var stationRecord = BB.Pepper.getStationRecord(self.m_selected_station_id);
stationRecord.lan_server_port = e.value;
BB.Pepper.setStationRecord(self.m_selected_station_id, stationRecord);
}
).on('LIVE_INPUT_VALID_ERROR', function (e) {
}
);
input.rules({
1: [
input.getValidator().isNumberInRange, $(Elements.MSG_LIVEINPUT_NOT_PORT).text(), {
min: 1024,
max: 65535
}]
});
},
/**
Listen to enable server mode
@method _listenEnableServerMode
@param {Number} i_playerData
@return {Number} Unique clientId.
**/
_listenEnableServerMode: function () {
var self = this;
$(Elements.STATION_SERVER_MODE).on('change', function (e) {
var stationRecord = BB.Pepper.getStationRecord(self.m_selected_station_id);
var mode = $(Elements.STATION_SERVER_MODE).prop('checked');
if (mode) {
$(Elements.STATION_SERVER_PROPS).show();
stationRecord.lan_server_enabled = 'True';
} else {
stationRecord.lan_server_enabled = 'False';
$(Elements.STATION_SERVER_PROPS).hide();
}
BB.Pepper.setStationRecord(self.m_selected_station_id, stationRecord);
});
},
/**
Render is called when the StackView is in view which tightly coupled with StationView instance
so we can update the station list status when this View is visible
@method render
**/
render: function () {
var self = this;
self.m_stationCollection.resumeGetRemoteStations();
self.getTotalActiveStation();
//log('in view');
},
/**
Unrender method used to notify this View that is it no longer visible so we can stop
updating remote station status to increase app perfromance
@method unrender
**/
unrender: function () {
var self = this;
self.m_stationCollection.pauseGetRemoteStations();
log('out of view');
},
/**
Init station rename component
@method _initStationRename
**/
_initStationRename: function () {
var self = this;
self.m_liveRenameInput = new LiveInput({
el: Elements.STATION_RENAME,
dataLocalize: 'stationRename',
placeHolder: 'Station rename',
value: ''
}).on('LIVE_INPUT_CHANGED', function (e) {
var stationLI = $(Elements.STATION_LIST_VIEW).find('[data-station_id="' + self.m_selected_station_id + '"]');
$(stationLI).find(Elements.CLASS_LIVE_RENAME).text(e.value);
pepper.setStationName(self.m_selected_station_id, e.value);
self._getStationModel(self.m_selected_station_id).set('stationName', e.value);
});
},
/**
Listen to station selection, populate the properties panel
@method _listenStationSelected
**/
_listenStationSelected: function () {
var self = this;
$(Elements.CLASS_STATION_LIST_ITEMS).off('click');
$(Elements.CLASS_STATION_LIST_ITEMS).on('click', function (e) {
var elem = $(e.target).closest('li');
var stationID = $(elem).attr('data-station_id');
if (stationID !== self.m_selected_station_id)
self._stopSnapshot();
self.m_selected_station_id = stationID;
var stationModel = self._getStationModel(self.m_selected_station_id);
self.m_liveRenameInput.setValue(stationModel.get('stationName'), false, false);
$(Elements.CLASS_STATION_LIST_ITEMS).removeClass('activated').find('a').removeClass('whiteFont');
$(elem).addClass('activated').find('a').addClass('whiteFont');
self.m_property.viewPanel(Elements.STATION_PROPERTIES);
self._updatePropStats(stationModel);
self._updatePropButtonState(stationModel);
self._selectCampaignDropDownForStation(self.m_selected_station_id);
return false;
});
},
/**
Update properties > button state on station selection
@method _updatePropButtonState
@param {Object} i_model
**/
_updatePropButtonState: function (i_model) {
var self = this;
if (!_.isUndefined(self.m_snapshotInProgress))
return;
var disabled = ''
if (i_model.get('connection') == '0') {
disabled = 'disabled';
}
$(Elements.STATION_CONTROL + ' button').prop('disabled', disabled);
},
/**
Update the properties UI station stats from Backbone collection > model
@method _updateProperties
@param {Object} i_model
**/
_updatePropStats: function (i_model) {
var self = this;
//$(Elements.STATION_NAME).text(pepper.getStationNameSync(self.m_selected_station_id));
$(Elements.STATION_WATCHDOG).text(i_model.get('watchDogConnection'));
$(Elements.STATION_TOTAL_MEMORY).text(i_model.get('totalMemory'));
$(Elements.STATION_PEAK_MEMORY).text(i_model.get('peakMemory'));
$(Elements.STATION_LAST_UPDATE).text(i_model.get('lastUpdate'));
$(Elements.STATION_RUNNING_TIME).text(i_model.get('runningTime'));
$(Elements.STATION_AIR_VERSION).text(i_model.get('airVersion'));
$(Elements.STATION_APP_VERSION).text(i_model.get('appVersion'));
$(Elements.STATION_OS).text(i_model.get('stationOS'));
$(Elements.STATION_ID).text(i_model.get('stationID'));
var stationRecord = BB.Pepper.getStationRecord(i_model.get('stationID'));
if (stationRecord.lan_server_enabled == 'True') {
$(Elements.STATION_SERVER_MODE).prop('checked', true);
$(Elements.STATION_SERVER_PROPS).show();
} else {
$(Elements.STATION_SERVER_MODE).prop('checked', false);
$(Elements.STATION_SERVER_PROPS).hide();
}
self.m_liveSationIpInput.setValue(i_model.get('localAddress'));
self.m_liveSationPortInput.setValue(stationRecord.lan_server_port);
},
/**
Reconfigure the location (offset) of the screen snapshot UI depending on current property with
@method _reconfigSnapLocation
_reconfigSnapLocation: function () {
var offset = BB.comBroker.getService(BB.SERVICES['PROPERTIES_VIEW']).getPropWidth();
if (offset < 240)
offset = 240;
var box = (offset / 2) - 120;
$(Elements.SNAP_SHOT_SVG).css({
left: box + 'px'
});
$(Elements.SNAP_SHOT_IMAGE).css({
left: box + 15 + 'px'
});
$(Elements.SNAP_SHOT_SPINNER).css({
left: (offset / 2) - 20 + 'px'
});
},
**/
/**
Update existing station in list with data from remote mediaSERVER
If a station is selected in the list, make sure we also update its open property values
@method _onUpdateStation
@param {Object} i_stationModel
**/
_onUpdateStation: function (i_stationModel) {
var self = this;
if (i_stationModel.get('connectionStatusChanged')) {
var stationLI = $(Elements.STATION_LIST_VIEW).find('[data-station_id="' + i_stationModel.get('stationID') + '"]');
$(stationLI).find('circle').attr('fill', i_stationModel.get('stationColor'));
}
if (i_stationModel.get('stationID') == self.m_selected_station_id) {
if (!stationLI)
var stationLI = $(Elements.STATION_LIST_VIEW).find('[data-station_id="' + i_stationModel.get('stationID') + '"]');
stationLI.trigger('click');
// log('update data on ' + self.m_selected_station_id);
}
},
/**
When data is available from the remote server, update the list with current data.
@method _onAddStation
@param {Event} e remote server data call back from Ajax call
@return none
**/
_onAddStation: function (i_stationModel) {
var self = this;
var snippet = '<li class="' + BB.lib.unclass(Elements.CLASS_STATION_LIST_ITEMS) + ' list-group-item" data-station_id="' + i_stationModel.get('stationID') + '">' +
'<a href="#">' +
'<span id="stationIcon' + i_stationModel.get('id') + '">' +
'<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"><g><circle stroke="black" id="svg_1" fill="' + i_stationModel.get('stationColor') + '" stroke-width="2" r="16" cy="20" cx="20"/></g></svg>' +
'</span>' +
'<span class="' + BB.lib.unclass(Elements.CLASS_LIVE_RENAME) + '" style="font-size: 1.5em; position: relative; top: -23px">' + i_stationModel.get('stationName') + '</span>' +
'</a>' +
'</li>';
$(Elements.STATION_LIST_VIEW).append(snippet)
},
/**
Bind all event listeners on the UI for remote stations commands including commands
@method _wireUI
@return none
**/
_wireUI: function () {
var self = this;
$(Elements.STATION_PLAY_COMMAND + ' , ' + Elements.STATION_STOP_COMMAND).on('click', function (e) {
var command = BB.lib.unhash(Elements.STATION_PLAY_COMMAND) == e.currentTarget.id ? 'start' : 'stop';
pepper.sendCommand(command, self.m_selected_station_id, function () {
// log('cmd done'+command);
});
return false;
});
$(Elements.STATION_REFRESH).on('click', function (e) {
$(Elements.STATION_LIST_VIEW).fadeOut('fast', function () {
self.m_stationCollection.getRemoteStations();
$(this).fadeIn('fast');
});
});
$(Elements.STATION_RELOAD_COMMAND).on('click', function (e) {
// pepper.sendCommand('rebootStation', self.m_selected_station_id, function () {});
pepper.sendCommand('rebootPlayer', self.m_selected_station_id, function () {
});
return false;
});
$(Elements.STATION_SELECTION_CAMPAIGN).on('change', function (e) {
self._onChangedCampaign(e);
return false;
});
$(Elements.STATION_REMOVE).on('click', function () {
self._removeStation(self);
});
$(Elements.STATION_EVENT_SEND_COMMAND).on('click', function () {
var eventValue = $(Elements.STATION_SEND_EVENT_VALUE).val();
pepper.sendEvent(eventValue, self.m_selected_station_id, function () {
});
});
},
/**
Translate a station id to Backbone.Model
@method _getStationModel
@param {Number} i_station_id
**/
_getStationModel: function (i_station_id) {
var self = this;
return self.m_stationCollection.findWhere({'stationID': i_station_id});
},
/**
Send a remote value (i.e.: remote event / remote touch) to a selected station.
If events are enabled at the campaign level, the _sendStationEvent method enables users to fire events on a selected
Station and thus change campaign attributes.
@method _sendStationEvent
@param {String} i_eventName
@param {String} i_eventValue
@return none
_sendStationEvent: function (i_eventName, i_eventValue) {
var self = this;
model.sendStationEvent(model.getDataByID(self.m_selected_resource_id)['id'], i_eventName, i_eventValue);
$(Elements.EVENT_SEND_BUTTON).button('disable');
},
**/
_removeStation: function (i_context) {
var self = i_context;
if (_.isUndefined(self.m_selected_station_id)) {
bootbox.dialog({
message: $(Elements.MSG_BOOTBOX_NO_STATION_SELECTED).text(),
buttons: {
danger: {
label: $(Elements.MSG_BOOTBOX_OK).text(),
className: "btn-danger",
callback: function () {
}
}
}
});
return false;
}
bootbox.confirm($(Elements.MSG_BOOTBOX_STEPS).text(), function (result) {
if (result == true) {
var navigationView = BB.comBroker.getService(BB.SERVICES.NAVIGATION_VIEW);
// pepper.sendCommand('rebootStation', self.m_selected_station_id, function () {});
pepper.sendCommand('rebootPlayer', self.m_selected_station_id, function () {
});
pepper.removeStation(self.m_selected_station_id);
navigationView.save(function () {
});
pepper.sync(function () {
self._removeStationFromLI(self.m_selected_station_id);
navigationView.resetPropertiesView();
});
}
});
},
/**
Remove a selected station from UI LI
@method _removeStationFromLI
@param {Number} i_stationID
**/
_removeStationFromLI: function (i_stationID) {
var self = this;
$(Elements.STATION_LIST_VIEW).find('[data-station_id="' + i_stationID + '"]').remove();
},
/**
Wire the Snapshot UI button and handle related opeations before and after executing a station snapshot
@method _wireSnapshot
**/
_wireSnapshot: function () {
var self = this;
$(Elements.STATION_SNAPSHOT_COMMAND).on('click', function (e) {
self.m_imagePath = '';
self.m_imageReloadCount = 0;
self._listenSnapshotComplete();
/* Can't use short path due to IE error, gotta go long route via _sendSnapshotCommand
self.m_imagePath = pepper.sendSnapshot(Date.now(), '0.2', self.m_selected_station_id, function (e) {});
log(self.m_imagePath);
*/
self._sendSnapshotCommand(self.m_selected_station_id);
$(Elements.SNAP_SHOT_IMAGE).attr('src', self.m_imagePath);
$(Elements.SNAP_SHOT_IMAGE).hide();
$(Elements.SNAP_SHOT_SPINNER).fadeIn('slow');
$(Elements.STATION_CONTROL + ' button').prop('disabled', 'disabled');
self.m_snapshotInProgress = setInterval(function () {
self.m_imageReloadCount++;
// log('snapshot JS... ' + self.m_imagePath);
$(Elements.SNAP_SHOT_IMAGE).attr('src', self.m_imagePath);
// snapshot timed out so reset
if (self.m_imageReloadCount > 6) {
self._stopSnapshot();
$(Elements.SNAP_SHOT_IMAGE).attr('src', self.m_imagePath);
var stationModel = self._getStationModel(self.m_selected_station_id);
self._updatePropButtonState(stationModel);
}
}, 1000);
return false;
});
},
/**
Send a remote snapshot command for station id and wait for a call back.
@method _sendSnapshotCommand
@param {Number} i_station
@return none
**/
_sendSnapshotCommand: function (i_station) {
var self = this;
var d = new Date().getTime();
var path = pepper.sendSnapshot(d, 0.2, i_station, function (e) {
});
setTimeout(function () {
self.m_imagePath = path;
}, 3000);
/*
var data = {
'@functionName': 'f_captureScreen',
'@stationID': i_station,
'@quality': 1,
'@time': Date.now()
};
self.ajaxJsonGetter.getData(data, onSnapshotReply);
function onSnapshotReply(e) {
if (e.responce['status'] == 'pass') {
log('getting image from ' + e.responce['path']);
self.m_imagePath = e.responce['path'];
}
}
// self.m_imagePath = 'https://pluto.signage.me/Snapshots/business355181/station12/1397689062944.jpg';
// return;
*/
},
/**
Stop any ongoing snapshots that are pending and reset all related snapshot UI and values
@method _stopSnapshot
**/
_stopSnapshot: function () {
var self = this;
if (self.m_snapshotInProgress)
clearTimeout(self.m_snapshotInProgress);
self.m_snapshotInProgress = undefined;
$(Elements.SNAP_SHOT_SPINNER).hide();
$(Elements.SNAP_SHOT_IMAGE).attr('src', '');
$(Elements.SNAP_SHOT_IMAGE).hide();
$(Elements.SNAP_SHOT_IMAGE).unbind('load');
},
/**
Listen when a new remote snapshot is available on the server for a selected station, so we can display it in the properties panel
We use the Image.load event to be notified when the Image element has succesfully recived a working image path
@method _listenSnapshotComplete
@return none
**/
_listenSnapshotComplete: function () {
var self = this;
// snapshot success
$(Elements.SNAP_SHOT_IMAGE).one('load', function (e) {
$(Elements.SNAP_SHOT_SPINNER).hide();
$(Elements.SNAP_SHOT_IMAGE).attr('src', self.m_imagePath);
$(Elements.SNAP_SHOT_IMAGE).fadeIn('slow');
clearTimeout(self.m_snapshotInProgress);
self.m_snapshotInProgress = undefined;
var stationModel = self._getStationModel(self.m_selected_station_id);
self._updatePropButtonState(stationModel);
});
},
/**
Select the campaign that is bound to i_stationID and select it in the dropdown UI
@method _selectCampaignDropDownForStation
@param {Number} i_stationID
**/
_selectCampaignDropDownForStation: function (i_stationID) {
var self = this;
var campaignID = pepper.getStationCampaignID(i_stationID);
self._populateStationCampaignDropDown(campaignID);
},
/**
Populate the selection drop down UI with all available campaigns for station selection
@method _populateStationCampaignDropDown
@param {Number} i_campaignID
**/
_populateStationCampaignDropDown: function (i_campaignID) {
var self = this;
$(Elements.STATION_SELECTION_CAMPAIGN).empty();
if (i_campaignID == undefined || i_campaignID == -1)
$(Elements.STATION_SELECTION_CAMPAIGN).append('<option selected data-campaign_id="-1">Select campaign</option>');
var campaignIDs = pepper.getCampaignIDs();
for (var i = 0; i < campaignIDs.length; i++) {
var campaignID = campaignIDs[i];
var recCampaign = pepper.getCampaignRecord(campaignID);
var selected = campaignID == i_campaignID ? 'selected' : '';
var snippet = '<option ' + selected + ' data-campaign_id="' + campaignID + '">' + recCampaign['campaign_name'] + '</option>';
$(Elements.STATION_SELECTION_CAMPAIGN).append(snippet);
}
},
/**
On change campaign action apply changes to local msdb
@method _onChangedCampaign
**/
_onChangedCampaign: function (e) {
var self = this;
var campaign_id = $(Elements.STATION_SELECTION_CAMPAIGN + ' option:selected').attr('data-campaign_id');
if (campaign_id == -1)
return;
pepper.setStationCampaignID(self.m_selected_station_id, campaign_id);
},
/**
Get current total active, non red stations
@method getTotalActiveStation
@param {Number} i_playerData
@return {Number} total active / non red stations
**/
getTotalActiveStation: function () {
var self = this;
var connected = self.m_stationCollection.filter(function (stationsModel) {
return stationsModel.get('connection') != '0'
});
return connected.length;
}
});
return StationsListView;
});
digitalsignage.com - open source docs