bazarr/views/settingsnotifications.html

{% extends '_main.html' %}

{% block title %}Notifications - Bazarr{% endblock %}

{% block page_head %}

{% endblock page_head %}

{% block bcleft %}
    <div id="buttons" class="">
        <button class="btn btn-outline" id="save_button">
            <div>
                <span class="fa-stack">
                    <i class="fas fa-save fa-stack-2x align-top text-themecolor text-center font-20" aria-hidden="true"></i>
                    <i id="save_button_checkmark" class="fas fa-check fa-stack-2x" style="color:green;"></i>
                </span>
            </div>
            <div class="align-bottom text-themecolor small text-center">Save</div>
        </button>
    </div>
{% endblock bcleft %}

{% block bcright %}

{% endblock bcright %}

{% block body %}
    <div class="container-fluid" style="padding-top: 3em;">
        <form class="form" name="settings_form" id="settings_form">
            <div class="alert alert-secondary" role="alert">
                <p>Thanks to caronc for his work on <a href="https://github.com/caronc/apprise" target="_blank">apprise</a>, which we rely on for the notifications system.</p>
            </div>
            <div class="alert alert-secondary" role="alert">
                <p>Please follow instructions on his <a href="https://github.com/caronc/apprise/wiki" target="_blank">Wiki</a> to configure your notification providers.</p>
            </div><br>
            <h4>Notifications</h4>
            <hr/>
            <div class="row">
                <div class="col-sm-12">
                    <table class="table table-striped" id="notification_providers" style="width:100%;">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Enabled</th>
                            <th>URL</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </form>
    </div>

    <div id="editModal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Notification Provider</h5><br>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form class="form" name="edit_form" id="edit_form">
                    <div class="modal-body">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-3 text-right">
                                    Name
                                </div>
                                <div class="col-sm-8">
                                    <span id="notification_provider_name" value=""></span>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-sm-3 text-right">
                                    Enabled
                                </div>

                                <div class="form-group col-sm-1">
                                    <label class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input provider" id="notification_provider_enabled">
                                        <span class="custom-control-label"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-3 text-right">
                                    URL
                                </div>
                                <div class="col-sm-8">
                                    <textarea rows=4 class="form-control" id="notification_provider_url" value=""></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="test_button" class="btn btn-secondary">Test</button>
                        <button type="submit" id="edit_save_button" class="btn btn-info">Ok</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock body %}

{% block tail %}
    <script>
        $(document).ready(function () {
            // Show warning if there's unsaved changes in the settings_form
            var form_changed = false;
            $(window).on('beforeunload', function() {
                if (form_changed) {
                    return "";
                }
            });

            // Hide checkmark over save button
            $('#save_button_checkmark').hide();
            $('#save_button').prop('disabled', true).css('cursor', 'not-allowed');

            var table = $('#notification_providers').DataTable({
                select: {
                    style: 'single'
                },
                language: {
                    zeroRecords: 'No Notification Providers'
                },
                searching: false,
                ordering: false,
                lengthChange: true,
                responsive: true,
                paging: false,
                info: false,
                processing: true,
                serverSide: false,
                ajax: {
                    url: "{{ url_for('api.notifications') }}",
                    type: 'GET'
                },
                columns: [
                    { data: 'name' },
                    { data: 'enabled',
                        render: function(data) {
                            if (data) {
                                return 'True';
                            } else {
                                return 'False';
                            }
                        }
                    },
                    { data: 'url' }
                ],
                "columnDefs": [
                    {
                        "targets": [ 2 ],
                        "visible": false,
                        "searchable": false
                    }
                ]
            });

            new $.fn.dataTable.Buttons(table, {
                buttons: [
                    {
                        extend: 'selected',
                        text: '<div><span class="fa-stack"><i class="fas fa-edit align-top text-themecolor ' +
                            'text-center font-20" aria-hidden="true"></i></span></div><div class="align-bottom ' +
                            'text-themecolor small text-center">Edit</div>',
                        action: function () {
                            $('#notification_provider_name').text(table.row( { selected: true } ).data().name);
                            $('#notification_provider_enabled').prop('checked', table.row( { selected: true } ).data().enabled).trigger('change');
                            $('#notification_provider_url').val(table.row( { selected: true } ).data().url);
                            $('#editModal').modal('show');
                        }
                    }]
            });

            table.buttons().container().insertAfter('#save_button');

            $('.dt-button').parent().addClass('btn btn-outline').removeClass('dt-buttons');
            $('.dt-button').addClass('btn btn-outline').removeClass('dt-button');

            $('#edit_save_button').on('click', function(e) {
                e.preventDefault();
                table.row( { selected: true } ).data({name:$('#notification_provider_name').text(), enabled:$('#notification_provider_enabled').prop('checked'), url:$('#notification_provider_url').val()});
                $('#settings_form').trigger('change');
                $('#editModal').modal('hide');
            });

            $('#save_button').on('click', function() {
                var formdata = new FormData(document.getElementById("settings_form"));

                formdata.append('notification_providers', JSON.stringify(table.rows().data().toArray()));

                $.ajax({
                    url: "{{ url_for('api.notifications') }}",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    complete: function () {
                        $('#save_button_checkmark').show();
                        form_changed = false;
                        $('#save_button').prop('disabled', true).css('cursor', 'not-allowed');
                        setTimeout(
                            function()
                            {
                                $('#save_button_checkmark').hide();
                            }, 2000);
                    }
                });
            });

            $('#test_button').on('click', function() {
                const url_field = $('#notification_provider_url').val();
                const url_protocol = url_field.split(':')[0];
                const url_string = url_field.split('://')[1];

                $.ajax({
                    url: "{{ url_for('test_notification') }}/" + url_protocol + "/" + encodeURIComponent(url_string),
                    beforeSend: function () {
                        $('#loader').addClass('active');
                    },
                    complete: function () {
                        $('#loader').removeClass('active');
                    },
                    cache: false
                });
            });

            // monitor changes to the settings_form
            $('#settings_form').on('change', function() {
                form_changed = true;
                $('#save_button').prop('disabled', false).css('cursor', 'auto');
            })
        });
    </script>
{% endblock tail %}