WIP

bazarr/api.py

@@ -11,6 +11,7 @@ from operator import itemgetter
 import platform
 import io
 import re
+import json
 
 from get_args import args
 from config import settings, base_url, save_settings
@@ -98,6 +99,22 @@ class Languages(Resource):
         return jsonify(result)
 
 
+class Notifications(Resource):
+    @authenticate
+    def get(self):
+        result = database.execute("SELECT * FROM table_settings_notifier ORDER BY name")
+        return jsonify(data=result)
+
+    @authenticate
+    def post(self):
+        notification_providers = json.loads(request.form.get('notification_providers'))
+        for item in notification_providers:
+            database.execute("UPDATE table_settings_notifier SET enabled = ?, url = ? WHERE name = ?",
+                             (item['enabled'], item['url'], item['name']))
+
+        return '', 204
+
+
 class Search(Resource):
     @authenticate
     def get(self):
@@ -1246,6 +1263,7 @@ api.add_resource(Restart, '/restart')
 
 api.add_resource(Badges, '/badges')
 api.add_resource(Languages, '/languages')
+api.add_resource(Notifications, '/notifications')
 
 api.add_resource(Search, '/search_json')
 

bazarr/main.py

@@ -355,6 +355,18 @@ def settingsproviders():
     return render_template('settingsproviders.html')
 
 
+@app.route('/settings/notifications/')
+@login_required
+def settingsnotifications():
+    return render_template('settingsnotifications.html')
+
+
+@app.route('/settings/scheduler/')
+@login_required
+def settingsscheduler():
+    return render_template('settingsscheduler.html')
+
+
 @app.route('/check_update')
 @login_required
 def check_update():

views/_main.html

@@ -206,8 +206,8 @@
                                     <li><a href="{{ url_for('settingssubtitles') }}"> Subtitles</a></li>
                                     <li><a href="{{ url_for('settingslanguages') }}"> Languages</a></li>
                                     <li><a href="{{ url_for('settingsproviders') }}"> Providers</a></li>
-                                    <li><a href="/"> Notifications</a></li>
-                                    <li><a href="/"> Scheduler</a></li>
+                                    <li><a href="{{ url_for('settingsnotifications') }}"> Notifications</a></li>
+                                    <li><a href="{{ url_for('settingsscheduler') }}"> Scheduler</a></li>
                                 </ul>
                             </li>
 

views/settingsnotifications.html

@@ -1,79 +1,212 @@
-<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>
+{% 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>
-    <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>
+{% 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 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 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>
-                <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
+                <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>
+                    <div class="modal-footer">
+                        <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>
-        {% endfor %}
+        </div>
     </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];
+{% endblock body %}
 
-        $.ajax({
-            url: "{{base_url}}test_notification/" + url_protocol + "/" + encodeURIComponent(url_string),
-            beforeSend: function () {
-                $('#loader').addClass('active');
-            },
-            complete: function () {
-                $('#loader').removeClass('active');
-            },
-            cache: false
+{% 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();
+
+            var table = $('#notification_providers').DataTable({
+                select: {
+                    style: 'single'
+                },
+                language: {
+                    zeroRecords: 'No Notification Providers'
+                },
+                searching: false,
+                ordering: false,
+                lengthChange: true,
+                responsive: false,
+                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' }
+                ]
+            });
+
+            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;
+                        setTimeout(
+                            function()
+                            {
+                                $('#save_button_checkmark').hide();
+                            }, 2000);
+                    }
+                });
+            });
+
+            // monitor changes to the settings_form
+            $('#settings_form').on('change', function() {
+                form_changed = true;
+            })
         });
-    });
-
-    $('.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 %}
+    </script>
+{% endblock tail %}