diff --git a/app/templates/jobs/job.html.j2 b/app/templates/jobs/job.html.j2
index f4a3eb7f71492b85ab3d2797cba1005764490a60..f288032b59d042e01df0ea5ee0a0daf0715c22c6 100644
--- a/app/templates/jobs/job.html.j2
+++ b/app/templates/jobs/job.html.j2
@@ -12,84 +12,8 @@
<div class="col s12 m8">
- <div class="card">
- <div class="card-content">
- <span class="card-title">Chronometrics</span>
- <div class="row">
- <div class="col s12 m6">
- <div class="input-field">
- <input disabled value="{{ job.creation_date.strftime('%m/%d/%Y, %H:%M:%S %p') }}" id="creation-date" type="text" class="validate">
- <label for="creation-date">Creation date</label>
- </div>
- </div>
- <div class="col s12 m6">
- <div class="input-field">
- <input disabled value="" id="end-date" type="text" class="validate">
- <label for="end-date">End date</label>
- </div>
- </div>
- </div>
-
- <span class="card-title">Ressource allocations</span>
- <div class="row">
- <div class="col s12 m6">
- <div class="input-field">
- <input disabled value="{{ job.mem_mb }}" id="mem-mb" type="text" class="validate">
- <label for="mem-mb">Memory</label>
- </div>
- </div>
- <div class="col s12 m6">
- <div class="input-field">
- <input disabled value="{{ job.n_cores }}" id="n-cores" type="text" class="validate">
- <label for="n-cores">CPU cores</label>
- </div>
- </div>
- </div>
-
- <span class="card-title">Service informations</span>
- <div class="row">
- <div class="col s12 m4">
- <div class="input-field">
- <input disabled value="{{ job.service }}" id="service" type="text" class="validate">
- <label for="service">Service</label>
- </div>
- </div>
- <div class="col s12 m4">
- <div class="input-field">
- <input disabled value="{{ job.service_args|e }}" id="service-args" type="text" class="validate">
- <label for="service-args">Service arguments</label>
- </div>
- </div>
- <div class="col s12 m4">
- <div class="input-field">
- <input disabled value="{{ job.service_version }}" id="service-version" type="text" class="validate">
- <label for="service-version">Service version</label>
- </div>
- </div>
- </div>
- </div>
- <div class="card-action right-align">
- <a href="#" class="waves-effect waves-light btn"><i class="material-icons left">settings</i>Export Parameters</a>
- <a data-target="delete-job-modal" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete Job</a>
- </div>
- </div>
-
- <ul class="collapsible popout">
- <li>
- <div class="collapsible-header"><i class="material-icons">done</i>Result files</div>
- <div class="collapsible-body">
- <table class="highlight responsive-table">
- <thead>
- <tr>
- <th>Bundlename</th>
- <th>Download</th>
- </tr>
- </thead>
- <tbody id="results"></tbody>
- </table>
- </div>
- </li>
- <li>
+ <ul class="collapsible expandable" id="job-list">
+ <li class="active">
<div class="collapsible-header">
<i class="material-icons">input</i>Input files
</div>
@@ -116,6 +40,78 @@
</table>
</div>
</li>
+ <li>
+ <div class="collapsible-header"><i class="material-icons">done</i>Result files</div>
+ <div class="collapsible-body">
+ <table class="highlight responsive-table">
+ <thead>
+ <tr>
+ <th>Bundlename</th>
+ <th>Download</th>
+ </tr>
+ </thead>
+ <tbody id="results"></tbody>
+ </table>
+ </div>
+ </li>
+ <li>
+ <div class="collapsible-header"><i class="material-icons">settings</i>Settings</div>
+ <div class="collapsible-body">
+ <div class="row">
+ <div class="col s12">Chronometrics</div>
+ <div class="col s12 m6">
+ <div class="input-field">
+ <input disabled value="{{ job.creation_date.strftime('%m/%d/%Y, %H:%M:%S %p') }}" id="creation-date" type="text" class="validate">
+ <label for="creation-date">Creation date</label>
+ </div>
+ </div>
+ <div class="col s12 m6">
+ <div class="input-field">
+ <input disabled value="" id="end-date" type="text" class="validate">
+ <label for="end-date">End date</label>
+ </div>
+ </div>
+
+ <div class="col s12">Ressource allocations</div>
+ <div class="col s12 m6">
+ <div class="input-field">
+ <input disabled value="{{ job.mem_mb }}" id="mem-mb" type="text" class="validate">
+ <label for="mem-mb">Memory</label>
+ </div>
+ </div>
+ <div class="col s12 m6">
+ <div class="input-field">
+ <input disabled value="{{ job.n_cores }}" id="n-cores" type="text" class="validate">
+ <label for="n-cores">CPU cores</label>
+ </div>
+ </div>
+
+ <div class="col s12">Service informations</div>
+ <div class="col s12 m4">
+ <div class="input-field">
+ <input disabled value="{{ job.service }}" id="service" type="text" class="validate">
+ <label for="service">Service</label>
+ </div>
+ </div>
+ <div class="col s12 m4">
+ <div class="input-field">
+ <input disabled value="{{ job.service_args|e }}" id="service-args" type="text" class="validate">
+ <label for="service-args">Service arguments</label>
+ </div>
+ </div>
+ <div class="col s12 m4">
+ <div class="input-field">
+ <input disabled value="{{ job.service_version }}" id="service-version" type="text" class="validate">
+ <label for="service-version">Service version</label>
+ </div>
+ </div>
+ <div class="col s12 right-align">
+ <a href="#" class="waves-effect waves-light btn"><i class="material-icons left">settings</i>Export Parameters</a>
+ <a data-target="delete-job-modal" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete Job</a>
+ </div>
+ </div>
+ </div>
+ </li>
</ul>
</div>
@@ -124,7 +120,7 @@
<div id="delete-job-modal" class="modal">
<div class="modal-content">
<h4>Confirm deletion</h4>
- <p>Do you really want to delete the job {{job.title}}? All associated files will be permanently deleted.</p>
+ <p>Do you really want to delete the job {{job.title}}? All associated files will be permanently deleted.</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn cancel">Cancel</a>
@@ -211,16 +207,19 @@
resultsElement = document.getElementById("results");
for (let result of results) {
- resultsElement.insertAdjacentHTML("beforeend", `
- <tr>
+ resultsElement.insertAdjacentHTML(
+ "beforeend",
+ `<tr>
<td>${result.filename}</td>
<td>
<a class="btn-small waves-effect waves-light" download href="/jobs/${result.job_id}/results/${result.id}/download">
<i class="material-icons">file_download</i>
</a>
</td>
- </tr>`);
+ </tr>`
+ );
}
+ M.Collapsible.getInstance(document.getElementById("job-list")).open(1);
}
setStatus(status) {