feat: Add Gotify custom service component (#706)

This adds a new custom service component for Gotify, a system for
sending and receiving messages. The component will display the number of
messages outstanding as well as the overall system health.

Co-authored-by: Bastien Wirtz <[email protected]>

docs/customservices.md

@@ -42,6 +42,7 @@ within Homer:
 - [Jellystat](#jellystat)
 - [Home Assistant](#home-assistant)
 - [FreshRSS](#freshrss)
+- [Gotify](#gotify)
 
 > [!IMPORTANT]  
 > Using smart cards will probably requires
@@ -529,3 +530,16 @@ The FreshRSS service displays unread and subscriptions counts from your FreshRSS
   password: "<-- Your password -->"
   updateInterval: 5000 # (Optional) Interval (in ms) for updating the stats
 ```
+
+## Gotify
+
+The Gotify service will show the number of currently oustanding messages
+available as well as the overall health of the system.
+
+Note that `apikey` must be a client token, not an app token.
+
+```yaml
+- name: "Gotify"
+  type: "Gotify"
+  apikey: "<api_key>" # Client token to retrieve messages
+```

src/components/services/Gotify.vue

@@ -0,0 +1,105 @@
+<template>
+  <Generic :item="item">
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">
+        <template v-if="messages > 0">
+          <template v-if="messages > 100">100+</template>
+          <template v-else>{{ messages }}</template>
+          <template v-if="messages === 1"> message</template>
+          <template v-else> messages</template>
+        </template>
+      </p>
+    </template>
+    <template #indicator>
+      <div v-if="status" class="status" :class="status"></div>
+    </template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+export default {
+  name: "Gotify",
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  components: {
+    Generic,
+  },
+  data: () => ({
+    health:   {},
+    messages: 0,
+  }),
+  computed: {
+    status: function () {
+      const statuses = [this.health.health, this.health.database];
+
+      if (statuses.includes("red")) {
+        return "red";
+      } else if (statuses.includes("orange")) {
+        return "orange";
+      }
+
+      return "green";
+    }
+  },
+  created() {
+    this.fetchStatus();
+    this.fetchMessages();
+  },
+  methods: {
+    fetchStatus: async function () {
+      await this.fetch(`/health`)
+        .catch((e) => console.log(e))
+        .then((resp) => this.health = resp);
+    },
+    fetchMessages: async function () {
+      const headers = {
+        "X-Gotify-Key": this.item.apikey,
+      };
+      await this.fetch(`/message?limit=100`, { headers })
+        .catch((e) => console.log(e))
+        .then((resp) => this.messages = resp.messages.length);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.status {
+  font-size: 0.8rem;
+  color: var(--text-title);
+
+  &.green:before {
+    background-color: #94e185;
+    border-color: #78d965;
+    box-shadow: 0 0 5px 1px #94e185;
+  }
+
+  &.orange:before {
+    background-color: #ee863e;
+    border-color: #e77322;
+    box-shadow: 0 0 5px 1px #ee863e;
+  }
+
+  &.red:before {
+    background-color: #c9404d;
+    border-color: #c42c3b;
+    box-shadow: 0 0 5px 1px #c9404d;
+  }
+
+  &:before {
+    content: " ";
+    display: inline-block;
+    width: 7px;
+    height: 7px;
+    margin-right: 10px;
+    border: 1px solid #000;
+    border-radius: 7px;
+  }
+}
+</style>