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