Skip to content
Snippets Groups Projects
Commit 6ba27ca1 authored by Julian's avatar Julian
Browse files

refresh dashboard every 15 seconds asynchronusly

parent 4bfedfc4
No related branches found
No related tags found
No related merge requests found
......@@ -2,86 +2,130 @@
{% load i18n %}
{% block content %}
<p class="flow-text">{% blocktrans %}AlekSIS (School Information System){% endblocktrans %}</p>
{% if user.is_authenticated %}
{% for notification in unread_notifications %}
<div class="alert primary scale-transition">
<div>
<i class="material-icons left">info</i>
<div class="right">
<a class="btn-flat waves-effect" href="{% url "notification_mark_read" notification.id %}">
<i class="material-icons center">close</i>
</a>
<div id="dashboard">
<p class="flow-text">{% blocktrans %}AlekSIS (School Information System){% endblocktrans %}</p>
{% if user.is_authenticated %}
{% for notification in unread_notifications %}
<div class="alert primary scale-transition">
<div>
<i class="material-icons left">info</i>
<div class="right">
<a class="btn-flat waves-effect" href="{% url "notification_mark_read" notification.id %}">
<i class="material-icons center">close</i>
</a>
</div>
<strong>{{ notification.title }}</strong>
<p>{{ notification.description }}</p>
</div>
</div>
{% endfor %}
<div class="row">
<div class="col s12 m6">
<h5>{% blocktrans %}Last activities{% endblocktrans %}</h5>
<strong>{{ notification.title }}</strong>
<p>{{ notification.description }}</p>
{% if activities %}
<ul class="collection">
{% for activity in activities %}
<li class="collection-item">
<span class="badge new primary-color">{{ activity.app }}</span>
<span class="title">{{ activity.title }}</span>
<p>
<i class="material-icons left">access_time</i> {{ activity.created_at }}
</p>
<p>
{{ activity.description }}
</p>
</li>
{% endfor %}
</ul>
{% else %}
<p>{% blocktrans %}No activities available yet.{% endblocktrans %}</p>
{% endif %}
</div>
</div>
{% endfor %}
<div class="row">
<div class="col s12 m6">
<h5>{% blocktrans %}Last activities{% endblocktrans %}</h5>
{% if activities %}
<ul class="collection">
{% for activity in activities %}
<li class="collection-item">
<span class="badge new primary-color">{{ activity.app }}</span>
<span class="title">{{ activity.title }}</span>
<p>
<i class="material-icons left">access_time</i> {{ activity.created_at }}
</p>
<p>
{{ activity.description }}
</p>
</li>
{% endfor %}
</ul>
{% else %}
<p>{% blocktrans %}No activities available yet.{% endblocktrans %}</p>
{% endif %}
</div>
<div class="col s12 m6">
<h5>{% blocktrans %}Recent notifications{% endblocktrans %}</h5>
{% if notifications %}
<ul class="collection">
{% for notification in notifications %}
<li class="collection-item">
<span class="badge new primary-color">{{ notification.app }}</span>
<span class="title">{{ notification.title }}</span>
<p>
<i class="material-icons left">access_time</i> {{ notification.created_at }}
</p>
<p>
{{ notification.description }}
</p>
{% if notification.link %}
<div class="col s12 m6">
<h5>{% blocktrans %}Recent notifications{% endblocktrans %}</h5>
{% if notifications %}
<ul class="collection">
{% for notification in notifications %}
<li class="collection-item">
<span class="badge new primary-color">{{ notification.app }}</span>
<span class="title">{{ notification.title }}</span>
<p>
<a href="{{ notification.link }}">{% blocktrans %}More information →{% endblocktrans %}</a>
<i class="material-icons left">access_time</i> {{ notification.created_at }}
</p>
{% endif %}
</li>
{% endfor %}
</ul>
{% else %}
<p>{% blocktrans %}No notifications available yet.{% endblocktrans %}</p>
{% endif %}
<p>
{{ notification.description }}
</p>
{% if notification.link %}
<p>
<a href="{{ notification.link }}">{% blocktrans %}More information →{% endblocktrans %}</a>
</p>
{% endif %}
</li>
{% endfor %}
</ul>
{% else %}
<p>{% blocktrans %}No notifications available yet.{% endblocktrans %}</p>
{% endif %}
</div>
</div>
</div>
{% endif %}
{% endif %}
</div>
<script type="text/javascript">
$(document).ready(function () {
setInterval(function () {
$('#body').load("/");
}, 3000);
});
const asyncIntervals = [];
const runAsyncInterval = async (cb, interval, intervalIndex) => {
await cb();
if (asyncIntervals[intervalIndex]) {
setTimeout(() => runAsyncInterval(cb, interval, intervalIndex), interval);
}
};
const setAsyncInterval = (cb, interval) => {
if (cb && typeof cb === "function") {
const intervalIndex = asyncIntervals.length;
asyncIntervals.push(true);
runAsyncInterval(cb, interval, intervalIndex);
return intervalIndex;
} else {
throw new Error('Callback must be a function');
}
};
const clearAsyncInterval = (intervalIndex) => {
if (asyncIntervals[intervalIndex]) {
asyncIntervals[intervalIndex] = false;
}
};
/* SOURCE: https://dev.to/jsmccrumb/asynchronous-setinterval-4j69 */
{# ------------------------------------------ #}
{#$(document).ready(function () {#}
{# setInterval(function () {#}
{# $('#body').load("/");#}
{# }, 3000);#}
{# });#}
{# ------------------------------------------ #}
let dashboard_interval = setAsyncInterval(async () => {
console.log('fetching new data');
const promise = new Promise((resolve) => {
$('#dashboard').load("/ #dashboard");
resolve(1);
});
await promise;
console.log('data fetched successfully');
}, 15000);
</script>
{% endblock %}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment