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