add external Air-visual navigate to click on City

[Mariusthvdb]

please consider adding the option to navigate to an external web-address, suggest the air_visual address of the station. I've added this to the card:

      card.querySelector('#city').addEventListener('click', event => {
        fireEvent(this, "navigate", { entityId: webAddress.config });
      });

and

      const webAddress = {name: 'webAddress', config: config.web_address || '';

not sure what the action name for 'navigate' should be though.

in the card config, I've added:

web_address: https://www.airvisual.com/netherlands/north-brabant/huijbergen/huijbergen-vennekenstraat

obviously this doesn't work, since the action is incorrect. Also the click on city doesn't yet work for any more-info, apparently this code is not yet as it should be....sorry, hope you get the idea.

please have a look? thanks!

[Mariusthvdb]

have you given this any thought yet? would really be very nice to add.

I've put forward all info I could think of, but can't get the click to result in a navigate... should we use has-navigate maybe? And how to have it point to the desired web-address? Hope you could help and find out please.

[dnguyen800]

Sorry, don't have any time to look at this until the holidays. I wouldn't know how to implement this Ina good way except by applying html tag to the item. Even with that, can't guarantee that solution will work with the mobile apps so it's not really a priority for me.

Get Outlook for Androidhttps://aka.ms/ghei36

---

From: Marius notifications@github.com Sent: Wednesday, December 11, 2019 3:46:12 AM To: dnguyen800/air-visual-card air-visual-card@noreply.github.com Cc: Subscribed subscribed@noreply.github.com Subject: Re: [dnguyen800/air-visual-card] add external Air-visual navigate to click on City (#8)

have you given this any thought yet? would really be very nice to add.

I've put forward all info I could think of, but can't get the click to result in a navigate... should we use has-navigate maybe? And how to have it point to the desired web-address? Hope you could help and find out please.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/dnguyen800/air-visual-card/issues/8?email_source=notifications&email_token=AF7WLS6K3SAF65YPBKXFJD3QYDHIJA5CNFSM4JB7KGQ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEGS2RUY#issuecomment-564504787, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AF7WLSZYFURJKTMCSSYY2JTQYDHIJANCNFSM4JB7KGQQ.

[Mariusthvdb]

ok cool, no hurry ;-)

just to let you know I've tried this also, (have the city and temp show a more-info), so I have a working functionality for the City and Temp click.

Only need to change the action (fireEvent) to external url_path and what also would be nice would be a local Ha navigate_path, so we could let's say go to the path for the weather page, clicking on the Temp icon ;-)

      let faceHTML = ``;

      let card_content = `
        <div class="grid-container" style="background-color: ${AQIbgColor[getAQI()]};">
        `;
      if (!hideTitle) {
        card_content += `
        <div class="city" id="city">${city}</div>
        <div class="temp" id="temp"><ha-icon icon="${hass.states[iconSensor].state}"></ha-icon> ${tempValue}</div>
        `;
      }

      card_content += `
          <div class="face" id="face" style="background-color: ${AQIfaceColor[getAQI()]};">
            <img src="${iconDirectory}/ic-face-${getAQI()}.svg"></img>
          </div>
          <div class="aqiSensor" id="aqiSensor" style="background-color: ${AQIbgColor[getAQI()]}; color: ${AQIfontColor[getAQI()]}">
            <div style="font-size:3em;">${aqiSensor.value}</div>
            ${country} ${unitOfMeasurement}
          </div>
          <div class="aplSensor" id="aplSensor" style="background-color: ${AQIbgColor[getAQI()]}; color: ${AQIfontColor[getAQI()]}">
            ${aplSensor.value}
            <br>
            <br>
            <div class="mainPollutantSensor" id="mainPollutantSensor">
              ${mainPollutantSensor.value} | ${pollutantUnit}
            </div>
          </div>
        </div> 
      `;

      root.lastChild.hass = hass;
      root.getElementById('content').innerHTML = card_content;

      // hard-coded version of click event
      card.querySelector('#city').addEventListener('click', event => {
        fireEvent(this, "hass-more-info", {entityId: aqiSensor.config });
      });
      card.querySelector('#temp').addEventListener('click', event => {
        fireEvent(this, "hass-more-info", { entityId: aplSensor.config });
      });
      card.querySelector('#face').addEventListener('click', event => {   // when selecting HTML id, do not use dash '-'  
        fireEvent(this, "hass-more-info", { entityId: aplSensor.config });
      });     
      card.querySelector('#aqiSensor').addEventListener('click', event => {   // when selecting HTML id, do not use dash '-'  
        fireEvent(this, "hass-more-info", { entityId: aqiSensor.config });
      });
      card.querySelector('#aplSensor').addEventListener('click', event => {   // when selecting HTML id, do not use dash '-'  
       fireEvent(this, "hass-more-info", { entityId: mainPollutantSensor.config });
      });
      card.querySelector('#mainPollutantSensor').addEventListener('click', event => {   // when selecting HTML id, do not use dash '-'  
        fireEvent(this, "hass-more-info", { entityId: mainPollutantSensor.config });
      });

anyways, would be really cool if the navigate/url would be allowed somehow. Especially since we can do that now natively in HA for entitities:

https://www.home-assistant.io/lovelace/entities/#navigation_path https://www.home-assistant.io/lovelace/entities/#url_path

[Mariusthvdb]

HI! are you still developing this card, so I could hope to see this feature some day? If not, I'd be happy to try myself, if you could only guide to applying the html tag and where to put it in the code.

Or, simply by allowing the tap/hold action of the core Ha code maybe? anyways, thanks for considering.

I never figured out how to do this, so can't help you, sorry.

[Swampen]

@Mariusthvdb If you want to add this to your own card, you can do it by adding this:

card.querySelector('#city').addEventListener('click', event => {
    window.open(webAddress, '_blank');
});

But I personally would not want to add this feature as it navigates to websites outside the HA environment.

[Mariusthvdb]

thanks, I will try! Can we modify this to navigate to another view too? (have a view with all climate settings I would like to hold-click to...)

I understand what you say on navigating outside th HA environment. Thats why it might be even better if the card would implement the core configuration variables for navigation_path And url_path

[Mariusthvdb]

to keep thing tidy, allow this separate post.

Ive added the constant:

const urlPath = {name: 'urlPath', config: config.url_path || '' };

and in the card config:

url_path: https://www.airvisual.com/netherlands/north-brabant/huijbergen/huijbergen-vennekenstraat

in the final card_content, I've added:

      card.querySelector('#city').addEventListener('click', event => {
        window.open(urlPath, '_blank');
      });

something is openend on the click, but it leads to https://mydomain.duckdns.org:port/lovelace/[object%20Object]

so, though progress, Im not there yet....

please have another look?

btw, I always notice horrible lags after a few clicks on the cards more-info actions. Most of the time we need to completely reload the browser window for HA to become responsive again. Might be a separate issue, but thought Id mention it here too, because happening again.

[Swampen]

I don't think there is any easy way to implement the existing features of some lovelace cards. I might be adding it if I decide to rewrite the card.

To fix your navigation, just use

// Change to this
const urlPath = config.url_path || '' ;
//or this
card.querySelector('#city').addEventListener('click', event => {
  window.open(urlPath.config, '_blank');
});

[Mariusthvdb]

Bingo! using the 2nd option.

found out that www.airvisual.com is now redirected to www.iqair.com. And, they now have a station in my municipality ;-) so, using

