summaryrefslogblamecommitdiffstats
path: root/modules-available/dnbd3/templates/page-proxy-images.html
blob: 3ec4908c42bcb1b894a0f4a107ee2e2d566e45a6 (plain) (tree)
1
2
3
4
5
6
7
8
9







                                                                                  
                                                                                   













                                                                     
                                                                                                                   
                                     


                                                                   





                                                        
      



















































































                                                                                                                                                                              
<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}}&thinsp;%</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.49) | 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>