iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
1 lines • 15.5 kB
JavaScript
export const __rspack_esm_id=12122;export const __rspack_esm_ids=[12122];export const __webpack_modules__={80804(t,e,i){i.d(e,{H:()=>a});i(18111),i(61701);const a=async(t,e)=>{if(!t.parentNode)throw new Error("Cannot setup Leaflet map on disconnected element");const a=(await Promise.resolve().then(i.t.bind(i,78572,23))).default;a.Icon.Default.imagePath="/static/images/leaflet/images/",await i.e(83757).then(i.t.bind(i,17948,23));const o=a.map(t),r=document.createElement("link");r.setAttribute("href","/static/images/leaflet/leaflet.css"),r.setAttribute("rel","stylesheet"),t.parentNode.appendChild(r);const n=document.createElement("link");n.setAttribute("href","/static/images/leaflet/MarkerCluster.css"),n.setAttribute("rel","stylesheet"),t.parentNode.appendChild(n),e&&o.setView([e.latitude,e.longitude],e.zoom??13);return[o,a,s(a).addTo(o)]},s=t=>t.tileLayer("https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}"+(t.Browser.retina?"@2x.png":".png"),{attribution:'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <a href="https://carto.com/attributions">CARTO</a>',subdomains:"abcd",minZoom:0,maxZoom:20})},3894(t,e,i){i.d(e,{q:()=>s});var a=i(78572);class s extends a.Marker{onAdd(t){return super.onAdd(t),this.decorationLayer?.addTo(t),this}onRemove(t){return this.decorationLayer?.remove(),super.onRemove(t)}constructor(t,e,i){super(t,i),this.decorationLayer=e}}},75428(t,e,i){i.d(e,{D:()=>o});var a=i(75158),s=i.n(a);const o=t=>s()(t,{whiteList:{},stripIgnoreTag:!0,stripIgnoreTagBody:!0})},30219(t,e,i){i.a(t,async function(t,e){try{var a=i(62826),s=i(5124),o=i(22441),r=i(89784),n=i(1087),h=i(93367),l=t([h]);h=(l.then?(await l)():l)[0];class c extends s.WF{render(){return s.qy` <div class="marker ${this.entityPicture?"picture":""}" style="${(0,r.W)({"border-color":this.entityColor})}" ="${this._badgeTap}"> ${this.entityPicture?s.qy`<div class="entity-picture" style="${(0,r.W)({"background-image":`url(${this.entityPicture})`})}"></div>`:this.showIcon&&this.entityId?s.qy`<ha-state-icon .stateObj="${this.hass?.states[this.entityId]}"></ha-state-icon>`:this.entityUnit?s.qy` ${this.entityName} <span class="unit" style="display:${this.entityUnit?"initial":"none"}">${this.entityUnit}</span> `:this.entityName} </div> `}_badgeTap(t){t.stopPropagation(),this.entityId&&(0,n.r)(this,"hass-more-info",{entityId:this.entityId})}constructor(...t){super(...t),this.showIcon=!1}}c.styles=s.AH`.marker{display:flex;justify-content:center;text-align:center;align-items:center;box-sizing:border-box;width:var(--ha-marker-size,48px);height:var(--ha-marker-size,48px);font-size:var(--ha-marker-font-size, var(--ha-font-size-xl));border-radius:var(--ha-marker-border-radius,50%);border:1px solid var(--ha-marker-color,var(--primary-color));color:var(--primary-text-color);background-color:var(--card-background-color)}.marker.picture{overflow:hidden}.entity-picture{background-size:cover;height:100%;width:100%}.unit{margin-left:2px}`,(0,a.Cg)([(0,o.MZ)({attribute:!1})],c.prototype,"hass",void 0),(0,a.Cg)([(0,o.MZ)({attribute:"entity-id",reflect:!0})],c.prototype,"entityId",void 0),(0,a.Cg)([(0,o.MZ)({attribute:"entity-name"})],c.prototype,"entityName",void 0),(0,a.Cg)([(0,o.MZ)({attribute:"entity-unit"})],c.prototype,"entityUnit",void 0),(0,a.Cg)([(0,o.MZ)({attribute:"entity-picture"})],c.prototype,"entityPicture",void 0),(0,a.Cg)([(0,o.MZ)({attribute:"entity-color"})],c.prototype,"entityColor",void 0),(0,a.Cg)([(0,o.MZ)({attribute:"show-icon",type:Boolean})],c.prototype,"showIcon",void 0),c=(0,a.Cg)([(0,o.EM)("ha-entity-marker")],c),e()}catch(t){e(t)}})},22273(t,e,i){i.a(t,async function(t,a){try{i.d(e,{$:()=>M});i(44114),i(18111),i(7588),i(61701);var s=i(62826),o=i(73684),r=i(5124),n=i(22441),h=i(95747),l=i(30162),c=i(1087),p=i(80804),d=i(69093),m=i(28978),u=i(3894),g=i(75428),y=i(88438),f=i(26300),_=i(30219),b=t([f,_,h,l]);[f,_,h,l]=b.then?(await b)():b;const v=250,k=t=>"string"==typeof t?t:t.entity_id,M=["name","state","attribute","icon"];class C extends r.mN{connectedCallback(){this._pauseAutoFit=!1,document.addEventListener("visibilitychange",this._handleVisibilityChange),this._handleVisibilityChange(),super.connectedCallback(),this._loadMap(),this._attachObserver()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("visibilitychange",this._handleVisibilityChange),this.leafletMap&&(this.leafletMap.remove(),this.leafletMap=void 0,this.Leaflet=void 0),this._loaded=!1,this._resizeObserver&&this._resizeObserver.unobserve(this)}update(t){if(super.update(t),!this._loaded)return;let e=!1;const i=t.get("hass");if(t.has("_loaded")||t.has("entities"))this._drawEntities(),e=!this._pauseAutoFit;else if(this._loaded&&i&&this.entities)for(const t of this.entities)if(i.states[k(t)]!==this.hass.states[k(t)]){this._drawEntities(),e=!this._pauseAutoFit;break}t.has("clusterMarkers")&&this._drawEntities(),(t.has("_loaded")||t.has("paths"))&&this._drawPaths(),(t.has("_loaded")||t.has("layers"))&&(this._drawLayers(t.get("layers")),e=!0),(t.has("_loaded")||this.autoFit&&e)&&this.fitMap(),t.has("zoom")&&(this._isProgrammaticFit=!0,this.leafletMap.setZoom(this.zoom),setTimeout(()=>{this._isProgrammaticFit=!1},v)),(t.has("themeMode")||t.has("hass")&&(!i||i.themes?.darkMode!==this.hass.themes?.darkMode))&&this._updateMapStyle()}get _darkMode(){return"dark"===this.themeMode||"auto"===this.themeMode&&Boolean(this.hass.themes.darkMode)}_updateMapStyle(){const t=this._mapElement;t.classList.toggle("clickable",this.clickable),t.classList.toggle("dark",this._darkMode),t.classList.toggle("forced-dark","dark"===this.themeMode),t.classList.toggle("forced-light","light"===this.themeMode)}async _loadMap(){if(this._loading)return;let t=this.shadowRoot.getElementById("map");t||(t=document.createElement("div"),t.id="map",this.shadowRoot.append(t)),this._loading=!0;try{[this.leafletMap,this.Leaflet]=await(0,p.H)(t,{latitude:this.hass?.config.latitude??52.3731339,longitude:this.hass?.config.longitude??4.8903147,zoom:this.zoom}),this._updateMapStyle(),this.leafletMap.on("click",t=>{0===this._clickCount&&setTimeout(()=>{1===this._clickCount&&(0,c.r)(this,"map-clicked",{location:[t.latlng.lat,t.latlng.lng]}),this._clickCount=0},250),this._clickCount++}),this.leafletMap.on("zoomstart",()=>{this._isProgrammaticFit||(this._pauseAutoFit=!0)}),this.leafletMap.on("movestart",()=>{this._isProgrammaticFit||(this._pauseAutoFit=!0)}),this._loaded=!0}finally{this._loading=!1}}fitMap(t){if(t?.unpause_autofit&&(this._pauseAutoFit=!1),!this.leafletMap||!this.Leaflet||!this.hass)return;if(!this._mapFocusItems.length&&!this._mapFocusZones.length&&!this.layers?.length)return this._isProgrammaticFit=!0,this.leafletMap.setView(new this.Leaflet.LatLng(this.hass.config.latitude,this.hass.config.longitude),t?.zoom||this.zoom),void setTimeout(()=>{this._isProgrammaticFit=!1},v);let e=this.Leaflet.latLngBounds(this._mapFocusItems?this._mapFocusItems.map(t=>t.getLatLng()):[]);this._mapFocusZones?.forEach(t=>{e.extend("getBounds"in t?t.getBounds():t.getLatLng())}),this.layers?.forEach(t=>{e.extend("getBounds"in t?t.getBounds():t.getLatLng())}),e=e.pad(t?.pad??.5),this._isProgrammaticFit=!0,this.leafletMap.fitBounds(e,{maxZoom:t?.zoom||this.zoom}),setTimeout(()=>{this._isProgrammaticFit=!1},v)}fitBounds(t,e){if(!this.leafletMap||!this.Leaflet||!this.hass)return;const i=this.Leaflet.latLngBounds(t).pad(e?.pad??.5);this._isProgrammaticFit=!0,this.leafletMap.fitBounds(i,{maxZoom:e?.zoom||this.zoom}),setTimeout(()=>{this._isProgrammaticFit=!1},v)}_drawLayers(t){if(t&&t.forEach(t=>t.remove()),!this.layers)return;const e=this.leafletMap;this.layers.forEach(t=>{e.addLayer(t)})}_computePathTooltip(t,e){let i;return i=t.fullDatetime?(0,h.r6)(e.timestamp,this.hass.locale,this.hass.config):(0,o.c)(e.timestamp)?(0,l.ie)(e.timestamp,this.hass.locale,this.hass.config):(0,l.Xs)(e.timestamp,this.hass.locale,this.hass.config),`${(0,g.D)(t.name??"")}<br>${i}`}_drawPaths(){const t=this.hass,e=this.leafletMap,i=this.Leaflet;if(!t||!e||!i)return;if(this._mapPaths.length&&(this._mapPaths.forEach(t=>t.remove()),this._mapPaths=[]),!this.paths)return;const a=getComputedStyle(this).getPropertyValue("--dark-primary-color");this.paths.forEach(t=>{let s,o;t.gradualOpacity&&(s=t.gradualOpacity/(t.points.length-2),o=1-t.gradualOpacity);for(let e=0;e<t.points.length-1;e++){const r=t.gradualOpacity?o+e*s:void 0,n=t.points[e],h=t.points[e+1];if(this._mapPaths.push(i.circleMarker(n.point,{radius:y.C?8:3,color:t.color||a,opacity:r,fillOpacity:r,interactive:!0}).bindTooltip(this._computePathTooltip(t,n),{direction:"top"})),Math.abs(n.point[1]-h.point[1])<=180)this._mapPaths.push(i.polyline([n.point,h.point],{color:t.color||a,opacity:r,interactive:!1}));else{const e=(h.point[1]-n.point[1]+540)%360-180;let s;s=0===e?(n.point[0]+h.point[0])/2:n.point[0]+(h.point[0]-n.point[0])*(n.point[1]>0?180-n.point[1]:-180-n.point[1])/e;const o=[s,n.point[1]>0?180:-180],l=[s,h.point[1]>0?180:-180];this._mapPaths.push(i.polyline([n.point,o],{color:t.color||a,opacity:r,interactive:!1})),this._mapPaths.push(i.polyline([l,h.point],{color:t.color||a,opacity:r,interactive:!1}))}}const r=t.points.length-1;if(r>=0){const e=t.gradualOpacity?o+r*s:void 0;this._mapPaths.push(i.circleMarker(t.points[r].point,{radius:y.C?8:3,color:t.color||a,opacity:e,fillOpacity:e,interactive:!0}).bindTooltip(this._computePathTooltip(t,t.points[r]),{direction:"top"}))}this._mapPaths.forEach(t=>e.addLayer(t))})}_drawEntities(){const t=this.hass,e=this.leafletMap,i=this.Leaflet;if(!t||!e||!i)return;if(this._mapItems.length&&(this._mapItems.forEach(t=>t.remove()),this._mapItems=[],this._mapFocusItems=[]),this._mapZones.length&&(this._mapZones.forEach(t=>t.remove()),this._mapZones=[],this._mapFocusZones=[]),this._mapCluster&&(this._mapCluster.remove(),this._mapCluster=void 0),!this.entities)return;const a=getComputedStyle(this),s=a.getPropertyValue("--accent-color"),o=a.getPropertyValue("--secondary-text-color"),r=a.getPropertyValue("--dark-primary-color"),n=this._darkMode?"dark":"light";for(const e of this.entities){const h=t.states[k(e)];if(!h)continue;const l="string"!=typeof e?e.name:void 0,c=l??(0,m.u)(h),{latitude:p,longitude:g,passive:y,icon:f,radius:_,entity_picture:b,gps_accuracy:v}=h.attributes;if(!p||!g)continue;if("zone"===(0,d.t)(h)){if(y&&!this.renderPassive)continue;let t;if(f){const e=document.createElement("ha-icon");e.setAttribute("icon",f),t=e.outerHTML}else{const e=document.createElement("span");e.textContent=c,t=e.outerHTML}const r=i.circle([p,g],{interactive:!1,color:y?o:s,radius:_}),h=this._getMarkerSize(a)/2,l=new u.q([p,g],r,{icon:i.divIcon({html:t,iconSize:[h,h],className:n}),interactive:this.interactiveZones,title:c});this._mapZones.push(l),!this.fitZones||"string"!=typeof e&&!1===e.focus||this._mapFocusZones.push(r);continue}const M="string"!=typeof e&&"state"===e.label_mode?this.hass.formatEntityState(h):"string"!=typeof e&&"attribute"===e.label_mode&&void 0!==e.attribute?this.hass.formatEntityAttributeValue(h,e.attribute):l??c.split(" ").map(t=>t[0]).join("").substr(0,3),C=document.createElement("ha-entity-marker");C.hass=this.hass,C.showIcon="string"!=typeof e&&"icon"===e.label_mode,C.entityId=k(e),C.entityName=M,C.entityUnit="string"!=typeof e&&e.unit&&"attribute"===e.label_mode?e.unit:"",C.entityPicture=!b||"string"!=typeof e&&e.label_mode?"":this.hass.hassUrl(b),"string"!=typeof e&&(C.entityColor=e.color);const z=this._getMarkerSize(a),x=new u.q([p,g],void 0,{icon:i.divIcon({html:C,iconSize:[z,z],className:""}),title:c});"string"!=typeof e&&!1===e.focus||this._mapFocusItems.push(x),v&&(x.decorationLayer=i.circle([p,g],{interactive:!1,color:r,radius:v})),this._mapItems.push(x)}this.clusterMarkers?(this._mapCluster=i.markerClusterGroup({showCoverageOnHover:!1,removeOutsideVisibleBounds:!1,maxClusterRadius:40}),this._mapCluster.addLayers(this._mapItems),e.addLayer(this._mapCluster)):this._mapItems.forEach(t=>e.addLayer(t)),this._mapZones.forEach(t=>e.addLayer(t))}_getMarkerSize(t){const e=t.getPropertyValue("--ha-marker-size"),i=parseFloat(e);return Number.isNaN(i)?48:i}async _attachObserver(){this._resizeObserver||(this._resizeObserver=new ResizeObserver(()=>{this.leafletMap?.invalidateSize({debounceMoveend:!0})})),this._resizeObserver.observe(this)}constructor(...t){super(...t),this.clickable=!1,this.autoFit=!1,this.renderPassive=!1,this.interactiveZones=!1,this.fitZones=!1,this.themeMode="auto",this.zoom=14,this.clusterMarkers=!0,this._loaded=!1,this._mapItems=[],this._mapFocusItems=[],this._mapZones=[],this._mapFocusZones=[],this._mapPaths=[],this._clickCount=0,this._isProgrammaticFit=!1,this._pauseAutoFit=!1,this._handleVisibilityChange=async()=>{document.hidden||setTimeout(()=>{this._pauseAutoFit=!1},500)},this._loading=!1}}C.styles=r.AH`:host{display:block;height:300px}#map{height:100%}#map.clickable{cursor:pointer}#map.dark{background:#090909}#map.forced-dark{color:#fff;--map-filter:invert(0.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(0.3)}#map.forced-light{background:#fff;color:#000;--map-filter:invert(0)}#map.clickable:active,#map:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.leaflet-tile-pane{filter:var(--map-filter)}.dark .leaflet-bar a{background-color:#1c1c1c;color:#fff}.dark .leaflet-bar a:hover{background-color:#313131}.leaflet-marker-draggable{cursor:move!important}.leaflet-edit-resize{border-radius:var(--ha-border-radius-circle);cursor:nesw-resize!important}.named-icon{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:var(--primary-text-color)}.leaflet-pane{z-index:0!important}.leaflet-bottom,.leaflet-control,.leaflet-top{z-index:1!important}.leaflet-tooltip{padding:8px;font-size:var(--ha-font-size-s);background:rgba(80,80,80,.9)!important;color:#fff!important;border-radius:var(--ha-border-radius-sm);box-shadow:none!important;text-align:center}ha-icon{--mdc-icon-size:calc(var(--ha-marker-size, 48px) / 2)}.marker-cluster div{background-clip:padding-box;background-color:var(--primary-color);border:3px solid rgba(var(--rgb-primary-color),.2);width:calc(var(--ha-marker-size,48px) * .667);height:calc(var(--ha-marker-size,48px) * .667);border-radius:50%;text-align:center;align-content:center;color:var(--text-primary-color);font-size:var(--ha-font-size-m)}.marker-cluster span{line-height:var(--ha-line-height-expanded)}`,(0,s.Cg)([(0,n.MZ)({attribute:!1})],C.prototype,"hass",void 0),(0,s.Cg)([(0,n.MZ)({attribute:!1})],C.prototype,"entities",void 0),(0,s.Cg)([(0,n.MZ)({attribute:!1})],C.prototype,"paths",void 0),(0,s.Cg)([(0,n.MZ)({attribute:!1})],C.prototype,"layers",void 0),(0,s.Cg)([(0,n.MZ)({type:Boolean})],C.prototype,"clickable",void 0),(0,s.Cg)([(0,n.MZ)({attribute:"auto-fit",type:Boolean})],C.prototype,"autoFit",void 0),(0,s.Cg)([(0,n.MZ)({attribute:"render-passive",type:Boolean})],C.prototype,"renderPassive",void 0),(0,s.Cg)([(0,n.MZ)({attribute:"interactive-zones",type:Boolean})],C.prototype,"interactiveZones",void 0),(0,s.Cg)([(0,n.MZ)({attribute:"fit-zones",type:Boolean})],C.prototype,"fitZones",void 0),(0,s.Cg)([(0,n.MZ)({attribute:"theme-mode",type:String})],C.prototype,"themeMode",void 0),(0,s.Cg)([(0,n.MZ)({type:Number})],C.prototype,"zoom",void 0),(0,s.Cg)([(0,n.MZ)({attribute:"cluster-markers",type:Boolean})],C.prototype,"clusterMarkers",void 0),(0,s.Cg)([(0,n.wk)()],C.prototype,"_loaded",void 0),(0,s.Cg)([(0,n.P)("#map")],C.prototype,"_mapElement",void 0),C=(0,s.Cg)([(0,n.EM)("ha-map")],C),a()}catch(t){a(t)}})}};