advancing

src/app/app.module.ts

@@ -5,7 +5,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbModule, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { NavbarComponent } from './navbar/navbar.component';
 import { TranslateDirective } from './translate.directive';
 
@@ -14,6 +14,9 @@ import { UdsApiService } from './uds-api.service';
 import { LoginComponent } from './login/login.component';
 import { ClientDownloadComponent } from './client-download/client-download.component';
 import { ServicesComponent } from './services/services.component';
+import { ModalComponent } from './gui/modal/modal.component';
+import { SafeHtmlPipe } from './gui/safe-html.pipe';
+import { GuiService } from './gui/gui.service';
 
 @NgModule({
   declarations: [
@@ -23,6 +26,8 @@ import { ServicesComponent } from './services/services.component';
     LoginComponent,
     ClientDownloadComponent,
     ServicesComponent,
+    ModalComponent,
+    SafeHtmlPipe,
   ],
   imports: [
     BrowserModule,
@@ -30,7 +35,14 @@ import { ServicesComponent } from './services/services.component';
     AppRoutingModule,
     NgbModule.forRoot()
   ],
-  providers: [UdsApiService],
-  bootstrap: [AppComponent]
+  providers: [
+    UdsApiService,
+    GuiService,
+    NgbActiveModal
+  ],
+  bootstrap: [AppComponent],
+  entryComponents: [
+    ModalComponent
+  ]
 })
 export class AppModule { }

src/app/gui/gui.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+import { ModalComponent } from './modal/modal.component';
+
+@Injectable()
+export class GuiService {
+
+  constructor(private modalService: NgbModal) { }
+
+  alert(title: string, message: string ) {
+    const mod = this.modalService.open(ModalComponent, { centered: true });
+    mod.componentInstance.title = title;
+    mod.componentInstance.body = message;
+  }
+}

src/app/gui/modal/modal.component.html

@@ -0,0 +1,11 @@
+<div class="modal-header">
+  <h4 class="modal-title" [innerHtml]="title | safeHtml"></h4>
+  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body" [innerHTML]="body | safeHtml">
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
+</div>

src/app/gui/modal/modal.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'uds-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.css']
+})
+
+export class ModalComponent implements OnInit {
+
+  @Input() title = 'Information';
+  @Input() body = 'UDS Modal';
+
+  constructor(public activeModal: NgbActiveModal) {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/gui/safe-html.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'safeHtml'
+})
+export class SafeHtmlPipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(value: any, args?: any): any {
+    return this.sanitizer.bypassSecurityTrustHtml(value);
+  }
+
+}

src/app/helpers/plugin.ts

@@ -14,7 +14,7 @@ enum BrowserType {
 export class Plugin {
     static transportsWindow: Window = null;
 
-    constructor(private api: UdsApiService, private router: Router) {
+    constructor(private api: UdsApiService) {
     }
 
     private launchChrome(url: string) {
@@ -49,7 +49,7 @@ export class Plugin {
         window.setTimeout(() => {
             window.onblur = null;
             if (launched === false && this.api.config.bypassPluginDetection === false) {
-                this.router.navigate(['client-download']);
+                this.api.router.navigate(['client-download']);
             }
         }, 2800);
     }

src/app/services/services.component.ts

@@ -4,6 +4,7 @@ import { Router } from '@angular/router';
 import { JSONServicesInformation } from '../types/services';
 import { Plugin } from '../helpers/plugin';
 
+
 @Component({
   selector: 'uds-services',
   templateUrl: './services.component.html',
@@ -13,14 +14,14 @@ export class ServicesComponent implements OnInit {
   servicesInformation: JSONServicesInformation;
   plugin: Plugin;
 
-  constructor(private api: UdsApiService, private router: Router) {
-    this.plugin = new Plugin(api, router);
+  constructor(private api: UdsApiService) {
+    this.plugin = new Plugin(api);
   }
 
   ngOnInit() {
     // Redirect, if not logged in, to login screen
     if (!this.api.user.isLogged) {
-      this.router.navigate(['login']);
+      this.api.router.navigate(['login']);
     }
     this.api.getServicesInformation().subscribe((result: JSONServicesInformation) => {
       this.servicesInformation = result;
@@ -36,7 +37,8 @@ export class ServicesComponent implements OnInit {
           alert(django.gettext('Service is in maintenance and cannot be executed'));
         }
       }
-      this.plugin.launchURL(this.servicesInformation.services[0].transports[0].link);
+      this.api.gui.alert('Alerta', '<span style="color:red">modal</span>');
+      // this.plugin.launchURL(this.servicesInformation.services[0].transports[0].link);
     });
   }
 

src/app/types/config.ts

@@ -43,7 +43,7 @@ export interface Downloadable {
     readonly name: string;
 }
 
-export interface Profile {
+export interface UserProfile {
     readonly user: string;
     readonly role: string;
 }
@@ -53,7 +53,7 @@ export class User {
     readonly user: string;
     readonly role: string;
 
-    constructor(profile: Profile) {
+    constructor(profile: UserProfile) {
         this.user = profile.user;
         this.role = profile.role;
     }

src/app/uds-api.service.ts

@@ -4,14 +4,14 @@ import { Router } from '@angular/router';
 import { User, UDSConfig, Downloadable } from './types/config';
 import { Observable } from 'rxjs';
 import { JSONServicesInformation, JSONEnabledService } from './types/services';
-import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { GuiService } from './gui/gui.service';
 
 @Injectable()
 export class UdsApiService {
   readonly user: User;
   transportsWindow: Window;
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, public gui: GuiService, public router: Router) {
     this.user = new User(udsData.profile);
     this.transportsWindow = null;
   }