Move views (#2610)

* A start, still buggy...

* Tests and move with view

* Lint
This commit is contained in:
Bram Kragten 2019-01-30 18:55:44 +01:00 committed by Paulus Schoutsen
parent 2ad27f7400
commit b37eee56c0
3 changed files with 122 additions and 1 deletions

View File

@ -178,6 +178,22 @@ export const replaceView = (
),
});
export const swapView = (
config: LovelaceConfig,
path1: number,
path2: number
): LovelaceConfig => {
const view1 = config.views[path1];
const view2 = config.views[path2];
return {
...config,
views: config.views.map((origView, index) =>
index === path2 ? view1 : index === path1 ? view2 : origView
),
};
};
export const deleteView = (
config: LovelaceConfig,
viewIndex: number

View File

@ -35,6 +35,8 @@ import { LovelaceConfig } from "../../data/lovelace";
import { navigate } from "../../common/navigate";
import { fireEvent } from "../../common/dom/fire_event";
import { computeNotifications } from "./common/compute-notifications";
import { swapView } from "./editor/config-util";
import "./components/notifications/hui-notification-drawer";
import "./components/notifications/hui-notifications-button";
import "./hui-view";
@ -235,6 +237,17 @@ class HUIRoot extends LitElement {
${this.lovelace!.config.views.map(
(view) => html`
<paper-tab>
${this._editMode
? html`
<paper-icon-button
title="Move view left"
class="edit-icon view"
icon="hass:arrow-left"
@click="${this._moveViewLeft}"
?disabled="${this._curView === 0}"
></paper-icon-button>
`
: ""}
${view.icon
? html`
<ha-icon
@ -246,10 +259,20 @@ class HUIRoot extends LitElement {
${this._editMode
? html`
<ha-icon
title="Edit view"
class="edit-icon view"
@click="${this._editView}"
icon="hass:pencil"
@click="${this._editView}"
></ha-icon>
<paper-icon-button
title="Move view right"
class="edit-icon view"
icon="hass:arrow-right"
@click="${this._moveViewRight}"
?disabled="${(this._curView! as number) +
1 ===
this.lovelace!.config.views.length}"
></paper-icon-button>
`
: ""}
</paper-tab>
@ -314,6 +337,9 @@ class HUIRoot extends LitElement {
color: var(--accent-color);
padding-left: 8px;
}
.edit-icon[disabled] {
color: var(--disabled-text-color);
}
.edit-icon.view {
display: none;
}
@ -511,6 +537,22 @@ class HUIRoot extends LitElement {
});
}
private _moveViewLeft() {
const lovelace = this.lovelace!;
const oldIndex = this._curView as number;
const newIndex = (this._curView as number) - 1;
this._curView = newIndex;
lovelace.saveConfig(swapView(lovelace.config, oldIndex, newIndex));
}
private _moveViewRight() {
const lovelace = this.lovelace!;
const oldIndex = this._curView as number;
const newIndex = (this._curView as number) + 1;
this._curView = newIndex;
lovelace.saveConfig(swapView(lovelace.config, oldIndex, newIndex));
}
private _addView() {
showEditViewDialog(this, {
lovelace: this.lovelace!,

View File

@ -3,6 +3,7 @@ import * as assert from "assert";
import {
swapCard,
moveCard,
swapView,
} from "../../../../src/panels/lovelace/editor/config-util";
import { LovelaceConfig } from "../../../../src/data/lovelace";
@ -129,3 +130,65 @@ describe("moveCard", () => {
);
});
});
describe("swapView", () => {
it("swaps 2 view", () => {
const config: LovelaceConfig = {
views: [
{
title: "view1",
cards: [],
},
{
title: "view2",
cards: [],
},
],
};
const result = swapView(config, 1, 0);
const expected = {
views: [
{
title: "view2",
cards: [],
},
{
title: "view1",
cards: [],
},
],
};
assert.deepEqual(expected, result);
});
it("swaps the same views", () => {
const config: LovelaceConfig = {
views: [
{
title: "view1",
cards: [],
},
{
title: "view2",
cards: [],
},
],
};
const result = swapView(config, 0, 0);
const expected = {
views: [
{
title: "view1",
cards: [],
},
{
title: "view2",
cards: [],
},
],
};
assert.deepEqual(expected, result);
});
});