js: Simplify auto-refresh page logic

- Implement ability to refresh page at the framework level so that every page
does not need to handle it.

- Refresh after number of seconds specified in context of the view.

Tests performed:

- Trigger the following functions and ensure that page reload after 3 seconds
during the running operation while it does refresh before and after the
operation.
  - Diagnostics tests from the module.
  - Gitweb repository cloning.
  - Monkeysphere publish key to server.
  - OpenVPN setup.
  - Tor configuration update.
  - Manual software update.
  - App installation.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
This commit is contained in:
Sunil Mohan Adapa 2020-06-27 00:30:48 -07:00 committed by Veiko Aasa
parent 1b5a10a628
commit 3efff2fa42
No known key found for this signature in database
GPG Key ID: 478539CAE680674E
18 changed files with 45 additions and 176 deletions

View File

@ -6,17 +6,6 @@
{% load i18n %}
{% load static %}
{% block page_head %}
{% if is_running %}
<noscript>
<meta http-equiv="refresh" content="3" />
</noscript>
{% endif %}
{% endblock %}
{% block configuration %}
{% if not is_running %}
@ -61,11 +50,3 @@
{% endif %}
{% endblock %}
{% block page_js %}
{% if is_running %}
<script type="text/javascript" src="{% static 'theme/js/refresh.js' %}"></script>
{% endif %}
{% endblock %}

View File

@ -17,11 +17,13 @@ def index(request):
if request.method == 'POST' and not diagnostics.running_task:
diagnostics.start_task()
is_running = diagnostics.running_task is not None
return TemplateResponse(
request, 'diagnostics.html', {
'app_info': diagnostics.app.info,
'is_running': diagnostics.running_task is not None,
'results': diagnostics.current_results
'is_running': is_running,
'results': diagnostics.current_results,
'refresh_page_sec': 3 if is_running else None
})

View File

@ -82,12 +82,3 @@
</div>
{% endblock %}
{% block page_js %}
{% if cloning %}
<script type="text/javascript" src="{% static 'theme/js/refresh.js' %}"></script>
{% endif %}
{% endblock %}

View File

@ -31,6 +31,7 @@ class GitwebAppView(views.AppView):
repos = gitweb.app.get_repo_list()
context['repos'] = repos
context['cloning'] = any('clone_progress' in repo for repo in repos)
context['refresh_page_sec'] = 3 if context['cloning'] else None
return context

View File

@ -9,12 +9,6 @@
{% block page_head %}
{% if running %}
<noscript>
<meta http-equiv="refresh" content="3" />
</noscript>
{% endif %}
<style type="text/css">
td li {
list-style: none;
@ -157,10 +151,3 @@
</table>
{% endblock %}
{% block page_js %}
{% if running %}
<script type="text/javascript" src="{% static 'theme/js/refresh.js' %}"></script>
{% endif %}
{% endblock %}

View File

@ -27,7 +27,8 @@ def index(request):
'app_info': monkeysphere.app.info,
'title': monkeysphere.app.info.name,
'status': status,
'running': bool(publish_process)
'running': bool(publish_process),
'refresh_page_sec': 3 if bool(publish_process) else None,
})

View File

@ -7,17 +7,6 @@
{% load i18n %}
{% load static %}
{% block page_head %}
{% if status.setup_running %}
<noscript>
<meta http-equiv="refresh" content="3" />
</noscript>
{% endif %}
{% endblock %}
{% block status %}
{% if status.is_setup and not status.setup_running %}
@ -99,9 +88,3 @@
{% endif %}
{% endblock %}
{% block page_js %}
{% if status.setup_running %}
<script type="text/javascript" src="{% static 'theme/js/refresh.js' %}"></script>
{% endif %}
{% endblock %}

View File

@ -38,6 +38,8 @@ class OpenVPNAppView(AppView):
'is_setup': openvpn.is_setup(),
'setup_running': bool(openvpn.setup_process),
}
context['refresh_page_sec'] = 3 if context['status'][
'setup_running'] else None
return context

View File

@ -7,16 +7,6 @@
{% load i18n %}
{% load static %}
{% block page_head %}
{% if config_running %}
<noscript>
<meta http-equiv="refresh" content="3" />
</noscript>
{% endif %}
{% endblock %}
{% block status %}
{% if config_running %}
<h3>{% trans "Status" %}</h3>
@ -112,8 +102,4 @@
<script type="text/javascript" src="{% static 'tor/tor.js' %}"></script>
{% if config_running %}
<script type="text/javascript" src="{% static 'theme/js/refresh.js' %}"></script>
{% endif %}
{% endblock %}

View File

