import { Component, OnInit, Input } from '@angular/core';
import { Node } from '../../../nodes/node';

@Component({
  selector: 'app-node-config',
  template: `
    <span class="icon {{node?.type}}"></span>
    <div class="title">{{node?.name}}</div>
    <div class="status">
      <span class="progress-percentage">Battery: {{ (node?.batteryStatus | async) }}%</span>
      <app-progress-bar [progress]="node?.batteryStatus | async"></app-progress-bar>
      <app-progress-bar [progress]="node?.memoryUsage | async" [max]="node?.totalMemory | async"></app-progress-bar>
      <span class="progress-percentage">Memory usage: {{ (node?.memoryUsage | async)/(node?.totalMemory | async)*100 }}%</span>
    </div>
    <div class="menu">
      <app-node-config-item class="menu-item" *ngFor="let tab of node?.config" [config]="tab"></app-node-config-item>
    </div>
  `,
  styleUrls: ['./node-config.component.scss']
})
export class NodeConfigComponent implements OnInit {
  @Input() node: Node;

  constructor() { }

  ngOnInit() {
  }

}