node-red-contrib-zwave-js/nodes/ZWaveJSSplitter.html

The most powerful, high performing and highly polished Z-Wave node for Node-RED based on Z-Wave JS. If you want a fully featured Z-Wave framework in your Node-RED instance, you have found it.

<script type="text/template" id="ZWJS_TPL_Split">
	<div style="padding:3px">
		<div class="form-row" style="height:24px">
			<label><i class="fa fa-tag"></i> Name</label>
			<input type="text" name="zwjz-s-name" value="{{name}}">
		</div>
		{{#if valueId.commandClass}}
			<div class="form-row" style="height:24px">
				<label><i class="fa fa-search"></i> Class</label>
				<input type="text" name="zwjz-c-name" value="{{valueId.commandClassName}}" readonly>
			</div>
			<div class="form-row" style="height:24px">
				<label><i class="fa fa-info-circle"></i> Property</label>
				<input type="text" name="zwjz-p-name" value="{{valueId.propertyName}}" readonly>
			</div>
			{{#if valueId.propertyKeyName}}
				<div class="form-row" style="height:24px">
					<label><i class="fa fa-info-circle"></i> Key</label>
					<input type="text" name="zwjz-k-name" value="{{valueId.propertyKeyName}}" readonly>
				</div>
			{{/if}}
		{{else}}
			<div class="form-row" style="height:auto">
				<label><i class="fa fa-info-circle"></i> Custom</label>
				<div>
					<pre>{{{pretty valueId}}}</pre>
				</div>
			</div>
		{{/if}}
	</div>
</script>

<script type="text/javascript">
	const SplitTemplate = Handlebars.compile($('#ZWJS_TPL_Split').html());
	let ZWJSIndexMap = undefined;
	const ZWJSSplitterNodeSettings = {
		category: 'ZWave JS',
		color: 'rgb(46,145,205)',
		defaults: {
			name: {
				value: 'ZWave Event Splitter',
				required: true
			},
			splits: { value: [] },
			outputs: { value: 0 }
		},
		inputs: 1,
		outputs: 1,
		icon: 'Split.svg',
		label: function () {
			return this.name;
		},
		outputLabels: function (index) {
			return this.splits[index]?.name
		},
		paletteLabel: 'Event Splitter',
		oneditprepare: SortUI,
		oneditsave: DoSave
	};

	RED.nodes.registerType('zwavejs-splitter', ZWJSSplitterNodeSettings);

	function compare(a, b) {
		if (a.index < b.index) {
			return -1;
		}
		if (a.index > b.index) {
			return 1;
		}
		return 0;
	}

	function DoSave() {

		

		$('#node-input-outputs').val(JSON.stringify(ZWJSIndexMap));

		this.splits = [];
		const Items = $('#splitters').editableList('items').sort(compare);

		for (let i = 0; i < Items.length; i++) {
			const Data = Items[i].data('data');
			Data.index = i;
			delete Data.originalIndex;

			this.splits.push(Data);
		}
	}

	function SortUI() {
		ZWJSIndexMap = {};
		$('#splitters').editableList({
			header: $('<div>').append('<div>Splits - order defines outputs</div>'),
			sortable: true,
			removable: true,
			addItem: AddItem,
			addButton: false,
			sortItems: SortItems,
			removeItem: RemoveItem
		});

		this.splits.sort(compare).forEach((Item) => {
			$('#splitters').editableList('addItem', Item);
		});
	}

	function SortItems(Items) {
		for (let i = 0; i < Items.length; i++) {
			ZWJSIndexMap[Items[i].data('data').originalIndex] = i;
			Items[i].data('data').index = i;
		}
	}

	function RemoveItem(Item) {
		ZWJSIndexMap[Item.originalIndex] = -1;
		const Items = $('#splitters').editableList('items');
		for (let i = 0; i < Items.length; i++) {
			ZWJSIndexMap[Items[i].data('data').originalIndex] = i;
			Items[i].data('data').index = i;
		}
	}

	function AddItem(container, index, data) {
		data.originalIndex = index;
		ZWJSIndexMap[data.originalIndex] = index;
		$(container).data('data', data);
		$(container).css({ minWidth: '400px' });
		$(container).append(SplitTemplate(data));
	}
</script>

<!-- prettier-ignore -->
<script type="text/x-red" data-template-name="zwavejs-splitter">
	<input type="hidden" id="node-input-outputs">
	<h3>Basic</h3>
	<hr />
	<div class="form-row">
	    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
	    <input type="text" id="node-input-name">
	</div>

	<h3>Split Outputs</h3>
	<hr />
	<div>
	      <ol id="splitters" style="min-height:350px;min-width:400px"> </ol>
	</div>
	<div class="form-tips" id="node-tip">
		To add rows to this splitter, please review a Command Class Property from the Side bar, and choose this Event Splitter.
	</div>
</script>

<!-- prettier-ignore -->
<script type="text/markdown" data-help-name="zwavejs-splitter">
	<p>A ZWave Event Splitter</p>
</script>