From 83f1aa1a6b2ccb31fb06e5a619b0e4321c1f5e64 Mon Sep 17 00:00:00 2001 From: Patrick Jentsch Date: Thu, 24 Oct 2019 13:28:47 +0200 Subject: [PATCH] Add dynamic output link creation. --- app/templates/main/jobs/job.html.j2 | 316 +++++++++++++++------------- 1 file changed, 174 insertions(+), 142 deletions(-) diff --git a/app/templates/main/jobs/job.html.j2 b/app/templates/main/jobs/job.html.j2 index 6603a26b..4e045d36 100644 --- a/app/templates/main/jobs/job.html.j2 +++ b/app/templates/main/jobs/job.html.j2 @@ -34,80 +34,87 @@ } else { this.job = jobs[this.jobId]; } - creationDateElement = document.getElementById("creation-date"); - creationDateElement.value = (new Date(this.job.creation_date * 1000)).toLocaleString(); - descriptionElement = document.getElementById("description"); - descriptionElement.innerHTML = this.job.description; - endDateElement = document.getElementById("end-date"); - endDateElement.value = this.job.end_date ? (new Date(this.job.end_date * 1000)).toLocaleString() : "Not available"; - memMbElement = document.getElementById("mem-mb"); - memMbElement.value = this.job.mem_mb; - nCoresElement = document.getElementById("n-cores"); - nCoresElement.value = this.job.n_cores; - serviceElement = document.getElementById("service"); - serviceElement.value = this.job.service; - serviceArgsElement = document.getElementById("service-args"); - serviceArgsElement.value = this.job.service_args; - serviceVersionElement = document.getElementById("service-version"); - serviceVersionElement.value = this.job.service_version; - statusColor = JobList.STATUS_COLORS[this.job.status] || JobList.STATUS_COLORS['default']; - statusElement = document.getElementById("status"); - statusElement.classList.add(statusColor); - statusElement.innerHTML = this.job.status; - titleElement = document.getElementById("title"); - titleElement.innerHTML = this.job.title; - var downloadIconElement, fileElement, filesElement, input, inputDownloadElement, inputElement, result, resultDownloadElement, resultsElement; + // Title + this.setTitle(this.job.title); + // Description + this.setDescription(this.job.description); + // Status + this.setStatus(this.job.status); + // Creation date + this.setCreationDate(this.job.creation_date); + // End date + if (this.job.end_date) {this.setEndDate(this.job.end_date);} + // Memory + this.setMemMb(this.job.mem_mb); + // CPU cores + this.setNCores(this.job.n_cores); + // Service + this.setService(this.job.service); + // Service arguments + this.setServiceArgs(this.job.service_args); + // Service version + this.setServiceVersion(this.job.service_version); + + var filesElement, input, inputDownloadElement, inputElement, + inputFilenameElement, inputResultsElement; filesElement = document.getElementById("files"); - downloadIconElement = document.createElement("i"); - downloadIconElement.classList.add("material-icons", "left"); - downloadIconElement.innerText = "file_download"; for (input of this.job.inputs) { - fileElement = document.createElement("tr"); - inputDownloadElement = document.createElement("a"); - inputDownloadElement.classList.add("waves-effect", "waves-light", "btn-small"); - inputDownloadElement.href = `/jobs/${this.job.id}/download?file=${input.filename}`; - inputDownloadElement.innerText = input.filename; - inputDownloadElement.appendChild(downloadIconElement.cloneNode(true)); - inputElement = document.createElement("td"); - inputElement.id = `input-${input.id}`; - inputElement.appendChild(inputDownloadElement); - resultsElement = document.createElement("td"); - resultsElement.id = `results-${input.id}`; - // add_results(input); - for (result of input.results) { - resultDownloadElement = document.createElement("a"); - resultDownloadElement.classList.add("waves-effect", "waves-light", "btn-small"); - resultDownloadElement.href = `/jobs/${this.job.id}/download?file=output/${input.filename}/${result.filename}`; - resultDownloadElement.innerText = result.filename.split(".").slice(-1)[0]; - resultDownloadElement.appendChild(downloadIconElement.cloneNode(true)); - resultsElement.appendChild(resultDownloadElement); - } - fileElement.appendChild(inputElement); - fileElement.appendChild(resultsElement); - filesElement.appendChild(fileElement); + // Data row + inputElement = document.createElement("tr"); + filesElement.append(inputElement); + // Input filename + inputFilenameElement = document.createElement("td"); + inputFilenameElement.id = `input-${input.id}-filename`; + inputElement.append(inputFilenameElement); + // Input download + inputDownloadElement = document.createElement("td"); + inputDownloadElement.id = `input-${input.id}-download`; + inputElement.append(inputDownloadElement); + // Third column for input result file download buttons + inputResultsElement = document.createElement("td"); + inputResultsElement.id = `input-${input.id}-results`; + inputElement.append(inputResultsElement); + this.setInputFilename(input); + this.setInputDownload(input); + this.setInputResults(input); } + } - M.updateTextFields(); + setInputDownload(input) { + var inputDownloadButtonElement, inputDownloadButtonIconElement, + inputDownloadElement; + inputDownloadElement = document.getElementById(`input-${input.id}-download`); + inputDownloadButtonElement = document.createElement("a"); + inputDownloadButtonElement.classList.add("waves-effect", "waves-light", "btn-small"); + inputDownloadButtonElement.href = `${this.jobId}/download?file=${input.filename}`; + inputDownloadButtonElement.setAttribute("download", ""); + inputDownloadButtonIconElement = document.createElement("i"); + inputDownloadButtonIconElement.classList.add("material-icons"); + inputDownloadButtonIconElement.innerText = "file_download"; + inputDownloadButtonElement.append(inputDownloadButtonIconElement); + inputDownloadElement.append(inputDownloadButtonElement); + } + + setInputFilename(input) { + var inputFilenameElement; + inputFilenameElement = document.getElementById(`input-${input.id}-filename`); + inputFilenameElement.innerText = input.filename; } _update(patch) { - var newStatusColor, operation, pathArray, status, statusColor, - updatedElement; + var input, operation, pathArray; for (operation of patch) { /* "/jobId/valueName" -> ["jobId", "valueName"] */ pathArray = operation.path.split("/").slice(1); - console.log(operation); - console.log(pathArray); if (pathArray[0] != this.jobId) {continue;} switch(operation.op) { case "add": - switch(pathArray[1]) { - case "input": - - break; + if (pathArray[1] === "inputs" && pathArray[3] === "results") { + console.log(operation.value); + this.setInputResult(operation.value); } break; case "delete": @@ -115,33 +122,11 @@ break; case "replace": switch(pathArray[1]) { - case "description": - updatedElement = document.getElementById("description"); - updatedElement.innerHTML = operation.value; - break; case "end_date": - updatedElement = document.getElementById("end-date"); - updatedElement.value = (new Date(operation.value * 1000)).toLocaleString(); - M.updateTextFields(); + this.setEndDate(operation.value); break; case "status": - if (operation.value == "complete") { - location.reload(); - } - updatedElement = document.getElementById("status"); - status = updatedElement.innerHTML; - statusColor = JobList.STATUS_COLORS[status] - || JobList.STATUS_COLORS['default']; - newStatusColor = JobList.STATUS_COLORS[operation.value] - || JobList.STATUS_COLORS['default']; - updatedElement.classList.remove(statusColor); - updatedElement.classList.add(newStatusColor); - updatedElement.innerHTML = operation.value; - Animations.pulse(updatedElement, 3000); - break; - case "title": - updatedElement = document.getElementById("title"); - updatedElement.innerHTML = operation.value; + this.setStatus(operation.value); break; default: break; @@ -152,6 +137,103 @@ } } } + + setTitle(title) { + var titleElement; + titleElement = document.getElementById("title"); + titleElement.innerText = title; + } + + setDescription(description) { + var descriptionElement; + descriptionElement = document.getElementById("description"); + descriptionElement.innerText = description; + } + + setStatus(status) { + var statusColor, statusElement; + statusElement = document.getElementById("status"); + for (statusColor of Object.values(JobList.STATUS_COLORS)) { + statusElement.classList.remove(statusColor); + } + statusElement.classList.add(JobList.STATUS_COLORS[status] || JobList.STATUS_COLORS['default']); + statusElement.innerText = status; + } + + setCreationDate(timestamp) { + var creationDateElement; + creationDateElement = document.getElementById("creation-date"); + creationDateElement.value = new Date(timestamp * 1000).toLocaleString(); + M.updateTextFields(); + } + + setEndDate(timestamp) { + var endDateElement; + endDateElement = document.getElementById("end-date"); + endDateElement.value = new Date(timestamp * 1000).toLocaleString(); + M.updateTextFields(); + } + + setMemMb(memMb) { + var memMbElement; + memMbElement = document.getElementById("mem-mb"); + memMbElement.value = memMb; + M.updateTextFields(); + } + + setNCores(nCores) { + var nCoresElement; + nCoresElement = document.getElementById("n-cores"); + nCoresElement.value = nCores; + M.updateTextFields(); + } + + setService(service) { + var serviceElement; + serviceElement = document.getElementById("service"); + serviceElement.value = service; + M.updateTextFields(); + } + + setServiceArgs(serviceArgs) { + var serviceArgsElement; + serviceArgsElement = document.getElementById("service-args"); + serviceArgsElement.value = serviceArgs; + M.updateTextFields(); + } + + setServiceVersion(serviceVersion) { + var serviceVersionElement; + serviceVersionElement = document.getElementById("service-version"); + serviceVersionElement.value = serviceVersion; + M.updateTextFields(); + } + + setInputResults(input) { + var result; + for (result of input.results) { + this.setInputResult(result); + } + } + + setInputResult(result) { + var inputResultsElement, resultDownloadButtonElement, + resultDownloadButtonIconElement; + inputResultsElement = document.getElementById(`input-${result.job_input_id}-results`); + resultDownloadButtonElement = document.createElement("a"); + resultDownloadButtonElement.classList.add("waves-effect", "waves-light", "btn-small"); + var resultFile = `${result.dir}/${result.filename}`; + resultFile = resultFile.substring(resultFile.indexOf("output/")); + resultDownloadButtonElement.href = `${this.jobId}/download?file=${resultFile}`; + resultDownloadButtonElement.innerText = result.filename.split(".").reverse()[0]; + resultDownloadButtonElement.setAttribute("download", ""); + resultDownloadButtonIconElement = document.createElement("i"); + resultDownloadButtonIconElement.classList.add("material-icons", "left"); + resultDownloadButtonIconElement.innerText = "file_download"; + resultDownloadButtonElement.prepend(resultDownloadButtonIconElement); + inputResultsElement.append(resultDownloadButtonElement); + inputResultsElement.append(" "); + } } var informationUpdater = new InformationUpdater(JOB_ID); @@ -236,74 +318,24 @@ + + + +
+
+
Files -
- +
- - - - + + +
InputsResultsFileInputResults
- - Files old - - - - - - - - - {% for file in files %} - - - - - {% if files[file]['results'] %} - {% for result in files[file]['results'] %} - - - - - {% if result == 'vrt' %} - - - - - - - - - {% endif %} - {% endfor %} - {% else %} - {% for step in range(1, 4) %} - - - - - {% endfor %} - {% endif %} - {% endfor %} - -
InputsResults
- {{ file }} - - file_downloadDownload -
- {{ result }} - - {% if job.status == 'complete' %} - file_downloadDownload - {% endif %} -
processing...
-