fixed error and toBeReplaced state

src/app/app.module.ts

@@ -10,27 +10,30 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { AppComponent } from './app.component';
 
-import { NavbarComponent } from './gui/navbar/navbar.component';
+// api
 import { TranslateDirective } from './translate.directive';
 
-import { LoginComponent } from './pages/login/login.component';
-import { ClientDownloadComponent } from './pages/client-download/client-download.component';
-import { ServicesComponent } from './pages/services/services.component';
-import { ModalComponent } from './gui/modal/modal.component';
-import { SafeHtmlPipe } from './gui/safe-html.pipe';
-
-// Gui components
-import { ServiceComponent } from './gui/components/service/service.component';
-import { ServicesGroupComponent } from './gui/components/services-group/services-group.component';
-
-// Pages
-
 // Service providers
 import { UDSApiService } from './uds-api.service';
 import { UDSGuiService } from './gui/uds-gui.service';
-import { FooterComponent } from './gui/footer/footer.component';
+
+// Pages
+import { LoginComponent } from './pages/login/login.component';
+import { ClientDownloadComponent } from './pages/client-download/client-download.component';
+import { ServicesComponent } from './pages/services/services.component';
 import { ErrorComponent } from './pages/error/error.component';
 
+// Gui components
+import { NavbarComponent } from './gui/navbar/navbar.component';
+import { FooterComponent } from './gui/footer/footer.component';
+
+import { ServiceComponent } from './gui/components/service/service.component';
+import { ServicesGroupComponent } from './gui/components/services-group/services-group.component';
+
+import { ModalComponent } from './gui/modal/modal.component';
+import { SafeHtmlPipe } from './gui/safe-html.pipe';
+
+
 @NgModule({
   declarations: [
     AppComponent,

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

@@ -54,6 +54,11 @@
   z-index: 10;
 }
 
+.tobereplaced .icon img {
+  opacity: 0.7;
+  z-index: 10;
+}
+
 
 .name {
   margin-top: 0.5em;
@@ -143,4 +148,30 @@
   content: 'build';
   text-shadow: 0 6px 8px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
   z-index: 1;
-}
+}
+
+.tobereplaced:before {
+  color: rgb(252, 0, 0);
+  opacity: 0.6;
+  position: absolute;
+  top: 0rem;
+  left: 0rem;
+  font-size: 10rem;
+  font-weight: 500;  
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -moz-font-feature-settings: 'liga';
+  font-feature-settings: 'liga';
+  content: 'delete_forever';
+  text-shadow: 0 6px 8px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+  z-index: 1;
+}
+

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

@@ -28,7 +28,8 @@
     </button>
   </mat-menu>
 
-  <div [ngClass]="serviceClass">
+  <div [ngClass]="serviceClass" [matTooltipDisabled]="serviceTooltip===''" 
+    [matTooltip]="serviceTooltip" matTooltipShowDelay="1000" matTooltipPosition="above">
     <div class="icon" (click)="launch()">
       <img [src]="serviceImage">
     </div>

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

@@ -31,12 +31,21 @@ export class ServiceComponent implements OnInit {
   }
 
   get serviceTooltip() {
-    return this.service.name;
+    if ( this.service.to_be_replaced !== null ) {
+      return this.service.to_be_replaced_text;
+    } else if (this.service.maintenance) {
+      return django.gettext('Service is in maintenance');
+    } else if (this.service.not_accesible) {
+      return django.gettext('Service access is not allowed at this time');
+    }
+    return '';
   }
 
   get serviceClass() {
     const klass  = ['service'];
-    if (this.service.maintenance) {
+    if (this.service.to_be_replaced != null) {
+      klass.push('tobereplaced');
+    } else if (this.service.maintenance) {
       klass.push('maintenance');
     } else if (this.service.not_accesible) {
       klass.push('forbidden');
@@ -48,7 +57,6 @@ export class ServiceComponent implements OnInit {
     return this.api.transportIconURL(transId);
   }
 
-
   hasActions() {
     return this.service.allow_users_remove || this.service.allow_users_reset;
   }
@@ -58,7 +66,10 @@ export class ServiceComponent implements OnInit {
   }
 
   hasMenu() {
-    return this.service.maintenance === false && this.service.not_accesible === false && (this.hasActions() || this.hasManyTransports());
+    return this.service.maintenance === false &&
+      this.service.not_accesible === false &&
+      (this.hasActions() || this.hasManyTransports())
+    ;
   }
 
   notifyNotLaunching(message: string) {
@@ -68,17 +79,15 @@ export class ServiceComponent implements OnInit {
   launch() {
     if (this.service.maintenance ) {
       this.notifyNotLaunching(django.gettext('Service is in maintenance and cannot be launched'));
-      return;
-    }
-    if (this.service.not_accesible) {
+    } else if (this.service.not_accesible) {
       this.notifyNotLaunching('<p align="center">' +
       django.gettext('This service is currently not accesible due to schedule restrictions.') +
       '</p><p align="center"><b>' + django.gettext('Access limited by calendar') +
       '</b></p><p align="center">' + django.gettext('Please, retry access in a while.') +
       '</p>'
       );
-      return;
+    } else {
+      this.api.launchURL(this.service.transports[0].link);
     }
-    this.api.launchURL(this.service.transports[0].link);
   }
 }

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

@@ -1,6 +1,6 @@
-import { Component, Input, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
-import { interval, Observable, Subscription } from 'rxjs';
+import { interval, Subscription } from 'rxjs';
 
 export interface ModalData {
   title: string;

src/app/pages/error/error.component.css

@@ -15,6 +15,7 @@
     flex-flow: column wrap;
     align-items: center;
     justify-content: center;
+    padding: 1em;
 }
 
 .header {
@@ -25,4 +26,6 @@
 .message {
     font-size: 1rem;
     height: 30%;
+    text-align: center;
+    min-height: 10rem;
 }

src/app/pages/error/error.component.html

@@ -4,7 +4,7 @@
       <h1 class="mat-display-1">Error</h1>
     </div>
     <div class="message">
-      <h2 class="mat-h2">{{ this.error }}</h2>
+      <h2 class="mat-h2" [innerHTML]="this.error | safeHtml"></h2>
     </div>
   </div>
 </div>

src/app/pages/error/error.component.ts

@@ -18,8 +18,11 @@ export class ErrorComponent implements OnInit {
   getError(): void {
     const id = this.route.snapshot.paramMap.get('id');
     try {
-      this.error = window.atob(id);
+      this.error = new TextDecoder().decode(Uint8Array.from(<any>window.atob(id), c => (<any>c).charCodeAt(c))).replace('\n', '<br/>');
+      console.log(this.error);
+      udsData.error = this.error;
     } catch (e) {
+      console.log(e);
       this.error = django.gettext('Invalid error string');
     }
   }