blob: b97a182043eacde9f9026cdb7c986d4d88fc548d (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<div role="tabpanel" class="tab-pane" id="tab-images">
<h2>{{lang_imageList}}</h2>
<table class="table table-condensed stupidtable">
<thead>
<tr>
<th data-sort="string">{{lang_image}}</th>
<th class="text-right slx-smallcol" data-sort="int">{{lang_clients}}</th>
<th class="text-right slx-smallcol" data-sort="int">{{lang_size}}</th>
<th class="text-right slx-smallcol" data-sort="int">{{lang_complete}}</th>
<th class="text-right slx-smallcol" data-sort="int">{{lang_unusedFor}}</th>
<th class="slx-smallcol" data-sort="string">{{lang_uplink}}</th>
</tr>
</thead>
<tbody>
{{#images}}
<tr>
<td class="text-nowrap">
{{name}}:{{rid}}
</td>
<td class="text-right text-nowrap">
{{users}}
</td>
<td class="text-right text-nowrap" data-sort-value="{{size}}">
{{size_s}}
</td>
<td class="text-right text-nowrap">
<a data-imgid="{{id}}" class="cache-map" href="#">{{complete}} %</a>
</td>
<td class="text-right text-nowrap" data-sort-value="{{idle}}">
{{idle_s}}
</td>
<td class="text-nowrap">
{{uplinkServer}}
</td>
</tr>
{{/images}}
</tbody>
</table>
</div>
<style type="text/css">
.cmbar {
display: flex;
width: 250px;
align-items: stretch;
padding: 0;
}
.cmbar b {
display: inline-block;
flex-grow: 1;
height: 1em;
margin: 0;
}
{{#colors}}
.cmbar .a{{i}} {background: linear-gradient({{dark}}, {{bright}}, {{dark}})}
{{/colors}}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
$('.cache-map').click(function (e) {
e.preventDefault();
var $this = $(this);
// Use xhr directly as jQuery doesn't support arraybuffer
var xhr = new XMLHttpRequest();
xhr.open('GET', '?do=dnbd3&action=cachemap&server={{serverId}}&id=' + $this.data('imgid') + '&raw=1&async=1', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
if (this.readyState !== 4)
return;
var ua = new Uint8Array(this.response);
console.log(ua);
if (this.status !== 200) {
$this.replaceWith($('<span>').text(typeof TextDecoder !== 'undefined' ? new TextDecoder("utf-8").decode(ua) : 'HTTP ' + this.status));
return;
}
var llast = -1;
var lcount = 0;
var genChunk = function(acc) {
var line;
if (acc !== false) {
if (acc > 15) acc = 15; else acc = (acc + 0.5) | 0;
if (llast === acc) {
lcount++;
return '';
}
}
if (llast !== -1 || acc === false) {
if (lcount === 1) {
line = '<b class="a' + llast + '"></b>';
} else {
line = '<b class="a' + llast + '" style="flex-grow:' + lcount + '"></b>';
}
} else {
line = '';
}
llast = acc;
lcount = 1;
return line;
};
var l = ua.length;
var div;
if (l >= 240) {
div = l / 120;
} else {
div = 1;
}
var acc = 0, target = div, div16 = div * 16, html = '';
for (var i = 0; i < l; ++i) {
acc += ua[i];
if (i + 1 >= target) {
html += genChunk(acc / (div16));
acc = 0;
target += div;
}
}
html += genChunk(false);
$this.replaceWith($('<div class="cmbar">').html(html));
};
xhr.send();
});
});
</script>
|
