Skip to content

Commit

Permalink
refactor: add 'yaml-editor' action to IMAGE_CONFIG_ACTIONS enum
Browse files Browse the repository at this point in the history
  • Loading branch information
@ngocjohn
ngocjohn committed Nov 26, 2024
1 parent 00d7bd4 commit dc9bd62
Show file tree
Hide file tree
Showing 4 changed files with 299 additions and 142 deletions.
50 changes: 48 additions & 2 deletions src/editor/components/panel-images-editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { customElement, property, state } from 'lit/decorators';
import { repeat } from 'lit/directives/repeat.js';
import Sortable from 'sortablejs';

import './sub-panel-yaml';
import { ICON } from '../../const/const';
import editorcss from '../../css/editor.css';
import { VehicleStatusCardConfig, ImageConfig, HA as HomeAssistant } from '../../types';
Expand All @@ -20,6 +21,7 @@ export class PanelImagesEditor extends LitElement {
@property({ type: Array }) _images!: ImageConfig[];
@property({ type: Boolean }) isDragging = false;

@state() _yamlEditorActive = false;
@state() _newImage: string = '';
@state() _sortable: Sortable | null = null;
@state() _reindexImages: boolean = false;
Expand Down Expand Up @@ -155,7 +157,7 @@ export class PanelImagesEditor extends LitElement {
</ha-alert>`
: html``;
const dropArea = this._renderDropArea();

const yamlEditor = this._renderYamlEditor();
const actionMap = [
{ title: 'Show Image', icon: 'mdi:eye', action: IMAGE_ACTIONS.SHOW_IMAGE },
{ title: 'Delete Image', icon: 'mdi:delete', action: IMAGE_ACTIONS.DELETE },
Expand Down Expand Up @@ -207,8 +209,29 @@ export class PanelImagesEditor extends LitElement {

const actionFooter = html`<div class="action-footer">
<ha-button id="upload-btn" @click=${this.toggleAction('upload')}>Add Image</ha-button>
<ha-button id="yaml-btn" @click=${this.toggleAction('yaml-editor')}>Edit YAML</ha-button>
</div> `;
return html` ${infoText} ${dropArea} ${imageList} ${actionFooter} `;
return html` ${infoText} ${dropArea} ${imageList} ${yamlEditor} ${actionFooter} `;
}
private _renderYamlEditor(): TemplateResult {
return html`
<div id="yaml-editor" style="display: none;">
<vsc-sub-panel-yaml
.hass=${this._hass}
.config=${this.config}
.configDefault=${this.config.images}
@yaml-config-changed=${this._yamlChanged}
></vsc-sub-panel-yaml>
</div>
`;
}

private _yamlChanged(ev: CustomEvent): void {
ev.stopPropagation();
const { isValid, value } = ev.detail;
if (!isValid || !this.config) return;
this.config = { ...this.config, images: value };
fireEvent(this, 'config-changed', { config: this.config });
}

private _renderDropArea(): TemplateResult {
Expand Down Expand Up @@ -402,6 +425,7 @@ export class PanelImagesEditor extends LitElement {
const dropArea = this.shadowRoot?.getElementById('drop-area') as HTMLElement;
const imageList = this.shadowRoot?.getElementById('images-list') as HTMLElement;
const addImageBtn = this.shadowRoot?.getElementById('upload-btn') as HTMLElement;

const isHidden = dropArea?.style.display === 'none';
if (isHidden) {
dropArea.style.display = 'block';
Expand All @@ -414,6 +438,25 @@ export class PanelImagesEditor extends LitElement {
}
};

const showYamlEditor = () => {
const yamlEditor = this.shadowRoot?.getElementById('yaml-editor') as HTMLElement;
const imageList = this.shadowRoot?.getElementById('images-list') as HTMLElement;
const addImageBtn = this.shadowRoot?.getElementById('upload-btn') as HTMLElement;
const yamlBtn = this.shadowRoot?.getElementById('yaml-btn') as HTMLElement;
const yamlEditorActive = yamlEditor?.style.display === 'block';
if (!yamlEditorActive) {
yamlEditor.style.display = 'block';
imageList.style.display = 'none';
addImageBtn.style.display = 'none';
yamlBtn.innerHTML = 'Close YAML Editor';
} else {
yamlEditor.style.display = 'none';
imageList.style.display = 'block';
addImageBtn.style.display = 'block';
yamlBtn.innerHTML = 'Edit YAML';
}
};

const handleImageAction = () => {
switch (action) {
case 'delete':
Expand Down Expand Up @@ -446,6 +489,9 @@ export class PanelImagesEditor extends LitElement {
case 'show-image':
this.editor?._dispatchEvent('show-image', { index: idx });
break;
case 'yaml-editor':
showYamlEditor();
break;
}
};
handleImageAction();
Expand Down
59 changes: 59 additions & 0 deletions src/editor/components/panel-indicator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ export class PanelIndicator extends LitElement {

@state() _reindexItems: boolean = false;
@state() _addFormVisible: boolean = false;
@state() _yamlEditorVisible: boolean = false;

constructor() {
super();
this._closeSubPanel = this._closeSubPanel.bind(this);
Expand Down Expand Up @@ -279,6 +281,55 @@ export class PanelIndicator extends LitElement {

/* ----------------------------- TEMPLATE UI ----------------------------- */

private _renderYamlEditor(): TemplateResult {
if (!this._yamlEditorVisible) {
return html``;
}
const singleIndicators = this.config.indicators?.single || [];
const groupIndicators = this.config.indicators?.group || [];
const yamlConfig = {
single: singleIndicators,
group: groupIndicators,
};
const header = html`
<div class="sub-header">
<div class="icon-title" @click=${() => (this._yamlEditorVisible = false)}>
<ha-icon icon="mdi:close"></ha-icon>
<span>Close editor</span>
</div>
<div>YAML editor</div>
</div>
`;
return html` ${header}
<div class="sub-panel-config">
<vsc-sub-panel-yaml
.hass=${this.hass}
.config=${yamlConfig}
.cardEditor=${this.editor}
.configDefault=${yamlConfig[this.type]}
.configIndex=${0}
.configKey=${this.type}
@yaml-config-changed=${this._handleYamlConfigChange}
></vsc-sub-panel-yaml>
</div>`;
}

private _handleYamlConfigChange(ev: CustomEvent): void {
ev.stopPropagation();
const detail = ev.detail;
const { key, value, isValid } = detail;
if (!isValid || !this.config) {
return;
}
if (key === 'single') {
this.config = { ...this.config, indicators: { ...this.config.indicators, single: value } };
} else if (key === 'group') {
this.config = { ...this.config, indicators: { ...this.config.indicators, group: value } };
}
fireEvent(this, 'config-changed', { config: this.config });
console.log('YAML config changed:', key, value);
}

private _renderAddTemplate(type: string): TemplateResult {
if (!this._addFormVisible) {
return html``;
Expand Down Expand Up @@ -398,6 +449,9 @@ export class PanelIndicator extends LitElement {

if (type === 'single') {
const singleIndicators: IndicatorConfig[] = this.config.indicators?.single || [];
if (this._yamlEditorVisible) {
return this._renderYamlEditor();
}
return this._renderIndicatorContent(
singleIndicators,
(single: IndicatorConfig) => single.entity,
Expand All @@ -416,6 +470,9 @@ export class PanelIndicator extends LitElement {
);
} else if (type === 'group') {
const groupIndicators: IndicatorGroupConfig[] = this.config.indicators?.group || [];
if (this._yamlEditorVisible) {
return this._renderYamlEditor();
}
return this._renderIndicatorContent(
groupIndicators,
(group: IndicatorGroupConfig) => group.name,
Expand Down Expand Up @@ -494,6 +551,8 @@ export class PanelIndicator extends LitElement {
<ha-button @click=${() => (this._addFormVisible = !this._addFormVisible)}
>${this._addFormVisible ? 'Cancel' : `Add new ${this.type}`}</ha-button
>
<ha-button @click=${() => (this._yamlEditorVisible = !this._yamlEditorVisible)}>Edit YAML</ha-button>
${this._renderAddTemplate(this.type)}
</div>
`;
Expand Down
Loading

0 comments on commit dc9bd62

Please sign in to comment.