iobroker.vis
Version:
Graphical user interface for iobroker.
1,056 lines (964 loc) • 114 kB
HTML
<link rel="stylesheet" href="lib/css/jquery-ui-timepicker-addon-1.2.2.css" />
<script type="text/javascript" src="lib/js/jquery-ui-timepicker-addon-1.2.2.js"></script>
<style>
#ui-datepicker-div {
z-index: 999 !important;
}
</style>
<script type="text/javascript">
'use strict';
if (vis.editMode) {
$.extend(systemDictionary, {
"group_dialog": {"en": 'Dialog', "de": "Dialog", "ru": "Диалог"},
"buttontext": {"en": "Button text", "de": "Knopftext", "ru": "Надпись на кнопке"},
"href": {"en": "Link", "de": "Link", "ru": "Ссылка"},
"href_tooltip": {"en": "Like 'http://google.com'", "de": "Wie 'http://google.com'", "ru": "Например 'http://google.com'"},
"target": {"en": "target", "de": "target", "ru": "target"},
"dialog_height": {"en": "Dialog height", "de": "Dialoghöhe", "ru": "Высота окна"},
"dialog_width": {"en": "Dialog width", "de": "Dialogbreite", "ru": "Ширина окна"},
"alt": {"en": "Tooltip (alt)", "de": "Tooltip (alt)", "ru": "Всплывающая подсказка (alt)"},
"text": {"en": "Text", "de": "Text", "ru": "Текст"},
"invert_icon": {"en": "Invert image", "de": "Invertiere das Bild", "ru": "Инвертировать картинку"},
"html_dialog": {"en": "HTML in dialog", "de": "HTML im Dialog", "ru": "HTML в диалоговом окне"},
"preload": {"en": "Prerender dialog", "de": "Prerender Dialog", "ru": "Рендер содержания в начале"},
"closeOnClick": {"en": "Close by click on dialog", "de": "Anklicken zum Schliessen", "ru": "Закрыть по нажатию в любом месте"},
"preload_tooltip": {
"en": "If true, the content of dialog will be created at start of view.\x0AIf false, the content will be created during opening of dialog.\x0AWebcams or dynamic content require 'prerender'=false",
"de": "Falls true, wird Inhalt vom Dialog sofort am Anfang gerendert.\x0AFalls false, erst beim Anzeigen vom Dialog.\x0AWebcams oder dynamischer Inhalt müssen prerender auf false haben",
"ru": "Если да, то рендер содержания будет в самом начале.\x0AЕсли нет, то при показе диалога.\x0AWebCams или динамическое содержание требуют значение false."
},
"persistent": {"en": "Persistent", "de": "Dauernd", "ru": "Существует постоянно"},
"persistent_tooltip": {
"en": "If true, the dialog will be created at start and can\x0Abe shown by external command 'dialogOpen'.",
"de": "Falls true, wird der Dialog sofort am Anfang erzeugtx0Aund kann mit dem Befehl 'dialogOpen' angezeigt werden.",
"ru": "Если да, то диалог будет создан в самом начале и\x0Aможет быть вызван внешней командой 'dialogOpen'."
},
"src_true": {"en": "Icon by ON", "de": "Icon bei AN", "ru": "Иконка при ВКЛ"},
"alt_true": {"en": "Tooltip by ON", "de": "Tooltip bei AN", "ru": "Подсказка при ВКЛ"},
"src_false": {"en": "Icon by OFF", "de": "Icon bei AUS", "ru": "Иконка при ВЫКЛ"},
"alt_false": {"en": "Tooltip by OFF", "de": "Tooltip bei AUS", "ru": "Подсказка при ВЫКЛ"},
"timeOnly": {"en": "Time only", "de": "Nur Zeit", "ru": "Только время"},
"inverted": {"en": "Inverted value", "de": "Wert invertiert", "ru": "Иневртировать значение"},
"click_id": {"en": "Control ID", "de": "Steuer-ID", "ru": "Контроль-ID"},
"click_value": {"en": "Control value", "de": "Steuerwert", "ru": "Контроль-значение"},
"false_text": {"en": "Text inactive", "de": "Inaktiv-Text", "ru": "Неактивный текст"},
"true_text": {"en": "Text active", "de": "Aktiv-Text", "ru": "Активный текст"},
"false_src": {"en": "Icon inactive", "de": "Inaktiv-Bild", "ru": "Неактивная картинка"},
"true_src": {"en": "Icon active", "de": "Aktiv-Bild", "ru": "Активная картинка"},
"false_alt": {"en": "Tooltip inactive", "de": "Inaktiv-Tooltip", "ru": "Неактивная подсказка"},
"true_alt": {"en": "Tooltip active", "de": "Aktiv-Tooltip", "ru": "Активная подсказка"},
"dialog_top": {"en": "Top", "de": "Position oben", "ru": "Позиция сверху"},
"dialog_left": {"en": "Left", "de": "Position links", "ru": "Позиция слева"},
"overflowX": {"en": "Overflow X", "de": "Overflow X", "ru": "Overflow X"},
"overflowY": {"en": "Overflow Y", "de": "Overflow Y", "ru": "Overflow Y"},
"noHeader": {"en": "Hide header", "de": "Kopfzeile verbergen", "ru": "Скрыть заголовок"},
"setId": {"en": "Set Object ID", "de": "Setze Objekt-ID", "ru": "Записать в Объект с ID"},
"setId_tooltip": {
"en": "By opening of dialog the Object ID\x0Awill be set with given value.",
"de": "Beim Öffnen des Dialogs wird die Object ID\x0Amit dem eingegebenen Wert gesetzt.",
"ru": "При открытии диалога в объект с этим ID будет записано значение"
},
"setValue": {"en": "Set value", "de": "Setze Wert", "ru": "Записываемое значение"},
"oid-2": {"en": "OID Range max.", "de": "OID Bereich max.", "ru": "ID Объекта макс"},
"oid-2-working": {"en": "OID Working max.", "de": "OID Working max.", "ru": "ID working макс"},
"asString": {"en": "As string", "de": "Als String", "ru": "Строковое значение"},
"values": {"en": "Values", "de": "Werte", "ru": "Значения"},
"values_tooltip": {
"en": "Values divided by semicolon:\x0A0;1;2",
"de": "Werte sind mit Semikolon getrennt:\x0A0;1;2",
"ru": "Значения разделены точкой с запятой:\x0A0;1;2"
},
"texts": {"en": "Texts", "de": "Texte", "ru": "Тексты"},
"height": {"en": "Height", "de": "Höhe", "ru": "Высота"},
"no_style": {"en": "No jQuery style", "de": "Ohne jQuery Stil", "ru": "Без стиля jQuery"},
"Password": {"en": "Password", "de": "Kennwort", "ru": "Пароль"},
"imageHeight": {"en": "Image height %", "de": "Bildhöhe in %", "ru": "Высота иконки в %"},
"autoclose": {"en": "Auto close (ms)", "de": "Auto-Zu (ms)", "ru": "Автозакрытие (мс)"},
"modal": {"en": "Modal", "de": "Modal", "ru": "Модальное"},
"texts_tooltip": {
"en": "Texts divided by semicolon:\x0AOn;Off;Auto",
"de": "Texte sind mit Semikolon getrennt:\x0AAn;Aus;Auto",
"ru": "Тексты разделены точкой с запятой:\x0AВкл;Выкл;Авто"
}
});
}
$.extend(systemDictionary, {
"Password": {"en": "Password", "de": "Kennwort", "ru": "Пароль"}
});
vis.navChangeCallbacks.push(function (view) {
$('.jqui-nav-state').each(function () {
var $this = $(this);
if ($this.attr('data-vis-nav') === view) {
$this.removeClass('ui-state-default');
$this.addClass('ui-state-active');
} else {
$this.addClass('ui-state-default');
$this.removeClass('ui-state-active');
}
});
});
vis.binds.jqueryui = {
navigationActive: function (el, nav_view) {
var $this = $(el);
if (window.location.hash.slice(1) === nav_view) {
$this.removeClass('ui-state-default').addClass('ui-state-active');
}
},
months: {
"en": ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
"de": ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
"ru": ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']
},
shortMonths: {
"en": ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
"de": ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
"ru": ['Янв', 'Фев', 'Март', 'Апр', 'Май', 'Июня', 'Июля', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек']
},
weekDays: {
"en": ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
"de": ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
"ru": ['Воскресение', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота']
},
shortWeekDays: {
"en": ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
"de": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
"ru": ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб']
},
currentText: {
"en": 'Now',
"de": 'Jetzt',
"ru": 'Сейчас'
},
closeText: {
"en": 'Close',
"de": 'Schließen',
"ru": 'Закрыть'
},
timeText: {
"en": 'Time',
"de": 'Zeit',
"ru": 'Время'
},
hourText: {
"en": 'Hour',
"de": 'Std',
"ru": 'Час'
},
minuteText: {
"en": 'Min',
"de": 'Min',
"ru": 'Мин'
},
secondText: {
"en": 'Sec',
"de": 'Sek',
"ru": 'Сек'
},
timeOnlyTitle: {
"en": 'Choose Time',
"de": 'Zeit auswählen',
"ru": 'Установите время'
},
activeHelper: function ($this, val, min, max, value, reverse) {
if (val === true || val === 'true') val = max;
if (val === false || val === 'false') val = min;
if (max === undefined || max === '' || max === null) {
max = 1;
min = 0;
val = (val === 'false' || val === false || val === 0 || val === '0' || val === '' || val === null || val === undefined) ? min : max;
}
if (reverse) {
if (val == max) {
val = min;
} else {
val = max;
}
}
if (value === undefined && val > min && val !== true) {
val = parseFloat(val) || 0;
}
if ((value === undefined && val > min) || (value !== undefined && val == value)) {
$this.addClass('ui-state-active');
} else {
$this.removeClass('ui-state-active');
}
},
active: function (el, reverse, _value) {
var $this = $(el);
var oid = $this.data('oid');
var max = $this.data('max') || 1;
var min = $this.data('min') || 0;
function onChange(e, newVal) {
vis.binds.jqueryui.activeHelper($this, newVal, min, max, _value, reverse);
}
if (oid) {
// remember all ids, that bound
$this.parent()
.data('bound', [oid + '.val'])
// remember bind handler
.data('bindHandler', onChange);
vis.states.bind(oid + '.val', onChange);
vis.binds.jqueryui.activeHelper($this, vis.states.attr(oid + '.val'), min, max, _value, reverse);
}
},
classes: function (el, reverse, _value) {
var $this = $(el);
if (!$this.data('no-style')) {
$this.hover(function () {
$this.addClass('ui-state-hover');
}, function () {
$this.removeClass('ui-state-hover');
});
} else {
$this.removeClass('ui-widget ui-corner-all ui-state-default');
}
$this.css({position: 'absolute'});
vis.binds.jqueryui.active(el, reverse, _value);
},
dialog: function (el, options, persistent, preload, html, closeOnClick) {
var $dlg = $(el).parent().find('div.vis-widget-dialog');
$dlg.data('preload', (!preload || preload === 'false') && !$dlg.html().replace(/\s/g, ''));
$('[aria-describedby="' + $dlg.attr('id') + '"]').remove();
options.width = options.width || options.dialog_width;
options.height = options.height || options.dialog_height;
options.top = options.top || options.dialog_top;
options.left = options.left || options.dialog_left;
options.minHeight = options.height;
options.minWidth = options.width;
// Show dialog in edit mode too
if (1 || !vis.editMode) {
$(el).parent().find('div.vis-widget-body').on('click touchend', function (event) {
event.stopPropagation();
// Protect against two events
if (vis.detectBounce(this)) return;
if ($dlg.data('preload')) $dlg.html(html);
if (persistent) {
if (options.setId) vis.setValue(options.setId, options.setValue);
$dlg.dialog('open');
$dlg.parent().css('z-index', 998);
$dlg.parent().find('.ui-widget-header button .ui-button-text').html('');
if (options.minHeight) $dlg.css('min-height', options.minHeight);
if (options.minWidth) $dlg.css('min-width', options.minWidth);
if (options.top || options.top === 0 || options.top === '0') $dlg.parent().css('top', options.top);
if (options.left || options.left === 0 || options.left === '0') $dlg.parent().css('left', options.left);
if (options.overflowX) $dlg.css('overflow-x', options.overflowX);
if (options.overflowY) $dlg.css('overflow-y', options.overflowY);
if (options.noHeader) {
$dlg.parent().find('.ui-dialog-titlebar').css({background: 'rgba(0,0,0,0)', border: 0, color: 'rgba(0,0,0,0)'});
$dlg.parent().find('.ui-dialog-title').html(' ');
}
$dlg.parent().find('.ui-state-focus').blur();
} else {
$dlg.dialog($.extend({
autoOpen: true,
open: function () {
$(this).parent().find('.ui-widget-header button .ui-button-text').html('');
if (options.setId) vis.setValue(options.setId, options.setValue);
$(this).parent().css('z-index', 998);
if (options.minHeight) $(this).css('min-height', options.minHeight);
if (options.minWidth) $(this).css('min-width', options.minWidth);
if (options.top || options.top === 0 || options.top === '0') $(this).parent().css('top', options.top);
if (options.left || options.left === 0 || options.left === '0') $(this).parent().css('left', options.left);
if (options.overflowX) $(this).css('overflow-x', options.overflowX);
if (options.overflowY) $(this).css('overflow-y', options.overflowY);
if (options.noHeader) {
$dlg.parent().find('.ui-dialog-titlebar').css({background: 'rgba(0,0,0,0)', border: 0, color: 'rgba(0,0,0,0)'});
$dlg.parent().find('.ui-dialog-title').html(' ');
}
$(this).parent().find('.ui-state-focus').blur();
//touchscreen fix
var $closeButton = $(this).parent().find('button.ui-dialog-titlebar-close');
$closeButton.off('touchend').on('touchend', function (event) {
event.stopPropagation();
$dlg.dialog('close');
return false;
});
},
close: function () {
if ($dlg.data('timer')) { clearTimeout($dlg.data('timer')); $dlg.data('timer', null)};
$dlg.dialog('destroy');
// Destroy content if not preloaded
if ($dlg.data('preload')) $dlg.html('');
}
}, options));
$dlg.data('inited', true);
if (closeOnClick) {
$dlg.off('click touchstart touchend').on('click touchend', function (event) {
event.stopPropagation();
$dlg.dialog('close');
return false;
});
}
}
return false;
});
}
if (persistent) {
$dlg.dialog($.extend({
autoOpen: false,
open: function () {
$dlg.parent().css({'z-index': 1000});
if ($dlg.data('preload')) $dlg.html(html);
//touchscreen fix
var $closeButton = $(this).parent().find('button.ui-dialog-titlebar-close');
$closeButton.off('touchend').on('touchend', function (event) {
event.stopPropagation();
$dlg.dialog('close');
return false;
});
},
close: function () {
if ($dlg.data('timer')) {
clearTimeout($dlg.data('timer'));
$dlg.data('timer', null);
}
// Destroy content if not preloaded
if ($dlg.data('preload')) $dlg.html('');
}
}, options));
$dlg.data('inited', true);
if (closeOnClick) {
$dlg.off('click touchstart touchend').on('click touchend', function (event) {
event.stopPropagation();
$dlg.dialog('close');
return false;
});
}
}
},
dialogContainer: function (el, options, persistent, preload) {
var $dlg = $(el).parent().find('div.vis-widget-dialog');
var id = $(el).parent().attr('id');
if (id && id.match(/_removed$/)) {
return;
}
if (!$dlg.length) {
setTimeout(function () {
vis.binds.jqueryui.dialogContainer(el, options, persistent, preload);
}, 200);
return;
}
options.width = options.dialog_width;
options.height = options.dialog_height;
options.top = options.dialog_top;
options.left = options.dialog_left;
options.minHeight = options.height;
options.minWidth = options.width;
$dlg.dialog($.extend({
autoOpen: false,
open: function () {
$(this).parent().find('.ui-widget-header button .ui-button-text').html('');
$(this).parent().css('z-index', 998);
//touchscreen fix
$dlg.find('.vis-view-container').each(function () {
var cview = $(this).attr('data-vis-contains');
if (!vis.views[cview]) {
$(this).append('error: view not found.');
return false;
} else if (cview === vis.activeView) {
$(this).append('error: view container recursion.');
return false;
}
var $this = this;
vis.renderView(cview, cview, false, function (_view) {
$('#visview_' + _view)
.appendTo($this)
.show();
});
});
if (options.setId) vis.setValue(options.setId, options.setValue);
var $id = $(this);
if (options.minHeight) $id.css('min-height', options.minHeight);
if (options.minWidth) $id.css('min-width', options.minWidth);
if (options.top || options.top === 0 || options.top === '0') $id.parent().css('top', options.top);
if (options.left || options.left === 0 || options.left === '0') $id.parent().css('left', options.left);
if (options.overflowX) $id.css('overflow-x', options.overflowX);
if (options.overflowY) $id.css('overflow-y', options.overflowY);
if (options.noHeader) {
$id.parent().find('.ui-dialog-titlebar').css({background: 'rgba(0,0,0,0)', border: 0, color: 'rgba(0,0,0,0)'});
$id.parent().find('.ui-dialog-title').html(' ');
}
$id.parent().find('.ui-state-focus').blur();
var $closeButton = $(this).parent().find('button.ui-dialog-titlebar-close');
$closeButton.off('touchend').on('touchend', function (event) {
event.stopPropagation();
$dlg.dialog('close');
var $view = $dlg.find('.vis-view');
if (!$view.data('persistent')) {
vis.destroyView($view.data('view'), $view.data('view'));
}
return false;
});
},
close: function () {
if ($dlg.data('timer')) {
clearTimeout($dlg.data('timer'));
$dlg.data('timer', null);
}
vis.destroyUnusedViews();
}
}, options));
if (persistent) $dlg.find('.vis-view-container').data('persistent', persistent);
if (!vis.editMode) {
$(el).parent().find('div.vis-widget-body').on('click touchend', function (event) {
event.stopPropagation();
// Protect against two events
if (vis.detectBounce(this)) return;
var $id = $('#' + $(this).parent().attr('id') + '_dialog');
$id.dialog('open');
return false;
});
} else {
$(el).parent().find('div.vis-widget-body').show();
}
},
dialogAutoClose: function (el, timeout) {
if (timeout === true || timeout === 'true') timeout = 10000;
if (timeout === null || timeout === undefined || timeout === '') return;
timeout = parseInt(timeout, 10);
if (timeout < 60) {
// may be this is seconds
timeout *= 1000;
}
if (!timeout) timeout = 1000;
var $dialog = $('#' + $(el).parent().attr('id') + '_dialog');
var id = $(el).parent().attr('id');
if (id && id.match(/_removed$/)) {
return;
}
if (!$dialog.length) {
setTimeout(function () {
vis.binds.jqueryui.dialogAutoClose(el, timeout);
}, 200);
return;
}
$dialog.on('dialogopen', function () {
$dialog.find('input').on('click', function () {
var timer = $dialog.data('timer');
if (timer) clearTimeout(timer);
$dialog.data('timer', setTimeout(function () {
$dialog.data('timer', null);
$dialog.dialog('close');
}, timeout));
});
$dialog.data('timer', setTimeout(function () {
$dialog.data('timer', null);
$dialog.dialog('close');
}, timeout));
});
},
dialogClose: function (el, options) {
if (!$(el).data('no-style')) {
setTimeout(function () {
$(el).button({
icons: {
primary: options.iconClass ? 'ui-icon-' + options.iconClass : null
}
});
}, 0);
}
$(el).click(function () {
if (options.dlgName) {
$('#' + options.dlgName + '_dialog').dialog('close');
} else {
var $parent = $(this).parent().parent().parent();
var $dlg = $parent.find('.vis-widget-dialog');
if ($dlg.length) {
$dlg.dialog('close');
return;
}
$parent = $parent.parent();
$dlg = $parent.find('.vis-widget-dialog');
if ($dlg.length) {
$dlg.dialog('close');
return;
}
$parent = $parent.parent();
$dlg = $parent.find('.vis-widget-dialog');
if ($dlg.length) {
$dlg.dialog('close');
return;
}
$parent = $parent.parent();
$dlg = $parent.find('.vis-widget-dialog');
if ($dlg.length) {
$dlg.dialog('close');
return;
}
}
});
},
input: function (el, options, asString) {
var $this = $(el);
var oid = $this.attr('data-oid');
var digits = options;
asString = asString === 'true' || asString === true;
if (!$this.data('no-style')) {
$this.button().addClass('ui-state-default');
} else {
$this.removeClass('ui-widget ui-corner-all ui-state-default');
}
$this.css({
'font': 'inherit',
//'color' : 'inherit',
'text-align': 'left',
'outline': 'none',
'cursor': 'text',
height: '50%'
}).change(function () {
vis.setValue(oid, $(this).val());
});
function onChange(e, newVal) {
if (!asString && digits && digits !== '') {
newVal = parseFloat(newVal).toFixed(digits);
}
$this.val(newVal);
}
var val = '';
if (oid) {
vis.states.bind(oid + '.val', onChange);
// remember all ids, that bound
$this.parent().parent()
.data('bound', [oid + '.val'])
// remember bind handler
.data('bindHandler', onChange);
val = vis.states[oid + '.val'];
if (!asString && digits && digits !== '') {
val = parseFloat(vis.states[oid + '.val']).toFixed(digits);
}
}
$this.val(val);
},
inputDate: function (el, options) {
var $this = $(el);
var oid = $this.attr('data-oid');
var datepickerOptions = $.extend(true, {
dateFormat: 'yy-mm-dd',
monthNamesShort: vis.binds.jqueryui.shortMonths[vis.language],
monthNames: vis.binds.jqueryui.months[vis.language],
dayNamesMin: vis.binds.jqueryui.shortWeekDays[vis.language],
showAnim: 'fadeIn',
firstDay: 1,
currentText: vis.binds.jqueryui.currentText[vis.language],
closeText: vis.binds.jqueryui.closeText[vis.language]
}, options);
$this.addClass('ui-widget ui-button ui-corner-all ui-state-default')
.css({
font: 'inherit',
//'color' : 'inherit',
'text-align': 'left',
outline: 'none',
cursor: 'text',
height: '95%'
});
if (!vis.editMode) $this.datepicker(datepickerOptions);
function onChange(e, newVal) {
$this.val(newVal);
}
if (oid) {
$this.change(function () {
vis.setValue(oid, $(this).val());
});
vis.states.bind(oid + '.val', onChange);
// remember all ids, that bound
$this.parent().parent()
.data('bound', [oid + '.val'])
// remember bind handler
.data('bindHandler', onChange);
$this.val(vis.states.attr(oid + '.val'));
}
},
inputDatetime: function (el, options) {
var $this = $(el);
var oid = $this.attr('data-oid');
var timepickerOptions = $.extend(true, {
dateFormat: 'yy-mm-dd',
monthNamesShort: vis.binds.jqueryui.shortMonths[vis.language],
monthNames: vis.binds.jqueryui.months[vis.language],
dayNamesMin: vis.binds.jqueryui.shortWeekDays[vis.language],
showAnim: 'fadeIn',
firstDay: 1,
timeText: vis.binds.jqueryui.timeText[vis.language],
hourText: vis.binds.jqueryui.hourText[vis.language],
minuteText: vis.binds.jqueryui.minuteText[vis.language],
secondText: vis.binds.jqueryui.secondText[vis.language],
currentText: vis.binds.jqueryui.currentText[vis.language],
closeText: vis.binds.jqueryui.closeText[vis.language],
timeOnlyTitle: vis.binds.jqueryui.timeOnlyTitle[vis.language],
minuteGrid: undefined,
hourGrid: undefined,
secondGrid: undefined,
timeOnly: false,
showSecond: true,
timeFormat: 'HH:mm:ss',
pickerTimeFormat: 'HH:mm:ss'
}, options);
$this.addClass('ui-state-default')
.css({
font: 'inherit',
//color: 'inherit',
'text-align': 'left',
outline: 'none',
cursor: 'text',
height: '95%'
});
// Store options
$this[0].__options = options;
if (!vis.editMode) {
$this.datetimepicker(timepickerOptions).button();
} else {
$this.addClass('ui-widget ui-button ui-corner-all');
}
function onChange(e, newVal) {
$this.val(newVal);
}
if (oid) {
$this.change(function () {
var $this = $(this);
var val = $this.val();
/*if ($this[0].__options && !$this[0].__options.showSecond) {
var vals = val.split(':');
if (vals.length === 3) {
val = vals[0] + ":" + vals[1];
}
}*/
vis.setValue(oid, val);
});
vis.states.bind(oid + '.val', onChange);
// remember all ids, that bound
$this.parent().parent()
.data('bound', [oid + '.val'])
// remember bind handler
.data('bindHandler', onChange);
$this.val(vis.states.attr(oid + '.val'));
}
},
inputset: function (el, options, asString) {
var digits = options;
var $this = $(el);
var input = '#' + $this.attr('id').slice(0, -3) + 'input';
var noJsStyle = $(el).data('no-style');
var oid = $this.attr('data-oid');
asString = asString === 'true' || asString === true;
if (!noJsStyle) $this.button();
$this.css({'padding-left': 5, 'padding-right': 5});
if (!vis.editMode) {
$this.on('click touchstart', function () {
// Protect against two events
if (vis.detectBounce(this)) return;
vis.setValue(oid, $(input).val());
});
// send text on enter
setTimeout(function () {
$(input).keydown(function (e) {
if (e.keyCode === 13) vis.setValue(oid, $(this).val());
});
}, 100);
}
if (!noJsStyle) $this.prev().button();
$this.prev().addClass('ui-state-default')
.css({
font: 'inherit',
'padding-left': 5,
'padding-right': 5,
//'color' : 'inherit',
'text-align': 'left',
outline: 'none',
cursor: 'text',
height: '95%'
});
function onChange(e, newVal) {
if (!asString && digits && digits !== '') {
newVal = parseFloat(newVal).toFixed(digits);
}
$(input).val(newVal);
}
if (oid) {
vis.states.bind(oid + '.val', onChange);
// remember all ids, that bound
$this.parent().parent()
.data('bound', [oid + '.val'])
// remember bind handler
.data('bindHandler', onChange);
var newVal = vis.states[oid + '.val'];
if (!asString && digits && digits !== '') newVal = parseFloat(newVal).toFixed(digits);
$(input).val(newVal);
}
},
multiselect: function (el, options, isOpen) {
var $this = $(el);
var oid = $this.attr('data-oid');
var noJsStyle = $this.attr('data-no-style');
if (oid) $this.val(vis.states[oid + '.val']);
if (noJsStyle !== true && noJsStyle !== 'true') {
$this.multiselect($.extend({
minWidth: $this.parent().parent().width() - 7,
multiple: false,
header: false,
noneSelectedText: false,
selectedList: 1
}, options)).change(function () {
var val = $this.val();
if (parseFloat(val).toString() == val) val = parseFloat(val);
if (val === 'true') val = true;
if (val === 'false') val = false;
if (!vis.editMode) vis.setValue(oid, val);
});
} else {
$this.change(function () {
var val = $this.val();
if (parseFloat(val).toString() == val) val = parseFloat(val);
if (val === 'true') val = true;
if (val === 'false') val = false;
if (!vis.editMode) vis.setValue(oid, val);
});
}
$this.val(vis.states[oid + '.val']);
$this.prop('disabled', vis.editMode);
if (noJsStyle !== true && noJsStyle !== 'true') {
$this.multiselect('refresh');
}
var id = $this.attr('id');
function onChange(e, newVal) {
var $select = $('#' + id);
$select.val(newVal);
if (noJsStyle !== true && noJsStyle !== 'true') {
$select.multiselect('refresh');
}
}
if (oid) {
vis.states.bind(oid + '.val', onChange);
// remember all ids, that bound
$this.parent().parent()
.data('bound', [oid + '.val'])
// remember bind handler
.data('bindHandler', onChange);
}
if (vis.editMode) {
if (noJsStyle !== true && noJsStyle !== 'true' && isOpen) {
$this.multiselect('open');
}
vis.bindWidgetClick($this.attr('data-view'), $this.attr('id').replace('_multiselect', ''));
$this.parent().parent().resize(function () {
if (noJsStyle !== true && noJsStyle !== 'true') {
$('#' + id).multiselect('option', 'minWidth', $(this).width() - 7);
}
}).data('destroy', function (id, $widget) {
$widget.off('resize');
});
}
},
slider: function (el, options) {
var $this = $(el);
var oid = $this.attr('data-oid');
var oid2 = $this.attr('data-oid2');
var oid_val = 0;
var oid2_val = 0;
var wid = $this.attr('data-oid-working');
var wid2 = $this.attr('data-oid2-working');
var settings = $.extend({
range: !!oid2,
min: 0,
max: 100,
step: 1,
value: parseFloat(vis.states.attr(oid + '.val')),
slide: function (e, ui) {
// Slider -> Observable
if (oid2) {
if (options.inverted) {
ui.values[0] = (settings.max - ui.values[0]) + settings.min;
ui.values[1] = (settings.max - ui.values[1]) + settings.min;
}
if (oid) vis.setValue(oid, ui.values[0]); //.toFixed(6));
vis.setValue(oid2, ui.values[1]); //.toFixed(6));
} else if (oid) {
if (options.inverted) ui.value = (settings.max - ui.value) + settings.min;
vis.setValue(oid, ui.value); //.toFixed(6));
}
}
}, options);
settings.inverted = (settings.inverted === 'true' || settings.inverted === true);
if (isNaN(settings.value)) settings.value = 0;
if (isNaN(settings.min)) settings.min = 0;
if (isNaN(settings.max)) settings.max = 100;
if (isNaN(settings.step)) settings.step = (settings.max - settings.min) / 100;
settings.min = parseFloat(settings.min);
settings.max = parseFloat(settings.max);
settings.value = parseFloat(settings.value);
if (settings.inverted) settings.value = (settings.max - settings.value) + settings.min;
$this.slider(settings);
function onChange(e, newVal) {
// console.log('slider newVal=' + JSON.stringify(newVal));
// If device not in working state
if (e.type === oid + '.val') {
if (!vis.states.attr(wid + '.val')) {
if (settings.inverted) {
oid_val = (settings.max - parseFloat(newVal)) + settings.min;
} else {
oid_val = parseFloat(newVal);
}
if ($this.slider('instance')) {
if (oid2) {
$this.slider('values', [oid_val, oid2_val]);
} else {
$this.slider('value', oid_val);
}
}
}
} else if (e.type === oid2 + '.val'){
// console.log('slider newVal=' + JSON.stringify(newVal));
// If device not in working state
if (!vis.states.attr(wid2 + '.val')) {
oid2_val = parseFloat(newVal);
if (settings.inverted) {
oid2_val = (settings.max - parseFloat(newVal)) + settings.min;
} else {
oid2_val = parseFloat(newVal);
}
if ($this.slider('instance')) {
$this.slider('values', [oid_val, oid2_val]);
}
}
}
}
var bound = [];
if (oid) {
vis.states.bind(oid + '.val', onChange);
bound.push(oid + '.val');
}
if (oid2) {
vis.states.bind(oid2 + '.val', onChange);
bound.push(oid2 + '.val');
oid_val = vis.states.attr(oid + '.val');
oid2_val = vis.states.attr(oid2 + '.val');
if (settings.inverted) {
oid_val = (settings.max - oid_val) + settings.min;
oid2_val = (settings.max - oid2_val) + settings.min;
}
$this.slider('values', [oid_val, oid2_val]);
}
if (bound.length) {
// remember all ids, that bound
$this.parent().parent()
.data('bound', bound)
// remember bind handler
.data('bindHandler', onChange);
}
},
button: function (el, value) {
if ($(el).data('no-style')) return;
setTimeout(function () {
$(el).button();
}, 0);
},
buttonDialog: function (el) {
if ($(el).data('no-style')) return;
setTimeout(function () {
$(el).button();
}, 0);
},
buttonLink: function (el, href) {
if (!$(el).data('no-style')) {
setTimeout(function () {
$(el).button();
}, 0);
}
$(el).click(function () {
if (!vis.editMode && href) window.location.href = href;
});
},
buttonLinkBlank: function (el, href) {
if (!$(el).data('no-style')) {
setTimeout(function () {
$(el).button();
}, 0);
}
$(el).click(function () {
if (!vis.editMode && href) window.open(href);
});
},
radio: function (el, options, process) {
var $this = $(el);
var id = $this.parent().parent().attr('id');
if (id && id.match(/_removed$/)) {
return;
}
if (!process) {
setTimeout(function () {
vis.binds.jqueryui.radio(el, process, true);
}, 50);
return;
}
var settings = $.extend({}, options);
var oid = $this.attr('data-oid');
function onChange(e, newVal) {
$this.find('input').removeAttr('checked');
if (newVal === true || newVal === 'true') {
newVal = 1;
} else
if (newVal === false || newVal === 'false') {
newVal = 0;
}
$this.find('input').prop('checked', false);
$this.find('input[value="' + newVal + '"]').prop('checked', true);
$this.find('input').each(function () {
if ($(this).button('instance')) $(this).button('refresh');
});
}
// Observable -> Buttonset
if (oid) {
vis.states.bind(oid + '.val', onChange);
// remember all ids, that bound
$this.parent().parent()
.data('bound', [oid + '.val'])
// remember bind handler
.data('bindHandler', onChange);
var val = vis.states.attr(oid + '.val');
if (val === true || val === 'true') {
val = 1;
}
if (val === false || val === 'false') {
val = 0;
}
setTimeout(function () {
//console.log(val + ' ' + $this.find('input[value="' + val + '"]').length);
$this.find('input').prop('checked', false);
$this.find('input[value="' + val + '"]').prop('checked', true);
$this.buttonset(settings);
$this.find('input').each(function () {
if ($this.button('instance')) {
$(this).button('refresh');
}
});
if (!vis.editMode) {
// Buttonset -> Observable
$this.find('input').on('click touchstart', function () {
// Protect against two events
if (vis.detectBounce(this)) return;
var val = $(this).val();
var f = parseFloat(val);
if (f.toString() === val.toString()) {
vis.setValue(oid, f);
} else {
vis.setValue(oid, val);
}
});
}
}, 50);
}
},
iconHttpGet: function (el, url) {
if (vis.editMode) return;
var $this = $(el).parent();
$this.on('click touchstart', function (e) {
// Protect against two events
if (vis.detectBounce(this)) return;
vis.conn.httpGet(url);
e.preventDefault();
});
},
hueColormode: function (el, oid) {
var $hue = $(el).parent().find('.hue-mode-hue');
var $ct = $(el).parent().find('.hue-mode-ct');
function onChange(e, newVal) {
if (newVal === 'ct') {