bazarr/views/settingsnotifications.html

265 lines
11 KiB
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>, the core of the Bazarr notification 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>
<br>
<h4>Options</h4>
<hr/>
<div class="row">
<div class="col-sm-3 text-right">
<b>Do not notify for manual actions</b>
</div>
<div class="form-group col-sm-8">
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="settings-general-dont_notify_manual_actions"
name="settings-general-dont_notify_manual_actions">
<span class="custom-control-label" for="settings-general-dont_notify_manual_actions"></span>
</label>
<label>Suppress notifications when manually download/upload subtitles.</label>
</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');
// Set Checkbox input values
$('#settings-general-dont_notify_manual_actions').prop('checked', {{'true' if settings.general.getboolean('dont_notify_manual_actions') else 'false'}});
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"));
// Make sure all checkbox input are sent with true/false value
$('input[type=checkbox]').each(function () {
formdata.set($(this).prop('id'), $(this).prop('checked'));
});
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 %}