Change some logic for showing/hiding buttons

app/templates/corpora/corpus.html.j2

@@ -4,7 +4,7 @@
 <div class="col s12 m4">
   <h3 id="title">{{ corpus.title }}</h3>
   <p id="description">{{ corpus.description }}</p>
-  <div class="active preloader-wrapper small" id="progress-indicator">
+  <div class="active preloader-wrapper small hide" id="progress-indicator">
     <div class="spinner-layer spinner-blue-only">
       <div class="circle-clipper left">
         <div class="circle"></div>
@@ -17,7 +17,7 @@
       </div>
     </div>
   </div>
-  <span class="chip status white-text" id="status"></span>
+  <span class="chip status white-text hide" id="status"></span>
 </div>
 
 <div class="col s12 m8">
@@ -34,9 +34,9 @@
       </div>
     </div>
     <div class="card-action right-align">
-      <a href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}" class="btn hide waves-effect waves-light" id="analyse"><i class="material-icons left">help</i>Analyse</a>
+      <a href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}" class="btn disabled hide waves-effect waves-light" id="analyze"><i class="material-icons left">search</i>Analyze</a>
       {% if corpus.files[0] is defined %}
-      <a href="{{ url_for('corpora.prepare_corpus', corpus_id=corpus.id) }}" class="btn waves-effect waves-light hide" id="prepare"><i class="material-icons left">whatshot</i>Build Corpus</a>
+      <a href="{{ url_for('corpora.prepare_corpus', corpus_id=corpus.id) }}" class="btn disabled hide waves-effect waves-light" id="build"><i class="material-icons left">build</i>Build</a>
       {% endif %}
       <a data-target="delete-corpus-modal" class="btn modal-trigger red waves-effect waves-light"><i class="material-icons left">delete</i>Delete</a>
     </div>
@@ -160,24 +160,31 @@
     }
 
     setStatus(status) {
-      let analyseBtn, progressIndicator, statusElement;
+      let analyzeElement, buildElement, progressIndicatorElement, statusElement;
 
-      if (status != "preparable" && status != "preparing") {
-        progressIndicator = document.getElementById("progress-indicator");
-        progressIndicator.classList.add("hide");
+      progressIndicatorElement = document.getElementById("progress-indicator");
+      if (["queued", "running", "start analysis"].includes(status)) {
+        progressIndicatorElement.classList.remove("hide");
+      } else {
+        progressIndicatorElement.classList.add("hide");
       }
+
       statusElement = document.getElementById("status");
       statusElement.dataset.status = status;
-      analyseBtn = document.getElementById('analyse');
-      if (status === 'prepared' || status === 'analysing' || status === 'failed') {
-        analyseBtn.classList.remove('hide', 'disabled');
-      } else if (status === 'start analysis' || status === 'stop analysis') {
-        analyseBtn.classList.remove('hide');
-        analyseBtn.classList.add('disabled');
+      statusElement.classList.remove("hide");
+
+      analyzeElement = document.getElementById("analyze");
+      if (["analysing", "prepared", "start analysis"].includes(status)) {
+        analyzeElement.classList.remove("disabled", "hide");
+      } else {
+        analyzeElement.classList.add("disabled", "hide");
       }
+
+      buildElement = document.getElementById("build");
       if (status === 'unprepared') {
-        var prepareBtn = document.getElementById('prepare');
-        prepareBtn.classList.remove('hide');
+        buildElement.classList.remove("disabled", "hide");
+      } else {
+        buildElement.classList.add("disabled", "hide");
       }
     }
   }