2020-05-06 00:09:25 +00:00
{% 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 >
2019-11-28 11:34:37 +00:00
< / div >
2020-05-06 00:09:25 +00:00
{% 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 >
2019-11-28 11:34:37 +00:00
< / div >
2020-05-06 00:09:25 +00:00
< / 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" > × < / span >
< / button >
2019-11-28 11:34:37 +00:00
< / div >
2020-05-06 00:09:25 +00:00
< 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 >
2019-11-28 11:34:37 +00:00
< / div >
< / div >
< / div >
2020-05-06 00:09:25 +00:00
< div class = "modal-footer" >
2020-05-09 02:23:01 +00:00
< button type = "button" id = "test_button" class = "btn btn-secondary" > Test< / button >
2020-05-06 00:09:25 +00:00
< 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 >
2019-11-28 11:34:37 +00:00
< / div >
2020-05-06 00:09:25 +00:00
< / div >
2019-11-28 11:34:37 +00:00
< / div >
2020-05-06 00:09:25 +00:00
{% 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();
2020-05-07 11:39:59 +00:00
$('#save_button').prop('disabled', true).css('cursor', 'not-allowed');
2020-05-06 00:09:25 +00:00
var table = $('#notification_providers').DataTable({
select: {
style: 'single'
},
language: {
zeroRecords: 'No Notification Providers'
},
searching: false,
ordering: false,
lengthChange: true,
2020-05-07 11:39:59 +00:00
responsive: true,
2020-05-06 00:09:25 +00:00
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' }
2020-05-07 11:39:59 +00:00
],
"columnDefs": [
{
"targets": [ 2 ],
"visible": false,
"searchable": false
}
2020-05-06 00:09:25 +00:00
]
});
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;
2020-05-07 11:39:59 +00:00
$('#save_button').prop('disabled', true).css('cursor', 'not-allowed');
2020-05-06 00:09:25 +00:00
setTimeout(
function()
{
$('#save_button_checkmark').hide();
}, 2000);
}
});
});
2020-05-09 02:23:01 +00:00
$('#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
});
});
2020-05-06 00:09:25 +00:00
// monitor changes to the settings_form
$('#settings_form').on('change', function() {
form_changed = true;
2020-05-07 11:39:59 +00:00
$('#save_button').prop('disabled', false).css('cursor', 'auto');
2020-05-06 00:09:25 +00:00
})
2019-11-28 11:34:37 +00:00
});
2020-05-06 00:09:25 +00:00
< / script >
{% endblock tail %}