add weekday to time condition editor

Author: Misiu

src/data/automation.ts

@@ -170,6 +170,7 @@ export interface TimeCondition {
   condition: "time";
   after: string;
   before: string;
+  weekday: string[];
 }
 
 export interface TemplateCondition {

src/panels/config/automation/condition/types/ha-automation-condition-time.ts

@@ -6,6 +6,8 @@ import {
   internalProperty,
   LitElement,
   property,
+  CSSResult,
+  css,
 } from "lit-element";
 import "../../../../../components/ha-formfield";
 import "../../../../../components/ha-radio";
@@ -15,14 +17,31 @@ import {
   ConditionElement,
   handleChangeEvent,
 } from "../ha-automation-condition-row";
+import { HaSwitch } from "../../../../../components/ha-switch";
+import { computeRTLDirection } from "../../../../../common/util/compute_rtl";
+import { fireEvent } from "../../../../../common/dom/fire_event";
 
 const includeDomains = ["input_datetime"];
 
+const DAYS = {
+  mon: 1,
+  tue: 2,
+  wed: 3,
+  thu: 4,
+  fri: 5,
+  sat: 6,
+  sun: 7,
+};
+
+interface WeekdayHaSwitch extends HaSwitch {
+  day: string;
+}
+
 @customElement("ha-automation-condition-time")
 export class HaTimeCondition extends LitElement implements ConditionElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public condition!: TimeCondition;
+  @property({ attribute: false }) public condition!: TimeCondition;
 
   @internalProperty() private _inputModeBefore?: boolean;
 
@@ -33,7 +52,7 @@ export class HaTimeCondition extends LitElement implements ConditionElement {
   }
 
   protected render() {
-    const { after, before } = this.condition;
+    const { after, before, weekday } = this.condition;
 
     const inputModeBefore =
       this._inputModeBefore ?? before?.startsWith("input_datetime.");
@@ -128,6 +147,26 @@ export class HaTimeCondition extends LitElement implements ConditionElement {
             .value=${before?.startsWith("input_datetime.") ? "" : before}
             @value-changed=${this._valueChanged}
           ></paper-input>`}
+      ${Object.keys(DAYS).map(
+        (day) => html`
+          <ha-formfield
+            alignEnd
+            spaceBetween
+            class="weekday-toggle"
+            .label=${this.hass!.localize(
+              `ui.panel.config.automation.editor.conditions.type.time.weekdays.${day}`
+            )}
+            .dir=${computeRTLDirection(this.hass!)}
+          >
+            <ha-switch
+              .day=${day}
+              .checked=${weekday?.includes(day)}
+              @change=${this._dayValueChanged}
+            >
+            </ha-switch>
+          </ha-formfield>
+        `
+      )}
     `;
   }
 
@@ -143,4 +182,41 @@ export class HaTimeCondition extends LitElement implements ConditionElement {
   private _valueChanged(ev: CustomEvent): void {
     handleChangeEvent(this, ev);
   }
+
+  private _dayValueChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+
+    const daySwitch = ev.currentTarget as WeekdayHaSwitch;
+
+    let days = this.condition.weekday || [];
+
+    if (daySwitch.checked) {
+      days.push(daySwitch.day);
+    } else {
+      days = days.filter((d) => d !== daySwitch.day);
+    }
+
+    days.sort((a: string, b: string) => DAYS[a] - DAYS[b]);
+
+    this.condition.weekday = days;
+
+    fireEvent(this, "value-changed", {
+      value: this.condition,
+    });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .weekday-toggle {
+        display: flex;
+        height: 40px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-condition-time": HaTimeCondition;
+  }
 }

src/translations/en.json

@@ -1111,7 +1111,16 @@
                   "type_input": "[%key:ui::panel::config::automation::editor::triggers::type::time::type_input%]",
                   "label": "[%key:ui::panel::config::automation::editor::triggers::type::time::label%]",
                   "after": "After",
-                  "before": "Before"
+                  "before": "Before",
+                  "weekdays": {
+                    "mon": "Monday",
+                    "tue": "Tuesday",
+                    "wed": "Wednesday",
+                    "thu": "Thursday",
+                    "fri": "Friday",
+                    "sat": "Saturday",
+                    "sun": "Sunday"
+                  }
                 },
                 "zone": {
                   "label": "[%key:ui::panel::config::automation::editor::triggers::type::zone::label%]",