web/src/components/Job.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>