YunoHost/yunorunner
1
0
Fork 0
mirror of https://github.com/YunoHost/yunorunner.git synced 2024-09-03 20:05:52 +02:00
Code Issues Projects Releases Packages Wiki Activity

[enh] better UX for index.html during loading

Browse source
This commit is contained in:
Laurent Peuch 2019-01-22 02:34:22 +01:00
parent 9cd243311d
commit 4eee2a056d
1 changed files with 29 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
templates/index.html
View file

@ -5,6 +5,7 @@
<div class="container"> <div class="container">
<h1 class="title">Jobs <small>display last done job of each app and next scheduled job</small></h1> <h1 class="title">Jobs <small>display last done job of each app and next scheduled job</small></h1>
<div id="jobs"> <div id="jobs">
<div v-if="inited">
<table class="table is-bordered is-hoverable is-striped is-fullwidth"> <table class="table is-bordered is-hoverable is-striped is-fullwidth">
<thead> <thead>
<th>App</th> <th>App</th>
@ -13,6 +14,7 @@
<th>Started time</th> <th>Started time</th>
<th>End time</th> <th>End time</th>
</thead> </thead>
<div v-if="jobs.length > 0">
<tr v-for="(job, index) in jobs" :id="job.id" v-bind:class="[{deleted: job.deleted}, job.state + 'Job']"> <tr v-for="(job, index) in jobs" :id="job.id" v-bind:class="[{deleted: job.deleted}, job.state + 'Job']">
<td><a v-if="!job.deleted" v-bind:href="'job/' + job.id">{{job.name}}</a><span v-if="job.deleted">{{job.name}} (deleted)</span> <small title="job's id">#{{job.id}} </small></td> <td><a v-if="!job.deleted" v-bind:href="'job/' + job.id">{{job.name}}</a><span v-if="job.deleted">{{job.name}} (deleted)</span> <small title="job's id">#{{job.id}} </small></td>
<td>{{job.state}}</td> <td>{{job.state}}</td>
@ -20,8 +22,16 @@
<td>{{timestampToDate(job.started_time)}}</td> <td>{{timestampToDate(job.started_time)}}</td>
<td>{{timestampToDate(job.end_time)}}</td> <td>{{timestampToDate(job.end_time)}}</td>
</tr> </tr>
</div>
<div v-else>
<tr><td colspan="5">Not jobs available yet.</td></tr>
</div>
</table> </table>
</div> </div>
<div v-else>
Loading...
</div>
</div>
</div> </div>
</section> </section>
<% endblock %> <% endblock %>
@ -32,7 +42,8 @@
var app = new Vue({ var app = new Vue({
el: '#jobs', el: '#jobs',
data: { data: {
jobs: [] jobs: [],
inited: false,
}, },
methods: { methods: {
timestampToDate: function (timestamp) { timestampToDate: function (timestamp) {
@ -52,6 +63,7 @@
if (action == "init_jobs") { if (action == "init_jobs") {
app.jobs = data; app.jobs = data;
app.inited = true;
} else if (action == "update_job") { } else if (action == "update_job") {
for (var i = 0; i < app.jobs.length; ++i) { for (var i = 0; i < app.jobs.length; ++i) {
if (app.jobs[i].id == data.id) { if (app.jobs[i].id == data.id) {