notify-events.html

<!-- NotifyEvents -->

<script type="text/x-red" data-template-name="notify-events">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-channel"><i class="fa fa-tasks"></i> Channel</label>
        <input type="text" id="node-input-channel" placeholder="Channel">
    </div>

    <div class="form-row">
        <label for="node-input-title"><i class="fa fa-ellipsis-h"></i> Title</label>
        <input type="text" id="node-input-title" placeholder="title">
        <input type="hidden" id="node-input-titleType">
    </div>
    <div class="form-row">
        <label for="node-input-text"><i class="fa fa-ellipsis-h"></i> Text</label>
        <input type="text" id="node-input-text" placeholder="payload">
        <input type="hidden" id="node-input-textType">
    </div>
    <div class="form-row">
        <label for="node-input-priority"><i class="fa fa-ellipsis-h"></i> Priority</label>
        <input type="text" id="node-input-priority" placeholder="priority">
        <input type="hidden" id="node-input-priorityType">
    </div>
    <div class="form-row">
        <label for="node-input-level"><i class="fa fa-ellipsis-h"></i> Level</label>
        <input type="text" id="node-input-level" placeholder="level">
        <input type="hidden" id="node-input-levelType">
    </div>

    <div class="form-row">
        <label for="node-input-image"><i class="fa fa-image"></i> Images</label>
        <ol id="node-input-image"></ol>
        <template id="node-input-image-item">
            <table style="width: 100%">
                <tr>
                    <td width="25%">
                        <select class="node-input-image-type" style="width: 100%">
                            <option value="url">URL</option>
                            <option value="file">File</option>
                            <option value="content">Content</option>
                        </select>
                    </td>
                    <td width="75%">
                        <input type="text" class="node-input-image-value" style="width: 100%">
                        <input type="hidden" class="node-input-image-valueType">
                    </td>
                </tr>
            </table>
        </template>
    </div>
    <div class="form-row">
        <label for="node-input-file"><i class="fa fa-file"></i> Files</label>
        <ol id="node-input-file"></ol>
        <template id="node-input-file-item">
            <table style="width: 100%">
                <tr>
                    <td width="25%">
                        <select class="node-input-file-type" style="width: 100%">
                            <option value="url">URL</option>
                            <option value="file">File</option>
                            <option value="content">Content</option>
                        </select>
                    </td>
                    <td width="75%">
                        <input type="text" class="node-input-file-value" style="width: 100%">
                        <input type="hidden" class="node-input-file-valueType">
                    </td>
                </tr>
            </table>
        </template>
    </div>

    <div class="form-row form-tips">
        <p>
            "Actions" turns into buttons inside your notification, clicking on which triggers callback to this
            notify.events node. To made callback work, please make sure your Node-RED is available from the internet.
            Put the address of your Node-RED in the "Action host" field.
        </p>
        <p>
            Pay attention that for security reasons we don't recommend to open all Node-RED URL's, use the following
            filtering mask instead:
        </p>
        <code>/notify-events/&lt;node.id&gt;/action/&lt;action.index&gt;</code>
    </div>
    <div class="form-row">
        <label for="node-input-actionHost"><i class="fa fa-globe"></i> Action host</label>
        <input type="text" id="node-input-actionHost" placeholder="https://example.com">
    </div>
    <div class="form-row">
        <label for="node-input-action"><i class="fa fa-hand-pointer-o"></i> Actions</label>
        <ol id="node-input-action"></ol>
        <template id="node-input-action-item">
            <table style="width: 100%">
                <tr>
                    <td width="100%">
                        <input type="text" class="node-input-action-name" style="width: 100%" placeholder="Title">
                    </td>
                </tr>
            </table>
        </template>
    </div>
</script>

<script type="text/html" data-help-name="notify-events">
    <p>Connects to the <a href="https://notify.events" target="_blank">Notify.Events</a> service and sends notifications.</p>
    <h3>Details</h3>
    <p>You can specify the following parameters:</p>
    <ul>
        <li>title - message heading</li>
        <li>text - message text (allowed html-tag: &lt;b&gt;, &lt;i&gt;, &lt;a&gt;, &lt;br&gt;)</li>
        <li>priority - message priority (highest, high, normal, low, lowest)</li>
        <li>level - message level (verbose, info, notice, warning, error, success)</li>
        <li>images[] - attach images by url, file, content</li>
        <li>files[] - attach files by url, file, content</li>
        <li>actionHost - your node-red instance host</li>
        <li>actions[] - attach action buttons</li>
    </ul>
</script>

