2 <Generic :item="item" :title="state">
4 <p class="title is-4">{{ item.name }}</p>
5 <p class="subtitle is-6">
6 <template v-if="item.subtitle && !state">
10 v-if="!error && display == 'text' && statusClass == 'in-progress'"
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) }}
20 <template v-if="!error && display == 'text' && statusClass == 'ready'">
21 <i class="fa-solid fa-temperature-half mr-1"></i>
22 <b v-if="printer.temperature.bed"
23 >{{ printer.temperature.bed.actual.toFixed() }} C</b
25 <span class="separator mx-1"> | </span>
26 <b v-if="printer.temperature.tool0"
27 >{{ printer.temperature.tool0.actual.toFixed() }} C</b
30 <template v-if="!error && display == 'bar'">
33 class="progress is-primary"
36 :title="`${state} - ${completion.toFixed()}%, ${toTime(
43 <span v-if="error" :title="error">{{ error }}</span>
47 <i :class="['status', statusClass]" :title="state"></i>
53 import service from "@/mixins/service.js";
54 import Generic from "./Generic.vue";
74 statusClass: function () {
88 this.display = this.item.display == "bar" ? this.item.display : "text";
89 this.fetchPrinterStatus();
93 fetchStatus: async function () {
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;
102 this.error = `Fail to fetch octoprint data (${e.message})`;
106 fetchPrinterStatus: async function () {
108 const response = await this.fetch(
109 `api/printer?apikey=${this.item.apikey}`,
111 this.printer = response;
112 this.error = response.error;
114 this.error = `Fail to fetch octoprint data (${e.message})`;
118 toTime: function (timastamp) {
119 return new Date(timastamp * 1000).toTimeString().substring(0, 5);
125 <style scoped lang="scss">
126 .fa-triangle-exclamation::before {