37 lines
1.4 KiB
Vue
37 lines
1.4 KiB
Vue
|
<template>
|
||
|
<div class="row">
|
||
|
<div class="col-sm">
|
||
|
<h3>{{ job.title }} - {{ stageValue }}</h3>
|
||
|
<template v-if="job.progress">
|
||
|
<span class="text-center">{{ job.progress.name }} ({{ job.progress.percentage }}%)</span>
|
||
|
<div class="progress">
|
||
|
<div class="progress-bar bg-success" role="progressbar" :style="'width: ' + job.progress.percentage + '%'" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{ job.progress.percentage }}%</div>
|
||
|
</div>
|
||
|
<template v-if="job.progress.totalPercentage">
|
||
|
<span class="text-center">Total Progress ({{ job.progress.totalPercentage }}%)</span>
|
||
|
<div class="progress" v-if="job.progress.totalPercentage > 0">
|
||
|
<div class="progress-bar bg-success" role="progressbar" :style="'width: ' + job.progress.totalPercentage + '%'" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{ job.progress.totalPercentage }}%</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
</template>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
export default {
|
||
|
name: 'job',
|
||
|
props: [ 'job' ],
|
||
|
computed: {
|
||
|
stageValue: function() {
|
||
|
if (this.job.stage === 'rip') {
|
||
|
return 'Ripping';
|
||
|
} else if (this.job.stage === 'transcode') {
|
||
|
return 'Transcoding';
|
||
|
}
|
||
|
return 'Unknown: ' + this.job.stage;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|