From 7265efacb75ceeb1276c7e83ba6f9251a93df331 Mon Sep 17 00:00:00 2001
From: Laurent Peuch <cortex@worlddomination.be>
Date: Mon, 3 Sep 2018 06:36:41 +0200
Subject: [PATCH] [enh] modify individual job page when a job is deleted

---
 static/css/style.css |  4 ++--
 templates/job.html   | 13 ++++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 184b46d..9d37241 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -8,7 +8,7 @@
     padding-left: 1.5rem;
 }
 
-.deleted {
+.deleted * {
     font-style: italic;
-    color: darkgrey;
+    color: darkgrey !important;;
 }
\ No newline at end of file
diff --git a/templates/job.html b/templates/job.html
index 0faa4db..8142030 100644
--- a/templates/job.html
+++ b/templates/job.html
@@ -2,10 +2,13 @@
 
 <% block content %>
 <section class="section" id="job">
-    <div class="container">
-        <h1 class="title">Job '{{job.name}}'</h1>
+    <div class="container" v-bind:class="{deleted: job.deleted}">
+        <h1 class="title">
+            <span v-if="!job.deleted">Job '{{job.name}}'</span>
+            <span v-if="job.deleted"><s>Job '{{job.name}}'</s> DELETED</span>
+        </h1>
 
-        <div style="margin-bottom: 15px"><button class="button is-warning" v-on:click="cancelJob">Cancel job</button> </div>
+        <div style="margin-bottom: 15px" v-if="!job.deleted"><button class="button is-warning" v-on:click="cancelJob">Cancel job</button> </div>
 
         <table class="table is-bordered">
             <tr><th>State</th><td>{{job.state}}</td></tr>
@@ -58,7 +61,11 @@
             var action = message.action;
 
             if (action == "init_job" || action == "update_job") {
+                data.deleted = false;
                 app.job = data;
+            } else if (action == "delete_job") {
+                Vue.set(app.job, "deleted", true);
+                Vue.set(app.job, "state", "deleted");
             }
         };
     })()