Custom card typescript formatNumber + localize.ts problem

Hello,

I can not either translate the result or convert it to a number depending on the language to use.

If it calls only 1 it works if there is a call for the 2 the card is no longer displayed

${(data.label || '') + (formatNumber(localize(`attributes_value.${value}`), this.hass!.locale) || value)}
  private renderAttribute(data: any): TemplateResult {
    if (!this.config.show_attributes) {
      return html``;
    }
      const stateObj = this.hass!.states[this.config!.entity];

      const computeFunc = data.compute || ((v: any) => v);
      const isValidAttribute = data && data.key in stateObj.attributes;
      const isValidEntityData = data && data.key in stateObj;

      const value = isValidAttribute
      ? computeFunc(stateObj.attributes[data.key]) + (data.unit || '')
      : isValidEntityData
          ? computeFunc(stateObj[data.key]) + (data.unit || '')
          : this.hass!.localize('state.default.unavailable');
      const attribute = html`<div>${data.icon && this.renderIcon(data)}${(data.label || '') + (formatNumber(localize(`attributes_value.${value}`), this.hass!.locale) || value)}</div>`;

      const hasDropdown = `${data.key}_list` in stateObj.attributes;

      return (hasDropdown && (isValidAttribute || isValidEntityData))
          ? this.renderDropdown(attribute, data.key)
          : attribute;
  }

It‘s JavaScript you are using, or ECMAScript or Typescript - but not Java.

1 Like

It proves my bad level.

Yes, it does.

Hello,
How to activate a click toogle show / hide div. Here is the piece of code where I want to put it.

When starting up my block is well hidden, I would like to make it visible on the click button and vice versa. In debug mode if I add a display: block at the level of it is displayed well

#hiddenscore {
  display:none;
}

In Render

              <ha-score id="hiddenscore">
                ${this.config.show.body ? html`
                <div>
                  ${Object.values(this.config.body).filter(v => v).map(this.renderBody.bind(this))}
                </div>` : null}
              </ha-score>

In render button

        renderButton(data) {
            return data && data.show !== false
                ? html`<ha-icon-button id="toggle"
                    @click="${() => this.callService(data.service, data.service_data)}"
                    icon="${data.icon}"
                    title="${data.label || ''}"
                    style="${this.config.styles.icon}"></ha-icon-button>`
                : null;
        }

My solution

input.divcheck { 
  display:none;
}
input.divcheck + div { 
  display:none;
}
input.divcheck:checked + div {
  display:block;
}
                ${this.config.show.buttons ? html`
                <label class="flex divcheck" for="hiddenscore">
                  ${Object.values(this.config.buttons).filter(v => v).map(this.renderButton.bind(this))}
                </label>` : null}
              </ha-scale>
              <input type="checkbox" class="divcheck" id="hiddenscore"/>
              <div class="hiddenscore">
                ${this.config.show.body ? html`
                <div class="score">
                  ${Object.values(this.config.body).filter(v => v).map(this.renderBody.bind(this))}
                </div>` : null}
              </div>

Next step to be able to add an entity by icon.
When you click it replaces the previous one

    const buttons = {
        user1: {
            label: 'User1',
            icon: 'mdi:alpha-u-circle',
        },
        user2: {
            show: false,
            label: 'User2',
            icon: 'mdi:alpha-u-circle',
        },
        user3: {
            show: false,
            label: 'User3',
            icon: 'mdi:alpha-u-circle',
        },
        user4: {
            show: false,
            label: 'User4',
            icon: 'mdi:alpha-u-circle',
        },
        user5: {
            show: false,
            label: 'User5',
            icon: 'mdi:alpha-u-circle',
        },
    };

If you have a lead

new help request

This is a new request if the others do not respond.
In my card I have a switch for which I wanted to assign the true to miscale2 and the false to miscale
Here is the code snippet:
editor.js

  get _model() {
    if (this._config) {
      return this._config.model || false;
    }

    return '';
  }
        <p class="option">
          <ha-switch
            aria-label=${localize(
              this._model
                ? 'editor.model_181B_off'
                : 'editor.model_181B_on'
            )}
            .checked=${this._model !== false}
            .configValue=${'model'}
            @change=${this._valueChanged}
          >
          </ha-switch>
          ${localize('editor.model')}
        </p>

card.js

  get model() {
    if (this.config.model === undefined) {
      return false;
    }

    return this.config.model;
  }

Each time I have
model: true
or
model: false
I would like
model: 181B
or
model: 181D

How to make formatNumber and localize coexist?

The problem occurs on numbers with decimal. Do you have an idea ?

The error is located at localize.ts

  let translated: string;
  try {
    translated = string.split('.').reduce((o, i) => o[i], languages[lang]);
  } catch (e) {
    translated = (string.split('.').reduce((o, i) => o[i], languages['en']) as unknown) as string;
  }

  if (translated === undefined)
    translated = (string.split('.').reduce((o, i) => o[i], languages['en']) as unknown) as string;

  if (search !== '' && replace !== '') {
    translated = translated.replace(search, replace);
  }
  return capitalized ? capitalizeFirstLetter(translated) : translated;
}

function capitalizeFirstLetter(string: any) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}
 export function localize(string: string, search = '', replace = ''): string {
  const section = string.split('.')[0];
  const key = string.split('.')[1];

  const lang = (localStorage.getItem('selectedLanguage') || navigator.language.split('-')[0] || 'en')
    .replace(/['"]+/g, '')
    .replace('-', '_');
  let translated: string;

  try {
    translated = languages[lang][section][key];
  } catch (e) {
    translated = languages['en'][section][key];
  }

  if (translated === undefined) translated = languages['en'][section][key];

  if (search !== '' && replace !== '') {
    translated = translated.replace(search, replace);
  }
  return translated;
}