Allow moving cards (#2241)

This commit is contained in:
Paulus Schoutsen 2018-12-10 09:48:59 +01:00 committed by GitHub
parent f9182e5453
commit a33ff7479a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 118 additions and 0 deletions

View File

@ -8,6 +8,7 @@ import { confDeleteCard } from "../editor/delete-card";
import { HomeAssistant } from "../../../types";
import { LovelaceCardConfig } from "../../../data/lovelace";
import { Lovelace } from "../types";
import { swapCard } from "../editor/config-util";
export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
public cardConfig?: LovelaceCardConfig;
@ -46,6 +47,19 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
this.localize("ui.panel.lovelace.editor.edit_card.edit")
}</paper-button
>
<paper-icon-button
icon="hass:arrow-up"
@click="${this._cardUp}"
?disabled="${this.path![1] === 0}"
></paper-icon-button>
<paper-icon-button
icon="hass:arrow-down"
@click="${this._cardDown}"
?disabled="${
this.lovelace!.config.views[this.path![0]].cards!.length ===
this.path![1] + 1
}"
></paper-icon-button>
<paper-icon-button
class="delete"
icon="hass:delete"
@ -55,12 +69,30 @@ export class HuiCardOptions extends hassLocalizeLitMixin(LitElement) {
</div>
`;
}
private _editCard(): void {
showEditCardDialog(this, {
lovelace: this.lovelace!,
path: this.path!,
});
}
private _cardUp(): void {
const lovelace = this.lovelace!;
const path = this.path!;
lovelace.saveConfig(
swapCard(lovelace.config, path, [path[0], path[1] - 1])
);
}
private _cardDown(): void {
const lovelace = this.lovelace!;
const path = this.path!;
lovelace.saveConfig(
swapCard(lovelace.config, path, [path[0], path[1] + 1])
);
}
private _deleteCard(): void {
confDeleteCard(this.lovelace!, this.path!);
}

View File

@ -89,6 +89,38 @@ export const deleteCard = (
};
};
export const swapCard = (
config: LovelaceConfig,
path1: [number, number],
path2: [number, number]
): LovelaceConfig => {
const card1 = config.views[path1[0]].cards![path1[1]];
const card2 = config.views[path2[0]].cards![path2[1]];
const origView1 = config.views[path1[0]];
const newView1 = {
...origView1,
cards: origView1.cards!.map((origCard, index) =>
index === path1[1] ? card2 : origCard
),
};
const origView2 = path1[0] === path2[0] ? newView1 : config.views[path2[0]];
const newView2 = {
...origView2,
cards: origView2.cards!.map((origCard, index) =>
index === path2[1] ? card1 : origCard
),
};
return {
...config,
views: config.views.map((origView, index) =>
index === path2[0] ? newView2 : index === path1[0] ? newView1 : origView
),
};
};
export const addView = (
config: LovelaceConfig,
viewConfig: LovelaceViewConfig

View File

@ -0,0 +1,54 @@
import * as assert from "assert";
import { swapCard } from "../../../../src/panels/lovelace/editor/config-util";
import { LovelaceConfig } from "../../../../src/data/lovelace";
describe("swapCard", () => {
it("swaps 2 cards in same view", () => {
const config: LovelaceConfig = {
views: [
{},
{
cards: [{ type: "card1" }, { type: "card2" }],
},
],
};
const result = swapCard(config, [1, 0], [1, 1]);
const expected = {
views: [
{},
{
cards: [{ type: "card2" }, { type: "card1" }],
},
],
};
assert.deepEqual(expected, result);
});
it("swaps 2 cards in different views", () => {
const config: LovelaceConfig = {
views: [
{
cards: [{ type: "v1-c1" }, { type: "v1-c2" }],
},
{
cards: [{ type: "v2-c1" }, { type: "v2-c2" }],
},
],
};
const result = swapCard(config, [0, 0], [1, 1]);
const expected = {
views: [
{
cards: [{ type: "v2-c2" }, { type: "v1-c2" }],
},
{
cards: [{ type: "v2-c1" }, { type: "v1-c1" }],
},
],
};
assert.deepEqual(expected, result);
});
});