#216 update to master

src/app/app.component.ts

@@ -10,6 +10,9 @@ import { AuthService, ErrorService, LanguageService, LayoutService, Notification
 import { RouterUtilsService } from './shared/services/router-utils.service';
 import { StyleService } from './shared/services/style.service';
 import { ZoneService } from './shared/services/zone.service';
+import { StorageService } from './shared/services/storage.service';
+import { AsyncJobService } from './shared/services/async-job.service';
+import { CacheService } from './shared/services/cache.service';
 
 
 @Component({
@@ -35,6 +38,9 @@ export class AppComponent implements OnInit, AfterViewInit {
     private router: Router,
     private error: ErrorService,
     private languageService: LanguageService,
+    private asyncJobService: AsyncJobService,
+    private cacheService: CacheService,
+    private storage: StorageService,
     private layoutService: LayoutService,
     private mdlDialogService: MdlDialogService,
     private notification: NotificationService,
@@ -58,13 +64,19 @@ export class AppComponent implements OnInit, AfterViewInit {
     this.loadSettings();
 
     this.error.subscribe(e => this.handleError(e));
-    this.auth.loggedIn.subscribe(loggedIn => {
-      this.loggedIn = loggedIn;
+    this.auth.loggedIn.subscribe(isLoggedIn => {
+      this.loggedIn = isLoggedIn;
       this.updateAccount(this.loggedIn);
-      if (loggedIn) {
+      if (isLoggedIn) {
+        this.auth.startInactivityCounter();
         this.loadSettings();
         this.zoneService.areAllZonesBasic().subscribe(basic => this.disableSecurityGroups = basic);
+      } else {
+        this.auth.clearInactivityTimer();
       }
+      this.asyncJobService.completeAllJobs();
+      this.cacheService.invalidateAll();
+      this.storage.resetInMemoryStorage();
     });
 
     this.layoutService.drawerToggled.subscribe(() => {

src/app/dialog/dialog-module/dialog.service.ts

@@ -110,7 +110,7 @@ export class DialogService {
 
     this.translateService.get(translationParams.translationTokens, translationParams.interpolateParams)
       .subscribe(translations => {
-        let newConfig = this.getMergedConfig(config);
+        const newConfig = this.getMergedConfig(config);
 
         newConfig.message = translations[translationParams.message];
         newConfig.actions = newConfig.actions.map(action => ({

src/app/events/event-list.component.ts

@@ -66,9 +66,12 @@ export class EventListComponent implements OnInit {
   }
 
   public getEvents(params = { reload: false }): void {
-    if (params.reload) { this.loading = true; }
+    if (params.reload) {
+      this.loading = true;
+    }
     this.getEventsObservable(params)
-      .subscribe(() => this.loading = false);
+      .finally(() => this.loading = false)
+      .subscribe();
   }
 
   public getEventsObservable(params: { reload: boolean }): Observable<Array<Event>> {
@@ -109,7 +112,9 @@ export class EventListComponent implements OnInit {
   }
 
   private filterBySearch(events: Array<Event>): Array<Event> {
-    if (!this.query) { return events; }
+    if (!this.query) {
+      return events;
+    }
 
     const queryLower = this.query.toLowerCase();
     return events.filter((event: Event) => {
@@ -169,12 +174,19 @@ export class EventListComponent implements OnInit {
   }
 
   private getEventTypes(events: Array<Event>): Array<string> {
-    return events.reduce((acc, event) => {
+    const types = events.reduce((acc, event) => {
       if (!acc.includes(event.type)) {
         acc.push(event.type);
       }
       return acc;
     }, []);
+
+    return this.selectedTypes.reduce((acc, type) => {
+      if (!acc.includes(type)) {
+        acc.push(type);
+      }
+      return acc;
+    }, types);
   }
 
   private initTableModel(translations: any): void {

src/app/shared/components/color-picker/color-picker.component.html

@@ -1,12 +1,17 @@
-<div class="color-preview-container" (click)="popover.toggle($event)">
+<div
+  class="color-preview-container"
+  [class.disabled]="disabled"
+  (click)="toggle($event)"
+>
   <div
     class="color-preview"
     [style.background-color]="selectedColor?.value"
   ></div>
 </div>
 <mdl-textfield
   [value]="selectedColor?.value"
-  (click)="popover.toggle($event)"
+  [disabled]="disabled"
+  (click)="toggle($event)"
   readonly
 ></mdl-textfield>
 

src/app/shared/components/color-picker/color-picker.component.scss

@@ -24,6 +24,10 @@ $input-margin: 10px;
     width: 100%;
     height: 100%;
   }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
 }
 
 :host mdl-textfield {
@@ -32,6 +36,10 @@ $input-margin: 10px;
   /deep/ input {
     cursor: pointer;
   }
+
+  /deep/ input:disabled {
+    cursor: not-allowed;
+  }
 }
 
 .popover-container {

src/app/shared/components/color-picker/color-picker.component.ts

@@ -11,6 +11,7 @@ import {
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MdlPopoverComponent } from '@angular-mdl/popover';
 import { Color } from '../../models';
+import { toBoolean } from '@angular-mdl/core/components/common/boolean-property';
 
 
 @Component({
@@ -35,6 +36,15 @@ export class ColorPickerComponent implements OnChanges, ControlValueAccessor {
   public colorWidth: number;
 
   private _selectedColor: Color;
+  private _disabled: boolean;
+
+  @Input() public get disabled(): boolean {
+    return this._disabled;
+  };
+
+  public set disabled(value) {
+    this._disabled = toBoolean(value);
+  }
 
   public ngOnChanges(changes: SimpleChanges): void {
     if ('colors' in changes) {
@@ -52,6 +62,12 @@ export class ColorPickerComponent implements OnChanges, ControlValueAccessor {
     this.propagateChange(this._selectedColor);
   }
 
+  public toggle(event: Event): void {
+    if (!this._disabled) {
+      this.popover.toggle(event);
+    }
+  }
+
   public selectColor(color: Color): void {
     this.selectedColor = color;
     this.popover.hide();

src/app/shared/components/create-update-delete-dialog/create-update-delete-dialog.component.html

@@ -0,0 +1,110 @@
+<h3
+  *ngIf="title"
+  class="mdl-dialog__title"
+>
+  {{ title | translate }}
+</h3>
+
+<form
+  (ngSubmit)="submit()"
+  #form="ngForm"
+  novalidate
+>
+  <div class="mdl-dialog__content">
+    <mdl-radio
+      *ngIf="enableAssign"
+      name="assignExistingRadio"
+      [value]="modes.assign"
+      [ngModel]="mode"
+      (ngModelChange)="setMode($event)"
+      mdl-ripple
+    >
+      {{ assignLabel | translate }}
+    </mdl-radio>
+
+    <mdl-radio
+      *ngIf="enableCreate"
+      name="createNewRadio"
+      [value]="modes.create"
+      [ngModel]="mode"
+      (ngModelChange)="setMode($event)"
+      mdl-ripple
+    >
+      {{ createLabel | translate }}
+    </mdl-radio>
+
+    <mdl-radio
+      *ngIf="defaultValue && enableRemove"
+      name="removeRadio"
+      mdl-ripple
+      [value]="modes.remove"
+      [ngModel]="mode"
+      (ngModelChange)="setMode($event)"
+    >
+      <div>
+        {{ removeLabel | translate:{ value: defaultValue } }}
+      </div>
+    </mdl-radio>
+
+    <mdl-textfield
+      *ngIf="mode === modes.create"
+      type="text"
+      name="textValue"
+      floating-label
+      autofocus
+      required
+      [(ngModel)]="newValue"
+      #textField
+      #textFieldModel="ngModel"
+      [class.is-invalid]="textFieldModel.invalid && !textFieldModel.pristine"
+      [style.width]="'100%'"
+      [placeholder]="textFieldPlaceholder | translate"
+      [maxlength]="maxLength"
+    ></mdl-textfield>
+
+    <mdl-select
+      name="selectValue"
+      *ngIf="mode === modes.assign"
+      [(ngModel)]="newValue"
+      [placeholder]="selectPlaceholder | translate"
+    >
+      <mdl-option
+        *ngFor="let option of options"
+        [value]="option"
+      >
+        {{ option }}
+      </mdl-option>
+    </mdl-select>
+  </div>
+
+  <div class="mdl-dialog__actions">
+    <button
+      *ngIf="mode !== modes.remove"
+      mdl-colored="primary"
+      mdl-button
+      mdl-ripple
+      type="submit"
+      [disabled]="!valueChanged || !form.valid"
+    >
+      {{ 'ASSIGN' | translate }}
+    </button>
+    <button
+      *ngIf="mode === modes.remove"
+      mdl-colored="primary"
+      mdl-button
+      mdl-ripple
+      type="submit"
+    >
+      {{ 'REMOVE' | translate }}
+    </button>
+    <button
+      mdl-colored="primary"
+      mdl-button
+      mdl-ripple
+      type="button"
+      (click)="cancel()"
+    >
+      {{ 'CANCEL' | translate }}
+    </button>
+  </div>
+</form>

src/app/shared/components/create-update-delete-dialog/create-update-delete-dialog.component.scss

@@ -0,0 +1,13 @@
+mdl-radio {
+  width: 100%;
+}
+
+/deep/ mdl-radio div {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.mdl-dialog__content {
+  padding-bottom: 0;
+}