Advancing on bootstrap removal

src/app/app.module.ts

@@ -27,8 +27,8 @@ import { ServicesGroupComponent } from './gui/components/services-group/services
 // Pages
 
 // Service providers
-import { UdsApiService } from './uds-api.service';
+import { UDSApiService } from './uds-api.service';
-import { GuiService } from './gui/gui.service';
+import { UDSGuiService } from './gui/uds-gui.service';
 
 @NgModule({
   declarations: [
@@ -53,8 +53,8 @@ import { GuiService } from './gui/gui.service';
     FlexLayoutModule,
   ],
   providers: [
-    UdsApiService,
+    UDSApiService,
-    GuiService,
+    UDSGuiService,
     NgbActiveModal
   ],
   bootstrap: [AppComponent],

src/app/gui/components/service/service.component.html

@@ -1,4 +1,4 @@
-<div class="service">
+<div class="service" (click)="launch()">
   <div class="icon">
     <img [src]="serviceImage">
   </div>

src/app/gui/components/service/service.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { JSONService } from '../../../types/services';
-import { UdsApiService } from '../../../uds-api.service';
+import { UDSApiService } from '../../../uds-api.service';
 
 const MAX_NAME_LENGTH = 32;
 
@@ -11,7 +11,7 @@ const MAX_NAME_LENGTH = 32;
 })
 export class ServiceComponent implements OnInit {
 
-  constructor(private api: UdsApiService) { }
+  constructor(private api: UDSApiService) { }
 
   @Input() service: JSONService;
 
@@ -33,4 +33,8 @@ export class ServiceComponent implements OnInit {
   get serviceTooltip() {
     return this.service.name;
   }
+
+  launch() {
+    this.api.launchURL(this.service.transports[0].link);
+  }
 }

src/app/gui/components/services-group/services-group.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { JSONGroup, JSONService } from '../../../types/services';
-import { UdsApiService } from '../../../uds-api.service';
+import { UDSApiService } from '../../../uds-api.service';
 
 @Component({
   selector: 'uds-services-group',
@@ -13,7 +13,7 @@ export class ServicesGroupComponent implements OnInit {
   @Input() group: JSONGroup;
   @Input() expanded = false;
 
-  constructor(private api: UdsApiService) { }
+  constructor(private api: UDSApiService) { }
 
   ngOnInit() {
   }

src/app/gui/gui.service.ts

@@ -1,22 +0,0 @@
-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, autoclose = 0 ) {
-    const mod = this.modalService.open(ModalComponent, { centered: true });
-    mod.componentInstance.title = title;
-    mod.componentInstance.body = message;
-
-    if (autoclose > 0) {
-      window.setTimeout(() => {
-        mod.close();
-      }, autoclose);
-    }
-  }
-}

src/app/gui/modal/modal.component.css

@@ -0,0 +1,4 @@
+.uds-modal-footer {
+    display: flex;
+    justify-content: left;
+}

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

@@ -1,11 +1,5 @@
-<div class="modal-header">
+<h4 mat-dialog-title [innerHtml]="data.title | safeHtml"></h4>
-  <h4 class="modal-title" [innerHtml]="title | safeHtml"></h4>
+<mat-dialog-content [innerHTML]="data.body | safeHtml"></mat-dialog-content>
-  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
+<mat-dialog-actions>
-    <span aria-hidden="true">&times;</span>
+  <button mat-raised-button mat-dialog-close (click)="close()"><uds-translate>Close</uds-translate>{{ extra }}</button>
-  </button>
+</mat-dialog-actions>
-</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')"><uds-translate>Close</uds-translate></button>
-</div>

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

@@ -1,5 +1,12 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Inject } from '@angular/core';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { interval, Observable, Subscription } from 'rxjs';
+
+export interface ModalData {
+  title: string;
+  body: string;
+  autoclose: number;
+}
 
 @Component({
   selector: 'uds-modal',
@@ -8,14 +15,53 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 })
 
 export class ModalComponent implements OnInit {
+  extra: string;
+  subscription: Subscription;
 
-  @Input() title = 'Information';
+  constructor(public dialogRef: MatDialogRef<ModalComponent>, @Inject(MAT_DIALOG_DATA) public data: ModalData) {
-  @Input() body = '';
+    this.subscription = null;
+  }
 
-  constructor(public activeModal: NgbActiveModal) {
+
+  /**
+   * Invoked on closed modal component
+   * This ensures that we stop subscription to interval
+   */
+  closed(): void {
+    if (this.subscription !== null) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  close(): void {
+    this.dialogRef.close();
+  }
+
+  /**
+   * Sets extra information on close button
+   * @param miliseconds miliseconds to inform (will be converted to seconds)
+   */
+  setExtra(miliseconds: number) {
+    this.extra = ' (' + Math.floor(miliseconds / 1000) + ' ' + django.gettext('seconds') + ') ';
   }
 
   ngOnInit() {
+    if (this.data.autoclose > 0) {
+      this.dialogRef.afterClosed().subscribe(res => {
+        this.closed();
+      });
+      this.setExtra(this.data.autoclose);
+      this.subscription = interval(1000).subscribe(n => {
+        const rem = this.data.autoclose - (n + 1) * 1000;
+        this.setExtra(rem);
+        if (rem <= 0) {
+          this.close();
+        }
+      });
+      /*window.setTimeout(() => {
+        this.dialogRef.close();
+      }, this.data.autoclose);*/
+    }
   }
 
 }

src/app/gui/navbar/navbar.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { UdsApiService } from '../../uds-api.service';
+import { UDSApiService } from '../../uds-api.service';
 import { Lang } from '../../types/config';
 
 @Component({
@@ -12,7 +12,7 @@ export class NavbarComponent implements OnInit {
   langs: Lang[]; // Available languages
   isNavbarCollapsed = true;
 
-  constructor(public api: UdsApiService) {
+  constructor(public api: UDSApiService) {
     const lang = api.config.language;
     // Add "non current lang" to list
     this.langs = [];

src/app/helpers/plugin.ts

@@ -1,5 +1,5 @@
 import { Router } from '@angular/router';
-import { UdsApiService } from '../uds-api.service';
+import { UDSApiService } from '../uds-api.service';
 
 /**
  * Plugin manipulation class
@@ -14,10 +14,7 @@ enum BrowserType {
 export class Plugin {
     static transportsWindow: Window = null;
 
-    constructor(private api: UdsApiService) {
+    constructor(private api: UDSApiService) {
-    }
-
-    private launchChrome(url: string) {
     }
 
     /**
@@ -28,6 +25,14 @@ export class Plugin {
      * unless bypassPluginDetection is FALSE
      */
     private doLaunch(url: string) {
+        this.api.gui.alert(
+            django.gettext('Launching service'),
+            '<p stype="font-size: 1.2rem;">' + django.gettext('Please wait') + '</p><p style="font-size: 0.8rem;">' +
+            django.gettext('Remember that UDS Plugin is required in order for this service to be launched') +
+            '</p>',
+            5000
+        );
+
         let elem = document.getElementById('hiddenUdsLauncherIFrame');
         if (elem === null) {
             const i = document.createElement('div');
@@ -36,27 +41,6 @@ export class Plugin {
             document.body.appendChild(i);
             elem = document.getElementById('hiddenUdsLauncherIFrame');
         }
-
-        elem.focus();
-        this.api.gui.alert(
-            django.gettext('Launching service'),
-            '<p>UDS is trying to launch your service.</p><p>UDS Plugin is required</p>',
-            5000
-        );
-
-        /*let launched = false;
-        launched = true;
-        window.onblur = () => {
-            console.log('Plugin seems to be installed');
-            window.onblur = null;
-            launched = true;
-        };
-        window.setTimeout(() => {
-            window.onblur = null;
-            if (launched === false && this.api.config.bypassPluginDetection === false) {
-                this.api.router.navigate(['client-download']);
-            }
-        }, 2800);*/
         (<any>elem).contentWindow.location.href = url;
     }
 

src/app/modules/app-material.module.ts

@@ -1,5 +1,12 @@
 import { NgModule } from '@angular/core';
-import {MatToolbarModule, MatButtonModule, MatMenuModule, MatTooltipModule, MatExpansionModule } from '@angular/material';
+import {
+  MatToolbarModule,
+  MatButtonModule,
+  MatMenuModule,
+  MatTooltipModule,
+  MatExpansionModule,
+  MatDialogModule,
+} from '@angular/material';
 
 @NgModule({
   imports: [
@@ -8,6 +15,7 @@ import {MatToolbarModule, MatButtonModule, MatMenuModule, MatTooltipModule, MatE
     MatMenuModule,
     MatTooltipModule,
     MatExpansionModule,
+    MatDialogModule,
   ],
   exports: [
     MatToolbarModule,
@@ -15,6 +23,7 @@ import {MatToolbarModule, MatButtonModule, MatMenuModule, MatTooltipModule, MatE
     MatMenuModule,
     MatTooltipModule,
     MatExpansionModule,
+    MatDialogModule,
   ]
 })
 export class AppMaterialModule { }

src/app/pages/client-download/client-download.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { UdsApiService } from '../../uds-api.service';
+import { UDSApiService } from '../../uds-api.service';
 import { Downloadable } from '../../types/config';
 
 @Component({
@@ -11,7 +11,7 @@ export class ClientDownloadComponent implements OnInit {
 
   plugins: Downloadable[];
 
-  constructor(public api: UdsApiService) {
+  constructor(public api: UDSApiService) {
   }
 
   ngOnInit() {

src/app/pages/login/login.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { UdsApiService } from '../../uds-api.service';
+import { UDSApiService } from '../../uds-api.service';
 import { Authenticator } from '../../types/config';
 
 @Component({
@@ -11,7 +11,7 @@ export class LoginComponent implements OnInit {
   auths: Authenticator[];
   visible: boolean;
 
-  constructor(public api: UdsApiService) {
+  constructor(public api: UDSApiService) {
     this.auths = api.config.authenticators.slice(0);
     // Sort array, so we can display it correctly
     this.auths.sort((a, b) => a.priority - b.priority);

src/app/pages/services/services.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { UdsApiService } from '../../uds-api.service';
+import { UDSApiService } from '../../uds-api.service';
 import { JSONServicesInformation, JSONGroup, JSONService } from '../../types/services';
 import { Plugin } from '../../helpers/plugin';
 
@@ -19,10 +19,8 @@ class GroupedServices {
 export class ServicesComponent implements OnInit {
   servicesInformation: JSONServicesInformation;
   group: GroupedServices[];
-  plugin: Plugin;
 
-  constructor(private api: UdsApiService) {
+  constructor(private api: UDSApiService) {
-    this.plugin = new Plugin(api);
   }
 
   /**
@@ -34,7 +32,7 @@ export class ServicesComponent implements OnInit {
       if (!this.servicesInformation.services[0].maintenance) {
         this.api.executeCustomJSForServiceLaunch();
         // Launch url
-        this.plugin.launchURL(this.servicesInformation.services[0].transports[0].link);
+        this.api.launchURL(this.servicesInformation.services[0].transports[0].link);
         return true;
       } else {
         this.api.gui.alert(django.gettext('Warning'), django.gettext('Service is in maintenance and cannot be executed'));

src/app/uds-api.service.ts

@@ -4,16 +4,19 @@ import { Router } from '@angular/router';
 import { User, UDSConfig, Downloadable } from './types/config';
 import { Observable } from 'rxjs';
 import { JSONServicesInformation, JSONEnabledService } from './types/services';
-import { GuiService } from './gui/gui.service';
+import { UDSGuiService } from './gui/uds-gui.service';
+import { Plugin } from './helpers/plugin';
 
 @Injectable()
-export class UdsApiService {
+export class UDSApiService {
   readonly user: User;
   transportsWindow: Window;
+  plugin: Plugin;
 
-  constructor(private http: HttpClient, public gui: GuiService, public router: Router) {
+  constructor(private http: HttpClient, public gui: UDSGuiService, public router: Router) {
     this.user = new User(udsData.profile);
     this.transportsWindow = null;
+    this.plugin = new Plugin(this);
   }
 
   /**
@@ -58,6 +61,10 @@ export class UdsApiService {
     }
   }
 
+  launchURL(udsURL): void {
+    this.plugin.launchURL(udsURL);
+  }
+
   /**
    * Gets auth custom html code
    * @param authId if of the authenticator