Allow usage of model cards and model tabs outside of home page

[wuschi]

The problem

This feature request is created only for documentation purposes, as I already have implemented it and will create a pull request after some final testing.

Currently it is not possible to use the model cards (location / equipment / properties cards) and model tabs (locations / equipment / properties) outside of the home page.

I think it would be a great addition if usage of the model cards outside of the home page, as well as the model tabs on a custom tabbed page, would be possible.

Your suggestion

In my opinion, the main reason why this is currently not possible is that the model used for these tabs and cards is loaded by the vue components for the home page (home.vue and home-edit.vue). Loading the model on app initialization and putting it in the vuex store would allow usage of the model directly from the respective widgets.

I moved the code for loading the model to a new vuex store module and added some minor changes for avoiding circular references (parent and modelPatth properties in the model).

Below are some screenshots from my working implementation on a custom tabbed page:

Your environment

runtimeInfo:
  version: 4.2.0.M2
  buildString: Milestone Build
locale: de-DE
systemInfo:
  configFolder: /openhab/conf
  userdataFolder: /openhab/userdata
  logFolder: /openhab/userdata/logs
  javaVersion: 17.0.10
  javaVendor: Debian
  osName: Linux
  osVersion: 5.10.60-qnap
  osArchitecture: amd64
  availableProcessors: 4
  freeMemory: 186828672
  totalMemory: 426770432
  uptime: 501065
  startLevel: 100
addons:
  - binding-astro
  - binding-avmfritz
  - binding-hue
  - binding-ipp
  - binding-knx
  - binding-ntp
  - binding-openweathermap
  - binding-shelly
  - binding-smartmeter
  - binding-squeezebox
  - misc-homekit
  - persistence-rrd4j
  - transformation-map
  - ui-basic
  - ui-habpanel
clientInfo:
  device:
    ios: false
    android: false
    androidChrome: false
    desktop: true
    iphone: false
    ipod: false
    ipad: false
    edge: false
    ie: false
    firefox: false
    macos: true
    windows: false
    cordova: false
    phonegap: false
    electron: false
    nwjs: false
    webView: false
    webview: false
    standalone: false
    os: macos
    pixelRatio: 1
    prefersColorScheme: dark
  isSecureContext: true
  locationbarVisible: true
  menubarVisible: true
  navigator:
    cookieEnabled: true
    deviceMemory: 8
    hardwareConcurrency: 8
    language: de-DE
    languages:
      - de-DE
      - de
      - en-US
      - en
    onLine: true
    platform: MacIntel
  screen:
    width: 1920
    height: 1200
    colorDepth: 24
  support:
    touch: false
    pointerEvents: true
    observer: true
    passiveListener: true
    gestures: false
    intersectionObserver: true
  themeOptions:
    dark: dark
    filled: true
    pageTransitionAnimation: default
    bars: light
    homeNavbar: default
    homeBackground: default
    expandableCardAnimation: default
    blocklyRenderer: null
  userAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36
    (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
timestamp: 2024-05-23T09:24:54.428Z

Additional information

[wuschi]

btw.: does anybody know why the location card has a different height than the equipment and properties cars? Is it because of the badges? The ui looks a little bit odd when having these widgets on the same page (see first screenshot).

[wuschi]

For your reference, here is the yaml code for my tabbed page, as it is currently not yet possible to add the model tabs in the page designer:

tabs:
  - component: oh-tab
    config:
      icon: material:home
      page: page:overview
      title: Übersicht
    slots:
      default: []
  - component: oh-locations-tab
    config:
      title: Außen / Keller
      icon: material:place
      excludedCards:
        - gEG_Eingang
        - gEG_WC
        - gEG_Flur_Altbau
        - gEG_Lager
        - gEG_Kueche
        - gEG_Essen
        - gEG_Wohnen
        - gEG_Flur_Anbau
        - gEG_Gaeste
        - gEG_Buero
        - gEG_HWR
        - gOG_Flur
        - gOG_Elternbad
        - gOG_Kinderbad
        - gOG_Ankleide
        - gOG_Schlafen
        - gEG_Anbau
        - gEG
        - gEinfahrt
        - gGarten
        - gInnen
        - gOG
        - gTerrasse
        - gHof
      cardOrder:
        - gAussen
        - gGarage
        - gKG
  - component: oh-locations-tab
    config:
      title: Erdgeschoss
      icon: material:place
      excludedCards:
        - gOG_Flur
        - gOG_Elternbad
        - gOG_Kinderbad
        - gOG_Ankleide
        - gOG_Schlafen
        - gEG_Anbau
        - gEG
        - gEinfahrt
        - gGarten
        - gInnen
        - gOG
        - gTerrasse
        - gAussen
        - gHof
        - gGarage
        - gKG
      cardOrder:
        - gEG_Eingang
        - gEG_WC
        - separator: Altbau
        - gEG_Flur_Altbau
        - gEG_Lager
        - gEG_Kueche
        - gEG_Essen
        - gEG_Wohnen
        - separator: Anbau
        - gEG_Flur_Anbau
        - gEG_Gaeste
        - gEG_Buero
        - gEG_HWR
  - component: oh-locations-tab
    config:
      title: Obergeschoss
      icon: material:place
      excludedCards:
        - gEinfahrt
        - gAussen
        - gHof
        - gGarage
        - gKG
        - gEG_Eingang
        - gEG_Flur_Altbau
        - gEG_Flur_Anbau
        - gEG_WC
        - gEG_Lager
        - gEG_Kueche
        - gEG_Essen
        - gEG_Wohnen
        - gEG_Gaeste
        - gEG_Buero
        - gEG_HWR
      cardOrder:
        - gOG_Flur
        - gOG_Ankleide
        - gOG_Schlafen
        - separator: Bäder
        - gOG_Elternbad
        - gOG_Kinderbad
  - component: oh-equipment-tab
    config:
      title: Geräte
      icon: f7:cube_box_fill
  - component: oh-properties-tab
    config:
      title: Messwerte
      icon: f7:bolt_fill
      excludedCards:
        - Light
    slots:
      Current:
        - component: oh-property-card
          config:
            title: Stromverbrauch
      Opening:
        - component: oh-property-card
          config:
            title: Stellwerte