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