From d04f90dee82f1f3c610eac5ea40ec9369b87d35b Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
Date: Tue, 5 Nov 2019 15:22:25 +0100
Subject: [PATCH] Add live colors to corpu sstatus

---
 app/static/js/CorpusList.js          |  5 +++++
 app/static/js/JobList.js             | 10 +++++++---
 app/templates/corpora/corpus.html.j2 | 11 ++++++++++-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/app/static/js/CorpusList.js b/app/static/js/CorpusList.js
index dc8fdfa4..5c52edf3 100644
--- a/app/static/js/CorpusList.js
+++ b/app/static/js/CorpusList.js
@@ -79,3 +79,8 @@ class CorpusList extends List {
     );
   }
 }
+CorpusList.STATUS_COLORS = {"unprepared": "grey",
+                            "preparable": "orange",
+                            "preparing": "yellow",
+                            "prepared": "green",
+                            "default": "red"};
diff --git a/app/static/js/JobList.js b/app/static/js/JobList.js
index fdcaddb7..a398c23b 100644
--- a/app/static/js/JobList.js
+++ b/app/static/js/JobList.js
@@ -113,7 +113,11 @@ JobList.SERVICE_COLORS = {"nlp": "blue",
 JobList.SERVICE_ICONS = {"nlp": "format_textdirection_l_to_r",
                          "ocr": "find_in_page",
                          "default": "help"};
-JobList.STATUS_COLORS = {"pending": "amber",
-                         "running": "indigo",
-                         "complete": "teal",
+JobList.STATUS_COLORS = {"submitted": "blue",
+                         "preparing": "light-blue",
+                         "pending": "orange",
+                         "running": "amber",
+                         "complete": "green",
+                         "stopping": "orange",
+                         "removing": "deep-orange",
                          "default": "red"};
diff --git a/app/templates/corpora/corpus.html.j2 b/app/templates/corpora/corpus.html.j2
index 89a2d49b..74ee82b5 100644
--- a/app/templates/corpora/corpus.html.j2
+++ b/app/templates/corpora/corpus.html.j2
@@ -1,10 +1,19 @@
 {% extends "limited_width.html.j2" %}
 
 {% block page_content %}
+<script>
+setStatus(status) {
+  var statusElement;
+  statusElement = document.getElementById("status");
+  statusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS));
+  statusElement.classList.add(CorpusList.STATUS_COLORS[status] || CorpusList.STATUS_COLORS['default']);
+  statusElement.innerText = status;
+}
+</script>
 <div class="col s12 m4">
   <h3 id="title">{{ corpus.title }}</h3>
   <p id="description">{{ corpus.description }}</p>
-  <a class="waves-effect waves-light btn">{{ corpus.status }}</a>
+  <a class="waves-effect waves-light btn" id="status">{{ corpus.status }}</a>
 </div>
 
 <div class="col s12 m8">