upend/ui/src/components/Jobs.vue

71 lines
1.3 KiB
Vue

<template>
<transition-group name="fade">
<div class="job" v-for="job in activeJobs" :key="job.id">
<div class="job-label">{{ job.title }}</div>
<sl-progress-bar :percentage="job.progress"
>{{ Math.round(job.progress) }}%</sl-progress-bar
>
</div>
</transition-group>
</template>
<script lang="ts">
import { Job } from "@/types/base";
import { defineComponent } from "vue";
interface JobWithId extends Job {
id: string;
}
export default defineComponent({
name: "Jobs",
data: () => {
return {
jobs: {} as { [key: string]: Job },
};
},
computed: {
activeJobs(): JobWithId[] {
return Object.entries(this.jobs)
.filter(([_, job]) => job.state == "InProgress")
.map(([id, job]) => {
return { id, ...job };
});
},
},
mounted() {
setInterval(async () => {
let request = await fetch("/api/jobs");
this.jobs = await request.json();
}, 3333);
},
});
</script>
<style scoped lang="scss">
.job {
display: flex;
.job-label {
white-space: nowrap;
margin-right: 2em;
}
sl-progress-bar {
width: 100%;
}
}
</style>
<style lang="scss">
.fade-enter-active,
.fade-leave-active {
transition: all 1s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>