Mercurial > sci
comparison 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 |
comparison
equal
deleted
inserted
replaced
40:752bb1cd2dd8 | 41:00b9af607524 |
---|---|
1 <h1 class="title">Results for job {{job_id}}</h1> | |
2 <table class="table"> | |
3 <thead> | |
4 <tr> | |
5 <th>Worker</th> | |
6 <th>Exit code</th> | |
7 <th>Termination code</th> | |
8 <th>Status</th> | |
9 <th>View log</th> | |
10 </tr> | |
11 </thead> | |
12 <tbody> | |
13 {{#jobresults}} | |
14 <tr> | |
15 <td><a href="/workers/{{worker_name}}">{{worker_name}}</a></td> | |
16 <td>{{exitcode}}</td> | |
17 <td>{{sigcode}}</td> | |
18 <td class="{{classname}}">{{status}}</td> | |
19 <td><button class="button is-light is-info is-small js-modal-trigger" data-target="console-{{job_id}}">view log</button></td> | |
20 </tr> | |
21 {{/jobresults}} | |
22 </tbody> | |
23 </table> | |
24 | |
25 <!-- Modal dialogs for every console output. --> | |
26 {{#jobresults}} | |
27 <div id="console-{{job_id}}" class="modal"> | |
28 <div class="modal-background"></div> | |
29 | |
30 <div class="modal-content console"> | |
31 <div class="box"> | |
32 <pre>{{console}}</pre> | |
33 </div> | |
34 </div> | |
35 | |
36 <button class="modal-close is-large" aria-label="close"></button> | |
37 </div> | |
38 {{/jobresults}} | |
39 | |
40 <script type="text/javascript"> | |
41 document.addEventListener('DOMContentLoaded', () => { | |
42 // Functions to open and close a modal | |
43 function openModal($el) { | |
44 $el.classList.add('is-active'); | |
45 } | |
46 | |
47 function closeModal($el) { | |
48 $el.classList.remove('is-active'); | |
49 } | |
50 | |
51 function closeAllModals() { | |
52 (document.querySelectorAll('.modal') || []).forEach(($modal) => { | |
53 closeModal($modal); | |
54 }); | |
55 } | |
56 | |
57 // Add a click event on buttons to open a specific modal | |
58 (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => { | |
59 const modal = $trigger.dataset.target; | |
60 const $target = document.getElementById(modal); | |
61 | |
62 $trigger.addEventListener('click', () => { | |
63 openModal($target); | |
64 }); | |
65 }); | |
66 | |
67 // Add a click event on various child elements to close the parent modal | |
68 (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => { | |
69 const $target = $close.closest('.modal'); | |
70 | |
71 $close.addEventListener('click', () => { | |
72 closeModal($target); | |
73 }); | |
74 }); | |
75 | |
76 // Add a keyboard event to close all modals | |
77 document.addEventListener('keydown', (event) => { | |
78 const e = event || window.event; | |
79 | |
80 if (e.keyCode === 27) { // Escape key | |
81 closeAllModals(); | |
82 } | |
83 }); | |
84 }); | |
85 </script> |