117 lines
5.2 KiB
HTML
117 lines
5.2 KiB
HTML
<script type="text/javascript">
|
|
RED.nodes.registerType('ui-group', {
|
|
category: 'config',
|
|
defaults: {
|
|
name: {
|
|
value: RED._('@flowfuse/node-red-dashboard/ui-group:ui-group.label.groupName'),
|
|
required: true
|
|
},
|
|
page: { type: 'ui-page', required: true },
|
|
width: { value: 6 },
|
|
height: { value: 1 },
|
|
order: { value: -1 },
|
|
showTitle: { value: true }, // show title on group card
|
|
className: { value: '' },
|
|
visible: { value: true },
|
|
disabled: { value: false }
|
|
},
|
|
label: function () {
|
|
const page = RED.nodes.node(this.page)?.name || ''
|
|
return `[${page}] ${this.name}` || 'UI Group'
|
|
},
|
|
oneditprepare: function () {
|
|
if (this.disp) {
|
|
this.showTitle = this.disp
|
|
}
|
|
$('#node-config-input-size').elementSizer({
|
|
width: '#node-config-input-width',
|
|
height: '#node-config-input-height',
|
|
auto: false
|
|
})
|
|
|
|
// backwards compatibility
|
|
if (this.visible === undefined || this.visible === true) {
|
|
this.visible = true
|
|
$('#node-config-input-visible').val('true')
|
|
} else if (this.visible === false) {
|
|
this.visible = false
|
|
$('#node-config-input-visible').val('false')
|
|
}
|
|
// backwards compatibility
|
|
if (this.disabled === undefined || this.disabled === false) {
|
|
this.disabled = false
|
|
$('#node-config-input-disabled').val('false')
|
|
} else if (this.disabled === true) {
|
|
this.disabled = true
|
|
$('#node-config-input-disabled').val('true')
|
|
}
|
|
},
|
|
oneditsave: function () {
|
|
// convert string to boolean
|
|
const visible = $('#node-config-input-visible').val()
|
|
if (visible === 'true') {
|
|
this.visible = true
|
|
} else {
|
|
this.visible = false
|
|
}
|
|
|
|
// convert string to boolean
|
|
const disabled = $('#node-config-input-disabled').val()
|
|
if (disabled === 'true') {
|
|
this.disabled = true
|
|
} else {
|
|
this.disabled = false
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<script type="text/html" data-template-name="ui-group">
|
|
<div class="form-row">
|
|
<label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
|
|
<input type="text" id="node-config-input-name" data-i18n="[placeholder]node-red:common.label.name">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-config-input-page"><i class="fa fa-bookmark"></i> <span data-i18n="ui-group.label.page"></label>
|
|
<input type="text" id="node-config-input-page">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="node-config-input-size"><i class="fa fa-arrows-h"></i> <span data-i18n="ui-group.label.size"></label>
|
|
<input type="hidden" id="node-config-input-width">
|
|
<input type="hidden" id="node-config-input-height">
|
|
<button class="editor-button" id="node-config-input-size"></button>
|
|
</div>
|
|
<div class="form-row">
|
|
<input style="margin:8px 0 10px 102px; width:20px;" type="checkbox" checked id="node-config-input-showTitle">
|
|
<label style="width:auto" for="node-config-input-showTitle"><span data-i18n="ui-group.label.display-name"></span></label>
|
|
</div>
|
|
<div class="form-row" id="text-row-class">
|
|
<label for="node-config-input-className"><i class="fa fa-code"></i> <span data-i18n="ui-group.label.className"></span></label>
|
|
<input type="text" id="node-config-input-className" data-i18n="[placeholder]ui-group.label.classNamePlaceholder"/>
|
|
</div>
|
|
<div class="form-row" style="font-weight: 600;">
|
|
<i class="w-16 fa fa-eye"></i> <span data-i18n="ui-group.label.defaultState"></span>
|
|
</div>
|
|
<div class="form-row">
|
|
<div style="display: flex; align-items: center; gap: 2px;">
|
|
<label for="node-config-input-visible" style="margin-bottom: 0" data-i18n="ui-group.label.visibility"></label>
|
|
<select id="node-config-input-visible" style="width: 150px;">
|
|
<option value="true" data-i18n="ui-group.label.visible"></option>
|
|
<option value="false" data-i18n="ui-group.label.hidden"></option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div style="display: flex; align-items: center; gap: 2px;">
|
|
<label for="node-config-input-disabled" style="margin-bottom: 0" data-i18n="ui-group.label.interactivity"></label>
|
|
<select id="node-config-input-disabled" style="width: 150px;">
|
|
<option value="false" data-i18n="ui-group.label.active"></option>
|
|
<option value="true" data-i18n="ui-group.label.disabled"></option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<button onclick="RED.sidebar.show('dashboard-2.0')" class="editor-button editor-button-small" data-i18n="ui-group.label.openDashboardSidebar"></button>
|
|
</div>
|
|
</script>
|