@viun/node-red-contrib-overview/nodes/change-recipe.html

Collection of nodes to control the Overview's smart AI cameras

<script type="text/x-red" data-help-name="change recipe">
    <p>Change the active recipe on the device.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('change recipe', {
        category: 'device',
        color: '#D8BFD8',
        defaults: {
            name: { value: '' },
            recipeId: { value: '', required: true, validate: function(v) {
                    const recipeId = parseInt(v);
                    return !isNaN(recipeId) && recipeId >= 0 && Number.isInteger(recipeId);
                } },
            hostname: { value: 'localhost', required: true },
            port: { value: '5001', required: true, validate: function(v) {
                    const port = parseInt(v);
                    return !isNaN(port) && port >= 1 && port <= 65535;
                } }
        },
        inputs: 1,
        outputs: 1,
        icon: 'font-awesome/fa-camera',
        label: function() {
            return this.name || `Change Recipe to ${this.recipeId}`;
        },
        oneditprepare: function() {
            $("#node-input-name").attr('placeholder', `Change Recipe to ${this.recipeId}`);
            $("#node-input-recipeId").typedInput({
                type:"num",
                types:["num"],
                typeField: "#node-input-recipeId-type"
            });
            $("#node-input-hostname").typedInput({
                type:"str",
                types:["str"],
                typeField: "#node-input-hostname-type"
            });
            $("#node-input-port").typedInput({
                type:"num",
                types:["num"],
                typeField: "#node-input-port-type"
            });
        },
        oneditsave: function() {
            // Get values from input fields
            this.recipeId = $("#node-input-recipeId").val();
            this.port = $("#node-input-port").val();
            
            // Check if Recipe ID exists
            if (!this.recipeId || this.recipeId.trim() === '') {
                RED.notify("Recipe ID is required", "error");
                return false;
            }
            
            // Validate Recipe ID is a non-negative integer
            const recipeId = parseInt(this.recipeId);
            if (isNaN(recipeId) || recipeId < 0 || !Number.isInteger(recipeId)) {
                RED.notify("Recipe ID must be a non-negative integer", "error");
                return false;
            }
            
            // Validate port number
            const port = parseInt(this.port);
            if (isNaN(port) || port < 1 || port > 65535) {
                RED.notify("Port must be a number between 1 and 65535", "error");
                return false;
            }

            return true;
        }
    });
</script>

<script type="text/html" data-template-name="change recipe">
    <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">
        <!-- <p class="form-tips">Find the Recipe ID on the device UI.</p> -->
        <label for="node-input-recipeId"><i class="fa fa-key"></i> Recipe ID</label>
        <input type="number" id="node-input-recipeId" placeholder="Recipe ID">
    </div>
    <div class="form-row">
        <label for="node-input-hostname"><i class="fa fa-server"></i> Hostname</label>
        <input type="text" id="node-input-hostname" placeholder="Device Hostname">
    </div>
    <div class="form-row">
        <label for="node-input-port"><i class="fa fa-plug"></i> Port</label>
        <input type="number" id="node-input-port" placeholder="Device Port">
    </div>
</script>