From 4ab8ecdce011ef267e8d3d914b16712099b0fb42 Mon Sep 17 00:00:00 2001
From: Wim Brand <fornax@fornaxian.com>
Date: Mon, 27 Sep 2021 21:01:14 +0200
Subject: [PATCH] Reformat details window

---
 .../script/file_viewer/DetailsWindow.js       | 58 +++++++++----------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/res/include/script/file_viewer/DetailsWindow.js b/res/include/script/file_viewer/DetailsWindow.js
index d41c05f..18d7b6b 100644
--- a/res/include/script/file_viewer/DetailsWindow.js
+++ b/res/include/script/file_viewer/DetailsWindow.js
@@ -1,14 +1,14 @@
 function DetailsWindow(viewer) {
-	this.viewer  = viewer
+	this.viewer = viewer
 	this.visible = false
-	this.file    = null
+	this.file = null
 	this.graphsInitialized = false
-	this.graphViews     = 0
+	this.graphViews = 0
 	this.graphDownloads = 0
-	this.modal   = new Modal(
+	this.modal = new Modal(
 		document.getElementById("file_viewer"),
 		() => { this.toggle() },
-		"File Details", "1500px", "1000px",
+		"File Details", "1200px", "1000px",
 	)
 
 	let clone = document.getElementById("tpl_details_popup").content.cloneNode(true)
@@ -19,7 +19,7 @@ function DetailsWindow(viewer) {
 	this.btnDetails.addEventListener("click", () => { this.toggle() })
 }
 
-DetailsWindow.prototype.toggle = function() {
+DetailsWindow.prototype.toggle = function () {
 	if (this.visible) {
 		this.modal.close()
 		this.btnDetails.classList.remove("button_highlight")
@@ -37,27 +37,27 @@ DetailsWindow.prototype.toggle = function() {
 	}
 }
 
-DetailsWindow.prototype.setFile = function(file) {
+DetailsWindow.prototype.setFile = function (file) {
 	this.file = file
 	let desc = ""
 	if (this.viewer.isList) {
 		desc = file.description
 	}
-	this.divFileDetails.innerHTML = "<tr><td>Name<td><td>" + escapeHTML(file.name) + "</td></tr>"
-		+ "<tr><td>URL<td><td><a href=\""+file.link+"\">"+file.link+"</a></td></tr>"
-		+ "<tr><td>Mime Type<td><td>" + escapeHTML(file.mime_type) + "</td></tr>"
-		+ "<tr><td>ID<td><td>" + file.id + "</td></tr>"
-		+ "<tr><td>Size<td><td>" + formatDataVolume(file.size, 4) + "</td></tr>"
-		+ "<tr><td>Bandwidth<td><td>" + formatDataVolume(file.bandwidth_used, 4) + "</td></tr>"
-		+ "<tr><td>Upload Date<td><td>" + printDate(file.date_created, true, true, true) + "</td></tr>"
-		+ "<tr><td>Description<td><td>" + escapeHTML(desc) + "</td></tr>"
+	this.divFileDetails.innerHTML = `<tr><td>Name<td><td>${escapeHTML(file.name)}</td></tr>
+		<tr><td>URL<td><td><a href="${file.link}">${file.link}</a></td></tr>
+		<tr><td>Mime Type<td><td>${escapeHTML(file.mime_type)}</td></tr>
+		<tr><td>ID<td><td>${file.id}</td></tr>
+		<tr><td>Size<td><td>${formatDataVolume(file.size, 4)} ( ${formatThousands(file.size)} B )</td></tr>
+		<tr><td>Bandwidth<td><td>${formatDataVolume(file.bandwidth_used, 4)}</td></tr>
+		<tr><td>Upload Date<td><td>${printDate(file.date_created, true, true, true)}</td></tr>
+		<tr><td>Description<td><td>${escapeHTML(desc)}</td></tr>`
 
-	if(this.visible && file.timeseries_href !== "") {
+	if (this.visible && file.timeseries_href !== "") {
 		this.updateGraph(file)
 	}
 }
 
-DetailsWindow.prototype.renderGraphs = function() {
+DetailsWindow.prototype.renderGraphs = function () {
 	console.log("rendering graphs")
 	this.graphDownloads = drawGraph(
 		document.getElementById("downloads_chart"), "Downloads", "number",
@@ -67,31 +67,31 @@ DetailsWindow.prototype.renderGraphs = function() {
 	);
 }
 
-DetailsWindow.prototype.updateGraph = function(file) {
+DetailsWindow.prototype.updateGraph = function (file) {
 	console.log("updating graph")
 
 	let today = new Date()
 	let start = new Date()
-	start.setDate(start.getDate()-90)
+	start.setDate(start.getDate() - 90)
 
 	fetch(
-		file.timeseries_href+
-		"?start="+start.toISOString() +
-		"&end="+today.toISOString() +
-		"&interval="+60
+		file.timeseries_href +
+		"?start=" + start.toISOString() +
+		"&end=" + today.toISOString() +
+		"&interval=" + 60
 	).then(resp => {
-		if (!resp.ok) {return null}
+		if (!resp.ok) { return null }
 		return resp.json()
 	}).then(resp => {
 		resp.views.timestamps.forEach((val, idx) => {
 			let date = new Date(val);
-			let dateStr = ("00"+(date.getMonth()+1)).slice(-2);
-			dateStr += "-"+("00"+date.getDate()).slice(-2);
-			dateStr += " "+("00"+date.getHours()).slice(-2)+"h";
-			resp.views.timestamps[idx] = "   "+dateStr+"   "; // Poor man's padding
+			let dateStr = ("00" + (date.getMonth() + 1)).slice(-2);
+			dateStr += "-" + ("00" + date.getDate()).slice(-2);
+			dateStr += " " + ("00" + date.getHours()).slice(-2) + "h";
+			resp.views.timestamps[idx] = "   " + dateStr + "   "; // Poor man's padding
 		});
 		resp.bandwidth.amounts.forEach((val, idx) => {
-			resp.bandwidth.amounts[idx] = Math.round(val/file.size);
+			resp.bandwidth.amounts[idx] = Math.round(val / file.size);
 		});
 		this.graphDownloads.data.labels = resp.views.timestamps
 		this.graphViews.data.labels = resp.views.timestamps