aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/services
diff options
context:
space:
mode:
authorBastien Wirtz <bastien.wirtz@gmail.com>2022-11-27 18:41:12 +0100
committerGitHub <noreply@github.com>2022-11-27 09:41:12 -0800
commit70f583c3e1d7c4bc1cca6b9c1cec6ca2e1f9e7b3 (patch)
tree4a81ec8383a9d6ee6b58138d2a5fd429c9161799 /src/components/services
parent98fe0a393970070fa04b5f37dbbb7a4c3ef82beb (diff)
downloadhomer-70f583c3e1d7c4bc1cca6b9c1cec6ca2e1f9e7b3.tar.gz
homer-70f583c3e1d7c4bc1cca6b9c1cec6ca2e1f9e7b3.tar.zst
homer-70f583c3e1d7c4bc1cca6b9c1cec6ca2e1f9e7b3.zip
Octoprint service (#324) (#560)v22.11.2
Add Octoprint service.
Diffstat (limited to 'src/components/services')
-rw-r--r--src/components/services/OctoPrint.vue108
1 files changed, 108 insertions, 0 deletions
diff --git a/src/components/services/OctoPrint.vue b/src/components/services/OctoPrint.vue
new file mode 100644
index 0000000..c5da8d9
--- /dev/null
+++ b/src/components/services/OctoPrint.vue
@@ -0,0 +1,108 @@
1<template>
2 <Generic :item="item" :title="state">
3 <template #content>
4 <p class="title is-4">{{ item.name }}</p>
5 <p class="subtitle is-6">
6 <template v-if="item.subtitle && !state">
7 {{ item.subtitle }}
8 </template>
9 <template v-if="!error && display == 'text'">
10 <i class="fa-solid fa-gear mr-1"></i>
11 <b v-if="completion">{{ completion.toFixed() }}%</b>
12 <span class="separator mx-1"> | </span>
13 <span v-if="printTime" :title="`${toTime(printTimeLeft)} left`">
14 <i class="fa-solid fa-stopwatch mr-1"></i>
15 {{ toTime(printTime) }}
16 </span>
17 </template>
18 <template v-if="!error && display == 'bar'">
19 <progress
20 v-if="completion"
21 class="progress is-primary"
22 :value="completion"
23 max="100"
24 :title="`${state} - ${completion.toFixed()}%, ${toTime(
25 printTimeLeft
26 )} left`"
27 >
28 {{ completion }}%
29 </progress>
30 </template>
31 <span v-if="error" :title="error">{{ error }}</span>
32 </p>
33 </template>
34 <template #indicator>
35 <i :class="['status', statusClass]" :title="state"></i>
36 </template>
37 </Generic>
38</template>
39
40<script>
41import service from "@/mixins/service.js";
42import Generic from "./Generic.vue";
43
44export default {
45 name: "OctoPrint",
46 mixins: [service],
47 props: {
48 item: Object,
49 },
50 components: {
51 Generic,
52 },
53 data: () => ({
54 printTime: null,
55 printTimeLeft: null,
56 completion: null,
57 state: null,
58 error: null,
59 }),
60 computed: {
61 statusClass: function () {
62 switch (this.state) {
63 case "Operational":
64 return "ready";
65 case "Offline":
66 return "offline";
67 case "Printing":
68 return "in-progress";
69 default:
70 return "pending";
71 }
72 },
73 },
74 created() {
75 this.display = this.item.display == "bar" ? this.item.display : "text";
76 this.fetchStatus();
77 },
78 methods: {
79 fetchStatus: async function () {
80 try {
81 const response = await this.fetch(`api/job?apikey=${this.item.apikey}`);
82 this.printTime = response.progress.printTime;
83 this.printTimeLeft = response.progress.printTimeLeft;
84 this.completion = response.progress.completion;
85 this.state = response.state;
86 this.error = response.error;
87 } catch (e) {
88 this.error = `Fail to fetch octoprint data (${e.message})`;
89 console.error(e);
90 }
91 },
92 toTime: function (timastamp) {
93 return new Date(timastamp * 1000).toTimeString().substring(0, 5);
94 },
95 },
96};
97</script>
98
99<style scoped lang="scss">
100.fa-triangle-exclamation::before {
101 color: #d65c68;
102}
103
104.progress {
105 height: 8px;
106 width: 90%;
107}
108</style>