src/components/services/OctoPrint.vue

   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>
  41 import service from "@/mixins/service.js";
  42 import Generic from "./Generic.vue";
  43
  44 export 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>