From 72e9ba141f5c82d71800f502f1c40028ffafb5b6 Mon Sep 17 00:00:00 2001
From: Simon Rettberg
Date: Mon, 9 Sep 2019 11:47:27 +0200
Subject: [dnbd3] proxy view: Show cache-map when clicking percentage of image

Requires up to date DNBD3-Server
---
 .../dnbd3/templates/page-proxy-images.html         | 86 +++++++++++++++++++++-
 1 file changed, 85 insertions(+), 1 deletion(-)

(limited to 'modules-available/dnbd3/templates/page-proxy-images.html')

diff --git a/modules-available/dnbd3/templates/page-proxy-images.html b/modules-available/dnbd3/templates/page-proxy-images.html
index ff420ffd..3ec4908c 100644
--- a/modules-available/dnbd3/templates/page-proxy-images.html
+++ b/modules-available/dnbd3/templates/page-proxy-images.html
@@ -21,7 +21,7 @@
 					{{size_s}}
 				</td>
 				<td class="text-right text-nowrap">
-					{{complete}}&thinsp;%
+					<a data-imgid="{{id}}" class="cache-map" href="#">{{complete}}&thinsp;%</a>
 				</td>
 				<td class="text-right text-nowrap">
 					{{idle_s}}
@@ -33,3 +33,87 @@
 		{{/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>
-- 
cgit v1.2.3-55-g7522