Add Traefik, Wallabag, Olivetin (#838)

* Add Traefik, Wallabag, Olivetin

* allow subtitle override

* add dummy data for olivetin, traefik, wallabag

docs/customservices.md

@@ -28,6 +28,7 @@ within Homer:
 - [Medusa](#medusa)
 - [Nextcloud](#nextcloud)
 - [OctoPrint / Moonraker](#octoprintmoonraker)
+- [Olivetin](#olivetin)
 - [OpenHAB](#openhab)
 - [OpenWeatherMap](#openweathermap)
 - [PaperlessNG](#paperlessng)
@@ -45,7 +46,9 @@ within Homer:
 - [Speedtest Tracker](#speedtesttracker)
 - [Tautulli](#tautulli)
 - [Tdarr](#tdarr)
+- [Traefik](#traefik)
 - [Uptime Kuma](#uptime-kuma)
+- [Wallabag](#wallabag)
 - [What's Up Docker](#whats-up-docker)
 
 > [!IMPORTANT]  
@@ -307,6 +310,17 @@ Moonraker's API mimmicks a few of OctoPrint's endpoints which makes these servic
   type: "OctoPrint"
 ```
 
+## Olivetin
+
+This service displays a version string instead of a subtitle. Example configuration:
+
+```yaml
+- name: Olivetin
+  type: Olivetin
+  logo: assets/tools/sample.png
+  url: https://olivetin.example.com
+```
+
 ## OpenHAB
 
 You need to set the type to OpenHAB, provide an api key and enable cors on OpenHAB.
@@ -594,6 +608,17 @@ for transcoding on your Tdarr instance as well as the number of errored items.
   checkInterval: 5000 # (Optional) Interval (in ms) for updating the queue & error counts
 ```
 
+## Traefik
+
+This service displays a version string instead of a subtitle. Example configuration:
+
+```yaml
+- name: Traefik
+  type: Traefik
+  logo: assets/tools/sample.png
+  url: http://traefik.example.com
+```
+
 ## Uptime Kuma
 
 Using the Uptime Kuma service you can display info about your instance uptime right on your Homer dashboard.
@@ -609,6 +634,17 @@ The following configuration is available for the UptimeKuma service. Needs v1.13
   type: "UptimeKuma"
 ```
 
+## Wallabag
+
+This service displays a version string instead of a subtitle. Example configuration:
+
+```yaml
+- name: Wallabag
+  type: Wallabag
+  logo: assets/tools/sample.png
+  url: https://wallabag.example.com
+```
+
 ## What's up Docker
 
 What's up Docker allow to display info about the number of container running and the number for which an update is available on your Homer dashboard.

dummy-data/olivetin/webUiSettings.json

@@ -0,0 +1,18 @@
+{
+    "Rest": "./api/",
+    "ShowFooter": true,
+    "ShowNavigation": true,
+    "ShowNewVersions": true,
+    "AvailableVersion": "none",
+    "CurrentVersion": "2024.11.24",
+    "PageTitle": "OliveTin",
+    "SectionNavigationStyle": "sidebar",
+    "DefaultIconForBack": "«",
+    "SshFoundKey": "not found at /home/user/.ssh/id_rsa",
+    "SshFoundConfig": "not found at /home/user/.ssh/config",
+    "EnableCustomJs": false,
+    "AuthLoginUrl": "",
+    "AuthLocalLogin": false,
+    "AuthOAuth2Providers": null,
+    "AdditionalLinks": null
+}

dummy-data/traefik/api/version

@@ -0,0 +1,5 @@
+{
+    "Version": "3.1.7",
+    "Codename": "comte",
+    "startDate": "2024-11-20T05:55:46.259506879Z"
+}

dummy-data/wallabag/api/version

@@ -0,0 +1 @@
+"2.6.10"

src/components/services/Olivetin.vue

@@ -0,0 +1,87 @@
+<template>
+  <Generic :item="item">
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">
+        <template v-if="item.subtitle">
+          {{ item.subtitle }}
+        </template>
+        <template v-else-if="versionstring">
+          Version {{ versionstring }}
+        </template>
+      </p>
+    </template>
+    <template #indicator>
+      <div v-if="status" class="status" :class="status">
+        {{ status }}
+      </div>
+    </template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+export default {
+  name: "Olivetin",
+  components: {
+    Generic,
+  },
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  data: () => ({
+    status: null,
+    versionstring: null,
+  }),
+  created() {
+    this.fetchStatus();
+  },
+  methods: {
+    fetchStatus: async function () {
+      this.fetch("/webUiSettings.json")
+        .then((response) => {
+          this.status = "online";
+          this.versionstring = response.CurrentVersion;
+        })
+        .catch((e) => {
+          this.status = "offline";
+          console.log(e);
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.status {
+  font-size: 0.8rem;
+  color: var(--text-title);
+  white-space: nowrap;
+  margin-left: 0.25rem;
+
+  &.online:before {
+    background-color: #94e185;
+    border-color: #78d965;
+    box-shadow: 0 0 5px 1px #94e185;
+  }
+
+  &.offline: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>

src/components/services/Traefik.vue

@@ -0,0 +1,92 @@
+<template>
+  <Generic :item="item">
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">
+        <template v-if="item.subtitle">
+          {{ item.subtitle }}
+        </template>
+        <template v-else-if="versionstring">
+          Version {{ versionstring }}
+        </template>
+      </p>
+    </template>
+    <template #indicator>
+      <div v-if="status" class="status" :class="status">
+        {{ status }}
+      </div>
+    </template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+export default {
+  name: "Traefik",
+  components: {
+    Generic,
+  },
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  data: () => ({
+    fetchOk: null,
+    versionstring: null,
+  }),
+  computed: {
+    status: function () {
+      return this.fetchOk ? "online" : "offline";
+    },
+  },
+  created() {
+    this.fetchStatus();
+  },
+  methods: {
+    fetchStatus: async function () {
+      this.fetch("/api/version")
+        .then((response) => {
+          this.fetchOk = true;
+          this.versionstring = response.Version;
+        })
+        .catch((e) => {
+          this.fetchOk = false;
+          console.log(e);
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.status {
+  font-size: 0.8rem;
+  color: var(--text-title);
+  white-space: nowrap;
+  margin-left: 0.25rem;
+
+  &.online:before {
+    background-color: #94e185;
+    border-color: #78d965;
+    box-shadow: 0 0 5px 1px #94e185;
+  }
+
+  &.offline: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>

src/components/services/Wallabag.vue

@@ -0,0 +1,87 @@
+<template>
+  <Generic :item="item">
+    <template #content>
+      <p class="title is-4">{{ item.name }}</p>
+      <p class="subtitle is-6">
+        <template v-if="item.subtitle">
+          {{ item.subtitle }}
+        </template>
+        <template v-else-if="versionstring">
+          Version {{ versionstring }}
+        </template>
+      </p>
+    </template>
+    <template #indicator>
+      <div v-if="status" class="status" :class="status">
+        {{ status }}
+      </div>
+    </template>
+  </Generic>
+</template>
+
+<script>
+import service from "@/mixins/service.js";
+import Generic from "./Generic.vue";
+
+export default {
+  name: "Wallabag",
+  components: {
+    Generic,
+  },
+  mixins: [service],
+  props: {
+    item: Object,
+  },
+  data: () => ({
+    status: null,
+    versionstring: null,
+  }),
+  created() {
+    this.fetchStatus();
+  },
+  methods: {
+    fetchStatus: async function () {
+      this.fetch("/api/version")
+        .then((response) => {
+          this.status = "online";
+          this.versionstring = response;
+        })
+        .catch((e) => {
+          this.status = "offline";
+          console.log(e);
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.status {
+  font-size: 0.8rem;
+  color: var(--text-title);
+  white-space: nowrap;
+  margin-left: 0.25rem;
+
+  &.online:before {
+    background-color: #94e185;
+    border-color: #78d965;
+    box-shadow: 0 0 5px 1px #94e185;
+  }
+
+  &.offline: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>