move schedule editor into dialog

Behike · Dec 19, 2022 · ffc17c2 · ffc17c2
1 parent 82cd482
commit ffc17c2
Show file tree

Hide file tree

Showing 38 changed files with 1,935 additions and 1,649 deletions.
diff --git a/src/components/dialog-delete-confirm.ts b/src/components/dialog-delete-confirm.ts
diff --git a/src/components/dialog-enable-item.ts b/src/components/dialog-enable-item.ts
diff --git a/src/components/dialog-error.ts b/src/components/dialog-error.ts
diff --git a/src/components/dialog-delete-defective.ts → src/components/generic-dialog.ts b/src/components/dialog-delete-defective.ts → src/components/generic-dialog.ts
@@ -1,15 +1,25 @@
-import { LitElement, html, css, CSSResultGroup } from 'lit';
+import { LitElement, html, css, CSSResultGroup, TemplateResult } from 'lit';
 import { property, customElement, state } from 'lit/decorators.js';
 import { HomeAssistant } from 'custom-card-helpers';
 import { mdiClose } from '@mdi/js';
 
-@customElement('dialog-delete-defective')
-export class DialogDeleteDefective extends LitElement {
+export type DialogParams = {
+  title: string;
+  description: string | TemplateResult;
+  primaryButtonLabel: string;
+  secondaryButtonLabel?: string;
+  primaryButtonCritical?: boolean;
+  cancel: () => void;
+  confirm: () => void;
+};
+
+@customElement('generic-dialog')
+export class GenericDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _params?: any;
+  @state() private _params?: DialogParams;
 
-  public async showDialog(params: any): Promise<void> {
+  public async showDialog(params: DialogParams): Promise<void> {
     this._params = params;
     await this.updateComplete;
   }
@@ -27,36 +37,39 @@ export class DialogDeleteDefective extends LitElement {
           <ha-header-bar>
             <ha-icon-button slot="navigationIcon" dialogAction="cancel" .path=${mdiClose}> </ha-icon-button>
             <span slot="title">
-              Defective entity
+              ${this._params.title}
             </span>
           </ha-header-bar>
         </div>
         <div class="wrapper">
-          This schedule is defective and cannot be edited with the card. Consider to delete the item and recreate it. If
-          the problem persists, please report the issue on GitHub.
+          ${this._params.description}
         </div>
 
-        <mwc-button slot="primaryAction" @click=${this.cancelClick} dialogAction="close">
-          ${this.hass.localize('ui.dialogs.generic.cancel')}
-        </mwc-button>
+        ${this._params.secondaryButtonLabel
+          ? html`
+              <mwc-button slot="primaryAction" @click=${this.cancelClick} dialogAction="close">
+                ${this._params.secondaryButtonLabel}
+              </mwc-button>
+            `
+          : ''}
         <mwc-button
           slot="secondaryAction"
-          style="float: left; --mdc-theme-primary: var(--error-color)"
+          style="${this._params.primaryButtonCritical ? '--mdc-theme-primary: var(--error-color)' : ''}"
           @click=${this.confirmClick}
           dialogAction="close"
         >
-          ${this.hass.localize('ui.common.delete')}
+          ${this._params.primaryButtonLabel}
         </mwc-button>
       </ha-dialog>
     `;
   }
 
   confirmClick() {
-    this._params.confirm();
+    this._params!.confirm();
   }
 
   cancelClick() {
-    this._params.cancel();
+    this._params!.cancel();
   }
 
   static get styles(): CSSResultGroup {

diff --git a/src/components/timeslot-editor.ts b/src/components/timeslot-editor.ts
@@ -430,12 +430,14 @@ export class TimeslotEditor extends LitElement {
   }
 
   private _updateTooltips() {
+    const windowLeft = this.offsetLeft;
     const fullWidth = parseFloat(getComputedStyle(this).getPropertyValue('width'));
     const tooltips = (this.shadowRoot?.querySelectorAll('.tooltip') as unknown) as HTMLElement[];
 
     const getBounds = (el: HTMLElement) => {
       const width = el.offsetWidth;
-      const left = el.parentElement!.offsetLeft + el.offsetLeft - 15;
+      const left = el.parentElement!.offsetLeft + el.offsetLeft - windowLeft;
+
       if (el.parentElement!.classList.contains('left')) return [left + width / 2, left + (3 * width) / 2];
       else if (el.parentElement!.classList.contains('right')) return [left - width / 2, left + width / 2];
       return [left, left + width];
@@ -450,7 +452,7 @@ export class TimeslotEditor extends LitElement {
         if (visible) container.classList.remove('visible');
       } else {
         const left = tooltip.parentElement!.offsetLeft;
-        if (left < 0 || left > fullWidth + 15) {
+        if (left < 0 || left > fullWidth + 2 * windowLeft) {
           if (visible) container.classList.remove('visible');
         } else {
           if (!visible) container.classList.add('visible');

diff --git a/src/const.ts b/src/const.ts
@@ -15,12 +15,10 @@ export const WorkdaySensor = 'binary_sensor.workday_sensor';
 
 export const NotifyDomain = 'notify';
 
-export enum EViews {
-  Overview = 'OVERVIEW',
-  NewSchedule = 'NEW_SCHEDULE',
-  TimePicker = 'TIME_PICKER',
-  TimeScheme = 'TIME_SCHEME',
-  Options = 'OPTIONS',
+export enum ETabOptions {
+  Entity = 'entity',
+  Time = 'time',
+  Options = 'options',
 }
 
 export const DefaultCardConfig: CardConfig = {

diff --git a/src/data/websockets.ts b/src/data/websockets.ts
@@ -1,6 +1,7 @@
 import { HomeAssistant, fireEvent } from 'custom-card-helpers';
 import { Schedule, ScheduleConfig, TagEntry } from '../types';
 import { html, TemplateResult } from 'lit';
+import { DialogParams } from '../components/generic-dialog';
 
 export const fetchSchedules = (hass: HomeAssistant): Promise<Schedule[]> =>
   hass.callWS({
@@ -33,20 +34,27 @@ export const fetchTags = (hass: HomeAssistant): Promise<TagEntry[]> =>
     type: 'scheduler/tags',
   });
 
-export function showErrorDialog(target: HTMLElement, error: string | TemplateResult) {
+export function showErrorDialog(target: HTMLElement, error: string | TemplateResult, hass: HomeAssistant) {
+  const params: DialogParams = {
+    title: hass.localize('state_badge.default.error'),
+    description: error,
+    primaryButtonLabel: hass.localize('ui.dialogs.generic.ok'),
+    confirm: () => {},
+    cancel: () => {},
+  };
   fireEvent(target, 'show-dialog', {
-    dialogTag: 'dialog-error',
-    dialogImport: () => import('../components/dialog-error'),
-    dialogParams: { error: error },
+    dialogTag: 'generic-dialog',
+    dialogImport: () => import('../components/generic-dialog'),
+    dialogParams: params,
   });
 }
 
-export function handleError(err: { body: { message: string }; error: string }, el: HTMLElement) {
+export function handleError(err: { body: { message: string }; error: string }, el: HTMLElement, hass: HomeAssistant) {
   const errorMessage = html`
     <b>Something went wrong!</b><br />
     ${err.body.message}<br /><br />
     ${err.error}<br /><br />
     Please <a href="https://github.com/nielsfaber/scheduler-card/issues">report</a> the bug.
   `;
-  showErrorDialog(el, errorMessage);
+  showErrorDialog(el, errorMessage, hass);
 }