pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reformat details window

Browse Source
This commit is contained in:
Wim Brand
2021-09-27 21:01:14 +02:00
parent 395bbc0947
commit 4ab8ecdce0
1 changed files with 29 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
res/include/script/file_viewer/DetailsWindow.js
View File

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