Use translations for all fields in recurrence rule editor (#14940)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/panels/calendar/ha-recurrence-rule-editor.ts

@@ -6,6 +6,7 @@ import type { Options, WeekdayStr } from "rrule";
 import { ByWeekday, RRule, Weekday } from "rrule";
 import { firstWeekdayIndex } from "../../common/datetime/first_weekday";
 import { stopPropagation } from "../../common/dom/stop_propagation";
+import { LocalizeKeys } from "../../common/translations/localize";
 import "../../components/ha-chip";
 import "../../components/ha-list-item";
 import "../../components/ha-select";
@@ -19,12 +20,10 @@ import {
   getWeekday,
   getWeekdays,
   getMonthlyRepeatItems,
-  intervalSuffix,
   RepeatEnd,
   RepeatFrequency,
   ruleByWeekDay,
   untilValue,
-  WEEKDAY_NAME,
   MonthlyRepeatItem,
   getMonthlyRepeatWeekdayFromRule,
   getMonthdayRepeatFromRule,
@@ -174,18 +173,36 @@ export class RecurrenceRuleEditor extends LitElement {
     return html`
       <ha-select
         id="freq"
-        label="Repeat"
+        label=${this.hass.localize("ui.components.calendar.event.repeat.label")}
         @selected=${this._onRepeatSelected}
         @closed=${stopPropagation}
         fixedMenuPosition
         naturalMenuWidth
         .value=${this._freq}
       >
-        <ha-list-item value="none">None</ha-list-item>
+        <ha-list-item value="none">
-        <ha-list-item value="yearly">Yearly</ha-list-item>
+          ${this.hass.localize("ui.components.calendar.event.repeat.freq.none")}
-        <ha-list-item value="monthly">Monthly</ha-list-item>
+        </ha-list-item>
-        <ha-list-item value="weekly">Weekly</ha-list-item>
+        <ha-list-item value="yearly">
-        <ha-list-item value="daily">Daily</ha-list-item>
+          ${this.hass.localize(
+            "ui.components.calendar.event.repeat.freq.yearly"
+          )}
+        </ha-list-item>
+        <ha-list-item value="monthly">
+          ${this.hass.localize(
+            "ui.components.calendar.event.repeat.freq.monthly"
+          )}
+        </ha-list-item>
+        <ha-list-item value="weekly">
+          ${this.hass.localize(
+            "ui.components.calendar.event.repeat.freq.weekly"
+          )}
+        </ha-list-item>
+        <ha-list-item value="daily">
+          ${this.hass.localize(
+            "ui.components.calendar.event.repeat.freq.daily"
+          )}
+        </ha-list-item>
       </ha-select>
     `;
   }
@@ -196,7 +213,9 @@ export class RecurrenceRuleEditor extends LitElement {
       ${this._monthlyRepeatItems.length > 0
         ? html`<ha-select
             id="monthly"
-            label="Repeat Monthly"
+            label=${this.hass.localize(
+              "ui.components.calendar.event.repeat.monthly.label"
+            )}
             @selected=${this._onMonthlyDetailSelected}
             .value=${this._monthlyRepeat || this._monthlyRepeatItems[0]?.value}
             @closed=${stopPropagation}
@@ -225,7 +244,11 @@ export class RecurrenceRuleEditor extends LitElement {
               .value=${item}
               class=${classMap({ active: this._weekday.has(item) })}
               @click=${this._onWeekdayToggle}
-              >${WEEKDAY_NAME[item]}</ha-chip
+              >${this.hass.localize(
+                `ui.components.calendar.event.repeat.weekly.weekday.${
+                  item.toLowerCase() as Lowercase<WeekdayStr>
+                }`
+              )}</ha-chip
             >
           `
         )}
@@ -241,11 +264,16 @@ export class RecurrenceRuleEditor extends LitElement {
     return html`
       <ha-textfield
         id="interval"
-        label="Repeat interval"
+        label=${this.hass.localize(
+          "ui.components.calendar.event.repeat.interval.label"
+        )}
         type="number"
         min="1"
         .value=${this._interval}
-        .suffix=${intervalSuffix(this._freq!)}
+        .suffix=${this.hass.localize(
+          `ui.components.calendar.event.repeat.interval.${this
+            ._freq!}` as LocalizeKeys
+        )}
         @change=${this._onIntervalChange}
       ></ha-textfield>
     `;
@@ -255,26 +283,38 @@ export class RecurrenceRuleEditor extends LitElement {
     return html`
       <ha-select
         id="end"
-        label="Ends"
+        label=${this.hass.localize(
+          "ui.components.calendar.event.repeat.end.label"
+        )}
         .value=${this._end}
         @selected=${this._onEndSelected}
         @closed=${stopPropagation}
         fixedMenuPosition
         naturalMenuWidth
       >
-        <ha-list-item value="never">Never</ha-list-item>
+        <ha-list-item value="never">
-        <ha-list-item value="after">After</ha-list-item>
+          ${this.hass.localize("ui.components.calendar.event.repeat.end.never")}
-        <ha-list-item value="on">On</ha-list-item>
+        </ha-list-item>
+        <ha-list-item value="after">
+          ${this.hass.localize("ui.components.calendar.event.repeat.end.after")}
+        </ha-list-item>
+        <ha-list-item value="on">
+          ${this.hass.localize("ui.components.calendar.event.repeat.end.on")}
+        </ha-list-item>
       </ha-select>
       ${this._end === "after"
         ? html`
             <ha-textfield
               id="after"
-              label="End after"
+              label=${this.hass.localize(
+                "ui.components.calendar.event.repeat.end_after.label"
+              )}
               type="number"
               min="1"
               .value=${this._count!}
-              suffix="ocurrences"
+              suffix=${this.hass.localize(
+                "ui.components.calendar.event.repeat.end_after.ocurrences"
+              )}
               @change=${this._onCountChange}
             ></ha-textfield>
           `
@@ -283,7 +323,9 @@ export class RecurrenceRuleEditor extends LitElement {
         ? html`
             <ha-date-input
               id="on"
-              label="End on"
+              label=${this.hass.localize(
+                "ui.components.calendar.event.repeat.end_on.label"
+              )}
               .locale=${this.locale}
               .value=${this._until!.toISOString()}
               @value-changed=${this._onUntilChange}

src/panels/calendar/recurrence.ts

@@ -42,16 +42,6 @@ export interface MonthlyRepeatItem {
   label: string;
 }
 
-export function intervalSuffix(freq: RepeatFrequency) {
-  if (freq === "monthly") {
-    return "months";
-  }
-  if (freq === "weekly") {
-    return "weeks";
-  }
-  return "days";
-}
-
 export function untilValue(freq: RepeatFrequency): Date {
   const today = new Date();
   const increment = DEFAULT_COUNT[freq];
@@ -102,16 +92,6 @@ export const convertRepeatFrequency = (
   }
 };
 
-export const WEEKDAY_NAME = {
-  SU: "Sun",
-  MO: "Mon",
-  TU: "Tue",
-  WE: "Wed",
-  TH: "Thu",
-  FR: "Fri",
-  SA: "Sat",
-};
-
 export const WEEKDAYS = [
   RRule.SU,
   RRule.MO,

src/translations/en.json

@@ -644,6 +644,33 @@
               "monthly": "months",
               "weekly": "weeks",
               "daily": "days"
+            },
+            "monthly": {
+              "label": "Repeat Monthly"
+            },
+            "weekly": {
+              "weekday": {
+                "su": "Sun",
+                "mo": "Mon",
+                "tu": "Tue",
+                "we": "Wed",
+                "th": "Thu",
+                "fr": "Fri",
+                "sa": "Sat"
+              }
+            },
+            "end": {
+              "label": "End",
+              "never": "Never",
+              "after": "After",
+              "on": "On"
+            },
+            "end_on": {
+              "label": "End On"
+            },
+            "end_after": {
+              "label": "End After",
+              "ocurrences": "ocurrences"
             }
           },
           "rrule": {