@ -46,6 +46,7 @@ def index(request):
'has_diagnostics': True,
'is_enabled': status['enabled'],
'is_running': status['is_running'],
'refresh_page_sec': 3 if bool(config_process) else None,
})

View File

@ -7,14 +7,6 @@
{% load i18n %}
{% load static %}
{% block page_head %}
{% if is_busy %}
<noscript>
<meta http-equiv="refresh" content="3" />
</noscript>
{% endif %}
{% endblock %}
{% block extra_content %}
<h3>{% trans "Manual update" %}</h3>
{% if is_busy %}
@ -59,9 +51,3 @@
</p>
{% endif %}
{% endblock %}
{% block page_js %}
{% if is_busy %}
<script type="text/javascript" src="{% static 'theme/js/refresh.js' %}"></script>
{% endif %}
{% endblock %}

View File

@ -30,6 +30,7 @@ class UpgradesConfigurationView(AppView):
context = super().get_context_data(*args, **kwargs)
context['is_busy'] = package.is_package_manager_busy()
context['log'] = get_log()
context['refresh_page_sec'] = 3 if context['is_busy'] else None
return context
def form_valid(self, form):

View File

@ -65,11 +65,20 @@
<script type="text/javascript" src="{% static 'theme/js/main.js' %}" defer></script>
{% if refresh_page_sec %}
<noscript>
<meta http-equiv="refresh" content="{{ refresh_page_sec }}" />
</noscript>
{% endif %}
{% block app_head %}<!-- placeholder for app/module-specific head files -->{% endblock %}
{% block page_head %}<!-- placeholder for page-specific head files -->{% endblock %}
</head>
<body class="{%block body_class %}{%endblock%}">
<body class="{%block body_class %}{%endblock%}"
{% if refresh_page_sec %}
data-refresh-page-sec="{{ refresh_page_sec }}"
{% endif %}>
<div id="wrapper">
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://mozilla.org/firefox">Upgrade to a modern version of Firefox</a> to experience this site.</p><![endif]-->
<div class="navbar navbar-fixed-top navbar-default main-header" role="navigation">

View File

@ -7,18 +7,6 @@
{% load i18n %}
{% load static %}
{% block page_head %}
{% if setup_state == 'up-to-date' %}
<noscript>
<meta http-equiv="refresh" content="0" />
</noscript>
{% elif setup_current_operation %}
<noscript>
<meta http-equiv="refresh" content="3" />
</noscript>
{% endif %}
{% endblock %}
{% block content %}
{% include "app-header.html" with setup=True %}
@ -111,16 +99,3 @@
{% endif %}
{% endblock %}
{% block page_js %}
{% if setup_current_operation or setup_state == 'up-to-date' %}
{% if setup_state == 'up-to-date' %}
<script type="text/javascript" src="{% static 'theme/js/refresh_immediately.js' %}"></script>
{% else %}
<script type="text/javascript" src="{% static 'theme/js/refresh.js' %}"></script>
{% endif %}
{% endif %}
{% endblock %}

View File

@ -283,6 +283,12 @@ class SetupView(TemplateView):
context[
'package_manager_is_busy'] = package.is_package_manager_busy()
context['refresh_page_sec'] = None
if context['setup_state'] == 'up-to-date':
context['refresh_page_sec'] = 0
elif context['setup_current_operation']:
context['refresh_page_sec'] = 3
return context
def dispatch(self, request, *args, **kwargs):

View File

@ -22,6 +22,24 @@
for the JavaScript code in this page.
*/
/*
* Refresh page if marked for refresh.
*/
document.addEventListener('DOMContentLoaded', function() {
const body = document.querySelector('body');
if (body.hasAttribute('data-refresh-page-sec')) {
let seconds = body.getAttribute('data-refresh-page-sec');
seconds = parseInt(seconds, 10);
if (isNaN(seconds))
return;
window.setTimeout(() => {
// Refresh the page without resubmitting the POST data.
window.location = window.location.href;
}, seconds * 1000);
}
});
/*
* Disable submit button on click.
*/

View File

@ -1,36 +0,0 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
/**
* @licstart The following is the entire license notice for the JavaScript
* code in this page.
*
* This file is part of FreedomBox.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
* @licend The above is the entire license notice for the JavaScript code
* in this page.
*/
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// Refresh the page once in n seconds
async function refresh(ms) {
await sleep(3000);
// Refresh the page without resubmitting the POST data.
window.location = window.location.href;
}
refresh();

View File

@ -1,25 +0,0 @@
// SPDX-License-Identifier: AGPL-3.0-or-later
/**
* @licstart The following is the entire license notice for the JavaScript
* code in this page.
*
* This file is part of FreedomBox.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
* @licend The above is the entire license notice for the JavaScript code
* in this page.
*/
window.location.reload();