80 lines
1.5 KiB
HTML
80 lines
1.5 KiB
HTML
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
|
|
|
<link rel="import" href="./state-badge.html">
|
|
<link rel="import" href="../ha-relative-time.html">
|
|
|
|
<dom-module id="state-info">
|
|
<template>
|
|
<style>
|
|
:host {
|
|
@apply(--paper-font-body1);
|
|
min-width: 150px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
state-badge {
|
|
float: left;
|
|
}
|
|
|
|
.info {
|
|
margin-left: 56px;
|
|
}
|
|
|
|
.name {
|
|
@apply(--paper-font-common-nowrap);
|
|
color: var(--primary-text-color);
|
|
line-height: 40px;
|
|
}
|
|
|
|
.name[in-dialog] {
|
|
line-height: 20px;
|
|
}
|
|
|
|
.time-ago {
|
|
@apply(--paper-font-common-nowrap);
|
|
color: var(--secondary-text-color);
|
|
}
|
|
</style>
|
|
|
|
<div>
|
|
<state-badge state-obj='[[stateObj]]'></state-badge>
|
|
|
|
<div class='info'>
|
|
<div class='name' in-dialog$='[[inDialog]]'>[[computeStateName(stateObj)]]</div>
|
|
|
|
<template is='dom-if' if='[[inDialog]]'>
|
|
<div class='time-ago'>
|
|
<ha-relative-time datetime-obj='[[stateObj.lastChangedAsDate]]'></ha-relative-time>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
Polymer({
|
|
is: 'state-info',
|
|
|
|
properties: {
|
|
detailed: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
|
|
stateObj: {
|
|
type: Object,
|
|
},
|
|
|
|
inDialog: {
|
|
type: Boolean,
|
|
},
|
|
},
|
|
|
|
computeStateName: function (stateObj) {
|
|
return window.hassUtil.computeStateName(stateObj);
|
|
}
|
|
});
|
|
</script>
|