wrong more-info for #mainPollutantSensor

[Mariusthvdb]

HI,

no matter what I try, the more-info for the #mainPollutantSensor is always what is configured for the #aplSensor directly above it.

I changed it a bit, to have the #mainPollutantSensor show for more-info in the Face, and have it like this now:

      // hard-coded version of click event
      card.querySelector('#face').addEventListener('click', event => {
        fireEvent(this, "hass-more-info", { entityId: aplSensor.config });
      }); 
      card.querySelector('#aqiSensor').addEventListener('click', event => {
        fireEvent(this, "hass-more-info", { entityId: aqiSensor.config });
      });
      card.querySelector('#aplSensor').addEventListener('click', event => {
       fireEvent(this, "hass-more-info", { entityId: aplSensor.config });
      });
      card.querySelector('#mainPollutantSensor').addEventListener('click', event => {
        fireEvent(this, "hass-more-info", { entityId: mainPollutantSensor.config });
      });

I can only see the #mainPollutantSensor more-info, if I also use it on the #aplsensor above. But, then both sensors show that same more-info...

Something isnt working as it should, and I can't find it in the code, which seems correct....

Please have a look?

btw added a bit of formatting, to have it look almost the same as the 'official' view on https://www.airvisual.com/

now showing as:

as said, clicking the PM2.5 field, now more-info's on Good....

btw, as you can see ive added the unit for the mainPollutantSensor, but Ive hardcoded it. Id like it to use the attributes.pollutant_unit of the sensor, but dont know (yet ) how to do that. Maybe have a go at that also, would really be neat.

      card_content += `
          </div>
          <div class="aqiSensor" id="aqiSensor" style="background-color: ${AQIbgColor[getAQI()]}; color: ${AQIfontColor[getAQI()]}">
            <div style="font-size:3em;">${aqiSensor.value}</div>
              AQI
          </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} | µg/m3
            </div>
          </div>
        </div>
      `

[dnguyen800]

Regarding the first issue--I also had that problem and wasn't able to resolve it. Maybe it has something to do with how the CSS grid items are ordered. Unfortunately I don't have time to investigate this further.

For the second issue--I did not realize that the pollutant unit was listed as an attribute! Thanks for pointing this out. I will add this feature later (no time this week), but if you want to do it yourself, you can call the attribute by using the following code:

const pollutantUnit = hass.states[mainPollutantSensor].attributes['pollutant_unit']

and then use ${pollutantUnit} instead of µg/m3

[Mariusthvdb]

thanks, done ;-) update

unfortunately this doesn't work as expected:

pollutant_unit is certainly there:

just for testing purposes I changed to

      const pollutantUnit = 'µg/m3';

and

      card_content += `
          </div>
          <div class="aqiSensor" id="aqiSensor" style="background-color: ${AQIbgColor[getAQI()]}; color: ${AQIfontColor[getAQI()]}">
            <div style="font-size:3em;">${aqiSensor.value}</div>
              AQI
          </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>
      `

and that shows the ${pollutantUnit} is correctly used. So must be the template variable, maybe a syntax error?

[dnguyen800]

I fixed it, will be in the next release soon (next hour). I forget I defined the mainPollutantSensor as an object, so it needs to be called a different way. You can check out the source code of the latest release for info.