Skip to content

Commit

Permalink
move add/remove buttons for Horz. Butt. Stack to seperate file
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrBearPresident
MrBearPresident committed Jan 25, 2025
1 parent 3bba2c8 commit 40cbd54
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 101 deletions.
102 changes: 101 additions & 1 deletion src/cards/horizontal-buttons-stack/editor.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { html } from "lit";
import { fireEvent } from '../../tools/utils.js';

export function renderHorButtonStackEditor(editor){
if (!editor.buttonAdded) {
Expand All @@ -19,7 +20,7 @@ export function renderHorButtonStackEditor(editor){
<div class="card-config">
${editor.makeDropdown("Card type", "card_type", editor.cardTypeList)}
<div id="buttons-container">
${editor.makeButton()}
${makeButton(editor)}
</div>
<button class="icon-button" @click="${addButton}">
<ha-icon icon="mdi:plus"></ha-icon>
Expand Down Expand Up @@ -102,4 +103,103 @@ export function renderHorButtonStackEditor(editor){
${editor.makeVersion()}
</div>
`;
}

function makeButton(editor) {
let buttons = [];
for (let i = 1; i <= editor.buttonIndex; i++) {
buttons.push(html`
<div class="${i}_button">
<ha-expansion-panel outlined>
<h4 slot="header">
<ha-icon icon="mdi:border-radius"></ha-icon>
Button ${i} ${editor._config[i + '_name'] ? ("- " + editor._config[i + '_name']) : ""}
<button class="icon-button header" @click="${() => removeButton(editor,i)}">
<ha-icon icon="mdi:delete"></ha-icon>
</button>
</h4>
<div class="content">
<ha-textfield
label="Link / Hash to pop-up (e.g. #kitchen)"
.value="${editor._config[i + '_link'] || ''}"
.configValue="${i}_link"
@input="${editor._valueChanged}"
></ha-textfield>
<ha-textfield
label="Optional - Name"
.value="${editor._config[i + '_name'] || ''}"
.configValue="${i}_name"
@input="${editor._valueChanged}"
></ha-textfield>
<ha-icon-picker
label="Optional - Icon"
.value="${editor._config[i + '_icon'] || ''}"
.configValue="${i}_icon"
item-label-path="label"
item-value-path="value"
@value-changed="${editor._valueChanged}"
></ha-icon-picker>
<ha-form
.hass=${editor.hass}
.data=${editor._config}
.schema=${[
{ name: i+"_entity",
label: "Optional - Light / Light group (For background color)",
selector: { entity: {} },
},
]}
.computeLabel=${editor._computeLabelCallback}
@value-changed=${editor._valueChanged}
></ha-form>
<ha-form
.hass=${editor.hass}
.data=${editor._config}
.schema=${[
{ name: i+"_pir_sensor",
label: "Optional - Presence / Occupancy sensor (For button auto order)",
selector: { entity: {} },
},
]}
.computeLabel=${editor._computeLabelCallback}
@value-changed=${editor._valueChanged}
></ha-form>
<ha-alert alert-type="info">In fact you can also get the auto order with any entity type, for example you can add light groups to these fields and the order will change based on the last changed states.</ha-alert>
</div>
</ha-expansion-panel>
</div>
`);
}
return buttons;
}

function removeButton(editor, index) {
// Removing button fields
delete editor._config[index + '_name'];
delete editor._config[index + '_icon'];
delete editor._config[index + '_link'];
delete editor._config[index + '_entity'];
delete editor._config[index + '_pir_sensor'];

// Updating indexes of following buttons
for (let i = index; i < editor.buttonIndex; i++) {
editor._config[i + '_name'] = editor._config[(i + 1) + '_name'];
editor._config[i + '_icon'] = editor._config[(i + 1) + '_icon'];
editor._config[i + '_link'] = editor._config[(i + 1) + '_link'];
editor._config[i + '_entity'] = editor._config[(i + 1) + '_entity'];
editor._config[i + '_pir_sensor'] = editor._config[(i + 1) + '_pir_sensor'];
}

// Removing fields of the last button
delete editor._config[editor.buttonIndex + '_name'];
delete editor._config[editor.buttonIndex + '_icon'];
delete editor._config[editor.buttonIndex + '_link'];
delete editor._config[editor.buttonIndex + '_entity'];
delete editor._config[editor.buttonIndex + '_pir_sensor'];

// Updating index of the last button
editor.buttonIndex--;

fireEvent(editor, "config-changed", {
config: editor._config
});
}
100 changes: 0 additions & 100 deletions src/editor/bubble-card-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -777,74 +777,6 @@ class BubbleCardEditor extends LitElement {
`;
}

makeButton() {
let buttons = [];
for (let i = 1; i <= this.buttonIndex; i++) {
buttons.push(html`
<div class="${i}_button">
<ha-expansion-panel outlined>
<h4 slot="header">
<ha-icon icon="mdi:border-radius"></ha-icon>
Button ${i} ${this._config[i + '_name'] ? ("- " + this._config[i + '_name']) : ""}
<button class="icon-button header" @click="${() => this.removeButton(i)}">
<ha-icon icon="mdi:delete"></ha-icon>
</button>
</h4>
<div class="content">
<ha-textfield
label="Link / Hash to pop-up (e.g. #kitchen)"
.value="${this._config[i + '_link'] || ''}"
.configValue="${i}_link"
@input="${this._valueChanged}"
></ha-textfield>
<ha-textfield
label="Optional - Name"
.value="${this._config[i + '_name'] || ''}"
.configValue="${i}_name"
@input="${this._valueChanged}"
></ha-textfield>
<ha-icon-picker
label="Optional - Icon"
.value="${this._config[i + '_icon'] || ''}"
.configValue="${i}_icon"
item-label-path="label"
item-value-path="value"
@value-changed="${this._valueChanged}"
></ha-icon-picker>
<ha-form
.hass=${this.hass}
.data=${this._config}
.schema=${[
{ name: i+"_entity",
label: "Optional - Light / Light group (For background color)",
selector: { entity: {} },
},
]}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
<ha-form
.hass=${this.hass}
.data=${this._config}
.schema=${[
{ name: i+"_pir_sensor",
label: "Optional - Presence / Occupancy sensor (For button auto order)",
selector: { entity: {} },
},
]}
.computeLabel=${this._computeLabelCallback}
@value-changed=${this._valueChanged}
></ha-form>
<ha-alert alert-type="info">In fact you can also get the auto order with any entity type, for example you can add light groups to these fields and the order will change based on the last changed states.</ha-alert>
</div>
</ha-expansion-panel>
</div>
`);
}
return buttons;
}
makeVersion() {
return html`
<h4 class="version">
Expand All @@ -856,38 +788,6 @@ class BubbleCardEditor extends LitElement {
`;
}

removeButton(index) {
// Removing button fields
delete this._config[index + '_name'];
delete this._config[index + '_icon'];
delete this._config[index + '_link'];
delete this._config[index + '_entity'];
delete this._config[index + '_pir_sensor'];
// Updating indexes of following buttons
for (let i = index; i < this.buttonIndex; i++) {
this._config[i + '_name'] = this._config[(i + 1) + '_name'];
this._config[i + '_icon'] = this._config[(i + 1) + '_icon'];
this._config[i + '_link'] = this._config[(i + 1) + '_link'];
this._config[i + '_entity'] = this._config[(i + 1) + '_entity'];
this._config[i + '_pir_sensor'] = this._config[(i + 1) + '_pir_sensor'];
}
// Removing fields of the last button
delete this._config[this.buttonIndex + '_name'];
delete this._config[this.buttonIndex + '_icon'];
delete this._config[this.buttonIndex + '_link'];
delete this._config[this.buttonIndex + '_entity'];
delete this._config[this.buttonIndex + '_pir_sensor'];
// Updating index of the last button
this.buttonIndex--;
fireEvent(this, "config-changed", {
config: this._config
});
}
makeStyleEditor() {
return html`
<ha-expansion-panel outlined>
Expand Down

0 comments on commit 40cbd54

Please sign in to comment.