Mercurial > sci
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>