iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
7 lines • 14.7 kB
JavaScript
export const __rspack_esm_id=67237;export const __rspack_esm_ids=[67237];export const __webpack_modules__={62647(t,a,e){var s=e(62826),i=e(9866),r=e(5124),o=e(22441);class n extends i.A{static get styles(){return[i.A.styles,r.AH`:host{font-size:var(--ha-font-size-m);--wa-color-brand-on-quiet:var(
--ha-tab-active-text-color,
var(--primary-color)
);--wa-color-neutral-on-quiet:var(--wa-color-brand-on-quiet);opacity:.8;color:inherit;--wa-space-l:16px}:host([active]:not([disabled])){opacity:1} (hover:hover){:host(:hover:not([disabled]):not([active])) .tab{color:var(--wa-color-brand-on-quiet)}}`]}}n=(0,s.Cg)([(0,o.EM)("ha-tab-group-tab")],n)},66289(t,a,e){e.a(t,async function(t,a){try{var s=e(62826),i=e(42814),r=e(5124),o=e(22441),n=e(36356),c=t([i]);i=(c.then?(await c)():c)[0];class l extends i.A{connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this._handleKeyDown,!0)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleKeyDown,!0)}handleClick(t){this._dragScrollController.scrolled||super.handleClick(t)}static get styles(){return[i.A.styles,r.AH`:host{--track-width:2px;--track-color:var(--ha-tab-track-color, var(--divider-color));--indicator-color:var(
--ha-tab-indicator-color,
var(--primary-color)
);--wa-color-neutral-on-quiet:var(--indicator-color)}.tab-group-top ::slotted(ha-tab-group-tab[active]){border-block-end:solid var(--track-width) var(--indicator-color);margin-block-end:calc(-1 * var(--track-width))}.tab-group-start ::slotted(ha-tab-group-tab[active]){border-inline-end:solid var(--track-width) var(--indicator-color);margin-inline-end:calc(-1 * var(--track-width))}.tab-group-end ::slotted(ha-tab-group-tab[active]){border-inline-start:solid var(--track-width) var(--indicator-color);margin-inline-start:calc(-1 * var(--track-width))}.scroll-button::part(base):hover{background-color:transparent}`]}constructor(...t){super(...t),this._dragScrollController=new n.q(this,{selector:".nav"}),this.tabTag="ha-tab-group-tab",this.tabOnly=!0,this._handleKeyDown=t=>{(t.altKey||t.metaKey)&&t.stopPropagation()}}}(0,s.Cg)([(0,o.MZ)({attribute:"tab-tag"})],l.prototype,"tabTag",void 0),(0,s.Cg)([(0,o.MZ)({attribute:"tab-only",type:Boolean})],l.prototype,"tabOnly",void 0),l=(0,s.Cg)([(0,o.EM)("ha-tab-group")],l),a()}catch(t){a(t)}})},84932(t,a,e){e.a(t,async function(t,s){try{e.r(a);e(44114),e(18111),e(7588),e(61701),e(45367),e(92731);var i=e(62826),r=e(5124),o=e(22441),n=e(6412),c=e(22786),l=e(36356),h=e(72487),d=e(30162),p=e(20058),v=e(38962),b=e(36158),u=e(65829),g=e(93367),m=(e(67094),e(66289)),f=(e(62647),e(34127)),y=e(43248),w=e(28978),_=t([v,u,m,f,b,g,d,h,p]);[v,u,m,f,b,g,d,h,p]=_.then?(await _)():_;const A="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z",C="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12C20,14.4 19,16.5 17.3,18C15.9,16.7 14,16 12,16C10,16 8.2,16.7 6.7,18C5,16.5 4,14.4 4,12A8,8 0 0,1 12,4M14,5.89C13.62,5.9 13.26,6.15 13.1,6.54L11.81,9.77L11.71,10C11,10.13 10.41,10.6 10.14,11.26C9.73,12.29 10.23,13.45 11.26,13.86C12.29,14.27 13.45,13.77 13.86,12.74C14.12,12.08 14,11.32 13.57,10.76L13.67,10.5L14.96,7.29L14.97,7.26C15.17,6.75 14.92,6.17 14.41,5.96C14.28,5.91 14.15,5.89 14,5.89M10,6A1,1 0 0,0 9,7A1,1 0 0,0 10,8A1,1 0 0,0 11,7A1,1 0 0,0 10,6M7,9A1,1 0 0,0 6,10A1,1 0 0,0 7,11A1,1 0 0,0 8,10A1,1 0 0,0 7,9M17,9A1,1 0 0,0 16,10A1,1 0 0,0 17,11A1,1 0 0,0 18,10A1,1 0 0,0 17,9Z",$="M12,3.25C12,3.25 6,10 6,14C6,17.32 8.69,20 12,20A6,6 0 0,0 18,14C18,10 12,3.25 12,3.25M14.47,9.97L15.53,11.03L9.53,17.03L8.47,15.97M9.75,10A1.25,1.25 0 0,1 11,11.25A1.25,1.25 0 0,1 9.75,12.5A1.25,1.25 0 0,1 8.5,11.25A1.25,1.25 0 0,1 9.75,10M14.25,14.5A1.25,1.25 0 0,1 15.5,15.75A1.25,1.25 0 0,1 14.25,17A1.25,1.25 0 0,1 13,15.75A1.25,1.25 0 0,1 14.25,14.5Z",x="M4,10A1,1 0 0,1 3,9A1,1 0 0,1 4,8H12A2,2 0 0,0 14,6A2,2 0 0,0 12,4C11.45,4 10.95,4.22 10.59,4.59C10.2,5 9.56,5 9.17,4.59C8.78,4.2 8.78,3.56 9.17,3.17C9.9,2.45 10.9,2 12,2A4,4 0 0,1 16,6A4,4 0 0,1 12,10H4M19,12A1,1 0 0,0 20,11A1,1 0 0,0 19,10C18.72,10 18.47,10.11 18.29,10.29C17.9,10.68 17.27,10.68 16.88,10.29C16.5,9.9 16.5,9.27 16.88,8.88C17.42,8.34 18.17,8 19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14H5A1,1 0 0,1 4,13A1,1 0 0,1 5,12H19M18,18H4A1,1 0 0,1 3,17A1,1 0 0,1 4,16H18A3,3 0 0,1 21,19A3,3 0 0,1 18,22C17.17,22 16.42,21.66 15.88,21.12C15.5,20.73 15.5,20.1 15.88,19.71C16.27,19.32 16.9,19.32 17.29,19.71C17.47,19.89 17.72,20 18,20A1,1 0 0,0 19,19A1,1 0 0,0 18,18Z";class j extends r.WF{_unsubscribeForecastEvents(){this._subscribed&&(this._subscribed.then(t=>t()),this._subscribed=void 0),this._forecastEvent=void 0}async _subscribeForecastEvents(){this._unsubscribeForecastEvents(),this.isConnected&&this.hass&&this.stateObj&&this._forecastType&&(this._subscribed=(0,y.Mu)(this.hass.connection,this.stateObj.entity_id,this._forecastType,t=>{this._forecastEvent=t}))}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this._subscribeForecastEvents()}disconnectedCallback(){super.disconnectedCallback(),this._unsubscribeForecastEvents()}shouldUpdate(t){if(t.has("stateObj"))return!0;const a=t.get("hass");return!a||a.locale!==this.hass.locale||a.config.unit_system!==this.hass.config.unit_system}willUpdate(t){if(super.willUpdate(t),!t.has("stateObj")&&this._subscribed||!this.stateObj)t.has("_forecastType")&&this._subscribeForecastEvents();else{const a=t.get("stateObj");a?.entity_id===this.stateObj?.entity_id&&this._subscribed||(this._forecastType=(0,y.JM)(this.stateObj),this._subscribeForecastEvents())}}updated(t){super.updated(t),this.stateObj?this._dragScrollController.enabled=Boolean((0,y.yd)(this.stateObj.attributes,this._forecastEvent)?.forecast?.length):this._dragScrollController.enabled=!1}render(){if(!this.hass||!this.stateObj)return r.s6;const t=(0,y.N_)(this.stateObj.state),a=this._supportedForecasts(this.stateObj),e=(0,y.yd)(this.stateObj.attributes,this._forecastEvent),s=e?.forecast,i="hourly"===e?.type,o="twice_daily"===e?.type,c=(0,y.L8)(this.stateObj.state,this,void 0,this.hass.auth.accessToken);return r.qy` <div class="content"> <div class="icon-image"> ${c||r.qy` <ha-state-icon class="weather-icon" .stateObj="${this.stateObj}"></ha-state-icon> `} </div> <div class="info"> <div class="name-state"> <div class="state"> ${t?(0,w.u)(this.stateObj):this.hass.formatEntityState(this.stateObj)} </div> <div class="time-ago"> <ha-relative-time id="relative-time" .hass="${this.hass}" .datetime="${this.stateObj.last_changed}" capitalize></ha-relative-time> <ha-tooltip for="relative-time"> <div class="row"> <span class="column-name"> ${this.hass.localize("ui.dialogs.more_info_control.last_changed")}: </span> <ha-relative-time .hass="${this.hass}" .datetime="${this.stateObj.last_changed}" capitalize></ha-relative-time> </div> <div class="row"> <span> ${this.hass.localize("ui.dialogs.more_info_control.last_updated")}: </span> <ha-relative-time .hass="${this.hass}" .datetime="${this.stateObj.last_updated}" capitalize></ha-relative-time> </div> </ha-tooltip> </div> </div> <div class="temp-attribute"> <div class="temp"> ${void 0!==this.stateObj.attributes.temperature&&null!==this.stateObj.attributes.temperature?r.qy` ${(0,p.ZV)(this.stateObj.attributes.temperature,this.hass.locale)} <span>${(0,y.d9)(this.hass.config,this.stateObj,"temperature")}</span> `:r.s6} </div> <div class="attribute"> ${(0,y.nO)(this.hass,this.stateObj,s)} </div> </div> </div> </div> ${this._showValue(this.stateObj.attributes.pressure)?r.qy` <div class="flex"> <ha-svg-icon .path="${C}"></ha-svg-icon> <div class="main"> ${this.hass.localize("ui.card.weather.attributes.air_pressure")} </div> <div> ${this.hass.formatEntityAttributeValue(this.stateObj,"pressure")} </div> </div> `:r.s6} ${this._showValue(this.stateObj.attributes.humidity)?r.qy` <div class="flex"> <ha-svg-icon .path="${$}"></ha-svg-icon> <div class="main"> ${this.hass.localize("ui.card.weather.attributes.humidity")} </div> <div> ${this.hass.formatEntityAttributeValue(this.stateObj,"humidity")} </div> </div> `:r.s6} ${this._showValue(this.stateObj.attributes.wind_speed)?r.qy` <div class="flex"> <ha-svg-icon .path="${x}"></ha-svg-icon> <div class="main"> ${this.hass.localize("ui.card.weather.attributes.wind_speed")} </div> <div> ${(0,y.VU)(this.hass,this.stateObj,this.stateObj.attributes.wind_speed,this.stateObj.attributes.wind_bearing)} </div> </div> `:r.s6} ${this._showValue(this.stateObj.attributes.visibility)?r.qy` <div class="flex"> <ha-svg-icon .path="${A}"></ha-svg-icon> <div class="main"> ${this.hass.localize("ui.card.weather.attributes.visibility")} </div> <div> ${this.hass.formatEntityAttributeValue(this.stateObj,"visibility")} </div> </div> `:r.s6} ${a?.length?r.qy` <div class="section"> ${this.hass.localize("ui.card.weather.forecast")}: </div> ${a?.length>1?r.qy`<ha-tab-group -tab-show="${this._handleForecastTypeChanged}"> ${a.map(t=>r.qy`<ha-tab-group-tab slot="nav" .panel="${t}" .active="${this._forecastType===t}"> ${this.hass.localize(`ui.card.weather.${t}`)} </ha-tab-group-tab>`)} </ha-tab-group>`:r.s6} <div class="${(0,n.H)({forecast:!0,dragging:this._dragScrollController.scrolling})}"> ${s?.length?this._groupForecastByDay(s).map(t=>{const a=i||o;return r.qy` <div class="forecast-day"> ${a?r.qy`<div class="forecast-day-header"> ${(0,h.gu)(new Date(t[0].datetime),this.hass.locale,this.hass.config)} </div>`:r.s6} <div class="forecast-day-content"> ${t.map(t=>this._showValue(t.templow)||this._showValue(t.temperature)?r.qy` <div class="forecast-item"> <div class="forecast-item-label ${a?"":"no-header"}"> ${i?(0,d.fU)(new Date(t.datetime),this.hass.locale,this.hass.config):o?r.qy`<div class="daynight"> ${!1!==t.is_daytime?this.hass.localize("ui.card.weather.day"):this.hass.localize("ui.card.weather.night")} </div>`:(0,h.gu)(new Date(t.datetime),this.hass.locale,this.hass.config)} </div> ${this._showValue(t.condition)?r.qy` <div class="forecast-image-icon"> ${(0,y.L8)(t.condition,this,!(t.is_daytime||void 0===t.is_daytime),this.hass.auth.accessToken)} </div> `:r.s6} <div class="temp"> ${this._showValue(t.temperature)?r.qy`${(0,p.ZV)(t.temperature,this.hass.locale)}°`:"—"} </div> <div class="templow"> ${this._showValue(t.templow)?r.qy`${(0,p.ZV)(t.templow,this.hass.locale)}°`:r.s6} </div> </div> `:r.s6)} </div> </div> `}):r.qy`<ha-spinner size="medium"></ha-spinner>`} </div> `:r.s6} ${this.stateObj.attributes.attribution?r.qy` <div class="attribution"> ${this.stateObj.attributes.attribution} </div> `:r.s6} `}_handleForecastTypeChanged(t){this._forecastType=t.detail.name}static get styles(){return[y.Ry,r.AH`ha-svg-icon{color:var(--state-icon-color);margin-left:var(--ha-space-2);margin-inline-start:var(--ha-space-2);margin-inline-end:initial}.section{margin:var(--ha-space-4) 0 var(--ha-space-2) 0;font-size:1.2em}ha-tab-group-tab{flex:1}ha-tab-group-tab::part(base){width:100%;justify-content:center}.flex{display:flex;height:32px;align-items:center}.flex>div:last-child{direction:ltr}.main{flex:1;margin-left:var(--ha-space-6);margin-inline-start:var(--ha-space-6);margin-inline-end:initial}.attribution{text-align:center;margin-top:var(--ha-space-4)}.attribute,.time-ago{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attribute,.attribution,.daynight,.templow,.time-ago{color:var(--secondary-text-color)}.content{display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;margin-bottom:var(--ha-space-4)}.icon-image{display:flex;align-items:center;min-width:64px;margin-right:var(--ha-space-4);margin-inline-end:var(--ha-space-4);margin-inline-start:initial}.icon-image>*{flex:0 0 64px;height:64px}.weather-icon{--mdc-icon-size:64px}.info{display:flex;justify-content:space-between;flex-grow:1;overflow:hidden}.temp-attribute{text-align:var(--float-end)}.temp-attribute .temp{position:relative;margin-right:var(--ha-space-6);direction:ltr}.temp-attribute .temp span{position:absolute;font-size:var(--ha-font-size-2xl);top:1px}.state,.temp-attribute .temp{font-size:var(--ha-font-size-3xl);line-height:var(--ha-line-height-condensed)}.attribute{font-size:var(--ha-font-size-m);line-height:1}.name-state{overflow:hidden;padding-right:var(--ha-space-3);padding-inline-end:var(--ha-space-3);padding-inline-start:initial;width:100%}.state{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.forecast{display:flex;justify-content:space-around;padding:var(--ha-space-4);padding-bottom:0px;overflow-x:auto;scrollbar-color:var(--scrollbar-thumb-color) transparent;scrollbar-width:thin;mask-image:linear-gradient(90deg,transparent 0%,black 5%,black 94%,transparent 100%);user-select:none;cursor:grab}.forecast.dragging{cursor:grabbing}.forecast.dragging *{pointer-events:none}.forecast-day{display:flex;flex-direction:column}.forecast-day-header{position:sticky;top:0;left:0;color:var(--primary-text-color);z-index:1;padding:0 var(--ha-space-3) var(--ha-space-1) var(--ha-space-3);width:fit-content;width:40px;text-align:center;font-weight:var(--ha-font-weight-semi-bold)}.forecast-day-content{display:flex;flex-direction:row}.forecast-item{text-align:center;padding:0 var(--ha-space-3)}.forecast-item-label{font-size:var(--ha-font-size-m);color:var(--secondary-text-color)}.forecast-item-label.no-header{color:var(--primary-text-color)}.forecast .icon,.forecast .temp{margin:var(--ha-space-1) 0}.forecast .temp{font-size:var(--ha-font-size-l)}.forecast-image-icon{padding-top:var(--ha-space-1);padding-bottom:var(--ha-space-1);display:flex;justify-content:center}.forecast-image-icon>*{width:40px;height:40px;--mdc-icon-size:40px}.forecast-icon{--mdc-icon-size:40px}.forecast ha-spinner{height:120px}`]}_showValue(t){return null!=t}constructor(...t){super(...t),this._dragScrollController=new l.q(this,{selector:".forecast",enabled:!1}),this._supportedForecasts=(0,c.A)(t=>(0,y.V7)(t)),this._groupForecastByDay=(0,c.A)(t=>{if(!t)return[];const a=new Map;return t.forEach(t=>{const e=new Date(t.datetime),s=`${e.getFullYear()}-${e.getMonth()}-${e.getDate()}`;a.has(s)||a.set(s,[]),a.get(s).push(t)}),Array.from(a.values())})}}(0,i.Cg)([(0,o.MZ)({attribute:!1})],j.prototype,"hass",void 0),(0,i.Cg)([(0,o.MZ)({attribute:!1})],j.prototype,"stateObj",void 0),(0,i.Cg)([(0,o.wk)()],j.prototype,"_forecastEvent",void 0),(0,i.Cg)([(0,o.wk)()],j.prototype,"_forecastType",void 0),(0,i.Cg)([(0,o.wk)()],j.prototype,"_subscribed",void 0),j=(0,i.Cg)([(0,o.EM)("more-info-weather")],j),s()}catch(t){s(t)}})}};