Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactored dark/light CSS + New Review Tab #178

Merged
merged 6 commits into from
Mar 16, 2024
Merged

Refactored dark/light CSS + New Review Tab #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
92f6551
Refactored dark/light CSS + New Review Tab
caronc Mar 13, 2024
af9ca98
more code cleanup and css formatting
caronc Mar 13, 2024
2a8c3b0
more cleanup and formatting / css, etc
caronc Mar 14, 2024
4fd168e
clickable tags on review page
caronc Mar 15, 2024
8cba2b4
Browse button improvements
caronc Mar 16, 2024
b8e170a
rolled back accidental testing conf
caronc Mar 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions apprise_api/api/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,23 @@
<meta charset="utf-8">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
<!--materialize-->
<link rel="stylesheet" href="{% get_static_prefix %}css/{{request.theme|safe}}/materialize.min.css" />
<link rel="stylesheet" href="{% get_static_prefix %}css/materialize.min.css" />
<!--material-design-icons-->
<link rel="stylesheet" href="{% static 'iconfont/material-icons.css' %}">
<!--highlightjs-->
<link rel="stylesheet" href="{% get_static_prefix %}css/highlight.min.css">
<!--common-->
<link rel="stylesheet" href="{% static 'css/base.css' %}" />
<!--highlightjs-->
<link rel="stylesheet" href="{% get_static_prefix %}css/{{request.theme|safe}}/highlight.min.css">
<link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}" />
<!--materialize-->
<script src="{% static 'js/materialize.min.js' %}"></script>
<!--sweetalert2-->
<script src="{% static 'js/sweetalert2.all.min.js' %}"></script>
<!--highlightjs-->
<script src="{% static 'js/highlight.pack.js' %}"></script>
<!--theme-->
<link rel="stylesheet" href="{% get_static_prefix %}css/theme-{{request.theme|safe}}.min.css">
<title>{% block title %}{% trans "Apprise API" %}{% endblock %}</title>
</head>

Expand Down
135 changes: 109 additions & 26 deletions apprise_api/api/templates/config.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@
{% load i18n %}
{% block body %}
{% if STATEFUL_MODE != 'disabled' %}
<h4>{% trans "Management for Config ID:" %} <em>{{ key }}</em></h4>
<h4>{% trans "Management for Config ID:" %} <code class="config-id">{{ key }}</code></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>
<li class="tab col s3"><a class="active" href="#overview"><i class="material-icons">info</i>
{% trans "Overview" %}</a></li>
<li class="tab {% if CONFIG_LOCK %}tab-locked {% endif %}col s4"><a href="#config"><i class="material-icons">{% if not CONFIG_LOCK %}settings{% else %}lock{% endif %}</i> {%trans "Configuration" %}</a>
<li class="tab {% if CONFIG_LOCK %}tab-locked {% endif %}col s3"><a href="#config"><i class="material-icons">{% if not CONFIG_LOCK %}settings{% else %}lock{% endif %}</i> {%trans "Configuration" %}</a>
</li>
<li class="tab col s4"><a href="#notify"><i class="material-icons">announcement</i> {%trans "Notifications" %}</a>
<li class="tab {% if CONFIG_LOCK %}tab-locked {% endif %}col s3"><a href="#review"><i class="material-icons">{% if not CONFIG_LOCK %}web{% else %}lock{% endif %}</i> {%trans "Review" %}</a>
</li>
<li class="tab col s3"><a href="#notify"><i class="material-icons">announcement</i> {%trans "Notifications" %}</a>
</li>
</ul>
</div>
Expand Down Expand Up @@ -105,31 +107,24 @@ <h6>{% trans "Using CURL" %}</h6>
<p>
{% blocktrans %}The following command would cause the apprise api to notify all of your services:{% endblocktrans %}
<pre><code class="bash">curl&nbsp;-X&nbsp;POST \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;-F "body=Test Message" \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;-F "tags=all" \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;http{% if request.is_secure %}s{% endif %}://{{request.META.HTTP_HOST}}{{BASE_URL}}/notify/<em>{{key}}</em></code></pre>
&nbsp;&nbsp;&nbsp;&nbsp;-F "body=Test Message" \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;-F "tags=all" \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;http{% if request.is_secure %}s{% endif %}://{{request.META.HTTP_HOST}}{{BASE_URL}}/notify/<em>{{key}}</em></code></pre>
{% blocktrans %}Send one or more attachments like this:{% endblocktrans %}
<pre><code class="bash">curl&nbsp;-X&nbsp;POST \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;-F "tags=all" \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;-F "body=Test Message" \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;-F [email protected] \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;-F attach2=@/my/path/to/Apprise.doc \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;http{% if request.is_secure %}s{% endif %}://{{request.META.HTTP_HOST}}{{BASE_URL}}/notify/<em>{{key}}</em></code></pre>
&nbsp;&nbsp;&nbsp;&nbsp;-F "tags=all" \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;-F "body=Test Message" \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;-F [email protected] \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;-F attach2=@/my/path/to/Apprise.doc \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;http{% if request.is_secure %}s{% endif %}://{{request.META.HTTP_HOST}}{{BASE_URL}}/notify/<em>{{key}}</em></code></pre>
{% blocktrans %}Sends a notification to our endpoints with an attachment{% endblocktrans %}
<pre><code class="bash">
<pre><code class="bash">
curl -X POST \<br/>
&nbsp;&nbsp;&nbsp;&nbsp;-F "tag=all" \ <br/>
&nbsp;&nbsp;&nbsp;&nbsp;-F "attach=https://raw.githubusercontent.com/caronc/apprise/master/apprise/assets/themes/default/apprise-logo.png" \ <br/>
&nbsp;&nbsp;&nbsp;&nbsp;"{{request.scheme}}://{{request.META.HTTP_HOST}}{{BASE_URL}}/notify/<em>{{key}}</em>"</code></pre>
</p>
</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">
Expand All @@ -150,6 +145,24 @@ <h5>{% trans "Your Configuration Is Locked" %}</h5>
{% endif %}
</div>

