• Home
  • History
  • Annotate
  • 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    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