blob: 54c184975084fb6ac212cce3b818054c0add625f (
plain) (
tree)
|
|
<div role="tabpanel" class="tab-pane" id="tab-images">
<h2>{{lang_imageList}}</h2>
<table class="table table-condensed">
<tr>
<th>{{lang_image}}</th>
<th class="text-right slx-smallcol">{{lang_clients}}</th>
<th class="text-right slx-smallcol">{{lang_size}}</th>
<th class="text-right slx-smallcol">{{lang_complete}}</th>
<th class="text-right slx-smallcol">{{lang_unusedFor}}</th>
<th class="slx-smallcol">{{lang_uplink}}</th>
</tr>
{{#images}}
<tr>
<td class="text-nowrap">
{{name}}:{{rid}}
</td>
<td class="text-right text-nowrap">
{{users}}
</td>
<td class="text-right text-nowrap">
{{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">
{{idle_s}}
</td>
<td class="text-nowrap">
{{uplinkServer}}
</td>
</tr>
{{/images}}
</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>
|