Reorg into panels (#75)
This commit is contained in:
Paulus Schoutsen
GitHub
@@ -0,0 +1,116 @@
|
||||
<!--
|
||||
<link rel='import' href='../../../bower_components/polymer/polymer.html'>
|
||||
<link rel='import' href='../../../bower_components/iron-image/iron-image.html'>
|
||||
<link rel='import' href='../../../bower_components/iron-icon/iron-icon.html'>
|
||||
-->
|
||||
|
||||
<dom-module id='ha-entity-marker'>
|
||||
<style is="custom-style" include="iron-positioning"></style>
|
||||
<style>
|
||||
.marker {
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 2.5em;
|
||||
text-align: center;
|
||||
height: 2.5em;
|
||||
line-height: 2.5em;
|
||||
font-size: 1.5em;
|
||||
border-radius: 50%;
|
||||
border: 0.1em solid var(--ha-marker-color, --default-primary-color);
|
||||
color: rgb(76, 76, 76);
|
||||
background-color: white;
|
||||
}
|
||||
iron-image {
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class='marker'>
|
||||
<template is='dom-if' if='[[icon]]'>
|
||||
<iron-icon icon='[[icon]]'></iron-icon>
|
||||
</template>
|
||||
<template is='dom-if' if='[[value]]'>[[value]]</template>
|
||||
<template is='dom-if' if='[[image]]'>
|
||||
<iron-image sizing='cover' class='fit' src='[[image]]'></iron-image>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
/*
|
||||
Leaflet clones this element before adding it to the map. This messes up
|
||||
our Poylmer object and we lose the reference to the `hass` object.
|
||||
|
||||
That's why we refer here to window.hass instead of the hass property.
|
||||
*/
|
||||
Polymer({
|
||||
is: 'ha-entity-marker',
|
||||
|
||||
properties: {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
entityId: {
|
||||
type: String,
|
||||
value: '',
|
||||
reflectToAttribute: true,
|
||||
},
|
||||
|
||||
state: {
|
||||
type: Object,
|
||||
computed: 'computeState(entityId)',
|
||||
},
|
||||
|
||||
icon: {
|
||||
type: Object,
|
||||
computed: 'computeIcon(state)',
|
||||
},
|
||||
|
||||
image: {
|
||||
type: Object,
|
||||
computed: 'computeImage(state)',
|
||||
},
|
||||
|
||||
value: {
|
||||
type: String,
|
||||
computed: 'computeValue(state)',
|
||||
},
|
||||
},
|
||||
|
||||
listeners: {
|
||||
tap: 'badgeTap',
|
||||
},
|
||||
|
||||
badgeTap: function (ev) {
|
||||
ev.stopPropagation();
|
||||
if (this.entityId) {
|
||||
this.async(function () {
|
||||
window.hass.moreInfoActions.selectEntity(this.entityId);
|
||||
}, 1);
|
||||
}
|
||||
},
|
||||
|
||||
computeState: function (entityId) {
|
||||
return entityId && window.hass.reactor.evaluate(window.hass.entityGetters.byId(entityId));
|
||||
},
|
||||
|
||||
computeIcon: function (state) {
|
||||
return !state && 'home';
|
||||
},
|
||||
|
||||
computeImage: function (state) {
|
||||
return state && state.attributes.entity_picture;
|
||||
},
|
||||
|
||||
computeValue: function (state) {
|
||||
return state &&
|
||||
state.entityDisplay.split(' ').map(function (part) {
|
||||
return part.substr(0, 1);
|
||||
}).join('');
|
||||
},
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,176 @@
|
||||
<!--
|
||||
<link rel="import" href="../../bower_components/polymer/polymer.html">
|
||||
<link rel='import' href='../../bower_components/paper-toolbar/paper-toolbar.html'>
|
||||
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||
<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
|
||||
-->
|
||||
<link rel="import" href="../../bower_components/leaflet-map/leaflet-map.html">
|
||||
|
||||
<!-- temp work around -->
|
||||
<link rel="stylesheet" href="../../bower_components/leaflet/dist/leaflet.css" />
|
||||
|
||||
<link rel="import" href="./ha-entity-marker.html">
|
||||
|
||||
<style>
|
||||
/* Otherwise they go through overlays. */
|
||||
.leaflet-top, .leaflet-bottom {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
margin-right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<dom-module id="ha-panel-map">
|
||||
<style is="custom-style" include="iron-flex iron-positioning"></style>
|
||||
<style>
|
||||
.map {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class='layout vertical fit'>
|
||||
<paper-toolbar>
|
||||
<paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
|
||||
<div class='title'>Map</div>
|
||||
</paper-toolbar>
|
||||
|
||||
<div class="flex map">
|
||||
<leaflet-map class="fit" fit-to-markers id="map" max-zoom="17">
|
||||
<leaflet-tilelayer max-zoom="18"
|
||||
url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png">
|
||||
© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://cartodb.com/attributions">CartoDB</a>
|
||||
</leaflet-tilelayer>
|
||||
|
||||
<template is='dom-repeat' items='[[zoneEntities]]'>
|
||||
<leaflet-divicon id="[[item.entityId]]" icon-width="24" icon-height="24">
|
||||
<template is='dom-if' if='[[item.attributes.icon]]'>
|
||||
<iron-icon icon$='[[item.attributes.icon]]'></iron-icon>
|
||||
</template>
|
||||
<template is='dom-if' if='[[!item.attributes.icon]]'>[[item.entityDisplay]]</template>
|
||||
</leaflet-divicon>
|
||||
|
||||
<leaflet-marker latitude="[[item.attributes.latitude]]" icon="[[item.entityId]]"
|
||||
longitude="[[item.attributes.longitude]]" title="[[item.entityDisplay]]"
|
||||
no-clickable></leaflet-marker>
|
||||
|
||||
<leaflet-circle latitude="[[item.attributes.latitude]]"
|
||||
longitude="[[item.attributes.longitude]]" no-clickable
|
||||
radius="[[item.attributes.radius]]" fill color="#FF9800">
|
||||
</leaflet-circle>
|
||||
</template>
|
||||
|
||||
<template is='dom-repeat' items='[[locationEntities]]'>
|
||||
<leaflet-divicon id="[[item.entityId]]" icon-height="45" icon-width="45">
|
||||
<ha-entity-marker hass='[[hass]]'
|
||||
entity-id="[[item.entityId]]"></ha-entity-marker>
|
||||
</leaflet-divicon>
|
||||
|
||||
<leaflet-marker latitude="[[item.attributes.latitude]]" icon="[[item.entityId]]"
|
||||
longitude="[[item.attributes.longitude]]" title="[[item.entityDisplay]]"
|
||||
></leaflet-marker>
|
||||
|
||||
<template is='dom-if' if='[[item.attributes.gps_accuracy]]'>
|
||||
<leaflet-circle latitude="[[item.attributes.latitude]]"
|
||||
longitude="[[item.attributes.longitude]]" no-clickable
|
||||
radius="[[item.attributes.gps_accuracy]]" fill color="#0288D1">
|
||||
</leaflet-circle>
|
||||
</template>
|
||||
</template>
|
||||
</leaflet-map>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
window.L.Icon.Default.imagePath = '/static/images/leaflet';
|
||||
|
||||
Polymer({
|
||||
is: 'ha-panel-map',
|
||||
|
||||
behaviors: [window.hassBehavior],
|
||||
|
||||
properties: {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
locationGPS: {
|
||||
type: Number,
|
||||
bindNuclear: function (hass) {
|
||||
return hass.configGetters.locationGPS;
|
||||
},
|
||||
},
|
||||
|
||||
locationName: {
|
||||
type: String,
|
||||
bindNuclear: function (hass) {
|
||||
return hass.configGetters.locationName;
|
||||
},
|
||||
},
|
||||
|
||||
locationEntities: {
|
||||
type: Array,
|
||||
bindNuclear: function (hass) {
|
||||
return [
|
||||
hass.entityGetters.visibleEntityMap,
|
||||
function (entities) {
|
||||
return entities.valueSeq().filter(
|
||||
function (entity) {
|
||||
return entity.attributes.latitude && entity.state !== 'home';
|
||||
}
|
||||
).toArray();
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
|
||||
zoneEntities: {
|
||||
type: Array,
|
||||
bindNuclear: function (hass) {
|
||||
return [
|
||||
hass.entityGetters.entityMap,
|
||||
function (entities) {
|
||||
return entities.valueSeq()
|
||||
.filter(function (entity) {
|
||||
return entity.domain === 'zone' && !entity.attributes.passive;
|
||||
}).toArray();
|
||||
},
|
||||
];
|
||||
},
|
||||
},
|
||||
|
||||
narrow: {
|
||||
type: Boolean,
|
||||
},
|
||||
|
||||
showMenu: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
|
||||
attached: function () {
|
||||
// On Safari, iPhone 5, 5s and some 6 I have observed that the user would be
|
||||
// unable to pan on initial load. This fixes it.
|
||||
if (window.L.Browser.mobileWebkit || window.L.Browser.webkit) {
|
||||
this.async(function () {
|
||||
var map = this.$.map;
|
||||
var prev = map.style.display;
|
||||
map.style.display = 'none';
|
||||
this.async(function () { map.style.display = prev; }, 1);
|
||||
}.bind(this), 1);
|
||||
}
|
||||
},
|
||||
|
||||
computeMenuButtonClass: function (narrow, showMenu) {
|
||||
return !narrow && showMenu ? 'menu-icon invisible' : 'menu-icon';
|
||||
},
|
||||
|
||||
toggleMenu: function () {
|
||||
this.fire('open-menu');
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user