Habpanel

Hi,

Creating a habpanel widget that acts as a menu item for the page and I want to be able to change the colour of a menu item based on the dashboard that I’m on.

for example if I was on the ‘home’ dashboard then the background image for that table cell would be grey, while all the others are white. If I then clicked on a different menu item, let’s say ‘Kitchen’, when it loads the Kitchen dashboard the background image for the Kitchen table cell in grey and the ‘Home’ background image returns to white. That way the user can determine where they are on the panel quickly…very much like on a traditional website menu.

So, I know that each dashboard gives a different url, in this example my home and Kitchen ones are respectively;

http://openhabianpi:8080/habpanel/index.html#/view/Home
http://openhabianpi:8080/habpanel/index.html#/view/Kitchen

So, is there a way to get the code to detect the word after the last / in the URL and then I can code in an

<ng-if="end part of URL == ‘Home’ then class=grey button>
<ng-if="end part of URL == ‘Kitchen’ then class=grey button>

etc…

Any ideas anyone?

EDIT - Solved it myself…

<a class="your CSS class here" href="#/view/{{item.label}}">{{item.label}}</a>

Amazing what a bit of Gin does for the brain cells!

1 Like