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

refresh dashboard every 15 seconds asynchronusly

parent 4bfedfc4
Branches
Tags
1 merge request!140Merge two dashboard-feeds branches to one
Pipeline #608 failed
......@@ -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.
Please register or to comment