cbd8b090ec
I've changed tasksubmitter to accept a "thing" and "action" rather than a single URL. This seems more in keeping with propertyControl, and eliminates the need for loads of computed properties. I've also deleted (rather than just commenting out) chunks of the web app that are no longer in use. These may be reinstated in the future - but we can get them from git history. It's less confusing not to have vestigial code in the repo. This builds OK but is not, as yet, tested with hardware.
161 lines
2.9 KiB
Vue
161 lines
2.9 KiB
Vue
<template>
|
|
<div class="progress uk-margin-small">
|
|
<div v-if="indeterminateProgressBar" class="indeterminate"></div>
|
|
<div v-else class="determinate" :style="barWidthFromProgress"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "ActionProgressBar",
|
|
|
|
props: {
|
|
progress: {
|
|
type: Number,
|
|
required: false,
|
|
default: null
|
|
},
|
|
taskStatus: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
barWidthFromProgress: function() {
|
|
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;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "../../assets/less/theme.less";
|
|
|
|
.progress {
|
|
position: relative;
|
|
height: 5px;
|
|
display: block;
|
|
width: 100%;
|
|
background-color: rgba(180, 180, 180, 0.15);
|
|
border-radius: 2px;
|
|
background-clip: padding-box;
|
|
margin: 0.5rem 0 1rem 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress .determinate {
|
|
position: absolute;
|
|
background-color: inherit;
|
|
top: 0;
|
|
bottom: 0;
|
|
transition: width 0.3s linear;
|
|
}
|
|
|
|
.progress .indeterminate,
|
|
.progress .determinate {
|
|
background-color: @global-primary-background;
|
|
}
|
|
|
|
.hook-inverse() {
|
|
.progress .indeterminate,
|
|
.progress .determinate {
|
|
background-color: @inverse-primary-muted-color;
|
|
}
|
|
}
|
|
|
|
.progress .indeterminate:before {
|
|
content: "";
|
|
position: absolute;
|
|
background-color: inherit;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
will-change: left, right;
|
|
-webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
|
|
infinite;
|
|
animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
|
}
|
|
|
|
.progress .indeterminate:after {
|
|
content: "";
|
|
position: absolute;
|
|
background-color: inherit;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
will-change: left, right;
|
|
-webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
|
|
infinite;
|
|
animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
|
|
infinite;
|
|
-webkit-animation-delay: 1.15s;
|
|
animation-delay: 1.15s;
|
|
}
|
|
|
|
@-webkit-keyframes indeterminate {
|
|
0% {
|
|
left: -35%;
|
|
right: 100%;
|
|
}
|
|
60% {
|
|
left: 100%;
|
|
right: -90%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
right: -90%;
|
|
}
|
|
}
|
|
@keyframes indeterminate {
|
|
0% {
|
|
left: -35%;
|
|
right: 100%;
|
|
}
|
|
60% {
|
|
left: 100%;
|
|
right: -90%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
right: -90%;
|
|
}
|
|
}
|
|
@-webkit-keyframes indeterminate-short {
|
|
0% {
|
|
left: -200%;
|
|
right: 100%;
|
|
}
|
|
60% {
|
|
left: 107%;
|
|
right: -8%;
|
|
}
|
|
100% {
|
|
left: 107%;
|
|
right: -8%;
|
|
}
|
|
}
|
|
@keyframes indeterminate-short {
|
|
0% {
|
|
left: -200%;
|
|
right: 100%;
|
|
}
|
|
60% {
|
|
left: 107%;
|
|
right: -8%;
|
|
}
|
|
100% {
|
|
left: 107%;
|
|
right: -8%;
|
|
}
|
|
}
|
|
</style>
|