Performance upgrades
This commit is contained in:
parent
eab7940b4d
commit
a3b5484a7e
|
@ -1,5 +1,7 @@
|
|||
import Polymer from '../polymer';
|
||||
|
||||
import dynamicContentUpdater from '../util/dynamic-content-updater';
|
||||
|
||||
require('./ha-camera-card');
|
||||
require('./ha-entities-card');
|
||||
require('./ha-introduction-card');
|
||||
|
@ -14,40 +16,10 @@ export default new Polymer({
|
|||
},
|
||||
},
|
||||
|
||||
cardDataChanged(newData, oldData) {
|
||||
const root = Polymer.dom(this);
|
||||
cardDataChanged(newData) {
|
||||
if (!newData) return;
|
||||
|
||||
if (!newData) {
|
||||
if (root.lastChild) {
|
||||
root.removeChild(root.lastChild);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const newElement = !oldData || oldData.cardType !== newData.cardType;
|
||||
let card;
|
||||
if (newElement) {
|
||||
if (root.lastChild) {
|
||||
root.removeChild(root.lastChild);
|
||||
}
|
||||
|
||||
card = document.createElement(`ha-${newData.cardType}-card`);
|
||||
} else {
|
||||
card = root.lastChild;
|
||||
}
|
||||
|
||||
Object.keys(newData).forEach(key => card[key] = newData[key]);
|
||||
|
||||
if (oldData) {
|
||||
Object.keys(oldData).forEach(key => {
|
||||
if (!(key in newData)) {
|
||||
card[key] = undefined;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (newElement) {
|
||||
root.appendChild(card);
|
||||
}
|
||||
dynamicContentUpdater(this, `HA-${newData.cardType.toUpperCase()}-CARD`,
|
||||
newData);
|
||||
},
|
||||
});
|
||||
|
|
|
@ -52,10 +52,21 @@ export default new Polymer({
|
|||
|
||||
cards: {
|
||||
type: Object,
|
||||
computed: 'computeCards(columns, states, showIntroduction)',
|
||||
},
|
||||
},
|
||||
|
||||
observers: [
|
||||
'updateCards(columns, states, showIntroduction)',
|
||||
],
|
||||
|
||||
updateCards(columns, states, showIntroduction) {
|
||||
this.debounce(
|
||||
'updateCards',
|
||||
() => this.cards = this.computeCards(columns, states, showIntroduction),
|
||||
0
|
||||
);
|
||||
},
|
||||
|
||||
computeCards(columns, states, showIntroduction) {
|
||||
const byDomain = states.groupBy(entity => entity.domain);
|
||||
const hasGroup = {};
|
||||
|
|
|
@ -44,8 +44,7 @@
|
|||
is-loading-data="[[isLoadingHistoryData]]"></state-history-charts>
|
||||
</template>
|
||||
<paper-dialog-scrollable>
|
||||
<more-info-content state-obj="[[stateObj]]"
|
||||
dialog-open="[[dialogOpen]]"></more-info-content>
|
||||
<more-info-content state-obj="[[stateObj]]"></more-info-content>
|
||||
</paper-dialog-scrollable>
|
||||
</div>
|
||||
</paper-dialog>
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
</style>
|
||||
|
||||
<template>
|
||||
<img class='camera-image' src="[[computeCameraImageUrl(dialogOpen)]]"
|
||||
<img class='camera-image' src="[[computeCameraImageUrl(stateObj)]]"
|
||||
on-load='imageLoaded' />
|
||||
</template>
|
||||
</dom-module>
|
||||
|
|
|
@ -7,22 +7,19 @@ export default new Polymer({
|
|||
stateObj: {
|
||||
type: Object,
|
||||
},
|
||||
dialogOpen: {
|
||||
type: Boolean,
|
||||
},
|
||||
},
|
||||
|
||||
imageLoaded() {
|
||||
this.fire('iron-resize');
|
||||
},
|
||||
|
||||
computeCameraImageUrl(dialogOpen) {
|
||||
computeCameraImageUrl(stateObj) {
|
||||
if (__DEMO__) {
|
||||
return '/demo/webcam.jpg';
|
||||
} else if (dialogOpen) {
|
||||
} else if (stateObj) {
|
||||
return `/api/camera_proxy_stream/${this.stateObj.entityId}`;
|
||||
}
|
||||
// Return an empty image if dialog is not open
|
||||
// Return an empty image if no stateObj (= dialog not open)
|
||||
return 'data:image/gif;base64,R0lGODlhAQABAAAAACw=';
|
||||
},
|
||||
});
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
import Polymer from '../polymer';
|
||||
|
||||
import dynamicContentUpdater from '../util/dynamic-content-updater';
|
||||
import stateMoreInfoType from '../util/state-more-info-type';
|
||||
|
||||
require('./more-info-default');
|
||||
|
@ -22,46 +24,12 @@ export default new Polymer({
|
|||
type: Object,
|
||||
observer: 'stateObjChanged',
|
||||
},
|
||||
|
||||
dialogOpen: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
observer: 'dialogOpenChanged',
|
||||
},
|
||||
},
|
||||
|
||||
dialogOpenChanged(newVal) {
|
||||
const root = Polymer.dom(this);
|
||||
stateObjChanged(stateObj) {
|
||||
if (!stateObj) return;
|
||||
|
||||
if (root.lastChild) {
|
||||
root.lastChild.dialogOpen = newVal;
|
||||
}
|
||||
},
|
||||
|
||||
stateObjChanged(newVal, oldVal) {
|
||||
const root = Polymer.dom(this);
|
||||
|
||||
if (!newVal) {
|
||||
if (root.lastChild) {
|
||||
root.removeChild(root.lastChild);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const newMoreInfoType = stateMoreInfoType(newVal);
|
||||
|
||||
if (!oldVal || stateMoreInfoType(oldVal) !== newMoreInfoType) {
|
||||
if (root.lastChild) {
|
||||
root.removeChild(root.lastChild);
|
||||
}
|
||||
|
||||
const moreInfo = document.createElement(`more-info-${newMoreInfoType}`);
|
||||
moreInfo.stateObj = newVal;
|
||||
moreInfo.dialogOpen = this.dialogOpen;
|
||||
root.appendChild(moreInfo);
|
||||
} else {
|
||||
root.lastChild.dialogOpen = this.dialogOpen;
|
||||
root.lastChild.stateObj = newVal;
|
||||
}
|
||||
dynamicContentUpdater(
|
||||
this, `MORE-INFO-${stateMoreInfoType(stateObj).toUpperCase()}`, { stateObj });
|
||||
},
|
||||
});
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import Polymer from '../polymer';
|
||||
|
||||
import stateCardType from '../util/state-card-type';
|
||||
import dynamicContentUpdater from '../util/dynamic-content-updater';
|
||||
|
||||
require('./state-card-configurator');
|
||||
require('./state-card-display');
|
||||
|
@ -22,28 +23,10 @@ export default new Polymer({
|
|||
},
|
||||
},
|
||||
|
||||
stateObjChanged(newVal, oldVal) {
|
||||
const root = Polymer.dom(this);
|
||||
stateObjChanged(stateObj) {
|
||||
if (!stateObj) return;
|
||||
|
||||
if (!newVal) {
|
||||
if (root.lastChild) {
|
||||
root.removeChild(root.lastChild);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const newCardType = stateCardType(newVal);
|
||||
|
||||
if (!oldVal || stateCardType(oldVal) !== newCardType) {
|
||||
if (root.lastChild) {
|
||||
root.removeChild(root.lastChild);
|
||||
}
|
||||
|
||||
const stateCard = document.createElement(`state-card-${newCardType}`);
|
||||
stateCard.stateObj = newVal;
|
||||
root.appendChild(stateCard);
|
||||
} else {
|
||||
root.lastChild.stateObj = newVal;
|
||||
}
|
||||
dynamicContentUpdater(
|
||||
this, `STATE-CARD-${stateCardType(stateObj).toUpperCase()}`, { stateObj });
|
||||
},
|
||||
});
|
||||
|
|
|
@ -0,0 +1,22 @@
|
|||
import Polymer from '../polymer';
|
||||
|
||||
export default function dynamicContentUpdater(root, newElementTag, attributes) {
|
||||
const rootEl = Polymer.dom(root);
|
||||
|
||||
let customEl;
|
||||
|
||||
if (rootEl.lastChild && rootEl.lastChild.tagName === newElementTag) {
|
||||
customEl = rootEl.lastChild;
|
||||
} else {
|
||||
if (rootEl.lastChild) {
|
||||
rootEl.removeChild(rootEl.lastChild);
|
||||
}
|
||||
customEl = document.createElement(newElementTag);
|
||||
}
|
||||
|
||||
Object.keys(attributes).forEach(key => customEl[key] = attributes[key]);
|
||||
|
||||
if (customEl.parentNode === null) {
|
||||
rootEl.appendChild(customEl);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue