refactor: update editor to be easier to manage

totaldebug · Aug 29, 2023 · 9532420 · 9532420
1 parent 273a827
commit 9532420
Show file tree

Hide file tree

Showing 11 changed files with 786 additions and 129 deletions.
diff --git a/src/editor.ts b/src/editor.ts
diff --git a/src/index-editor.ts → src/index-editor.ts.old b/src/index-editor.ts → src/index-editor.ts.old
@@ -465,7 +465,7 @@ export class AtomicCalendarReviveEditor extends ScopedRegistryHost(LitElement) i
 						<ha-icon icon=${`mdi:${options.main.icon}`}></ha-icon>
 						<div class="title">${localize('main.name')}</div>
 					</div>
-					<div class="secondary">${localize('main.secondary')}</div>
+					<div class="secondary">${l${localize('main.name')}}</div>
 				</div>
 				${options.main.show
 				? html`

diff --git a/src/index.ts b/src/index.ts
@@ -27,7 +27,7 @@ dayjs.extend(week);
 dayjs.extend(duration)
 
 // Import Card Editor
-import './index-editor';
+import './editor';
 
 import CalendarDay from './lib/calendar.class';
 import EventClass from './lib/event.class';
@@ -47,7 +47,7 @@ import {
 } from './lib/eventMode.html';
 import { getDate, setNoEventDays, showCalendarLink } from './lib/common.html';
 
-import { atomicCardConfig } from './types';
+import { atomicCardConfig } from './types/config';
 import { CARD_VERSION } from './const';
 
 import { localize } from './localize/localize';

diff --git a/src/lib/calendarMode.html.ts b/src/lib/calendarMode.html.ts
@@ -3,7 +3,7 @@ import dayjs from 'dayjs';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { atomicCardConfig } from '../types';
+import { atomicCardConfig } from '../types/config';
 import CalendarDay from './calendar.class';
 import { isHtml } from './common.html';
 import EventClass from './event.class';

diff --git a/src/lib/common.html.ts b/src/lib/common.html.ts
@@ -1,6 +1,6 @@
 import dayjs, { Dayjs } from "dayjs";
 import { html } from "lit";
-import { atomicCardConfig } from "../types";
+import { atomicCardConfig } from "../types/config";
 import EventClass from "./event.class";
 
 export function showCalendarLink(config, selectedMonth) {

diff --git a/src/lib/event.func.ts b/src/lib/event.func.ts
@@ -2,8 +2,8 @@ import { computeStateDomain, HomeAssistant } from 'custom-card-helpers';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import isBetween from 'dayjs/plugin/isBetween';
-import { AtomicCalendarReviveEditor } from '../index-editor';
-import { atomicCardConfig, EntityConfig } from '../types';
+import { atomicCardConfig } from '../types/config';
+import { EntityConfig } from '../types';
 import CalendarDay from './calendar.class';
 import EventClass from './event.class';
 

diff --git a/src/lib/eventMode.html.ts b/src/lib/eventMode.html.ts
@@ -1,7 +1,7 @@
 import EventClass from "./event.class";
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { atomicCardConfig } from "../types";
+import { atomicCardConfig } from "../types/config";
 import dayjs from "dayjs";
 import { getCurrDayAndMonth, getMultiDayEventParts, isHtml } from "./common.html";
 import { localize } from '../localize/localize';

diff --git a/src/types.ts b/src/types.ts
@@ -1,127 +1,6 @@
 import { LovelaceCard, LovelaceCardConfig, LovelaceCardEditor } from 'custom-card-helpers';
 
-declare global {
-	interface HTMLElementTagNameMap {
-		'atomic-calendar-card-editor': LovelaceCardEditor;
-		'atomic-calendar-card': LovelaceCard;
-	}
-}
-export interface atomicCardConfig extends LovelaceCardConfig {
-	entities?: any;
-	type: string;
-	name?: string;
-	entity?: string;
-	language?: string;
-	daysToSort?: number;
-	eventTitle?: string;
-
-	// text translations
-	fullDayEventText?: string;
-	untilText?: string;
-
-	maxDaysToShow?: number;
-	maxEventCount?: number;
-	showLoader?: boolean;
-	showLocation?: boolean;
-	showMonth?: boolean;
-	showWeekDay?: boolean;
-	fullTextTime?: boolean;
-	showCurrentEventLine?: boolean;
-	showDate?: boolean;
-	dateFormat?: string;
-	hoursFormat?: string;
-	startDaysAhead?: number;
-	showLastCalendarWeek?: boolean;
-	showCalNameInEvent?: boolean;
-	sortByStartTime?: boolean;
-	disableEventLink?: boolean;
-	disableLocationLink?: boolean;
-	linkTarget?: string;
-	showDeclined?: boolean;
-	softLimit?: number;
-	showPrivate?: boolean;
-	showHiddenText?: boolean;
-	hiddenEventText?: string;
-	refreshInterval: number;
-	showDescription: boolean;
-	showEventIcon: boolean;
-	showEventDate: boolean;
-	showDatePerEvent: boolean;
 
-	// color and font settings
-	nameColor?: string;
-	dateColor?: string;
-	dateSize?: number;
-	descColor?: string;
-	descSize?: number;
-	titleLength?: number;
-	descLength?: number;
-	showNoEventsForToday?: boolean;
-	showNoEventDays?: boolean;
-	noEventText?: string;
-	noEventsForNextDaysText?: string;
-	timeColor?: string;
-	timeSize?: number;
-	showHours?: boolean;
-	eventTitleColor?: string;
-	eventTitleSize?: number;
-	locationIconColor?: string;
-	locationLinkColor?: string;
-	locationTextSize?: number;
-
-	// finished events settings
-	hideFinishedEvents?: boolean;
-	dimFinishedEvents?: boolean;
-	finishedEventOpacity?: number;
-	finishedEventFilter?: string;
-
-	// days separating
-	dayWrapperLineColor?: string;
-	eventBarColor?: string;
-	eventCalNameColor?: string;
-	eventCalNameSize?: number;
-	showProgressBar?: boolean;
-	showFullDayProgress?: boolean;
-	progressBarColor?: string;
-	enableModeChange?: boolean;
-	defaultMode?: string;
-
-	// Calendar Mode Default Settings
-	calGridColor?: string;
-	calDayColor?: string;
-	calWeekDayColor?: string;
-	calDateColor?: string;
-	defaultCalColor?: string;
-	calEventBackgroundColor?: string;
-	calEventBackgroundFilter?: string;
-	calActiveEventBackgroundColor?: string;
-	calActiveEventBackgroundFilter?: string;
-	calEventSatColor?: string;
-	calEventSunColor?: string;
-	calEventHolidayColor?: string;
-	calEventHolidayFilter?: string;
-	calEventIcon1?: string;
-	calEventIcon1Color?: string;
-	calEventIcon1Filter?: string;
-	calEventIcon2?: string;
-	calEventIcon2Color?: string;
-	calEventIcon2Filter?: string;
-	calEventIcon3?: string;
-	calEventIcon3Color?: string;
-	calEventIcon3Filter?: string;
-	calEventTime?: boolean;
-	firstDayOfWeek?: number;
-	blacklist?: string;
-	whitelist?: string;
-	locationFilter?: string;
-	disableCalLink?: boolean;
-	removeDuplicates?: boolean;
-
-	compactMode?: boolean;
-	hoursOnSameLine?: boolean;
-	showTimeRemaining?: boolean;
-	showAllDayHours?: boolean;
-}
 
 export interface LongDateFormatSpec {
 	LTS: string;

diff --git a/src/types/config.ts b/src/types/config.ts
@@ -0,0 +1,118 @@
+import { LovelaceCardConfig } from 'custom-card-helpers';
+
+export interface atomicCardConfig extends LovelaceCardConfig {
+    entities?: any;
+    type: string;
+    name?: string;
+    entity?: string;
+    language?: string;
+    daysToSort?: number;
+    eventTitle?: string;
+
+    // text translations
+    fullDayEventText?: string;
+    untilText?: string;
+
+    maxDaysToShow?: number;
+    maxEventCount?: number;
+    showLoader?: boolean;
+    showLocation?: boolean;
+    showMonth?: boolean;
+    showWeekDay?: boolean;
+    fullTextTime?: boolean;
+    showCurrentEventLine?: boolean;
+    showDate?: boolean;
+    dateFormat?: string;
+    hoursFormat?: string;
+    startDaysAhead?: number;
+    showLastCalendarWeek?: boolean;
+    showCalNameInEvent?: boolean;
+    sortByStartTime?: boolean;
+    disableEventLink?: boolean;
+    disableLocationLink?: boolean;
+    linkTarget: string;
+    showDeclined?: boolean;
+    softLimit?: number;
+    showPrivate?: boolean;
+    showHiddenText?: boolean;
+    hiddenEventText?: string;
+    refreshInterval: number;
+    showDescription: boolean;
+    showEventIcon: boolean;
+    showEventDate: boolean;
+    showDatePerEvent: boolean;
+
+    // color and font settings
+    nameColor?: string;
+    dateColor?: string;
+    dateSize?: number;
+    descColor?: string;
+    descSize?: number;
+    titleLength?: number;
+    descLength?: number;
+    showNoEventsForToday?: boolean;
+    showNoEventDays?: boolean;
+    noEventText?: string;
+    noEventsForNextDaysText?: string;
+    timeColor?: string;
+    timeSize?: number;
+    showHours?: boolean;
+    eventTitleColor?: string;
+    eventTitleSize?: number;
+    locationIconColor?: string;
+    locationLinkColor?: string;
+    locationTextSize?: number;
+
+    // finished events settings
+    hideFinishedEvents?: boolean;
+    dimFinishedEvents?: boolean;
+    finishedEventOpacity?: number;
+    finishedEventFilter?: string;
+
+    // days separating
+    dayWrapperLineColor?: string;
+    eventBarColor?: string;
+    eventCalNameColor?: string;
+    eventCalNameSize?: number;
+    showProgressBar?: boolean;
+    showFullDayProgress?: boolean;
+    progressBarColor?: string;
+    enableModeChange?: boolean;
+    defaultMode: string;
+
+    // Calendar Mode Default Settings
+    calGridColor?: string;
+    calDayColor?: string;
+    calWeekDayColor?: string;
+    calDateColor?: string;
+    defaultCalColor?: string;
+    calEventBackgroundColor?: string;
+    calEventBackgroundFilter?: string;
+    calActiveEventBackgroundColor?: string;
+    calActiveEventBackgroundFilter?: string;
+    calEventSatColor?: string;
+    calEventSunColor?: string;
+    calEventHolidayColor?: string;
+    calEventHolidayFilter?: string;
+    calEventIcon1?: string;
+    calEventIcon1Color?: string;
+    calEventIcon1Filter?: string;
+    calEventIcon2?: string;
+    calEventIcon2Color?: string;
+    calEventIcon2Filter?: string;
+    calEventIcon3?: string;
+    calEventIcon3Color?: string;
+    calEventIcon3Filter?: string;
+    calEventTime?: boolean;
+    firstDayOfWeek?: number;
+    blacklist?: string;
+    whitelist?: string;
+    locationFilter?: string;
+    disableCalLink?: boolean;
+    removeDuplicates?: boolean;
+
+    compactMode?: boolean;
+    hoursOnSameLine?: boolean;
+    showTimeRemaining?: boolean;
+    showAllDayHours?: boolean;
+}
diff --git a/src/types/editor.ts b/src/types/editor.ts
@@ -0,0 +1,37 @@
+export interface Option {
+    name: string;
+    icon: string;
+    description: string;
+    show: boolean;
+    properties: UnionProperty[];
+}
+
+export interface Property {
+    type: string;
+    section?: string;
+    name: string;
+    label: string;
+    default?: string | boolean | number;
+}
+
+export interface DropdownProperty extends Property {
+    type: 'dropdown';
+    items: string[];
+    selected: number;
+}
+
+export interface InputProperty extends Property {
+    type: 'input';
+}
+
+export interface NumberProperty extends Property {
+    type: 'number';
+    min: number;
+    max: number;
+}
+
+export interface SwitchProperty extends Property {
+    type: 'switch';
+}
+
+export type UnionProperty = DropdownProperty | InputProperty | NumberProperty | SwitchProperty;
diff --git a/src/types/global.ts b/src/types/global.ts
@@ -0,0 +1,9 @@
+import { LovelaceCard, LovelaceCardEditor } from 'custom-card-helpers';
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'atomic-calendar-card-editor': LovelaceCardEditor;
+        'atomic-calendar-card': LovelaceCard;
+    }
+}