mirror of https://github.com/morpheus65535/bazarr
241 lines
10 KiB
HTML
241 lines
10 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>
|
|
</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>
|
|
</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 %}
|