51 lines
2.1 KiB
HTML
51 lines
2.1 KiB
HTML
|
<script type="text/javascript">
|
||
|
|
(function () {
|
||
|
|
// convert to i18 text
|
||
|
|
function c_ (x) {
|
||
|
|
return RED._('@flowfuse/node-red-dashboard/ui-control:ui-control.' + x)
|
||
|
|
}
|
||
|
|
|
||
|
|
RED.nodes.registerType('ui-control', {
|
||
|
|
category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
|
||
|
|
color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.darkest'),
|
||
|
|
defaults: {
|
||
|
|
name: { value: '' },
|
||
|
|
ui: { type: 'ui-base', value: '', required: true },
|
||
|
|
events: { value: 'all' }
|
||
|
|
},
|
||
|
|
inputs: 1,
|
||
|
|
outputs: 1,
|
||
|
|
align: 'right',
|
||
|
|
icon: 'font-awesome/fa-arrow-circle-right',
|
||
|
|
paletteLabel: 'ui control',
|
||
|
|
label: function () { return this.name || 'ui control' },
|
||
|
|
labelStyle: function () { return this.name ? 'node_label_italic' : '' },
|
||
|
|
outputLabels: function () { return this.events },
|
||
|
|
oneditprepare: function () {
|
||
|
|
const node = this
|
||
|
|
const sel = $('#node-input-events')
|
||
|
|
for (const name of ['all', 'change', 'connect']) {
|
||
|
|
const text = c_('events.' + name)
|
||
|
|
$('<option/>').val(name).text(text).appendTo(sel)
|
||
|
|
}
|
||
|
|
$(sel).val(node.events)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script type="text/html" data-template-name="ui-control">
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="ui-control.label.name"></span></label>
|
||
|
|
<input type="text" id="node-input-name" data-i18n="[placeholder]ui-control.placeholder.name">
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="node-input-ui"><i class="fa fa-bookmark"></i> UI</label>
|
||
|
|
<input type="text" id="node-input-ui">
|
||
|
|
</div>
|
||
|
|
<div class="form-row">
|
||
|
|
<label for="node-input-events"><i class="fa fa-sign-out"></i> <span data-i18n="ui-control.label.output"></span></label>
|
||
|
|
<select id="node-input-events" style="width:70%;">
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</script>
|