rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve modal progress dialog

Browse source 
I've tidied up the UI a bit here:
* The modal box stays open and must be explicitly closed.
  Pretty much everywhere we want to use this, it would be nice
  to see the final confirmation it's worked - so I have removed
  the line that closes it after the task completes.
* The progress bar no longer animates after the task has
  finished (logic previously didn't consider that state as the
  bar wasn't visible except while it was running).
* A helpful message is printed when the task completes or is
  cancelled.
This commit is contained in:
Richard Bowman 2024-01-08 16:23:20 +00:00
parent c0d25b194c
commit ec61019d76
1 changed files with 33 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

42
webapp/src/components/genericComponents/taskSubmitter.vue
View file

@ -6,10 +6,25 @@
<div v-if="taskStarted" ref="isPollingElement">
<div class="progress uk-margin-small">
<div
v-if="progress"
v-if="progress & (taskStatus == 'running')"
class="determinate"
:style="barWidthFromProgress"
></div>
<div
v-else-if="taskStatus == 'cancelled'"
class="determinate"
:style="barWidthFromProgress"
></div>
<div
v-else-if="taskStatus == 'completed'"
class="determinate"
style="width:100%"
></div>
<div
v-else-if="taskStatus == 'error'"
class="determinate"
style="width:0%"
></div>
<div v-else class="indeterminate"></div>
</div>
@ -48,19 +63,25 @@
{{ item.message }}
</div>
<div v-if="taskStatus == 'error'" class="uk-alert-danger">
The task failed due to an error - use the button below to close this
dialog.
The task failed due to an error. There may be more information in
the log.
</div>
<div v-if="taskStatus == 'cancelled'" class="uk-alert-primary">
The task was cancelled.
</div>
<div v-if="taskStatus == 'completed'" class="uk-alert-primary">
The task completed successfully.
</div>
</div>
<div id="progress-and-cancel-row">
<div class="stretchy">
<div class="progress uk-margin-small">
<div v-if="indeterminateProgressBar" class="indeterminate"></div>
<div
v-if="progress"
v-else
class="determinate"
:style="barWidthFromProgress"
></div>
<div v-else class="indeterminate"></div>
</div>
</div>
@ -162,6 +183,13 @@ export default {
var progress = this.progress <= 100 ? this.progress : 100;
var styleString = `width: ${progress}%`;
return styleString;
},
indeterminateProgressBar: function() {
if (this.taskStatus == "pending") return true;
if ((this.taskStatus == "running") & !this.progress) {
return true;
}
return false;
}
},
@ -266,10 +294,6 @@ export default {
if (this.selfUpdate) {
this.getFormData();
}
if (this.taskStatus != "error") {
// Leave the modal up if there was an error.
UIkit.modal(this.$refs.statusModal).hide();
}
}
},