Add dynamic output link creation.

This commit is contained in:
Patrick Jentsch 2019-10-24 13:28:47 +02:00
parent fca352c3dd
commit 83f1aa1a6b

View File

@ -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);
</script>
@ -236,74 +318,24 @@
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col s12">
<div class="card">
<div class="card-content">
<span class="card-title">Files</span>
<div style="overflow-x:auto;">
<table class="highlight">
<table class="highlight responsive-table">
<thead>
<tr>
<th style="width: 25%;">Inputs</th>
<th style="width: 25%;"></th>
<th style="width: 25%;">Results</th>
<th style="width: 25%;"></th>
<th>File</th>
<th>Input</th>
<th>Results</th>
</tr>
</thead>
<tbody id="files"></tbody>
</table>
<span class="card-title">Files old</span>
<table>
<thead>
<tr>
<th style="width: 50%;">Inputs</th>
<th style="width: 50%;">Results</th>
</tr>
</thead>
<tbody>
{% for file in files %}
<tr>
<td rowspan="4">
{{ file }}
</td>
<td rowspan="4">
<a href="{{ url_for('main.job_download', job_id=job.id, file=files[file]['path']) }}" class="waves-effect waves-light btn-small"><i class="material-icons left">file_download</i>Download</a>
</td>
</tr>
{% if files[file]['results'] %}
{% for result in files[file]['results'] %}
<tr>
<td>
{{ result }}
</td>
<td>
{% if job.status == 'complete' %}
<a href="{{ url_for('main.job_download', job_id=job.id, file=files[file]['results'][result]['path']) }}" class="waves-effect waves-light btn-small"><i class="material-icons left">file_download</i>Download</a>
{% endif %}
</td>
</tr>
{% if result == 'vrt' %}
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
{% endif %}
{% endfor %}
{% else %}
{% for step in range(1, 4) %}
<tr>
<td>processing...</td>
<td></td>
</tr>
{% endfor %}
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>