jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor out our localize custom variant (#743)

Browse Source
This commit is contained in:
Adam Mills 2017-12-19 09:18:50 -05:00 committed by GitHub
parent af8f77779b
commit c8c21e6fac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 67 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
js/common/util/compute_state_display.js
View File

@ -3,17 +3,17 @@ import formatDateTime from './format_date_time.js';
import formatDate from './format_date.js';
import formatTime from './format_time.js';
export default function computeStateDisplay(haLocalize, stateObj, language) {
export default function computeStateDisplay(localize, stateObj, language) {
if (!stateObj._stateDisplay) {
const domain = computeStateDomain(stateObj);
if (domain === 'binary_sensor') {
// Try device class translation, then default binary sensor translation
if (stateObj.attributes.device_class) {
stateObj._stateDisplay =
haLocalize(`state.${domain}.${stateObj.attributes.device_class}`, stateObj.state);
localize(`state.${domain}.${stateObj.attributes.device_class}.${stateObj.state}`);
}
if (!stateObj._stateDisplay) {
stateObj._stateDisplay = haLocalize(`state.${domain}.default`, stateObj.state);
stateObj._stateDisplay = localize(`state.${domain}.default.${stateObj.state}`);
}
} else if (stateObj.attributes.unit_of_measurement) {
stateObj._stateDisplay = stateObj.state + ' ' + stateObj.attributes.unit_of_measurement;
@ -43,16 +43,16 @@ export default function computeStateDisplay(haLocalize, stateObj, language) {
}
} else if (domain === 'zwave') {
if (['initializing', 'dead'].includes(stateObj.state)) {
stateObj._stateDisplay = haLocalize('state.zwave.query_stage', stateObj.state, 'query_stage', stateObj.attributes.query_stage);
stateObj._stateDisplay = localize(`state.zwave.query_stage.${stateObj.state}`, 'query_stage', stateObj.attributes.query_stage);
} else {
stateObj._stateDisplay = haLocalize('state.zwave.default', stateObj.state);
stateObj._stateDisplay = localize(`state.zwave.default.${stateObj.state}`);
}
} else {
stateObj._stateDisplay = haLocalize(`state.${domain}`, stateObj.state);
stateObj._stateDisplay = localize(`state.${domain}.${stateObj.state}`);
}
// Fall back to default or raw state if nothing else matches.
stateObj._stateDisplay = stateObj._stateDisplay
|| haLocalize('state.default', stateObj.state) || stateObj.state;
|| localize(`state.default.${stateObj.state}`) || stateObj.state;
}
return stateObj._stateDisplay;

8
panels/shopping-list/ha-panel-shopping-list.html
View File

@ -66,7 +66,7 @@
<app-header slot="header" fixed>
<app-toolbar>
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
<div main-title>[[haLocalize('panel', 'shopping_list')]]</div>
<div main-title>[[localize('panel.shopping_list')]]</div>
<ha-start-voice-button hass='[[hass]]' can-listen='{{canListen}}'></ha-start-voice-button>
<paper-menu-button
horizontal-align="right"
@ -80,7 +80,7 @@
<paper-listbox slot="dropdown-content">
<paper-item
on-tap="_clearCompleted"
>[[haLocalize('ui.panel.shopping-list', 'clear_completed')]]</paper-item>
>[[localize('ui.panel.shopping-list.clear_completed')]]</paper-item>
</paper-listbox>
</paper-menu-button>
</app-toolbar>
@ -97,7 +97,7 @@
<paper-item-body>
<paper-input
id='addBox'
placeholder="[[haLocalize('ui.panel.shopping-list', 'add_item')]]"
placeholder="[[localize('ui.panel.shopping-list.add_item')]]"
on-keydown='_addKeyPress'
no-label-float
></paper-input>
@ -124,7 +124,7 @@
</template>
</paper-card>
<div class='tip' hidden$='[[!canListen]]'>
[[haLocalize('ui.panel.shopping-list', 'microphone_tip')]]
[[localize('ui.panel.shopping-list.microphone_tip')]]
</div>
</div>
</app-header-layout>

6
src/cards/ha-entities-card.html
View File

@ -72,17 +72,17 @@ class HaEntitiesCard extends
groupEntity: Object,
title: {
type: String,
computed: 'computeTitle(states, groupEntity, haLocalize)',
computed: 'computeTitle(states, groupEntity, localize)',
},
};
}
computeTitle(states, groupEntity, haLocalize) {
computeTitle(states, groupEntity, localize) {
if (groupEntity) {
return window.hassUtil.computeStateName(groupEntity).trim();
}
const domain = window.hassUtil.computeDomain(states[0]);
return (haLocalize && haLocalize('domain', domain)) || domain.replace(/_/g, ' ');
return (localize && localize(`domain.${domain}`)) || domain.replace(/_/g, ' ');
}
computeTitleClass(groupEntity) {

8
src/cards/ha-media_player-card.html
View File

@ -153,7 +153,7 @@
<div class='caption'>
[[computeStateName(stateObj)]]
<div class='title'>[[computePrimaryText(haLocalize, playerObj)]]</div>
<div class='title'>[[computePrimaryText(localize, playerObj)]]</div>
[[playerObj.secondaryTitle]]<br />
</div>
</div>
@ -310,10 +310,10 @@ class HaMediaPlayerCard extends
return new window.MediaPlayerEntity(hass, stateObj);
}
computePrimaryText(haLocalize, playerObj) {
computePrimaryText(localize, playerObj) {
return playerObj.primaryTitle
|| haLocalize('state.media_player', playerObj.stateObj.state)
|| haLocalize('state.default', playerObj.stateObj.state) || playerObj.stateObj.state;
|| localize(`state.media_player.${playerObj.stateObj.state}`)
|| localize(`state.default.${playerObj.stateObj.state}`) || playerObj.stateObj.state;
}
computePlaybackControlIcon(playerObj) {

6
src/components/entity/ha-state-label-badge.html
View File

@ -40,7 +40,7 @@
value='[[computeValue(state)]]'
icon='[[computeIcon(state)]]'
image='[[computeImage(state)]]'
label='[[computeLabel(haLocalize, state)]]'
label='[[computeLabel(localize, state)]]'
description='[[computeDescription(state)]]'
></ha-label-badge>
</template>
@ -137,14 +137,14 @@ class HaStateLabelBadge extends
return state.attributes.entity_picture || null;
}
computeLabel(haLocalize, state) {
computeLabel(localize, state) {
const domain = window.hassUtil.computeDomain(state);
if (state.state === 'unavailable' ||
['device_tracker', 'alarm_control_panel'].includes(domain)) {
// Localize the state with a special state_badge namespace, which has variations of
// the state translations that are truncated to fit within the badge label. Translations
// are only added for device_tracker and alarm_control_panel.
return haLocalize(`state_badge.${domain}`, state.state) || haLocalize('state_badge.default', state.state) || state.state;
return localize(`state_badge.${domain}.${state.state}`) || localize(`state_badge.default.${state.state}`) || state.state;
}
return state.attributes.unit_of_measurement || null;
}

24
src/components/ha-sidebar.html
View File

@ -104,53 +104,53 @@
<paper-listbox attr-for-selected='data-panel' selected='[[hass.panelUrl]]'>
<paper-icon-item on-tap='menuClicked' data-panel='states'>
<iron-icon slot="item-icon" icon='mdi:apps'></iron-icon>
<span class='item-text'>[[haLocalize('panel', 'states')]]</span>
<span class='item-text'>[[localize('panel.states')]]</span>
</paper-icon-item>
<template is='dom-repeat' items='[[panels]]'>
<paper-icon-item on-tap='menuClicked' data-panel$='[[item.url_path]]'>
<iron-icon slot="item-icon" icon='[[item.icon]]'></iron-icon>
<span class='item-text'>[[computePanelName(haLocalize, item)]]</span>
<span class='item-text'>[[computePanelName(localize, item)]]</span>
</paper-icon-item>
</template>
<paper-icon-item on-tap='menuClicked' data-panel='logout' class='logout'>
<iron-icon slot="item-icon" icon='mdi:exit-to-app'></iron-icon>
<span class='item-text'>[[haLocalize('ui.sidebar', 'log_out')]]</span>
<span class='item-text'>[[localize('ui.sidebar.log_out')]]</span>
</paper-icon-item>
</paper-listbox>
<div>
<div class='divider'></div>
<div class='subheader'>[[haLocalize('ui.sidebar', 'developer_tools')]]</div>
<div class='subheader'>[[localize('ui.sidebar.developer_tools')]]</div>
<div class='dev-tools layout horizontal justified'>
<paper-icon-button
icon='mdi:remote' data-panel='dev-service'
alt="[[haLocalize('panel', 'dev-services')]]" title="[[haLocalize('panel', 'dev-services')]]"
alt="[[localize('panel.dev-services')]]" title="[[localize('panel.dev-services')]]"
on-tap='menuClicked'></paper-icon-button>
<paper-icon-button
icon='mdi:code-tags' data-panel='dev-state'
alt="[[haLocalize('panel', 'dev-states')]]" title="[[haLocalize('panel', 'dev-states')]]"
alt="[[localize('panel.dev-states')]]" title="[[localize('panel.dev-states')]]"
on-tap='menuClicked'></paper-icon-button>
<paper-icon-button
icon='mdi:radio-tower' data-panel='dev-event'
alt="[[haLocalize('panel', 'dev-events')]]" title="[[haLocalize('panel', 'dev-events')]]"
alt="[[localize('panel.dev-events')]]" title="[[localize('panel.dev-events')]]"
on-tap='menuClicked'></paper-icon-button>
<paper-icon-button
icon='mdi:file-xml' data-panel='dev-template'
alt="[[haLocalize('panel', 'dev-templates')]]" title="[[haLocalize('panel', 'dev-templates')]]"
alt="[[localize('panel.dev-templates')]]" title="[[localize('panel.dev-templates')]]"
on-tap='menuClicked'></paper-icon-button>
<template is='dom-if' if='[[_mqttLoaded(hass)]]'>
<paper-icon-button
icon='mdi:altimeter' data-panel='dev-mqtt'
alt="[[haLocalize('panel', 'dev-mqtt')]]" title="[[haLocalize('panel', 'dev-mqtt')]]"
alt="[[localize('panel.dev-mqtt')]]" title="[[localize('panel.dev-mqtt')]]"
on-tap='menuClicked'></paper-icon-button>
</template>
<paper-icon-button
icon='mdi:information-outline' data-panel='dev-info'
alt="[[haLocalize('panel', 'dev-info')]]" title="[[haLocalize('panel', 'dev-info')]]"
alt="[[localize('panel.dev-info')]]" title="[[localize('panel.dev-info')]]"
on-tap='menuClicked'></paper-icon-button>
</div>
</div>
@ -189,8 +189,8 @@ class HaSidebar extends
return hass.config.core.components.indexOf('mqtt') !== -1;
}
computePanelName(haLocalize, panel) {
return haLocalize('panel', panel.title) || panel.title;
computePanelName(localize, panel) {
return localize(`panel.${panel.title}`) || panel.title;
}
computePanels(hass) {

6
src/state-summary/state-card-display.html
View File

@ -22,7 +22,7 @@
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
<div class='state'>[[computeStateDisplay(haLocalize, stateObj, language)]]</div>
<div class='state'>[[computeStateDisplay(localize, stateObj, language)]]</div>
</div>
</template>
</dom-module>
@ -42,8 +42,8 @@ class StateCardDisplay extends window.hassMixins.LocalizeMixin(Polymer.Element)
};
}
computeStateDisplay(haLocalize, stateObj, language) {
return window.hassUtil.computeStateDisplay(haLocalize, stateObj, language);
computeStateDisplay(localize, stateObj, language) {
return window.hassUtil.computeStateDisplay(localize, stateObj, language);
}
}
customElements.define(StateCardDisplay.is, StateCardDisplay);

8
src/state-summary/state-card-media_player.html
View File

@ -38,7 +38,7 @@
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
<div class='state'>
<div class='main-text' take-height$='[[!playerObj.secondaryTitle]]'>[[computePrimaryText(haLocalize, playerObj)]]</div>
<div class='main-text' take-height$='[[!playerObj.secondaryTitle]]'>[[computePrimaryText(localize, playerObj)]]</div>
<div class='secondary-text'>[[playerObj.secondaryTitle]]</div>
</div>
</div>
@ -68,10 +68,10 @@ class StateCardMediaPlayer extends window.hassMixins.LocalizeMixin(Polymer.Eleme
return new window.MediaPlayerEntity(hass, stateObj);
}
computePrimaryText(haLocalize, playerObj) {
computePrimaryText(localize, playerObj) {
return playerObj.primaryTitle
|| haLocalize('state.media_player', playerObj.stateObj.state)
|| haLocalize('state.default', playerObj.stateObj.state) || playerObj.stateObj.state;
|| localize(`state.media_player.${playerObj.stateObj.state}`)
|| localize(`state.default.${playerObj.stateObj.state}`) || playerObj.stateObj.state;
}
}
customElements.define(StateCardMediaPlayer.is, StateCardMediaPlayer);

13
src/util/hass-mixins.html
View File

@ -79,7 +79,10 @@ window.hassMixins.NavigateMixin = Polymer.dedupingMixin(superClass =>
}
});
/* @polymerMixin */
/**
* @polymerMixin
* @appliesMixin Polymer.AppLocalizeBehavior
*/
window.hassMixins.LocalizeMixin = Polymer.dedupingMixin(superClass =>
class extends Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior], superClass) {
static get properties() {
@ -93,10 +96,6 @@ window.hassMixins.LocalizeMixin = Polymer.dedupingMixin(superClass =>
type: Object,
computed: 'computeResources(hass)',
},
haLocalize: {
type: Function,
computed: 'computeHaLocalize(localize)',
},
};
}
@ -107,10 +106,6 @@ window.hassMixins.LocalizeMixin = Polymer.dedupingMixin(superClass =>
computeResources(hass) {
return hass && hass.resources;
}
computeHaLocalize(localize) {
return (namespace, message, ...args) => localize(namespace + '.' + message, ...args);
}
});
</script>

46
test-mocha/common/util/compute_state_display.js
View File

@ -3,9 +3,9 @@ import { assert } from 'chai';
import computeStateDisplay from '../../../js/common/util/compute_state_display';
describe('computeStateDisplay', () => {
const haLocalize = function (namespace, message, ...args) {
const localize = function (message, ...args) {
// Mock Localize function for testing
return namespace + '.' + message + (args.length ? ': ' + args.join(',') : '');
return message + (args.length ? ': ' + args.join(',') : '');
};
it('Localizes binary sensor defaults', () => {
@ -15,7 +15,7 @@ describe('computeStateDisplay', () => {
attributes: {
},
};
assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'state.binary_sensor.default.off');
assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'state.binary_sensor.default.off');
});
it('Localizes binary sensor device class', () => {
@ -26,13 +26,13 @@ describe('computeStateDisplay', () => {
device_class: 'moisture',
},
};
assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'state.binary_sensor.moisture.off');
assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'state.binary_sensor.moisture.off');
});
it('Localizes binary sensor invalid device class', () => {
const altHaLocalize = function (namespace, message, ...args) {
if (namespace === 'state.binary_sensor.invalid_device_class') return null;
return haLocalize(namespace, message, ...args);
const altLocalize = function (message, ...args) {
if (message === 'state.binary_sensor.invalid_device_class.off') return null;
return localize(message, ...args);
};
const stateObj = {
entity_id: 'binary_sensor.test',
@ -41,7 +41,7 @@ describe('computeStateDisplay', () => {
device_class: 'invalid_device_class',
},
};
assert.strictEqual(computeStateDisplay(altHaLocalize, stateObj, 'en'), 'state.binary_sensor.default.off');
assert.strictEqual(computeStateDisplay(altLocalize, stateObj, 'en'), 'state.binary_sensor.default.off');
});
it('Localizes sensor value with units', () => {
@ -52,7 +52,7 @@ describe('computeStateDisplay', () => {
unit_of_measurement: 'm',
},
};
assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), '123 m');
assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), '123 m');
});
it('Localizes input_datetime with full date time', () => {
@ -70,7 +70,7 @@ describe('computeStateDisplay', () => {
second: 13,
},
};
assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'November 18, 2017, 11:12 AM');
assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'November 18, 2017, 11:12 AM');
});
it('Localizes input_datetime with date', () => {
@ -88,7 +88,7 @@ describe('computeStateDisplay', () => {
second: 13,
},
};
assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'November 18, 2017');
assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'November 18, 2017');
});
it('Localizes input_datetime with time', () => {
@ -106,7 +106,7 @@ describe('computeStateDisplay', () => {
second: 13,
},
};
assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), '11:12 AM');
assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), '11:12 AM');
});
it('Localizes zwave ready', () => {
@ -117,7 +117,7 @@ describe('computeStateDisplay', () => {
query_stage: 'Complete',
},
};
assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'state.zwave.default.ready');
assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'state.zwave.default.ready');
});
it('Localizes zwave initializing', () => {
@ -128,7 +128,7 @@ describe('computeStateDisplay', () => {
query_stage: 'Probe',
},
};
assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'state.zwave.query_stage.initializing: query_stage,Probe');
assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'state.zwave.query_stage.initializing: query_stage,Probe');
});
it('Localizes cover open', () => {
@ -138,13 +138,13 @@ describe('computeStateDisplay', () => {
attributes: {
},
};
assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'state.cover.open');
assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'state.cover.open');
});
it('Localizes unavailable', () => {
const altHaLocalize = function (namespace, message, ...args) {
if (namespace === 'state.sensor') return null;
return haLocalize(namespace, message, ...args);
const altLocalize = function (message, ...args) {
if (message === 'state.sensor.unavailable') return null;
return localize(message, ...args);
};
const stateObj = {
entity_id: 'sensor.test',
@ -152,11 +152,11 @@ describe('computeStateDisplay', () => {
attributes: {
},
};
assert.strictEqual(computeStateDisplay(altHaLocalize, stateObj, 'en'), 'state.default.unavailable');
assert.strictEqual(computeStateDisplay(altLocalize, stateObj, 'en'), 'state.default.unavailable');
});
it('Localizes custom state', () => {
const altHaLocalize = function () {
const altLocalize = function () {
// No matches can be found
return null;
};
@ -166,7 +166,7 @@ describe('computeStateDisplay', () => {
attributes: {
},
};
assert.strictEqual(computeStateDisplay(altHaLocalize, stateObj, 'en'), 'My Custom State');
assert.strictEqual(computeStateDisplay(altLocalize, stateObj, 'en'), 'My Custom State');
});
it('Only calculates state display once per immutable state object', () => {
@ -176,9 +176,9 @@ describe('computeStateDisplay', () => {
attributes: {
},
};
assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'state.cover.open');
assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'state.cover.open');
stateObj.state = 'closing';
assert.strictEqual(computeStateDisplay(haLocalize, stateObj, 'en'), 'state.cover.open');
assert.strictEqual(computeStateDisplay(localize, stateObj, 'en'), 'state.cover.open');
});
});