(FRONT) FRONT (2023)

[Angular mosaic 4] Fill select/options (FormsModule, ngModel, ngModelChange, ngValue, http.get Json from Assets, LocalStorage), Angular connection service (Enable/Disable Heartbeat, Heartbeat URL, Heartbeat Interval/RetryInterval).

7. Fill select/options (FormsModule, ngModel, ngModelChange, ngValue, http.get Json from Assets, LocalStorage)

This code read JSON from Assets



Fill Select/Options HTML element



And set up selected value to LocalStorage.



   1:  import { Component } from '@angular/core';
   2:  import { ActivatedRoute, Router } from '@angular/router';
   3:  import { SharedService } from '../shared.service';
   4:  import { AuthService } from '../interceptor/auth.service';
   5:  import { HttpClient } from '@angular/common/http';
   6:  import { Registry$GetRegistryImageList$item } from '../../assets/api/registry/Registry_GetRegistryImageList.Interface'
   7:   
   8:  import * as $ from 'jquery'
   9:  declare var UIkit: any;
  10:   
  11:  @Component({
  12:    selector: 'app-create-container1',
  13:    templateUrl: './create-container1.component.html',
  14:    styleUrls: ['./create-container1.component.css']
  15:  })
  16:  export class CreateContainer1Component {
  17:   
  18:   
  19:    public registry$GetRegistryImageList$item!: Registry$GetRegistryImageList$item;
  20:    public registry$GetRegistryImageList: Registry$GetRegistryImageList$item[] = [];
  21:   
  22:    constructor(
  23:      private activatedRoute: ActivatedRoute,
  24:      private router: Router,
  25:      private sharedService: SharedService,
  26:      private authService: AuthService,
  27:      private http: HttpClient
  28:    ) {
  29:      console.log("CreateContainer1-constructor");
  30:   
  31:      this.http.get<Registry$GetRegistryImageList$item[]>('../assets/api/registry/Registry_GetRegistryImageList.Response.json', 
  32:      { responseType: 'json' }).subscribe(x=> {
  33:        console.log("/Registry/GetRegistryImageList");
  34:        console.log(x);
  35:        this.registry$GetRegistryImageList=x;
  36:        console.log(JSON.stringify(this.registry$GetRegistryImageList));
  37:      });
  38:   
  39:      if (!sharedService.isAuthenticated()) {
  40:        this.router.navigate(["/"]);
  41:      }
  42:    }
  43:   
  44:    changeImage(e:number){
  45:      localStorage.setItem("CreateContainer1", JSON.stringify(this.registry$GetRegistryImageList[e-1]));
  46:    };
  47:   
  48:    close() {
  49:      console.log("CreateContainer1-close");
  50:      this.router.navigate(["/"]);
  51:    }
  52:   
  53:    ToStep2(): void {
  54:      UIkit.modal("#createContainer2").show();
  55:    }
  56:   
  57:  }

   1:                  <div class="uk-form-row">
   2:                      <select class="uk-select"  style="width: 100%; cursor: pointer;" 
   3:                      (ngModelChange)="changeImage(registry$GetRegistryImageList$item.i)" 
   4:                      [(ngModel)]="registry$GetRegistryImageList$item">
   5:                          <option selected="true">-please select-</option>
   6:                          <option *ngFor="let registry$GetRegistryImageList$item of registry$GetRegistryImageList" 
   7:                              [ngValue]="registry$GetRegistryImageList$item.i">
   8:                              {{registry$GetRegistryImageList$item.name}}
   9:                              (registry {{registry$GetRegistryImageList$item.toDockerRegistry}}, 
  10:                              created {{registry$GetRegistryImageList$item.lastUpdate}})
  11:                          </option>
  12:                          <option>-require new-</option>
  13:                      </select>
  14:                   </div>

To use this future need to import FormsModule



8. Angular connection service (Enable/Disable Heartbeat, Heartbeat URL, Heartbeat Interval/RetryInterval)

I have add to my frontend important service to check access to backend. Another goal is to add to this service to check is user virtual machine still alive?



Idea of this service is periodically ping backend (or user virtual machine).



If backend or user VM is not available, warning is showing, in the screen below I simple change Backend URL to Google and warning disapear.



Realization is very simple, firstly need to add this service to list of module.



Than we need to create function IsOnline() and show warning depends of this function.





Comments ( )
<00>  <01>  <02>  <03>  <04>  <05>  <06>  <07>  <08>  <09>  <10>  <11>  <12>  <13>  <14>  <15>  <16>  <17>  <18>  <19>  <20>  <21>  <22>  <23
Link to this page: http://www.vb-net.com/AngularMosaic3/Index.htm
<SITEMAP>  <MVC>  <ASP>  <NET>  <DATA>  <KIOSK>  <FLEX>  <SQL>  <NOTES>  <LINUX>  <MONO>  <FREEWARE>  <DOCS>  <ENG>  <CHAT ME>  <ABOUT ME>  < THANKS ME>