Fixed OctoPrint ‘text’ display when idle. (#607)

* Added moonraker support and temperature when idle

* removed config change

* Delete package-lock.json

docs/customservices.md

@@ -31,7 +31,7 @@ within Homer:
   - [Speedtest Tracker](#SpeedtestTracker)
   - [What's Up Docker](#whats-up-docker)
   - [SABnzbd](#sabnzbd)
-  - [OctoPrint](#sabnzbd)
+  - [OctoPrint](#octoprint)
   - [Tdarr](#tdarr)
 
 If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md) page.
@@ -384,15 +384,17 @@ the "Config" > "General" section of the SABnzbd config in the SABnzbd web UI.
   downloadInterval: 5000 # (Optional) Interval (in ms) for updating the download count
 ```
 
-## OctoPrint
+## OctoPrint/Moonraker
 
-The OctoPrint service only needs an `apikey` & `url` and optionally a `display` option.
+The OctoPrint/Moonraker service only needs an `apikey` & `endpoint` and optionally a `display` or `url` option. `url` can be used when you click on the service it will launch the `url`
+
+Moonraker's API mimmicks a few of OctoPrint's endpoints which makes these services compatible. See https://moonraker.readthedocs.io/en/latest/web_api/#octoprint-api-emulation for details.
 
 ```yaml
 - name: "Octoprint"
   logo: "https://cdn-icons-png.flaticon.com/512/3112/3112529.png"
-  apikey: "xxxxxxxxxxxx" # insert your own API key here. Request one from https://openweathermap.org/api.
+  apikey: "xxxxxxxxxxxx" # insert your own API key here.
-  url: "http://192.168.0.151:8080"
+  endpoint: "http://192.168.0.151:8080"
   display: "text" # 'text' or 'bar'. Default to `text`.
   type: "OctoPrint"
 ```

dummy-data/octoprint/api/printer

@@ -0,0 +1,27 @@
+{
+    "temperature": {
+        "bed": {
+            "actual": 20.52,
+            "offset": 0,
+            "target": 0.0
+        },
+        "tool0": {
+            "actual": 20.44,
+            "offset": 0,
+            "target": 0.0
+        }
+    },
+    "state": {
+        "text": "Operational",
+        "flags": {
+            "operational": true,
+            "paused": false,
+            "printing": false,
+            "cancelling": false,
+            "pausing": false,
+            "error": false,
+            "ready": true,
+            "closedOrError": false
+        }
+    }
+}

src/components/services/OctoPrint.vue

@@ -6,7 +6,7 @@
         <template v-if="item.subtitle && !state">
           {{ item.subtitle }}
         </template>
-        <template v-if="!error && display == 'text'">
+        <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>
@@ -15,6 +15,12 @@
             {{ 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"
@@ -55,6 +61,7 @@ export default {
     printTimeLeft: null,
     completion: null,
     state: null,
+    printer: null,
     error: null,
   }),
   computed: {
@@ -73,6 +80,7 @@ export default {
   },
   created() {
     this.display = this.item.display == "bar" ? this.item.display : "text";
+    this.fetchPrinterStatus();
     this.fetchStatus();
   },
   methods: {
@@ -89,6 +97,16 @@ export default {
         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);
     },