bazarr/views/settingsnotifications.html

<div class="ui dividing header">Notifications settings</div>
<div class="twelve wide column">
    <div class="ui info message">
        <p>Thanks to caronc for his work on <a href="https://github.com/caronc/apprise" target="_blank">apprise</a>,
            which is based the notifications system.</p>
    </div>
    <div class="ui info message">
        <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>
    <div class="ui grid">
        {% for notifier in settings_notifier %}
            <div class="middle aligned row">
                <div class="right aligned four wide column">
                    <label>{{ notifier['name'] }}</label>
                </div>
                <div class="one wide column">
                    <div id="settings_notifier_{{ notifier['name'] }}_enabled"
                         class="notifier_enabled ui toggle checkbox"
                         data-notifier-url-div="settings_notifier_{{ notifier['name'] }}_url_div"
                         data-enabled={{ notifier['enabled'] }}>
                        <input name="settings_notifier_{{ notifier['name'] }}_enabled" type="checkbox">
                        <label></label>
                    </div>
                </div>
                <div class="eight wide column">
                    <div class='field'>
                        <div id="settings_notifier_{{ notifier['name'] }}_url_div" class="ui fluid input">
                            <input name="settings_notifier_{{ notifier['name'] }}_url" type="text"
                                   value="{{ notifier['url'] if notifier['url'] != None else '' }}">
                            <div class="test_notification ui blue button" data-notification="{{ notifier['url'] }}">Test
                                Notification
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>
{% macro settings_notifications() %}
<script>
    $('.test_notification').on('click', function () {
        const url_field = $(this).prev().val();
        const url_protocol = url_field.split(':')[0];
        const url_string = url_field.split('://')[1];

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

    $('.notifier_enabled').each(function () {
        if ($(this).data("enabled") === 1) {
            $(this).checkbox('check');
            $('[id=\"' + $(this).data("notifier-url-div") + '\"]').removeClass('disabled');
        } else {
            $(this).checkbox('uncheck');
            $('[id=\"' + $(this).data("notifier-url-div") + '\"]').addClass('disabled');
        }
    });

    $('.notifier_enabled').on('change', function () {
        if ($(this).checkbox('is checked')) {
            $('[id=\"' + $(this).data("notifier-url-div") + '\"]').removeClass('disabled');
        } else {
            $('[id=\"' + $(this).data("notifier-url-div") + '\"]').addClass('disabled');
        }
    });

</script>
{% endmacro %}