extra-map-card 1.0.7 β 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function e(e,t,i,r){var n,o=arguments.length,a=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(a=(o<3?n(a):o>3?n(t,i,a):n(t,i))||a);return o>3&&a&&Object.defineProperty(t,i,a),a}console.groupCollapsed("%cπ EXTRA-MAP-CARD πΊοΈ%cv1.0.
|
|
1
|
+
function e(e,t,i,r){var n,o=arguments.length,a=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(a=(o<3?n(a):o>3?n(t,i,a):n(t,i))||a);return o>3&&a&&Object.defineProperty(t,i,a),a}console.groupCollapsed("%cπ EXTRA-MAP-CARD πΊοΈ%cv1.0.8","background-color: #434347;color: #fff;padding: 2px 4px;border: 1px solid #434347;border-radius: 2px 0 0 2px;font-family: Roboto,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)","background-color: transparent;color: #434347;padding: 2px 3px;border: 1px solid #434347; border-radius: 0 2px 2px 0;font-family: Roboto,Verdana,Geneva,sans-serif"),console.info("Lovelace custom map card for Home Assistant"),console.info("Github: git+https://github.com/ngocjohn/extra-map-card.git"),console.info("If you like the card, consider supporting the developer: https://github.com/sponsors/ngocjohn"),console.groupEnd(),"function"==typeof SuppressedError&&SuppressedError;const t=(e,t)=>e&&e.config.components.includes(t);function i(){let e=document.querySelector("home-assistant");if(e=e&&e.shadowRoot,e=e&&e.querySelector("home-assistant-main"),e=e&&e.shadowRoot,e=e&&e.querySelector("app-drawer-layout partial-panel-resolver, ha-drawer partial-panel-resolver"),e=e&&e.shadowRoot||e,e=e&&e.querySelector("ha-panel-lovelace"),e=e&&e.shadowRoot,e=e&&e.querySelector("hui-root"),e){const t=e.lovelace;return t.current_view=e.___curView,t}return null}const r=e=>{let t=e;for(;t;){if("HUI-CARD-OPTIONS"===t.tagName)return t;t=t.parentNode}return t};function n(e){const t=i();return t?(t.setEditMode(!0),new Promise((i=>{setTimeout((()=>{const n=r(e.parentNode);if(!n)return t.setEditMode(!1),void i(null);const o=n.__path,a=`${n.lovelace.urlPath}-${o.join("-")}`;t.setEditMode(!1),i(a)}),100)}))):Promise.reject("Lovelace not found")}const o=e=>2===e.length?{viewIndex:e[0],cardIndex:e[1]}:{viewIndex:e[0],sectionIndex:e[1],cardIndex:e[2]},a=e=>1===e.length?{viewIndex:e[0]}:{viewIndex:e[0],sectionIndex:e[1]},s=e=>e.slice(0,-1),l=(e,t)=>{var i;const{viewIndex:r,sectionIndex:n}=a(t),o=e.views[r];if(!o)throw new Error("View does not exist");if(void 0===n)return o;if(g(o))throw new Error("Can not find section in a strategy view");const s=null===(i=o.sections)||void 0===i?void 0:i[n];if(!s)throw new Error("Section does not exist");return s},c=(e,t)=>{var i;const{viewIndex:r,sectionIndex:n}=a(t),o=e.views[r];if(!o)throw new Error("View does not exist");if(g(o))throw new Error("Can not find cards in a strategy view");if(void 0===n)return o.cards;const s=null===(i=o.sections)||void 0===i?void 0:i[n];if(!s)throw new Error("Section does not exist");if(y(s))throw new Error("Can not find cards in a strategy section");return s.cards},u=(e,t,i)=>{const{viewIndex:r,sectionIndex:n}=a(t);let o=!1;const s=e.views.map(((e,t)=>{if(t!==r)return e;if(void 0===n)return o=!0,i;if(g(e))throw new Error("Can not update section in a strategy view");if(void 0===e.sections)throw new Error("Section does not exist");const a=e.sections.map(((e,t)=>t!==n?e:(o=!0,i)));return Object.assign(Object.assign({},e),{sections:a})}));if(!o)throw new Error("Can not update cards in a non-existing view/section");return Object.assign(Object.assign({},e),{views:s})},h=(e,t,i)=>{const{viewIndex:r,sectionIndex:n}=a(t);let o=!1;const s=e.views.map(((e,t)=>{if(t!==r)return e;if(g(e))throw new Error("Can not update cards in a strategy view");if(void 0===n)return o=!0,Object.assign(Object.assign({},e),{cards:i});if(void 0===e.sections)throw new Error("Section does not exist");const a=e.sections.map(((e,t)=>{if(t!==n)return e;if(y(e))throw new Error("Can not update cards in a strategy section");return o=!0,Object.assign(Object.assign({},e),{cards:i})}));return Object.assign(Object.assign({},e),{sections:a})}));if(!o)throw new Error("Can not update cards in a non-existing view/section");return Object.assign(Object.assign({},e),{views:s})};function p(e){return"strategy"in e}const d=(e,t,i)=>e.sendMessagePromise({type:"lovelace/config",url_path:t,force:i}),m=(e,t,i)=>e.callWS({type:"lovelace/config/save",url_path:t,config:i}),f=(e,t)=>e.callWS({type:"lovelace/config/delete",url_path:t});function g(e){return"strategy"in e}function y(e){return"strategy"in e}const _=e=>"string"==typeof e?{type:"entity",entity:e,show_name:!0}:"type"in e&&e.type?e:Object.assign({type:"entity"},e),v=e=>e.sendMessagePromise({type:"lovelace/resources"}),b=(e,t)=>e.callWS(Object.assign({type:"lovelace/resources/create"},t)),x=(e,t,i)=>e.callWS(Object.assign({type:"lovelace/resources/update",resource_id:t},i)),w=(e,t)=>e.callWS({type:"lovelace/resources/delete",resource_id:t}),C=(e,t,i,r)=>{r=r||{},i=null==i?{}:i;const n=new Event(t,{bubbles:void 0===r.bubbles||r.bubbles,cancelable:Boolean(r.cancelable),composed:void 0===r.composed||r.composed});return n.detail=i,e.dispatchEvent(n),n},T=(e,t,i)=>e.subscribeMessage((e=>t(e)),Object.assign({type:"render_template"},i));var S,A;!function(e){e.language="language",e.system="system",e.comma_decimal="comma_decimal",e.decimal_comma="decimal_comma",e.space_comma="space_comma",e.none="none"}(S||(S={})),function(e){e.language="language",e.system="system",e.am_pm="12",e.twenty_four="24"}(A||(A={}));var M=function(e){if(e.time_format===A.language||e.time_format===A.system){var t=e.time_format===A.language?e.language:void 0,i=(new Date).toLocaleString(t);return i.includes("AM")||i.includes("PM")}return e.time_format===A.am_pm},E=function(e,t){return P(t).format(e)},P=function(e){return new Intl.DateTimeFormat(e.language,{year:"numeric",month:"numeric",day:"numeric",hour:"numeric",minute:"2-digit",hour12:M(e)})},I=function(e,t){return k(t).format(e)},k=function(e){return new Intl.DateTimeFormat(e.language,{hour:M(e)?"numeric":"2-digit",minute:"2-digit",second:"2-digit",hour12:M(e)})};function z(e){return e.substr(0,e.indexOf("."))}function L(e){return z(e.entity_id)}const D=["climate","humidifier","input_datetime","thermostat","water_heater","person","device_tracker"];class F{constructor(e,t){this.hass=e,this.hoursToShow=t,this.combinedHistory={}}processMessage(e){if(!this.combinedHistory||!Object.keys(this.combinedHistory).length)return this.combinedHistory=e.states,this.combinedHistory;if(!Object.keys(e.states).length)return this.combinedHistory;const t=this.hoursToShow?((new Date).getTime()-3600*this.hoursToShow*1e3)/1e3:void 0,i={};for(const e of Object.keys(this.combinedHistory))i[e]=[];for(const t of Object.keys(e.states))i[t]=[];for(const r of Object.keys(i)){if(r in this.combinedHistory&&r in e.states){const t=this.combinedHistory[r],n=t[t.length-1];i[r]=t.concat(e.states[r]),e.states[r][0].lu<n.lu&&(i[r]=i[r].sort(((e,t)=>e.lu-t.lu)))}else r in this.combinedHistory?i[r]=this.combinedHistory[r]:i[r]=e.states[r];if(t&&r in this.combinedHistory){const e=i[r].filter((e=>e.lu<t));if(!e.length)continue;if(i[r]=i[r].filter((e=>e.lu>=t)),i[r].length&&i[r][0].lu===t)continue;const n=e[e.length-1];n.lu=t,i[r].unshift(n)}}return this.combinedHistory=i,this.combinedHistory}}const R=(e,t)=>!e.states[t]||D.includes(z(t)),B=(e,t,i,r)=>{const n={type:"history/history_during_period",start_time:t.toISOString(),end_time:i.toISOString(),minimal_response:!0,no_attributes:!r.some((t=>R(e,t)))};return 0!==r.length?e.callWS(Object.assign(Object.assign({},n),{entity_ids:r})):e.callWS(n)},O=(e,t,i,r,n,o=!0,a=!0)=>{const s={type:"history/stream",entity_ids:r,start_time:new Date((new Date).getTime()-3600*i*1e3).toISOString(),minimal_response:o,significant_changes_only:a,no_attributes:null!=n?n:!r.some((t=>R(e,t)))},l=new F(e,i);return e.connection.subscribeMessage((e=>t(l.processMessage(e))),s)},j=(e,t,i,r,n)=>{const o={type:"history/stream",entity_ids:n,start_time:i.toISOString(),end_time:r.toISOString(),minimal_response:!1,no_attributes:!1,significant_changes_only:!1},a=new F(e);return e.connection.subscribeMessage((e=>t(a.processMessage(e))),o)},N=globalThis,$=N.ShadowRoot&&(void 0===N.ShadyCSS||N.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,V=Symbol(),U=new WeakMap;let q=class{constructor(e,t,i){if(this._$cssResult$=!0,i!==V)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if($&&void 0===e){const i=void 0!==t&&1===t.length;i&&(e=U.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),i&&U.set(t,e))}return e}toString(){return this.cssText}};const Z=e=>new q("string"==typeof e?e:e+"",void 0,V),G=(e,...t)=>{const i=1===e.length?e[0]:t.reduce(((t,i,r)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+e[r+1]),e[0]);return new q(i,e,V)},H=(e,t)=>{if($)e.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const i of t){const t=document.createElement("style"),r=N.litNonce;void 0!==r&&t.setAttribute("nonce",r),t.textContent=i.cssText,e.appendChild(t)}},W=$?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return Z(t)})(e):e
|
|
2
2
|
/**
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2017 Google LLC
|
|
@@ -235,7 +235,7 @@ const Ye=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
235
235
|
<div class="maptiler-map" style="${this._computeMapStyle()}"
|
|
236
236
|
<div id="map"></div>
|
|
237
237
|
</div>
|
|
238
|
-
`}async firstUpdated(){await bp(this.entities),await new Promise((e=>setTimeout(e,0))),this._initMap()}updated(e){var t,i,r,n;if(super.updated(e),!this._loaded)return;let o=!1;const a=e.get("hass");if(e.has("_loaded")||e.has("entities"))this._drawEntities(),o=!0;else if(this._loaded&&a&&this.entities)for(const e of this.entities)if(a.states[Pp(e)]!==this.hass.states[Pp(e)]){this._drawEntities(),o=!0;break}if((e.has("_loaded")||this.autoFit&&o)&&this._fitMap(),e.has("zoom")&&this._map.setZoom(this.zoom),e.has("hass")&&a){if((null===(t=a.themes)||void 0===t?void 0:t.darkMode)!==(null===(i=this.hass.themes)||void 0===i?void 0:i.darkMode)){const e=this._getInitStyle();this._map.setStyle(e,{diff:!1})}}e.has("themeMode")||e.has("hass")&&(!a||(null===(r=a.themes)||void 0===r||r.darkMode,null===(n=this.hass.themes)||void 0===n||n.darkMode))}_drawEntities(){const e=this.hass,t=this._map;if(!t||!e)return;if(this._mapItems.length&&(this._mapItems.forEach((e=>e.remove())),this._mapItems=[],this._mapFocusItems=[]),this._zoneItems.length&&(this._zoneItems.forEach((e=>e.remove())),this._zoneItems=[],this._mapFocusZones=[]),!this.entities)return;const i=[],r=getComputedStyle(this),n=r.getPropertyValue("--accent-color"),o=r.getPropertyValue("--secondary-text-color"),a=r.getPropertyValue("--dark-primary-color"),s=this._darkMode?"dark":"light";for(const r of this.entities){const l=e.states[Pp(r)];if(!l)continue;const c="string"!=typeof r?r.name:void 0,u=null!=c?c:pt(l),{latitude:h,longitude:p,passive:d,icon:m,radius:f,entity_picture:g,gps_accuracy:y}=l.attributes;if(!h||!p)continue;const _=[p,h];if("zone"===L(l)){let e="";if(m){const t=document.createElement("ha-icon");t.setAttribute("icon",m),e=t.outerHTML}else{const t=document.createElement("span");t.innerHTML=u,e=t.outerHTML}const a=np(_,f,{steps:200,units:"meters",properties:{color:d?o:n,title:u,opacity:d?.2:.3}});i.push(a);const l=document.createElement("div");l.className=`marker ${s}`,l.innerHTML=e,l.title=u;const c=new Xr({element:l}).setLngLat(_).addTo(t);this._zoneItems.push(c),!this.fitZones||"string"!=typeof r&&!1===r.focus||this._mapFocusZones.push(a.geometry);continue}const v="string"!=typeof r&&"state"===r.label_mode?this.hass.formatEntityState(l):"string"!=typeof r&&"attribute"===r.label_mode&&void 0!==r.attribute?this.hass.formatEntityAttributeValue(l,r.attribute):null!=c?c:u.split(" ").map((e=>e[0])).join("").substring(0,3),b=document.createElement("ha-entity-marker");b.hass=this.hass,b.showIcon="string"!=typeof r&&"icon"===r.label_mode,b.entityId=Pp(r),b.entityName=v,b.entityPicture=!g||"string"!=typeof r&&r.label_mode?"":this.hass.hassUrl(g),"string"!=typeof r&&(b.entityColor=r.color),this.blockMoreInfo&&b.addEventListener("click",(e=>{e.stopImmediatePropagation(),e.preventDefault()}),!0);const x=new Xr({element:b}).setLngLat(_).addTo(t);if(this._mapItems.push(x),"string"!=typeof r&&!1===r.focus||this._mapFocusItems.push(x),y){const e=np(_,y,{steps:64,units:"meters",properties:{color:a,title:u,opacity:.5}});i.push(e)}}const l={type:"geojson",data:{type:"FeatureCollection",features:i}};t.getSource("circles")&&(t.removeSource("circles"),t.removeLayer("circles"),t.removeLayer("circles-stroke")),t.addSource("circles",l),t.addLayer({id:"circles",type:"fill",source:"circles",paint:{"fill-color":["get","color"],"fill-opacity":["get","opacity"]}}),t.addLayer({id:"circles-stroke",type:"line",source:"circles",paint:{"line-color":["get","color"],"line-width":2}})}_computePathTooltip(e,t){let i;return i=e.fullDatetime?E(t.timestamp,this.hass.locale):pp(t.timestamp)?I(t.timestamp,this.hass.locale):Fp(t.timestamp,this.hass.locale,this.hass.config),`<b>${e.name}</b><br><i>${i}</i>`}_drawPaths(){const e=this.hass,t=this._map;if(!t||!e)return;if(this._mapPaths.length&&(this._mapPaths.forEach((e=>{t.removeLayer(e.id)})),this._mapPaths=[]),!this.paths)return;const i=getComputedStyle(this).getPropertyValue("--dark-primary-color"),r=[],n=[];this.paths.forEach((e=>{if(!e.points||e.points.length<2)return;let t,o;e.gradualOpacity&&(t=e.gradualOpacity/(e.points.length-2),o=1-e.gradualOpacity);for(let a=0;a<e.points.length-1;a++){const s=e.points[a].point,l=e.points[a+1].point,c=e.gradualOpacity?o+a*t:void 0,u=this._computePathTooltip(e,e.points[a]),h={type:"Feature",geometry:{type:"Point",coordinates:s},properties:{friendlyName:e.name,color:e.color||i,opacity:c,fillOpacity:c,lastUpdated:e.points[a].timestamp,popupContent:u}};n.push(h);const p={type:"Feature",geometry:{type:"LineString",coordinates:[s,l]},properties:{color:e.color||i,opacity:c,fillOpacity:c}};r.push(p)}}));const o={type:"geojson",data:{type:"FeatureCollection",features:n}},a={type:"geojson",data:{type:"FeatureCollection",features:r}};t.getSource("points")&&t.removeSource("points"),t.getSource("lines")&&t.removeSource("lines"),t.addSource("points",o),t.addSource("lines",a);const s={id:"lines",type:"line",source:"lines",layout:{"line-cap":"round","line-join":"round"},paint:{"line-color":["get","color"],"line-width":2,"line-opacity":["get","opacity"]}},l={id:"points",type:"circle",source:"points",paint:{"circle-radius":5,"circle-color":["get","color"],"circle-opacity":["get","fillOpacity"],"circle-stroke-width":1,"circle-stroke-color":["get","color"]}};t.addLayer(s),t.addLayer(l),this._mapPaths.push(s,l),this._setupPointInteraction()}_setupPointInteraction(){const e=this._map;if(!e)return;const t=new Yr({closeButton:!1,closeOnClick:!1,offset:8});let i;e.on("mousemove","points",(async r=>{var n;if(e.getZoom()<10)return e.getCanvas().style.cursor="",t.remove(),void(i=void 0);const o=null===(n=r.features)||void 0===n?void 0:n[0];if(!o)return;const a=o.geometry.coordinates.toString();if(i!==a){i=a,e.getCanvas().style.cursor="pointer";const n=r.features[0].geometry.coordinates.slice(),{popupContent:s}=o.properties;for(;Math.abs(r.lngLat.lng-n[0])>180;)n[0]+=r.lngLat.lng>n[0]?360:-360;t.setLngLat(n).setHTML(s).addTo(e);const l=await Ip(n[1],n[0],this.apiKey);if(l){const e=`${s}<br>${l.streetName}`;t.isOpen()&&t.setHTML(e)}}})),e.on("mouseleave","points",(()=>{e.getCanvas().style.cursor="",t.remove(),i=void 0}))}_fitMap(e){var t,i,r,n;const
|
|
238
|
+
`}async firstUpdated(){await bp(this.entities),await new Promise((e=>setTimeout(e,0))),this._initMap()}updated(e){var t,i,r,n;if(super.updated(e),!this._loaded)return;let o=!1;const a=e.get("hass");if(e.has("_loaded")||e.has("entities"))this._drawEntities(),o=!0;else if(this._loaded&&a&&this.entities)for(const e of this.entities)if(a.states[Pp(e)]!==this.hass.states[Pp(e)]){this._drawEntities(),o=!0;break}if((e.has("_loaded")||this.autoFit&&o)&&this._fitMap(),e.has("zoom")&&this._map.setZoom(this.zoom),e.has("hass")&&a){if((null===(t=a.themes)||void 0===t?void 0:t.darkMode)!==(null===(i=this.hass.themes)||void 0===i?void 0:i.darkMode)){const e=this._getInitStyle();this._map.setStyle(e,{diff:!1})}}e.has("themeMode")||e.has("hass")&&(!a||(null===(r=a.themes)||void 0===r||r.darkMode,null===(n=this.hass.themes)||void 0===n||n.darkMode))}_drawEntities(){const e=this.hass,t=this._map;if(!t||!e)return;if(this._mapItems.length&&(this._mapItems.forEach((e=>e.remove())),this._mapItems=[],this._mapFocusItems=[]),this._zoneItems.length&&(this._zoneItems.forEach((e=>e.remove())),this._zoneItems=[],this._mapFocusZones=[]),!this.entities)return;const i=[],r=getComputedStyle(this),n=r.getPropertyValue("--accent-color"),o=r.getPropertyValue("--secondary-text-color"),a=r.getPropertyValue("--dark-primary-color"),s=this._darkMode?"dark":"light";for(const r of this.entities){const l=e.states[Pp(r)];if(!l)continue;const c="string"!=typeof r?r.name:void 0,u=null!=c?c:pt(l),{latitude:h,longitude:p,passive:d,icon:m,radius:f,entity_picture:g,gps_accuracy:y}=l.attributes;if(!h||!p)continue;const _=[p,h];if("zone"===L(l)){let e="";if(m){const t=document.createElement("ha-icon");t.setAttribute("icon",m),e=t.outerHTML}else{const t=document.createElement("span");t.innerHTML=u,e=t.outerHTML}const a=np(_,f,{steps:200,units:"meters",properties:{color:d?o:n,title:u,opacity:d?.2:.3}});i.push(a);const l=document.createElement("div");l.className=`marker ${s}`,l.innerHTML=e,l.title=u;const c=new Xr({element:l}).setLngLat(_).addTo(t);this._zoneItems.push(c),!this.fitZones||"string"!=typeof r&&!1===r.focus||this._mapFocusZones.push(a.geometry);continue}const v="string"!=typeof r&&"state"===r.label_mode?this.hass.formatEntityState(l):"string"!=typeof r&&"attribute"===r.label_mode&&void 0!==r.attribute?this.hass.formatEntityAttributeValue(l,r.attribute):null!=c?c:u.split(" ").map((e=>e[0])).join("").substring(0,3),b=document.createElement("ha-entity-marker");b.hass=this.hass,b.showIcon="string"!=typeof r&&"icon"===r.label_mode,b.entityId=Pp(r),b.entityName=v,b.entityPicture=!g||"string"!=typeof r&&r.label_mode?"":this.hass.hassUrl(g),"string"!=typeof r&&(b.entityColor=r.color),this.blockMoreInfo&&b.addEventListener("click",(e=>{e.stopImmediatePropagation(),e.preventDefault()}),!0);const x=new Xr({element:b}).setLngLat(_).addTo(t);if(this._mapItems.push(x),"string"!=typeof r&&!1===r.focus||this._mapFocusItems.push(x),y){const e=np(_,y,{steps:64,units:"meters",properties:{color:a,title:u,opacity:.5}});i.push(e)}}const l={type:"geojson",data:{type:"FeatureCollection",features:i}};t.getSource("circles")&&(t.removeSource("circles"),t.removeLayer("circles"),t.removeLayer("circles-stroke")),t.addSource("circles",l),t.addLayer({id:"circles",type:"fill",source:"circles",paint:{"fill-color":["get","color"],"fill-opacity":["get","opacity"]}}),t.addLayer({id:"circles-stroke",type:"line",source:"circles",paint:{"line-color":["get","color"],"line-width":2}})}_computePathTooltip(e,t){let i;return i=e.fullDatetime?E(t.timestamp,this.hass.locale):pp(t.timestamp)?I(t.timestamp,this.hass.locale):Fp(t.timestamp,this.hass.locale,this.hass.config),`<b>${e.name}</b><br><i>${i}</i>`}_drawPaths(){const e=this.hass,t=this._map;if(!t||!e)return;if(this._mapPaths.length&&(this._mapPaths.forEach((e=>{t.removeLayer(e.id)})),this._mapPaths=[]),!this.paths)return;const i=getComputedStyle(this).getPropertyValue("--dark-primary-color"),r=[],n=[];this.paths.forEach((e=>{if(!e.points||e.points.length<2)return;let t,o;e.gradualOpacity&&(t=e.gradualOpacity/(e.points.length-2),o=1-e.gradualOpacity);for(let a=0;a<e.points.length-1;a++){const s=e.points[a].point,l=e.points[a+1].point,c=e.gradualOpacity?o+a*t:void 0,u=this._computePathTooltip(e,e.points[a]),h={type:"Feature",geometry:{type:"Point",coordinates:s},properties:{friendlyName:e.name,color:e.color||i,opacity:c,fillOpacity:c,lastUpdated:e.points[a].timestamp,popupContent:u}};n.push(h);const p={type:"Feature",geometry:{type:"LineString",coordinates:[s,l]},properties:{color:e.color||i,opacity:c,fillOpacity:c}};r.push(p)}}));const o={type:"geojson",data:{type:"FeatureCollection",features:n}},a={type:"geojson",data:{type:"FeatureCollection",features:r}};t.getSource("points")&&t.removeSource("points"),t.getSource("lines")&&t.removeSource("lines"),t.addSource("points",o),t.addSource("lines",a);const s={id:"lines",type:"line",source:"lines",layout:{"line-cap":"round","line-join":"round"},paint:{"line-color":["get","color"],"line-width":2,"line-opacity":["get","opacity"]}},l={id:"points",type:"circle",source:"points",paint:{"circle-radius":5,"circle-color":["get","color"],"circle-opacity":["get","fillOpacity"],"circle-stroke-width":1,"circle-stroke-color":["get","color"]}};t.addLayer(s),t.addLayer(l),this._mapPaths.push(s,l),this._setupPointInteraction()}_setupPointInteraction(){const e=this._map;if(!e)return;const t=new Yr({closeButton:!1,closeOnClick:!1,offset:8});let i;e.on("mousemove","points",(async r=>{var n;if(e.getZoom()<10)return e.getCanvas().style.cursor="",t.remove(),void(i=void 0);const o=null===(n=r.features)||void 0===n?void 0:n[0];if(!o)return;const a=o.geometry.coordinates.toString();if(i!==a){i=a,e.getCanvas().style.cursor="pointer";const n=r.features[0].geometry.coordinates.slice(),{popupContent:s}=o.properties;for(;Math.abs(r.lngLat.lng-n[0])>180;)n[0]+=r.lngLat.lng>n[0]?360:-360;t.setLngLat(n).setHTML(s).addTo(e);const l=await Ip(n[1],n[0],this.apiKey);if(l){const e=`${s}<br>${l.streetName}`;t.isOpen()&&t.setHTML(e)}}})),e.on("mouseleave","points",(()=>{e.getCanvas().style.cursor="",t.remove(),i=void 0}))}_fitMap(e){var t,i,r,n,o;const a=this._map;if(!a)return;if(!this._mapFocusItems.length&&!this._mapFocusZones.length)return void this._map.setCenter([this.hass.config.longitude,this.hass.config.latitude]);let s=new xh;null===(t=this._mapFocusItems)||void 0===t||t.forEach((e=>{s.extend(e.getLngLat())})),null===(i=this._mapFocusZones)||void 0===i||i.forEach((e=>{e.coordinates[0].forEach((e=>{s.extend([e[0],e[1]])}))})),s.isEmpty()||(this._fitBounds=s,a.fitBounds(s,{padding:null!==(r=null==e?void 0:e.pad)&&void 0!==r?r:50,maxZoom:null!==(n=null==e?void 0:e.zoom)&&void 0!==n?n:this.zoom,animate:null!==(o=null==e?void 0:e.animate)&&void 0!==o&&o,linear:!0}))}_initMap(){const{zoom:e,apiKey:t}=this,i=[this.hass.config.longitude,this.hass.config.latitude],r=this._getInitStyle(),n=this.shadowRoot.getElementById("map");gr.apiKey=t;const o={geolocateControl:!1,fullscreenControl:!1,navigationControl:!1,attributionControl:!1,fadeDuration:0,canvasContextAttributes:{antialias:!0},maxZoom:20,container:n,zoom:e,style:r,center:i};this._map=new fu(o),this._map.on("load",(async()=>{this._loaded=!0})),this._map.on("style.load",(async()=>{this._changeControlTheme(),this._drawPaths()}));const a=new sn({visualizePitch:!0,visualizeRoll:!0});this._map.addControl(a,"top-right"),this._map.on("styleimagemissing",(e=>{var t;null===(t=this._map)||void 0===t||t.addImage(e.id,{width:0,height:0,data:new Uint8Array(0)})})),this._addMapControl("mdi:image-filter-center-focus","Center","top-right",this._centerMap.bind(this))}_centerMap(){this._fitMap({zoom:this.zoom,animate:!0})}_addMapControl(e,t,i,r){this._map.addControl({onAdd:()=>{const i=this._createButton(e,t);return i.style.display="unset",i.addEventListener("click",r),i},onRemove:()=>null},i)}_getInitStyle(){const{light:e,dark:t}=this.customStyles||{},i=e=>{const t=e.split(".");return 2===t.length?ti[t[0]][t[1]]:ti[t[0]]};return this._darkMode?t?i(t):Bp.dark:e?i(e):Bp.light}_changeControlTheme(){const e=e=>this.getModeColor(e),t=Array.from(this.shadowRoot.querySelectorAll(".maplibregl-ctrl"));for(const i of t){const t=Array.from(i.querySelectorAll("button"));for(const i of t){const t=i;t.style.backgroundColor=e("backgroundColor"),t.style.boxShadow=e("boxShadow");const r=i.querySelector("span");if(r){const e=window.getComputedStyle(r).backgroundImage;if(e.startsWith('url("data:image/svg+xml')){const t=this.getModeColor("fill"),i=e.slice(5,-2),n=decodeURIComponent(i.split(",")[1]).replace(/fill:[^;"]*/g,`fill:${t}`).replace(/fill="[^"]*"/g,`fill="${t}"`),o=`data:image/svg+xml;charset=utf-8,${encodeURIComponent(n)}`;r.style.backgroundImage=`url("${o}")`}}}}}_computeMapStyle(){const e=e=>this.getModeColor(e),t=e("fill"),i=e("backgroundColor"),r=e("boxShadow");return _p({"--emc-btn-bg":i,"--emc-btn-shadow":r,"--emc-btn-color":t})}static get styles(){return[Z(Gh),G`
|
|
239
239
|
:host {
|
|
240
240
|
--tooltip-color: rgba(80, 80, 80, 0.9);
|
|
241
241
|
}
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
function e(e,t,i,r){var n,o=arguments.length,a=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(a=(o<3?n(a):o>3?n(t,i,a):n(t,i))||a);return o>3&&a&&Object.defineProperty(t,i,a),a}console.groupCollapsed("%cπ EXTRA-MAP-CARD πΊοΈ%cv1.0.
|
|
1
|
+
function e(e,t,i,r){var n,o=arguments.length,a=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,r);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(a=(o<3?n(a):o>3?n(t,i,a):n(t,i))||a);return o>3&&a&&Object.defineProperty(t,i,a),a}console.groupCollapsed("%cπ EXTRA-MAP-CARD πΊοΈ%cv1.0.8","background-color: #434347;color: #fff;padding: 2px 4px;border: 1px solid #434347;border-radius: 2px 0 0 2px;font-family: Roboto,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)","background-color: transparent;color: #434347;padding: 2px 3px;border: 1px solid #434347; border-radius: 0 2px 2px 0;font-family: Roboto,Verdana,Geneva,sans-serif"),console.info("Lovelace custom map card for Home Assistant"),console.info("Github: git+https://github.com/ngocjohn/extra-map-card.git"),console.info("If you like the card, consider supporting the developer: https://github.com/sponsors/ngocjohn"),console.groupEnd(),"function"==typeof SuppressedError&&SuppressedError;const t=(e,t)=>e&&e.config.components.includes(t);function i(){let e=document.querySelector("home-assistant");if(e=e&&e.shadowRoot,e=e&&e.querySelector("home-assistant-main"),e=e&&e.shadowRoot,e=e&&e.querySelector("app-drawer-layout partial-panel-resolver, ha-drawer partial-panel-resolver"),e=e&&e.shadowRoot||e,e=e&&e.querySelector("ha-panel-lovelace"),e=e&&e.shadowRoot,e=e&&e.querySelector("hui-root"),e){const t=e.lovelace;return t.current_view=e.___curView,t}return null}const r=e=>{let t=e;for(;t;){if("HUI-CARD-OPTIONS"===t.tagName)return t;t=t.parentNode}return t};function n(e){const t=i();return t?(t.setEditMode(!0),new Promise((i=>{setTimeout((()=>{const n=r(e.parentNode);if(!n)return t.setEditMode(!1),void i(null);const o=n.__path,a=`${n.lovelace.urlPath}-${o.join("-")}`;t.setEditMode(!1),i(a)}),100)}))):Promise.reject("Lovelace not found")}const o=e=>2===e.length?{viewIndex:e[0],cardIndex:e[1]}:{viewIndex:e[0],sectionIndex:e[1],cardIndex:e[2]},a=e=>1===e.length?{viewIndex:e[0]}:{viewIndex:e[0],sectionIndex:e[1]},s=e=>e.slice(0,-1),l=(e,t)=>{var i;const{viewIndex:r,sectionIndex:n}=a(t),o=e.views[r];if(!o)throw new Error("View does not exist");if(void 0===n)return o;if(g(o))throw new Error("Can not find section in a strategy view");const s=null===(i=o.sections)||void 0===i?void 0:i[n];if(!s)throw new Error("Section does not exist");return s},c=(e,t)=>{var i;const{viewIndex:r,sectionIndex:n}=a(t),o=e.views[r];if(!o)throw new Error("View does not exist");if(g(o))throw new Error("Can not find cards in a strategy view");if(void 0===n)return o.cards;const s=null===(i=o.sections)||void 0===i?void 0:i[n];if(!s)throw new Error("Section does not exist");if(y(s))throw new Error("Can not find cards in a strategy section");return s.cards},u=(e,t,i)=>{const{viewIndex:r,sectionIndex:n}=a(t);let o=!1;const s=e.views.map(((e,t)=>{if(t!==r)return e;if(void 0===n)return o=!0,i;if(g(e))throw new Error("Can not update section in a strategy view");if(void 0===e.sections)throw new Error("Section does not exist");const a=e.sections.map(((e,t)=>t!==n?e:(o=!0,i)));return Object.assign(Object.assign({},e),{sections:a})}));if(!o)throw new Error("Can not update cards in a non-existing view/section");return Object.assign(Object.assign({},e),{views:s})},h=(e,t,i)=>{const{viewIndex:r,sectionIndex:n}=a(t);let o=!1;const s=e.views.map(((e,t)=>{if(t!==r)return e;if(g(e))throw new Error("Can not update cards in a strategy view");if(void 0===n)return o=!0,Object.assign(Object.assign({},e),{cards:i});if(void 0===e.sections)throw new Error("Section does not exist");const a=e.sections.map(((e,t)=>{if(t!==n)return e;if(y(e))throw new Error("Can not update cards in a strategy section");return o=!0,Object.assign(Object.assign({},e),{cards:i})}));return Object.assign(Object.assign({},e),{sections:a})}));if(!o)throw new Error("Can not update cards in a non-existing view/section");return Object.assign(Object.assign({},e),{views:s})};function p(e){return"strategy"in e}const d=(e,t,i)=>e.sendMessagePromise({type:"lovelace/config",url_path:t,force:i}),m=(e,t,i)=>e.callWS({type:"lovelace/config/save",url_path:t,config:i}),f=(e,t)=>e.callWS({type:"lovelace/config/delete",url_path:t});function g(e){return"strategy"in e}function y(e){return"strategy"in e}const _=e=>"string"==typeof e?{type:"entity",entity:e,show_name:!0}:"type"in e&&e.type?e:Object.assign({type:"entity"},e),v=e=>e.sendMessagePromise({type:"lovelace/resources"}),b=(e,t)=>e.callWS(Object.assign({type:"lovelace/resources/create"},t)),x=(e,t,i)=>e.callWS(Object.assign({type:"lovelace/resources/update",resource_id:t},i)),w=(e,t)=>e.callWS({type:"lovelace/resources/delete",resource_id:t}),C=(e,t,i,r)=>{r=r||{},i=null==i?{}:i;const n=new Event(t,{bubbles:void 0===r.bubbles||r.bubbles,cancelable:Boolean(r.cancelable),composed:void 0===r.composed||r.composed});return n.detail=i,e.dispatchEvent(n),n},T=(e,t,i)=>e.subscribeMessage((e=>t(e)),Object.assign({type:"render_template"},i));var S,A;!function(e){e.language="language",e.system="system",e.comma_decimal="comma_decimal",e.decimal_comma="decimal_comma",e.space_comma="space_comma",e.none="none"}(S||(S={})),function(e){e.language="language",e.system="system",e.am_pm="12",e.twenty_four="24"}(A||(A={}));var M=function(e){if(e.time_format===A.language||e.time_format===A.system){var t=e.time_format===A.language?e.language:void 0,i=(new Date).toLocaleString(t);return i.includes("AM")||i.includes("PM")}return e.time_format===A.am_pm},E=function(e,t){return P(t).format(e)},P=function(e){return new Intl.DateTimeFormat(e.language,{year:"numeric",month:"numeric",day:"numeric",hour:"numeric",minute:"2-digit",hour12:M(e)})},I=function(e,t){return k(t).format(e)},k=function(e){return new Intl.DateTimeFormat(e.language,{hour:M(e)?"numeric":"2-digit",minute:"2-digit",second:"2-digit",hour12:M(e)})};function z(e){return e.substr(0,e.indexOf("."))}function L(e){return z(e.entity_id)}const D=["climate","humidifier","input_datetime","thermostat","water_heater","person","device_tracker"];class F{constructor(e,t){this.hass=e,this.hoursToShow=t,this.combinedHistory={}}processMessage(e){if(!this.combinedHistory||!Object.keys(this.combinedHistory).length)return this.combinedHistory=e.states,this.combinedHistory;if(!Object.keys(e.states).length)return this.combinedHistory;const t=this.hoursToShow?((new Date).getTime()-3600*this.hoursToShow*1e3)/1e3:void 0,i={};for(const e of Object.keys(this.combinedHistory))i[e]=[];for(const t of Object.keys(e.states))i[t]=[];for(const r of Object.keys(i)){if(r in this.combinedHistory&&r in e.states){const t=this.combinedHistory[r],n=t[t.length-1];i[r]=t.concat(e.states[r]),e.states[r][0].lu<n.lu&&(i[r]=i[r].sort(((e,t)=>e.lu-t.lu)))}else r in this.combinedHistory?i[r]=this.combinedHistory[r]:i[r]=e.states[r];if(t&&r in this.combinedHistory){const e=i[r].filter((e=>e.lu<t));if(!e.length)continue;if(i[r]=i[r].filter((e=>e.lu>=t)),i[r].length&&i[r][0].lu===t)continue;const n=e[e.length-1];n.lu=t,i[r].unshift(n)}}return this.combinedHistory=i,this.combinedHistory}}const R=(e,t)=>!e.states[t]||D.includes(z(t)),B=(e,t,i,r)=>{const n={type:"history/history_during_period",start_time:t.toISOString(),end_time:i.toISOString(),minimal_response:!0,no_attributes:!r.some((t=>R(e,t)))};return 0!==r.length?e.callWS(Object.assign(Object.assign({},n),{entity_ids:r})):e.callWS(n)},O=(e,t,i,r,n,o=!0,a=!0)=>{const s={type:"history/stream",entity_ids:r,start_time:new Date((new Date).getTime()-3600*i*1e3).toISOString(),minimal_response:o,significant_changes_only:a,no_attributes:null!=n?n:!r.some((t=>R(e,t)))},l=new F(e,i);return e.connection.subscribeMessage((e=>t(l.processMessage(e))),s)},j=(e,t,i,r,n)=>{const o={type:"history/stream",entity_ids:n,start_time:i.toISOString(),end_time:r.toISOString(),minimal_response:!1,no_attributes:!1,significant_changes_only:!1},a=new F(e);return e.connection.subscribeMessage((e=>t(a.processMessage(e))),o)},N=globalThis,$=N.ShadowRoot&&(void 0===N.ShadyCSS||N.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,V=Symbol(),U=new WeakMap;let q=class{constructor(e,t,i){if(this._$cssResult$=!0,i!==V)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if($&&void 0===e){const i=void 0!==t&&1===t.length;i&&(e=U.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),i&&U.set(t,e))}return e}toString(){return this.cssText}};const Z=e=>new q("string"==typeof e?e:e+"",void 0,V),G=(e,...t)=>{const i=1===e.length?e[0]:t.reduce(((t,i,r)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+e[r+1]),e[0]);return new q(i,e,V)},H=(e,t)=>{if($)e.adoptedStyleSheets=t.map((e=>e instanceof CSSStyleSheet?e:e.styleSheet));else for(const i of t){const t=document.createElement("style"),r=N.litNonce;void 0!==r&&t.setAttribute("nonce",r),t.textContent=i.cssText,e.appendChild(t)}},W=$?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const i of e.cssRules)t+=i.cssText;return Z(t)})(e):e
|
|
2
2
|
/**
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2017 Google LLC
|
|
@@ -235,7 +235,7 @@ const Ye=e=>(t,i)=>{void 0!==i?i.addInitializer((()=>{customElements.define(e,t)
|
|
|
235
235
|
<div class="maptiler-map" style="${this._computeMapStyle()}"
|
|
236
236
|
<div id="map"></div>
|
|
237
237
|
</div>
|
|
238
|
-
`}async firstUpdated(){await bp(this.entities),await new Promise((e=>setTimeout(e,0))),this._initMap()}updated(e){var t,i,r,n;if(super.updated(e),!this._loaded)return;let o=!1;const a=e.get("hass");if(e.has("_loaded")||e.has("entities"))this._drawEntities(),o=!0;else if(this._loaded&&a&&this.entities)for(const e of this.entities)if(a.states[Pp(e)]!==this.hass.states[Pp(e)]){this._drawEntities(),o=!0;break}if((e.has("_loaded")||this.autoFit&&o)&&this._fitMap(),e.has("zoom")&&this._map.setZoom(this.zoom),e.has("hass")&&a){if((null===(t=a.themes)||void 0===t?void 0:t.darkMode)!==(null===(i=this.hass.themes)||void 0===i?void 0:i.darkMode)){const e=this._getInitStyle();this._map.setStyle(e,{diff:!1})}}e.has("themeMode")||e.has("hass")&&(!a||(null===(r=a.themes)||void 0===r||r.darkMode,null===(n=this.hass.themes)||void 0===n||n.darkMode))}_drawEntities(){const e=this.hass,t=this._map;if(!t||!e)return;if(this._mapItems.length&&(this._mapItems.forEach((e=>e.remove())),this._mapItems=[],this._mapFocusItems=[]),this._zoneItems.length&&(this._zoneItems.forEach((e=>e.remove())),this._zoneItems=[],this._mapFocusZones=[]),!this.entities)return;const i=[],r=getComputedStyle(this),n=r.getPropertyValue("--accent-color"),o=r.getPropertyValue("--secondary-text-color"),a=r.getPropertyValue("--dark-primary-color"),s=this._darkMode?"dark":"light";for(const r of this.entities){const l=e.states[Pp(r)];if(!l)continue;const c="string"!=typeof r?r.name:void 0,u=null!=c?c:pt(l),{latitude:h,longitude:p,passive:d,icon:m,radius:f,entity_picture:g,gps_accuracy:y}=l.attributes;if(!h||!p)continue;const _=[p,h];if("zone"===L(l)){let e="";if(m){const t=document.createElement("ha-icon");t.setAttribute("icon",m),e=t.outerHTML}else{const t=document.createElement("span");t.innerHTML=u,e=t.outerHTML}const a=np(_,f,{steps:200,units:"meters",properties:{color:d?o:n,title:u,opacity:d?.2:.3}});i.push(a);const l=document.createElement("div");l.className=`marker ${s}`,l.innerHTML=e,l.title=u;const c=new Xr({element:l}).setLngLat(_).addTo(t);this._zoneItems.push(c),!this.fitZones||"string"!=typeof r&&!1===r.focus||this._mapFocusZones.push(a.geometry);continue}const v="string"!=typeof r&&"state"===r.label_mode?this.hass.formatEntityState(l):"string"!=typeof r&&"attribute"===r.label_mode&&void 0!==r.attribute?this.hass.formatEntityAttributeValue(l,r.attribute):null!=c?c:u.split(" ").map((e=>e[0])).join("").substring(0,3),b=document.createElement("ha-entity-marker");b.hass=this.hass,b.showIcon="string"!=typeof r&&"icon"===r.label_mode,b.entityId=Pp(r),b.entityName=v,b.entityPicture=!g||"string"!=typeof r&&r.label_mode?"":this.hass.hassUrl(g),"string"!=typeof r&&(b.entityColor=r.color),this.blockMoreInfo&&b.addEventListener("click",(e=>{e.stopImmediatePropagation(),e.preventDefault()}),!0);const x=new Xr({element:b}).setLngLat(_).addTo(t);if(this._mapItems.push(x),"string"!=typeof r&&!1===r.focus||this._mapFocusItems.push(x),y){const e=np(_,y,{steps:64,units:"meters",properties:{color:a,title:u,opacity:.5}});i.push(e)}}const l={type:"geojson",data:{type:"FeatureCollection",features:i}};t.getSource("circles")&&(t.removeSource("circles"),t.removeLayer("circles"),t.removeLayer("circles-stroke")),t.addSource("circles",l),t.addLayer({id:"circles",type:"fill",source:"circles",paint:{"fill-color":["get","color"],"fill-opacity":["get","opacity"]}}),t.addLayer({id:"circles-stroke",type:"line",source:"circles",paint:{"line-color":["get","color"],"line-width":2}})}_computePathTooltip(e,t){let i;return i=e.fullDatetime?E(t.timestamp,this.hass.locale):pp(t.timestamp)?I(t.timestamp,this.hass.locale):Fp(t.timestamp,this.hass.locale,this.hass.config),`<b>${e.name}</b><br><i>${i}</i>`}_drawPaths(){const e=this.hass,t=this._map;if(!t||!e)return;if(this._mapPaths.length&&(this._mapPaths.forEach((e=>{t.removeLayer(e.id)})),this._mapPaths=[]),!this.paths)return;const i=getComputedStyle(this).getPropertyValue("--dark-primary-color"),r=[],n=[];this.paths.forEach((e=>{if(!e.points||e.points.length<2)return;let t,o;e.gradualOpacity&&(t=e.gradualOpacity/(e.points.length-2),o=1-e.gradualOpacity);for(let a=0;a<e.points.length-1;a++){const s=e.points[a].point,l=e.points[a+1].point,c=e.gradualOpacity?o+a*t:void 0,u=this._computePathTooltip(e,e.points[a]),h={type:"Feature",geometry:{type:"Point",coordinates:s},properties:{friendlyName:e.name,color:e.color||i,opacity:c,fillOpacity:c,lastUpdated:e.points[a].timestamp,popupContent:u}};n.push(h);const p={type:"Feature",geometry:{type:"LineString",coordinates:[s,l]},properties:{color:e.color||i,opacity:c,fillOpacity:c}};r.push(p)}}));const o={type:"geojson",data:{type:"FeatureCollection",features:n}},a={type:"geojson",data:{type:"FeatureCollection",features:r}};t.getSource("points")&&t.removeSource("points"),t.getSource("lines")&&t.removeSource("lines"),t.addSource("points",o),t.addSource("lines",a);const s={id:"lines",type:"line",source:"lines",layout:{"line-cap":"round","line-join":"round"},paint:{"line-color":["get","color"],"line-width":2,"line-opacity":["get","opacity"]}},l={id:"points",type:"circle",source:"points",paint:{"circle-radius":5,"circle-color":["get","color"],"circle-opacity":["get","fillOpacity"],"circle-stroke-width":1,"circle-stroke-color":["get","color"]}};t.addLayer(s),t.addLayer(l),this._mapPaths.push(s,l),this._setupPointInteraction()}_setupPointInteraction(){const e=this._map;if(!e)return;const t=new Yr({closeButton:!1,closeOnClick:!1,offset:8});let i;e.on("mousemove","points",(async r=>{var n;if(e.getZoom()<10)return e.getCanvas().style.cursor="",t.remove(),void(i=void 0);const o=null===(n=r.features)||void 0===n?void 0:n[0];if(!o)return;const a=o.geometry.coordinates.toString();if(i!==a){i=a,e.getCanvas().style.cursor="pointer";const n=r.features[0].geometry.coordinates.slice(),{popupContent:s}=o.properties;for(;Math.abs(r.lngLat.lng-n[0])>180;)n[0]+=r.lngLat.lng>n[0]?360:-360;t.setLngLat(n).setHTML(s).addTo(e);const l=await Ip(n[1],n[0],this.apiKey);if(l){const e=`${s}<br>${l.streetName}`;t.isOpen()&&t.setHTML(e)}}})),e.on("mouseleave","points",(()=>{e.getCanvas().style.cursor="",t.remove(),i=void 0}))}_fitMap(e){var t,i,r,n;const
|
|
238
|
+
`}async firstUpdated(){await bp(this.entities),await new Promise((e=>setTimeout(e,0))),this._initMap()}updated(e){var t,i,r,n;if(super.updated(e),!this._loaded)return;let o=!1;const a=e.get("hass");if(e.has("_loaded")||e.has("entities"))this._drawEntities(),o=!0;else if(this._loaded&&a&&this.entities)for(const e of this.entities)if(a.states[Pp(e)]!==this.hass.states[Pp(e)]){this._drawEntities(),o=!0;break}if((e.has("_loaded")||this.autoFit&&o)&&this._fitMap(),e.has("zoom")&&this._map.setZoom(this.zoom),e.has("hass")&&a){if((null===(t=a.themes)||void 0===t?void 0:t.darkMode)!==(null===(i=this.hass.themes)||void 0===i?void 0:i.darkMode)){const e=this._getInitStyle();this._map.setStyle(e,{diff:!1})}}e.has("themeMode")||e.has("hass")&&(!a||(null===(r=a.themes)||void 0===r||r.darkMode,null===(n=this.hass.themes)||void 0===n||n.darkMode))}_drawEntities(){const e=this.hass,t=this._map;if(!t||!e)return;if(this._mapItems.length&&(this._mapItems.forEach((e=>e.remove())),this._mapItems=[],this._mapFocusItems=[]),this._zoneItems.length&&(this._zoneItems.forEach((e=>e.remove())),this._zoneItems=[],this._mapFocusZones=[]),!this.entities)return;const i=[],r=getComputedStyle(this),n=r.getPropertyValue("--accent-color"),o=r.getPropertyValue("--secondary-text-color"),a=r.getPropertyValue("--dark-primary-color"),s=this._darkMode?"dark":"light";for(const r of this.entities){const l=e.states[Pp(r)];if(!l)continue;const c="string"!=typeof r?r.name:void 0,u=null!=c?c:pt(l),{latitude:h,longitude:p,passive:d,icon:m,radius:f,entity_picture:g,gps_accuracy:y}=l.attributes;if(!h||!p)continue;const _=[p,h];if("zone"===L(l)){let e="";if(m){const t=document.createElement("ha-icon");t.setAttribute("icon",m),e=t.outerHTML}else{const t=document.createElement("span");t.innerHTML=u,e=t.outerHTML}const a=np(_,f,{steps:200,units:"meters",properties:{color:d?o:n,title:u,opacity:d?.2:.3}});i.push(a);const l=document.createElement("div");l.className=`marker ${s}`,l.innerHTML=e,l.title=u;const c=new Xr({element:l}).setLngLat(_).addTo(t);this._zoneItems.push(c),!this.fitZones||"string"!=typeof r&&!1===r.focus||this._mapFocusZones.push(a.geometry);continue}const v="string"!=typeof r&&"state"===r.label_mode?this.hass.formatEntityState(l):"string"!=typeof r&&"attribute"===r.label_mode&&void 0!==r.attribute?this.hass.formatEntityAttributeValue(l,r.attribute):null!=c?c:u.split(" ").map((e=>e[0])).join("").substring(0,3),b=document.createElement("ha-entity-marker");b.hass=this.hass,b.showIcon="string"!=typeof r&&"icon"===r.label_mode,b.entityId=Pp(r),b.entityName=v,b.entityPicture=!g||"string"!=typeof r&&r.label_mode?"":this.hass.hassUrl(g),"string"!=typeof r&&(b.entityColor=r.color),this.blockMoreInfo&&b.addEventListener("click",(e=>{e.stopImmediatePropagation(),e.preventDefault()}),!0);const x=new Xr({element:b}).setLngLat(_).addTo(t);if(this._mapItems.push(x),"string"!=typeof r&&!1===r.focus||this._mapFocusItems.push(x),y){const e=np(_,y,{steps:64,units:"meters",properties:{color:a,title:u,opacity:.5}});i.push(e)}}const l={type:"geojson",data:{type:"FeatureCollection",features:i}};t.getSource("circles")&&(t.removeSource("circles"),t.removeLayer("circles"),t.removeLayer("circles-stroke")),t.addSource("circles",l),t.addLayer({id:"circles",type:"fill",source:"circles",paint:{"fill-color":["get","color"],"fill-opacity":["get","opacity"]}}),t.addLayer({id:"circles-stroke",type:"line",source:"circles",paint:{"line-color":["get","color"],"line-width":2}})}_computePathTooltip(e,t){let i;return i=e.fullDatetime?E(t.timestamp,this.hass.locale):pp(t.timestamp)?I(t.timestamp,this.hass.locale):Fp(t.timestamp,this.hass.locale,this.hass.config),`<b>${e.name}</b><br><i>${i}</i>`}_drawPaths(){const e=this.hass,t=this._map;if(!t||!e)return;if(this._mapPaths.length&&(this._mapPaths.forEach((e=>{t.removeLayer(e.id)})),this._mapPaths=[]),!this.paths)return;const i=getComputedStyle(this).getPropertyValue("--dark-primary-color"),r=[],n=[];this.paths.forEach((e=>{if(!e.points||e.points.length<2)return;let t,o;e.gradualOpacity&&(t=e.gradualOpacity/(e.points.length-2),o=1-e.gradualOpacity);for(let a=0;a<e.points.length-1;a++){const s=e.points[a].point,l=e.points[a+1].point,c=e.gradualOpacity?o+a*t:void 0,u=this._computePathTooltip(e,e.points[a]),h={type:"Feature",geometry:{type:"Point",coordinates:s},properties:{friendlyName:e.name,color:e.color||i,opacity:c,fillOpacity:c,lastUpdated:e.points[a].timestamp,popupContent:u}};n.push(h);const p={type:"Feature",geometry:{type:"LineString",coordinates:[s,l]},properties:{color:e.color||i,opacity:c,fillOpacity:c}};r.push(p)}}));const o={type:"geojson",data:{type:"FeatureCollection",features:n}},a={type:"geojson",data:{type:"FeatureCollection",features:r}};t.getSource("points")&&t.removeSource("points"),t.getSource("lines")&&t.removeSource("lines"),t.addSource("points",o),t.addSource("lines",a);const s={id:"lines",type:"line",source:"lines",layout:{"line-cap":"round","line-join":"round"},paint:{"line-color":["get","color"],"line-width":2,"line-opacity":["get","opacity"]}},l={id:"points",type:"circle",source:"points",paint:{"circle-radius":5,"circle-color":["get","color"],"circle-opacity":["get","fillOpacity"],"circle-stroke-width":1,"circle-stroke-color":["get","color"]}};t.addLayer(s),t.addLayer(l),this._mapPaths.push(s,l),this._setupPointInteraction()}_setupPointInteraction(){const e=this._map;if(!e)return;const t=new Yr({closeButton:!1,closeOnClick:!1,offset:8});let i;e.on("mousemove","points",(async r=>{var n;if(e.getZoom()<10)return e.getCanvas().style.cursor="",t.remove(),void(i=void 0);const o=null===(n=r.features)||void 0===n?void 0:n[0];if(!o)return;const a=o.geometry.coordinates.toString();if(i!==a){i=a,e.getCanvas().style.cursor="pointer";const n=r.features[0].geometry.coordinates.slice(),{popupContent:s}=o.properties;for(;Math.abs(r.lngLat.lng-n[0])>180;)n[0]+=r.lngLat.lng>n[0]?360:-360;t.setLngLat(n).setHTML(s).addTo(e);const l=await Ip(n[1],n[0],this.apiKey);if(l){const e=`${s}<br>${l.streetName}`;t.isOpen()&&t.setHTML(e)}}})),e.on("mouseleave","points",(()=>{e.getCanvas().style.cursor="",t.remove(),i=void 0}))}_fitMap(e){var t,i,r,n,o;const a=this._map;if(!a)return;if(!this._mapFocusItems.length&&!this._mapFocusZones.length)return void this._map.setCenter([this.hass.config.longitude,this.hass.config.latitude]);let s=new xh;null===(t=this._mapFocusItems)||void 0===t||t.forEach((e=>{s.extend(e.getLngLat())})),null===(i=this._mapFocusZones)||void 0===i||i.forEach((e=>{e.coordinates[0].forEach((e=>{s.extend([e[0],e[1]])}))})),s.isEmpty()||(this._fitBounds=s,a.fitBounds(s,{padding:null!==(r=null==e?void 0:e.pad)&&void 0!==r?r:50,maxZoom:null!==(n=null==e?void 0:e.zoom)&&void 0!==n?n:this.zoom,animate:null!==(o=null==e?void 0:e.animate)&&void 0!==o&&o,linear:!0}))}_initMap(){const{zoom:e,apiKey:t}=this,i=[this.hass.config.longitude,this.hass.config.latitude],r=this._getInitStyle(),n=this.shadowRoot.getElementById("map");gr.apiKey=t;const o={geolocateControl:!1,fullscreenControl:!1,navigationControl:!1,attributionControl:!1,fadeDuration:0,canvasContextAttributes:{antialias:!0},maxZoom:20,container:n,zoom:e,style:r,center:i};this._map=new fu(o),this._map.on("load",(async()=>{this._loaded=!0})),this._map.on("style.load",(async()=>{this._changeControlTheme(),this._drawPaths()}));const a=new sn({visualizePitch:!0,visualizeRoll:!0});this._map.addControl(a,"top-right"),this._map.on("styleimagemissing",(e=>{var t;null===(t=this._map)||void 0===t||t.addImage(e.id,{width:0,height:0,data:new Uint8Array(0)})})),this._addMapControl("mdi:image-filter-center-focus","Center","top-right",this._centerMap.bind(this))}_centerMap(){this._fitMap({zoom:this.zoom,animate:!0})}_addMapControl(e,t,i,r){this._map.addControl({onAdd:()=>{const i=this._createButton(e,t);return i.style.display="unset",i.addEventListener("click",r),i},onRemove:()=>null},i)}_getInitStyle(){const{light:e,dark:t}=this.customStyles||{},i=e=>{const t=e.split(".");return 2===t.length?ti[t[0]][t[1]]:ti[t[0]]};return this._darkMode?t?i(t):Bp.dark:e?i(e):Bp.light}_changeControlTheme(){const e=e=>this.getModeColor(e),t=Array.from(this.shadowRoot.querySelectorAll(".maplibregl-ctrl"));for(const i of t){const t=Array.from(i.querySelectorAll("button"));for(const i of t){const t=i;t.style.backgroundColor=e("backgroundColor"),t.style.boxShadow=e("boxShadow");const r=i.querySelector("span");if(r){const e=window.getComputedStyle(r).backgroundImage;if(e.startsWith('url("data:image/svg+xml')){const t=this.getModeColor("fill"),i=e.slice(5,-2),n=decodeURIComponent(i.split(",")[1]).replace(/fill:[^;"]*/g,`fill:${t}`).replace(/fill="[^"]*"/g,`fill="${t}"`),o=`data:image/svg+xml;charset=utf-8,${encodeURIComponent(n)}`;r.style.backgroundImage=`url("${o}")`}}}}}_computeMapStyle(){const e=e=>this.getModeColor(e),t=e("fill"),i=e("backgroundColor"),r=e("boxShadow");return _p({"--emc-btn-bg":i,"--emc-btn-shadow":r,"--emc-btn-color":t})}static get styles(){return[Z(Gh),G`
|
|
239
239
|
:host {
|
|
240
240
|
--tooltip-color: rgba(80, 80, 80, 0.9);
|
|
241
241
|
}
|