mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-11-03 20:02:47 +00:00
Add dynamic output link creation.
This commit is contained in:
Patrick Jentsch
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user