wip on sortable tables

pull/34/head
Zlatin Balevsky 2019-12-10 23:24:11 +00:00
parent f3ab15bd74
commit fcd6dbcfbd
3 changed files with 103 additions and 22 deletions

View File

@ -29,6 +29,18 @@ class Browse {
this.receivedResults = receivedResults
this.status = status
this.revision = revision
this.key = null
this.descending = null
}
setSort(key, descending) {
this.key = key
this.descending = descending
}
getBrowseLink() {
return "<a href='#' onclick='window.showResults(\"" + this.host + "\",\"" + this.key + "\",\"" + this.descending +
"\");return false;'>" + this.host + "</a>"
}
}
@ -103,7 +115,7 @@ function refreshActive() {
var tableHtml = "<table><thead><tr><th>" + _t("Host") + "</th><th>" + _t("Status") + "</th><th>" + _t("Results") + "</th></tr></thead></tbody>";
for (var [host, browse] of browsesByHost) {
var browseLink = getBrowseLink(host, host)
var browseLink = browse.getBrowseLink()
tableHtml += "<tr>"
tableHtml += "<td>" + browseLink + "</td>"
@ -122,7 +134,7 @@ function refreshActive() {
if (currentBrowse != null) {
var newBrowse = browsesByHost.get(currentHost)
if (currentBrowse.revision < newBrowse.revision)
showResults(currentHost)
showResults(currentHost, currentBrowse.key, currentBrowse.descending)
}
}
}
@ -130,11 +142,7 @@ function refreshActive() {
xmlhttp.send()
}
function getBrowseLink(host, text) {
return "<a href='#' onclick='window.showResults(\"" + host + "\");return false;'>" + text + "</a>"
}
function showResults(host) {
function showResults(host, key, descending) {
var browse = browsesByHost.get(host)
var xmlhttp = new XMLHttpRequest()
@ -163,49 +171,68 @@ function showResults(host) {
resultsByInfoHash.set(infoHash, result)
}
var tableHtml = "<table><thead><tr><th>" + _t("Name") + "</th><th>" + _t("Size") + "</th><th>" + _t("Download") + "</th></tr></thead><tbody>"
if (descending == "descending")
descending = "ascending"
else
descending = "ascending"
var table = new Table(["Name", "Size", "Download"], "sort", key, descending)
for (var [infoHash, result] of resultsByInfoHash) {
tableHtml += "<tr>"
var showComments = ""
if (result.comment != null) {
showComments = "<br/><span id='show-comment-" + infoHash +"'>" + getShowCommentLink(infoHash) + "</span>"
showComments += "<div id='comment-" + infoHash + "'></div>"
}
tableHtml += "<td>" + result.name + showComments + result.getCertificateBlock() + "</td>"
tableHtml += "<td>" + result.size + "</td>"
var nameCell = result.name + showComments + result.getCertificateBlock()
var sizeCell = result.size
var downloadCell = null
if (result.downloading == "true")
tableHtml += "<td>" + _t("Downloading") + "</td>"
downloadCell = _t("Downloading")
else
tableHtml += "<td>" + getDownloadLink(host, infoHash) + "</td>"
// TODO: show comment link
tableHtml += "</tr>"
downloadCell = getDownloadLink(host, infoHash)
var mapping = new Map()
mapping.set("Name", nameCell)
mapping.set("Size", sizeCell)
mapping.set("Download", downloadCell)
table.addRow(mapping)
}
tableHtml += "</tbody></table>"
var tableDiv = document.getElementById("resultsTable")
tableDiv.innerHTML = tableHtml
tableDiv.innerHTML = table.render()
}
}
xmlhttp.open("GET", "/MuWire/Browse?section=results&host="+browse.hostB64, true)
var paramString = "/MuWire/Browse?section=results&host=" + browse.hostB64
if (key != null)
paramString += "&key=" + key + "&order=" + descending
xmlhttp.open("GET", paramString, true)
xmlhttp.send()
}
function sort(key, descending) {
var currentBrowse = browsesByHost.get(currentHost)
currentBrowse.setSort(key, descending)
showResults(currentHost, key, descending)
}
function getDownloadLink(host, infoHash) {
return "<a href='#' onclick='window.download(\"" + host + "\",\"" + infoHash + "\");return false;'>" + _t("Download") + "</a>"
}
function download(host,infoHash) {
var currentBrowse = browsesByHost.get(host)
var result = resultsByInfoHash.get(infoHash)
var hostB64 = browsesByHost.get(host).hostB64
var hostB64 = currentBrowse.hostB64
var xmlhttp = new XMLHttpRequest()
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResults(host)
showResults(host, currentBrowse.key, currentBrowse.descending)
}
}
xmlhttp.open("POST", "/MuWire/Browse", true)

View File

@ -0,0 +1,53 @@
class Column {
constructor(key) {
this.key = key
}
render(descending, callback) {
var html = "<th>"
var linkText = _t(this.key)
var link = "<a href='#' onclick='" + callback + "(\"" + this.key + "\",\"" + descending + "\");return false;'>" + linkText + "</a>"
html += link + "</th>"
return html
}
}
class Table {
constructor(columns, callback, key, descending) {
this.columns = columns.map(x => new Column(x))
this.callback = callback
this.rows = []
this.key = key
this.descending = descending
}
addRow(mapping) {
this.rows.push(mapping)
}
render() {
var html = "<table><thead><tr>"
var i
for (i = 0;i < this.columns.length; i++) {
if (this.columns[i].key == this.key)
html += this.columns[i].render(this.descending, this.callback)
else
html += this.columns[i].render("descending", this.callback)
}
html += "</tr></thead><tbody>"
for (i = 0; i < this.rows.length; i++) {
html += "<tr>"
var j
for (j = 0; j < this.columns.length; j++) {
var key = this.columns[j].key
var value = this.rows[i].get(key)
html += "<td>" + value + "</td>"
}
html += "</tr>"
}
html += "</tbody></table>"
return html
}
}

View File

@ -13,6 +13,7 @@ String pagetitle="Browse Host";
<%@ include file="css.jsi"%>
<script src="js/util.js?<%=version%>" type="text/javascript"></script>
<script src="js/certificates.js?<%=version%> type="text/javascript"></script>
<script src="js/tables.js?<%=version%> type="text/javascript"></script>
<script src="js/browse.js?<%=version%>" type="text/javascript"></script>
</head>