1import{__decorate as e}from"../node_modules/tslib/tslib.es6.js";import{html as i,css as t,LitElement as s}from"https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";import{property as o,customElement as a}from"https://cdn.skypack.dev/pin/lit@v2.5.0-jYRq0AKQogjUdUh7SCAE/mode=imports/optimized/lit/decorators.js";import{styleMap as d,live as l}from"https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js";import{simulationState as n}from"./device-observer.js";var c,r;!function(e){e.UNSPECIFIED="UNSPECIFIED",e.BLUETOOTH="BLUETOOTH",e.WIFI="WIFI",e.UWB="UWB",e.BLUETOOTH_BEACON="BLUETOOTH_BEACON",e.UNRECOGNIZED="UNRECOGNIZED"}(r||(r={})),i` 2 <input type="checkbox" disabled /> 3 <span 4 class="slider round" 5 style=${d({opacity:"0.7"})} 6 ></span> 7`;let v=c=class extends s{constructor(){super(...arguments),this.yaw=0,this.pitch=0,this.roll=0,this.editMode=!1,this.posX=0,this.posY=0,this.posZ=0,this.holdRange=!1,this.getRadioCheckbox=(e,t)=>i`<label class="switch"> 8 <input 9 id=${t} 10 type="checkbox" 11 .checked=${l(e.state)} 12 @click=${()=>{var i;null===(i=this.selectedDevice)||void 0===i||i.toggleChipState(e),this.patchRadio()}} 13 /> 14 <span class="slider round"></span> 15 </label> `}connectedCallback(){super.connectedCallback(),n.registerObserver(this)}disconnectedCallback(){n.removeObserver(this),super.disconnectedCallback()}onNotify(e){if(e.selectedId&&!1===this.editMode)for(const i of e.devices)if(i.name===e.selectedId){this.selectedDevice=i,this.holdRange||(this.yaw=i.orientation.yaw,this.pitch=i.orientation.pitch,this.roll=i.orientation.roll),this.posX=Math.floor(100*i.position.x),this.posY=Math.floor(100*i.position.y),this.posZ=Math.floor(100*i.position.z);break}}changeRange(e){var i;this.holdRange=!0,console.assert(null!==this.selectedDevice);const t=e.target,s=new CustomEvent("orientationEvent",{detail:{name:null===(i=this.selectedDevice)||void 0===i?void 0:i.name,type:t.id,value:t.value}});window.dispatchEvent(s),"yaw"===t.id?this.yaw=Number(t.value):"pitch"===t.id?this.pitch=Number(t.value):this.roll=Number(t.value)}patchOrientation(){this.holdRange=!1,console.assert(void 0!==this.selectedDevice),void 0!==this.selectedDevice&&(this.selectedDevice.orientation={yaw:this.yaw,pitch:this.pitch,roll:this.roll},n.patchDevice({device:{name:this.selectedDevice.name,orientation:this.selectedDevice.orientation}}))}patchRadio(){console.assert(void 0!==this.selectedDevice),void 0!==this.selectedDevice&&n.patchDevice({device:{name:this.selectedDevice.name,chips:this.selectedDevice.chips}})}handleEditForm(){this.editMode?(n.invokeGetDevice(),this.editMode=!1):this.editMode=!0}static checkPositionBound(e){return e>10?10:e<0?0:e}static checkOrientationBound(e){return e>90?90:e<-90?-90:e}handleSave(){if(console.assert(void 0!==this.selectedDevice),void 0===this.selectedDevice)return;const e=this.renderRoot.querySelectorAll('[id^="edit"]'),i={name:this.selectedDevice.name,position:this.selectedDevice.position,orientation:this.selectedDevice.orientation};e.forEach((e=>{const t=e;"editName"===t.id?i.name=t.value:t.id.startsWith("editPos")?Number.isNaN(Number(t.value))||(i.position[t.id.slice(7).toLowerCase()]=c.checkPositionBound(Number(t.value)/100)):t.id.startsWith("editOri")&&(Number.isNaN(Number(t.value))||(i.orientation[t.id.slice(7).toLowerCase()]=c.checkOrientationBound(Number(t.value))))})),this.selectedDevice.name=i.name,this.selectedDevice.position=i.position,this.selectedDevice.orientation=i.orientation,this.handleEditForm(),n.patchDevice({device:i})}handleGetBleBeacon(e){return i`${e.settings?i`<div class="setting"> 16 <div class="name">Settings</div> 17 18 ${e.settings.advertiseMode?i`<div class="label">Advertise Mode:</div> 19 <div class="info"> 20 ${null===(t=e.settings.advertiseMode)||void 0===t?void 0:t.replace("-"," ")} 21 </div>`:i`<div class="label">Advertise Interval:</div> 22 <div class="info"> 23 ${null===(s=e.settings.milliseconds)||void 0===s?void 0:s.toString().concat(" ms")} 24 </div>`} 25 ${e.settings.txPowerLevel?i`<div class="label">Transmit Power Level:</div> 26 <div class="info"> 27 ${null===(o=e.settings.txPowerLevel)||void 0===o?void 0:o.replace("-"," ")} 28 </div>`:i`<div class="label">Transmit Power:</div> 29 <div class="info"> 30 ${null===(a=e.settings.dbm)||void 0===a?void 0:a.toString().concat(" dBm")} 31 </div>`} 32 33 <div class="label">Scannable:</div> 34 <div class="info">${e.settings.scannable}</div> 35 36 <div class="label">Timeout:</div> 37 <div class="info"> 38 ${null===(d=e.settings.timeout)||void 0===d?void 0:d.toString().concat(" ms")} 39 </div> 40 </div>`:i``} ${e.advData?i`<div class="setting"> 41 <div class="name">Advertise Data</div> 42 43 <div class="label">Include Device Name:</div> 44 <div class="info">${e.advData.includeDeviceName}</div> 45 46 <div class="label">Include Transmit Power:</div> 47 <div class="info">${e.advData.includeTxPowerLevel}</div> 48 49 ${e.advData.manufacturerData.length?i` <div class="label">Manufacturer Data Length:</div> 50 <div class="info"> 51 ${e.advData.manufacturerData.length} 52 </div>`:i``} 53 ${e.advData.services.length?i` <div class="label">Number of Supported Services:</div> 54 <div class="info">${e.advData.services.length}</div>`:i``} 55 </div>`:i``}`;var t,s,o,a,d}getBluetoothRadioCheckboxes(e){let i,t;return"lowEnergy"in e&&e.lowEnergy&&(i=this.getRadioCheckbox(e.lowEnergy,"lowEnergy")),"classic"in e&&e.classic&&(t=this.getRadioCheckbox(e.classic,"classic")),[i,t]}handleGetChip(e,t){if(e.bleBeacon){let s={};return e.bleBeacon.bt&&([s["Bluetooth LE"],s["Bluetooth Classic"]]=this.getBluetoothRadioCheckboxes(e.bleBeacon.bt)),i`<div class="title"> 56 Chip ${t+1}: ${e.kind.replace("_"," ")} 57 </div> 58 <div class="setting"> 59 <div class="name">Name</div> 60 <div class="info">${e.name}</div> 61 </div> 62 <div class="setting"> 63 ${Object.entries(s).length?i`<div class="name">Radios</div>`:i``} 64 ${Object.entries(s).map((([e,t])=>i`<div class="label">${e}</div> 65 <div class="info">${t}</div>`))} 66 </div> 67 ${this.handleGetBleBeacon(e.bleBeacon)}`}return""}handleGetChips(){if(!this.selectedDevice||!this.selectedDevice.chips)return i``;if(this.selectedDevice.chips.some((e=>(e=>e.kind===r.BLUETOOTH_BEACON&&e.bleBeacon)(e))))return i`${this.selectedDevice.chips.map(((e,i)=>this.handleGetChip(e,i)))}`;let e={};for(const i of this.selectedDevice.chips)i&&(i.bt&&([e["Bluetooth LE"],e["Bluetooth Classic"]]=this.getBluetoothRadioCheckboxes(i.bt)),i.wifi&&(e.WIFI=this.getRadioCheckbox(i.wifi,"wifi")),i.uwb&&(e.UWB=this.getRadioCheckbox(i.uwb,"uwb")));return Object.keys(e).length?i`<div class="setting"> 68 <div class="name">Radios</div> 69 ${Object.entries(e).map((([e,t])=>i`<div class="label">${e}</div> 70 <div class="info">${t}</div>`))} 71 </div>`:i``}render(){return i`${this.selectedDevice?i` 72 <div class="title">Device Info</div> 73 <div class="setting"> 74 <div class="name">Name</div> 75 <div class="info">${this.selectedDevice.name}</div> 76 </div> 77 <div class="setting"> 78 <div class="name">Position</div> 79 <div class="label">X</div> 80 <div 81 class="info" 82 style=${d({color:"red"})} 83 > 84 ${this.editMode?i`<input 85 type="text" 86 id="editPosX" 87 .value=${this.posX.toString()} 88 />`:i`${this.posX}`} 89 </div> 90 <div class="label">Y</div> 91 <div 92 class="info" 93 style=${d({color:"green"})} 94 > 95 ${this.editMode?i`<input 96 type="text" 97 id="editPosY" 98 .value=${this.posY.toString()} 99 />`:i`${this.posY}`} 100 </div> 101 <div class="label">Z</div> 102 <div 103 class="info" 104 style=${d({color:"blue"})} 105 > 106 ${this.editMode?i`<input 107 type="text" 108 id="editPosZ" 109 .value=${this.posZ.toString()} 110 />`:i`${this.posZ}`} 111 </div> 112 </div> 113 <div class="setting"> 114 <div class="name">Orientation</div> 115 <div class="label">Yaw</div> 116 <div class="info"> 117 <input 118 id="yaw" 119 type="range" 120 min="-90" 121 max="90" 122 .value=${this.yaw.toString()} 123 .disabled=${this.editMode} 124 @input=${this.changeRange} 125 @change=${this.patchOrientation} 126 /> 127 ${this.editMode?i`<input 128 type="text" 129 id="editOriYaw" 130 class="orientation" 131 .value=${this.yaw.toString()} 132 />`:i`<div class="text">(${this.yaw})</div>`} 133 </div> 134 <div class="label">Pitch</div> 135 <div class="info"> 136 <input 137 id="pitch" 138 type="range" 139 min="-90" 140 max="90" 141 .value=${this.pitch.toString()} 142 .disabled=${this.editMode} 143 @input=${this.changeRange} 144 @change=${this.patchOrientation} 145 /> 146 ${this.editMode?i`<input 147 type="text" 148 id="editOriPitch" 149 class="orientation" 150 .value=${this.pitch.toString()} 151 />`:i`<div class="text">(${this.pitch})</div>`} 152 </div> 153 <div class="label">Roll</div> 154 <div class="info"> 155 <input 156 id="roll" 157 type="range" 158 min="-90" 159 max="90" 160 .value=${this.roll.toString()} 161 .disabled=${this.editMode} 162 @input=${this.changeRange} 163 @change=${this.patchOrientation} 164 /> 165 ${this.editMode?i`<input 166 type="text" 167 id="editOriRoll" 168 class="orientation" 169 .value=${this.roll.toString()} 170 />`:i`<div class="text">(${this.roll})</div>`} 171 </div> 172 </div> 173 <div class="setting"> 174 ${this.editMode?i` 175 <input type="button" value="Save" @click=${this.handleSave} /> 176 <input 177 type="button" 178 value="Cancel" 179 @click=${this.handleEditForm} 180 /> 181 `:i`<input 182 type="button" 183 value="Edit" 184 @click=${this.handleEditForm} 185 />`} 186 </div> 187 188 ${this.handleGetChips()} 189 `:i`<div class="title">Device Info</div>`}`}};v.styles=t` 190 :host { 191 cursor: pointer; 192 display: grid; 193 place-content: center; 194 color: white; 195 font-size: 25px; 196 font-family: 'Lato', sans-serif; 197 border: 5px solid black; 198 border-radius: 12px; 199 padding: 10px; 200 background-color: #9199a5; 201 max-width: 600px; 202 } 203 204 .title { 205 font-weight: bold; 206 text-transform: uppercase; 207 text-align: center; 208 margin-bottom: 10px; 209 } 210 211 .setting { 212 display: grid; 213 grid-template-columns: auto auto; 214 margin-top: 0px; 215 margin-bottom: 30px; 216 //border: 3px solid black; 217 padding: 10px; 218 } 219 220 .setting .name { 221 grid-column: 1 / span 2; 222 text-transform: uppercase; 223 text-align: left; 224 margin-bottom: 10px; 225 font-weight: bold; 226 } 227 228 .label { 229 grid-column: 1; 230 text-align: left; 231 } 232 233 .info { 234 grid-column: 2; 235 text-align: right; 236 margin-bottom: 10px; 237 } 238 239 .switch { 240 position: relative; 241 float: right; 242 width: 60px; 243 height: 34px; 244 } 245 246 .switch input { 247 opacity: 0; 248 width: 0; 249 height: 0; 250 } 251 252 .slider { 253 position: absolute; 254 cursor: pointer; 255 top: 0; 256 left: 0; 257 right: 0; 258 bottom: 0; 259 background-color: #ccc; 260 -webkit-transition: 0.4s; 261 transition: 0.4s; 262 } 263 264 .slider:before { 265 position: absolute; 266 content: ''; 267 height: 26px; 268 width: 26px; 269 left: 4px; 270 bottom: 4px; 271 background-color: white; 272 -webkit-transition: 0.4s; 273 transition: 0.4s; 274 } 275 276 input:checked + .slider { 277 background-color: #2196f3; 278 } 279 280 input:focus + .slider { 281 box-shadow: 0 0 1px #2196f3; 282 } 283 284 input:checked + .slider:before { 285 -webkit-transform: translateX(26px); 286 -ms-transform: translateX(26px); 287 transform: translateX(26px); 288 } 289 290 /* Rounded sliders */ 291 .slider.round { 292 border-radius: 34px; 293 } 294 295 .slider.round:before { 296 border-radius: 50%; 297 } 298 299 .text { 300 display: inline-block; 301 position: relative; 302 width: 50px; 303 } 304 305 input[type='range'] { 306 width: 400px; 307 } 308 309 input[type='text'] { 310 width: 50%; 311 font-size: inherit; 312 text-align: right; 313 max-height: 25px; 314 } 315 316 input[type='text'].orientation { 317 max-width: 50px; 318 } 319 320 input[type='button'] { 321 display: inline; 322 font-size: inherit; 323 max-width: 200px; 324 } 325 `,e([o()],v.prototype,"selectedDevice",void 0),e([o({type:Number})],v.prototype,"yaw",void 0),e([o({type:Number})],v.prototype,"pitch",void 0),e([o({type:Number})],v.prototype,"roll",void 0),e([o({type:Boolean})],v.prototype,"editMode",void 0),e([o({type:Number})],v.prototype,"posX",void 0),e([o({type:Number})],v.prototype,"posY",void 0),e([o({type:Number})],v.prototype,"posZ",void 0),v=c=e([a("ns-device-info")],v);export{v as DeviceInformation}; 326