import{__decorate as e}from"../node_modules/tslib/tslib.es6.js";import{css as i,LitElement as t,html as r}from"https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";import{property as s,customElement as n}from"https://cdn.skypack.dev/pin/lit@v2.5.0-jYRq0AKQogjUdUh7SCAE/mode=imports/optimized/lit/decorators.js";import{simulationState as a}from"./device-observer.js";let l=class extends t{constructor(){super(...arguments),this.deviceData=[]}connectedCallback(){super.connectedCallback(),a.registerObserver(this)}disconnectedCallback(){super.disconnectedCallback(),a.removeObserver(this)}onNotify(e){this.deviceData=e.devices,this.requestUpdate()}checkBle(e){var i;return void 0!==(null===(i=e.chips.at(0))||void 0===i?void 0:i.bleBeacon)}render(){const e=["red","orange","yellow","green","blue","indigo","purple"];return r` | |
${this.deviceData.map(((i,t)=>r` | |
<li> | |
<center> | |
${this.checkBle(i)?r`<ns-pyramid-sprite | |
id=${i.name} | |
color=${e[t%e.length]} | |
size="30px" | |
style="opacity:0.5;" | |
role="listitem" | |
tabindex="0" | |
aria-label="${i.name} in Device Legends" | |
></ns-pyramid-sprite | |
>${i.name} `:r`<ns-cube-sprite | |
id=${i.name} | |
color=${e[t%e.length]} | |
size="30px" | |
style="opacity:0.5;" | |
role="listitem" | |
tabindex="0" | |
aria-label="${i.name} in Device Legends" | |
></ns-cube-sprite | |
>${i.name} `} | |
</center> | |
</li> | |
`))} | |
<li> | |
<center> | |
<ns-pyramid-sprite | |
id="1234" | |
color=${e[this.deviceData.length%e.length]} | |
size="30px" | |
style="opacity:0.5;" | |
role="listitem" | |
tabindex="0" | |
aria-label="beacon in Device Legends" | |
></ns-pyramid-sprite | |
>beacon | |
</center> | |
</li> | |
<li> | |
<center> | |
<ns-pyramid-sprite | |
id="5678" | |
color=${e[(this.deviceData.length+1)%e.length]} | |
size="30px" | |
style="opacity:0.5;" | |
role="listitem" | |
tabindex="0" | |
aria-label="anchor in Device Legends" | |
></ns-pyramid-sprite | |
>anchor | |
</center> | |
</li> | |
`}};l.styles=i` | |
:host { | |
justify-content: center; | |
display: flex; | |
flex-wrap: wrap; | |
gap: 1rem; | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
li { | |
border-style: solid; | |
border-color: lightgray; | |
flex-grow: 0; | |
flex-shrink: 0; | |
flex-basis: 125px; | |
} | |
li center { | |
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
margin: 8px; | |
} | |
.box { | |
position: relative; | |
width: 80vw; | |
height: 60vh; | |
border: solid 1px rgb(198, 210, 255); | |
margin: 2.5em auto; | |
} | |
`,e([s()],l.prototype,"deviceData",void 0),l=e([n("ns-device-list")],l);export{l as DeviceList}; |