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

Weather Row: Generic (#5389)

Browse Source 
* Bye lots of hours

* Merge image states into states we have

* add space
This commit is contained in:
Zack Arnett 2020-04-01 10:58:05 -04:00 committed by GitHub
parent 2e17c96866
commit e54d904e4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/data/weather.ts
View File

@ -1,21 +1,24 @@
import { HomeAssistant } from "../types";
export const weatherIcons = {
export const weatherImages = {
"clear-night": "/static/images/weather/night.png",
cloudy: "/static/images/weather/cloudy.png",
exceptional: "hass:alert-circle-outline",
fog: "hass:weather-fog",
hail: "hass:weather-hail",
fog: "/static/images/weather/cloudy.png",
hail: "/static/images/weather/rainy.png",
lightning: "/static/images/weather/lightning.png",
"lightning-rainy": "/static/images/weather/lightning-rainy.png",
partlycloudy: "/static/images/weather/partly-cloudy.png",
pouring: "/static/images/weather/pouring.png",
rainy: "/static/images/weather/rainy.png",
snowy: "/static/images/weather/snowy.png",
"snowy-rainy": "hass:weather-snowy-rainy",
"snowy-rainy": "/static/images/weather/rainy.png",
sunny: "/static/images/weather/sunny.png",
windy: "/static/images/weather/windy.png",
"windy-variant": "hass:weather-windy-variant",
"windy-variant": "/static/images/weather/windy.png",
};
export const weatherIcons = {
exceptional: "hass:alert-circle-outline",
};
export const cardinalDirections = [

141
src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
View File

@ -8,8 +8,6 @@ import {
customElement,
PropertyValues,
} from "lit-element";
import { ifDefined } from "lit-html/directives/if-defined";
import { classMap } from "lit-html/directives/class-map";
import "../../../components/entity/state-badge";
import "../components/hui-warning";
@ -18,15 +16,11 @@ import { LovelaceRow } from "./types";
import { HomeAssistant, WeatherEntity } from "../../../types";
import { EntitiesCardEntityConfig } from "../cards/types";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { UNAVAILABLE } from "../../../data/entity";
import { weatherIcons, getWeatherUnit } from "../../../data/weather";
import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
import { computeDomain } from "../../../common/entity/compute_domain";
import { actionHandler } from "../common/directives/action-handler-directive";
import { hasAction } from "../common/has-action";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { ActionHandlerEvent } from "../../../data/lovelace";
import { handleAction } from "../common/handle-action";
import {
weatherIcons,
getWeatherUnit,
weatherImages,
} from "../../../data/weather";
@customElement("hui-weather-entity-row")
class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
@ -52,7 +46,7 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
const stateObj = this.hass.states[this._config.entity] as WeatherEntity;
if (!stateObj || stateObj.state === UNAVAILABLE) {
if (!stateObj) {
return html`
<hui-warning
>${this.hass.localize(
@ -64,58 +58,24 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
`;
}
const pointer =
(this._config.tap_action && this._config.tap_action.action !== "none") ||
(this._config.entity &&
!DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this._config.entity)));
const secondaryAttribute = this._getSecondaryAttribute(stateObj);
const weatherRowConfig = {
...this._config,
icon: weatherIcons[stateObj.state],
image: weatherImages[stateObj.state],
};
return html`
<div
class="main ${classMap({
pointer,
})}"
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(this._config!.hold_action),
hasDoubleClick: hasAction(this._config!.double_tap_action),
})}
>
<state-badge
.hass=${this.hass}
.stateObj=${stateObj}
.overrideImage=${weatherIcons[stateObj.state]}
tabindex=${ifDefined(pointer ? "0" : undefined)}
></state-badge>
<div class="container">
<div style="display: flex;">
<div class="info">
<div class="name">
${this._config.name || computeStateName(stateObj)}
</div>
<div class="state">
${this.hass.localize(`state.weather.${stateObj.state}`) ||
stateObj.state}
</div>
</div>
<div class="temperature">
${stateObj.attributes.temperature}<span
>${getWeatherUnit(this.hass, "temperature")}</span
>
</div>
</div>
${secondaryAttribute
? html`
<hui-generic-entity-row .hass=${this.hass} .config=${weatherRowConfig}>
<div class="attributes">
<span>
${secondaryAttribute}
</span>
<div>
${stateObj.attributes.temperature}
${getWeatherUnit(this.hass, "temperature")}
</div>
`
: ""}
<div class="secondary">
${this._getSecondaryAttribute(stateObj)}
</div>
</div>
</hui-generic-entity-row>
`;
}
@ -199,75 +159,18 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
`;
}
private _handleAction(ev: ActionHandlerEvent) {
handleAction(this, this.hass!, this._config!, ev.detail.action!);
}
static get styles(): CSSResult {
return css`
.pointer {
cursor: pointer;
}
.main {
.attributes {
display: flex;
align-items: center;
justify-content: flex-end;
width: 100%;
}
.name {
font-weight: 500;
}
.state {
color: var(--secondary-text-color);
}
.temperature {
font-size: 28px;
margin-right: 16px;
}
.temperature span {
font-size: 18px;
position: absolute;
}
.container {
flex: 1 0;
display: flex;
flex-flow: column;
}
.info {
display: flex;
flex-flow: column;
flex-direction: column;
justify-content: center;
text-align: right;
}
.info,
.attributes {
flex: 1 0;
margin-left: 16px;
overflow: hidden;
}
.info > *,
.attributes > * {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.attributes {
padding-top: 1px;
.secondary {
color: var(--secondary-text-color);
}
.attributes > *:not(:first-child) {
padding-left: 4px;
}
`;
}
}