• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1import {css, html, LitElement} from 'lit';
2import {customElement, property} from 'lit/decorators.js';
3
4import {Device, Notifiable, SimulationInfo, simulationState,} from './device-observer.js';
5
6@customElement('ns-device-list')
7export class DeviceList extends LitElement implements Notifiable {
8  @property() deviceData: Device[] = [];
9
10  connectedCallback(): void {
11    // eslint-disable-next-line
12    super.connectedCallback();
13    simulationState.registerObserver(this);
14  }
15
16  disconnectedCallback(): void {
17    // eslint-disable-next-line
18    super.disconnectedCallback();
19    simulationState.removeObserver(this);
20  }
21
22  static styles = css`
23    :host {
24      justify-content: center;
25      display: flex;
26      flex-wrap: wrap;
27      gap: 1rem;
28      margin: 0;
29      padding: 0;
30      list-style: none;
31    }
32
33    li {
34      border-style: solid;
35      border-color: lightgray;
36      flex-grow: 0;
37      flex-shrink: 0;
38      flex-basis: 125px;
39    }
40
41    li center {
42      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
43      margin: 8px;
44    }
45
46    .box {
47      position: relative;
48      width: 80vw;
49      height: 60vh;
50      border: solid 1px rgb(198, 210, 255);
51      margin: 2.5em auto;
52    }
53  `;
54
55  onNotify(data: SimulationInfo): void {
56    this.deviceData = data.devices;
57    this.requestUpdate();
58  }
59
60  render() {
61    const rainbow = [
62      'red',
63      'orange',
64      'yellow',
65      'green',
66      'blue',
67      'indigo',
68      'purple',
69    ];
70
71    // Repeating templates with map
72    return html`
73      ${
74        this.deviceData.map(
75            (device, idx) => html`
76          <li>
77            <center>
78              ${
79                device.visible === true ?
80                    html`<ns-cube-sprite
81                      id=${device.name}
82                      color=${rainbow[idx % rainbow.length]}
83                      size="30px"
84                      style="opacity:0.5;"
85                      role="listitem"
86                      tabindex="0"
87                      aria-label="${device.name} in Device Legends"
88                    ></ns-cube-sprite
89                    >${device.name} ` :
90                    html`<ns-device-dragzone action="move">
91                      <ns-cube-sprite
92                        id=${device.name}
93                        color=${rainbow[idx % rainbow.length]}
94                        size="30px"
95                        role="listitem"
96                        tabindex="0"
97                        aria-label="${device.name} in Device Legends"
98                      ></ns-cube-sprite> </ns-device-dragzone
99                    >${device.name}`}
100            </center>
101          </li>
102        `)}
103      <li>
104        <center>
105          <ns-pyramid-sprite
106            id="1234"
107            color=${rainbow[this.deviceData.length % rainbow.length]}
108            size="30px"
109            style="opacity:0.5;"
110            role="listitem"
111            tabindex="0"
112            aria-label="beacon in Device Legends"
113          ></ns-pyramid-sprite
114          >beacon
115        </center>
116      </li>
117      <li>
118        <center>
119          <ns-pyramid-sprite
120            id="5678"
121            color=${rainbow[(this.deviceData.length + 1) % rainbow.length]}
122            size="30px"
123            style="opacity:0.5;"
124            role="listitem"
125            tabindex="0"
126            aria-label="anchor in Device Legends"
127          ></ns-pyramid-sprite
128          >anchor
129        </center>
130      </li>
131    `;
132  }
133}
134