<div id="review" class="col s12">
{% if not CONFIG_LOCK %}
<p>
{% blocktrans %}The following URLs have been detected:{% endblocktrans %}
</p>
<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>
{% else %}
<h5>{% trans "Your Configuration Is Locked" %}</h5>
<p>{% blocktrans %}Access to your configuration has been disabled by your administrator.{% endblocktrans %}
{% endif %}
</div>

<div id="notify" class="col s12">
<p>
{% blocktrans %}
Expand Down Expand Up @@ -201,23 +214,30 @@ <h4>{% trans "Persistent Store Endpoints" %}</h4>
let jsonResponse = await fetch('{% url "json_urls" key %}/?privacy=1', {
method: 'GET',
})
if(jsonResponse.status != 200) {
if(jsonResponse.status == 204) {
// Take an early exit
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)" %}'
document.querySelector('#url-list').textContent = '{% trans "There are no URLs defined. Click on the ⚙️ Configuration tab and define some." %}'
return;

} else if(jsonResponse.status != 200) {
// Take an early exit
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;
}

// Initialize our tags making it easy for an end user to
// choose from. Tags are based off ones found in the saved
// configuration.
const data = await jsonResponse.json();
let external_data = tags.concat(data.tags).reduce(function(result, item) {
const external_data = tags.concat(data.tags).reduce(function(result, item) {
result[item] = null;
return result;
}, {})

M.Chips.init(document.querySelectorAll('.chips'), {
const chipElement = document.querySelector('.chips');
M.Chips.init(chipElement, {
placeholder: 'Optional Tag',
secondaryPlaceholder: 'Another Tag',
autocompleteOptions: {
Expand All @@ -233,6 +253,23 @@ <h4>{% trans "Persistent Store Endpoints" %}</h4>
}
});

// our GET parameters to be treated as template values
var tagRe = new RegExp('[^[A-Za-z0-9_-]+');
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
if (params.tag) {
params.tag.split(tagRe).forEach(function (tag, index) {
M.Chips.getInstance(chipElement).addChip({tag: tag, image: ''});
});
}
if (params.title) {
document.querySelector('#id_title').value = params.title;
}
if (params.body) {
document.querySelector('#id_body').value = params.body;
}

// Now build our our loaded list of configuration for our welcome page
let urlList = document.createElement('ul');

Expand All @@ -248,8 +285,19 @@ <h4>{% trans "Persistent Store Endpoints" %}</h4>
entry.tags.forEach(function (tag) {
let chip = document.createElement('div');
chip.setAttribute('class', 'chip');
chip.setAttribute('name', tag);
chip.setAttribute('href', `?tag=${tag}#notify`);
chip.textContent = `🏷️ ${tag}`;
li.appendChild(chip);

chip.addEventListener('click', function(e) {
e.preventDefault();
window.history.pushState(null, null, this.getAttribute('href'));
document.querySelector('.config-overview li a[href="#notify"]').click()

const chipElement = document.querySelector('.chips');
M.Chips.getInstance(chipElement).addChip({tag: this.getAttribute('name'), image: ''});
}, false);
});

urlList.appendChild(li);
Expand Down Expand Up @@ -396,14 +444,47 @@ <h4>{% trans "Persistent Store Endpoints" %}</h4>
}
}

function form_file_input_hack() {
/*
A small hack to remformat all `<input file>` upload options to a more cleaner
and presentable look by wrapping it like this:

<span class="btn btn-file">
<i class="material-icons left">cloud_upload</i>
Browse<input type="file">
</span>
*/
document.querySelectorAll('input[type=file]').forEach(function (entry) {
const div = document.createElement('div');
const selected = document.createElement('div');
selected.style.display = 'none';
selected.setAttribute('class', 'file-selected');
const span = document.createElement('span')
span.setAttribute('class', 'btn btn-file waves-effect waves-light');
const i = document.createElement('i')
span.textContent = '{% trans "Browse" %}';
i.setAttribute('class', 'material-icons right');
i.textContent = 'folder';
div.appendChild(span);
span.appendChild(i);
entry.before(div)
span.appendChild(entry);
span.after(selected);

entry.addEventListener('change', function(e){
const selected = this.parentNode.nextElementSibling;
const file = e.target.files[0];
selected.style.display = 'block'
selected.textContent = file.name;
});
});
}
function notify_init() {
// 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
Expand Down Expand Up @@ -496,8 +577,10 @@ <h4>{% trans "Persistent Store Endpoints" %}</h4>
{% if not CONFIG_LOCK %}
/* Initialze our configuration */
config_init();

{% endif %}
notify_init();
form_file_input_hack();
{% endif %}
{% endblock %}

Expand Down
6 changes: 3 additions & 3 deletions apprise_api/api/templates/details.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,12 @@ <h5>{{ entry.service_name }}</h5>
<hr/>

<ul class="detail-buttons">
<li><strong>{% blocktrans %}Category{% endblocktrans %}:</strong> {{entry.category}}</li>
<li><strong>{% blocktrans %}Category{% endblocktrans %}:</strong> <code>{{entry.category}}</code></li>
{% if entry.protocols %}
<li><strong>{% blocktrans %}Insecure Schema(s){% endblocktrans %}:</strong> {{ entry.protocols|join:", " }}</li>
<li><strong>{% blocktrans %}Insecure Schema(s){% endblocktrans %}:</strong> <code>{{ entry.protocols|join:", " }}</code></li>
{% endif %}
{% if entry.secure_protocols %}
<li><strong>{% blocktrans %}Secure Schema(s){% endblocktrans %}:</strong> {{ entry.secure_protocols|join:", " }}</li>
<li><strong>{% blocktrans %}Secure Schema(s){% endblocktrans %}:</strong> <code>{{ entry.secure_protocols|join:", " }}</code></li>
{% endif %}
<li><pre><code class="bash">
# {% blocktrans %}Apprise URL Formatting{% endblocktrans %}</br>
Expand Down
Loading
Loading