type: custom:air-visual-card
air_pollution_level: sensor.u_s_air_pollution_level
air_quality_index: sensor.u_s_air_quality_index
main_pollutant: sensor.u_s_main_pollutant
temp: sensor.plugwise_outdoor_temperature
country: NL
city: Roosendaal
icons: /local/weather/aqi_icons/
icon_sensor: sensor.weather_icon
hide_title: false
hide_face: false
url_path: https://www.iqair.com/netherlands/north-brabant/roosendaal

results in:

clicking 'Roosendaal' opens:

so cool, many thanks!

[Mariusthvdb]

re-comment on this. Unfortunately, after updastin g to the latest version (18) today and adding my personal edit from above discussion:

      // hard-coded version of click event
      card.querySelector('#city').addEventListener('click', event => {
        window.open(urlPath.config, '_blank');
      });

the navigate doesn't work anymore, as in no effect, nothing happening. I must admit I haven't tested that in the previous HA version (now using the September beta 2021.9.0b6), so maybe it was already dysfunctional before.

would you please have a look what could be causing this? Really liked the navigate to the source material on a click.

And yes, before you ask, I did also add the identifier on city (and temp):

      if (!hideTitle) {
        card_content += `
        <div class="city" id="city" style="background-color: ${AQIbgColor[getAQI()]};">${city}</div>
        <div class="temp" id="temp" style="background-color: ${AQIbgColor[getAQI()]};"><ha-icon icon="${weatherIcons[currentCondition]}"></ha-icon>   ${tempValue}</div>
        `;
      }

and the link is live and providing up to date info.

UPDATE:

never mind the above, I forgot to add the urlPatrh const.

2021-09-01 10:05:38 ERROR (MainThread) [frontend.js.latest.202108300] https://ipaddress/local/lovelace/resources/air-visual-card/air-visual-card.js?v=0.0.18+:385:28 ReferenceError: Can't find variable: urlPath

in the logs....

added

      const urlPath = {name: 'urlPath', config: config.url_path || '' };

and all is working once again.

sorry for the confusion.