in the lovelace custom card for the AQI, https://github.com/dnguyen800/air-visual-card by @dnguyen800 , I’m trying to add a navigate_path, and a url_path to the relevant air visual page for that city, but I don’t know the correct syntax for that, so seek some guidance here.
this is my current setup (note this is not the authors original, but already adapted by me, so all issues are on me 
):
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 });
});
and I d like the top card.querySelector for #city to point to an external url, configured in the card config
const webAddress = config.web_address || '';
what would I have to substitute the “hass-more-info”
card.querySelector('#city').addEventListener('click', event => {
fireEvent(this, "hass-more-info", {entityId: aqiSensor.config });
});
with to realize that?
on another selector, I’d like to change the hass-more-info to an internal HA instance navigate_path, but again, don’t know the syntax for that. Or if that is even possible.
Would anyone know how I could do so?
thanks for having a look!