view themes/bulma/jobresults.mustache @ 76:de0b36eabece

themes: fix jobresult consoles
author David Demelier <markand@malikania.fr>
date Mon, 30 Jan 2023 09:35:05 +0100
parents 3cf148705724
children
line wrap: on
line source

				<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="{{textcolor}}">{{status}}</td>
							<td><button class="button is-light is-info is-small js-modal-trigger" data-target="console-{{id}}">view log</button></td>
						</tr>
						{{/jobresults}}
					</tbody>
				</table>

				<!-- Modal dialogs for every console output. -->
{{#jobresults}}
				<div id="console-{{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>