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>