adding presentation background

2022-08-14 22:11:54 +02:00
parent a02e740c0f
commit e9846b29e5
41 changed files with 212 additions and 104 deletions
--- a/src/app/modules/presentation/monitor/legal/legal.component.less
+++ b/src/app/modules/presentation/monitor/legal/legal.component.less
@@ -5,7 +5,7 @@
  bottom: 0;
  left: 0;
  right: 0;
-  background: #000c;
+  background: #000e;
  padding: 50px;
  box-sizing: border-box;
  box-shadow: 0px 0px 26px 10px #000;
--- a/src/app/modules/presentation/monitor/monitor.component.html
+++ b/src/app/modules/presentation/monitor/monitor.component.html
@@ -1,7 +1,17 @@
+<div class="fullscreen background"></div>
 <div *ngIf="song && showType" [style.font-size.px]="zoom" class="fullscreen background">
+
+  <div class="bg-blue fullscreen bg-image" [class.visible]="presentationBackground==='blue'"></div>
+  <div class="bg-green fullscreen bg-image" [class.visible]="presentationBackground==='green'"></div>
+  <div class="bg-leder fullscreen bg-image" [class.visible]="presentationBackground==='leder'"></div>
+  <div class="bg-praise fullscreen bg-image" [class.visible]="presentationBackground==='praise'"></div>
+  <div class="bg-bible fullscreen bg-image" [class.visible]="presentationBackground==='bible'"></div>
+
+
  <div
    [@songSwitch]="songId"
    [class.blur]="songId === 'title'"
+    [class.no-logo]="presentationBackground!=='none'"
    [class.hide]="songId !== 'title' && songId !== 'empty'"
    class="start fullscreen logo"
  >
--- a/src/app/modules/presentation/monitor/monitor.component.less
+++ b/src/app/modules/presentation/monitor/monitor.component.less
@@ -21,7 +21,54 @@

  flex-direction: column;
  justify-content: space-between;
-  transition: 300ms all ease-in-out;
+  transition: 30ms all ease-in-out;
+}
+
+.bg-image {
+  z-index: 0;
+  opacity: 0;
+  background-size: cover;
+  transition: 5000ms opacity ease-in-out;
+}
+
+.bg-blue {
+  background-image: url("/assets/bg-dark-blue.jpg");
+  filter: blur(10px);
+  &.visible {
+    opacity: 0.5;
+  }
+}
+
+.bg-green {
+  background-image: url("/assets/bg-dark-green.jpg");
+  filter: blur(5px);
+  &.visible {
+    opacity: 0.9;
+  }
+}
+
+.bg-leder {
+  background-image: url("/assets/bg-leder.jpg");
+  filter: blur(5px);
+  &.visible {
+    opacity: 0.4;
+  }
+}
+
+.bg-praise {
+  background-image: url("/assets/bg-praise.jpg");
+  filter: blur(8px);
+  &.visible {
+    opacity: 0.2;
+  }
+}
+
+.bg-bible {
+  background-image: url("/assets/bg-bible.jpg");
+  filter: blur(8px);
+  &.visible {
+    opacity: 0.2;
+  }
 }

 .start {
@@ -56,4 +103,7 @@
  filter: blur(30px);
  opacity: 0.1;
  transform: scale(0.8) translateY(-10%);
+  &.no-logo {
+    opacity: 0;
+  }
 }
--- a/src/app/modules/presentation/monitor/monitor.component.ts
+++ b/src/app/modules/presentation/monitor/monitor.component.ts
@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {distinctUntilChanged, filter, map, switchMap, tap} from 'rxjs/operators';
+import {debounceTime, distinctUntilChanged, filter, map, switchMap, tap} from 'rxjs/operators';
 import {ShowService} from '../../shows/services/show.service';
 import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
@@ -9,7 +9,7 @@ import {Observable} from 'rxjs';
 import {ConfigService} from '../../../services/config.service';
 import {songSwitch} from '../../../widget-modules/components/song-text/animation';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
-import {Show} from '../../shows/services/show';
+import {PresentationBackground, Show} from '../../shows/services/show';
 import {GlobalSettings} from '../../../services/global-settings';
 import {ShowSongService} from '../../shows/services/show-song.service';

