aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/services/OctoPrint.vue
blob: 1428d9a2a1f26b8d4e5c33b3320414e36efb9140 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<template>
  <Generic :item="item" :title="state">
    <template #content>
      <p class="title is-4">{{ item.name }}</p>
      <p class="subtitle is-6">
        <template v-if="item.subtitle && !state">
          {{ item.subtitle }}
        </template>
        <template v-if="!error && display == 'text' && statusClass == 'in-progress'">
          <i class="fa-solid fa-gear mr-1"></i>
          <b v-if="completion">{{ completion.toFixed() }}%</b>
          <span class="separator mx-1"> | </span>
          <span v-if="printTime" :title="`${toTime(printTimeLeft)} left`">
            <i class="fa-solid fa-stopwatch mr-1"></i>
            {{ toTime(printTime) }}
          </span>
        </template>
        <template v-if="!error && display == 'text' && statusClass == 'ready'">
          <i class="fa-solid fa-temperature-half mr-1"></i>
          <b v-if="printer.temperature.bed">{{ printer.temperature.bed.actual.toFixed() }} C</b>
          <span class="separator mx-1"> | </span>
          <b v-if="printer.temperature.tool0">{{ printer.temperature.tool0.actual.toFixed() }} C</b>
        </template>
        <template v-if="!error && display == 'bar'">
          <progress
            v-if="completion"
            class="progress is-primary"
            :value="completion"
            max="100"
            :title="`${state} - ${completion.toFixed()}%, ${toTime(
              printTimeLeft
            )} left`"
          >
            {{ completion }}%
          </progress>
        </template>
        <span v-if="error" :title="error">{{ error }}</span>
      </p>
    </template>
    <template #indicator>
      <i :class="['status', statusClass]" :title="state"></i>
    </template>
  </Generic>
</template>

<script>
import service from "@/mixins/service.js";
import Generic from "./Generic.vue";

export default {
  name: "OctoPrint",
  mixins: [service],
  props: {
    item: Object,
  },
  components: {
    Generic,
  },
  data: () => ({
    printTime: null,
    printTimeLeft: null,
    completion: null,
    state: null,
    printer: null,
    error: null,
  }),
  computed: {
    statusClass: function () {
      switch (this.state) {
        case "Operational":
          return "ready";
        case "Offline":
          return "offline";
        case "Printing":
          return "in-progress";
        default:
          return "pending";
      }
    },
  },
  created() {
    this.display = this.item.display == "bar" ? this.item.display : "text";
    this.fetchPrinterStatus();
    this.fetchStatus();
  },
  methods: {
    fetchStatus: async function () {
      try {
        const response = await this.fetch(`api/job?apikey=${this.item.apikey}`);
        this.printTime = response.progress.printTime;
        this.printTimeLeft = response.progress.printTimeLeft;
        this.completion = response.progress.completion;
        this.state = response.state;
        this.error = response.error;
      } catch (e) {
        this.error = `Fail to fetch octoprint data (${e.message})`;
        console.error(e);
      }
    },
    fetchPrinterStatus: async function () {
      try {
        const response = await this.fetch(`api/printer?apikey=${this.item.apikey}`);
        this.printer = response;
        this.error = response.error;
      } catch (e) {
        this.error = `Fail to fetch octoprint data (${e.message})`;
        console.error(e);
      }
    },
    toTime: function (timastamp) {
      return new Date(timastamp * 1000).toTimeString().substring(0, 5);
    },
  },
};
</script>

<style scoped lang="scss">
.fa-triangle-exclamation::before {
  color: #d65c68;
}

.progress {
  height: 8px;
  width: 90%;
}
</style>