Skip to content

Commit

Permalink
Add to card picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@bramkragten
bramkragten committed Jun 15, 2020
1 parent 2cfd0d2 commit dd4e0ad
Show file tree
Hide file tree
Showing 3 changed files with 126 additions and 88 deletions.
2 changes: 2 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@

dist/.DS_Store
96 changes: 55 additions & 41 deletions dist/weather-card-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ const fireEvent = (node, type, detail, options) => {
const event = new Event(type, {
bubbles: options.bubbles === undefined ? true : options.bubbles,
cancelable: Boolean(options.cancelable),
composed: options.composed === undefined ? true : options.composed
composed: options.composed === undefined ? true : options.composed,
});
event.detail = detail;
node.dispatchEvent(event);
Expand Down Expand Up @@ -69,7 +69,7 @@ export class WeatherCardEditor extends LitElement {
}

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

return html`
Expand Down Expand Up @@ -108,43 +108,54 @@ export class WeatherCardEditor extends LitElement {
slot="dropdown-content"
.selected="${entities.indexOf(this._entity)}"
>
${entities.map(entity => {
return html`
<paper-item>${entity}</paper-item>
`;
${entities.map((entity) => {
return html` <paper-item>${entity}</paper-item> `;
})}
</paper-listbox>
</paper-dropdown-menu>
`}
<ha-switch
.checked=${this._current}
.configValue="${"current"}"
@change="${this._valueChanged}"
>Show current</ha-switch
>
<ha-switch
.checked=${this._details}
.configValue="${"details"}"
@change="${this._valueChanged}"
>Show details</ha-switch
>
<ha-switch
.checked=${this._forecast}
.configValue="${"forecast"}"
@change="${this._valueChanged}"
>Show forecast</ha-switch
>
<ha-switch
.checked=${this._hourly_forecast}
.configValue="${"hourly_forecast"}"
@change="${this._valueChanged}"
>Show hourly forecast</ha-switch
>
<div class="switches">
<div class="switch">
<ha-switch
.checked=${this._current}
.configValue="${"current"}"
@change="${this._valueChanged}"
></ha-switch
><span>Show current</span>
</div>
<div class="switch">
<ha-switch
.checked=${this._details}
.configValue="${"details"}"
@change="${this._valueChanged}"
></ha-switch
><span>Show details</span>
</div>
<div class="switch">
<ha-switch
.checked=${this._forecast}
.configValue="${"forecast"}"
@change="${this._valueChanged}"
></ha-switch
><span>Show forecast</span>
</div>
<div class="switch">
<ha-switch
.checked=${this._hourly_forecast}
.configValue="${"hourly_forecast"}"
@change="${this._valueChanged}"
></ha-switch
><span>Show hourly forecast</span>
</div>
</div>
<paper-input
label="Number of future forcasts"
type="number" min="1" max="8" value=${this._number_of_forecasts}
.configValue="${"number_of_forecasts"}"
@value-changed="${this._valueChanged}"
label="Number of future forcasts"
type="number"
min="1"
max="8"
value=${this._number_of_forecasts}
.configValue="${"number_of_forecasts"}"
@value-changed="${this._valueChanged}"
></paper-input>
</div>
</div>
Expand All @@ -166,7 +177,7 @@ export class WeatherCardEditor extends LitElement {
this._config = {
...this._config,
[target.configValue]:
target.checked !== undefined ? target.checked : target.value
target.checked !== undefined ? target.checked : target.value,
};
}
}
Expand All @@ -175,15 +186,18 @@ export class WeatherCardEditor extends LitElement {

static get styles() {
return css`
ha-switch {
padding-top: 16px;
.switches {
margin: 8px 0;
display: flex;
justify-content: space-between;
}
.side-by-side {
.switch {
display: flex;
align-items: center;
justify-items: center;
}
.side-by-side > * {
flex: 1;
padding-right: 4px;
.switches span {
padding: 0 16px;
}
`;
}
Expand Down
116 changes: 69 additions & 47 deletions dist/weather-card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,15 @@ const weatherIconsDay = {
sunny: "day",
windy: "cloudy",
"windy-variant": "cloudy-day-3",
exceptional: "!!"
exceptional: "!!",
};

const weatherIconsNight = {
...weatherIconsDay,
clear: "night",
sunny: "night",
partlycloudy: "cloudy-night-3",
"windy-variant": "cloudy-night-3"
"windy-variant": "cloudy-night-3",
};

const windDirections = [
Expand All @@ -46,16 +46,25 @@ const windDirections = [
"WNW",
"NW",
"NNW",
"N"
"N",
];

window.customCards = window.customCards || [];
window.customCards.push({
type: "weather-card",
name: "Weather Card",
description: "A custom weather card with animated icons.",
preview: true,
documentationURL: "https://github.com/bramkragten/weather-card",
});

const fireEvent = (node, type, detail, options) => {
options = options || {};
detail = detail === null || detail === undefined ? {} : detail;
const event = new Event(type, {
bubbles: options.bubbles === undefined ? true : options.bubbles,
cancelable: Boolean(options.cancelable),
composed: options.composed === undefined ? true : options.composed
composed: options.composed === undefined ? true : options.composed,
});
event.detail = detail;
node.dispatchEvent(event);
Expand Down Expand Up @@ -83,7 +92,7 @@ class WeatherCard extends LitElement {
static get properties() {
return {
_config: {},
hass: {}
hass: {},
};
}

Expand All @@ -92,8 +101,12 @@ class WeatherCard extends LitElement {
return document.createElement("weather-card-editor");
}

static getStubConfig() {
return {};
static getStubConfig(hass, unusedEntities, allEntities) {
let entity = unusedEntities.find((eid) => eid.split(".")[0] === "weather");
if (!entity) {
entity = allEntities.find((eid) => eid.split(".")[0] === "weather");
}
return { entity };
}

setConfig(config) {
Expand Down Expand Up @@ -158,9 +171,7 @@ class WeatherCard extends LitElement {
>${stateObj.state}
</span>
${this._config.name
? html`
<span class="title"> ${this._config.name} </span>
`
? html` <span class="title"> ${this._config.name} </span> `
: ""}
<span class="temp"
>${this.getUnit("temperature") == "°F"
Expand Down Expand Up @@ -241,43 +252,54 @@ class WeatherCard extends LitElement {
this.numberElements++;
return html`
<div class="forecast clear ${this.numberElements > 1 ? "spacer" : ""}">
${forecast.slice(0, this._config.number_of_forecasts ? this._config.number_of_forecasts : 5 ).map(
daily => html`
<div class="day">
<div class="dayname">
${this._config.hourly_forecast
? new Date(daily.datetime).toLocaleTimeString(lang, { hour: '2-digit', minute: '2-digit' })
: new Date(daily.datetime).toLocaleDateString(lang, {weekday: "short" })
}
</div>
<i
class="icon"
style="background: none, url('${this.getWeatherIcon(
daily.condition.toLowerCase()
)}') no-repeat; background-size: contain"
></i>
<div class="highTemp">
${daily.temperature}${this.getUnit("temperature")}
${forecast
.slice(
0,
this._config.number_of_forecasts
? this._config.number_of_forecasts
: 5
)
.map(
(daily) => html`
<div class="day">
<div class="dayname">
${this._config.hourly_forecast
? new Date(daily.datetime).toLocaleTimeString(lang, {
hour: "2-digit",
minute: "2-digit",
})
: new Date(daily.datetime).toLocaleDateString(lang, {
weekday: "short",
})}
</div>
<i
class="icon"
style="background: none, url('${this.getWeatherIcon(
daily.condition.toLowerCase()
)}') no-repeat; background-size: contain"
></i>
<div class="highTemp">
${daily.temperature}${this.getUnit("temperature")}
</div>
${daily.templow !== undefined
? html`
<div class="lowTemp">
${daily.templow}${this.getUnit("temperature")}
</div>
`
: ""}
${!this._config.hide_precipitation &&
daily.precipitation !== undefined &&
daily.precipitation !== null
? html`
<div class="precipitation">
${daily.precipitation} ${this.getUnit("precipitation")}
</div>
`
: ""}
</div>
${daily.templow !== undefined
? html`
<div class="lowTemp">
${daily.templow}${this.getUnit("temperature")}
</div>
`
: ""}
${!this._config.hide_precipitation &&
daily.precipitation !== undefined &&
daily.precipitation !== null
? html`
<div class="precipitation">
${daily.precipitation} ${this.getUnit("precipitation")}
</div>
`
: ""}
</div>
`
)}
`
)}
</div>
`;
}
Expand Down Expand Up @@ -363,7 +385,7 @@ class WeatherCard extends LitElement {
margin-right: 7px;
}
@media (max-width: 460px){
@media (max-width: 460px) {
.title {
font-size: 2.2em;
left: 4em;
Expand Down

0 comments on commit dd4e0ad

Please sign in to comment.