fastapi_dvrip/frontend/ang_dvrip/src/app/app.component.ts

import {Component, OnInit} from '@angular/core';
import {ApiService} from "./services/ApiService";
import {HttpClient} from "@angular/common/http";
import {ActivatedRoute, Router} from "@angular/router";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  availble_recorders:string[] = [];
  selected_recorder:number = 0;
  availble_channels:string[] = [];
  selected_channel:number = 0;
  loading:boolean = true

  ngOnInit(): void {
    this.getRecorders();
  }

  constructor(private api:ApiService,
              private http: HttpClient,
              private router:Router) {
  }

  getRecorders() {
    this.loading = true;
    this.http.get("/api", {}).subscribe((a:any) => {
      this.availble_recorders = a["data"];
      if (this.availble_recorders.length > 0) {
        this.getChannels(0);
      } else {
        this.loading = false;
      }
    })
  }

  getChannels(recorder:number) {
    this.loading = true;
    this.http.get(`/api/channels/${recorder}`).subscribe((a:any) => {
      this.availble_channels = a["data"];
      this.loading = false;
    })
  }

  goToRoot() {
    this.router.navigate(["/"])
  }
}