[enh] integrate bulma.css for fun and profit

This commit is contained in:
Laurent Peuch 2018-07-15 04:00:15 +02:00
parent 5b51fbfef6
commit 517877b74f
2 changed files with 80 additions and 26 deletions

View file

@ -2,35 +2,38 @@
<html>
<head>
<title>YunoRunner for CI</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<h1>Tasks</h1>
<div id="jobs">
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<th>App</th>
<th>State</th>
<th>Revision</th>
<th>Ynh Version</th>
<th>Created time</th>
<th>Started time</th>
<th>End time</th>
</tr>
<tr v-for="(job, index) in jobs" :id="job.id">
<td><a v-bind:href="'/job/' + job.id">{{job.name}}</a></td>
<td>{{job.state}}</td>
<td>{{job.target_revision}}</td>
<td>{{job.yunohost_version}}</td>
<td>{{job.created_time}}</td>
<td>{{job.started_time}}</td>
<td>{{job.end_time}}</td>
</tr>
</table>
</div>
<section class="section">
<h1 class="title">Tasks</h1>
<div id="jobs">
<table class="table is-bordered is-hoverable is-striped is-fullwidth">
<thead>
<th>App</th>
<th>State</th>
<th>Revision</th>
<th>Ynh Version</th>
<th>Created time</th>
<th>Started time</th>
<th>End time</th>
</thead>
<tr v-for="(job, index) in jobs" :id="job.id">
<td><a v-bind:href="'/job/' + job.id">{{job.name}}</a></td>
<td>{{job.state}}</td>
<td>{{job.target_revision}}</td>
<td>{{job.yunohost_version}}</td>
<td>{{job.created_time}}</td>
<td>{{job.started_time}}</td>
<td>{{job.end_time}}</td>
</tr>
</table>
</div>
</section>
<script>
(function() {
var app = new Vue({

51
templates/job.html Normal file
View file

@ -0,0 +1,51 @@
<!doctype html>
<html>
<head>
<title>YunoRunner for CI</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"></script>
</head>
<body>
<section class="section" id="job">
<h1 class="title">Job '{{job.name}}'</h1>
<table class="table is-bordered">
<tr><th>State</th><td>{{job.state}}</td></tr>
<tr><th>Target revision</th><td>{{job.target_revision}}</td></tr>
<tr><th>YunoHost version</th><td>{{job.yunohost_version}}</td></tr>
<tr><th>Created time</th><td>{{job.created_time}}</td></tr>
<tr><th>Started time</th><td>{{job.started_time}}</td></tr>
<tr><th>End time</th><td>{{job.end_time}}</td></tr>
</table>
<h2 class="subtitle">Excution log:</h2>
<pre>{{job.log}}</pre>
</section>
<script>
(function() {
var app = new Vue({
el: '#job',
data: {
job: {}
},
})
ws = new WebSocket('ws://' + document.domain + ':' + location.port + '/job-%s-ws');
ws.onmessage = function (event) {
var message = JSON.parse(event.data);
var data = message.data;
var action = message.action;
if (action == "init_job" || action == "update_job") {
app.job = data;
}
};
})()
</script>
</body>
</html>