diff --git a/HADotNet.CommandCenter/HADotNet.CommandCenter.csproj b/HADotNet.CommandCenter/HADotNet.CommandCenter.csproj index 303be8b..c3b52c9 100644 --- a/HADotNet.CommandCenter/HADotNet.CommandCenter.csproj +++ b/HADotNet.CommandCenter/HADotNet.CommandCenter.csproj @@ -5,8 +5,8 @@ win10;alpine.3.10-x64;debian.10-arm Latest Linux - 1.0.22.0 - 1.0.22.0 + 1.0.24.0 + 1.0.24.0 false false false @@ -39,7 +39,7 @@ - + diff --git a/HADotNet.CommandCenter/Models/Config/Tiles/BaseTile.cs b/HADotNet.CommandCenter/Models/Config/Tiles/BaseTile.cs index fed9ded..d8cd4e4 100644 --- a/HADotNet.CommandCenter/Models/Config/Tiles/BaseTile.cs +++ b/HADotNet.CommandCenter/Models/Config/Tiles/BaseTile.cs @@ -10,6 +10,11 @@ namespace HADotNet.CommandCenter.Models.Config.Tiles { public abstract class BaseTile { + /// + /// How big the max tile size can go - currently 8x. + /// + private const int MAX_TILE_SIZE = 8; + /// /// Gets or sets the tile's admin name. /// @@ -73,7 +78,7 @@ public string IconClassName } } - public int GetTileSizeX(int tileSize, int padding) => Math.Min(Math.Max(SizeX, 1), 4) * tileSize + (Math.Min(Math.Max(SizeX, 1), 4) - 1) * padding; - public int GetTileSizeY(int tileSize, int padding) => Math.Min(Math.Max(SizeY, 1), 4) * tileSize + (Math.Min(Math.Max(SizeY, 1), 4) - 1) * padding; + public int GetTileSizeX(int tileSize, int padding) => Math.Min(Math.Max(SizeX, 1), MAX_TILE_SIZE) * tileSize + (Math.Min(Math.Max(SizeX, 1), MAX_TILE_SIZE) - 1) * padding; + public int GetTileSizeY(int tileSize, int padding) => Math.Min(Math.Max(SizeY, 1), MAX_TILE_SIZE) * tileSize + (Math.Min(Math.Max(SizeY, 1), MAX_TILE_SIZE) - 1) * padding; } } diff --git a/HADotNet.CommandCenter/Models/Config/Tiles/StateTile.cs b/HADotNet.CommandCenter/Models/Config/Tiles/StateTile.cs index 805cd54..b5c7a52 100644 --- a/HADotNet.CommandCenter/Models/Config/Tiles/StateTile.cs +++ b/HADotNet.CommandCenter/Models/Config/Tiles/StateTile.cs @@ -14,6 +14,12 @@ public class StateTile : BaseEntityTile [Display(Name = "Override Label")] public string OverrideLabel { get; set; } + /// + /// Gets or sets the override unit for this tile. + /// + [Display(Name = "Override Unit")] + public string OverrideUnit { get; set; } + /// /// Gets or sets if the state should be displayed as a whole number, if appropriate. /// diff --git a/HADotNet.CommandCenter/Views/StateTile/Add.cshtml b/HADotNet.CommandCenter/Views/StateTile/Add.cshtml index 0dcb944..4fc4bb4 100644 --- a/HADotNet.CommandCenter/Views/StateTile/Add.cshtml +++ b/HADotNet.CommandCenter/Views/StateTile/Add.cshtml @@ -40,6 +40,15 @@

By default, the entity's friendly name will be used. Enter an override if desired.

+
+ +
+ + +
+ +

By default, the entity's default unit suffix will be added. Enter a different unit suffix here if desired.

+
diff --git a/HADotNet.CommandCenter/wwwroot/js/app.js b/HADotNet.CommandCenter/wwwroot/js/app.js index a466b13..740623d 100644 --- a/HADotNet.CommandCenter/wwwroot/js/app.js +++ b/HADotNet.CommandCenter/wwwroot/js/app.js @@ -529,6 +529,7 @@ class StateTile extends Tile { super.updateTile(t); } updateState(state) { + var _a; //console.log("State received for: " + tile.name, state); let label = state.new_state.attributes["friendly_name"].toString(); if (this.tile.overrideLabel) { @@ -542,7 +543,10 @@ class StateTile extends Tile { else if (this.tile.displayTextOn && value.toLowerCase() === 'on') { value = this.tile.displayTextOn; } - if (state.new_state.attributes["unit_of_measurement"]) { + if ((_a = this.tile.overrideUnit) === null || _a === void 0 ? void 0 : _a.length) { + value += this.tile.overrideUnit; + } + else if (state.new_state.attributes["unit_of_measurement"]) { value += state.new_state.attributes["unit_of_measurement"].toString(); } $(`#tile-${this.tile.name}`).find('span[value-state]').text(value); diff --git a/HADotNet.CommandCenter/wwwroot/js/app.min.js b/HADotNet.CommandCenter/wwwroot/js/app.min.js index 6a34b3b..13f5645 100644 --- a/HADotNet.CommandCenter/wwwroot/js/app.min.js +++ b/HADotNet.CommandCenter/wwwroot/js/app.min.js @@ -9,4 +9,4 @@ Platform: ${navigator.platform} Touch points: ${navigator.maxTouchPoints} Supports ES6: ${Utils.es5check()?"Yes":"NO"} Supports ES2016: ${Utils.es2016Check()?"Yes":"NO"} -
`);$(".debug-window").click(()=>$(".debug-window").remove())}static es5check(){if(typeof Symbol=="undefined")return!1;try{eval("class Foo {}");eval("var bar = (x) => x+1")}catch(n){return!1}return!0}static es2016Check(){if(typeof Array.prototype.includes!="function")return!1;try{eval("2**2")}catch(n){return!1}return!0}}class Tile{constructor(n,t,i,r,u){this.page=n;this.name=t;this.conn=i;this.canLoad=u.canLoad;this.canClick=u.canClick;this.entityIds=[];this.loaded=!this.canLoad;this.el=$(`.tiles .tile[data-tile-name="${t}"]`);this.canClick&&this.el.click(()=>{this.onClick()});var f=this.el.data("tile-entityid");typeof f=="object"&&Array.isArray(f)?this.entityIds=f:this.entityIds.push(f===null||f===void 0?void 0:f.toString());i.on("SendSystemConfig",(n,i)=>{t==n&&(console.debug(`Received "SendSystemConfig" for tile: ${n}`),this.config=i,this.canLoad)});i.on("SendTile",n=>{t==n.name&&(console.debug(`Received "SendTile" for tile: ${n.name}`),this.updateTile(n))});i.on("SendCalendarInfo",(n,i,r)=>{t==n.name&&this.updateCalendar(i,r)});i.on("SendWarning",n=>console.warn(n));i.on("SendDateTime",(n,i,r)=>{t==n.name&&this.updateDateTime(n,i,r)});this.requestConfig(n);this.canLoad&&this.requestState()}onClick(){return this.conn.invoke("OnTileClicked",this.page,this.name)}updateTile(){this.loaded=!0;this.disableLoading()}updateState(){}updateCalendar(){}updateDateTime(){}requestState(){this.conn.invoke("RequestTileState",this.page,this.name)}requestConfig(n){this.conn.invoke("RequestConfig",n,this.name)}disableLoading(){this.loadingDebouncer&&window.clearTimeout(this.loadingDebouncer);this.loadingDebouncer=null;this.el.removeClass("tile-loading")}getEntityIds(){return this.entityIds}}class BlankTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!1,canLoad:!1})}}class LabelTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!1,canLoad:!1})}}class DateTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!1,canLoad:!0});this.refreshTimer=null}updateDateTime(n,t,i){$(`#tile-${n.name}`).find("span[value-date]").text(t);$(`#tile-${n.name}`).find("span[value-time]").text(i);super.updateDateTime();this.refreshTimer||(this.refreshTimer=window.setTimeout(n=>{n.refreshTimer=null,this.requestState()},3e4,this))}}class StateTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!1,canLoad:!0})}updateTile(n){this.tile=n;super.updateTile(n)}updateState(n){let i=n.new_state.attributes.friendly_name.toString();this.tile.overrideLabel&&(i=this.tile.overrideLabel);$(`#tile-${this.tile.name}`).find("span[value-name]").text(i);let t=this.tile.roundDecimals?parseInt(n.new_state.state).toString():n.new_state.state;this.tile.displayTextOff&&t.toLowerCase()==="off"?t=this.tile.displayTextOff:this.tile.displayTextOn&&t.toLowerCase()==="on"&&(t=this.tile.displayTextOn);n.new_state.attributes.unit_of_measurement&&(t+=n.new_state.attributes.unit_of_measurement.toString());$(`#tile-${this.tile.name}`).find("span[value-state]").text(t)}}class LightTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!0,canLoad:!0})}updateTile(n){this.tile=n;super.updateTile(n)}updateState(n){let t=n.new_state.attributes.friendly_name.toString();this.tile.overrideLabel&&(t=this.tile.overrideLabel);$(`#tile-${this.tile.name}`).find("span[value-name]").text(t);$(`#tile-${this.tile.name}`).find("span[value-icon]").removeClass(`mdi-${this.tile.displayIcon} mdi-${this.tile.displayOffIcon}`).addClass(`mdi mdi-${n.new_state.state.toLowerCase()==="on"?Utils.resolveIcon(n.new_state.attributes.icon,this.tile.displayIcon):Utils.resolveIcon(n.new_state.attributes.icon,this.tile.displayOffIcon||this.tile.displayIcon)}`);$(`#tile-${this.tile.name}`).find("span[value-icon]").removeClass("state-off state-on").addClass(n.new_state.state.toLowerCase()==="on"?"state-on":"state-off");this.tile.onColor&&n.new_state.state.toLowerCase()==="on"&&$(`#tile-${this.tile.name} .value`).css("color",this.tile.onColor);this.tile.offColor&&n.new_state.state.toLowerCase()!=="on"&&$(`#tile-${this.tile.name} .value`).css("color",this.tile.offColor)}}class SwitchTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!0,canLoad:!0})}updateTile(n){this.tile=n;super.updateTile(n)}updateState(n){var t;if(this.tile!=null){let i=n.new_state.attributes.friendly_name.toString();((t=this.tile)===null||t===void 0?void 0:t.overrideLabel)&&(i=this.tile.overrideLabel);$(`#tile-${this.tile.name}`).find("span[value-name]").text(i);$(`#tile-${this.tile.name}`).find("span[value-icon]").removeClass(`mdi-${this.tile.displayIcon} mdi-${this.tile.displayOffIcon}`).addClass(`mdi mdi-${this.isOnState(n.new_state.state)?Utils.resolveIcon(n.new_state.attributes.icon,this.tile.displayIcon):Utils.resolveIcon(n.new_state.attributes.icon,this.tile.displayOffIcon||this.tile.displayIcon)}`);$(`#tile-${this.tile.name}`).find("span[value-icon]").removeClass("state-off state-on").addClass(this.isOnState(n.new_state.state)?"state-on":"state-off");this.tile.onColor&&this.isOnState(n.new_state.state)&&$(`#tile-${this.tile.name} .value`).css("color",this.tile.onColor);this.tile.offColor&&!this.isOnState(n.new_state.state)&&$(`#tile-${this.tile.name} .value`).css("color",this.tile.offColor);super.updateState(n)}}isOnState(n){return n.toLowerCase()==="on"||n.toLowerCase()==="open"||n.toLowerCase()==="detected"||n.toLowerCase()==="playing"||n.toLowerCase()==="idle"}}class PersonTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!1,canLoad:!0})}updateTile(n){this.tile=n;super.updateTile(n)}updateState(n){let t=n.new_state.attributes.entity_picture?n.new_state.attributes.entity_picture.toString():"",i=n.new_state.state.replace("_"," "),r=n.new_state.attributes.friendly_name.toString();this.tile.overrideLabel&&(r=this.tile.overrideLabel);let u=i.toLowerCase()==="home";t.toLowerCase().startsWith("http")||(t=Utils.resolveAssetUrl(window.ccOptions.baseUrl,window.ccOptions.overrideAssetUrl,t));$(`#tile-${this.tile.name}`).find("span[value-name]").text(r);$(`#tile-${this.tile.name}`).find("span[value-location]").text(i);$(`#tile-${this.tile.name}`).find("span[value-picture]").css("background-image",`url(${t})`).removeClass("bw");u||$(`#tile-${this.tile.name}`).find("span[value-picture]").addClass("bw")}}class WeatherTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canLoad:!0,canClick:!0});this.page=n;this.name=t;this.conn=i;this.windSpeed="";this.windDir="";this.hi="";this.lo="";this.iconEl=this.el.find(".condition-icon")[0];const u=document.defaultView.getComputedStyle(this.el[0]).color;this.skycons=new Skycons({color:u,resizeClear:!0});this.skycons.add(this.iconEl,Skycons.CLEAR_DAY)}updateTile(n){this.tile=n;super.updateTile(n)}updateState(n){let t=n.new_state==null?null:n.new_state.state;switch(n.entity_id){case this.tile.entityId:n.new_state.attributes.unit_of_measurement&&(t+=n.new_state.attributes.unit_of_measurement.toString());$(`#tile-${this.tile.name}`).find("span[value-temp]").text(t);break;case this.tile.highTempEntity:n.new_state.attributes.unit_of_measurement&&(t+=n.new_state.attributes.unit_of_measurement.toString());this.hi=` ${t}`;break;case this.tile.lowTempEntity:n.new_state.attributes.unit_of_measurement&&(t+=n.new_state.attributes.unit_of_measurement.toString());this.lo=` ${t}`;break;case this.tile.summaryEntity:$(`#tile-${this.tile.name}`).find("span[value-summary]").text(t);break;case this.tile.precipChanceEntity:n.new_state.attributes.unit_of_measurement&&(t+=n.new_state.attributes.unit_of_measurement.toString());$(`#tile-${this.tile.name}`).find("span[value-rain]").text(`Rain: ${t}`);break;case this.tile.windSpeedEntity:this.windSpeed=this.tile.roundWindSpeed?parseInt(t).toString():t;n.new_state.attributes.unit_of_measurement&&(this.windSpeed+=n.new_state.attributes.unit_of_measurement.toString());break;case this.tile.windDirectionEntity:this.windDir=Utils.convertDegreesToCardinal(parseInt(t));this.windDir=` ${this.windDir}`;break;case this.tile.iconEntity:t?(this.skycons.set(this.iconEl,t),this.skycons.play()):(this.skycons.remove(this.iconEl),$(this.iconEl).hide())}$(`#tile-${this.tile.name}`).find("span[value-hi-lo]").html(`${this.hi&&this.lo?this.hi+" / "+this.lo:this.hi+this.lo}`);$(`#tile-${this.tile.name}`).find("span[value-wind]").html(`Wind: ${(this.windSpeed+" "+this.windDir).trim()}`)}}class CameraTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!1,canLoad:!1});this.haConn=r}updateTile(n){this.tile=n;super.updateTile(n);this.updateCameraFeed();window.setInterval(()=>this.updateCameraFeed(),(this.tile.refreshRate>0?this.tile.refreshRate:1)*1e3)}updateCameraFeed(){this.haConn.getCameraImage(this.tile.entityId).then(n=>{let t=this.tile.imageCropMode.toLowerCase()==="cover"||this.tile.imageCropMode.toLowerCase()==="contain"?this.tile.imageCropMode.toLowerCase():"100% 100%",i=this.tile.imageCropMode.toLowerCase()==="cover"||this.tile.imageCropMode.toLowerCase()==="contain"?"50% 50%":"0 0";$(`#tile-${this.tile.name}`).css({backgroundImage:`url('data:${n.result.content_type};base64,${n.result.content}')`,backgroundRepeat:"no-repeat",backgroundPosition:i,backgroundSize:t})})}}class SceneTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!0,canLoad:!0})}updateTile(n){this.tile=n;super.updateTile(n)}updateState(n){let t=n.new_state.attributes.friendly_name.toString();this.tile.overrideLabel&&(t=this.tile.overrideLabel);$(`#tile-${this.tile.name}`).find("span[value-name]").text(t);$(`#tile-${this.tile.name}`).find("span[value-icon]").addClass(`mdi mdi-${this.tile.displayIcon||"filmstrip"}`);$(`#tile-${this.tile.name} .value`).css("color",this.tile.iconColor)}}class MediaTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!0,canLoad:!0});this.haConn=r}updateTile(n){this.tile=n;super.updateTile(n);this.updateMediaImage();window.setInterval(()=>this.updateMediaImage(),(this.tile.refreshRate>0?this.tile.refreshRate:1)*1e3)}updateMediaImage(){var n;if((n=this.state)===null||n===void 0?void 0:n.new_state){let t=this.state.new_state.attributes.friendly_name.toString();(this.tile.overrideLabel&&(t=this.tile.overrideLabel),this.state.new_state.attributes.entity_picture||(t+=` (${this.state.new_state.state})`),$(`#tile-${this.tile.name}`).toggleClass("media-idle",this.state.new_state.attributes.media_title==="Nothing playing"||(this.state.new_state.state=="paused"||this.state.new_state.state=="idle")&&!this.state.new_state.attributes.entity_picture),$(`#tile-${this.tile.name}`).find("span[value-name]").text(this.tile.showLabel?t:""),$(`#tile-${this.tile.name}`).find("span[value-title]").text(this.tile.showTitle&&this.state.new_state.attributes.media_title&&this.state.new_state.attributes.media_title!=="Nothing playing"?this.state.new_state.attributes.media_title.toString():""),this.state.new_state.attributes.entity_picture)&&this.haConn.getMediaImage(this.tile.entityId).then(n=>{let t=this.tile.imageCropMode.toLowerCase()==="cover"||this.tile.imageCropMode.toLowerCase()==="contain"?this.tile.imageCropMode.toLowerCase():"100% 100%",i=this.tile.imageCropMode.toLowerCase()==="cover"||this.tile.imageCropMode.toLowerCase()==="contain"?"50% 50%":"0 0";$(`#tile-${this.tile.name}`).css({backgroundImage:`url('data:${n.result.content_type};base64,${n.result.content}')`,backgroundRepeat:"no-repeat",backgroundPosition:i,backgroundSize:t})})}}updateState(n){this.state=n}}class NavigationTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!0,canLoad:!1})}updateTile(n){this.navTile=n;$(`#tile-${n.name}`).find("span[value-name]").text(this.navTile.label);$(`#tile-${n.name}`).find("span[value-icon]").addClass(`mdi mdi-${this.navTile.displayIcon}`);super.updateTile()}onClick(){switch(this.navTile.mode.toLowerCase().trim()){case"home":window.location.href="/d/";return;case"refresh":window.location.reload();return;case"nav":window.location.href=`/d/${this.navTile.target}`;return;case"debug":Utils.displayDebugInfo();return}}}class CalendarTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canLoad:!0,canClick:!1});this.eventContainer=$(`#tile-${t} div.calendar-events`)}updateTile(n){this.tile=n;super.updateTile(n)}updateCalendar(n,t){let i=n.attributes.friendly_name.toString();this.tile.overrideLabel&&(i=this.tile.overrideLabel);$(`#tile-${this.tile.name}`).find("span[value-name]").text(i);this.refreshEvents(t);super.updateCalendar();this.tile.refreshRate>0&&(this.refreshTimer||(this.refreshTimer=window.setTimeout(n=>{n.refreshTimer=null,this.requestState()},3e4,this)))}refreshEvents(n){var t;if(this.eventContainer.empty(),n.length){let i="";for(let r=0;r${f}`),i=f);this.eventContainer.append(`

${u.summary}${u.start.dateTime?moment((t=u.start.dateTime)!==null&&t!==void 0?t:u.start.date).format("LT"):"All Day"}

`)}}else this.eventContainer.append('No events!<\/span>')}getEventHeader(n){var i;const r=moment(),u=moment().add(1,"day");let f=this.formatHeader(r),e=this.formatHeader(u);const o=moment((i=n.start.dateTime)!==null&&i!==void 0?i:n.start.date);let t=this.formatHeader(o);return t===f?t+=" (Today)":t===e&&(t+=" (Tomorrow)"),t}formatHeader(n){return n.format("ddd")+", "+n.format("ll")}}class TileMap{}TileMap.ClassMap={Blank:BlankTile,Label:LabelTile,Date:DateTile,State:StateTile,Light:LightTile,Switch:SwitchTile,Person:PersonTile,Weather:WeatherTile,Camera:CameraTile,Scene:SceneTile,Media:MediaTile,Navigation:NavigationTile,Calendar:CalendarTile};window.location.search.toUpperCase().indexOf("DEBUG=1")>-1&&!window.location.pathname.toUpperCase().startsWith("/ADMIN")&&Utils.displayDebugInfo();class CommandCenter{constructor(){this.tiles=[];$(()=>this.init())}init(){window.ccOptions.mode==PageMode.Admin?this.initAdmin():this.initUser();this.initializeMdiPreview();this.initializeColorPreview();this.initializeNightlyRefresh()}initAdmin(){$(window).on("beforeunload",n=>{if(this.pageIsDirty&&$(n.target.activeElement).prop("type")!=="submit")return"You have unsaved changes. Are you sure you want to leave?"});if($("#importTheme, #importConfig").click(()=>{confirm("WARNING: This will OVERWRITE your current settings. Export first if you want to save what you have now! Continue?")&&$("#importBrowser").click()}),$("#importBrowser").change(()=>{$("#importForm").submit()}),$("#resetConfig").click(n=>confirm("WARNING: This will COMPLETELY RESET your HACC installation and PERMANENTLY DELETE all of your tiles, themes, and settings. Are you sure you want to reset your config?")?!0:(n.preventDefault(),!1)),$(".ui.accordion").accordion(),$(".ui.checkbox").checkbox(),$(".ui.dropdown").not(".no-placeholder").dropdown({fullTextSearch:!0}),$(".ui.no-placeholder.dropdown").dropdown({placeholder:!1}),$("#Page_PageFontFace option").each(function(n,t){$(t).parent().siblings(".menu").find('.item[data-value="'+$(t).text()+'"]').css("font-family",$(t).text())}),$(".preview-layout-grid").length){$("#auto-layout").click(()=>{confirm("This will reset the layout for this page and attempt to automatically arrange all tiles evenly.\n\nYour tiles will all probably change locations. You have been warned. :)\n\nAre you sure you want to reset the layout?")&&this.pk.layout()});$(".preview-layout-grid").prepend(`
`);this.pk=window.ccOptions?new Packery(".preview-layout-grid",{itemSelector:".preview-layout-item",columnWidth:window.ccOptions.tilePreviewSize,rowHeight:window.ccOptions.tilePreviewSize,gutter:window.ccOptions.tilePreviewPadding,initLayout:!1}):new Packery(".preview-layout-grid",{itemSelector:".preview-layout-item",columnWidth:".preview-layout-item",rowHeight:".preview-layout-item",gutter:window.ccOptions.tilePreviewPadding,initLayout:!1});this.pk.on("layoutComplete",()=>this.writeItemLayout());this.pk.on("dragItemPositioned",()=>{setTimeout(()=>{this.writeItemLayout(),this.pageIsDirty=!0},25)});this.writeItemLayout();typeof Draggabilly=="function"?$(".preview-layout-item").each((n,t)=>this.pk.bindDraggabillyEvents(new Draggabilly(t,{containment:".preview-layout-grid"}))):console.warn("Draggabilly is not available - drag and drop interface will not work.");$("#grid__tmp").remove();this.pk.initShiftLayout(Array.from(document.querySelectorAll(".preview-layout-grid > .preview-layout-item")))}}initUser(){window.ccOptions.socketUrl?this.conn=new HAConnection(window.ccOptions.socketUrl):$("#alerts").show().find(".alert-message").text("[E] HA connection not defined...");this.conn.OnConnectionStateChanged.on(n=>{n==HAConnectionState.Closed?$("#alerts").show().find(".alert-message").text("[H] Connection lost, reconnecting..."):n==HAConnectionState.Open&&($("#alerts").hide(),this.conn.refreshAllStates())});this.conn.OnStateChanged.on(n=>{var t=this.findTilesByEntityId(n.data.entity_id);for(var i of t)i.updateState(n.data),console.info(`Updating tile for entity "${n.data.entity_id}" to state "${n.data.new_state.state}".`)});this.tileConn=(new signalR.HubConnectionBuilder).withUrl("/hubs/tile").build();this.tileConn.onclose(()=>{$("#alerts").show().find(".alert-message").text("[S] Connection lost, reconnecting..."),window.setTimeout(()=>{window.location.reload()},1e4)});this.tileConn.start().then(()=>{$(".tiles .tile").each((n,t)=>{try{let n=new TileMap.ClassMap[$(t).data("tile-type").toString()](window.ccOptions.pageId,$(t).data("tile-name"),this.tileConn,this.conn);this.tiles.push(n)}catch(i){console.error('Error instantiating class "'+($(t).data("tile-type")||"__MISSING__")+'Tile". Was it added to the tile type map?',i,t)}}),this.initHandle||(this.initHandle=window.setInterval(()=>this.waitAndPerformInit(),25)),window.ccOptions.autoReturn>0&&window.setTimeout(()=>window.location.href="/d/",window.ccOptions.autoReturn*1e3)})}waitAndPerformInit(){this.tiles.filter(n=>n.loaded).length===this.tiles.length&&(this.conn.initialize(),window.clearInterval(this.initHandle))}findTilesByEntityId(n){return this.tiles.filter(t=>{let i=t.getEntityIds();return i.some(t=>t.toLowerCase()===n.toLowerCase())})}initializeNightlyRefresh(){window.setInterval(()=>{(new Date).getHours()==2&&window.setTimeout(()=>{window.location.reload()},36e5)},35e5)}initializeMdiPreview(){$(".mdi-icon-placeholder + input").each((n,t)=>{$(t).keyup(n=>{this.refreshDynamicIcon(n.currentTarget)}),this.refreshDynamicIcon(t)})}refreshDynamicIcon(n){$(n).parent().children(".mdi-icon-placeholder").attr("class","large icon mdi-icon-placeholder").addClass(`mdi mdi-${$(n).val()}`)}initializeColorPreview(){$(".color-preview + input").each((n,t)=>{$(t).keyup(n=>{this.refreshDynamicColor(n.currentTarget)}),this.refreshDynamicColor(t)})}refreshDynamicColor(n){$(n).parent().children(".color-preview").css("color",`${$(n).val()}`)}writeItemLayout(){var n=[],t=this.pk.getItemElements();for(let i=0;i`);$(".debug-window").click(()=>$(".debug-window").remove())}static es5check(){if(typeof Symbol=="undefined")return!1;try{eval("class Foo {}");eval("var bar = (x) => x+1")}catch(n){return!1}return!0}static es2016Check(){if(typeof Array.prototype.includes!="function")return!1;try{eval("2**2")}catch(n){return!1}return!0}}class Tile{constructor(n,t,i,r,u){this.page=n;this.name=t;this.conn=i;this.canLoad=u.canLoad;this.canClick=u.canClick;this.entityIds=[];this.loaded=!this.canLoad;this.el=$(`.tiles .tile[data-tile-name="${t}"]`);this.canClick&&this.el.click(()=>{this.onClick()});var f=this.el.data("tile-entityid");typeof f=="object"&&Array.isArray(f)?this.entityIds=f:this.entityIds.push(f===null||f===void 0?void 0:f.toString());i.on("SendSystemConfig",(n,i)=>{t==n&&(console.debug(`Received "SendSystemConfig" for tile: ${n}`),this.config=i,this.canLoad)});i.on("SendTile",n=>{t==n.name&&(console.debug(`Received "SendTile" for tile: ${n.name}`),this.updateTile(n))});i.on("SendCalendarInfo",(n,i,r)=>{t==n.name&&this.updateCalendar(i,r)});i.on("SendWarning",n=>console.warn(n));i.on("SendDateTime",(n,i,r)=>{t==n.name&&this.updateDateTime(n,i,r)});this.requestConfig(n);this.canLoad&&this.requestState()}onClick(){return this.conn.invoke("OnTileClicked",this.page,this.name)}updateTile(){this.loaded=!0;this.disableLoading()}updateState(){}updateCalendar(){}updateDateTime(){}requestState(){this.conn.invoke("RequestTileState",this.page,this.name)}requestConfig(n){this.conn.invoke("RequestConfig",n,this.name)}disableLoading(){this.loadingDebouncer&&window.clearTimeout(this.loadingDebouncer);this.loadingDebouncer=null;this.el.removeClass("tile-loading")}getEntityIds(){return this.entityIds}}class BlankTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!1,canLoad:!1})}}class LabelTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!1,canLoad:!1})}}class DateTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!1,canLoad:!0});this.refreshTimer=null}updateDateTime(n,t,i){$(`#tile-${n.name}`).find("span[value-date]").text(t);$(`#tile-${n.name}`).find("span[value-time]").text(i);super.updateDateTime();this.refreshTimer||(this.refreshTimer=window.setTimeout(n=>{n.refreshTimer=null,this.requestState()},3e4,this))}}class StateTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!1,canLoad:!0})}updateTile(n){this.tile=n;super.updateTile(n)}updateState(n){var i;let r=n.new_state.attributes.friendly_name.toString();this.tile.overrideLabel&&(r=this.tile.overrideLabel);$(`#tile-${this.tile.name}`).find("span[value-name]").text(r);let t=this.tile.roundDecimals?parseInt(n.new_state.state).toString():n.new_state.state;this.tile.displayTextOff&&t.toLowerCase()==="off"?t=this.tile.displayTextOff:this.tile.displayTextOn&&t.toLowerCase()==="on"&&(t=this.tile.displayTextOn);((i=this.tile.overrideUnit)===null||i===void 0?void 0:i.length)?t+=this.tile.overrideUnit:n.new_state.attributes.unit_of_measurement&&(t+=n.new_state.attributes.unit_of_measurement.toString());$(`#tile-${this.tile.name}`).find("span[value-state]").text(t)}}class LightTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!0,canLoad:!0})}updateTile(n){this.tile=n;super.updateTile(n)}updateState(n){let t=n.new_state.attributes.friendly_name.toString();this.tile.overrideLabel&&(t=this.tile.overrideLabel);$(`#tile-${this.tile.name}`).find("span[value-name]").text(t);$(`#tile-${this.tile.name}`).find("span[value-icon]").removeClass(`mdi-${this.tile.displayIcon} mdi-${this.tile.displayOffIcon}`).addClass(`mdi mdi-${n.new_state.state.toLowerCase()==="on"?Utils.resolveIcon(n.new_state.attributes.icon,this.tile.displayIcon):Utils.resolveIcon(n.new_state.attributes.icon,this.tile.displayOffIcon||this.tile.displayIcon)}`);$(`#tile-${this.tile.name}`).find("span[value-icon]").removeClass("state-off state-on").addClass(n.new_state.state.toLowerCase()==="on"?"state-on":"state-off");this.tile.onColor&&n.new_state.state.toLowerCase()==="on"&&$(`#tile-${this.tile.name} .value`).css("color",this.tile.onColor);this.tile.offColor&&n.new_state.state.toLowerCase()!=="on"&&$(`#tile-${this.tile.name} .value`).css("color",this.tile.offColor)}}class SwitchTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!0,canLoad:!0})}updateTile(n){this.tile=n;super.updateTile(n)}updateState(n){var t;if(this.tile!=null){let i=n.new_state.attributes.friendly_name.toString();((t=this.tile)===null||t===void 0?void 0:t.overrideLabel)&&(i=this.tile.overrideLabel);$(`#tile-${this.tile.name}`).find("span[value-name]").text(i);$(`#tile-${this.tile.name}`).find("span[value-icon]").removeClass(`mdi-${this.tile.displayIcon} mdi-${this.tile.displayOffIcon}`).addClass(`mdi mdi-${this.isOnState(n.new_state.state)?Utils.resolveIcon(n.new_state.attributes.icon,this.tile.displayIcon):Utils.resolveIcon(n.new_state.attributes.icon,this.tile.displayOffIcon||this.tile.displayIcon)}`);$(`#tile-${this.tile.name}`).find("span[value-icon]").removeClass("state-off state-on").addClass(this.isOnState(n.new_state.state)?"state-on":"state-off");this.tile.onColor&&this.isOnState(n.new_state.state)&&$(`#tile-${this.tile.name} .value`).css("color",this.tile.onColor);this.tile.offColor&&!this.isOnState(n.new_state.state)&&$(`#tile-${this.tile.name} .value`).css("color",this.tile.offColor);super.updateState(n)}}isOnState(n){return n.toLowerCase()==="on"||n.toLowerCase()==="open"||n.toLowerCase()==="detected"||n.toLowerCase()==="playing"||n.toLowerCase()==="idle"}}class PersonTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!1,canLoad:!0})}updateTile(n){this.tile=n;super.updateTile(n)}updateState(n){let t=n.new_state.attributes.entity_picture?n.new_state.attributes.entity_picture.toString():"",i=n.new_state.state.replace("_"," "),r=n.new_state.attributes.friendly_name.toString();this.tile.overrideLabel&&(r=this.tile.overrideLabel);let u=i.toLowerCase()==="home";t.toLowerCase().startsWith("http")||(t=Utils.resolveAssetUrl(window.ccOptions.baseUrl,window.ccOptions.overrideAssetUrl,t));$(`#tile-${this.tile.name}`).find("span[value-name]").text(r);$(`#tile-${this.tile.name}`).find("span[value-location]").text(i);$(`#tile-${this.tile.name}`).find("span[value-picture]").css("background-image",`url(${t})`).removeClass("bw");u||$(`#tile-${this.tile.name}`).find("span[value-picture]").addClass("bw")}}class WeatherTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canLoad:!0,canClick:!0});this.page=n;this.name=t;this.conn=i;this.windSpeed="";this.windDir="";this.hi="";this.lo="";this.iconEl=this.el.find(".condition-icon")[0];const u=document.defaultView.getComputedStyle(this.el[0]).color;this.skycons=new Skycons({color:u,resizeClear:!0});this.skycons.add(this.iconEl,Skycons.CLEAR_DAY)}updateTile(n){this.tile=n;super.updateTile(n)}updateState(n){let t=n.new_state==null?null:n.new_state.state;switch(n.entity_id){case this.tile.entityId:n.new_state.attributes.unit_of_measurement&&(t+=n.new_state.attributes.unit_of_measurement.toString());$(`#tile-${this.tile.name}`).find("span[value-temp]").text(t);break;case this.tile.highTempEntity:n.new_state.attributes.unit_of_measurement&&(t+=n.new_state.attributes.unit_of_measurement.toString());this.hi=` ${t}`;break;case this.tile.lowTempEntity:n.new_state.attributes.unit_of_measurement&&(t+=n.new_state.attributes.unit_of_measurement.toString());this.lo=` ${t}`;break;case this.tile.summaryEntity:$(`#tile-${this.tile.name}`).find("span[value-summary]").text(t);break;case this.tile.precipChanceEntity:n.new_state.attributes.unit_of_measurement&&(t+=n.new_state.attributes.unit_of_measurement.toString());$(`#tile-${this.tile.name}`).find("span[value-rain]").text(`Rain: ${t}`);break;case this.tile.windSpeedEntity:this.windSpeed=this.tile.roundWindSpeed?parseInt(t).toString():t;n.new_state.attributes.unit_of_measurement&&(this.windSpeed+=n.new_state.attributes.unit_of_measurement.toString());break;case this.tile.windDirectionEntity:this.windDir=Utils.convertDegreesToCardinal(parseInt(t));this.windDir=` ${this.windDir}`;break;case this.tile.iconEntity:t?(this.skycons.set(this.iconEl,t),this.skycons.play()):(this.skycons.remove(this.iconEl),$(this.iconEl).hide())}$(`#tile-${this.tile.name}`).find("span[value-hi-lo]").html(`${this.hi&&this.lo?this.hi+" / "+this.lo:this.hi+this.lo}`);$(`#tile-${this.tile.name}`).find("span[value-wind]").html(`Wind: ${(this.windSpeed+" "+this.windDir).trim()}`)}}class CameraTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!1,canLoad:!1});this.haConn=r}updateTile(n){this.tile=n;super.updateTile(n);this.updateCameraFeed();window.setInterval(()=>this.updateCameraFeed(),(this.tile.refreshRate>0?this.tile.refreshRate:1)*1e3)}updateCameraFeed(){this.haConn.getCameraImage(this.tile.entityId).then(n=>{let t=this.tile.imageCropMode.toLowerCase()==="cover"||this.tile.imageCropMode.toLowerCase()==="contain"?this.tile.imageCropMode.toLowerCase():"100% 100%",i=this.tile.imageCropMode.toLowerCase()==="cover"||this.tile.imageCropMode.toLowerCase()==="contain"?"50% 50%":"0 0";$(`#tile-${this.tile.name}`).css({backgroundImage:`url('data:${n.result.content_type};base64,${n.result.content}')`,backgroundRepeat:"no-repeat",backgroundPosition:i,backgroundSize:t})})}}class SceneTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!0,canLoad:!0})}updateTile(n){this.tile=n;super.updateTile(n)}updateState(n){let t=n.new_state.attributes.friendly_name.toString();this.tile.overrideLabel&&(t=this.tile.overrideLabel);$(`#tile-${this.tile.name}`).find("span[value-name]").text(t);$(`#tile-${this.tile.name}`).find("span[value-icon]").addClass(`mdi mdi-${this.tile.displayIcon||"filmstrip"}`);$(`#tile-${this.tile.name} .value`).css("color",this.tile.iconColor)}}class MediaTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!0,canLoad:!0});this.haConn=r}updateTile(n){this.tile=n;super.updateTile(n);this.updateMediaImage();window.setInterval(()=>this.updateMediaImage(),(this.tile.refreshRate>0?this.tile.refreshRate:1)*1e3)}updateMediaImage(){var n;if((n=this.state)===null||n===void 0?void 0:n.new_state){let t=this.state.new_state.attributes.friendly_name.toString();(this.tile.overrideLabel&&(t=this.tile.overrideLabel),this.state.new_state.attributes.entity_picture||(t+=` (${this.state.new_state.state})`),$(`#tile-${this.tile.name}`).toggleClass("media-idle",this.state.new_state.attributes.media_title==="Nothing playing"||(this.state.new_state.state=="paused"||this.state.new_state.state=="idle")&&!this.state.new_state.attributes.entity_picture),$(`#tile-${this.tile.name}`).find("span[value-name]").text(this.tile.showLabel?t:""),$(`#tile-${this.tile.name}`).find("span[value-title]").text(this.tile.showTitle&&this.state.new_state.attributes.media_title&&this.state.new_state.attributes.media_title!=="Nothing playing"?this.state.new_state.attributes.media_title.toString():""),this.state.new_state.attributes.entity_picture)&&this.haConn.getMediaImage(this.tile.entityId).then(n=>{let t=this.tile.imageCropMode.toLowerCase()==="cover"||this.tile.imageCropMode.toLowerCase()==="contain"?this.tile.imageCropMode.toLowerCase():"100% 100%",i=this.tile.imageCropMode.toLowerCase()==="cover"||this.tile.imageCropMode.toLowerCase()==="contain"?"50% 50%":"0 0";$(`#tile-${this.tile.name}`).css({backgroundImage:`url('data:${n.result.content_type};base64,${n.result.content}')`,backgroundRepeat:"no-repeat",backgroundPosition:i,backgroundSize:t})})}}updateState(n){this.state=n}}class NavigationTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canClick:!0,canLoad:!1})}updateTile(n){this.navTile=n;$(`#tile-${n.name}`).find("span[value-name]").text(this.navTile.label);$(`#tile-${n.name}`).find("span[value-icon]").addClass(`mdi mdi-${this.navTile.displayIcon}`);super.updateTile()}onClick(){switch(this.navTile.mode.toLowerCase().trim()){case"home":window.location.href="/d/";return;case"refresh":window.location.reload();return;case"nav":window.location.href=`/d/${this.navTile.target}`;return;case"debug":Utils.displayDebugInfo();return}}}class CalendarTile extends Tile{constructor(n,t,i,r){super(n,t,i,r,{canLoad:!0,canClick:!1});this.eventContainer=$(`#tile-${t} div.calendar-events`)}updateTile(n){this.tile=n;super.updateTile(n)}updateCalendar(n,t){let i=n.attributes.friendly_name.toString();this.tile.overrideLabel&&(i=this.tile.overrideLabel);$(`#tile-${this.tile.name}`).find("span[value-name]").text(i);this.refreshEvents(t);super.updateCalendar();this.tile.refreshRate>0&&(this.refreshTimer||(this.refreshTimer=window.setTimeout(n=>{n.refreshTimer=null,this.requestState()},3e4,this)))}refreshEvents(n){var t;if(this.eventContainer.empty(),n.length){let i="";for(let r=0;r${f}`),i=f);this.eventContainer.append(`

${u.summary}${u.start.dateTime?moment((t=u.start.dateTime)!==null&&t!==void 0?t:u.start.date).format("LT"):"All Day"}

`)}}else this.eventContainer.append('No events!<\/span>')}getEventHeader(n){var i;const r=moment(),u=moment().add(1,"day");let f=this.formatHeader(r),e=this.formatHeader(u);const o=moment((i=n.start.dateTime)!==null&&i!==void 0?i:n.start.date);let t=this.formatHeader(o);return t===f?t+=" (Today)":t===e&&(t+=" (Tomorrow)"),t}formatHeader(n){return n.format("ddd")+", "+n.format("ll")}}class TileMap{}TileMap.ClassMap={Blank:BlankTile,Label:LabelTile,Date:DateTile,State:StateTile,Light:LightTile,Switch:SwitchTile,Person:PersonTile,Weather:WeatherTile,Camera:CameraTile,Scene:SceneTile,Media:MediaTile,Navigation:NavigationTile,Calendar:CalendarTile};window.location.search.toUpperCase().indexOf("DEBUG=1")>-1&&!window.location.pathname.toUpperCase().startsWith("/ADMIN")&&Utils.displayDebugInfo();class CommandCenter{constructor(){this.tiles=[];$(()=>this.init())}init(){window.ccOptions.mode==PageMode.Admin?this.initAdmin():this.initUser();this.initializeMdiPreview();this.initializeColorPreview();this.initializeNightlyRefresh()}initAdmin(){$(window).on("beforeunload",n=>{if(this.pageIsDirty&&$(n.target.activeElement).prop("type")!=="submit")return"You have unsaved changes. Are you sure you want to leave?"});if($("#importTheme, #importConfig").click(()=>{confirm("WARNING: This will OVERWRITE your current settings. Export first if you want to save what you have now! Continue?")&&$("#importBrowser").click()}),$("#importBrowser").change(()=>{$("#importForm").submit()}),$("#resetConfig").click(n=>confirm("WARNING: This will COMPLETELY RESET your HACC installation and PERMANENTLY DELETE all of your tiles, themes, and settings. Are you sure you want to reset your config?")?!0:(n.preventDefault(),!1)),$(".ui.accordion").accordion(),$(".ui.checkbox").checkbox(),$(".ui.dropdown").not(".no-placeholder").dropdown({fullTextSearch:!0}),$(".ui.no-placeholder.dropdown").dropdown({placeholder:!1}),$("#Page_PageFontFace option").each(function(n,t){$(t).parent().siblings(".menu").find('.item[data-value="'+$(t).text()+'"]').css("font-family",$(t).text())}),$(".preview-layout-grid").length){$("#auto-layout").click(()=>{confirm("This will reset the layout for this page and attempt to automatically arrange all tiles evenly.\n\nYour tiles will all probably change locations. You have been warned. :)\n\nAre you sure you want to reset the layout?")&&this.pk.layout()});$(".preview-layout-grid").prepend(`
`);this.pk=window.ccOptions?new Packery(".preview-layout-grid",{itemSelector:".preview-layout-item",columnWidth:window.ccOptions.tilePreviewSize,rowHeight:window.ccOptions.tilePreviewSize,gutter:window.ccOptions.tilePreviewPadding,initLayout:!1}):new Packery(".preview-layout-grid",{itemSelector:".preview-layout-item",columnWidth:".preview-layout-item",rowHeight:".preview-layout-item",gutter:window.ccOptions.tilePreviewPadding,initLayout:!1});this.pk.on("layoutComplete",()=>this.writeItemLayout());this.pk.on("dragItemPositioned",()=>{setTimeout(()=>{this.writeItemLayout(),this.pageIsDirty=!0},25)});this.writeItemLayout();typeof Draggabilly=="function"?$(".preview-layout-item").each((n,t)=>this.pk.bindDraggabillyEvents(new Draggabilly(t,{containment:".preview-layout-grid"}))):console.warn("Draggabilly is not available - drag and drop interface will not work.");$("#grid__tmp").remove();this.pk.initShiftLayout(Array.from(document.querySelectorAll(".preview-layout-grid > .preview-layout-item")))}}initUser(){window.ccOptions.socketUrl?this.conn=new HAConnection(window.ccOptions.socketUrl):$("#alerts").show().find(".alert-message").text("[E] HA connection not defined...");this.conn.OnConnectionStateChanged.on(n=>{n==HAConnectionState.Closed?$("#alerts").show().find(".alert-message").text("[H] Connection lost, reconnecting..."):n==HAConnectionState.Open&&($("#alerts").hide(),this.conn.refreshAllStates())});this.conn.OnStateChanged.on(n=>{var t=this.findTilesByEntityId(n.data.entity_id);for(var i of t)i.updateState(n.data),console.info(`Updating tile for entity "${n.data.entity_id}" to state "${n.data.new_state.state}".`)});this.tileConn=(new signalR.HubConnectionBuilder).withUrl("/hubs/tile").build();this.tileConn.onclose(()=>{$("#alerts").show().find(".alert-message").text("[S] Connection lost, reconnecting..."),window.setTimeout(()=>{window.location.reload()},1e4)});this.tileConn.start().then(()=>{$(".tiles .tile").each((n,t)=>{try{let n=new TileMap.ClassMap[$(t).data("tile-type").toString()](window.ccOptions.pageId,$(t).data("tile-name"),this.tileConn,this.conn);this.tiles.push(n)}catch(i){console.error('Error instantiating class "'+($(t).data("tile-type")||"__MISSING__")+'Tile". Was it added to the tile type map?',i,t)}}),this.initHandle||(this.initHandle=window.setInterval(()=>this.waitAndPerformInit(),25)),window.ccOptions.autoReturn>0&&window.setTimeout(()=>window.location.href="/d/",window.ccOptions.autoReturn*1e3)})}waitAndPerformInit(){this.tiles.filter(n=>n.loaded).length===this.tiles.length&&(this.conn.initialize(),window.clearInterval(this.initHandle))}findTilesByEntityId(n){return this.tiles.filter(t=>{let i=t.getEntityIds();return i.some(t=>t.toLowerCase()===n.toLowerCase())})}initializeNightlyRefresh(){window.setInterval(()=>{(new Date).getHours()==2&&window.setTimeout(()=>{window.location.reload()},36e5)},35e5)}initializeMdiPreview(){$(".mdi-icon-placeholder + input").each((n,t)=>{$(t).keyup(n=>{this.refreshDynamicIcon(n.currentTarget)}),this.refreshDynamicIcon(t)})}refreshDynamicIcon(n){$(n).parent().children(".mdi-icon-placeholder").attr("class","large icon mdi-icon-placeholder").addClass(`mdi mdi-${$(n).val()}`)}initializeColorPreview(){$(".color-preview + input").each((n,t)=>{$(t).keyup(n=>{this.refreshDynamicColor(n.currentTarget)}),this.refreshDynamicColor(t)})}refreshDynamicColor(n){$(n).parent().children(".color-preview").css("color",`${$(n).val()}`)}writeItemLayout(){var n=[],t=this.pk.getItemElements();for(let i=0;i