• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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  }
61
62  disconnectedCallback() {
63    window.removeEventListener('changeModeEvent', this.handleChangeModeEvent);
64    super.disconnectedCallback();
65  }
66
67  handleChangeModeEvent = (e: Event) => {
68    const {detail} = (e as CustomEvent);
69    this.viewMode = detail.mode;
70  };
71
72  render() {
73    let page = html``;
74    if (this.viewMode === 'main') {
75      page = html`
76        <ns-customize-button eventName="map-button-clicked" class="primary" aria-label="Change background of the device map">Change Background</ns-customize-button>
77        <ns-customize-button eventName="isometric-button-clicked" class="primary" aria-label="Toggle view of the device map">Toggle View</ns-customize-button>
78        <div class="container">
79          <div class="contentA">
80            <ns-device-map></ns-device-map>
81            <ns-device-list></ns-device-list>
82          </div>
83          <div class="contentB">
84            <ns-device-info></ns-device-info>
85          </div>
86        </div>
87      `;
88    } else if (this.viewMode === 'trace') {
89      page = html`
90        <ns-packet-info></ns-packet-info>
91      `;
92    } else if (this.viewMode === 'oslib') {
93      page = html`
94        <ns-license-info></ns-license-info>
95      `;
96    }
97    return html`
98      <div id="bottom">version: ${this.version}</div>
99      <ns-navigation-bar></ns-navigation-bar>
100      ${page}
101    `;
102  }
103}
104