Different URLs based on where you open homer

[Cyberbeni]

Is your feature request related to a problem? Please describe.

I'm accessing my homer dashboard from both my computer and my iOS/iPadOS devices from both my home network and through tailscale. It would be nice to have different urls based on those conditions.

Describe the solution you'd like

Links with same host and different port, so if I want to open HomeAssistant on port 8123, it uses either 192.168.x.y or myserver.tailscale.net as the host (whichever I'm using to access the page) and gets the rest of the url from the config. (relevant SO question I've found)

It would be also nice if iOS could have the deeplink to the iOS app for HomeAssistant ( https://home-assistant.io/ios/ ) and everywhere else would have the url for my local server. (And probably another configuration for Android)

Describe alternatives you've considered-

Additional context

[glebkrapivin]

+1

I have exactly the same request

[glebkrapivin]

@Cyberbeni

Hey!

I am by no means a js coder, but didn't wanna wait.

If you navigate to /src/components/Service.vue and add three lines (shown below), then docker build... - it would work :)

<template>
  <component :is="component" :item="item" :proxy="proxy"></component>
</template>

<script>
import {defineAsyncComponent} from "vue";
import Generic from "./services/Generic.vue";

export default {
  name: "Service",
  props: {
    item: Object,
    proxy: Object,
  },
  computed: {
    component() {

      const type = this.item.type || "Generic";
      if (type === "Generic") {
# -------------------------------- start here ------------------------------------
        if (this.item.url.startsWith('/') || this.item.url.startsWith(':')) {
          this.item.url = window.location.protocol + '//' + window.location.hostname + this.item.url
       }
# -------------------------------- end here -------------------------------------
        return Generic;
      }
      return defineAsyncComponent(() => import(`./services/${type}.vue`));
    },
  },
};
</script>