alexa-remote-echo.html

<script type="text/x-red" data-template-name="alexa-remote-echo">
	<div class="form-row">
		<label for="node-input-name"><i class="icon-tag" style="width: 14px; text-align: center"></i> Name</label>
		<input type="text" id="node-input-name" placeholder="Optional">
	</div>
	<div class="form-row">
		<label for="node-input-account"><i class="fa fa-amazon" style="width: 14px; text-align: center"></i> Account</label>
		<input id="node-input-account">
	</div>
	<div id="node-input-inputs_div" />
</script>

<script type="text/x-red" data-help-name="alexa-remote-echo">
	<style>
		table, th, td {
			border-collapse: collapse;
			border: 1px solid rgb(204, 204, 204);
			padding: 4px 8px;
		}
	</style>

	<p>Interface to Echo features.</p>
	<hr>
	<h3><strong>Info</strong></h3>
	<ul>
		<li>Echo devices can be referenced by id or name (not case sensitive)</li>
	</ul>
	<hr>
	<h3><strong>References</strong></h3>
	<ul>
		<li><a href="https://npmjs.com/package/node-red-contrib-alexa-remote2">npm</a> - the nodes npm repository</li>
		<li><a href="https://github.com/586837r/node-red-contrib-alexa-remote2">GitHub</a> - the nodes GitHub repository
		</li>
	</ul>
</script>

<style>
	#dialog-form .red-ui-editableList-item-sortable.red-ui-editableList-item-removable:last-child {
		border-bottom: none !important;
	}
	#dialog-form .red-ui-editableList-border.red-ui-editableList-container {
		overflow-y: auto !important;
	}

	.alexaRemote-arRow {
		flex: 1 !important;
		display: flex !important;
		margin-bottom: 12px !important;
	}
	.alexaRemote-arRow > *:first-child {
		min-width: 150px !important;
		flex: 1 !important;
	}
	.alexaRemote-arRow_label {
		flex: 1 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;	
	}

	.alexaRemote-arSelect, .alexaRemote-arBaseOrSelect > select {
		font-family: FontAwesome, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
	}

	.alexaRemote-arBaseOrSelect {
		display: flex !important;
	}

	.alexaRemote-arBaseOrSelect > select, .alexaRemote-arSelect {
		flex: 1 !important;
		width: 100% !important;
	}
	.alexaRemote-arTypedInputOrInputList .hidden {
		display: none !important;
	}
</style>

