diff themes/bulma/jobresults.mustache @ 41:00b9af607524

scid: implement /jobresults/id page
author David Demelier <markand@malikania.fr>
date Tue, 09 Aug 2022 14:52:34 +0200
parents
children 3cf148705724
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/themes/bulma/jobresults.mustache	Tue Aug 09 14:52:34 2022 +0200
@@ -0,0 +1,85 @@
+				<h1 class="title">Results for job {{job_id}}</h1>
+				<table class="table">
+					<thead>
+						<tr>
+							<th>Worker</th>
+							<th>Exit code</th>
+							<th>Termination code</th>
+							<th>Status</th>
+							<th>View log</th>
+						</tr>
+					</thead>
+					<tbody>
+						{{#jobresults}}
+						<tr>
+							<td><a href="/workers/{{worker_name}}">{{worker_name}}</a></td>
+							<td>{{exitcode}}</td>
+							<td>{{sigcode}}</td>
+							<td class="{{classname}}">{{status}}</td>
+							<td><button class="button is-light is-info is-small js-modal-trigger" data-target="console-{{job_id}}">view log</button></td>
+						</tr>
+						{{/jobresults}}
+					</tbody>
+				</table>
+
+				<!-- Modal dialogs for every console output. -->
+{{#jobresults}}
+				<div id="console-{{job_id}}" class="modal">
+					<div class="modal-background"></div>
+
+					<div class="modal-content console">
+						<div class="box">
+							<pre>{{console}}</pre>
+						</div>
+					</div>
+
+					<button class="modal-close is-large" aria-label="close"></button>
+				</div>
+{{/jobresults}}
+
+				<script type="text/javascript">
+					document.addEventListener('DOMContentLoaded', () => {
+					  // Functions to open and close a modal
+					  function openModal($el) {
+					    $el.classList.add('is-active');
+					  }
+
+					  function closeModal($el) {
+					    $el.classList.remove('is-active');
+					  }
+
+					  function closeAllModals() {
+					    (document.querySelectorAll('.modal') || []).forEach(($modal) => {
+					      closeModal($modal);
+					    });
+					  }
+
+					  // Add a click event on buttons to open a specific modal
+					  (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
+					    const modal = $trigger.dataset.target;
+					    const $target = document.getElementById(modal);
+
+					    $trigger.addEventListener('click', () => {
+					      openModal($target);
+					    });
+					  });
+
+					  // Add a click event on various child elements to close the parent modal
+					  (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+					    const $target = $close.closest('.modal');
+
+					    $close.addEventListener('click', () => {
+					      closeModal($target);
+					    });
+					  });
+
+					  // Add a keyboard event to close all modals
+					  document.addEventListener('keydown', (event) => {
+					    const e = event || window.event;
+
+					    if (e.keyCode === 27) { // Escape key
+					      closeAllModals();
+					    }
+					  });
+					});
+				</script>