1import{__decorate as t}from"../node_modules/tslib/tslib.es6.js";import{css as e,LitElement as i,html as o}from"https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";import{property as a,customElement as n}from"https://cdn.skypack.dev/pin/lit@v2.5.0-jYRq0AKQogjUdUh7SCAE/mode=imports/optimized/lit/decorators.js";import{simulationState as r}from"./device-observer.js";let d=class extends i{constructor(){super(...arguments),this.captureData=[],this.deviceData=[]}connectedCallback(){super.connectedCallback(),r.registerObserver(this)}disconnectedCallback(){r.removeObserver(this),super.disconnectedCallback()}onNotify(t){this.captureData=t.captures,this.deviceData=t.devices,this.requestUpdate()}toggleCapture(t){let e=t.id.toString(),i=t.state?"0":"1";r.patchCapture(e,i)}handleGetChips(t){var e,i,a,n,r,d,s,l;let c=o``,p=o``,b=o``;if("chips"in t&&t.chips)for(const h of t.chips){if("bt"in h&&h.bt){let t=o``,r=o``;"lowEnergy"in h.bt&&h.bt.lowEnergy&&(t=o`
2              <tr>
3                <td>BLE</td>
4                <td>${null!==(e=h.bt.lowEnergy.rxCount)&&void 0!==e?e:0}</td>
5                <td>${null!==(i=h.bt.lowEnergy.txCount)&&void 0!==i?i:0}</td>
6              </tr>
7            `),"classic"in h.bt&&h.bt.classic&&(r=o`
8              <tr>
9                <td>Bluetooth Classic</td>
10                <td>${null!==(a=h.bt.classic.rxCount)&&void 0!==a?a:0}</td>
11                <td>${null!==(n=h.bt.classic.txCount)&&void 0!==n?n:0}</td>
12              </tr>
13            `),c=o`${t} ${r}`}"uwb"in h&&h.uwb&&(p=o`
14            <tr>
15              <td>UWB</td>
16              <td>${null!==(r=h.uwb.rxCount)&&void 0!==r?r:0}</td>
17              <td>${null!==(d=h.uwb.txCount)&&void 0!==d?d:0}</td>
18            </tr>
19          `),"wifi"in h&&h.wifi&&(b=o`
20            <tr>
21              <td>WIFI</td>
22              <td>${null!==(s=h.wifi.rxCount)&&void 0!==s?s:0}</td>
23              <td>${null!==(l=h.wifi.txCount)&&void 0!==l?l:0}</td>
24            </tr>
25          `)}return o`
26      ${c}
27      ${p}
28      ${b}
29    `}handleListCaptures(t){return o`
30      <tr>
31        <td>${t.deviceName}</td>
32        <td>${t.chipKind}</td>
33        <td>${t.size}</td>
34        <td>${t.records}</td>
35        <td>
36        <input
37                type="checkbox"
38                class="switch_1"
39                .checked=${t.state}
40                @click=${()=>{this.toggleCapture(t)}}
41              />
42        </td>
43        <td>
44          <a
45            href="./v1/captures/${t.id}"
46            target="_blank"
47            type="application/vnd.tcpdump.pcap"
48            ><button>Download</button></a
49          >
50        </td>
51      </tr>
52    `}render(){return o`
53      <div class="panel">
54        <div class="title">Packet Info</div>
55        ${this.deviceData.map((t=>o`
56              <div class="label">${t.name}</div>
57              <table class="styled-table">
58                <tr>
59                  <th>Radio</th>
60                  <th>RX Count</th>
61                  <th>TX Count</th>
62                </tr>
63                ${this.handleGetChips(t)}
64              </table>
65            `))}
66      </div>
67      <div class="panel">
68        <div class="title">Packet Capture</div>
69        <table class="styled-table">
70          <tr>
71            <th>Device Name</th>
72            <th>Chip Kind</th>
73            <th>Bytes</th>
74            <th>Records</th>
75            <th>Capture State</th>
76            <th>Download Pcap</th>
77          </tr>
78          ${this.captureData.map((t=>this.handleListCaptures(t)))}
79        </table>
80      </div>
81    `}};d.styles=e`
82    :host {
83      display: flex;
84      justify-content: center;
85      align-items: flex-start;
86      height: 100vh;
87    }
88
89    .panel {
90      cursor: pointer;
91      display: grid;
92      place-content: center;
93      color: black;
94      font-size: 25px;
95      font-family: 'Lato', sans-serif;
96      border: 5px solid black;
97      border-radius: 12px;
98      margin: 10px;
99      padding: 10px;
100      background-color: #ffffff;
101      max-width: max-content;
102      float: left;
103    }
104
105    .title {
106      font-weight: bold;
107      text-transform: uppercase;
108      text-align: center;
109      margin-bottom: 10px;
110    }
111
112    .label {
113      text-align: left;
114    }
115
116    .styled-table {
117      border-collapse: collapse;
118      margin: 25px 0;
119      font-size: 20px;
120      font-family: sans-serif;
121      width: 100%;
122      box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
123    }
124
125    .styled-table thead tr {
126      background-color: #009879;
127      color: #ffffff;
128      text-align: left;
129    }
130
131    .styled-table th,
132    .styled-table td {
133      padding: 12px 15px;
134      text-align: left;
135    }
136
137    .styled-table tbody tr {
138      border-bottom: 1px solid #dddddd;
139    }
140
141    .styled-table tbody tr:nth-of-type(even) {
142      background-color: #cac0c0;
143    }
144
145    input[type='button'] {
146      height: 2rem;
147      font-size: inherit;
148    }
149
150    input[type='checkbox'].switch_1 {
151      font-size: 30px;
152      -webkit-appearance: none;
153      -moz-appearance: none;
154      appearance: none;
155      width: 3.5em;
156      height: 1.5em;
157      background: #ddd;
158      border-radius: 3em;
159      position: relative;
160      cursor: pointer;
161      outline: none;
162      -webkit-transition: all 0.2s ease-in-out;
163      transition: all 0.2s ease-in-out;
164    }
165
166    input[type='checkbox'].switch_1:checked {
167      background: #0ebeff;
168    }
169
170    input[type='checkbox'].switch_1:after {
171      position: absolute;
172      content: '';
173      width: 1.5em;
174      height: 1.5em;
175      border-radius: 50%;
176      background: #fff;
177      -webkit-box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
178      box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
179      -webkit-transform: scale(0.7);
180      transform: scale(0.7);
181      left: 0;
182      -webkit-transition: all 0.2s ease-in-out;
183      transition: all 0.2s ease-in-out;
184    }
185
186    input[type='checkbox'].switch_1:checked:after {
187      left: calc(100% - 1.5em);
188    }
189
190    button {
191      display: inline-block;
192      padding: 12px 24px;
193      background-color: #4CAF50;
194      color: #FFFFFF;
195      font-size: 18px;
196      font-weight: bold;
197      text-align: center;
198      text-decoration: none;
199      border: none;
200      cursor: pointer;
201      transition: background-color 0.3s ease;
202    }
203
204    button:hover {
205      background-color: #45a049;
206      transition: 0.5s;
207    }
208  `,t([a()],d.prototype,"captureData",void 0),t([a()],d.prototype,"deviceData",void 0),d=t([n("ns-packet-info")],d);export{d as PacketInformation};
209