1import {css, html, LitElement} from 'lit'; 2import {customElement, property} from 'lit/decorators.js'; 3 4@customElement('netsim-app') 5export class NetsimApp extends LitElement { 6 /** 7 * The view of the netsim app: main (map view), trace (packet trace view) 8 */ 9 @property() viewMode: string = 'main'; 10 11 /** 12 * The version of netsim. 13 */ 14 @property() version: string = ''; 15 16 static styles = css` 17 .container { 18 display: flex; 19 width: 100%; 20 } 21 22 .contentA { 23 flex: 2; 24 } 25 26 .contentB { 27 flex: 2; 28 } 29 30 #bottom { 31 position: relative; 32 bottom: 0; 33 left: 0; 34 font-size: 20px; 35 } 36 `; 37 38 constructor() { 39 super(); 40 this.invokeGetVersion(); 41 } 42 43 invokeGetVersion() { 44 fetch('./version', { 45 method: 'GET', 46 }) 47 .then(response => response.json()) 48 .then(data => { 49 this.version = data.version; 50 }) 51 .catch(error => { 52 // eslint-disable-next-line 53 console.log('Cannot connect to netsim web server', error); 54 }); 55 } 56 57 connectedCallback() { 58 super.connectedCallback(); 59 window.addEventListener('changeModeEvent', this.handleChangeModeEvent); 60 window.addEventListener('reset-button-clicked', this.handleReset); 61 window.addEventListener('bumble-button-clicked', this.handleBumbleHive); 62 } 63 64 disconnectedCallback() { 65 window.removeEventListener('bumble-button-clicked', this.handleBumbleHive); 66 window.removeEventListener('reset-button-clicked', this.handleReset); 67 window.removeEventListener('changeModeEvent', this.handleChangeModeEvent); 68 super.disconnectedCallback(); 69 } 70 71 handleChangeModeEvent = (e: Event) => { 72 const {detail} = (e as CustomEvent); 73 this.viewMode = detail.mode; 74 }; 75 76 handleReset() { 77 fetch('./v1/devices', { 78 method: 'PUT', 79 }).catch(error => { 80 console.log('Cannot connect to netsim web server:', error); 81 }) 82 }; 83 84 handleBumbleHive() { 85 window.open('https://google.github.io/bumble/hive/index.html', '_blank'); 86 } 87 88 render() { 89 let page = html``; 90 if (this.viewMode === 'main') { 91 page = html` 92 <ns-customize-button eventName="map-button-clicked" class="primary" aria-label="Change background of the device map">Change Background</ns-customize-button> 93 <ns-customize-button eventName="isometric-button-clicked" class="primary" aria-label="Toggle view of the device map">Toggle View</ns-customize-button> 94 <ns-customize-button eventName="reset-button-clicked" class="primary" aria-label="Reset device information">Reset</ns-customize-button> 95 <ns-customize-button eventName="bumble-button-clicked" class="primary" aria-label="Bumble Hive Webpage">Bumble Hive</ns-customize-button> 96 <div class="container"> 97 <div class="contentA"> 98 <ns-device-map></ns-device-map> 99 <ns-device-list></ns-device-list> 100 </div> 101 <div class="contentB"> 102 <ns-device-info></ns-device-info> 103 </div> 104 </div> 105 `; 106 } else if (this.viewMode === 'trace') { 107 page = html` 108 <ns-packet-info></ns-packet-info> 109 `; 110 } else if (this.viewMode === 'oslib') { 111 page = html` 112 <ns-license-info></ns-license-info> 113 `; 114 } 115 return html` 116 <div id="bottom">version: ${this.version}</div> 117 <ns-navigation-bar></ns-navigation-bar> 118 ${page} 119 `; 120 } 121} 122