Add progress bar page for Buefy theme
This commit is contained in:
Lance Edgar
parent
8410419717
commit
01182ef752
190
tailbone/templates/themes/falafel/progress.mako
Normal file
190
tailbone/templates/themes/falafel/progress.mako
Normal file
|
|
@ -0,0 +1,190 @@
|
||||||
|
## -*- coding: utf-8; -*-
|
||||||
|
<%namespace file="/base.mako" import="core_javascript" />
|
||||||
|
<%namespace file="/base.mako" import="core_styles" />
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||||||
|
<title>${initial_msg or "Working"}...</title>
|
||||||
|
${core_javascript()}
|
||||||
|
${core_styles()}
|
||||||
|
</head>
|
||||||
|
<body style="height: 100%;">
|
||||||
|
|
||||||
|
<div id="whole-page-app">
|
||||||
|
<whole-page></whole-page>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/x-template" id="whole-page-template">
|
||||||
|
|
||||||
|
<section class="hero is-fullheight">
|
||||||
|
<div class="hero-body">
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div style="display: flex;">
|
||||||
|
<div style="flex-grow: 1;"></div>
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<p class="block">
|
||||||
|
{{ progressMessage }} ... {{ totalDisplay }}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="level">
|
||||||
|
|
||||||
|
<div class="level-item">
|
||||||
|
<b-progress size="is-large"
|
||||||
|
style="width: 400px;"
|
||||||
|
:max="progressMax"
|
||||||
|
:value="progressValue"
|
||||||
|
show-value
|
||||||
|
format="percent"
|
||||||
|
precision="0">
|
||||||
|
</b-progress>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
% if can_cancel:
|
||||||
|
<div class="level-item"
|
||||||
|
style="margin-left: 2rem;">
|
||||||
|
<b-button v-show="canCancel"
|
||||||
|
@click="cancelProgress()"
|
||||||
|
:disabled="cancelingProgress"
|
||||||
|
icon-pack="fas"
|
||||||
|
icon-left="ban">
|
||||||
|
{{ cancelingProgress ? "Canceling, please wait..." : "Cancel" }}
|
||||||
|
</b-button>
|
||||||
|
</div>
|
||||||
|
% endif
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="flex-grow: 1;"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
let WholePage = {
|
||||||
|
template: '#whole-page-template',
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
progressURL: '${url('progress', key=progress.key, _query={'sessiontype': progress.session.type})}',
|
||||||
|
progressMessage: "${(initial_msg or "Working").replace('"', '\\"')} (please wait)",
|
||||||
|
progressMax: null,
|
||||||
|
progressMaxDisplay: null,
|
||||||
|
progressValue: null,
|
||||||
|
stillInProgress: true,
|
||||||
|
|
||||||
|
% if can_cancel:
|
||||||
|
canCancel: true,
|
||||||
|
cancelURL: '${url('progress.cancel', key=progress.key, _query={'sessiontype': progress.session.type})}',
|
||||||
|
cancelingProgress: false,
|
||||||
|
% endif
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
totalDisplay() {
|
||||||
|
|
||||||
|
% if can_cancel:
|
||||||
|
if (!this.stillInProgress && !this.cancelingProgress) {
|
||||||
|
% else:
|
||||||
|
if (!this.stillInProgress) {
|
||||||
|
% endif
|
||||||
|
return "done!"
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.progressMaxDisplay) {
|
||||||
|
return `(${'$'}{this.progressMaxDisplay} total)`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
// fetch first progress data, one second from now
|
||||||
|
setTimeout(() => {
|
||||||
|
this.updateProgress()
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
updateProgress() {
|
||||||
|
|
||||||
|
this.$http.get(this.progressURL).then(response => {
|
||||||
|
|
||||||
|
if (response.data.error) {
|
||||||
|
// errors stop the show, we redirect to "cancel" page
|
||||||
|
location.href = '${cancel_url}'
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
if (response.data.complete || response.data.maximum) {
|
||||||
|
this.progressMessage = response.data.message
|
||||||
|
this.progressMaxDisplay = response.data.maximum_display
|
||||||
|
|
||||||
|
if (response.data.complete) {
|
||||||
|
this.progressValue = this.progressMax
|
||||||
|
this.stillInProgress = false
|
||||||
|
% if can_cancel:
|
||||||
|
this.canCancel = false
|
||||||
|
% endif
|
||||||
|
|
||||||
|
location.href = response.data.success_url
|
||||||
|
|
||||||
|
} else {
|
||||||
|
this.progressValue = response.data.value
|
||||||
|
this.progressMax = response.data.maximum
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.stillInProgress) {
|
||||||
|
|
||||||
|
// fetch progress data again, in one second from now
|
||||||
|
setTimeout(() => {
|
||||||
|
this.updateProgress()
|
||||||
|
}, 1000)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
% if can_cancel:
|
||||||
|
|
||||||
|
cancelProgress() {
|
||||||
|
|
||||||
|
if (confirm("Do you really wish to cancel this operation?")) {
|
||||||
|
|
||||||
|
this.cancelingProgress = true
|
||||||
|
this.stillInProgress = false
|
||||||
|
|
||||||
|
let params = {cancel_msg: ${json.dumps(cancel_msg)|n}}
|
||||||
|
this.$http.get(this.cancelURL, {params: params}).then(response => {
|
||||||
|
location.href = ${json.dumps(cancel_url)|n}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
% endif
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Vue.component('whole-page', WholePage)
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
el: '#whole-page-app'
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue