mirror of
https://github.com/home-assistant/frontend.git
synced 2025-12-19 18:28:42 +00:00
117 lines
2.6 KiB
HTML
117 lines
2.6 KiB
HTML
<!--
|
|
<link rel='import' href='../../../bower_components/polymer/polymer.html'>
|
|
<link rel='import' href='../../../bower_components/iron-image/iron-image.html'>
|
|
<link rel='import' href='../../../bower_components/iron-icon/iron-icon.html'>
|
|
-->
|
|
|
|
<dom-module id='ha-entity-marker'>
|
|
<style is="custom-style" include="iron-positioning"></style>
|
|
<style>
|
|
.marker {
|
|
vertical-align: top;
|
|
position: relative;
|
|
display: block;
|
|
margin: 0 auto;
|
|
width: 2.5em;
|
|
text-align: center;
|
|
height: 2.5em;
|
|
line-height: 2.5em;
|
|
font-size: 1.5em;
|
|
border-radius: 50%;
|
|
border: 0.1em solid var(--ha-marker-color, --default-primary-color);
|
|
color: rgb(76, 76, 76);
|
|
background-color: white;
|
|
}
|
|
iron-image {
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
<template>
|
|
<div class='marker'>
|
|
<template is='dom-if' if='[[icon]]'>
|
|
<iron-icon icon='[[icon]]'></iron-icon>
|
|
</template>
|
|
<template is='dom-if' if='[[value]]'>[[value]]</template>
|
|
<template is='dom-if' if='[[image]]'>
|
|
<iron-image sizing='cover' class='fit' src='[[image]]'></iron-image>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
/*
|
|
Leaflet clones this element before adding it to the map. This messes up
|
|
our Poylmer object and we lose the reference to the `hass` object.
|
|
|
|
That's why we refer here to window.hass instead of the hass property.
|
|
*/
|
|
Polymer({
|
|
is: 'ha-entity-marker',
|
|
|
|
properties: {
|
|
hass: {
|
|
type: Object,
|
|
},
|
|
|
|
entityId: {
|
|
type: String,
|
|
value: '',
|
|
reflectToAttribute: true,
|
|
},
|
|
|
|
state: {
|
|
type: Object,
|
|
computed: 'computeState(entityId)',
|
|
},
|
|
|
|
icon: {
|
|
type: Object,
|
|
computed: 'computeIcon(state)',
|
|
},
|
|
|
|
image: {
|
|
type: Object,
|
|
computed: 'computeImage(state)',
|
|
},
|
|
|
|
value: {
|
|
type: String,
|
|
computed: 'computeValue(state)',
|
|
},
|
|
},
|
|
|
|
listeners: {
|
|
tap: 'badgeTap',
|
|
},
|
|
|
|
badgeTap: function (ev) {
|
|
ev.stopPropagation();
|
|
if (this.entityId) {
|
|
this.async(function () {
|
|
window.hass.moreInfoActions.selectEntity(this.entityId);
|
|
}, 1);
|
|
}
|
|
},
|
|
|
|
computeState: function (entityId) {
|
|
return entityId && window.hass.reactor.evaluate(window.hass.entityGetters.byId(entityId));
|
|
},
|
|
|
|
computeIcon: function (state) {
|
|
return !state && 'home';
|
|
},
|
|
|
|
computeImage: function (state) {
|
|
return state && state.attributes.entity_picture;
|
|
},
|
|
|
|
computeValue: function (state) {
|
|
return state &&
|
|
state.entityDisplay.split(' ').map(function (part) {
|
|
return part.substr(0, 1);
|
|
}).join('');
|
|
},
|
|
});
|
|
</script>
|