Skip to content
This repository has been archived by the owner on Feb 14, 2020. It is now read-only.

☀️ compact mode and entity-picker #21

Closed
wants to merge 2 commits into from
Closed

☀️ compact mode and entity-picker #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c45a92f
☀️ compact mode and entity-picker
iantrich Jan 26, 2019
62bc6e6
remote card padding when compact
iantrich Jan 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 8 additions & 0 deletions weather-card/README.md
View file
Open in desktop
Expand Up @@ -57,6 +57,14 @@ If you want to use your local icons add the location to the icons:
icons: "/local/custom-lovelace/weather-card/icons/"
```

If you want just a compact forecast:

```yaml
- type: custom:weather-card
entity: weather.yourweatherentity
compact: true
```

Make sure the `sun` component is enabled:

```yaml
Expand Down
77 changes: 55 additions & 22 deletions weather-card/weather-card-editor.js
View file
Open in desktop
Expand Up @@ -42,12 +42,21 @@ export class WeatherCardEditor extends LitElement {
return this._config.icons || "";
}

get _compact() {
return this._config.compact || false;
}

render() {
if (!this.hass) {
return html``;
}

const entities = Object.keys(this.hass.states).filter(
eid => eid.substr(0, eid.indexOf(".")) === "weather"
);

return html`
${this.renderStyle()}
<div class="card-config">
<div class="side-by-side">
<paper-input
Expand All @@ -62,32 +71,55 @@ export class WeatherCardEditor extends LitElement {
.configValue="${"icons"}"
@value-changed="${this._valueChanged}"
></paper-input>
${
customElements.get("ha-entity-picker")
? html`
<ha-entity-picker
.hass="${this.hass}"
.value="${this._entity}"
.configValue=${"entity"}
domain-filter="weather"
@change="${this._valueChanged}"
allow-custom-entity
></ha-entity-picker>
`
: html`
<paper-input
label="Entity"
.value="${this._entity}"
.configValue="${"entity"}"
@value-changed="${this._valueChanged}"
></paper-input>
`
}
</div>
<div class="side-by-side">
<paper-dropdown-menu
label="Entity"
@value-changed="${this._valueChanged}"
.configValue="${"entity"}"
>
<paper-listbox
slot="dropdown-content"
.selected="${entities.indexOf(this._entity)}"
>
${
entities.map(entity => {
return html`
<paper-item>${entity}</paper-item>
`;
})
}
</paper-listbox>
</paper-dropdown-menu>

<paper-toggle-button
?checked="${this._compact !== false}"
.configValue="${"compact"}"
@change="${this._valueChanged}"
>Compact Mode?</paper-toggle-button
>
</div>
</div>
`;
}

renderStyle() {
return html`
<style>
paper-toggle-button {
padding-top: 16px;
}
.side-by-side {
display: flex;
}
.side-by-side > * {
flex: 1;
padding-right: 4px;
}
</style>
`;
}