<script type="text/javascript">
    RED.nodes.registerType('notify-events', {
        category: 'network',
        color: '#E9967A',
        inputs: 1,
        outputs: 1,
        icon: 'notify-events.svg',
        defaults: {
            name: {value: ''},
            channel: {type: 'notify-events-channel', value: '', required: true},
            title: {value: '', validate: RED.validators.typedInput('titleType')},
            titleType: {value: 'str'},
            text: {value: 'payload', required: true, validate: RED.validators.typedInput('textType')},
            textType: {value: 'msg'},
            priority: {value: 'normal', validate: RED.validators.typedInput('priorityType')},
            priorityType: {value: 'ne_priority'},
            level: {value: 'info', validate: RED.validators.typedInput('levelType')},
            levelType: {value: 'ne_level'},
            images: {value: []},
            files: {value: []},
            actionHost: {value: ''},
            actions: {value: []},
            outputs: {value: 0},
        },
        paletteLabel: 'notify.events',
        label: function() {
            if (this.name) {
                return this.name;
            }

            if (this.channel) {
                const channel = RED.nodes.node(this.channel);

                if (channel.name) {
                    return channel.name;
                }
            }

            return 'notify.events';
        },
        labelStyle: function() {
            return this.name ? '' : 'node_label_italic';
        },
        outputLabels: function(index) {
            const node = this;

            const action = node.actions[index]

            if (!action) {
                return '';
            }

            return action.name;
        },
        oneditprepare: function() {
            const node = this;

            const fieldTitle     = $('#node-input-title');
            const fieldTitleType = $('#node-input-titleType')

            if (!node.title) {
                node.title = '';
                fieldTitle.val(node.title);
            }

            if (!node.titleType) {
                node.titleType = 'str';
                fieldTitleType.val(node.titleType);
            }

            fieldTitle.typedInput({default: 'msg', types: ['msg', 'str'], typeField: fieldTitleType});

            const fieldText     = $('#node-input-text');
            const fieldTextType = $('#node-input-textType');

            if (!node.text) {
                node.text = 'payload';
                fieldText.val(node.text);
            }

            if (!node.textType) {
                node.textType = 'msg';
                fieldTextType.val(node.textType);
            }

            fieldText.typedInput({default: 'msg', types: ['msg', 'str'], typeField: fieldTextType});

            const fieldPriority     = $('#node-input-priority');
            const fieldPriorityType = $('#node-input-priorityType');

            if (!node.priority) {
                node.priority = 'normal';
                fieldPriority.val(node.priority);
            }

            if (!node.priorityType) {
                node.priorityType = 'ne_priority';
                fieldPriorityType.val(node.priorityType);
            }

            fieldPriority.typedInput({default: 'ne_priority', types: [{value: 'ne_priority', label: 'Priority', options: [
                {value: 'lowest', label: 'Lowest'},
                {value: 'low', label: 'Low'},
                {value: 'normal', label: 'Normal'},
                {value: 'high', label: 'High'},
                {value: 'highest', label: 'Highest'},
            ]}, 'msg', 'str'], typeField: fieldPriorityType});

            const fieldLevel     = $('#node-input-level');
            const fieldLevelType = $('#node-input-levelType');

            if (!node.level) {
                node.level = 'info';
                fieldLevel.val(node.level);
            }

            if (!node.levelType) {
                node.levelType = 'ne_level';
                fieldLevelType.val(node.levelType);
            }

            fieldLevel.typedInput({default: 'ne_level', types: [{value: 'ne_level', label: 'Level', options: [
                {value: 'verbose', label: 'Verbose'},
                {value: 'info', label: 'Info'},
                {value: 'notice', label: 'Notice'},
                {value: 'warning', label: 'Warning'},
                {value: 'error', label: 'Error'},
                {value: 'success', label: 'Success'},
            ]}, 'msg', 'str'], typeField: fieldLevelType});

            if (!node.images) {
                node.images = [];
            }

            const fieldImages = $('#node-input-image');

            fieldImages.editableList({
                addButton: false,
                buttons: [{
                    label: 'Add image',
                    icon: 'fa fa-plus',
                    title: 'Add image',
                    click: function() {
                        const filesCount = fieldImages.find('.node-input-image-value').length + fieldFiles.find('.node-input-file-value').length;

                        if (filesCount >= 5) {
                            alert('Max file/image count exceeded!');

                            return false;
                        }

                        fieldImages.editableList('addItem', {});
                    },
                }],
                addItem: function(container, i, opt) {
                    const row = $($('#node-input-image-item').contents()).clone().appendTo(container);

                    const type      = row.find('.node-input-image-type');
                    const value     = row.find('.node-input-image-value');
                    const valueType = row.find('.node-input-image-valueType');

                    type.val(opt.type           || 'url');
                    value.val(opt.value         || '');
                    valueType.val(opt.valueType || 'str');

                    value.typedInput({default: 'str', types: ['msg', 'str'], typeField: valueType});
                },
                sortable: true,
                removable: true,
            });

            node.images.forEach(function(image) {
                fieldImages.editableList('addItem', {type: image.type, value: image.value, valueType: image.valueType});
            });

            if (!node.files) {
                node.files = [];
            }

            const fieldFiles = $('#node-input-file');

            fieldFiles.editableList({
                addButton: false,
                buttons: [{
                    label: 'Add file',
                    icon: 'fa fa-plus',
                    title: 'Add file',
                    click: function() {
                        const filesCount = fieldImages.find('.node-input-image-value').length + fieldFiles.find('.node-input-file-value').length;

                        if (filesCount >= 5) {
                            alert('Max file/image count exceeded!');

                            return false;
                        }

                        fieldFiles.editableList('addItem', {});
                    },
                }],
                addItem: function(container, i, opt) {
                    const row = $($('#node-input-file-item').contents()).clone().appendTo(container);

                    const type      = row.find('.node-input-file-type');
                    const value     = row.find('.node-input-file-value');
                    const valueType = row.find('.node-input-file-valueType');

                    type.val(opt.type           || 'url');
                    value.val(opt.value         || '');
                    valueType.val(opt.valueType || 'str');

                    value.typedInput({default: 'str', types: ['msg', 'str'], typeField: valueType});
                },
                sortable: true,
                removable: true,
            });

            node.files.forEach(function(file) {
                fieldFiles.editableList('addItem', {type: file.type, value: file.value, valueType: file.valueType});
            });

            if (!node.actions) {
                node.actions = [];
            }

            const fieldActions = $('#node-input-action');

            fieldActions.editableList({
                addButton: false,
                buttons: [{
                    label: 'Add action',
                    icon: 'fa fa-plus',
                    title: 'Add action',
                    click: function() {
                        const actionCount = fieldActions.find('.node-input-action-name').length;

                        if (actionCount >= 3) {
                            alert('Max action count exceeded!');

                            return false;
                        }

                        fieldActions.editableList('addItem', {});
                    },
                }],
                addItem: function(container, i, opt) {
                    const row = $($('#node-input-action-item').contents()).clone().appendTo(container);

                    const title = row.find('.node-input-action-name');

                    title.val(opt.name || '');
                },
                sortable: true,
                removable: true,
            });

            node.actions.forEach(function(action) {
                fieldActions.editableList('addItem', {name: action.name});
            });
        },
        oneditsave: function() {
            const node = this;

            node.images = [];

            const images = $('#node-input-image').editableList('items');

            images.each(function() {
                node.images.push({
                    type:      $(this).find('.node-input-image-type').val(),
                    value:     $(this).find('.node-input-image-value').val(),
                    valueType: $(this).find('.node-input-image-valueType').val(),
                });
            });

            node.files = [];

            const files = $('#node-input-file').editableList('items');

            files.each(function() {
                node.files.push({
                    type:      $(this).find('.node-input-file-type').val(),
                    value:     $(this).find('.node-input-file-value').val(),
                    valueType: $(this).find('.node-input-file-valueType').val(),
                });
            });

            node.actions = [];

            const actions = $('#node-input-action').editableList('items');

            actions.each(function() {
                node.actions.push({
                    name: $(this).find('.node-input-action-name').val(),
                });
            });

            node.outputs = node.actions.length;
        },
    });
