From 173a1c33d48ba31d9be13cc4eaa0de6132a2d679 Mon Sep 17 00:00:00 2001
From: Laurent Peuch <cortex@worlddomination.be>
Date: Tue, 22 Jan 2019 03:24:18 +0100
Subject: [PATCH] [enh] better UX, tell when it's loading, there is no jobs or
 no apps

---
 templates/apps.html  | 52 ++++++++++++++++++++++++++------------------
 templates/index.html | 32 +++++++++++++--------------
 2 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/templates/apps.html b/templates/apps.html
index bbacfe1..5f4ff66 100644
--- a/templates/apps.html
+++ b/templates/apps.html
@@ -5,26 +5,34 @@
     <div class="container">
         <h1 class="title">Apps</h1>
         <div id="apps">
-            <table class="table is-bordered is-hoverable is-striped is-fullwidth">
-                <thead>
-                    <th>App</th>
-                    <th>Last job</th>
-                    <th>Created time</th>
-                    <th>Started time</th>
-                    <th>End time</th>
-                    <th>Commit</th>
-                    <th title="random day of the month on which a job is scheduled for this app">Day</th>
-                </thead>
-                <tr v-for="(app, index) in apps" :id="app.id" v-bind:class="[app.job_state + 'Job']">
-                    <td><a v-bind:href="app.name + '/'">{{app.name}}</a> <small>{{app.app_list}}</small> <span v-bind:class="['tag', appStateTagClass(app.state)]">{{app.state}}</span> <a target="_blank" v-bind:href="app.url">↪</a></td>
-                    <td><a v-bind:href="'<{ relative_path_to_root }>job/' + app.job_id">#{{app.job_id}}</a> <span v-bind:class="['tag', jobStateTagClass(app.job_state)]">{{app.job_state}}</span></td>
-                    <td>{{timestampToDate(app.created_time)}}</td>
-                    <td>{{timestampToDate(app.started_time)}}</td>
-                    <td>{{timestampToDate(app.end_time)}}</td>
-                    <td><a target="_blank" v-bind:href="app.url + '/commit/' + app.revision">{{app.revision.slice(0, 7)}}</a></td>
-                    <td class="randomJobDay" title="random day of the month on which a job is scheduled for this app">{{app.random_job_day}}</td>
-                </tr>
-            </table>
+            <template v-if="inited">
+                <table class="table is-bordered is-hoverable is-striped is-fullwidth">
+                    <thead>
+                        <th>App</th>
+                        <th>Last job</th>
+                        <th>Created time</th>
+                        <th>Started time</th>
+                        <th>End time</th>
+                        <th>Commit</th>
+                        <th title="random day of the month on which a job is scheduled for this app">Day</th>
+                    </thead>
+                    <template v-if="apps.length > 0">
+                        <tr v-for="(app, index) in apps" :id="app.id" v-bind:class="[app.job_state + 'Job']">
+                            <td><a v-bind:href="app.name + '/'">{{app.name}}</a> <small>{{app.app_list}}</small> <span v-bind:class="['tag', appStateTagClass(app.state)]">{{app.state}}</span> <a target="_blank" v-bind:href="app.url">↪</a></td>
+                            <td><a v-bind:href="'<{ relative_path_to_root }>job/' + app.job_id">#{{app.job_id}}</a> <span v-bind:class="['tag', jobStateTagClass(app.job_state)]">{{app.job_state}}</span></td>
+                            <td>{{timestampToDate(app.created_time)}}</td>
+                            <td>{{timestampToDate(app.started_time)}}</td>
+                            <td>{{timestampToDate(app.end_time)}}</td>
+                            <td><a target="_blank" v-bind:href="app.url + '/commit/' + app.revision">{{app.revision.slice(0, 7)}}</a></td>
+                            <td class="randomJobDay" title="random day of the month on which a job is scheduled for this app">{{app.random_job_day}}</td>
+                        </tr>
+                    </template>
+                    <template v-else>
+                        <tr><td colspan="7">Not apps available yet.</td></tr>
+                    </template>
+                </table>
+            </template>
+            <div v-else>Loading...</div>
         </div>
     </div>
 </section>
@@ -36,7 +44,8 @@
         var app = new Vue({
             el: '#apps',
             data: {
-                apps: []
+                apps: [],
+                inited: false,
             },
             methods: {
                 timestampToDate: function (timestamp) {
@@ -75,6 +84,7 @@
 
             if (action == "init_apps") {
                 app.apps = data;
+                Vue.set(app, 'inited', true);
             } else if (action == "new_app") {
                 for (var i = 0; i < app.apps.length; ++i) {
                     if (data.name < app.apps[i].name) {
diff --git a/templates/index.html b/templates/index.html
index 33d06f2..e1f101e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,7 +5,7 @@
     <div class="container">
         <h1 class="title">Jobs <small>display last done job of each app and next scheduled job</small></h1>
         <div id="jobs">
-            <div v-if="inited">
+            <template v-if="inited">
                 <table class="table is-bordered is-hoverable is-striped is-fullwidth">
                     <thead>
                         <th>App</th>
@@ -14,23 +14,23 @@
                         <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>
+                        <template 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>
+                    </template>
+                    <template v-else>
                         <tr><td colspan="5">Not jobs available yet.</td></tr>
-                    </div>
+                    </template>
                 </table>
-            </div>
-            <div v-else>
+            </template>
+            <template v-else>
                 Loading...
-            </div>
+            </template>
         </div>
     </div>
 </section>
@@ -63,7 +63,7 @@
 
             if (action == "init_jobs") {
                 app.jobs = data;
-                app.inited = true;
+                Vue.set(app, 'inited', true);
             } else if (action == "update_job") {
                 for (var i = 0; i < app.jobs.length; ++i) {
                     if (app.jobs[i].id == data.id) {