Feature/local port custom service

docs/customservices.md

@@ -10,6 +10,7 @@ within Homer:
 
 - [Custom Services](#custom-services)
   - [Common options](#common-options)
+  - [GenericWithPort](#genericwithport)
   - [PiHole](#pihole)
   - [OpenWeatherMap](#openweathermap)
   - [Medusa](#medusa)
@@ -51,6 +52,17 @@ If you experiencing any issue, please have a look to the [troubleshooting](troub
   type: "<type>"
 ```
 
+## GenericWithPort
+Is shown as a generic service, but you can specify an additional port where the service is running, in case there is no DNS for the domain or reverse proxy for this service.
+A link to access this service via port is added to which the browser is redirected based on the base url where the user accessed homer.
+```yaml
+- name: "My Service"
+  logo: "assets/tools/sample.png"
+  url: "http://my-service.domain"
+  port: <my-port>
+  type: "GenericWithPort"
+```
+
 ## PiHole
 
 Using the PiHole service you can display info about your local PiHole instance right on your Homer dashboard.
@@ -479,4 +491,4 @@ You need to set the type to HomeAssistant, provide an api key and enable cors on
   separator: " " # optional, how to separate items
 ```
 To create an API token on HomeAssistant, follow the [official documentation here](https://developers.home-assistant.io/docs/auth_api/#long-lived-access-token).  
-To enable cors on HomeAssistant, edit your `configuration.yml` and add the IP of Homer to `https: cors_allowed_origins`
+To enable cors on HomeAssistant, edit your `configuration.yml` and add the IP of Homer to `https: cors_allowed_origins`

src/components/services/GenericWithPort.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="is-multiline layout-vertical">
+    <div
+      class="card"
+      :style="`background-color:${item.background};`"
+      :class="item.class"
+    >
+      <a :href="item.url" :target="item.target" rel="noreferrer">
+        <div class="card-content">
+          <div :class="mediaClass">
+            <slot name="icon">
+              <div v-if="item.logo" class="media-left">
+                <figure class="image is-48x48">
+                  <img :src="item.logo" :alt="`${item.name} logo`" />
+                </figure>
+              </div>
+              <div v-if="item.icon" class="media-left">
+                <figure class="image is-48x48">
+                  <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
+                </figure>
+              </div>
+            </slot>
+            <div class="media-content">
+              <slot name="content">
+                <p class="title is-4">{{ item.name }}</p>
+                <p class="subtitle is-6" v-if="item.subtitle">
+                  {{ item.subtitle }}
+                </p>
+              </slot>
+            </div>
+            <slot name="indicator" class="indicator"></slot>
+          </div>
+          <div class="tag" :class="item.tagstyle" v-if="item.tag">
+            <strong class="tag-text">#{{ item.tag }}</strong>
+          </div>
+        </div>
+      </a>
+      <footer class="card-footer" v-if="item.port">
+        <a
+          href="/" :target="item.target"
+          @click="onClickPort"
+          @mouseover="onMouseoverPort"
+          rel="noreferrer"
+          class="card-footer-item"
+        >:{{ item.port }}</a>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "GenericWithPort",
+  props: {
+    item: Object,
+  },
+  computed: {
+    mediaClass: function () {
+      return { media: true, "no-subtitle": !this.item.subtitle };
+    },
+  },
+  methods: {
+    onMouseoverPort: function(event){
+      event.target.port = this.item.port;
+    },
+    onClickPort: function(event){
+      event.target.port = this.item.port;
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.media-left {
+  .image {
+    display: flex;
+    align-items: center;
+  }
+
+  img {
+    max-height: 100%;
+    object-fit: contain;
+  }
+}
+</style>