Change some logic for showing/hiding buttons

This commit is contained in:
Patrick Jentsch 2020-04-09 14:50:20 +02:00
parent ca333e29ee
commit b274fd1d20

View File

@ -4,7 +4,7 @@
<div class="col s12 m4"> <div class="col s12 m4">
<h3 id="title">{{ corpus.title }}</h3> <h3 id="title">{{ corpus.title }}</h3>
<p id="description">{{ corpus.description }}</p> <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="spinner-layer spinner-blue-only">
<div class="circle-clipper left"> <div class="circle-clipper left">
<div class="circle"></div> <div class="circle"></div>
@ -17,7 +17,7 @@
</div> </div>
</div> </div>
</div> </div>
<span class="chip status white-text" id="status"></span> <span class="chip status white-text hide" id="status"></span>
</div> </div>
<div class="col s12 m8"> <div class="col s12 m8">
@ -34,9 +34,9 @@
</div> </div>
</div> </div>
<div class="card-action right-align"> <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 %} {% 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 %} {% 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> <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> </div>
@ -160,24 +160,31 @@
} }
setStatus(status) { setStatus(status) {
let analyseBtn, progressIndicator, statusElement; let analyzeElement, buildElement, progressIndicatorElement, statusElement;
if (status != "preparable" && status != "preparing") { progressIndicatorElement = document.getElementById("progress-indicator");
progressIndicator = document.getElementById("progress-indicator"); if (["queued", "running", "start analysis"].includes(status)) {
progressIndicator.classList.add("hide"); progressIndicatorElement.classList.remove("hide");
} else {
progressIndicatorElement.classList.add("hide");
} }
statusElement = document.getElementById("status"); statusElement = document.getElementById("status");
statusElement.dataset.status = status; statusElement.dataset.status = status;
analyseBtn = document.getElementById('analyse'); statusElement.classList.remove("hide");
if (status === 'prepared' || status === 'analysing' || status === 'failed') {
analyseBtn.classList.remove('hide', 'disabled'); analyzeElement = document.getElementById("analyze");
} else if (status === 'start analysis' || status === 'stop analysis') { if (["analysing", "prepared", "start analysis"].includes(status)) {
analyseBtn.classList.remove('hide'); analyzeElement.classList.remove("disabled", "hide");
analyseBtn.classList.add('disabled'); } else {
analyzeElement.classList.add("disabled", "hide");
} }
buildElement = document.getElementById("build");
if (status === 'unprepared') { if (status === 'unprepared') {
var prepareBtn = document.getElementById('prepare'); buildElement.classList.remove("disabled", "hide");
prepareBtn.classList.remove('hide'); } else {
buildElement.classList.add("disabled", "hide");
} }
} }
} }