mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-15 05:16:34 +00:00
Turn ha-cards.html into ES6 class (#533)
This commit is contained in:
Andrey
Paulus Schoutsen
parent
5e63f14b38
commit
17402a1976
@ -1,4 +1,4 @@
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
|
||||
|
||||
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
|
||||
|
||||
@ -46,7 +46,6 @@
|
||||
max-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class='main'>
|
||||
@ -77,11 +76,9 @@
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
{
|
||||
// mapping domain to size of the card.
|
||||
var DOMAINS_WITH_CARD = {
|
||||
const DOMAINS_WITH_CARD = {
|
||||
camera: 4,
|
||||
history_graph: 4,
|
||||
media_player: 3,
|
||||
@ -95,7 +92,7 @@
|
||||
// groups: X
|
||||
// rest: 100
|
||||
|
||||
var PRIORITY = {
|
||||
const PRIORITY = {
|
||||
// before groups < 0
|
||||
configurator: -20,
|
||||
persistent_notification: -15,
|
||||
@ -119,9 +116,9 @@
|
||||
}
|
||||
|
||||
function entitySortBy(entityA, entityB) {
|
||||
var nameA = (entityA.attributes.friendly_name ||
|
||||
const nameA = (entityA.attributes.friendly_name ||
|
||||
entityA.entity_id).toLowerCase();
|
||||
var nameB = (entityB.attributes.friendly_name ||
|
||||
const nameB = (entityB.attributes.friendly_name ||
|
||||
entityB.entity_id).toLowerCase();
|
||||
|
||||
if (nameA < nameB) {
|
||||
@ -135,61 +132,53 @@
|
||||
|
||||
function iterateDomainSorted(collection, func) {
|
||||
Object.keys(collection)
|
||||
.map(function (key) { return collection[key]; })
|
||||
.map(key => collection[key])
|
||||
.sort(sortPriority)
|
||||
.forEach(function (domain) {
|
||||
.forEach((domain) => {
|
||||
domain.states.sort(entitySortBy);
|
||||
func(domain);
|
||||
});
|
||||
}
|
||||
|
||||
var computeDomain = window.hassUtil.computeDomain;
|
||||
const computeDomain = window.hassUtil.computeDomain;
|
||||
|
||||
Polymer({
|
||||
is: 'ha-cards',
|
||||
class HaCards extends Polymer.Element {
|
||||
static get is() { return 'ha-cards'; }
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
|
||||
properties: {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
showIntroduction: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
showIntroduction: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
columns: {
|
||||
type: Number,
|
||||
value: 2,
|
||||
},
|
||||
|
||||
columns: {
|
||||
type: Number,
|
||||
value: 2,
|
||||
},
|
||||
states: Object,
|
||||
panelVisible: Boolean,
|
||||
|
||||
states: {
|
||||
type: Object,
|
||||
},
|
||||
viewVisible: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
panelVisible: {
|
||||
type: Boolean,
|
||||
},
|
||||
orderedGroups: Array,
|
||||
|
||||
viewVisible: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
cards: Object,
|
||||
};
|
||||
}
|
||||
|
||||
orderedGroups: {
|
||||
type: Array,
|
||||
},
|
||||
static get observers() {
|
||||
return [
|
||||
'updateCards(columns, states, showIntroduction, panelVisible, viewVisible, orderedGroups)',
|
||||
];
|
||||
}
|
||||
|
||||
cards: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
|
||||
observers: [
|
||||
'updateCards(columns, states, showIntroduction, panelVisible, viewVisible, orderedGroups)',
|
||||
],
|
||||
|
||||
updateCards: function (
|
||||
updateCards(
|
||||
columns,
|
||||
states,
|
||||
showIntroduction,
|
||||
@ -200,33 +189,36 @@
|
||||
if (!panelVisible || !viewVisible) {
|
||||
return;
|
||||
}
|
||||
this.debounce('updateCards', function () {
|
||||
// Things might have changed since it got scheduled.
|
||||
if (this.panelVisible && this.viewVisible) {
|
||||
this.cards = this.computeCards(columns, states, showIntroduction, orderedGroups);
|
||||
this._debouncer = Polymer.Debouncer.debounce(
|
||||
this._debouncer,
|
||||
Polymer.Async.timeOut.after(10),
|
||||
() => {
|
||||
// Things might have changed since it got scheduled.
|
||||
if (this.panelVisible && this.viewVisible) {
|
||||
this.cards = this.computeCards(columns, states, showIntroduction, orderedGroups);
|
||||
}
|
||||
}
|
||||
}.bind(this), 10);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
computeCards: function (columns, states, showIntroduction, orderedGroups) {
|
||||
var hass = this.hass;
|
||||
computeCards(columns, states, showIntroduction, orderedGroups) {
|
||||
const hass = this.hass;
|
||||
|
||||
var cards = {
|
||||
const cards = {
|
||||
demo: false,
|
||||
badges: [],
|
||||
columns: [],
|
||||
};
|
||||
var entityCount = [];
|
||||
var i;
|
||||
for (i = 0; i < columns; i++) {
|
||||
const entityCount = [];
|
||||
for (let i = 0; i < columns; i++) {
|
||||
cards.columns.push([]);
|
||||
entityCount.push(0);
|
||||
}
|
||||
|
||||
// Find column with < 5 entities, else column with lowest count
|
||||
function getIndex(size) {
|
||||
var minIndex = 0;
|
||||
for (i = 0; i < entityCount.length; i++) {
|
||||
let minIndex = 0;
|
||||
for (let i = 0; i < entityCount.length; i++) {
|
||||
if (entityCount[i] < 5) {
|
||||
minIndex = i;
|
||||
break;
|
||||
@ -250,19 +242,15 @@
|
||||
}
|
||||
|
||||
function addEntitiesCard(name, entities, groupEntity) {
|
||||
var owncard;
|
||||
var other;
|
||||
var size;
|
||||
var curIndex;
|
||||
if (entities.length === 0) return;
|
||||
|
||||
owncard = [];
|
||||
other = [];
|
||||
const owncard = [];
|
||||
const other = [];
|
||||
|
||||
size = 0;
|
||||
let size = 0;
|
||||
|
||||
entities.forEach(function (entity) {
|
||||
var domain = computeDomain(entity);
|
||||
entities.forEach((entity) => {
|
||||
const domain = computeDomain(entity);
|
||||
|
||||
if (domain in DOMAINS_WITH_CARD) {
|
||||
owncard.push(entity);
|
||||
@ -276,7 +264,7 @@
|
||||
// Add 1 to the size if we're rendering entities card
|
||||
size += other.length > 0;
|
||||
|
||||
curIndex = getIndex(size);
|
||||
const curIndex = getIndex(size);
|
||||
|
||||
if (other.length > 0) {
|
||||
cards.columns[curIndex].push({
|
||||
@ -287,7 +275,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
owncard.forEach(function (entity) {
|
||||
owncard.forEach((entity) => {
|
||||
cards.columns[curIndex].push({
|
||||
hass: hass,
|
||||
cardType: computeDomain(entity),
|
||||
@ -296,7 +284,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
var splitted = window.HAWS.splitByGroups(states);
|
||||
const splitted = window.HAWS.splitByGroups(states);
|
||||
if (orderedGroups) {
|
||||
splitted.groups.sort((gr1, gr2) => orderedGroups[gr1.entity_id] -
|
||||
orderedGroups[gr2.entity_id]);
|
||||
@ -304,21 +292,21 @@
|
||||
splitted.groups.sort((gr1, gr2) => gr1.attributes.order - gr2.attributes.order);
|
||||
}
|
||||
|
||||
var badgesColl = {};
|
||||
var beforeGroupColl = {};
|
||||
var afterGroupedColl = {};
|
||||
const badgesColl = {};
|
||||
const beforeGroupColl = {};
|
||||
const afterGroupedColl = {};
|
||||
|
||||
Object.keys(splitted.ungrouped).forEach(function (key) {
|
||||
var state = splitted.ungrouped[key];
|
||||
var domain = computeDomain(state);
|
||||
Object.keys(splitted.ungrouped).forEach((key) => {
|
||||
const state = splitted.ungrouped[key];
|
||||
const domain = computeDomain(state);
|
||||
|
||||
if (domain === 'a') {
|
||||
cards.demo = true;
|
||||
return;
|
||||
}
|
||||
|
||||
var priority = getPriority(domain);
|
||||
var coll;
|
||||
const priority = getPriority(domain);
|
||||
let coll;
|
||||
|
||||
if (priority < 0) {
|
||||
coll = beforeGroupColl;
|
||||
@ -339,36 +327,33 @@
|
||||
coll[domain].states.push(state);
|
||||
});
|
||||
|
||||
iterateDomainSorted(badgesColl, function (domain) {
|
||||
iterateDomainSorted(badgesColl, (domain) => {
|
||||
cards.badges.push.apply(cards.badges, domain.states);
|
||||
});
|
||||
|
||||
iterateDomainSorted(beforeGroupColl, function (domain) {
|
||||
iterateDomainSorted(beforeGroupColl, (domain) => {
|
||||
addEntitiesCard(domain.domain, domain.states);
|
||||
});
|
||||
|
||||
splitted.groups.forEach(function (groupState) {
|
||||
var entities = window.HAWS.getGroupEntities(states, groupState);
|
||||
splitted.groups.forEach((groupState) => {
|
||||
const entities = window.HAWS.getGroupEntities(states, groupState);
|
||||
addEntitiesCard(
|
||||
groupState.entity_id,
|
||||
Object.keys(entities).map(function (key) {
|
||||
return entities[key];
|
||||
}),
|
||||
Object.keys(entities).map(key => entities[key]),
|
||||
groupState
|
||||
);
|
||||
});
|
||||
|
||||
iterateDomainSorted(afterGroupedColl, function (domain) {
|
||||
iterateDomainSorted(afterGroupedColl, (domain) => {
|
||||
addEntitiesCard(domain.domain, domain.states);
|
||||
});
|
||||
|
||||
// Remove empty columns
|
||||
cards.columns = cards.columns.filter(function (val) {
|
||||
return val.length > 0;
|
||||
});
|
||||
cards.columns = cards.columns.filter(val => val.length > 0);
|
||||
|
||||
return cards;
|
||||
},
|
||||
});
|
||||
}());
|
||||
}
|
||||
}
|
||||
customElements.define(HaCards.is, HaCards);
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user