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

Add time created to persistent notifications. (#1733)

Browse Source 
* Add time created to persistent notifications.

* Add tooltip to show actual date.

* Fix style rules.

* Fix duplicate ids.
This commit is contained in:
Jerad Meisner 2018-10-07 09:59:54 -07:00 committed by Paulus Schoutsen
parent 7fb5ac11fd
commit c30e7ac683
1 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/panels/lovelace/components/notifications/hui-persistent-notification-item.js
View File

@ -1,9 +1,11 @@
import '@polymer/paper-button/paper-button.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-tooltip/paper-tooltip.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '../../../../components/ha-relative-time.js';
import '../../../../components/ha-markdown.js';
import './hui-notification-item-template.js';
@ -15,11 +17,31 @@ import LocalizeMixin from '../../../../mixins/localize-mixin.js';
export class HuiPersistentNotificationItem extends LocalizeMixin(PolymerElement) {
static get template() {
return html`
<style>
.time {
display: flex;
justify-content: flex-end;
margin-top: 6px;
}
ha-relative-time {
color: var(--secondary-text-color);
}
</style>
<hui-notification-item-template>
<span slot="header">[[_computeTitle(notification)]]</span>
<ha-markdown content="[[notification.message]]"></ha-markdown>
<div class="time">
<span>
<ha-relative-time
hass="[[hass]]"
datetime="[[notification.created_at]]"
></ha-relative-time>
<paper-tooltip>[[_computeTooltip(hass, notification)]]</paper-tooltip>
</span>
</div>
<paper-button
slot="actions"
class="primary"
@ -45,6 +67,15 @@ export class HuiPersistentNotificationItem extends LocalizeMixin(PolymerElement)
_computeTitle(notification) {
return notification.title || notification.notification_id;
}
_computeTooltip(hass, notification) {
if (!hass || !notification) return null;
const d = new Date(notification.created_at);
return d.toLocaleDateString(hass.language, {
year: 'numeric', month: 'short', day: 'numeric', minute: 'numeric', hour: 'numeric'
});
}
}
customElements.define(
'hui-persistent_notification-notification-item',