mirror of
https://gitlab.com/allianceauth/allianceauth.git
synced 2025-12-06 04:41:41 +01:00
Merge branch 'inline-js-overhaul' into 'master'
InlineJS overhaul See merge request allianceauth/allianceauth!1766
This commit is contained in:
Peter Pfeufer
commit
1386375d00
@ -65,83 +65,85 @@
|
||||
{% include 'bundles/timers-js.html' %}
|
||||
|
||||
<script>
|
||||
// Data
|
||||
const timers = [
|
||||
{% for op in optimer %}
|
||||
{
|
||||
'id': {{ op.id }},
|
||||
'start': moment("{{ op.start | date:"c" }}"),
|
||||
'expired': false
|
||||
},
|
||||
{% endfor %}
|
||||
];
|
||||
$(document).ready(() => {
|
||||
// Data
|
||||
const timers = [
|
||||
{% for op in optimer %}
|
||||
{
|
||||
'id': {{ op.id }},
|
||||
'start': moment("{{ op.start | date:"c" }}"),
|
||||
'expired': false
|
||||
},
|
||||
{% endfor %}
|
||||
];
|
||||
|
||||
/**
|
||||
* Update a timer
|
||||
* @param timer Timer information
|
||||
*/
|
||||
const updateTimer = (timer) => {
|
||||
if (timer.start.isAfter(Date.now())) {
|
||||
const duration = moment.duration(timer.start - moment(), 'milliseconds');
|
||||
/**
|
||||
* Update a timer
|
||||
* @param timer Timer information
|
||||
*/
|
||||
const updateTimer = (timer) => {
|
||||
if (timer.start.isAfter(Date.now())) {
|
||||
const duration = moment.duration(timer.start - moment(), 'milliseconds');
|
||||
|
||||
document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
|
||||
} else {
|
||||
timer.expired = true;
|
||||
document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
|
||||
} else {
|
||||
timer.expired = true;
|
||||
|
||||
document.getElementById("countdown" + timer.id).innerHTML = "";
|
||||
}
|
||||
};
|
||||
document.getElementById("countdown" + timer.id).innerHTML = "";
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Update all timers
|
||||
*/
|
||||
const updateAllTimers = () => {
|
||||
const l = timers.length;
|
||||
/**
|
||||
* Update all timers
|
||||
*/
|
||||
const updateAllTimers = () => {
|
||||
const l = timers.length;
|
||||
|
||||
for (let i=0; i < l; ++i) {
|
||||
if (timers[i].expired) continue;
|
||||
for (let i=0; i < l; ++i) {
|
||||
if (timers[i].expired) continue;
|
||||
|
||||
updateTimer(timers[i]);
|
||||
}
|
||||
};
|
||||
updateTimer(timers[i]);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the local time info for the timer
|
||||
* @param timer Timer information
|
||||
*/
|
||||
const setLocalTime = (timer) => {
|
||||
document.getElementById("localtime" + timer.id).innerHTML = timer.start.format("ddd @ LT");
|
||||
};
|
||||
/**
|
||||
* Set the local time info for the timer
|
||||
* @param timer Timer information
|
||||
*/
|
||||
const setLocalTime = (timer) => {
|
||||
document.getElementById("localtime" + timer.id).innerHTML = timer.start.format("ddd @ LT");
|
||||
};
|
||||
|
||||
/**
|
||||
* Set all local time fields
|
||||
*/
|
||||
const setAllLocalTimes = () => {
|
||||
const l = timers.length;
|
||||
/**
|
||||
* Set all local time fields
|
||||
*/
|
||||
const setAllLocalTimes = () => {
|
||||
const l = timers.length;
|
||||
|
||||
for (let i=0; i < l; ++i) {
|
||||
setLocalTime(timers[i]);
|
||||
}
|
||||
};
|
||||
for (let i=0; i < l; ++i) {
|
||||
setLocalTime(timers[i]);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the current EVE time as a string
|
||||
* @returns {string} EVE time string
|
||||
*/
|
||||
const updateClock = () => {
|
||||
document.getElementById("current-time").innerHTML = getCurrentEveTimeString();
|
||||
};
|
||||
/**
|
||||
* Get the current EVE time as a string
|
||||
* @returns {string} EVE time string
|
||||
*/
|
||||
const updateClock = () => {
|
||||
document.getElementById("current-time").innerHTML = getCurrentEveTimeString();
|
||||
};
|
||||
|
||||
const timedUpdate = () => {
|
||||
updateClock();
|
||||
updateAllTimers();
|
||||
};
|
||||
const timedUpdate = () => {
|
||||
updateClock();
|
||||
updateAllTimers();
|
||||
};
|
||||
|
||||
// Set initial values
|
||||
setAllLocalTimes();
|
||||
timedUpdate();
|
||||
// Set initial values
|
||||
setAllLocalTimes();
|
||||
timedUpdate();
|
||||
|
||||
// Start timed updates
|
||||
setInterval(timedUpdate, 1000);
|
||||
// Start timed updates
|
||||
setInterval(timedUpdate, 1000);
|
||||
});
|
||||
</script>
|
||||
{% endblock content %}
|
||||
|
||||
@ -0,0 +1,207 @@
|
||||
/* global fetchGet, numberFormatter, taskQueueSettings */
|
||||
|
||||
$(document).ready(() => {
|
||||
'use strict';
|
||||
|
||||
const elements = {
|
||||
total: document.getElementById('total-task-count'),
|
||||
uptime: document.getElementById('celery-uptime'),
|
||||
running: document.getElementById('running-task-count'),
|
||||
queued: document.getElementById('queued-tasks-count'),
|
||||
succeeded: document.getElementById('succeeded-tasks-count'),
|
||||
retried: document.getElementById('retried-tasks-count'),
|
||||
failed: document.getElementById('failed-tasks-count')
|
||||
};
|
||||
|
||||
/**
|
||||
* Fetches the task queue status and updates the UI elements accordingly.
|
||||
* It retrieves the total number of tasks, running tasks, queued tasks,
|
||||
* succeeded tasks, retried tasks, and failed tasks, and updates the
|
||||
* corresponding HTML elements with the fetched data.
|
||||
* It also updates the progress bars for succeeded, retried, and failed tasks.
|
||||
* The function is called immediately and then every 30 seconds to keep the
|
||||
* task queue status up to date.
|
||||
*/
|
||||
const updateTaskCount = () => {
|
||||
fetchGet({url: taskQueueSettings.url})
|
||||
.then((data) => {
|
||||
const elemProgressBar = document.getElementById('celery-tasks-progress-bar');
|
||||
const progressElements = {
|
||||
succeeded: {
|
||||
bar: document.getElementById('celery-progress-bar-succeeded'),
|
||||
text: document.getElementById('celery-progress-bar-succeeded-progress')
|
||||
},
|
||||
retried: {
|
||||
bar: document.getElementById('celery-progress-bar-retried'),
|
||||
text: document.getElementById('celery-progress-bar-retried-progress')
|
||||
},
|
||||
failed: {
|
||||
bar: document.getElementById('celery-progress-bar-failed'),
|
||||
text: document.getElementById('celery-progress-bar-failed-progress')
|
||||
}
|
||||
};
|
||||
|
||||
// Assign progress data from the fetched data to variables
|
||||
const {
|
||||
earliest_task: earliestTask,
|
||||
tasks_total: tasksTotal,
|
||||
tasks_running: tasksRunning,
|
||||
tasks_queued: tasksQueued,
|
||||
tasks_succeeded: tasksSucceeded,
|
||||
tasks_retried: tasksRetried,
|
||||
tasks_failed: tasksFailed
|
||||
} = data;
|
||||
|
||||
/**
|
||||
* Updates the text content of the specified HTML element with the given value.
|
||||
* If the value is null, it sets the text to 'N/A'.
|
||||
* Otherwise, it formats the number using the locale-specific format.
|
||||
*
|
||||
* @param {HTMLElement} element The HTML element to update.
|
||||
* @param {number|null} value The value to set in the element.
|
||||
*/
|
||||
const updateTaskCount = (element, value) => {
|
||||
element.textContent = value === null ? taskQueueSettings.l10n.na : numberFormatter({value: value, locales: taskQueueSettings.l10n.language});
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates the time since the given timestamp and returns a formatted string.
|
||||
* If the timestamp is null or undefined, it returns 'N/A'.
|
||||
* The returned string is in the format of "X hours, Y minutes" or "X minutes, Y seconds".
|
||||
*
|
||||
* @param {string|null} timestamp The timestamp to calculate the time since.
|
||||
* @returns {string} A formatted string representing the time since the timestamp.
|
||||
*/
|
||||
const timeSince = (timestamp) => {
|
||||
if (!timestamp) {
|
||||
return taskQueueSettings.l10n.na;
|
||||
}
|
||||
|
||||
const diffSecs = Math.floor((Date.now() - new Date(timestamp)) / 1000);
|
||||
|
||||
if (diffSecs >= 3600) {
|
||||
const hours = Math.floor(diffSecs / 3600);
|
||||
const minutes = Math.floor((diffSecs % 3600) / 60);
|
||||
|
||||
if (minutes > 0) {
|
||||
const hourText = hours === 1 ? taskQueueSettings.l10n.hour_singular : taskQueueSettings.l10n.hour_plural;
|
||||
const minuteText = minutes === 1 ? taskQueueSettings.l10n.minute_singular : taskQueueSettings.l10n.minute_plural;
|
||||
|
||||
return `${hours} ${hourText}, ${minutes} ${minuteText}`;
|
||||
}
|
||||
|
||||
const hourText = hours === 1 ? taskQueueSettings.l10n.hour_singular : taskQueueSettings.l10n.hour_plural;
|
||||
|
||||
return `${hours} ${hourText}`;
|
||||
}
|
||||
|
||||
const units = [
|
||||
[
|
||||
60,
|
||||
taskQueueSettings.l10n.minute_singular,
|
||||
taskQueueSettings.l10n.minute_plural
|
||||
],
|
||||
[
|
||||
1,
|
||||
taskQueueSettings.l10n.second_singular,
|
||||
taskQueueSettings.l10n.second_plural
|
||||
]
|
||||
];
|
||||
|
||||
for (const [seconds, singular, plural] of units) {
|
||||
const value = Math.floor(diffSecs / seconds);
|
||||
|
||||
if (value > 0) {
|
||||
return `${value} ${value > 1 ? plural : singular}`;
|
||||
}
|
||||
}
|
||||
|
||||
return `0 ${taskQueueSettings.l10n.second_plural}`;
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the progress bar element and its text content based on the given value and total.
|
||||
* It calculates the percentage of completion and updates the aria attributes and styles accordingly.
|
||||
*
|
||||
* @param {HTMLElement} element The progress bar element to update.
|
||||
* @param {HTMLElement} textElement The text element to update with the percentage.
|
||||
* @param {number} value The current value to set in the progress bar.
|
||||
* @param {number} total The total value for calculating the percentage.
|
||||
*/
|
||||
const updateProgressBar = (element, textElement, value, total) => {
|
||||
const percentage = total ? (value / total) * 100 : 0;
|
||||
|
||||
element.setAttribute('aria-valuenow', percentage.toString());
|
||||
textElement.textContent = `${numberFormatter({value: percentage.toFixed(0), locales: taskQueueSettings.l10n.language})}%`;
|
||||
element.style.width = `${percentage}%`;
|
||||
};
|
||||
|
||||
// Update task counts
|
||||
[
|
||||
[elements.total, tasksTotal],
|
||||
[elements.running, tasksRunning],
|
||||
[elements.queued, tasksQueued],
|
||||
[elements.succeeded, tasksSucceeded],
|
||||
[elements.retried, tasksRetried],
|
||||
[elements.failed, tasksFailed]
|
||||
].forEach(([element, value]) => {
|
||||
updateTaskCount(element, value);
|
||||
});
|
||||
|
||||
// Update uptime
|
||||
elements.uptime.textContent = timeSince(earliestTask);
|
||||
|
||||
// Update progress bar title
|
||||
const [
|
||||
titleTextSucceeded,
|
||||
titleTextRetried,
|
||||
titleTextFailed
|
||||
] = [
|
||||
[tasksSucceeded, taskQueueSettings.l10n.succeeded],
|
||||
[tasksRetried, taskQueueSettings.l10n.retried],
|
||||
[tasksFailed, taskQueueSettings.l10n.failed]
|
||||
].map(([count, label]) => {
|
||||
return `${numberFormatter({value: count, locales: taskQueueSettings.l10n.language})} ${label}`;
|
||||
});
|
||||
|
||||
// Set the title attribute for the progress bar
|
||||
elemProgressBar.setAttribute(
|
||||
'title',
|
||||
`${titleTextSucceeded}, ${titleTextRetried}, ${titleTextFailed}`
|
||||
);
|
||||
|
||||
// Update progress bars
|
||||
[
|
||||
tasksSucceeded,
|
||||
tasksRetried,
|
||||
tasksFailed
|
||||
].forEach((count, index) => {
|
||||
const type = ['succeeded', 'retried', 'failed'][index];
|
||||
|
||||
updateProgressBar(
|
||||
progressElements[type].bar,
|
||||
progressElements[type].text,
|
||||
count,
|
||||
tasksTotal
|
||||
);
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching task queue:', error);
|
||||
|
||||
// If there is an error fetching the task queue, set all elements to 'ERROR'
|
||||
[
|
||||
elements.running,
|
||||
elements.queued,
|
||||
elements.succeeded,
|
||||
elements.retried,
|
||||
elements.failed
|
||||
].forEach((elem) => {
|
||||
elem.textContent = taskQueueSettings.l10n.error;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
updateTaskCount();
|
||||
setInterval(updateTaskCount, 30000);
|
||||
});
|
||||
30
allianceauth/static/allianceauth/js/sidebar-collapse.js
Normal file
30
allianceauth/static/allianceauth/js/sidebar-collapse.js
Normal file
@ -0,0 +1,30 @@
|
||||
$(document).ready(() => {
|
||||
'use strict';
|
||||
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const sidebarKey = `sidebar_${sidebar.id}`;
|
||||
|
||||
sidebar.addEventListener('shown.bs.collapse', (event) => {
|
||||
if (event.target.id === sidebar.id) {
|
||||
localStorage.removeItem(sidebarKey);
|
||||
}
|
||||
});
|
||||
|
||||
sidebar.addEventListener('hidden.bs.collapse', (event) => {
|
||||
if (event.target.id === sidebar.id) {
|
||||
localStorage.setItem(sidebarKey, 'closed');
|
||||
}
|
||||
});
|
||||
|
||||
sidebar.classList.toggle('show', localStorage.getItem(sidebarKey) !== 'closed');
|
||||
|
||||
const activeChildMenuItem = document.querySelector('ul#sidebar-menu ul.collapse a.active');
|
||||
|
||||
if (activeChildMenuItem) {
|
||||
const activeChildMenuUl = activeChildMenuItem.closest('ul');
|
||||
activeChildMenuUl.classList.add('show');
|
||||
|
||||
document.querySelectorAll(`[data-bs-target^="#${activeChildMenuUl.id}"]`)
|
||||
.forEach(element => element.setAttribute('aria-expanded', true));
|
||||
}
|
||||
});
|
||||
@ -1,29 +1,32 @@
|
||||
{% load i18n %}
|
||||
|
||||
<div id="esi-alert" class="col-12 collapse">
|
||||
<div class="alert alert-warning">
|
||||
<p class="text-center ">{% translate 'Your Server received an ESI error response code of ' %}<b id="esi-code">?</b></p>
|
||||
<hr>
|
||||
<pre id="esi-data" class="text-center text-wrap"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const elemCard = document.getElementById('esi-alert');
|
||||
const elemMessage = document.getElementById('esi-data');
|
||||
const elemCode = document.getElementById('esi-code');
|
||||
<script>
|
||||
$(document).ready(() => {
|
||||
const elements = {
|
||||
card: document.getElementById('esi-alert'),
|
||||
message: document.getElementById('esi-data'),
|
||||
code: document.getElementById('esi-code')
|
||||
};
|
||||
|
||||
fetchGet({url: '{% url "authentication:esi_check" %}'})
|
||||
.then((data) => {
|
||||
console.log('ESI Check: ', JSON.stringify(data, null, 2));
|
||||
fetchGet({url: '{% url "authentication:esi_check" %}'})
|
||||
.then(({status, data}) => {
|
||||
console.log('ESI Check:', JSON.stringify({status, data}, null, 2));
|
||||
|
||||
if (data.status !== 200) {
|
||||
elemCode.textContent = data.status;
|
||||
elemMessage.textContent = data.data.error;
|
||||
if (status !== 200) {
|
||||
elements.code.textContent = status;
|
||||
elements.message.textContent = data.error;
|
||||
|
||||
new bootstrap.Collapse(elemCard, {toggle: true});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching ESI check:', error);
|
||||
new bootstrap.Collapse(elements.card, {toggle: true});
|
||||
}
|
||||
})
|
||||
.catch((error) => console.error('Error fetching ESI check:', error));
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
</div>
|
||||
|
||||
@ -161,206 +161,24 @@ the escapejs filter without having to redefine them later.
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const elements = {
|
||||
total: document.getElementById('total-task-count'),
|
||||
uptime: document.getElementById('celery-uptime'),
|
||||
running: document.getElementById('running-task-count'),
|
||||
queued: document.getElementById('queued-tasks-count'),
|
||||
succeeded: document.getElementById('succeeded-tasks-count'),
|
||||
retried: document.getElementById('retried-tasks-count'),
|
||||
failed: document.getElementById('failed-tasks-count')
|
||||
const taskQueueSettings = {
|
||||
url: '{% url "authentication:task_counts" %}',
|
||||
l10n: {
|
||||
language: '{{ LANGUAGE_CODE }}',
|
||||
second_singular: '{{ l10nSecondSingular|escapejs }}',
|
||||
second_plural: '{{ l10nSecondPlural|escapejs }}',
|
||||
minute_singular: '{{ l10nMinuteSingular|escapejs }}',
|
||||
minute_plural: '{{ l10nMinutePlural|escapejs }}',
|
||||
hour_singular: '{{ l10nHourSingular|escapejs }}',
|
||||
hour_plural: '{{ l10nHourPlural|escapejs }}',
|
||||
na: '{{ l10nNA|escapejs }}',
|
||||
error: '{{ l10nError|escapejs }}',
|
||||
running: '{{ l10nRunning|escapejs }}',
|
||||
queued: '{{ l10nQueued|escapejs }}',
|
||||
succeeded: '{{ l10nSucceeded|escapejs }}',
|
||||
retried: '{{ l10nRetried|escapejs }}',
|
||||
failed: '{{ l10nFailed|escapejs }}'
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Fetches the task queue status and updates the UI elements accordingly.
|
||||
* It retrieves the total number of tasks, running tasks, queued tasks,
|
||||
* succeeded tasks, retried tasks, and failed tasks, and updates the
|
||||
* corresponding HTML elements with the fetched data.
|
||||
* It also updates the progress bars for succeeded, retried, and failed tasks.
|
||||
* The function is called immediately and then every 30 seconds to keep the
|
||||
* task queue status up to date.
|
||||
*/
|
||||
const updateTaskCount = () => {
|
||||
fetchGet({url: '{% url "authentication:task_counts" %}'})
|
||||
.then((data) => {
|
||||
const numberL10nFormat = new Intl.NumberFormat('{{ LANGUAGE_CODE }}');
|
||||
const elemProgressBar = document.getElementById('celery-tasks-progress-bar');
|
||||
const progressElements = {
|
||||
succeeded: {
|
||||
bar: document.getElementById('celery-progress-bar-succeeded'),
|
||||
text: document.getElementById('celery-progress-bar-succeeded-progress')
|
||||
},
|
||||
retried: {
|
||||
bar: document.getElementById('celery-progress-bar-retried'),
|
||||
text: document.getElementById('celery-progress-bar-retried-progress')
|
||||
},
|
||||
failed: {
|
||||
bar: document.getElementById('celery-progress-bar-failed'),
|
||||
text: document.getElementById('celery-progress-bar-failed-progress')
|
||||
}
|
||||
};
|
||||
|
||||
// Assign progress data from the fetched data to variables
|
||||
const {
|
||||
earliest_task: earliestTask,
|
||||
tasks_total: tasksTotal,
|
||||
tasks_running: tasksRunning,
|
||||
tasks_queued: tasksQueued,
|
||||
tasks_succeeded: tasksSucceeded,
|
||||
tasks_retried: tasksRetried,
|
||||
tasks_failed: tasksFailed
|
||||
} = data;
|
||||
|
||||
/**
|
||||
* Updates the text content of the specified HTML element with the given value.
|
||||
* If the value is null, it sets the text to 'N/A'.
|
||||
* Otherwise, it formats the number using the locale-specific format.
|
||||
*
|
||||
* @param {HTMLElement} element The HTML element to update.
|
||||
* @param {number|null} value The value to set in the element.
|
||||
*/
|
||||
const updateTaskCount = (element, value) => {
|
||||
element.textContent = value == null ? '{{ l10nNA|escapejs }}' : numberL10nFormat.format(value);
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates the time since the given timestamp and returns a formatted string.
|
||||
* If the timestamp is null or undefined, it returns 'N/A'.
|
||||
* The returned string is in the format of "X hours, Y minutes" or "X minutes, Y seconds".
|
||||
*
|
||||
* @param {string|null} timestamp The timestamp to calculate the time since.
|
||||
* @returns {string} A formatted string representing the time since the timestamp.
|
||||
*/
|
||||
const timeSince = (timestamp) => {
|
||||
if (!timestamp) {
|
||||
return '{{ l10nNA|escapejs }}';
|
||||
}
|
||||
|
||||
const diffSecs = Math.floor((Date.now() - new Date(timestamp)) / 1000);
|
||||
|
||||
if (diffSecs >= 3600) {
|
||||
const hours = Math.floor(diffSecs / 3600);
|
||||
const minutes = Math.floor((diffSecs % 3600) / 60);
|
||||
|
||||
if (minutes > 0) {
|
||||
const hourText = hours === 1 ? '{{ l10nHourSingular|escapejs }}' : '{{ l10nHourPlural|escapejs }}';
|
||||
const minuteText = minutes === 1 ? '{{ l10nMinuteSingular|escapejs }}' : '{{ l10nMinutePlural|escapejs }}';
|
||||
|
||||
return `${hours} ${hourText}, ${minutes} ${minuteText}`;
|
||||
}
|
||||
|
||||
const hourText = hours === 1 ? '{{ l10nHourSingular|escapejs }}' : '{{ l10nHourPlural|escapejs }}';
|
||||
|
||||
return `${hours} ${hourText}`;
|
||||
}
|
||||
|
||||
const units = [
|
||||
[
|
||||
60,
|
||||
'{{ l10nMinuteSingular|escapejs }}',
|
||||
'{{ l10nMinutePlural|escapejs }}'
|
||||
],
|
||||
[
|
||||
1,
|
||||
'{{ l10nSecondSingular|escapejs }}',
|
||||
'{{ l10nSecondPlural|escapejs }}'
|
||||
]
|
||||
];
|
||||
|
||||
for (const [seconds, singular, plural] of units) {
|
||||
const value = Math.floor(diffSecs / seconds);
|
||||
|
||||
if (value > 0) {
|
||||
return `${value} ${value > 1 ? plural : singular}`;
|
||||
}
|
||||
}
|
||||
|
||||
return '0 {{ l10nSecondPlural|escapejs }}';
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the progress bar element and its text content based on the given value and total.
|
||||
* It calculates the percentage of completion and updates the aria attributes and styles accordingly.
|
||||
*
|
||||
* @param {HTMLElement} element The progress bar element to update.
|
||||
* @param {HTMLElement} textElement The text element to update with the percentage.
|
||||
* @param {number} value The current value to set in the progress bar.
|
||||
* @param {number} total The total value for calculating the percentage.
|
||||
*/
|
||||
const updateProgressBar = (element, textElement, value, total) => {
|
||||
const percentage = total ? (value / total) * 100 : 0;
|
||||
|
||||
element.setAttribute('aria-valuenow', percentage.toString());
|
||||
textElement.textContent = `${numberL10nFormat.format(percentage.toFixed(0))}%`;
|
||||
element.style.width = `${percentage}%`;
|
||||
};
|
||||
|
||||
// Update task counts
|
||||
[
|
||||
[elements.total, tasksTotal],
|
||||
[elements.running, tasksRunning],
|
||||
[elements.queued, tasksQueued],
|
||||
[elements.succeeded, tasksSucceeded],
|
||||
[elements.retried, tasksRetried],
|
||||
[elements.failed, tasksFailed]
|
||||
].forEach(([element, value]) => {
|
||||
updateTaskCount(element, value);
|
||||
});
|
||||
|
||||
// Update uptime
|
||||
elements.uptime.textContent = timeSince(earliestTask);
|
||||
|
||||
// Update progress bar title
|
||||
const [
|
||||
titleTextSucceeded,
|
||||
titleTextRetried,
|
||||
titleTextFailed
|
||||
] = [
|
||||
[tasksSucceeded, '{{ l10nSucceeded|escapejs }}'],
|
||||
[tasksRetried, '{{ l10nRetried|escapejs }}'],
|
||||
[tasksFailed, '{{ l10nFailed|escapejs }}']
|
||||
].map(([count, label]) => {
|
||||
return `${numberL10nFormat.format(count)} ${label}`;
|
||||
});
|
||||
|
||||
// Set the title attribute for the progress bar
|
||||
elemProgressBar.setAttribute(
|
||||
'title',
|
||||
`${titleTextSucceeded}, ${titleTextRetried}, ${titleTextFailed}`
|
||||
);
|
||||
|
||||
// Update progress bars
|
||||
[
|
||||
tasksSucceeded,
|
||||
tasksRetried,
|
||||
tasksFailed
|
||||
].forEach((count, index) => {
|
||||
const type = ['succeeded', 'retried', 'failed'][index];
|
||||
|
||||
updateProgressBar(
|
||||
progressElements[type].bar,
|
||||
progressElements[type].text,
|
||||
count,
|
||||
tasksTotal
|
||||
);
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching task queue:', error);
|
||||
|
||||
// If there is an error fetching the task queue, set all elements to 'ERROR'
|
||||
[
|
||||
elements.running,
|
||||
elements.queued,
|
||||
elements.succeeded,
|
||||
elements.retried,
|
||||
elements.failed
|
||||
].forEach((elem) => {
|
||||
elem.textContent = '{{ l10nError|escapejs }}';
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
updateTaskCount();
|
||||
setInterval(updateTaskCount, 30000);
|
||||
</script>
|
||||
{% include "bundles/auth-dashboard-task-queue-js.html" %}
|
||||
|
||||
@ -102,44 +102,7 @@
|
||||
</main>
|
||||
<!-- End Body -->
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
// TODO Move to own JS file
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const sidebarKey = `sidebar_${sidebar.id}`;
|
||||
|
||||
sidebar.addEventListener('shown.bs.collapse', (event) => {
|
||||
if (event.target.id === sidebar.id) {
|
||||
localStorage.removeItem(sidebarKey);
|
||||
}
|
||||
});
|
||||
|
||||
sidebar.addEventListener('hidden.bs.collapse', (event) => {
|
||||
if (event.target.id === sidebar.id) {
|
||||
localStorage.setItem(sidebarKey, 'closed');
|
||||
}
|
||||
});
|
||||
|
||||
if (localStorage.getItem(sidebarKey) === 'closed') {
|
||||
sidebar.classList.remove('show');
|
||||
} else {
|
||||
sidebar.classList.add('show');
|
||||
}
|
||||
|
||||
const activeChildMenuItem = document.querySelector('#sidebar-menu li ul li a.active');
|
||||
|
||||
if (activeChildMenuItem) {
|
||||
const activeChildMenuUl = activeChildMenuItem.parentElement.parentElement;
|
||||
const elementsToToggle = document.querySelectorAll(`[data-bs-target^="#${activeChildMenuUl.id}"]`);
|
||||
|
||||
activeChildMenuUl.classList.add('show');
|
||||
|
||||
elementsToToggle.forEach((element) => {
|
||||
element.setAttribute('aria-expanded', true);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
{% include "bundles/auth-sidebar-collapse-js.html" %}
|
||||
|
||||
{% theme_js %}
|
||||
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
{% load sri %}
|
||||
|
||||
{% sri_static 'allianceauth/js/dashboard-update-task-queue.js' %}
|
||||
@ -0,0 +1,3 @@
|
||||
{% load sri %}
|
||||
|
||||
{% sri_static 'allianceauth/js/sidebar-collapse.js' %}
|
||||
@ -96,86 +96,86 @@
|
||||
{% get_datatables_language_static LANGUAGE_CODE as DT_LANG_PATH %}
|
||||
|
||||
<script>
|
||||
const timers = [
|
||||
{% for timer in timers %}
|
||||
{
|
||||
'id': {{ timer.id }},
|
||||
'targetDate': moment("{{ timer.eve_time | date:"c" }}"),
|
||||
'expired': false
|
||||
},
|
||||
{% endfor %}
|
||||
|
||||
{% for timer in corp_timers %}
|
||||
{
|
||||
'id': {{ timer.id }},
|
||||
'targetDate': moment("{{ timer.eve_time | date:"c" }}"),
|
||||
'expired': false
|
||||
},
|
||||
{% endfor %}
|
||||
];
|
||||
|
||||
/**
|
||||
* Update a timer
|
||||
* @param timer Timer information
|
||||
*/
|
||||
const updateTimer = (timer) => {
|
||||
if (timer.targetDate.isAfter(Date.now())) {
|
||||
const duration = moment.duration(timer.targetDate - moment(), 'milliseconds');
|
||||
|
||||
document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
|
||||
} else {
|
||||
timer.expired = true;
|
||||
|
||||
document.getElementById("countdown" + timer.id).innerHTML = "";
|
||||
}
|
||||
};
|
||||
|
||||
const updateAllTimers = () => {
|
||||
const l = timers.length;
|
||||
|
||||
for (let i=0; i < l; ++i) {
|
||||
if (timers[i].expired) continue;
|
||||
|
||||
updateTimer(timers[i]);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the local time info for the timer
|
||||
* @param timer Timer information
|
||||
*/
|
||||
const setLocalTime = (timer) => {
|
||||
document.getElementById("localtime" + timer.id).innerHTML = timer.targetDate.format("ddd @ LT");
|
||||
};
|
||||
|
||||
/**
|
||||
* Set all local time fields
|
||||
*/
|
||||
const setAllLocalTimes = () => {
|
||||
const l = timers.length;
|
||||
|
||||
for (let i=0; i < l; ++i) {
|
||||
setLocalTime(timers[i]);
|
||||
}
|
||||
};
|
||||
|
||||
const updateClock = () => {
|
||||
document.getElementById("current-time").innerHTML = getCurrentEveTimeString();
|
||||
};
|
||||
|
||||
const timedUpdate = () => {
|
||||
updateClock();
|
||||
updateAllTimers();
|
||||
}
|
||||
|
||||
// Set initial values
|
||||
setAllLocalTimes();
|
||||
timedUpdate();
|
||||
|
||||
// Start timed updates
|
||||
setInterval(timedUpdate, 1000);
|
||||
|
||||
$(document).ready(() => {
|
||||
const timers = [
|
||||
{% for timer in timers %}
|
||||
{
|
||||
'id': {{ timer.id }},
|
||||
'targetDate': moment("{{ timer.eve_time | date:"c" }}"),
|
||||
'expired': false
|
||||
},
|
||||
{% endfor %}
|
||||
|
||||
{% for timer in corp_timers %}
|
||||
{
|
||||
'id': {{ timer.id }},
|
||||
'targetDate': moment("{{ timer.eve_time | date:"c" }}"),
|
||||
'expired': false
|
||||
},
|
||||
{% endfor %}
|
||||
];
|
||||
|
||||
/**
|
||||
* Update a timer
|
||||
* @param timer Timer information
|
||||
*/
|
||||
const updateTimer = (timer) => {
|
||||
if (timer.targetDate.isAfter(Date.now())) {
|
||||
const duration = moment.duration(timer.targetDate - moment(), 'milliseconds');
|
||||
|
||||
document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
|
||||
} else {
|
||||
timer.expired = true;
|
||||
|
||||
document.getElementById("countdown" + timer.id).innerHTML = "";
|
||||
}
|
||||
};
|
||||
|
||||
const updateAllTimers = () => {
|
||||
const l = timers.length;
|
||||
|
||||
for (let i=0; i < l; ++i) {
|
||||
if (timers[i].expired) continue;
|
||||
|
||||
updateTimer(timers[i]);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the local time info for the timer
|
||||
* @param timer Timer information
|
||||
*/
|
||||
const setLocalTime = (timer) => {
|
||||
document.getElementById("localtime" + timer.id).innerHTML = timer.targetDate.format("ddd @ LT");
|
||||
};
|
||||
|
||||
/**
|
||||
* Set all local time fields
|
||||
*/
|
||||
const setAllLocalTimes = () => {
|
||||
const l = timers.length;
|
||||
|
||||
for (let i=0; i < l; ++i) {
|
||||
setLocalTime(timers[i]);
|
||||
}
|
||||
};
|
||||
|
||||
const updateClock = () => {
|
||||
document.getElementById("current-time").innerHTML = getCurrentEveTimeString();
|
||||
};
|
||||
|
||||
const timedUpdate = () => {
|
||||
updateClock();
|
||||
updateAllTimers();
|
||||
}
|
||||
|
||||
// Set initial values
|
||||
setAllLocalTimes();
|
||||
timedUpdate();
|
||||
|
||||
// Start timed updates
|
||||
setInterval(timedUpdate, 1000);
|
||||
|
||||
const dtOptions = {
|
||||
language: {url: '{{ DT_LANG_PATH }}'},
|
||||
order: [
|
||||
@ -185,7 +185,10 @@
|
||||
|
||||
{% if perms.auth.timer_management %}
|
||||
dtOptions['columnDefs'] = [
|
||||
{ "orderable": false, "targets": 7 }
|
||||
{
|
||||
"orderable": false,
|
||||
"targets": 7
|
||||
}
|
||||
];
|
||||
{% endif %}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user