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

Fix issues with new weather card (#1149)

Browse Source 
* Fix issues with new weather card

* New line
This commit is contained in:
c727 2018-05-09 00:14:29 +02:00 committed by Paulus Schoutsen
parent 356e104096
commit 8ecc41388a
2 changed files with 70 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/cards/ha-weather-card.html
View File

@ -22,12 +22,33 @@
.now { .now {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
flex-wrap: wrap;
} }
.state { .main {
display: flex;
align-items: center;
margin-right: 32px;
}
.main iron-icon {
--iron-icon-height: 72px; --iron-icon-height: 72px;
--iron-icon-width: 72px; --iron-icon-width: 72px;
margin-right: 8px;
}
.main .temp {
font-size: 52px; font-size: 52px;
line-height: 1em;
position: relative;
}
.main .temp span {
font-size: 24px;
line-height: 1em;
position: absolute;
top: 4px;
} }
.now-text { .now-text {
@ -62,30 +83,38 @@
<ha-card header='[[stateObj.attributes.friendly_name]]'> <ha-card header='[[stateObj.attributes.friendly_name]]'>
<div class='content'> <div class='content'>
<div class="now"> <div class="now">
<div class="state"> <div class="main">
<template is="dom-if" if="[[showWeatherIcon(stateObj.state)]]"> <template is="dom-if" if="[[showWeatherIcon(stateObj.state)]]">
<iron-icon icon="[[getWeatherIcon(stateObj.state)]]"></iron-icon> <iron-icon icon="[[getWeatherIcon(stateObj.state)]]"></iron-icon>
</template> </template>
[[getTemperature(stateObj.attributes.temperature)]] <div class="temp">
[[stateObj.attributes.temperature]]<span>[[getUnit('temperature')]]</span>
</div>
</div> </div>
<div class="attributes"> <div class="attributes">
<div> <template is="dom-if" if="[[stateObj.attributes.pressure]]">
[[localize('ui.card.weather.attributes.humidity')]]:
[[stateObj.attributes.humidity]] %
</div>
<template is="dom-if" if="[[stateObj.attributes.visibility]]">
<div> <div>
[[localize('ui.card.weather.attributes.visibility')]]: [[localize('ui.card.weather.attributes.air_pressure')]]:
[[getVisibilty(stateObj.attributes.visibility)]] [[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> </div>
</template> </template>
<div>
[[localize('ui.card.weather.attributes.wind_speed')]]:
[[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]
</div>
</div> </div>
</div> </div>
<div class="now-text">[[computeState(stateObj.state, localize)]]</div> <div class="now-text">
[[computeState(stateObj.state, localize)]]
</div>
<template is="dom-if" if="[[forecast]]"> <template is="dom-if" if="[[forecast]]">
<div class="forecast"> <div class="forecast">
<template is='dom-repeat' items='[[forecast]]'> <template is='dom-repeat' items='[[forecast]]'>
@ -96,9 +125,9 @@
<iron-icon icon="[[getWeatherIcon(item.condition)]]"></iron-icon> <iron-icon icon="[[getWeatherIcon(item.condition)]]"></iron-icon>
</div> </div>
</template> </template>
<div class="temp">[[item.temperature]]°</div> <div class="temp">[[item.temperature]] [[getUnit('temperature')]]</div>
<template is="dom-if" if="[[item.templow]]"> <template is="dom-if" if="[[item.templow]]">
<div class="templow">[[item.templow]]°</div> <div class="templow">[[item.templow]] [[getUnit('temperature')]]</div>
</template> </template>
</div> </div>
</template> </template>
@ -161,7 +190,7 @@ class HaWeatherCard extends
} }
computeForecast(forecast) { computeForecast(forecast) {
return forecast && forecast.slice(0, 7); return forecast && forecast.slice(0, 5);
} }
getUnit(unit) { getUnit(unit) {
@ -180,10 +209,6 @@ class HaWeatherCard extends
return this.weatherIcons[condition]; return this.weatherIcons[condition];
} }
getTemperature(temp) {
return `${temp}${this.getUnit('temperature')}`;
}
windBearingToText(degree) { windBearingToText(degree) {
const degreenum = parseInt(degree); const degreenum = parseInt(degree);
if (isFinite(degreenum)) { if (isFinite(degreenum)) {
@ -195,15 +220,11 @@ class HaWeatherCard extends
getWind(speed, bearing, localize) { getWind(speed, bearing, localize) {
if (bearing != null) { if (bearing != null) {
const cardinalDirection = this.windBearingToText(bearing); const cardinalDirection = this.windBearingToText(bearing);
return `${speed} ${this.getUnit('length')}/h (${localize(cardinalDirection.toLowerCase()) || cardinalDirection})`; return `${speed} ${this.getUnit('length')}/h (${localize(`ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}`) || cardinalDirection})`;
} }
return `${speed} ${this.getUnit('length')}/h`; return `${speed} ${this.getUnit('length')}/h`;
} }
getVisibilty(visibilty) {
return `${visibilty} ${this.getUnit('length')}`;
}
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;

40
src/dialogs/more-info/controls/more-info-weather.html
View File

@ -47,23 +47,6 @@
<div class="main">[[localize('ui.card.weather.attributes.temperature')]]</div> <div class="main">[[localize('ui.card.weather.attributes.temperature')]]</div>
<div>[[stateObj.attributes.temperature]] [[getUnit('temperature')]]</div> <div>[[stateObj.attributes.temperature]] [[getUnit('temperature')]]</div>
</div> </div>
<div class="flex">
<iron-icon icon="mdi:water-percent"></iron-icon>
<div class="main">[[localize('ui.card.weather.attributes.humidity')]]</div>
<div>[[stateObj.attributes.humidity]] %</div>
</div>
<template is="dom-if" if="[[stateObj.attributes.visibility]]">
<div class="flex">
<iron-icon icon="mdi:eye"></iron-icon>
<div class="main">[[localize('ui.card.weather.attributes.visibility')]]</div>
<div>[[stateObj.attributes.visibility]] [[getUnit('length')]]</div>
</div>
</template>
<div class="flex">
<iron-icon icon="mdi:weather-windy"></iron-icon>
<div class="main">[[localize('ui.card.weather.attributes.wind_speed')]]</div>
<div>[[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]</div>
</div>
<template is="dom-if" if="[[stateObj.attributes.pressure]]"> <template is="dom-if" if="[[stateObj.attributes.pressure]]">
<div class="flex"> <div class="flex">
<iron-icon icon="mdi:gauge"></iron-icon> <iron-icon icon="mdi:gauge"></iron-icon>
@ -71,6 +54,27 @@
<div>[[stateObj.attributes.pressure]] hPa</div> <div>[[stateObj.attributes.pressure]] hPa</div>
</div> </div>
</template> </template>
<template is="dom-if" if="[[stateObj.attributes.humidity]]">
<div class="flex">
<iron-icon icon="mdi:water-percent"></iron-icon>
<div class="main">[[localize('ui.card.weather.attributes.humidity')]]</div>
<div>[[stateObj.attributes.humidity]] %</div>
</div>
</template>
<template is="dom-if" if="[[stateObj.attributes.wind_speed]]">
<div class="flex">
<iron-icon icon="mdi:weather-windy"></iron-icon>
<div class="main">[[localize('ui.card.weather.attributes.wind_speed')]]</div>
<div>[[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]</div>
</div>
</template>
<template is="dom-if" if="[[stateObj.attributes.visibility]]">
<div class="flex">
<iron-icon icon="mdi:eye"></iron-icon>
<div class="main">[[localize('ui.card.weather.attributes.visibility')]]</div>
<div>[[stateObj.attributes.visibility]] [[getUnit('length')]]</div>
</div>
</template>
<template is="dom-if" if="[[stateObj.attributes.forecast]]"> <template is="dom-if" if="[[stateObj.attributes.forecast]]">
<div class="section">[[localize('ui.card.weather.forecast')]]:</div> <div class="section">[[localize('ui.card.weather.forecast')]]:</div>
@ -168,7 +172,7 @@ class MoreInfoWeather extends window.hassMixins.LocalizeMixin(Polymer.Element) {
getWind(speed, bearing, localize) { getWind(speed, bearing, localize) {
if (bearing != null) { if (bearing != null) {
const cardinalDirection = this.windBearingToText(bearing); const cardinalDirection = this.windBearingToText(bearing);
return `${speed} ${this.getUnit('length')}/h (${localize(cardinalDirection.toLowerCase()) || cardinalDirection})`; return `${speed} ${this.getUnit('length')}/h (${localize(`ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}`) || cardinalDirection})`;
} }
return `${speed} ${this.getUnit('length')}/h`; return `${speed} ${this.getUnit('length')}/h`;
} }