@@ -28,6 +28,7 @@ export class MonitorComponent implements OnInit {
  public showType: string | null = null;
  public date: Date | null = null;
  public config$: Observable<Config | null>;
+  public presentationBackground: PresentationBackground = 'none';

  public constructor(
    private showService: ShowService,
@@ -43,6 +44,7 @@ export class MonitorComponent implements OnInit {
  public ngOnInit(): void {
    this.globalSettingsService.get$
      .pipe(
+        debounceTime(100),
        filter(_ => !!_),
        map(_ => _ as GlobalSettings),
        map(_ => _.currentShow),
@@ -53,16 +55,15 @@ export class MonitorComponent implements OnInit {
        switchMap(_ => this.showService.read$(_)),
        filter(_ => !!_),
        map(_ => _ as Show),
-        tap<Show>(_ => (this.showType = _.showType)),
-        tap<Show>(_ => (this.date = _.date.toDate())),
        tap<Show>(_ => {
+          this.showType = _.showType;
+          this.date = _.date.toDate();
+          this.index = _.presentationSection;
+          this.presentationBackground = _.presentationBackground;
+          this.zoom = _.presentationZoom ?? 30;
          if (this.songId !== _.presentationSongId) this.songId = 'empty';
          setTimeout(() => (this.songId = _.presentationSongId), 300);
        }),
-        tap<Show>(_ => (this.index = _.presentationSection)),
-        tap<Show>(_ => (this.zoom = _.presentationZoom ?? 30))
-      )
-      .pipe(
        switchMap((_: Show) => this.showSongService.read$(_.id, _.presentationSongId)),
        filter(_ => !!_),
        map(_ => _ as Song)
--- a/src/app/modules/presentation/remote/remote.component.html
+++ b/src/app/modules/presentation/remote/remote.component.html
@@ -15,27 +15,29 @@
    </mat-form-field>

    <ng-container *ngIf="!progress">
-      <div *ngIf="show" class="song-parts padding-bottom">
-        <div
-          (click)="onSectionClick('title', -1)"
-          [class.active]="show.presentationSongId === 'title'"
-          class="song-part"
-        >
-          <div class="head">Veranstaltung</div>
-        </div>
-        <div
-          (click)="onSectionClick('empty', -1)"
-          [class.active]="show.presentationSongId === 'empty'"
-          class="song-part"
-        >
-          <div class="head">Leer</div>
+      <div class="song">
+        <div *ngIf="show" class="song-parts">
+          <div
+            (click)="onSectionClick('title', -1)"
+            [class.active]="show.presentationSongId === 'title'"
+            class="song-part"
+          >
+            <div class="head">Veranstaltung</div>
+          </div>
+          <div
+            (click)="onSectionClick('empty', -1)"
+            [class.active]="show.presentationSongId === 'empty'"
+            class="song-part"
+          >
+            <div class="head">Leer</div>
+          </div>
        </div>
      </div>

      <div *ngFor="let song of presentationSongs; trackBy: trackBy" @fade class="song">
        <div *ngIf="show"
-          [class.active]="show.presentationSongId === song.id"
-          class="title song-part"
+             [class.active]="show.presentationSongId === song.id"
+             class="title song-part"
        >
          <div (click)="onSectionClick(song.id, -1)" class="head">
            {{ song.title }}
@@ -60,9 +62,26 @@
      </div>

      <div *ngIf="show" class="div-bottom">
-        <a routerLink="/presentation/monitor" target="_blank">
+
+        <button routerLink="/presentation/monitor" mat-button>
          <fa-icon [icon]="faDesktop"></fa-icon>
-        </a>
+          Präsentation starten
+        </button>
+
+
+        <mat-form-field appearance="outline">
+          <mat-label>Hintergrund</mat-label>
+          <mat-select
+            [ngModel]="show.presentationBackground"
+            (ngModelChange)="onBackground($event)">
+            <mat-option value="none">kein Hintergrund</mat-option>
+            <mat-option value="blue">Sternenhimmel</mat-option>
+            <mat-option value="green">Blätter</mat-option>
+            <mat-option value="leder">Leder</mat-option>
+            <mat-option value="praise">Lobpreis</mat-option>
+            <mat-option value="bible">Bibel</mat-option>
+          </mat-select>
+        </mat-form-field>

        <mat-slider
          (ngModelChange)="onZoom($event)"
@@ -72,8 +91,10 @@
          [step]="2"
          [thumbLabel]="true"
          color="primary"
+          class="zoom-slider"
        >
        </mat-slider>
+
      </div>

      <app-add-song
--- a/src/app/modules/presentation/remote/remote.component.less
+++ b/src/app/modules/presentation/remote/remote.component.less
@@ -1,12 +1,20 @@
@import "../../../../styles/shadow";

 .song {
-  background: #fff5;
+  background: #fff;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  box-sizing: border-box;
+
+  @media screen and (max-width: 860px) {
+    width: 100vw;
+    padding: 10px 20px;
+    border-radius: 0;
+    box-sizing: border-box;
+    margin: 0 -20px 10px;
+  }
 }

 .title {
@@ -35,19 +43,23 @@
  overflow: hidden;
  transition: 300ms all ease-in-out;
  cursor: pointer;
-  // .card-1;
+  outline: 0.5px solid #f4f4f4;

  &:hover {
    .card-1;
+    outline: 0px solid transparent;
  }

  &.active {
    .card-2;
+    outline: 0px solid transparent;

    .head {
      background: #4286f4;
      color: white;
-      border-bottom: 0.5px solid #4286f4;
+    }
+
+    .fragment {
    }
  }
 }
@@ -55,7 +67,6 @@
 .head {
  transition: 300ms all ease-in-out;
  background: #f4f4f4;
-  border-bottom: 0.5px solid #ddd;
  padding: 10px;
  font-weight: bold;
 }
@@ -66,9 +77,21 @@

 .div-bottom {
  display: grid;
-  grid-template-columns: 60px auto;
+  gap: 20px;
+  grid-template-columns: min-content min-content auto;
+
+  @media screen and (max-width: 860px) {
+    gap: 0;
+    grid-template-columns: auto;
+  }
+
+  ::ng-deep.mat-form-field-wrapper {
+    margin: 0;
+    padding: 0;
+  }
 }

+
 .padding-bottom {
  padding-bottom: 20px;
 }
@@ -77,6 +100,7 @@ a {
  font-size: 30px;
  padding: 10px;
  transition: all 300ms ease-in-out;
+
  &:hover {
    color: #4286f4;
  }
--- a/src/app/modules/presentation/remote/remote.component.ts
+++ b/src/app/modules/presentation/remote/remote.component.ts
@@ -1,15 +1,15 @@
 import {Component} from '@angular/core';
 import {combineLatest, Observable} from 'rxjs';
-import {Show} from '../../shows/services/show';
+import {PresentationBackground, Show} from '../../shows/services/show';
 import {ShowSongService} from '../../shows/services/show-song.service';
 import {SongService} from '../../songs/services/song.service';
 import {Song} from '../../songs/services/song';
-import {faDesktop} from '@fortawesome/free-solid-svg-icons/faDesktop';
+import {faDesktop} from '@fortawesome/free-solid-svg-icons';
 import {ShowService} from '../../shows/services/show.service';
 import {ShowSong} from '../../shows/services/show-song';
 import {GlobalSettingsService} from '../../../services/global-settings.service';
 import {FormControl} from '@angular/forms';
-import {distinctUntilChanged, filter, map} from 'rxjs/operators';
+import {debounceTime, distinctUntilChanged, filter, map} from 'rxjs/operators';
 import {fade} from '../../../animations';
 import {delay} from '../../../services/delay';
 import {TextRenderingService} from '../../songs/services/text-rendering.service';
@@ -72,14 +72,17 @@ export class RemoteComponent {
    this.progress = true;
    if (updateShow) {
      await this.showService.update$(change, {presentationSongId: 'empty'});
-      await delay(1200);
+      await delay(200);
      await this.globalSettingsService.set({currentShow: change});
      await this.showService.update$(change, {presentationSongId: 'title'});
    }
    this.currentShowId = change;
-    this.showService.read$(change).subscribe(show => {
-      this.show = show;
-    });
+    this.showService
+      .read$(change)
+      .pipe(debounceTime(100))
+      .subscribe(show => {
+        this.show = show;
+      });

    combineLatest([this.showService.read$(change), this.showSongService.list$(change)]).subscribe(([show, list]) => {
      this.showSongs = list;
@@ -106,7 +109,11 @@ export class RemoteComponent {
      });
  }

-  public async onZoom(zoom: number): Promise<void> {
-    if (this.currentShowId != null) await this.showService.update$(this.currentShowId, {presentationZoom: zoom});
+  public async onZoom(presentationZoom: number): Promise<void> {
+    if (this.currentShowId != null) await this.showService.update$(this.currentShowId, {presentationZoom});
+  }
+
+  public async onBackground(presentationBackground: PresentationBackground): Promise<void> {
+    if (this.currentShowId != null) await this.showService.update$(this.currentShowId, {presentationBackground});
  }
 }
--- a/src/app/modules/shows/new/new.component.ts
+++ b/src/app/modules/shows/new/new.component.ts
@@ -5,7 +5,7 @@ import {Show} from '../services/show';
 import {ShowService} from '../services/show.service';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
-import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
+import {faSave} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-new',
@@ -36,7 +36,7 @@ export class NewComponent implements OnInit {
      return;
    }

-    const id = await this.showService.new$(this.form.value);
+    const id = await this.showService.new$(this.form.value as Partial<Show>);
    await this.router.navigateByUrl(`/shows/${id ?? ''}`);
  }
 }
--- a/src/app/modules/shows/services/show.ts
+++ b/src/app/modules/shows/services/show.ts
@@ -1,6 +1,8 @@
 import firebase from 'firebase/compat/app';
 import Timestamp = firebase.firestore.Timestamp;

+export type PresentationBackground = 'none' | 'blue' | 'green' | 'leder' | 'praise';
+
 export interface Show {
  id: string;
  showType: string;
@@ -15,4 +17,5 @@ export interface Show {
  presentationSongId: string;
  presentationSection: number;
  presentationZoom: number;
+  presentationBackground: PresentationBackground;
 }
--- a/src/app/modules/shows/show/show.component.html
+++ b/src/app/modules/shows/show/show.component.html
@@ -8,7 +8,7 @@
    <i>{{show.public ? 'öffentliche' : 'geschlossene'}} Veranstaltung von
      <app-user-name [userId]="show.owner"></app-user-name>
    </i>
-    <p *ngIf="!show.published">
+    <p >
      <mat-checkbox [(ngModel)]="showText">Text anzeigen</mat-checkbox>
    </p>
    <div *ngIf="showSongs" class="song-list" cdkDropList [cdkDropListDisabled]="show.published"
--- a/src/app/modules/shows/show/show.component.ts
+++ b/src/app/modules/shows/show/show.component.ts
@@ -9,13 +9,7 @@ import {Song} from '../../songs/services/song';
 import {ShowSongService} from '../services/show-song.service';
 import {ShowSong} from '../services/show-song';
 import {DocxService} from '../services/docx.service';
-import {faBox} from '@fortawesome/free-solid-svg-icons/faBox';
-import {faBoxOpen} from '@fortawesome/free-solid-svg-icons/faBoxOpen';
-import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
-import {faLock} from '@fortawesome/free-solid-svg-icons/faLock';
-import {faFileDownload} from '@fortawesome/free-solid-svg-icons/faFileDownload';
-import {faUser} from '@fortawesome/free-solid-svg-icons/faUser';
-import {faUsers} from '@fortawesome/free-solid-svg-icons/faUsers';
+import {faBox, faBoxOpen, faExternalLinkAlt, faFileDownload, faLock, faUser, faUsers} from '@fortawesome/free-solid-svg-icons';
 import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';

@Component({
--- a/src/app/modules/shows/show/song/song.component.html
+++ b/src/app/modules/shows/show/song/song.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="iSong && iSong && show">
-  <div @fade *ngIf="show.published" class="title published">{{ iSong.title }}</div>
+  <div @fade *ngIf="show.published" class="title published">{{ iSong.key }} - {{ iSong.title }}</div>

  <div @fade *ngIf="!show.published" class="song">
    <span class="title">{{ iSong.title }}</span>
@@ -31,7 +31,7 @@

  <app-song-text
    (chordModeChanged)="onChordModeChanged($event)"
-    *ngIf="!edit && (showText || show.published)"
+    *ngIf="!edit && (showText )"
    [chordMode]="iSong.chordMode"
    [showSwitch]="!show.published"
    [text]="iSong.text"
--- a/src/app/modules/shows/show/song/song.component.ts
+++ b/src/app/modules/shows/show/song/song.component.ts
@@ -1,14 +1,11 @@
 import {Component, Input, OnInit} from '@angular/core';
-import {faTrash} from '@fortawesome/free-solid-svg-icons/faTrash';
 import {ShowSongService} from '../../services/show-song.service';
 import {ShowSong} from '../../services/show-song';
 import {getScale} from '../../../songs/services/key.helper';
 import {FormControl} from '@angular/forms';
 import {ChordMode} from '../../../../widget-modules/components/song-text/song-text.component';
 import {Show} from '../../services/show';
-import {faPenToSquare} from '@fortawesome/free-solid-svg-icons/faPenToSquare';
-import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
-import {faEraser} from '@fortawesome/free-solid-svg-icons/faEraser';
+import {faEraser, faPenToSquare, faSave, faTrash} from '@fortawesome/free-solid-svg-icons';
 import {fade} from '../../../../animations';

@Component({
--- a/src/app/modules/songs/services/song.service.ts
+++ b/src/app/modules/songs/services/song.service.ts
@@ -8,15 +8,20 @@ import Timestamp = firebase.firestore.Timestamp;

 // declare let importCCLI: any;

+export type SongType = 'Praise' | 'Worship' | 'Misc';
+export type SongStatus = 'draft' | 'set' | 'final';
+export type SongLegalOwner = 'CCLI' | 'other';
+export type SongLegalType = 'open' | 'allowed';
+
@Injectable({
  providedIn: 'root',
 })
 export class SongService {
-  public static TYPES = ['Praise', 'Worship'];
-  public static STATUS = ['draft', 'set', 'final'];
+  public static TYPES: SongType[] = ['Praise', 'Worship', 'Misc'];
+  public static STATUS: SongStatus[] = ['draft', 'set', 'final'];

-  public static LEGAL_OWNER = ['CCLI', 'other'];
-  public static LEGAL_TYPE = ['open', 'allowed'];
+  public static LEGAL_OWNER: SongLegalOwner[] = ['CCLI', 'other'];
+  public static LEGAL_TYPE: SongLegalType[] = ['open', 'allowed'];

  // private list: Song[];

--- a/src/app/modules/songs/services/song.ts
+++ b/src/app/modules/songs/services/song.ts
@@ -1,4 +1,5 @@
 import firebase from 'firebase/compat/app';
+import {SongLegalOwner, SongLegalType, SongStatus, SongType} from './song.service';
 import Timestamp = firebase.firestore.Timestamp;

 export interface Song {
@@ -10,12 +11,12 @@ export interface Song {
  tempo: number;
  text: string;
  title: string;
-  type: string;
+  type: SongType;
  flags: string;
-  status: string;
+  status: SongStatus;

-  legalType: string;
-  legalOwner: string;
+  legalType: SongLegalType;
+  legalOwner: SongLegalOwner;
  legalOwnerId: string;

  artist: string;
--- a/src/app/modules/songs/song-list/list-item/list-item.component.ts
+++ b/src/app/modules/songs/song-list/list-item/list-item.component.ts
@@ -1,8 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {Song} from '../../services/song';
-import {faBalanceScaleRight} from '@fortawesome/free-solid-svg-icons/faBalanceScaleRight';
-import {faPencilRuler} from '@fortawesome/free-solid-svg-icons/faPencilRuler';
-import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
+import {faBalanceScaleRight, faCheck, faPencilRuler} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-list-item',
--- a/src/app/modules/songs/song/edit/edit-file/file/file.component.ts
+++ b/src/app/modules/songs/song/edit/edit-file/file/file.component.ts
@@ -1,7 +1,7 @@
 import {Component, Input} from '@angular/core';
 import {Observable} from 'rxjs';
 import {File} from '../../../../services/file';
-import {faTrashAlt} from '@fortawesome/free-solid-svg-icons/faTrashAlt';
+import {faTrashAlt} from '@fortawesome/free-solid-svg-icons';
 import {FileService} from '../../../../services/file.service';

@Component({
--- a/src/app/modules/songs/song/edit/edit-song/edit-song.component.ts
+++ b/src/app/modules/songs/song/edit/edit-song/edit-song.component.ts
@@ -8,9 +8,7 @@ import {first, map, switchMap} from 'rxjs/operators';
 import {KEYS} from '../../../services/key.helper';
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {MatChipInputEvent} from '@angular/material/chips';
-import {faTimesCircle} from '@fortawesome/free-solid-svg-icons/faTimesCircle';
-import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
-import {faExternalLinkAlt} from '@fortawesome/free-solid-svg-icons/faExternalLinkAlt';
+import {faExternalLinkAlt, faSave, faTimesCircle} from '@fortawesome/free-solid-svg-icons';
 import {MatDialog} from '@angular/material/dialog';
 import {SaveDialogComponent} from './save-dialog/save-dialog.component';

@@ -54,8 +52,8 @@ export class EditSongComponent implements OnInit {
        this.song = song;
        if (!song) return;
        this.form = this.editService.createSongForm(song);
-        this.form.controls.flags.valueChanges.subscribe(_ => this.onFlagsChanged(_));
-        this.onFlagsChanged(this.form.controls.flags.value);
+        this.form.controls.flags.valueChanges.subscribe(_ => this.onFlagsChanged(_ as string));
+        this.onFlagsChanged(this.form.controls.flags.value as string);
      });
  }

--- a/src/app/modules/songs/song/new/new.component.ts
+++ b/src/app/modules/songs/song/new/new.component.ts
@@ -1,5 +1,5 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {faSave} from '@fortawesome/free-solid-svg-icons/faSave';
+import {faSave} from '@fortawesome/free-solid-svg-icons';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {SongService} from '../../services/song.service';
 import {Song} from '../../services/song';
--- a/src/app/modules/songs/song/song.component.ts
+++ b/src/app/modules/songs/song/song.component.ts
@@ -8,8 +8,7 @@ import {FileDataService} from '../services/file-data.service';
 import {File} from '../services/file';
 import {UserService} from '../../../services/user/user.service';
 import {User} from '../../../services/user/user';
-import {faEdit} from '@fortawesome/free-solid-svg-icons/faEdit';
-import {faTrash} from '@fortawesome/free-solid-svg-icons/faTrash';
+import {faEdit, faTrash} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-song',
--- a/src/app/modules/user/info/info.component.ts
+++ b/src/app/modules/user/info/info.component.ts
@@ -3,7 +3,7 @@ import {UserService} from '../../../services/user/user.service';
 import {Observable} from 'rxjs';
 import {User} from '../../../services/user/user';
 import {ChordMode} from '../../../widget-modules/components/song-text/song-text.component';
-import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons/faSignOutAlt';
+import {faSignOutAlt} from '@fortawesome/free-solid-svg-icons';
 import {RolePipe} from './role.pipe';
 import {roles} from '../../../services/user/roles';

--- a/src/app/modules/user/info/users/user/user.component.ts
+++ b/src/app/modules/user/info/users/user/user.component.ts
@@ -2,7 +2,7 @@ import {Component, Input} from '@angular/core';
 import {User} from '../../../../../services/user/user';
 import {UserService} from '../../../../../services/user/user.service';
 import {ROLE_TYPES} from '../../../../../services/user/roles';
-import {faTimes} from '@fortawesome/free-solid-svg-icons/faTimes';
+import {faTimes} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-user',
--- a/src/app/modules/user/login/login.component.ts
+++ b/src/app/modules/user/login/login.component.ts
@@ -2,8 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
-import {faSignInAlt} from '@fortawesome/free-solid-svg-icons/faSignInAlt';
-import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus';
+import {faSignInAlt, faUserPlus} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-login',
--- a/src/app/modules/user/new/new.component.ts
+++ b/src/app/modules/user/new/new.component.ts
@@ -1,7 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 import {UserService} from '../../../services/user/user.service';
-import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus';
+import {faUserPlus} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-new',
--- a/src/app/modules/user/password/password.component.ts
+++ b/src/app/modules/user/password/password.component.ts
@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
-import {faWindowRestore} from '@fortawesome/free-solid-svg-icons/faWindowRestore';
+import {faWindowRestore} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-password',