node-red-contrib-wio-seeed/wio-event/wio-event.html

Wio Link Nodes using Grove modules for Node RED

<script type="text/javascript">
	RED.nodes.registerType('wio-event', {
		paletteLabel: 'event',
		category: 'wio',
		color: '#C0EDC0',
		defaults: {
			name: { value: '' },
			connection: { type: 'wio-config' },
			node: { value: '' },
			output: { value: 'value' },
			events: { value: [] },
			outputs: { value: 1 }
		},
		inputs: 0,
		outputs: 1,
		icon: 'inject.png',
		label: function () {
			return this.name || 'event';
		},
		oneditprepare: function () {
			var config = this;
			$.getJSON('wio-modules').done(function (skus) {
				$.getScript('wio-common').done(function (res) {
					WioCommon(config);

					var addEvent = $('#node-input-add-event');
					var output = $('#node-input-output');
					var eventsRows = $('.node-input-event-row');
					var eventsContainer = $('#node-input-event-container');

					output.on('change', function () {
						eventsRows.toggle((output.val() == 'value'));
					}).trigger('change');

					addEvent.on('click', function () {
						generateEvent((eventsContainer.children().length + 1));
					});

					for (var i = 0; i < config.events.length; i++)
						generateEvent((i + 1), config.events[i]);

					function generateEvent(index, event) {
						var container = $('<li/>')
							.attr('style', 'background: #fff; margin:0; padding: 8px 0px; border-bottom: 1px solid #ccc;');
						var row = $('<div/>').appendTo(container);

						var eventSelect = $('<select/>')
							.attr('class', 'node-input-event-type')
							.attr('style', 'width: 320px; margin-left: 5px;')
							.appendTo(row);

						for (var sku in skus)
							if ((skus.hasOwnProperty([sku])) && (skus[sku].events))
								for (var skuEvent in skus[sku].events)
									if (skus[sku].events.hasOwnProperty(skuEvent))
										$('<option/>').attr('value', skuEvent)
											.text(skus[sku].name + ' - ' + skus[sku].events[skuEvent].name)
											.appendTo(eventSelect);
						if (event)
							eventSelect.val(event);

						var finalSpan = $('<span/>')
							.attr('style', 'float: right; margin-right: 10px;')
							.append(' &#8594; ')
							.appendTo(row);

						$('<span/>').attr('class', 'node-input-event-index')
							.text(index).appendTo(finalSpan);

						var deleteButton = $('<a/>')
							.attr('href', '#')
							.attr('class', 'editor-button editor-button-small')
							.attr('style', 'margin-top: 7px; margin-left: 5px;')
							.appendTo(finalSpan);
						$('<i/>').attr('class', 'fa fa-remove').appendTo(deleteButton);

						deleteButton.on('click', function () {
							container
								.css('background', '#FEE')
								.fadeOut(300, function () {
									$(this).remove();
									eventsContainer.children().each(function (index) {
										$(this).find('.node-input-event-index').text(index + 1);
									});
								});
						});

						eventsContainer.append(container);
					}
				});
			});
		},
		oneditsave: function () {
			var config = this;
			config.events = [];
			var output = $('#node-input-output');
			var eventsContainer = $('#node-input-event-container');

			eventsContainer.children().each(function (index) {
				config.events.push($(this).find('.node-input-event-type').val());
			});

			config.outputs = ((output.val() == 'value') ? config.events.length : 1);
		}
	});
</script>

<script type="text/x-red" data-template-name="wio-event">
	<div class="form-row">
		<label for="node-input-name"><i class="icon-tag"></i> Name</label>
		<input type="text" id="node-input-name" placeholder="Name">
	</div>
	<div class="form-row">
		<label for="node-input-connection"><i class="icon-tag"></i> Connection</label>
		<select type="text" id="node-input-connection"></select>
	</div>
	<div class="form-row">
		<label for="node-input-node"><i class="icon-tag"></i> Node</label>
		<select type="text" id="node-input-node"></select>
	</div>
	<div class="form-row">
		<label for="node-input-output"><i class="icon-tag"></i> Output</label>
		<select type="text" id="node-input-output">
			<option value="value">Parsed Value</option>
			<option value="object">Raw Object</option>
		</select>
	</div>
	<div class="form-row node-input-event-row" style="margin-bottom: 0px;">
		<div style="box-sizing: border-box; border-radius: 5px; height: 310px; padding: 5px; border: 1px solid #ccc; overflow-y: scroll;">
			<ol id="node-input-event-container" style="list-style-type: none; margin: 0;"></ol>
		</div>
	</div>
	<div class="form-row node-input-event-row">
		<a href="#" class="editor-button editor-button-small" id="node-input-add-event" style="margin-top: 4px;"><i class="fa fa-plus"></i> Add Event</a>
	</div>
</script>

<script type="text/x-red" data-help-name="wio-event">
	<p>Wio Event</p>
</script>