apprise-api/apprise_api/api/templates/config.html
2020-01-18 20:27:22 -05:00

358 lines
11 KiB
HTML

{% extends 'base.html' %}
{% load i18n %}
{% block body %}
<h4>{% trans "Management for:" %} <em>{{ key }}</em></h4>
<div class="row">
<div class="col s12">
<ul class="tabs config-overview">
<li class="tab col s4"><a class="active" href="#overview"><i class="material-icons">info</i>
{% trans "Overview" %}</a></li>
<li class="tab col s4"><a href="#config"><i class="material-icons">settings</i> {%trans "Configuration" %}</a>
</li>
<li class="tab col s4"><a href="#notify"><i class="material-icons">announcement</i> {%trans "Notifications" %}</a>
</li>
</ul>
</div>
<div id="overview" class="col s12">
<div class="section">
<h5>{% trans "Getting Started" %}</h5>
<ol>
<li>
{% blocktrans %}
Here is where you can store your Apprise configuration associated with the key <code>{{key}}</code>.
{% endblocktrans %}
</li>
<li>
{% blocktrans %}
You can always refer to the
<a href="https://github.com/caronc/apprise/wiki#notification-services">Apprise Wiki</a> if you're having
troubles
assembling your URL(s).
{% endblocktrans %}
</li>
<li>
{% blocktrans %}
In the future you can return to this configuration screen at any time by placing the following into your
browser:
{% endblocktrans %}
<code>{{request.scheme}}://{{request.META.HTTP_HOST}}{{request.path}}</code>
</li>
</ol>
</div>
<div class="section no-config">
<div class="divider"></div>
<p><strong>
{% blocktrans %}To get started, the first thing you want to do is define your configuration. Do this by
clicking
on the <i>Configuration tab</i>.
{% endblocktrans %}
</strong></p>
<div class="divider"></div>
</div>
<div class="has-config">
<div class="section">
<h5>{% trans "Working With Your Configuration" %}</h5>
{% blocktrans %}The following command would cause apprise to retrieve the configuration loaded and
send a test notification to all of your added services:{% endblocktrans %}
<br />
<pre><code class="bash">apprise --body="Test Message" --tag=all \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;--config={{request.scheme}}://{{request.META.HTTP_HOST}}{% url "get" key %}</code></pre>
</div>
<div class="section">
<h5>{% trans "Loaded Configuration" %}</h5>
<div id="url-list"></div>
<div id="url-list-progress" class="progress" style="width:70%">
<div class="indeterminate"></div>
</div>
</div>
</div>
</div>
<div id="config" class="col s12">
<p>
{% blocktrans %}Define your configuration below:{% endblocktrans %}
<form id="addconfig" action="{% url "add" key %}" method="post">
{{ form_cfg }}
<button class="btn waves-effect waves-light" type="submit" name="action">{% trans "Save Configuration" %}
<i class="material-icons right">save</i>
</button>
</form>
</p>
</div>
<div id="notify" class="col s12">
<p>
{% blocktrans %}
You can send a notification using the loaded configuration:
{% endblocktrans %}
<form id="donotify" action="{% url "notify" key %}" method="post">
{{ form_notify }}
<button class="btn waves-effect waves-light" type="submit" name="action">{% trans "Send Notification" %}
<i class="material-icons right">send</i>
</button>
</form>
</p>
</div>
</div>
{% endblock %}
{% block jsfooter %}
async function update() {
// disable the notification tab until we know for certain
// a notification is possible
document.querySelector('.config-overview li a[href="#notify"]')
.parentNode.classList.add('disabled');
// Disable any has-config entries
document.querySelector('.has-config')
.style.display = 'none';
// Ensure we show our progress loader and reset our url list
document.querySelector('#url-list').textContent = ''
document.querySelector('#url-list-progress').style.display = null;
// Ensure no-config sections are visible
document.querySelector('.no-config')
.style.display = null;
// perform our status check
let response = await fetch('{% url "get" key %}', {
method: 'POST',
});
let result = await response;
if(response.status == 204)
{
// no problem; we simply have no content to retrieve
return '';
}
else if(response.status == 200)
{
// configuration found
// Remove our restrictions on sending notifications
document.querySelector('.config-overview li a[href="#notify"]')
.parentNode.classList.remove('disabled');
// Set our configuration so it's visible
response.text().then(function (text) {
document.querySelector('#id_config').value = text;
});
// Ensure has-config sections are visible
document.querySelector('.has-config')
.style.display = null;
// Disable any no-config entries
document.querySelector('.no-config')
.style.display = 'none';
// perform a tag retrieval; start with 'all'
let tags = ['all'];
let jsonResponse = fetch('{% url "json_urls" key %}?privacy=1', {
method: 'GET',
}).then(function(jsonResponse) {
return jsonResponse.json();
}).then(function (data) {
// Initialize our tags making it easy for an end user to
// choose from. Tags are based off ones found in the saved
// configuration.
let external_data = tags.concat(data.tags).reduce(function(result, item) {
result[item] = null;
return result;
}, {})
M.Chips.init(document.querySelectorAll('.chips'), {
placeholder: 'Optional Tag',
secondaryPlaceholder: 'Another Tag',
autocompleteOptions: {
data: external_data,
minLength: 0
},
onChipAdd: function(e, chip) {
var $this = this;
$this.chipsData.forEach(function(e, index) {
if(!(e.tag in external_data))
$this.deleteChip(index);
})
}
});
// Now build our our loaded list of configuration for our welcome page
let urlList = document.createElement('ul');
// Create a list item for each url retrieved
data.urls.forEach(function (entry) {
let code = document.createElement('code');
let li = document.createElement('li');
code.textContent = entry.url;
li.setAttribute('class', 'card-panel');
li.appendChild(code);
// Get our tags associate with the URL
entry.tags.forEach(function (tag) {
let chip = document.createElement('div');
chip.setAttribute('class', 'chip');
chip.textContent = `🏷️ ${tag}`;
li.appendChild(chip);
});
urlList.appendChild(li);
});
// Store our new list
document.querySelector('#url-list-progress').style.display = 'none';
document.querySelector('#url-list').textContent = ''
if(urlList.childNodes.length > 0) {
document.querySelector('#url-list').appendChild(urlList);
} else {
document.querySelector('#url-list').textContent = '{% trans "There are no Apprise URL(s) loaded." %}'
}
}).catch(function (err) {
// There was an error
document.querySelector('#url-list-progress').style.display = 'none';
document.querySelector('#url-list').textContent = '{% trans "An error occurred retrieving the list of loaded Apprise URL(s)" %}'
});
return response;
}
// if we reach here, we failed
return null;
}
update();
// over-ride manual submit for a nicer user experience
document.querySelector('#addconfig').onsubmit = function(event) {
event.preventDefault();
const form = this;
const body = new URLSearchParams(new FormData(form));
// perform our status check
let response = fetch('{% url "add" key %}', {
method: 'POST',
body: body,
}).then(function(response) {
if(response.status == 200)
{
// update our settings
update();
// user notification
Swal.fire(
'{% trans "Save" %}',
'{% trans "Successfully saved the specified URL(s)." %}',
'success'
);
} else {
// user notification
Swal.fire(
'{% trans "Save" %}',
'{% trans "Failed to save the specified URL(s)." %}',
'error'
);
}
});
return false;
}
// over-ride manual submit for a nicer user experience
document.querySelector('#donotify').onsubmit = function(event) {
event.preventDefault();
const chipElement = document.querySelector('.chips');
chipElement.querySelector('.chips');
const chipInput = document.querySelector('.chips > input');
if(chipInput.value) {
// This code just handles text typed in the tag section that was
// not submitted. This forces any lingering un-committed text
// into a tag just prior to it's submission
const ev = new KeyboardEvent('keydown', {
altKey:false,
bubbles: true,
cancelBubble: false,
cancelable: true,
charCode: 0,
code: "Enter",
composed: true,
ctrlKey: false,
currentTarget: null,
defaultPrevented: true,
detail: 0,
eventPhase: 0,
isComposing: false,
isTrusted: true,
key: "Enter",
keyCode: 13,
location: 0,
metaKey: false,
repeat: false,
returnValue: false,
shiftKey: false,
type: "keydown",
which: 13
});
chipInput.dispatchEvent(ev);
}
// store tags (as comma separated string) from materialize chip type into form
document.querySelector('#id_tag').value = M.Chips.getInstance(chipElement).chipsData.reduce(
function(s, a){
s.push(a.tag)
return s;
}, []).join(",")
const form = this;
const body = new URLSearchParams(new FormData(form));
// perform our notification
Swal.fire(
'{% trans "Notification" %}',
'{% trans "Sending notification(s)..." %}',
);
Swal.showLoading()
let response = fetch('{% url "notify" key %}', {
method: 'POST',
body: body,
}).then(function(response) {
if(response.status == 200)
{
// user notification
Swal.fire(
'{% trans "Notification" %}',
'{% trans "Successfully sent the notification(s)." %}',
'success'
);
} else {
// user notification
Swal.fire(
'{% trans "Notification" %}',
'{% trans "Failed to send the notification(s)." %}',
'error'
);
}
});
return false;
}
{% endblock %}
{% block onload %}
{{ block.super }}
document.querySelector('label [for="id_tag"]')
{
// create a new div with the class 'chips' assigned to it
const element = document.createElement('div')
let refNode = document.querySelector('label[for="id_tag"]')
element.classList.add("chips")
element.style.margin = '0'
refNode.parentNode.insertBefore(element, refNode.nextSibling)
}
// Hide tag field since we use the pretty Materialize Chip setup instead
document.querySelector('#id_tag').style.display = 'none';
{% endblock %}