node-red-contrib-ui-areyousure/areyousure.html

A simple NodeRED dashboard node that opens a full screen popup to check if the user wants to perform an action

/**
* Copyright JS Foundation and other contributors, http://js.foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
**/

<script type="text/x-red" data-template-name="ui_are_you_sure">
    <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>
    <div class="form-row" id="template-row-group">
		<label><i class="fa fa-fw fa-table"></i> Group</label>
		<input type="text" id="node-input-group" />
	</div>
    <p>The group doesn't actually matter, just set it to any group.</p>
</br>

    <h3>Optional Configuration</h3>
    <div class="form-row">
        <label for="node-input-icon"><i class="fa fa-tag"></i> Icon</label>
        <input type="text" id="node-input-icon">
    </div>
    <div class="form-row">
        <label for="node-input-title"><i class="fa fa-tag"></i> Title</label>
        <input type="text" id="node-input-title">
    </div>
    <div class="form-row">
        <label for="node-input-description"><i class="fa fa-tag"></i> Description</label>
        <input type="text" id="node-input-description">
    </div>
    <div class="form-row">
        <label for="node-input-timeoutSec"><i class="fa fa-clock-o"></i> Timeout (Seconds)</label>
        <input type="text" id="node-input-timeoutSec">
    </div>
    <div class="form-row">
        <label for="node-input-backgroundColor"><i class="fa fa-tint"></i> Background Color</label>
        <input type="color" id="node-input-backgroundColor" style="width: 10%">
    </div>
    <div class="form-row">
        <label for="node-input-iconColor"><i class="fa fa-tint"></i> Icon Color</label>
        <input type="color" id="node-input-iconColor" style="width: 10%">
    </div>
    <div class="form-row">
        <label for="node-input-textColor"><i class="fa fa-tint"></i> Text Color</label>
        <input type="color" id="node-input-textColor" style="width: 10%">
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType("ui_are_you_sure", {
        category: 'dashboard',
        color: 'rgb( 63, 173, 181)',
        defaults: {
            name: { value: '' },
            group: { type: 'ui_group', required: true },
            iconColor: { value: "#ffcc00" },
            textColor: { value: "#ffffff" },
            backgroundColor: { value: "#000000" },
            icon: { value: "fa fa-exclamation-triangle" },
            title: { value: "Are You Sure?" },
            description: { value: "Are you sure you want to perform this action?" },
            timeoutSec: { value: 10, validate: RED.validators.number()},
        },
        inputs: 1,
        inputLabels: ["payload"],
        outputs: 2,
        outputLabels: ["yes", "no"],
        icon: "alert.svg",
        paletteLabel: "Are You Sure?",
        label: function () { return this.name || "Are You Sure?"; }
    });
</script>