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

46
templates/index.html
View file

@ -5,22 +5,32 @@
<div class="container">
<h1 class="title">Jobs <small>display last done job of each app and next scheduled job</small></h1>
<div id="jobs">
<table class="table is-bordered is-hoverable is-striped is-fullwidth">
<thead>
<th>App</th>
<th>State</th>
<th>Created time</th>
<th>Started time</th>
<th>End time</th>
</thead>
<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>{{job.state}}</td>
<td>{{timestampToDate(job.created_time)}}</td>
<td>{{timestampToDate(job.started_time)}}</td>
<td>{{timestampToDate(job.end_time)}}</td>
</tr>
</table>
<div v-if="inited">
<table class="table is-bordered is-hoverable is-striped is-fullwidth">
<thead>
<th>App</th>
<th>State</th>
<th>Created time</th>
<th>Started time</th>
<th>End time</th>
</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']">
<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>{{timestampToDate(job.created_time)}}</td>
<td>{{timestampToDate(job.started_time)}}</td>
<td>{{timestampToDate(job.end_time)}}</td>
</tr>
</div>
<div v-else>
<tr><td colspan="5">Not jobs available yet.</td></tr>
</div>
</table>
</div>
<div v-else>
Loading...
</div>
</div>
</div>
</section>
@ -32,7 +42,8 @@
var app = new Vue({
el: '#jobs',
data: {
jobs: []
jobs: [],
inited: false,
},
methods: {
timestampToDate: function (timestamp) {
@ -52,6 +63,7 @@
if (action == "init_jobs") {
app.jobs = data;
app.inited = true;
} else if (action == "update_job") {
for (var i = 0; i < app.jobs.length; ++i) {
if (app.jobs[i].id == data.id) {