</script>

<!-- NotifyEventsChannel -->

<script type="text/x-red" data-template-name="notify-events-channel">
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-config-input-name" placeholder="My channel">
    </div>
    <div class="form-row">
        <label for="node-config-input-token"><i class="fa fa-lock"></i> Token</label>
        <input type="text" id="node-config-input-token" placeholder="Token" maxlength="32">
        <input type="hidden" class="node-config-input-tokenType">
    </div>
    <div class="form-tips">
        <ul>
            <li>Sign up to <a href="https://notify.events" target="_blank">Notify.events</a> service</li>
            <li>Create a channel</li>
            <li>Add source "Node-RED" and acquire token. Follow the instructions</li>
            <li>Subscribe in your channel to platform you choose</li>
            <li>Paste token to notify-events-channel</li>
        </ul>
    </div>
</script>

<script type="text/html" data-help-name="notify-events-channel">
    <p>Connection configuration of <a href="https://notify.events" target="_blank">Notify.Events</a> service channel.</p>
    <h3>Details</h3>
    <p></p>
    <ul>
        <li>Sign up to <a href="https://notify.events" target="_blank">Notify.events</a> service</li>
        <li>Create a channel</li>
        <li>Add source "Node-RED" and acquire token. Follow the instructions</li>
        <li>Subscribe in your channel to platform you choose</li>
        <li>Paste token to notify-events-channel</li>
    </ul>
</script>

<script type="text/javascript">
    RED.nodes.registerType('notify-events-channel', {
        category: 'config',
        defaults: {
            name: {value: ''},
            token: {value: '', required: true, validate: RED.validators.typedInput('textType')},
            //token: {value: '', required: true, validate: function(v) { return v.trim().length === 32; }},
            tokenType: {value: 'str'},
        },
        paletteLabel: 'notify.events channel',
        label: function() {
            return this.name ? this.name : 'notify events channel';
        },
        labelStyle: function() {
            return this.name ? 'node_label_italic' : '';
        },
        oneditprepare: function() {
            const node = this;

            const fieldToken = $('#node-config-input-token');
            const fieldTokenType = $('#node-config-input-tokenType')

            if (!node.tokenType) {
                node.tokenType = 'str';
                fieldTokenType.val(node.tokenType);
            }

            fieldToken.typedInput({default: 'str', types: ['str', 'env'], typeField: fieldTokenType});
        },
    });
</script>