root / snf-astakos-app / astakos / im / static / im / js / usage.js @ 401089d8
History | View | Annotate | Download (4.2 kB)
1 |
;(function() {
|
---|---|
2 |
|
3 |
|
4 |
// helper humanize methods
|
5 |
// https://github.com/taijinlee/humanize/blob/master/humanize.js
|
6 |
humanize = {}; |
7 |
humanize.filesize = function(filesize, kilo, decimals, decPoint, thousandsSep) { |
8 |
kilo = (kilo === undefined) ? 1024 : kilo; |
9 |
decimals = isNaN(decimals) ? 2 : Math.abs(decimals);
|
10 |
decPoint = (decPoint === undefined) ? '.' : decPoint; |
11 |
thousandsSep = (thousandsSep === undefined) ? ',' : thousandsSep; |
12 |
if (filesize <= 0) { return '0 bytes'; } |
13 |
|
14 |
var thresholds = [1]; |
15 |
var units = ['bytes', 'Kb', 'Mb', 'Gb', 'Tb', 'Pb']; |
16 |
if (filesize < kilo) { return humanize.numberFormat(filesize, 0) + ' ' + units[0]; } |
17 |
|
18 |
for (var i = 1; i < units.length; i++) { |
19 |
thresholds[i] = thresholds[i-1] * kilo;
|
20 |
if (filesize < thresholds[i]) {
|
21 |
return humanize.numberFormat(filesize / thresholds[i-1], decimals, decPoint, thousandsSep) + ' ' + units[i-1]; |
22 |
} |
23 |
} |
24 |
|
25 |
// use the last unit if we drop out to here
|
26 |
return humanize.numberFormat(filesize / thresholds[units.length - 1], decimals, decPoint, thousandsSep) + ' ' + units[units.length - 1]; |
27 |
}; |
28 |
humanize.numberFormat = function(number, decimals, decPoint, thousandsSep) { |
29 |
decimals = isNaN(decimals) ? 2 : Math.abs(decimals);
|
30 |
decPoint = (decPoint === undefined) ? '.' : decPoint; |
31 |
thousandsSep = (thousandsSep === undefined) ? ',' : thousandsSep; |
32 |
|
33 |
var sign = number < 0 ? '-' : ''; |
34 |
number = Math.abs(+number || 0);
|
35 |
|
36 |
var intPart = parseInt(number.toFixed(decimals), 10) + ''; |
37 |
var j = intPart.length > 3 ? intPart.length % 3 : 0; |
38 |
|
39 |
return sign + (j ? intPart.substr(0, j) + thousandsSep : '') + intPart.substr(j).replace(/(\d{3})(?=\d)/g, '$1' + thousandsSep) + (decimals ? decPoint + Math.abs(number - intPart).toFixed(decimals).slice(2) : ''); |
40 |
}; |
41 |
|
42 |
function UsageClient(settings) { |
43 |
this.settings = settings;
|
44 |
this.url = this.settings.url; |
45 |
this.container = $(this.settings.container); |
46 |
} |
47 |
|
48 |
UsageClient.prototype.load = function() { |
49 |
var self = this; |
50 |
$.ajax(this.url, { |
51 |
'success': function(data) { |
52 |
self.update(data); |
53 |
} |
54 |
}) |
55 |
} |
56 |
|
57 |
function setText(el, valueFrom, valueTo, direction, modifier) { |
58 |
//valueTo = parseInt(valueTo);
|
59 |
//text = valueFrom;
|
60 |
|
61 |
//if (valueFrom >= valueTo) {
|
62 |
//valueFrom = valueTo;
|
63 |
//}
|
64 |
|
65 |
var text = valueTo;
|
66 |
if (modifier) {
|
67 |
text = modifier(text); |
68 |
} |
69 |
el.html(text); |
70 |
|
71 |
//if (valueTo > valueFrom) {
|
72 |
//window.setTimeout(function() {
|
73 |
//setText(el, parseInt(valueFrom) + step, parseInt(valueTo));
|
74 |
//}, 10)
|
75 |
//}
|
76 |
} |
77 |
|
78 |
UsageClient.prototype.updateEntry = function(key, data) { |
79 |
|
80 |
var entry = $('li[data-resourcekey=\''+key+'\']'); |
81 |
var currentEl = entry.find("span.currValue"); |
82 |
var maxEl = entry.find("span.maxValue"); |
83 |
var ratioEl = entry.find("div.bar"); |
84 |
var barEl = entry.find("div.bar span"); |
85 |
var percentageEl = ratioEl.find("em"); |
86 |
var units = entry.data("units"); |
87 |
var infoEl = entry.find(".info"); |
88 |
|
89 |
var current = data.currValue;
|
90 |
var max = data.maxValue;
|
91 |
|
92 |
modifier = function(v) { return v; } |
93 |
if (units == 'bytes') { |
94 |
modifier = humanize.filesize; |
95 |
} |
96 |
|
97 |
setText(maxEl, infoEl.data('maxvalue'), max, infoEl.data('maxvalue') > max, |
98 |
modifier); |
99 |
setText(currentEl, infoEl.data('currvalue'), current,
|
100 |
infoEl.data('currvalue') > current, modifier);
|
101 |
|
102 |
var percentage = humanize.numberFormat(data.ratio, 1); |
103 |
setText(percentageEl, percentageEl.data('value'),
|
104 |
percentage, percentageEl.data('value') > percentage,
|
105 |
function(v) { return v + '% '}); |
106 |
|
107 |
var width = data.ratio;
|
108 |
if (width > 100) { width = 100; } |
109 |
if (width < 0) { width = 0; } |
110 |
|
111 |
width = humanize.numberFormat(width, 1);
|
112 |
barEl.css({'width': width + '%'}); |
113 |
|
114 |
if (percentage > 18) { |
115 |
percentageEl.addClass("hovered");
|
116 |
} else {
|
117 |
percentageEl.removeClass("hovered");
|
118 |
} |
119 |
percentageEl.data('value', percentage);
|
120 |
|
121 |
entry.removeClass("red green yellow");
|
122 |
entry.addClass(data.load_class); |
123 |
|
124 |
entry.find(".info").data("currvalue", data.currValue); |
125 |
entry.find(".info").data("maxvalue", data.maxValue); |
126 |
} |
127 |
|
128 |
UsageClient.prototype.update = function(data) { |
129 |
var usage = {}, self = this; |
130 |
_.each(data, function(e) { usage[e.name] = e});
|
131 |
|
132 |
_.each(usage, function(data, key) {
|
133 |
self.updateEntry(key, data); |
134 |
}); |
135 |
} |
136 |
|
137 |
window.UsageClient = UsageClient; |
138 |
})(); |