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;
}
m0wlheld
(Christoph Dahlen)
May 7, 2021, 9:31pm
2
It‘s JavaScript you are using, or ECMAScript or Typescript - but not Java.
1 Like
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
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;
}