Merge pull request #11 from d2kagw/2101-Assorted-Improvements

2101 assorted improvements

.hass_dev/views/weather-view.yaml

@@ -3,10 +3,17 @@ panel: true
 cards:
   - type: custom:muto-layout-card
     columns:
-      - type: custom:muto-layout-column-card
-        cards:
-          - type: custom:muto-weather-card
-            sensor_entity: weather.demo_weather_north
-          - type: custom:muto-weather-card
-            sensor_entity: weather.demo_weather_south
-
+      - cards:
+        - type: custom:muto-layout-column-card
+          cards:
+            - type: custom:muto-weather-card
+              weather_entity: weather.demo_weather_north
+            - type: custom:muto-weather-card
+              weather_entity: weather.demo_weather_south
+      - cards:
+        - type: custom:muto-layout-column-card
+          cards:
+            - type: custom:muto-weather-card
+              weather_entity: weather.demo_weather_south
+              moon_entity: sensor.moon_phase
+              sun_entity: sun.sun

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lovelace-muto",
-  "version": "1.2.0",
+  "version": "1.1.4",
   "description": "",
   "main": "index.js",
   "scripts": {

src/cards/button-card/button-card.ts

@@ -51,7 +51,16 @@ export class ButtonCard extends MutoBaseCard {
     }
 
     public mediaPlayerButtonContent(): TemplateResult {
-        return html``;
+        switch (this.entity().state) {
+            case "idle":
+                return html` <muto-icon icon="mdi:speaker"></muto-icon>`;
+
+            case "unavailable":
+                return html` <muto-icon icon="mdi:speaker-off"></muto-icon>`;
+
+            default:
+                return html``;
+        }
     }
 
     public sensorButtonContent(): TemplateResult {
@@ -71,7 +80,7 @@ export class ButtonCard extends MutoBaseCard {
                     if (this.entity().attributes.is_volume_muted) {
                         label = "Muted";
                     } else if (this.entity().attributes.volume_level) {
-                        label = `${this.entity().attributes.volume_level * 100}%`;
+                        label = `${(this.entity().attributes.volume_level * 100).toFixed()}%`;
                     } else {
                         label = this.entity().state;
                     }

src/cards/control-card/control-card.ts

@@ -149,8 +149,10 @@ export class SliderControlCard extends MutoBaseCard {
         }
 
         if (deviceTypeForEntity(this.entity()) == "media_player") {
-            label = this.entity().attributes.media_title;
-            sublabel = this.entity().attributes.media_artist ?? "";
+            label = this.entity().attributes.friendly_name ?? this.entity().entity_id;
+            sublabel = `${this.entity().attributes.media_title ?? "Unknown"} - ${
+                this.entity().attributes.media_artist ?? "Unknown"
+            }`;
         }
 
         return html`
@@ -170,7 +172,7 @@ export class SliderControlCard extends MutoBaseCard {
             },
             display: "state",
         };
-        return html` ${sensorConfig.status_entity
+        return html`${sensorConfig.status_entity
             ? html`<muto-sensor-button-card
                   .config=${sensorConfig}
                   .hass=${this.hass}

src/cards/layout-card/layout-card.ts

@@ -111,6 +111,7 @@ export class LayoutRowCard extends LayoutColumnCard {
                     flex-direction: row;
                     gap: var(--muto-spacing);
                 }
+
                 .muto-layout-fit-wrap {
                     flex-wrap: wrap;
                 }
@@ -128,6 +129,7 @@ export class LayoutRowCard extends LayoutColumnCard {
                     -ms-overflow-style: none;
                     scrollbar-width: none;
                 }
+
                 .muto-layout-fit-scroll::-webkit-scrollbar {
                     display: none;
                 }
@@ -183,6 +185,8 @@ export class LayoutCard extends MutoBaseCard {
             return html``;
         }
 
+        console.warn(this.config);
+
         return html`
             <div class="muto muto-layout" style=${this.config.css ?? ""}>
                 ${this._columns.map((column, i) => {

src/cards/weather-card/weather-card-config.ts

@@ -3,5 +3,7 @@ import { MutoCardConfig } from "../../shared/types";
 
 export type WeatherCardConfig = LovelaceCardConfig &
     MutoCardConfig & {
-        sensor_entity?: string;
+        weather_entity: string;
+        moon_entity?: string;
+        sun_entity?: string;
     };

src/cards/weather-card/weather-card.ts

@@ -7,31 +7,33 @@ import { WEATHER_CARD_NAME } from "../const";
 import { WeatherCardConfig } from "./weather-card-config";
 import { SliderControlCard } from "../control-card/control-card";
 import { ButtonCard } from "../button-card/button-card";
+import { LayoutRowCardConfig } from "../layout-card/layout-card-config";
+import { LayoutRowCard } from "../layout-card/layout-card";
 
 @customElement(WEATHER_CARD_NAME)
 export class WeatherCard extends SliderControlCard {
     @property() config!: WeatherCardConfig;
 
-    public renderLabel(): TemplateResult {
-        let sensorEntity = this.entity(this.config.sensor_entity);
-        let weatherState: string = sensorEntity.state;
+    public renderWeatherLabel(): TemplateResult {
+        let weatherEntity = this.entity(this.config.weather_entity);
+        let weatherState: string = weatherEntity.state;
         let sublabel: string = [
-            sensorEntity.attributes.precipitation
-                ? `Rain ${sensorEntity.attributes.precipitation}${sensorEntity.attributes.precipitation_unit}`
+            weatherEntity.attributes.precipitation
+                ? `Rain ${weatherEntity.attributes.precipitation}${weatherEntity.attributes.precipitation_unit}`
                 : false,
-            sensorEntity.attributes.humidity
-                ? `Humidity ${sensorEntity.attributes.humidity}%`
+            weatherEntity.attributes.humidity
+                ? `Humidity ${weatherEntity.attributes.humidity}%`
                 : false,
-            sensorEntity.attributes.wind_speed
-                ? `Wind ${sensorEntity.attributes.wind_speed}${sensorEntity.attributes.wind_speed_unit}`
+            weatherEntity.attributes.wind_speed
+                ? `Wind ${weatherEntity.attributes.wind_speed}${weatherEntity.attributes.wind_speed_unit}`
                 : false,
         ]
             .filter(Boolean)
             .join(", ");
 
         let action = {
             type: "more-info",
-            entity: sensorEntity.entity_id,
+            entity: weatherEntity.entity_id,
         };
 
         return html`
@@ -43,11 +45,11 @@ export class WeatherCard extends SliderControlCard {
         `;
     }
 
-    public renderIcon(sensor?: string): TemplateResult {
+    public renderWeatherIcon(): TemplateResult {
         let buttonConfig = {
-            icon: `mdi:weather-${this.entity(sensor).state}`,
-            status_entity: sensor,
-            action: { type: "more-info", entity: sensor },
+            icon: `mdi:weather-${this.entity(this.config.weather_entity).state}`,
+            status_entity: this.config.weather_entity,
+            action: { type: "more-info", entity: this.config.weather_entity },
         };
 
         return html`<muto-button-card
@@ -56,7 +58,38 @@ export class WeatherCard extends SliderControlCard {
         ></muto-button-card>`;
     }
 
-    public renderForecast(forecast: object): TemplateResult {
+    public renderMoonIcon(): TemplateResult {
+        let buttonConfig = {
+            icon: this.entity(this.config.moon_entity).attributes.icon,
+            status_entity: this.config.moon_entity,
+            action: { type: "more-info", entity: this.config.moon_entity },
+        };
+
+        return html`<muto-button-card
+            .config=${buttonConfig}
+            .hass=${this.hass}
+        ></muto-button-card>`;
+    }
+
+    public renderMoonLabel(): TemplateResult {
+        let moon_entity = this.entity(this.config.moon_entity);
+
+        let action = {
+            type: "more-info",
+            entity: this.config.moon_entity,
+        };
+
+        let label = `Moon: ${moon_entity.state.replace(/_/g, " ")}`;
+
+        return html`
+            <muto-control-label
+                .labelText=${label}
+                @click=${this.clickAction(action)}
+            ></muto-control-label>
+        `;
+    }
+
+    public forecastButtonConfigs(forecast: object): object {
         let condition: string = forecast["condition"];
         switch (condition) {
             case "partlycloudy":
@@ -68,17 +101,15 @@ export class WeatherCard extends SliderControlCard {
         }
 
         let buttonConfig = {
+            type: "custom:muto-button-card",
             icon: `mdi:weather-${condition}`,
-            status_entity: this.config.sensor_entity,
+            status_entity: this.config.weather_entity,
             label: `${forecast["temperature"]}${
-                this.entity(this.config.sensor_entity).attributes.temperature_unit
+                this.entity(this.config.weather_entity).attributes.temperature_unit
             }`,
         };
 
-        return html`<muto-button-card
-            .config=${buttonConfig}
-            .hass=${this.hass}
-        ></muto-button-card>`;
+        return buttonConfig;
     }
 
     public render(): TemplateResult {
@@ -88,15 +119,26 @@ export class WeatherCard extends SliderControlCard {
         }
 
         return html`
-            <muto-control class="muto muto-panel muto-control" style="${this.config.css ?? ""}">
-                ${this.renderIcon(this.config.sensor_entity)} ${this.renderLabel()}
-                ${this.renderSensor(this.config.sensor_entity)}
+            <muto-control class="muto muto-panel muto-control muto-weather-current">
+                ${this.renderWeatherIcon()} ${this.renderWeatherLabel()}
+                ${this.renderSensor(this.config.weather_entity)}
             </muto-control>
-            <muto-weather-forecast>
-                ${this.entity(this.config.sensor_entity).attributes.forecast.map((forecast) =>
-                    this.renderForecast(forecast)
-                )}
-            </muto-weather-forecast>
+            ${this.entity(this.config.weather_entity).attributes.forecast
+                ? html`<div class="muto muto-row muto-row-fit-scroll muto-weather-forecast">
+                      ${this.entity(this.config.weather_entity).attributes.forecast.map(
+                          (forecast) =>
+                              html`<muto-button-card
+                                  .config=${this.forecastButtonConfigs(forecast)}
+                                  .hass=${this.hass}
+                              ></muto-button-card>`
+                      )}
+                  </div>`
+                : ``}
+            ${this.config.moon_entity
+                ? html`<muto-control class="muto muto-panel muto-control muto-moon">
+                      ${this.renderMoonIcon()} ${this.renderMoonLabel()}
+                  </muto-control>`
+                : ``}
         `;
     }
 
@@ -107,12 +149,9 @@ export class WeatherCard extends SliderControlCard {
                 muto-control-label {
                     text-transform: capitalize;
                 }
-                muto-weather-forecast {
+                .muto-weather-forecast,
+                .muto-moon {
                     margin-top: var(--muto-unit);
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: space-between;
-                    gap: var(--muto-unit);
                 }
             `,
         ];

src/shared/base-card.ts

@@ -169,6 +169,28 @@ export class MutoBaseCard extends LitElement implements LovelaceCard {
                 .muto-clickable:active {
                     filter: brightness(1.5);
                 }
+                .muto-row {
+                    display: flex;
+                    flex-direction: row;
+                    gap: var(--muto-spacing);
+                }
+                .muto-row-fit-wrap {
+                    flex-wrap: wrap;
+                }
+                .muto-row-fit-wrap > * {
+                    width: auto;
+                }
+                .muto-row-fit-scale > * {
+                    min-width: 1px;
+                }
+                .muto-row-fit-scroll {
+                    overflow-y: scroll;
+                    -ms-overflow-style: none;
+                    scrollbar-width: none;
+                }
+                .muto-row-fit-scroll::-webkit-scrollbar {
+                    display: none;
+                }
             `,
         ];
     }