]>
Commit | Line | Data |
---|---|---|
70f583c3 BW |
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> | |
6d2d9baf | 9 | <template v-if="!error && display == 'text' && statusClass == 'in-progress'"> |
70f583c3 BW |
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> | |
6d2d9baf ZR |
18 | <template v-if="!error && display == 'text' && statusClass == 'ready'"> |
19 | <i class="fa-solid fa-temperature-half mr-1"></i> | |
20 | <b v-if="printer.temperature.bed">{{ printer.temperature.bed.actual.toFixed() }} C</b> | |
21 | <span class="separator mx-1"> | </span> | |
22 | <b v-if="printer.temperature.tool0">{{ printer.temperature.tool0.actual.toFixed() }} C</b> | |
23 | </template> | |
70f583c3 BW |
24 | <template v-if="!error && display == 'bar'"> |
25 | <progress | |
26 | v-if="completion" | |
27 | class="progress is-primary" | |
28 | :value="completion" | |
29 | max="100" | |
30 | :title="`${state} - ${completion.toFixed()}%, ${toTime( | |
31 | printTimeLeft | |
32 | )} left`" | |
33 | > | |
34 | {{ completion }}% | |
35 | </progress> | |
36 | </template> | |
37 | <span v-if="error" :title="error">{{ error }}</span> | |
38 | </p> | |
39 | </template> | |
40 | <template #indicator> | |
41 | <i :class="['status', statusClass]" :title="state"></i> | |
42 | </template> | |
43 | </Generic> | |
44 | </template> | |
45 | ||
46 | <script> | |
47 | import service from "@/mixins/service.js"; | |
48 | import Generic from "./Generic.vue"; | |
49 | ||
50 | export default { | |
51 | name: "OctoPrint", | |
52 | mixins: [service], | |
53 | props: { | |
54 | item: Object, | |
55 | }, | |
56 | components: { | |
57 | Generic, | |
58 | }, | |
59 | data: () => ({ | |
60 | printTime: null, | |
61 | printTimeLeft: null, | |
62 | completion: null, | |
63 | state: null, | |
6d2d9baf | 64 | printer: null, |
70f583c3 BW |
65 | error: null, |
66 | }), | |
67 | computed: { | |
68 | statusClass: function () { | |
69 | switch (this.state) { | |
70 | case "Operational": | |
71 | return "ready"; | |
72 | case "Offline": | |
73 | return "offline"; | |
74 | case "Printing": | |
75 | return "in-progress"; | |
76 | default: | |
77 | return "pending"; | |
78 | } | |
79 | }, | |
80 | }, | |
81 | created() { | |
82 | this.display = this.item.display == "bar" ? this.item.display : "text"; | |
6d2d9baf | 83 | this.fetchPrinterStatus(); |
70f583c3 BW |
84 | this.fetchStatus(); |
85 | }, | |
86 | methods: { | |
87 | fetchStatus: async function () { | |
88 | try { | |
89 | const response = await this.fetch(`api/job?apikey=${this.item.apikey}`); | |
90 | this.printTime = response.progress.printTime; | |
91 | this.printTimeLeft = response.progress.printTimeLeft; | |
92 | this.completion = response.progress.completion; | |
93 | this.state = response.state; | |
94 | this.error = response.error; | |
95 | } catch (e) { | |
96 | this.error = `Fail to fetch octoprint data (${e.message})`; | |
97 | console.error(e); | |
98 | } | |
99 | }, | |
6d2d9baf ZR |
100 | fetchPrinterStatus: async function () { |
101 | try { | |
102 | const response = await this.fetch(`api/printer?apikey=${this.item.apikey}`); | |
103 | this.printer = response; | |
104 | this.error = response.error; | |
105 | } catch (e) { | |
106 | this.error = `Fail to fetch octoprint data (${e.message})`; | |
107 | console.error(e); | |
108 | } | |
109 | }, | |
70f583c3 BW |
110 | toTime: function (timastamp) { |
111 | return new Date(timastamp * 1000).toTimeString().substring(0, 5); | |
112 | }, | |
113 | }, | |
114 | }; | |
115 | </script> | |
116 | ||
117 | <style scoped lang="scss"> | |
118 | .fa-triangle-exclamation::before { | |
119 | color: #d65c68; | |
120 | } | |
121 | ||
122 | .progress { | |
123 | height: 8px; | |
124 | width: 90%; | |
125 | } | |
126 | </style> |