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

Add precipitation to weather card (#1098) (#1221)

Browse Source
This commit is contained in:
c727 2018-05-29 03:29:52 +02:00 committed by GitHub
parent 21e4bc4ee4
commit 74e0779d38
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 126 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
src/cards/ha-weather-card.js
View File

@ -14,136 +14,140 @@ class HaWeatherCard extends
LocalizeMixin(EventsMixin(PolymerElement)) { LocalizeMixin(EventsMixin(PolymerElement)) {
static get template() { static get template() {
return html` return html`
<style> <style>
:host { :host {
cursor: pointer; cursor: pointer;
} }
.content { .content {
padding: 0 20px 20px; padding: 0 20px 20px;
} }
iron-icon { iron-icon {
color: var(--paper-item-icon-color); color: var(--paper-item-icon-color);
} }
.now { .now {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.main { .main {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 32px; margin-right: 32px;
} }
.main iron-icon { .main iron-icon {
--iron-icon-height: 72px; --iron-icon-height: 72px;
--iron-icon-width: 72px; --iron-icon-width: 72px;
margin-right: 8px; margin-right: 8px;
} }
.main .temp { .main .temp {
font-size: 52px; font-size: 52px;
line-height: 1em; line-height: 1em;
position: relative; position: relative;
} }
.main .temp span { .main .temp span {
font-size: 24px; font-size: 24px;
line-height: 1em; line-height: 1em;
position: absolute; position: absolute;
top: 4px; top: 4px;
} }
.now-text { .now-text {
font-size: 24px; font-size: 24px;
} }
.forecast { .forecast {
margin-top: 24px; margin-top: 24px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.forecast div { .forecast div {
flex: 0 0 auto; flex: 0 0 auto;
text-align: center; text-align: center;
} }
.forecast .icon { .forecast .icon {
margin: 8px 0; margin: 8px 0;
text-align: center; text-align: center;
} }
.weekday { .weekday {
font-weight: bold; font-weight: bold;
} }
.attributes, .attributes,
.templow { .templow,
color: var(--secondary-text-color); .precipitation { {
} color: var(--secondary-text-color);
</style> }
<ha-card header="[[stateObj.attributes.friendly_name]]"> </style>
<div class="content"> <ha-card header="[[stateObj.attributes.friendly_name]]">
<div class="now"> <div class="content">
<div class="main"> <div class="now">
<template is="dom-if" if="[[showWeatherIcon(stateObj.state)]]"> <div class="main">
<iron-icon icon="[[getWeatherIcon(stateObj.state)]]"></iron-icon> <template is="dom-if" if="[[showWeatherIcon(stateObj.state)]]">
</template> <iron-icon icon="[[getWeatherIcon(stateObj.state)]]"></iron-icon>
<div class="temp"> </template>
[[stateObj.attributes.temperature]]<span>[[getUnit('temperature')]]</span> <div class="temp">
[[stateObj.attributes.temperature]]<span>[[getUnit('temperature')]]</span>
</div>
</div>
<div class="attributes">
<template is="dom-if" if="[[_showValue(stateObj.attributes.pressure)]]">
<div>
[[localize('ui.card.weather.attributes.air_pressure')]]:
[[stateObj.attributes.pressure]] hPa
</div>
</template>
<template is="dom-if" if="[[_showValue(stateObj.attributes.humidity)]]">
<div>
[[localize('ui.card.weather.attributes.humidity')]]:
[[stateObj.attributes.humidity]] %
</div>
</template>
<template is="dom-if" if="[[_showValue(stateObj.attributes.humidity)]]">
<div>
[[localize('ui.card.weather.attributes.wind_speed')]]:
[[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]
</div>
</template>
</div> </div>
</div> </div>
<div class="attributes"> <div class="now-text">
<template is="dom-if" if="[[stateObj.attributes.pressure]]"> [[computeState(stateObj.state, localize)]]
<div>
[[localize('ui.card.weather.attributes.air_pressure')]]:
[[stateObj.attributes.pressure]] hPa
</div>
</template>
<template is="dom-if" if="[[stateObj.attributes.humidity]]">
<div>
[[localize('ui.card.weather.attributes.humidity')]]:
[[stateObj.attributes.humidity]] %
</div>
</template>
<template is="dom-if" if="[[stateObj.attributes.humidity]]">
<div>
[[localize('ui.card.weather.attributes.wind_speed')]]:
[[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]
</div>
</template>
</div> </div>
<template is="dom-if" if="[[forecast]]">
<div class="forecast">
<template is="dom-repeat" items="[[forecast]]">
<div>
<div class="weekday">[[computeDateTime(item.datetime)]]</div>
<template is="dom-if" if="[[item.condition]]">
<div class="icon">
<iron-icon icon="[[getWeatherIcon(item.condition)]]"></iron-icon>
</div>
</template>
<div class="temp">[[item.temperature]] [[getUnit('temperature')]]</div>
<template is="dom-if" if="[[_showValue(item.templow)]]">
<div class="templow">[[item.templow]] [[getUnit('temperature')]]</div>
</template>
<template is="dom-if" if="[[_showValue(item.precipitation)]]">
<div class="precipitation">[[item.precipitation]] [[getUnit('precipitation')]]</div>
</template>
</div>
</template>
</div>
</template>
</div> </div>
<div class="now-text"> </ha-card>
[[computeState(stateObj.state, localize)]] `;
</div>
<template is="dom-if" if="[[forecast]]">
<div class="forecast">
<template is="dom-repeat" items="[[forecast]]">
<div>
<div class="weekday">[[computeDateTime(item.datetime)]]</div>
<template is="dom-if" if="[[item.condition]]">
<div class="icon">
<iron-icon icon="[[getWeatherIcon(item.condition)]]"></iron-icon>
</div>
</template>
<div class="temp">[[item.temperature]] [[getUnit('temperature')]]</div>
<template is="dom-if" if="[[item.templow]]">
<div class="templow">[[item.templow]] [[getUnit('temperature')]]</div>
</template>
</div>
</template>
</div>
</template>
</div>
</ha-card>
`;
} }
static get properties() { static get properties() {
@ -194,8 +198,11 @@ class HaWeatherCard extends
return forecast && forecast.slice(0, 5); return forecast && forecast.slice(0, 5);
} }
getUnit(unit) { getUnit(measure) {
return this.hass.config.core.unit_system[unit] || ''; if (measure === 'precipitation') {
return this.getUnit('length') === 'km' ? 'mm' : 'in';
}
return this.hass.config.core.unit_system[measure] || '';
} }
computeState(state, localize) { computeState(state, localize) {
@ -226,6 +233,10 @@ class HaWeatherCard extends
return `${speed} ${this.getUnit('length')}/h`; return `${speed} ${this.getUnit('length')}/h`;
} }
_showValue(item) {
return typeof item !== 'undefined' && item !== null;
}
computeDateTime(data) { computeDateTime(data) {
const date = new Date(data); const date = new Date(data);
const provider = this.stateObj.attributes.attribution; const provider = this.stateObj.attributes.attribution;