<script type="text/javascript">
	RED.nodes.registerType('alexa-remote-echo', {
		category: 'alexa',
		color: '#6fbad8',
		defaults: {
			name: { value: '' },
			account: { value: '', type: 'alexa-remote-account', required: true },
			config: { value: {} },
		},
		inputs: 1,
		outputs: 1,
		icon: 'alexa-remote-icon.png',
		paletteLabel: 'Alexa Echo',
		label: function () {
			function keyToLabel(str) {
				str = String(str);
				const match = str.match(/(?:[A-Z]?[a-z]+)|[A-Z]|[0-9]+/g);
				if (match) str = match.map(s => s.slice(0, 1).toUpperCase() + s.slice(1)).join(' ');
				return str;
			}

			if(this.name) return this.name;
			switch(this.config && this.config.option) {
				case 'get':
					if(this.config.value && this.config.value.device && this.config.value.device.type === 'str' && this.config.value.device.value === 'ALEXA_ALL_DSN') {
						return `Get Echo Devices`;
					}
					return `Get Echo ${keyToLabel(this.config.value && this.config.value.what)}`;
				case 'command':
					const what = this.config.value && this.config.value.what;
					const data = this.config.value && this.config.value.value;
					const value = data && data.value;
					const type = data && data.type;

					switch(what) {
						case 'shuffle': 
						case 'repeat': if(type === 'bool')	return `Echo ${keyToLabel(what)} ${value === 'true' ? 'On' : 'Off'}`;						
						case 'volume': if(type === 'num') return `Echo ${keyToLabel(what)} ${value}`
					}
					return `Echo ${keyToLabel(what)}`;
				case 'bluetooth':
				case 'rename':
				case 'delete':
				case 'tuneIn':
				case 'doNotDisturb':
				case 'alarmVolume':
					return `Echo ${keyToLabel(this.config.option)}`;
				default: 
					return 'Echo';
			}
			if(this.config && this.config.option) 
			return this.name || 'Echo';
		},
		labelStyle: function () {
			return this.name ? 'node_label_italic' : '';
		},
		oneditprepare: function () {
			console.log('loaded', this.config);

			class EventEmitter {
				constructor() {
					this.off();
				}

				once(type, callback) {
					let set = this.onceListeners.get(type);
					if (!set) {
						set = new Set();
						this.onceListeners.set(type, set);
					}
					set.add(callback);
				}

				on(type, callback) {
					let set = this.listeners.get(type);
					if (!set) {
						set = new Set();
						this.listeners.set(type, set);
					}
					set.add(callback);
				}

				// listens until element has left the document
				listen(type, element, callback) {
					if (typeof type !== 'string' || !(element instanceof $ || element instanceof Node) || typeof callback !== 'function') throw new Error('dumbass');

					let map = this.elementListeners.get(type);
					if (!map) {
						map = new Map();
						this.elementListeners.set(type, map);
					}
					map.set(callback, element instanceof $ ? element.get(0) : element);
				}

				off(type, callback) {
					if (arguments.length === 0) {
						this.listeners = new Map(); // { type => Set { callback } }
						this.onceListeners = new Map(); // { type => Set { callback } }
						this.elementListeners = new Map(); // { type => Map { callback => element } }
					}

					if (arguments.length === 1) {
						this.listeners.delete(type);
						this.onceListeners.delete(type);
						return;
					}

					let set, map;

					if (set = this.listeners.get(type)) {
						set.delete(callback);
						if (set.length === 0) this.listeners.delete(type);
					}

					if (set = this.onceListeners.get(type)) {
						set.delete(callback);
						if (set.length === 0) this.onceListeners.delete(type);
					}

					if (map = this.elementListeners.get(type)) {
						map.delete(callback);
						if (map.length === 0) this.elementListeners.delete(type);
					}
				}

				emit(type) {
					const args = [...arguments].slice(1);
					let set, map;

					if (set = this.listeners.get(type)) {
						for (const cb of set) cb(...args);
					}

					if (set = this.onceListeners.get(type)) {
						this.onceListeners.delete(type);
						for (const cb of set) cb(...args);
					}

					if (map = this.elementListeners.get(type)) {
						for (const [cb, e] of map) document.contains(e) ? cb(...args) : map.delete(cb);
					}
				}
			}

			function keyToLabel(str) {
				str = String(str);
				const match = str.match(/(?:[A-Z]?[a-z]+)|[A-Z]|[0-9]+/g);
				if (match) str = match.map(s => s.slice(0, 1).toUpperCase() + s.slice(1)).join(' ');
				return str;
			}
			function template(source, templ, depth = Infinity, fillArray = false) {
				function isObject(x) {
					return typeof x == 'object' && x !== null && !Array.isArray(x)
				}

				if (templ === undefined) {
					return source;
				}

				// are they different types?
				if (typeof templ !== typeof source || Array.isArray(templ) !== Array.isArray(source) || isObject(templ) !== isObject(source)) {
					return templ;
				}

				if (depth !== 0) {
					if (Array.isArray(templ)) {
						if (templ.length === 0) {
							return source;
						}

						const result = [];
						for (let i = 0; i < source.length; i++) {
							result[i] = template(source[i], templ[0], depth - 1);
						}
						return result;
					}

					if (isObject(templ)) {
						const result = {};
						for (const k of Object.keys(templ)) {
							result[k] = template(source[k], templ[k], depth - 1);
						}
						return result;
					}
				}

				return source;
			}
			function inDocument(element) {
				return document.contains(element instanceof $ ? element[0] : element);
			}
			function zip(a, b) {
				const arr = [];
				for (let i = 0; i < a.length; i++) {
					arr[i] = [a[i], b[i]];
				}
				return arr;
			}
			function expand(a) {
				return zip(a, a);
			}
			function clean(obj) {
				return Object.entries(obj).filter(([k, v]) => v || (typeof v === 'number')).reduce((o, [k, v]) => (o[k] = v, o), {});
			}

			$.widget('alexaRemote.arInput', {
				_create: function () {
					this.element.attr('type', 'text').addClass('alexaRemote-arInput');
				},
				value: function (value) {
					if (arguments.length === 0) return this.element.val();
					this.element.val(value);
				}
			});
			$.widget('alexaRemote.arSelect', {
				_create: function () {
					this.element.addClass('alexaRemote-arSelect');
					this.selectOptions([]);
				},
				selectOptions: function (entries) {
					if (arguments.length === 0) {
						return this.element.children().toArray().map(o => [$(o).val(), $(o).html()]);
					}

					this.element.empty();
					for (const entry of entries) {
						const [v, t] = Array.isArray(entry) ? entry : [entry, keyToLabel(entry)];
						$('<option>').val(v).html(t).appendTo(this.element);
					}
				},
				value: function (value) {
					if (arguments.length === 0) {
						return this.element.val();
					}

					this.element.val(value);
				}
			});
			$.widget('alexaRemote.arTypedInput', {
				options: {
					types: [],
					placeholder: ''
				},
				_create: function () {
					this.input = $('<input>').appendTo(this.element)
						.typedInput({ types: this.options.types.concat(['msg', 'flow', 'global', 'jsonata', 'env']) })
						.typedInput('width', '100%');

					if (this.options.placeholder) {
						this.element.find('.red-ui-typedInput-input > input')
							.attr('placeholder', this.options.placeholder);
					}
					this.element.addClass('alexaRemote-arTypedInput');
				},
				value: function (value) {
					if (arguments.length === 0) {
						return this.input.typedInput('value');
					}

					this.input.typedInput('value', value);
				},
				type: function (type) {
					if (arguments.length === 0) {
						return this.input.typedInput('type');
					}

					this.input.typedInput('type', type);
				},
				types: function (types) {
					this.input.typedInput('types', types.concat(['msg', 'flow', 'global', 'jsonata', 'env']));
				},
				refresh: function () {
					// fix display bug
					const type = this.type();
					this.type(type === 'msg' ? 'flow' : 'msg');
					this.type(type);
				},
				data: function (data) {
					if (arguments.length === 0) {
						return {
							type: this.type(),
							value: this.value()
						}
					}

					this.type(data.type);
					this.value(data.value);
				}
			});
			$.widget('alexaRemote.arBaseOrSelect', {
				options: {
					button: false,
				},
				_setup: function (element) {
					this.element.addClass('alexaRemote-arBaseOrSelect');
					this.notSelect = element;
					this.select = $('<select>').css({ width: 50 });

					this._on(this.select, {
						'change': function (event) {
							event.stopPropagation();
							this._inputValue(this.select.val());
							this._change();
						}
					});

					this._on(this.notSelect, {
						'change': function (event) {
							event.stopPropagation();
							this._change();
						}
					});

					if (this.options.button) {
						this.button = $('<a>').addClass('editor-button');

						this.element.css({ display: 'flex' }).append(
							this.notSelect.css({ flex: '1' }),
							this.select.css({ flex: '1' }),
							$('<div>').css({ width: 8 }),
							this.button.append($('<i>').attr('class', 'fa fa-list'))
						);

						this.button.click(() => {
							const active = this.selectActive();
							this.selectActive(!active);
						});
					}
					else {
						this.element.append(this.notSelect, this.select);
					}

					this.selectActive(false);
					this.selectOptions([]);
				},
				_inputValue: function (value) { throw 'abstract widget you dingus'; },
				_selectValue: function (value) {
					if (arguments.length === 0) return this.select.val();
					const found = Array.from(this.select.get(0).options).find(o => o.value === value);
					this.select.val(found ? value : '');
				},
				selectActive: function (active) {
					if (arguments.length === 0) {
						return this.select.is(':visible');
					}

					if (active) {
						this.notSelect.hide();
						this.select.show();
					}
					else {
						this.select.hide();
						this.notSelect.show();
					}
				},
				selectOptions: function (options) {
					if (arguments.length === 0) {
						return this.select.children(':not(:disabled)').toArray().map(o => [$(o).val(), $(o).html()]);
					}
					// allows [['myval', 'My Label'], 'myValAndLabel_special'] => [.., ['myValAndLabel_special', 'My Val And Label Special']]
					options = options.map(o => Array.isArray(o) ? o : [o, keyToLabel(o)]);
					this.select.empty();
					this.select.append('<option hidden disabled selected value>???</option>');
					for (const [value, label] of options) $('<option>').val(value).html(label).appendTo(this.select);
					this._selectValue(this._inputValue());
				},
				selectIndex: function (index) {
					if (arguments.length === 0) return this.select.get(0).selectedIndex - 1;
					const option = this.select.get(0).options[index + 1];
					this.selectActive(true);
					this.value(option && option.value || '');
				},
				selectSomething: function () {
					if (this.selectIndex() < 0) this.selectIndex(0);
				},
				choose: function (some = true) {
					const value = this.value();
					if (some && !value) return this.selectSomething();
					const select = this.select.get(0);
					const found = value && Array.from(select.options).find(o => o.value === value);
					this.selectActive(!!found);
				},
				value: function (value) {
					if (arguments.length === 0) return this._inputValue();
					this._selectValue(value);
					this._inputValue(value);
					this._change();
				},
				_change: function () {
					this.element.trigger('change', this.value());
				}
			})
			$.widget('alexaRemote.arInputOrSelect', $.alexaRemote.arBaseOrSelect, {
				options: {
					placeholder: ''
				},
				_create: function () {
					this.element.addClass('alexaRemote-arInputOrSelect');
					this.input = $('<input>').css({ width: '100%' }).attr('type', 'text');
					if (this.options.placeholder) this.input.attr('placeholder', this.options.placeholder);
					this._setup(this.input);
				},
				_inputValue: function (value) {
					if (arguments.length === 0) return this.input.val();
					this.input.val(value);
				}
			});
			$.widget('alexaRemote.arTypedInputOrSelect', $.alexaRemote.arBaseOrSelect, {
				options: {
					optionType: 'str',
					placeholder: '',
				},
				_create: function () {
					this.element.addClass('alexaRemote-arTypedInputOrSelect');
					this.input = $('<div>').arTypedInput({ placeholder: this.options.placeholder, types: [this.options.optionType] });
					if (typeof this.options.optionType === 'object') this.options.optionType = this.options.optionType.value;
					this._setup(this.input);
				},
				_change: function () {
					this.element.trigger('change', this.data());
				},
				_inputValue: function (value) {
					if (arguments.length === 0) return this.input.arTypedInput('value');
					this.input.arTypedInput('value', value);
				},
				selectActive: function (active) {
					if (arguments.length === 0) {
						return this._super(...arguments);
					}

					this._super(...arguments);
					if (active) this.type(this.options.optionType);
					this.refresh();
				},
				selectActiveMaybe: function (active) {
					if (active && this.type() !== this.options.optionType) return;
					return this.selectActive(...arguments);
				},
				choose: function () {
					const type = this.input.arTypedInput('type');
					type === this.options.optionType ? this._super(...arguments) : this.selectActive(false);
				},
				type: function (type) {
					if (arguments.length === 0) {
						return this.input.arTypedInput('type');
					}

					this.input.arTypedInput('type', type);
					if (this.type() !== this.options.optionType) this.selectActive(false);
				},
				types(types) {
					this.input.arTypedInput('types', types.concat(['msg', 'flow', 'global', 'jsonata', 'env']));
				},
				refresh: function () {
					this.input.arTypedInput('refresh');
				},
				data: function (property) {
					if (arguments.length === 0) {
						return {
							type: this.type(),
							value: this.value()
						}
					}

					this.type(property.type);
					this.value(property.value);
				}
			});
			$.widget('alexaRemote.arInputList', {
				options: {
					add: function (item, index) { return undefined; },
					header: undefined
				},
				_create: function () {
					this.list = $('<ol>').appendTo(this.element).editableList({
						removable: true,
						sortable: true,
						scrollOnAdd: true,
						header: this.options.header && $('<div>').css({ display: 'flex', paddingTop: 4, paddingLeft: 22 + 5, paddingRight: 28 + 5 }).append(this.options.header),
						addItem: (row, index, data) => {
							row.css({ display: 'flex' });
							const callback = this.options.add.bind(row)(data, index);
							row.data('callback', callback);
						}
					});

					this.element.css({ flex: '1', display: 'flex' });
					this.element.find('.red-ui-editableList').css({ flex: '1', display: 'flex', flexDirection: 'column' });
					this.element.find('.red-ui-editableList-border').css({ flex: '1', display: 'flex', flexDirection: 'column' });
					this.element.find('.red-ui-editableList-container').css({ flex: '1' });
					this.element.find('.red-ui-editableList-addButton').css({ alignSelf: 'flex-start' })
				},
				add: function (item) {
					this.list.editableList('addItem', item)
				},
				value: function (items) {
					if (arguments.length === 0) {
						return this.list.editableList('items').toArray().map(row => {
							const callback = row.data('callback');
							return callback && callback();
						});
					}

					this.list.empty();
					for (const item of items) {
						this.list.editableList('addItem', item);
					}
				}
			});
			$.widget('alexaRemote.arInputGroups', {
				options: { clean: true },
				_create: function () {
					this.element.addClass('alexaRemote-arInputGroups');
					this.element.hide();
				},
				groups: function (groups) {
					if (arguments.length === 0) return this.groupMap;
					if (this.groupMap) this.groupValue = this.groupObject = undefined;
					this.groupMap = groups;
					this.update();
				},
				group: function (group) {
					if (arguments.length === 0) return this.groupKey;
					if (this.groupKey === group) return;
					this.groupKey = group;
					if (this.options.clean) this.groupValue = undefined;
					this.update();
				},
				value: function (value) {
					if (arguments.length === 0) return this.groupCallbacks && this.groupCallbacks.getter() || null;
					this.groupValue = value;
					this.update();
				},
				update: function () {
					this.element.empty();
					if (!this.groupMap) return;
					this.groupObject = this.groupMap.hasOwnProperty(this.groupKey) ? this.groupMap[this.groupKey] : undefined;
					if (typeof this.groupObject === 'function') this.groupObject = { create: this.groupObject };
					this.groupCallbacks = this.groupObject && this.groupObject.create && this.groupObject.create.bind(this.element)(this.groupValue);
					if (typeof this.groupCallbacks === 'function') this.groupCallbacks = { getter: this.groupCallbacks };
					if (this.groupObject) this.element.show(); else this.element.hide();
					this.element.trigger('change', this.groupKey);
				}
			});
			$.widget('alexaRemote.arTypedInputOrInputList', {
				_create: function() {
					this.input = $('<div>').arTypedInput({ types: ['str', 'json'] }).css({ flex: '1' });
					this.list = $('<div>').arInputList(this.options);
					this.button = $('<a>').addClass('editor-button');
					this.element.addClass('alexaRemote-arTypedInputOrInputList').css({ display: 'flex'}).append(
						this.input, 
						this.list,
						$('<div>').css({ width: 8 }),
						this.button.css({ alignSelf: 'center' }).append($('<i>').attr('class', 'fa fa-list')),
					);
					
					this.button.click(() => {
						this.listActive(!this.listActive());
					});

					this._listVisible(false);
				},
				_change: function(data) {
					this.element.trigger('change');
				},
				_listVisible: function(visible) {
					if(arguments.length === 0) return !this.list.hasClass('hidden');

					if(visible) {
						this.input.addClass('hidden');
						this.list.removeClass('hidden');
					}
					else {
						this.list.addClass('hidden');
						this.input.removeClass('hidden');
						this.refresh();
					}

					this.button.css({ marginBottom: visible ? 24 : 0 });
				},
				listActive: function(active) {
					if(arguments.length === 0) return this._listVisible();
					
					if(active) {
						const data = this.input.arTypedInput('data');

						let array; 
						if(data.type === 'str') array = [data.value];
						if(data.type === 'json') { try { array = JSON.parse(data.value); } catch(err) {}; }
						
						this.list.arInputList('value', Array.isArray(array) ? array : [undefined]);
					}
					else {
						const array = this.list.arInputList('value');
						const data = array.length <= 1 
							? { type: 'str', value: array[0] || '' }
							: { type: 'json', value: JSON.stringify(array) };

						this.input.arTypedInput('data', data);	
					}
					this._listVisible(active);
					this._change();
				},
				data: function(data) {
					if(arguments.length === 0) {
						return this.listActive() ? this.list.arInputList('value') : this.input.arTypedInput('data');
					}

					if(data === undefined) {
						data = [undefined];
					}

					if(Array.isArray(data)) {
						this.list.arInputList('value', data);
						this._listVisible(true);
					}
					else {
						this.input.arTypedInput('data', data);
						this._listVisible(false);
					}
				},
				refresh: function() {
					this.input.arTypedInput('refresh');
				}
			});
			$.widget('alexaRemote.arTips', {
				_create: function() {
					this.element.addClass('form-tips').css({marginBottom: 12, maxWidth: 'unset'});
				},
				show: function(arg = true) {
					if(typeof arg === 'string') this.element.html(arg);
					arg ? this.element.show() : this.element.hide();
				},
				hide: function(arg = true) {
					this.show(!arg);
				}
			});

			function arFormRow(element, label = '', icon = '') {
				return $('<div>').addClass('form-row arFormRow').append(
					$('<label>').text(' ' + label).prepend(
						$('<i>').attr('class', icon).css({ width: 14, textAlign: 'center' })
					),
					$(document.createTextNode(' ')),
					$('<div>').css({ width: '70%', display: 'inline-block' }).append(
						element.css({ width: '100%' })
					)
				);
			}
			function arRow(element, label, flex = '3') {
				return $('<div>').addClass('alexaRemote-arRow').append(
					$('<label>').addClass('alexaRemote-arRow_label').html(label),
					$('<div>').css({ width: 10 }),
					element.css({ flex: flex }),
				);
			}
			function arInput(data = '') {
				return $('<input>').arInput()
					.arInput('value', data)
					.css({ flex: '1' });
			}
			function arSelect(data = '', options = []) {
				return $('<select>').arSelect()
					.arSelect('selectOptions', options)
					.arSelect('value', data)
					.css({ flex: '1', width: 100 });
			}
			function arTypedInput(data = { type: 'str', value: '' }, types = ['str'], { placeholder = '' } = {}) {
				return $('<div>')
					.arTypedInput({ types: types, placeholder: placeholder })
					.arTypedInput('data', data)
					.css({ flex: '1' });
			}
			function arInputList(data = [], add = () => { }, { header } = {}) {
				return $('<div>')
					.arInputList({ add: add, header: header })
					.arInputList('value', data);
			}
			function arInputOrSelect(data = '', options = [], { button = false, placeholder = '', choose = true, some = true } = {}) {
				const div = $('<div>').css({ flex: '1' })
					.arInputOrSelect({ button: button, placeholder: placeholder })
					.arInputOrSelect('selectOptions', options)
					.arInputOrSelect('value', data);

				if (choose) div.arInputOrSelect('choose', some);
				return div;
			}
			function arTypedInputOrSelect(data = { type: 'str', value: '' }, options = [], { button = true, placeholder = '', optionType = 'str', choose = true, some = true } = {}) {
				const div = $('<div>').css({ flex: '1' })
					.arTypedInputOrSelect({ button: button, placeholder: placeholder, optionType: optionType })
					.arTypedInputOrSelect('selectOptions', options)
					.arTypedInputOrSelect('data', data);

				if (choose) div.arTypedInputOrSelect('choose', some);
				return div;
			}
			function arInputGroups(group, value, groups = {}, clean = true) {
				return $('<div>')
					.arInputGroups({ clean: clean })
					.arInputGroups('group', group)
					.arInputGroups('value', value)
					.arInputGroups('groups', groups);
			}
			function arTypedInputOrInputList(data, add, { header } = {}) {
				return $('<div>').arTypedInputOrInputList({add: add, header: header})
					.arTypedInputOrInputList('data', data);
			}
			function arTips(text = true) {
				return $('<div>').arTips().arTips('show', text);
			}

			const loader = new EventEmitter();
			loader.update = function (success, account = '', devices, bluetooth, messages) {
				this.success = success;
				this.account = account;
				this.devices = !success ? [] : devices;
				this.bluetoothDevicesById = !success ? {} : bluetooth;
				this.messages = !success ? {} : messages;
				this.emit('change', this.success);
			}
			loader.load = function() {
				const account = $('#node-input-account').val();
				if (loader.account === account) return /*console.log('updateLoader', {result: 'same account', account: account, loader: loader})*/;
				loader.update(false, account);
				if (!account || account === '_ADD_') return /*console.log('updateLoader', {result: 'invalid account', account: account, loader: loader})*/;

				const getDevices = $.get('alexa-remote-devices.json', { account: account }, null, 'json');
				const getBluetooth = $.get('alexa-remote-bluetooth.json', { account: account }, null, 'json');
				const getMessages = $.get('alexa-remote-error-messages.json', { account: account }, null, 'json');

				$.when(getDevices, getBluetooth, getMessages)
					.done(([devices], [bluetooth], [messages]) => { loader.update(true, account, devices, bluetooth, messages); /*console.log('updateLoader', {result: 'success', account: account, loader: loader});*/ })
					.fail(res => RED.notify(res.responseText || 'Unknown error, reopen this node...', 'error'));
			}
			loader.update(false);
			loader.on('change', (success) => console.log('loaderChange', { state: success ? 'SUCCESS' : 'FAILURE', loader: loader }));

			const data = template(this.config, { option: 'command', value: undefined });
			const form = $('#dialog-form').css({ display: 'flex', flexDirection: 'column' });
			const inputs = $('#node-input-inputs_div').css({ flex: '1', display: 'flex', flexDirection: 'column' }).arInputGroups()
				.arInputGroups('group', data.option)
				.arInputGroups('value', data.value)
				.arInputGroups('groups', {
					get: function (data) {
						data = template(data, { what: 'playerInfo', device: {type: 'str', value:''} });

						const what = arSelect(data.what, [
							'device', // getDevices()
							'media', // getMedia(dsn)
							'playerInfo', // getPlayerInfo(dsn)
							'alarmVolume', // getDeviceNotificationState(dsn)
							'preferences', // getDevicePreferences()
							'doNotDisturb', // getDeviceStatusList()
							'wakeWord', // getWakeWords()
							'notifications', // getNotifications(cached)
							'bluetooth', // getBluetooth(cached)
						]);
						
						const device = arTypedInputOrSelect(data.device);
						const updateDevice = () => {
							const value = what.arSelect('value');
							const hasAll = [
								'device', 
								//'media', 
								//'playerInfo', 
								'alarmVolume', 
								'preferences', 
								'doNotDisturb', 
								'wakeWord', 
								'notifications', 
								'bluetooth', 
							].includes(value);
							const options = hasAll ? [['ALEXA_ALL_DSN', '&#xf0ac;  All Devices']].concat(loader.devices) : loader.devices;
							device.arTypedInputOrSelect('selectOptions', options);
							device.arTypedInputOrSelect('selectActiveMaybe', loader.success);
							if(!device.arTypedInputOrSelect('value') && loader.success) device.arTypedInputOrSelect('selectSomething');
						}
						loader.listen('change', device, updateDevice);
						what.on('change', updateDevice);
						updateDevice();

						arFormRow(what, 'What', 'fa fa-question-circle').appendTo(this);
						arFormRow(device, 'Device', 'fa fa-circle-o').appendTo(this);
						
						return () => ({ 
							what: what.arSelect('value'), 
							device: device.arTypedInputOrSelect('data'),
						});
					},
					command: function(data) {
						data = template(data, {what: 'forward', device: {type: 'str', value: ''}, value: undefined });
						
						const what = arSelect(data.what, [
							['play', 		'&#xf04b;  Play'], // play
							['pause',		'&#xf04c;  Pause'], // pause
							['next', 		'&#xf051;  Next'], // step-forward
							['previous', 	'&#xf048;  Previous'], // step-backward
							['forward',		'&#xf04e;  Forward'], // forward
							['rewind', 		'&#xf04a;  Rewind'], // backward
							['volume',		'&#xf028;  Volume'], // volume-up
							['shuffle', 	'&#xf074;  Shuffle'], // random
							['repeat', 		'&#xf01e;  Repeat'], // repeat
						]);

						const device = arTypedInputOrSelect(data.device);
						const updateDevice = () => {
							device.arTypedInputOrSelect('selectOptions', loader.devices);
							device.arTypedInputOrSelect('selectActiveMaybe', loader.success);
							if(!device.arTypedInputOrSelect('value') && loader.success) device.arTypedInputOrSelect('selectSomething');
						}
						loader.listen('change', device, updateDevice);
						updateDevice();

						const inputGroups = arInputGroups(data.what, data.value, {
							volume: function (data) {
								data = template(data, { type: 'num', value: '50' });
								const input = arTypedInput(data, ['num']);
								arFormRow(input, 'Volume', 'fa fa-volume-up').appendTo(this);
								return () => input.arTypedInput('data');
							},
							shuffle: function (data) {
								data = template(data, { type: 'bool', value: 'true' });
								const input = arTypedInput(data, ['bool']);
								arFormRow(input, 'Enabled', 'fa fa-question-circle').appendTo(this);
								return () => input.arTypedInput('data');
							},
							repeat: function (data) {
								data = template(data, { type: 'bool', value: 'true' });
								const input = arTypedInput(data, ['bool']);
								arFormRow(input, 'Enabled', 'fa fa-question-circle').appendTo(this);
								return () => input.arTypedInput('data');
							}
						}).css({ flexDirection: 'column' }); 
						what.on('change', () => inputGroups.arInputGroups('group', what.arSelect('value')));

						arFormRow(what, 'What', 'fa fa-question-circle').appendTo(this);
						arFormRow(device, 'Device', 'fa fa-circle-o').appendTo(this);
						inputGroups.appendTo(this);

						return () => clean({
							device: device.arTypedInputOrSelect('data'),
							what: what.arSelect('value'), 
							value: inputGroups.arInputGroups('value')
						});
					},
					bluetooth: function(data) {
						data = template(data, {action: {type: 'str', value: 'pair'}, device: {type: 'str', value: ''}, gadget: {type:'str', value:''}});

						const action = arTypedInputOrSelect(data.action, [
							['pair', 		'&#xf0c1;  Pair / Connect'], // link
							['unpair',		'&#xf127;  Unpair'], // chain-broken
							['disconnect', 	'&#xf057;  Disconnect'], // times-circle
						]);
						
						const device = arTypedInputOrSelect(data.device);
						const updateDevice = () => {
							device.arTypedInputOrSelect('selectOptions', loader.devices);
							device.arTypedInputOrSelect('selectActiveMaybe', loader.success);
							if(!device.arTypedInputOrSelect('value') && loader.success) device.arTypedInputOrSelect('selectSomething');
						}
						loader.listen('change', device, updateDevice);
						updateDevice();

						const gadget = arTypedInputOrSelect(data.bluetooth);
						const updateBluetooth = () => {
							const id = device.arTypedInputOrSelect('value');
							const bluetoothDevices = loader.bluetoothDevicesById[id] || [];
							gadget.arTypedInputOrSelect('selectOptions', bluetoothDevices);
							gadget.arTypedInputOrSelect('selectActiveMaybe', loader.success);
							if(!gadget.arTypedInputOrSelect('value') && loader.success) gadget.arTypedInputOrSelect('selectSomething');
						}
						loader.listen('change', gadget, updateBluetooth);
						device.on('change', updateBluetooth);
						updateBluetooth();

						arFormRow(device, 'Device', 'fa fa-circle-o').appendTo(this);
						arFormRow(gadget, 'Gadget', 'fa fa-bluetooth').appendTo(this);
						arFormRow(action, 'Action', 'fa fa-bolt').appendTo(this);

						return () => ({
							action: action.arTypedInputOrSelect('data'), 
							device: device.arTypedInputOrSelect('data'),
							gadget: gadget.arTypedInputOrSelect('data'),
						})
					},
					rename: function(data) {
						data = template(data, { device: {type: 'str', value:''}, name: {type: 'str', value: ''}});

						const device = arTypedInputOrSelect(data.device);
						const updateDevice = () => {
							device.arTypedInputOrSelect('selectOptions', loader.devices);
							device.arTypedInputOrSelect('selectActiveMaybe', loader.success);
							if(!device.arTypedInputOrSelect('value') && loader.success) device.arTypedInputOrSelect('selectSomething');
						}
						loader.listen('change', device, updateDevice);
						updateDevice();

						const name = arTypedInput(data.name);
						
						arFormRow(device, 'Device', 'fa fa-circle-o').appendTo(this);
						arFormRow(name, 'Name', 'fa fa-tag').appendTo(this)

						return () => ({ device: device.arTypedInputOrSelect('data'), name: name.arTypedInput('data')});
					},
					delete: function(data) {
						data = template(data, { device: {type: 'str', value:''}});

						const device = arTypedInputOrSelect(data.device);
						const updateDevice = () => {
							device.arTypedInputOrSelect('selectOptions', loader.devices);
							device.arTypedInputOrSelect('selectActiveMaybe', loader.success);
							if(!device.arTypedInputOrSelect('value')) device.arTypedInputOrSelect('selectSomething');
						}
						loader.listen('change', device, updateDevice);
						updateDevice();
					
						arFormRow(device, 'Device', 'fa fa-circle-o').appendTo(this);

						return () => ({ device: device.arTypedInputOrSelect('data')});
					},
					tuneIn: function (data) {
						data = template(data, { device: { type: 'str', value: '' }, guideId: {type: 'str', value: ''}, contentType: {type:'str', value: 'station'} });

						const device = arTypedInputOrSelect(data.device);
						const guideId = arTypedInput(data.guideId);
						const contentType = arTypedInput(data.contentType);

						const updateDevice = () => {
							device.arTypedInputOrSelect('selectOptions', loader.devices);
							device.arTypedInputOrSelect('selectActiveMaybe', loader.success);
							if (!device.arTypedInputOrSelect('value')) device.arTypedInputOrSelect('selectSomething');
						}
						loader.listen('change', device, updateDevice);
						updateDevice();

						arFormRow(device, 'Device', 'fa fa-circle-o').appendTo(this);
						arFormRow(guideId, 'Guide Id').appendTo(this);
						arFormRow(contentType, 'Content Type').appendTo(this);

						return () => ({ 
							device: device.arTypedInputOrSelect('data'),
							guideId: guideId.arTypedInput('data'),
							contentType: contentType.arTypedInput('data'),
						});
					},
					doNotDisturb: function(data) {
						data = template(data, { device: { type: 'str', value: '' }, enabled: {type: 'bool', value: 'false'} });

						const device = arTypedInputOrSelect(data.device);
						const enabled = arTypedInput(data.enabled, ['bool']);

						const updateDevice = () => {
							device.arTypedInputOrSelect('selectOptions', loader.devices);
							device.arTypedInputOrSelect('selectActiveMaybe', loader.success);
							if (!device.arTypedInputOrSelect('value')) device.arTypedInputOrSelect('selectSomething');
						}
						loader.listen('change', device, updateDevice);
						updateDevice();

						arFormRow(device, 'Device', 'fa fa-circle-o').appendTo(this);
						arFormRow(enabled, 'Enabled', 'fa fa-toggle-on').appendTo(this);

						return () => ({ 
							device: device.arTypedInputOrSelect('data'),
							enabled: enabled.arTypedInput('data'),
						});
					},
					alarmVolume: function (data) {
						data = template(data, { device: { type: 'str', value: '' }, volume: { type: 'num', value: '50' } });

						const device = arTypedInputOrSelect(data.device);
						const volume = arTypedInput(data.volume);

						const updateDevice = () => {
							device.arTypedInputOrSelect('selectOptions', loader.devices);
							device.arTypedInputOrSelect('selectActiveMaybe', loader.success);
							if (!device.arTypedInputOrSelect('value')) device.arTypedInputOrSelect('selectSomething');
						}
						loader.listen('change', device, updateDevice);
						updateDevice();

						arFormRow(device, 'Device', 'fa fa-circle-o').appendTo(this);
						arFormRow(volume, 'Volume', 'fa fa-volume-up').appendTo(this);

						return () => ({
							device: device.arTypedInputOrSelect('data'),
							volume: volume.arTypedInput('data'),
						});
					},
				});
			const select = arSelect(data.option, [
				['get', 			'&#xf05a; Get'], 
				['command', 		'&#xf001; Music command'], 
				['bluetooth', 		'&#xf293; Bluetooth'],
				['rename',			'&#xf02b; Rename'],
				['delete', 			'&#xf1f8; Delete'],
				['tuneIn',			'&#xf001; TuneIn'],
				['doNotDisturb', 	'&#xf05e; Do not disturb' ],
				['alarmVolume',		'&#xf0f3; Alarm volume'],
			]);
			arFormRow(select, 'Select', 'fa fa-sort').insertBefore(inputs);
			const divider = $('<hr>').css({ margin: '12px 0px' }).insertBefore(inputs);
			const info = arTips().insertBefore(inputs);

			select.on('change', () => inputs.arInputGroups('group', select.arSelect('value')));

			function updateInfo() {
				if(!loader.success) {
					return info.arTips('show', '<b>Note:</b> Select an initialised account first to be able to select from a list of devices!');
				}

				const value = select.arSelect('value');
				let message = '';

				if(loader.messages.devices) {
					message += `Loading echo devices failed: "${loader.messages.devices}"`;
				}

				if (value === 'bluetooth' && loader.messages.bluetooth) {
					message += `Loading bluetooth states failed: "${loader.messages.bluetooth}". `;
				}

				info.arTips('show', message ? `<b>Warning:</b> ` + message : false);
			}
			loader.on('change', updateInfo);
			updateInfo();

			loader.load();
			$('#node-input-account').on('change', () => loader.load());
		},
		oneditsave: function () {
			function clean(obj) {
				return Object.entries(obj).filter(([k, v]) => v || (typeof v === 'number')).reduce((o, [k, v]) => (o[k] = v, o), {});
			}

			const inputs = $('#node-input-inputs_div');
			this.config = clean({
				option: inputs.arInputGroups('group'),
				value: inputs.arInputGroups('value'),
			});
			console.log('saved', this.config);
		},
	});
</script>