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

Show indeterminate progress as soon as action is requested

Browse source
This commit is contained in:
Joel Collins 2020-07-22 16:40:46 +01:00
parent 72293627b7
commit 76664363dc
1 changed files with 11 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

15
openflexure_microscope/api/static/src/components/genericComponents/taskSubmitter.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div class="uk-margin-remove uk-padding-remove"> <div class="uk-margin-remove uk-padding-remove">
<div v-if="taskRunning" ref="isPollingElement"> <div v-if="taskStarted" ref="isPollingElement">
<div class="progress uk-margin-small"> <div class="progress uk-margin-small">
<div <div
v-if="progress" v-if="progress"
@ -11,7 +11,7 @@
</div> </div>
<button <button
v-if="canTerminate" v-if="canTerminate && taskRunning"
type="button" type="button"
class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1" class="uk-button uk-button-danger uk-margin-remove uk-float-right uk-width-1-1"
@click="terminateTask()" @click="terminateTask()"
@ -23,7 +23,7 @@
<div> <div>
<button <button
type="button" type="button"
:hidden="taskRunning" :hidden="taskStarted"
class="uk-button uk-margin-remove uk-width-1-1" class="uk-button uk-margin-remove uk-width-1-1"
:class="[buttonPrimary ? 'uk-button-primary' : 'uk-button-default']" :class="[buttonPrimary ? 'uk-button-primary' : 'uk-button-default']"
@click="bootstrapTask()" @click="bootstrapTask()"
@ -92,6 +92,7 @@ export default {
taskId: null, taskId: null,
polling: null, polling: null,
progress: null, progress: null,
taskStarted: false,
taskRunning: false taskRunning: false
}; };
}, },
@ -140,6 +141,8 @@ export default {
this.$emit("submit", this.submitData); this.$emit("submit", this.submitData);
// Send a request to start a task // Send a request to start a task
console.log("Submitting to ", this.submitUrl); console.log("Submitting to ", this.submitUrl);
this.taskStarted = true;
this.$emit("taskStarted", this.taskId);
axios axios
.post(this.submitUrl, this.submitData) .post(this.submitUrl, this.submitData)
// Get the returned Task ID // Get the returned Task ID
@ -149,10 +152,13 @@ export default {
this.taskId = response.data.id; this.taskId = response.data.id;
// Start the store polling TaskId for success // Start the store polling TaskId for success
this.taskRunning = true; this.taskRunning = true;
this.$emit("taskStarted", this.taskId); this.$emit("taskRunning", this.taskId);
// Return the poll-task promise (starts polling the task) // Return the poll-task promise (starts polling the task)
return this.pollTask(this.taskId, this.pollInterval); return this.pollTask(this.taskId, this.pollInterval);
}) })
.catch(() => {
this.taskStarted = false;
})
.then(response => { .then(response => {
// Do something with the final response // Do something with the final response
console.log("Emitting onResponse: ", response); console.log("Emitting onResponse: ", response);
@ -171,6 +177,7 @@ export default {
console.log("Cleaning up after task."); console.log("Cleaning up after task.");
// Reset taskRunning and taskId // Reset taskRunning and taskId
this.taskRunning = false; this.taskRunning = false;
this.taskStarted = false;
this.taskId = null; this.taskId = null;
// Update the form data if we're self-updating // Update the form data if we're self-updating
if (this.selfUpdate) { if (this.selfUpdate) {