• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1import{__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`
2      ${this.deviceData.map(((i,t)=>r`
3          <li>
4            <center>
5              ${this.checkBle(i)?r`<ns-pyramid-sprite
6                      id=${i.name}
7                      color=${e[t%e.length]}
8                      size="30px"
9                      style="opacity:0.5;"
10                      role="listitem"
11                      tabindex="0"
12                      aria-label="${i.name} in Device Legends"
13                    ></ns-pyramid-sprite
14                    >${i.name} `:r`<ns-cube-sprite
15                    id=${i.name}
16                    color=${e[t%e.length]}
17                    size="30px"
18                    style="opacity:0.5;"
19                    role="listitem"
20                    tabindex="0"
21                    aria-label="${i.name} in Device Legends"
22                  ></ns-cube-sprite
23                  >${i.name} `}
24            </center>
25          </li>
26        `))}
27      <li>
28        <center>
29          <ns-pyramid-sprite
30            id="1234"
31            color=${e[this.deviceData.length%e.length]}
32            size="30px"
33            style="opacity:0.5;"
34            role="listitem"
35            tabindex="0"
36            aria-label="beacon in Device Legends"
37          ></ns-pyramid-sprite
38          >beacon
39        </center>
40      </li>
41      <li>
42        <center>
43          <ns-pyramid-sprite
44            id="5678"
45            color=${e[(this.deviceData.length+1)%e.length]}
46            size="30px"
47            style="opacity:0.5;"
48            role="listitem"
49            tabindex="0"
50            aria-label="anchor in Device Legends"
51          ></ns-pyramid-sprite
52          >anchor
53        </center>
54      </li>
55    `}};l.styles=i`
56    :host {
57      justify-content: center;
58      display: flex;
59      flex-wrap: wrap;
60      gap: 1rem;
61      margin: 0;
62      padding: 0;
63      list-style: none;
64    }
65
66    li {
67      border-style: solid;
68      border-color: lightgray;
69      flex-grow: 0;
70      flex-shrink: 0;
71      flex-basis: 125px;
72    }
73
74    li center {
75      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
76      margin: 8px;
77    }
78
79    .box {
80      position: relative;
81      width: 80vw;
82      height: 60vh;
83      border: solid 1px rgb(198, 210, 255);
84      margin: 2.5em auto;
85    }
86  `,e([s()],l.prototype,"deviceData",void 0),l=e([n("ns-device-list")],l);export{l as DeviceList};
87