_valueChanged(ev) {
if (!this._config || !this.hass) {
return;
Expand All @@ -102,7 +134,8 @@ export class WeatherCardEditor extends LitElement {
} else {
this._config = {
...this._config,
[target.configValue]: target.value
[target.configValue]:
target.checked !== undefined ? target.checked : target.value
};
}
}
Expand Down
173 changes: 98 additions & 75 deletions weather-card/weather-card.js
View file
Open in desktop
Expand Up @@ -143,85 +143,98 @@ class WeatherCard extends LitElement {

return html`
${this.renderStyle()}
<ha-card @click="${this._handleClick}">
<span
class="icon bigger"
style="background: none, url(${
this.getWeatherIcon(
stateObj.state.toLowerCase(),
this.hass.states["sun.sun"].state
)
}) no-repeat; background-size: contain;"
>${stateObj.state}
</span>
<ha-card @click="${this._handleClick}"
?compact="${this._config.compact}"
>
${
this._config.name
? html`
<span class="title"> ${this._config.name} </span>
this._config.compact
? ""
: html`
<span
class="icon bigger"
style="background: none, url(${
this.getWeatherIcon(
stateObj.state.toLowerCase(),
this.hass.states["sun.sun"].state
)
}) no-repeat; background-size: contain;"
>${stateObj.state}
</span>
${
this._config.name
? html`
<span class="title"> ${this._config.name} </span>
`
: ""
}
<span class="temp"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No functional changes here, looks like my formatter just went to town on this section. I can revert this if you like

>${
this.getUnit("temperature") == "°F"
? Math.round(stateObj.attributes.temperature)
: stateObj.attributes.temperature
}</span
>
<span class="tempc"> ${this.getUnit("temperature")}</span>
<span>
<ul class="variations">
<li>
<span class="ha-icon"
><ha-icon icon="mdi:water-percent"></ha-icon
></span>
${stateObj.attributes.humidity}<span class="unit">
%
</span>
<br />
<span class="ha-icon"
><ha-icon icon="mdi:weather-windy"></ha-icon
></span>
${
windDirections[
parseInt(
(stateObj.attributes.wind_bearing + 11.25) / 22.5
)
]
}
${stateObj.attributes.wind_speed}<span class="unit">
${this.getUnit("length")}/h
</span>
<br />
<span class="ha-icon"
><ha-icon icon="mdi:weather-sunset-up"></ha-icon
></span>
${next_rising.toLocaleTimeString()}
</li>
<li>
<span class="ha-icon"
><ha-icon icon="mdi:gauge"></ha-icon></span
>${stateObj.attributes.pressure}<span class="unit">
${this.getUnit("air_pressure")}
</span>
<br />
<span class="ha-icon"
><ha-icon icon="mdi:weather-fog"></ha-icon
></span>
${stateObj.attributes.visibility}<span class="unit">
${this.getUnit("length")}
</span>
<br />
<span class="ha-icon"
><ha-icon icon="mdi:weather-sunset-down"></ha-icon
></span>
${next_setting.toLocaleTimeString()}
</li>
</ul>
</span>
`
: ""
}
<span class="temp"
>${
this.getUnit("temperature") == "°F"
? Math.round(stateObj.attributes.temperature)
: stateObj.attributes.temperature
}</span
>
<span class="tempc"> ${this.getUnit("temperature")}</span>
<span>
<ul class="variations">
<li>
<span class="ha-icon"
><ha-icon icon="mdi:water-percent"></ha-icon
></span>
${stateObj.attributes.humidity}<span class="unit"> % </span>
<br />
<span class="ha-icon"
><ha-icon icon="mdi:weather-windy"></ha-icon
></span>
${
windDirections[
parseInt((stateObj.attributes.wind_bearing + 11.25) / 22.5)
]
}
${stateObj.attributes.wind_speed}<span class="unit">
${this.getUnit("length")}/h
</span>
<br />
<span class="ha-icon"
><ha-icon icon="mdi:weather-sunset-up"></ha-icon
></span>
${next_rising.toLocaleTimeString()}
</li>
<li>
<span class="ha-icon"><ha-icon icon="mdi:gauge"></ha-icon></span
>${stateObj.attributes.pressure}<span class="unit">
${this.getUnit("air_pressure")}
</span>
<br />
<span class="ha-icon"
><ha-icon icon="mdi:weather-fog"></ha-icon
></span>
${stateObj.attributes.visibility}<span class="unit">
${this.getUnit("length")}
</span>
<br />
<span class="ha-icon"
><ha-icon icon="mdi:weather-sunset-down"></ha-icon
></span>
${next_setting.toLocaleTimeString()}
</li>
</ul>
</span>
${
stateObj.attributes.forecast &&
stateObj.attributes.forecast.length > 0
? html`
<div class="forecast clear">
${
stateObj.attributes.forecast.slice(0, 5).map(
daily => html`
(daily, index) => html`
<div class="day">
<span class="dayname"
>${
Expand All @@ -239,18 +252,24 @@ class WeatherCard extends LitElement {
this.getWeatherIcon(daily.condition.toLowerCase())
}) no-repeat; background-size: contain;"
></i>
<br /><span class="highTemp"
>${daily.temperature}${
this.getUnit("temperature")
}</span
<br /><span class="highTemp">
${
this._config.compact && index === 0
? stateObj.attributes.temperature
: daily.temperature
}${this.getUnit("temperature")}</span
>
${
daily.templow
? html`
<br /><span class="lowTemp"
>${daily.templow}${
this.getUnit("temperature")
}</span
this._config.compact && index === 0
? html`
- ${daily.temperature}
`
: ""
}${this.getUnit("temperature")}</span
>
`
: ""
Expand Down Expand Up @@ -314,6 +333,10 @@ class WeatherCard extends LitElement {
position: relative;
}

ha-card[compact] {
padding-top: 1.3em;
}

.clear {
clear: both;
}
Expand Down