MeshCenter/ui/src/app/components/nodes/DirectNodes.component.ts

import {Component, OnInit} from "@angular/core";
import {HttpClient} from "@angular/common/http";
import {NodeDTO} from "../../entities/NodeDTO";

@Component({
  selector: 'app-direct-nodes',
  styleUrls: ['nodes.styles.scss'],
  template: `
    <!--<p *ngFor="let node of nodes">{{node.long_name}}</p>-->
    <div style="width: 80%; padding: 0 10%; padding-top: 8px">
      <div class="card-wrapper">
        <mat-card *ngFor="let node of nodes">
          <mat-card-header>
            <mat-card-title>{{node.long_name}}</mat-card-title>
            <mat-card-subtitle>{{node.short_name}} ({{node.num}})</mat-card-subtitle>
          </mat-card-header>
          <mat-card-content>
            <p>график</p>
          </mat-card-content>
          <mat-card-actions>
            <button mat-button *ngIf="node.hops_away > 0">Прыжков: {{node.hops_away}}</button>
            <button mat-button>SNR: {{node.snr}}</button>
            <button mat-button>{{node.ts * 1000 | date:"hh:mm dd.MM.yyyy"}}</button>
          </mat-card-actions>
        </mat-card>
      </div>
    </div>
  `
})
export class DirectNodesComponent implements OnInit {
  constructor(private http: HttpClient) {
  }

  nodes: NodeDTO[] = [];

  ngOnInit(): void {
    this.http.get(`api/nodes/direct`).subscribe(
      (res) => this.nodes = res as NodeDTO[]
    )
  }
}