inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-05-03 13:58:47 +00:00
Code

Progress bar tweaks

Browse Source 
- If no maximum value supplied, just show the value (and fill to 100% width)
This commit is contained in:
Oliver Walters 2020-10-04 23:33:20 +11:00
parent 3c5968ef1a
commit 824ce6778f
1 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
InvenTree/InvenTree/static/script/inventree/inventree.js
View File

@ -105,9 +105,14 @@ function makeProgressBar(value, maximum, opts) {
var options = opts || {}; var options = opts || {};
value = parseFloat(value); value = parseFloat(value);
maximum = parseFloat(maximum);
var percent = parseInt(value / maximum * 100); var percent = 100;
// Prevent div-by-zero or null value
if (maximum && maximum > 0) {
maximum = parseFloat(maximum);
percent = parseInt(value / maximum * 100);
}
if (percent > 100) { if (percent > 100) {
percent = 100; percent = 100;
@ -115,18 +120,28 @@ function makeProgressBar(value, maximum, opts) {
var extraclass = ''; var extraclass = '';
if (value > maximum) { if (maximum) {
// TODO - Special color?
}
else if (value > maximum) {
extraclass='progress-bar-over'; extraclass='progress-bar-over';
} else if (value < maximum) { } else if (value < maximum) {
extraclass = 'progress-bar-under'; extraclass = 'progress-bar-under';
} }
var text = value;
if (maximum) {
text += ' / ';
text += maximum;
}
var id = options.id || 'progress-bar'; var id = options.id || 'progress-bar';
return ` return `
<div id='${id}' class='progress'> <div id='${id}' class='progress'>
<div class='progress-bar ${extraclass}' role='progressbar' aria-valuenow='${percent}' aria-valuemin='0' aria-valuemax='100' style='width:${percent}%'></div> <div class='progress-bar ${extraclass}' role='progressbar' aria-valuenow='${percent}' aria-valuemin='0' aria-valuemax='100' style='width:${percent}%'></div>
<div class='progress-value'>${value} / ${maximum}</div> <div class='progress-value'>${text}</div>
</div> </div>
`; `;
} }