From b6b0902392b6f2acf5dcffcd4b2ed102509e702a Mon Sep 17 00:00:00 2001
From: "Patrik J. Braun" <bra.patrik@gmail.com>
Date: Thu, 3 May 2018 19:17:08 -0400
Subject: [PATCH] code improvement

---
 frontend/app/admin/admin.component.html       |  27 ++--
 frontend/app/admin/admin.component.ts         |   2 +-
 frontend/app/frame/frame.component.css        |   2 +-
 frontend/app/frame/frame.component.html       |   2 +-
 .../directory/directory.gallery.component.ts  |   2 +-
 frontend/app/gallery/gallery.component.css    |   4 +-
 frontend/app/gallery/gallery.component.html   |  28 ++--
 frontend/app/gallery/grid/GridRowBuilder.ts   |  12 +-
 .../gallery/grid/grid.gallery.component.css   |   2 +-
 .../gallery/grid/grid.gallery.component.html  |   4 +-
 .../gallery/grid/grid.gallery.component.ts    | 124 +++++++++---------
 .../loading.photo.grid.gallery.component.ts   |   2 +-
 .../photo/photo.grid.gallery.component.html   |   4 +-
 .../photo/photo.grid.gallery.component.ts     |  22 +---
 .../info-panel.lightbox.gallery.component.ts  |  10 +-
 .../lightbox/lightbox.gallery.component.css   |   4 +-
 .../lightbox/lightbox.gallery.component.html  |  22 ++--
 .../photo/photo.lightbox.gallery.component.ts |   4 +-
 .../lightbox.map.gallery.component.ts         |  20 +--
 .../gallery/map/map.gallery.component.html    |   2 +-
 .../app/gallery/map/map.gallery.component.ts  |   4 +-
 .../navigator/navigator.gallery.component.ts  |  18 +--
 .../search/search.gallery.component.ts        |  37 +++---
 .../gallery/share/share.gallery.component.ts  |  13 +-
 frontend/app/language/language.component.ts   |   2 +-
 frontend/app/login/login.component.html       |   2 +-
 .../app/model/network/user.service.spec.ts    |   2 +-
 frontend/app/model/network/user.service.ts    |   2 +-
 .../_abstract/abstract.settings.component.ts  |   2 +-
 .../basic/basic.settings.component.ts         |   4 +-
 .../database/database.settings.component.ts   |   6 +-
 .../indexing/indexing.settings.component.ts   |   3 +-
 .../settings/map/map.settings.component.ts    |   2 +-
 .../other/other.settings.component.ts         |   4 +-
 .../search/search.settings.component.ts       |   2 +-
 .../search/search.settings.service.ts         |   2 +-
 .../share/share.settings.component.ts         |   2 +-
 .../settings/share/share.settings.service.ts  |   2 +-
 .../thumbnail/thumbanil.settings.component.ts |  14 +-
 .../usermanager.settings.component.ts         |   2 +-
 .../app/sharelogin/share-login.component.html |   2 +-
 .../app/sharelogin/share-login.component.ts   |   2 +-
 42 files changed, 209 insertions(+), 219 deletions(-)

diff --git a/frontend/app/admin/admin.component.html b/frontend/app/admin/admin.component.html
index bba4e586..843422d7 100644
--- a/frontend/app/admin/admin.component.html
+++ b/frontend/app/admin/admin.component.html
@@ -35,23 +35,24 @@
             [switch-on-text]="text.Simplified"
             [switch-handle-width]="'100'"
             [switch-label-width]="'20'"
-            i18n-
             [(ngModel)]="simplifiedMode">
           </bSwitch>
         </div>
       </div>
     </div>
-    <settings-basic [simplifiedMode]="simplifiedMode"></settings-basic>
-    <settings-usermanager></settings-usermanager>
-    <settings-database [simplifiedMode]="simplifiedMode"></settings-database>
-    <settings-thumbnail #thumbnail [hidden]="!thumbnail.hasAvailableSettings"
-                        [simplifiedMode]="simplifiedMode"></settings-thumbnail>
-    <settings-search #search [hidden]="!search.hasAvailableSettings"
-                     [simplifiedMode]="simplifiedMode"></settings-search>
-    <settings-share #share [hidden]="!share.hasAvailableSettings" [simplifiedMode]="simplifiedMode"></settings-share>
-    <settings-map #map [hidden]="!map.hasAvailableSettings" [simplifiedMode]="simplifiedMode"></settings-map>
-    <settings-other #other [hidden]="!other.hasAvailableSettings" [simplifiedMode]="simplifiedMode"></settings-other>
-    <settings-indexing #other [hidden]="!other.hasAvailableSettings"
-                       [simplifiedMode]="simplifiedMode"></settings-indexing>
+    <app-settings-basic [simplifiedMode]="simplifiedMode"></app-settings-basic>
+    <app-settings-usermanager></app-settings-usermanager>
+    <app-settings-database [simplifiedMode]="simplifiedMode"></app-settings-database>
+    <app-settings-thumbnail #thumbnail [hidden]="!thumbnail.hasAvailableSettings"
+                            [simplifiedMode]="simplifiedMode"></app-settings-thumbnail>
+    <app-settings-search #search [hidden]="!search.hasAvailableSettings"
+                         [simplifiedMode]="simplifiedMode"></app-settings-search>
+    <app-settings-share #share [hidden]="!share.hasAvailableSettings"
+                        [simplifiedMode]="simplifiedMode"></app-settings-share>
+    <app-settings-map #map [hidden]="!map.hasAvailableSettings" [simplifiedMode]="simplifiedMode"></app-settings-map>
+    <app-settings-other #other [hidden]="!other.hasAvailableSettings"
+                        [simplifiedMode]="simplifiedMode"></app-settings-other>
+    <app-settings-indexing #other [hidden]="!other.hasAvailableSettings"
+                           [simplifiedMode]="simplifiedMode"></app-settings-indexing>
   </div>
 </app-frame>
diff --git a/frontend/app/admin/admin.component.ts b/frontend/app/admin/admin.component.ts
index 2e45ffba..814c981f 100644
--- a/frontend/app/admin/admin.component.ts
+++ b/frontend/app/admin/admin.component.ts
@@ -7,7 +7,7 @@ import {NavigationService} from '../model/navigation.service';
 import {I18n} from '@ngx-translate/i18n-polyfill';
 
 @Component({
-  selector: 'admin',
+  selector: 'app-admin',
   templateUrl: './admin.component.html',
   styleUrls: ['./admin.component.css']
 })
diff --git a/frontend/app/frame/frame.component.css b/frontend/app/frame/frame.component.css
index a19f4038..58f5c8a7 100644
--- a/frontend/app/frame/frame.component.css
+++ b/frontend/app/frame/frame.component.css
@@ -59,7 +59,7 @@ ng2-slim-loading-bar {
   background-color: transparent;
 }
 
-language {
+app-language {
   display: block;
   margin-right: 10px;
 }
diff --git a/frontend/app/frame/frame.component.html b/frontend/app/frame/frame.component.html
index fdcf7816..4de6cd28 100644
--- a/frontend/app/frame/frame.component.html
+++ b/frontend/app/frame/frame.component.html
@@ -36,7 +36,7 @@
           </a>
         </li>
         <li>
-          <language class="navbar-btn" isDark="true"></language>
+          <app-language class="navbar-btn" isDark="true"></app-language>
         </li>
         <li *ngIf="authenticationRequired">
           <button class="btn btn-default navbar-btn"
diff --git a/frontend/app/gallery/directory/directory.gallery.component.ts b/frontend/app/gallery/directory/directory.gallery.component.ts
index 5537bab5..da76e9c1 100644
--- a/frontend/app/gallery/directory/directory.gallery.component.ts
+++ b/frontend/app/gallery/directory/directory.gallery.component.ts
@@ -8,7 +8,7 @@ import {Thumbnail, ThumbnailManagerService} from '../thumnailManager.service';
 import {ShareService} from '../share.service';
 
 @Component({
-  selector: 'gallery-directory',
+  selector: 'app-gallery-directory',
   templateUrl: './directory.gallery.component.html',
   styleUrls: ['./directory.gallery.component.css'],
   providers: [RouterLink],
diff --git a/frontend/app/gallery/gallery.component.css b/frontend/app/gallery/gallery.component.css
index cbd15dac..d7d16bb8 100644
--- a/frontend/app/gallery/gallery.component.css
+++ b/frontend/app/gallery/gallery.component.css
@@ -1,4 +1,4 @@
-gallery-map {
+app-gallery-map {
   margin-right: 0;
   margin-left: auto;
   display: block;
@@ -11,7 +11,7 @@ gallery-map {
   margin-left: 2px;
 }
 
-gallery-directory {
+app-gallery-directory {
   margin: 2px;
   display: inline-block;
 }
diff --git a/frontend/app/gallery/gallery.component.html b/frontend/app/gallery/gallery.component.html
index 404f25cc..31b77657 100644
--- a/frontend/app/gallery/gallery.component.html
+++ b/frontend/app/gallery/gallery.component.html
@@ -13,24 +13,25 @@
       </p>
     </li>
     <li *ngIf="showSearchBar">
-      <gallery-search #search></gallery-search>
+      <app-gallery-search #search></app-gallery-search>
     </li>
     <li *ngIf="showShare">
-      <gallery-share></gallery-share>
+      <app-gallery-share></app-gallery-share>
     </li>
   </ng-container>
 
 
   <div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.value.directory">
-    <gallery-navbar [directory]="_galleryService.content.value.directory"></gallery-navbar>
+    <app-gallery-navbar [directory]="_galleryService.content.value.directory"></app-gallery-navbar>
 
     <div class="directories">
-      <gallery-directory *ngFor="let directory of directories"
-                         [directory]="directory"></gallery-directory>
+      <app-gallery-directory *ngFor="let directory of directories"
+                             [directory]="directory"></app-gallery-directory>
     </div>
-    <gallery-map *ngIf="isPhotoWithLocation && mapEnabled"
-                 [photos]="_galleryService.content.value.directory.photos"></gallery-map>
-    <gallery-grid [photos]="_galleryService.content.value.directory.photos" [lightbox]="lightbox"></gallery-grid>
+    <app-gallery-map *ngIf="isPhotoWithLocation && mapEnabled"
+                     [photos]="_galleryService.content.value.directory.photos"></app-gallery-map>
+    <app-gallery-grid [photos]="_galleryService.content.value.directory.photos"
+                      [lightbox]="lightbox"></app-gallery-grid>
   </div>
 
   <div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.value.searchResult">
@@ -51,14 +52,15 @@
       </li>
     </ol>
 
-    <gallery-map *ngIf="isPhotoWithLocation && mapEnabled"
-                 [photos]="_galleryService.content.value.searchResult.photos"></gallery-map>
+    <app-gallery-map *ngIf="isPhotoWithLocation && mapEnabled"
+                     [photos]="_galleryService.content.value.searchResult.photos"></app-gallery-map>
 
     <div class="directories">
-      <gallery-directory *ngFor="let directory of directories"
-                         [directory]="directory"></gallery-directory>
+      <app-gallery-directory *ngFor="let directory of directories"
+                             [directory]="directory"></app-gallery-directory>
     </div>
-    <gallery-grid [photos]="_galleryService.content.value.searchResult.photos" [lightbox]="lightbox"></gallery-grid>
+    <app-gallery-grid [photos]="_galleryService.content.value.searchResult.photos"
+                      [lightbox]="lightbox"></app-gallery-grid>
   </div>
 
   <div body class="container"
diff --git a/frontend/app/gallery/grid/GridRowBuilder.ts b/frontend/app/gallery/grid/GridRowBuilder.ts
index 586c7a7a..7066749f 100644
--- a/frontend/app/gallery/grid/GridRowBuilder.ts
+++ b/frontend/app/gallery/grid/GridRowBuilder.ts
@@ -4,7 +4,7 @@ export class GridRowBuilder {
 
   private photoRow: Array<PhotoDTO> = [];
 
-  private photoIndex: number = 0; //index of the last pushed photo to the photoRow
+  private photoIndex = 0; // index of the last pushed photo to the photoRow
 
 
   constructor(private photos: Array<PhotoDTO>,
@@ -43,13 +43,13 @@ export class GridRowBuilder {
   }
 
   public adjustRowHeightBetween(minHeight: number, maxHeight: number) {
-    while (this.calcRowHeight() > maxHeight && this.addPhoto() === true) { //row too high -> add more images
+    while (this.calcRowHeight() > maxHeight && this.addPhoto() === true) { // row too high -> add more images
     }
 
-    while (this.calcRowHeight() < minHeight && this.removePhoto() === true) { //roo too small -> remove images
+    while (this.calcRowHeight() < minHeight && this.removePhoto() === true) { // roo too small -> remove images
     }
 
-    //keep at least one photo int thr row
+    // keep at least one photo int thr row
     if (this.photoRow.length <= 0) {
       this.addPhoto();
     }
@@ -58,9 +58,9 @@ export class GridRowBuilder {
   public calcRowHeight(): number {
     let width = 0;
     for (let i = 0; i < this.photoRow.length; i++) {
-      width += ((this.photoRow[i].metadata.size.width) / (this.photoRow[i].metadata.size.height)); //summing up aspect ratios
+      width += ((this.photoRow[i].metadata.size.width) / (this.photoRow[i].metadata.size.height)); // summing up aspect ratios
     }
-    let height = (this.containerWidth - this.photoRow.length * (this.photoMargin * 2) - 1) / width; //cant be equal -> width-1
+    const height = (this.containerWidth - this.photoRow.length * (this.photoMargin * 2) - 1) / width; // cant be equal -> width-1
 
     return height + (this.photoMargin * 2);
   };
diff --git a/frontend/app/gallery/grid/grid.gallery.component.css b/frontend/app/gallery/grid/grid.gallery.component.css
index a32806c1..9bb589b0 100644
--- a/frontend/app/gallery/grid/grid.gallery.component.css
+++ b/frontend/app/gallery/grid/grid.gallery.component.css
@@ -4,7 +4,7 @@ div {
   font-size: 0;
 }
 
-gallery-grid-photo {
+app-gallery-grid-photo {
   display: inline-block;
 
   cursor: pointer;
diff --git a/frontend/app/gallery/grid/grid.gallery.component.html b/frontend/app/gallery/grid/grid.gallery.component.html
index 24874de5..9ce94f89 100644
--- a/frontend/app/gallery/grid/grid.gallery.component.html
+++ b/frontend/app/gallery/grid/grid.gallery.component.html
@@ -1,5 +1,5 @@
 <div #gridContainer>
-  <gallery-grid-photo
+  <app-gallery-grid-photo
     *ngFor="let gridPhoto of photosToRender"
     (click)="lightbox.show(gridPhoto.photo)"
     [gridPhoto]="gridPhoto"
@@ -8,5 +8,5 @@
     [style.marginLeft.px]="IMAGE_MARGIN"
     [style.marginRight.px]="IMAGE_MARGIN">
 
-  </gallery-grid-photo>
+  </app-gallery-grid-photo>
 </div>
diff --git a/frontend/app/gallery/grid/grid.gallery.component.ts b/frontend/app/gallery/grid/grid.gallery.component.ts
index 67529ce4..c6741755 100644
--- a/frontend/app/gallery/grid/grid.gallery.component.ts
+++ b/frontend/app/gallery/grid/grid.gallery.component.ts
@@ -20,7 +20,7 @@ import {OverlayService} from '../overlay.service';
 import {Config} from '../../../../common/config/public/Config';
 
 @Component({
-  selector: 'gallery-grid',
+  selector: 'app-gallery-grid',
   templateUrl: './grid.gallery.component.html',
   styleUrls: ['./grid.gallery.component.css'],
 })
@@ -33,7 +33,7 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy
   @Input() lightbox: GalleryLightboxComponent;
 
   photosToRender: Array<GridPhoto> = [];
-  containerWidth: number = 0;
+  containerWidth = 0;
 
   public IMAGE_MARGIN = 2;
   private TARGET_COL_COUNT = 5;
@@ -43,6 +43,8 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy
   private onScrollFired = false;
   private scrollbarWidth = 0;
   private helperTime = null;
+  isAfterViewInit = false;
+  private renderedPhotoIndex = 0;
 
   constructor(private overlayService: OverlayService,
               private changeDetector: ChangeDetectorRef) {
@@ -74,16 +76,13 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy
     }
     this.updateContainerWidth();
     this.sortPhotos();
-    //render the same amount of images on resize
-    let renderedIndex = this.renderedPhotoIndex;
+    // render the same amount of images on resize
+    const renderedIndex = this.renderedPhotoIndex;
     this.clearRenderedPhotos();
     this.renderPhotos(renderedIndex);
   }
 
 
-  isAfterViewInit: boolean = false;
-
-
   ngAfterViewInit() {
     this.lightbox.setGridPhotoQL(this.gridPhotoQL);
 
@@ -97,13 +96,38 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy
     this.isAfterViewInit = true;
   }
 
+  public renderARow(): number {
+    if (this.renderedPhotoIndex >= this.photos.length) {
+      return null;
+    }
 
-  private sortPhotos() {
-    //sort pohots by date
-    this.photos.sort((a: PhotoDTO, b: PhotoDTO) => {
-      return a.metadata.creationDate - b.metadata.creationDate;
+
+    let maxRowHeight = window.innerHeight / this.MIN_ROW_COUNT;
+    const minRowHeight = window.innerHeight / this.MAX_ROW_COUNT;
+
+    const photoRowBuilder = new GridRowBuilder(this.photos,
+      this.renderedPhotoIndex,
+      this.IMAGE_MARGIN,
+      this.containerWidth - this.overlayService.getPhantomScrollbarWidth()
+    );
+
+    photoRowBuilder.addPhotos(this.TARGET_COL_COUNT);
+    photoRowBuilder.adjustRowHeightBetween(minRowHeight, maxRowHeight);
+
+    // little trick: We don't want too big single images. But if a little extra height helps fit the row, its ok
+    if (photoRowBuilder.getPhotoRow().length > 1) {
+      maxRowHeight *= 1.2;
+    }
+    const rowHeight = Math.min(photoRowBuilder.calcRowHeight(), maxRowHeight);
+    const imageHeight = rowHeight - (this.IMAGE_MARGIN * 2);
+
+    photoRowBuilder.getPhotoRow().forEach((photo) => {
+      const imageWidth = imageHeight * (photo.metadata.size.width / photo.metadata.size.height);
+      this.photosToRender.push(new GridPhoto(photo, imageWidth, imageHeight, this.renderedPhotoIndex));
     });
 
+    this.renderedPhotoIndex += photoRowBuilder.getPhotoRow().length;
+    return rowHeight;
   }
 
   private clearRenderedPhotos() {
@@ -112,14 +136,22 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy
     this.changeDetector.detectChanges();
   }
 
+  private sortPhotos() {
+    // sort pohots by date
+    this.photos.sort((a: PhotoDTO, b: PhotoDTO) => {
+      return a.metadata.creationDate - b.metadata.creationDate;
+    });
+
+  }
+
   private mergeNewPhotos() {
-    //merge new data with old one
+    // merge new data with old one
     let lastSameIndex = 0;
     let lastRowId = null;
     for (let i = 0; i < this.photos.length && i < this.photosToRender.length; i++) {
 
-      //thIf a photo changed the whole row has to be removed
-      if (this.photosToRender[i].rowId != lastRowId) {
+      // thIf a photo changed the whole row has to be removed
+      if (this.photosToRender[i].rowId !== lastRowId) {
         lastSameIndex = i;
         lastRowId = this.photosToRender[i].rowId;
       }
@@ -137,30 +169,6 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy
   }
 
 
-  private renderedPhotoIndex: number = 0;
-
-  private renderPhotos(numberOfPhotos: number = 0) {
-    if (this.containerWidth == 0 ||
-      this.renderedPhotoIndex >= this.photos.length ||
-      !this.shouldRenderMore()) {
-      return;
-    }
-
-
-    let renderedContentHeight = 0;
-
-    while (this.renderedPhotoIndex < this.photos.length &&
-    (this.shouldRenderMore(renderedContentHeight) === true ||
-      this.renderedPhotoIndex < numberOfPhotos)) {
-      let ret = this.renderARow();
-      if (ret === null) {
-        throw new Error('Grid photos rendering failed');
-      }
-      renderedContentHeight += ret;
-    }
-  }
-
-
   /**
    * Returns true, if scroll is >= 70% to render more images.
    * Or of onscroll rendering is off: return always to render all the images at once
@@ -192,37 +200,25 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy
     }
   }
 
-  public renderARow(): number {
-    if (this.renderedPhotoIndex >= this.photos.length) {
-      return null;
+  private renderPhotos(numberOfPhotos: number = 0) {
+    if (this.containerWidth === 0 ||
+      this.renderedPhotoIndex >= this.photos.length ||
+      !this.shouldRenderMore()) {
+      return;
     }
 
 
-    let maxRowHeight = window.innerHeight / this.MIN_ROW_COUNT;
-    let minRowHeight = window.innerHeight / this.MAX_ROW_COUNT;
+    let renderedContentHeight = 0;
 
-    let photoRowBuilder = new GridRowBuilder(this.photos,
-      this.renderedPhotoIndex,
-      this.IMAGE_MARGIN,
-      this.containerWidth - this.overlayService.getPhantomScrollbarWidth()
-    );
-
-    photoRowBuilder.addPhotos(this.TARGET_COL_COUNT);
-    photoRowBuilder.adjustRowHeightBetween(minRowHeight, maxRowHeight);
-
-    if (photoRowBuilder.getPhotoRow().length > 1) { //little trick: We don't want too big single images. But if a little extra height helps fit the row, its ok
-      maxRowHeight *= 1.2;
+    while (this.renderedPhotoIndex < this.photos.length &&
+    (this.shouldRenderMore(renderedContentHeight) === true ||
+      this.renderedPhotoIndex < numberOfPhotos)) {
+      const ret = this.renderARow();
+      if (ret === null) {
+        throw new Error('Grid photos rendering failed');
+      }
+      renderedContentHeight += ret;
     }
-    let rowHeight = Math.min(photoRowBuilder.calcRowHeight(), maxRowHeight);
-    let imageHeight = rowHeight - (this.IMAGE_MARGIN * 2);
-
-    photoRowBuilder.getPhotoRow().forEach((photo) => {
-      let imageWidth = imageHeight * (photo.metadata.size.width / photo.metadata.size.height);
-      this.photosToRender.push(new GridPhoto(photo, imageWidth, imageHeight, this.renderedPhotoIndex));
-    });
-
-    this.renderedPhotoIndex += photoRowBuilder.getPhotoRow().length;
-    return rowHeight;
   }
 
   private updateContainerWidth(): number {
diff --git a/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.ts b/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.ts
index dab7594d..e7cf02bc 100644
--- a/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.ts
+++ b/frontend/app/gallery/grid/photo/loading/loading.photo.grid.gallery.component.ts
@@ -1,7 +1,7 @@
 import {Component, Input} from '@angular/core';
 
 @Component({
-  selector: 'gallery-grid-photo-loading',
+  selector: 'app-gallery-grid-photo-loading',
   templateUrl: './loading.photo.grid.gallery.component.html',
   styleUrls: ['./loading.photo.grid.gallery.component.css'],
 })
diff --git a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.html b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.html
index a0c420c6..eb4d60bf 100644
--- a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.html
+++ b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.html
@@ -1,11 +1,11 @@
 <div #photoContainer class="photo-container" (mouseover)="mouseOver()" (mouseout)="mouseOut()">
   <img #img [src]="thumbnail.Src" *ngIf="thumbnail.Available">
 
-  <gallery-grid-photo-loading
+  <app-gallery-grid-photo-loading
     [error]="thumbnail.Error"
     [animate]="thumbnail.loading"
     *ngIf="!thumbnail.Available">
-  </gallery-grid-photo-loading>
+  </app-gallery-grid-photo-loading>
 
   <!--Info box -->
   <div #info class="info"
diff --git a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts
index 01be3f99..19c7b28f 100644
--- a/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts
+++ b/frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts
@@ -8,7 +8,7 @@ import {Config} from '../../../../../common/config/public/Config';
 import {AnimationBuilder} from '@angular/animations';
 
 @Component({
-  selector: 'gallery-grid-photo',
+  selector: 'app-gallery-grid-photo',
   templateUrl: './photo.grid.gallery.component.html',
   styleUrls: ['./photo.grid.gallery.component.css'],
   providers: [RouterLink]
@@ -20,18 +20,6 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
   @ViewChild('photoContainer') container: ElementRef;
 
   thumbnail: Thumbnail;
-  /*
-   image = {
-   src: '',
-   show: false
-   };
-
-   loading = {
-   animate: false,
-   show: true
-   };
-   */
-
   infoBar = {
     marginTop: 0,
     visible: false,
@@ -40,7 +28,7 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
   animationTimer = null;
 
   SearchTypes: any = [];
-  searchEnabled: boolean = true;
+  searchEnabled = true;
 
   wasInView: boolean = null;
 
@@ -71,11 +59,11 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
 
 
   onScroll() {
-    if (this.thumbnail.Available == true) {
+    if (this.thumbnail.Available === true) {
       return;
     }
-    let isInView = this.isInView();
-    if (this.wasInView != isInView) {
+    const isInView = this.isInView();
+    if (this.wasInView !== isInView) {
       this.wasInView = isInView;
       this.thumbnail.Visible = isInView;
     }
diff --git a/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts
index 5815e239..07923eaf 100644
--- a/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts
+++ b/frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.ts
@@ -3,7 +3,7 @@ import {PhotoDTO} from '../../../../../common/entities/PhotoDTO';
 import {Config} from '../../../../../common/config/public/Config';
 
 @Component({
-  selector: 'info-panel',
+  selector: 'app-info-panel',
   styleUrls: ['./info-panel.lightbox.gallery.component.css'],
   templateUrl: './info-panel.lightbox.gallery.component.html',
 })
@@ -21,7 +21,7 @@ export class InfoPanelLightboxComponent {
   }
 
   calcFileSize() {
-    let postFixes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const postFixes = ['B', 'KB', 'MB', 'GB', 'TB'];
     let index = 0;
     let size = this.photo.metadata.fileSize;
     while (size > 1000 && index < postFixes.length - 1) {
@@ -42,7 +42,7 @@ export class InfoPanelLightboxComponent {
 
   getDate() {
     const date = new Date(this.photo.metadata.creationDate);
-    let locale = 'en-us';
+    const locale = 'en-us';
     return date.toLocaleString(locale, {month: 'long'}) + ' ' + date.getDate();
   }
 
@@ -53,7 +53,7 @@ export class InfoPanelLightboxComponent {
 
   getDay() {
     const date = new Date(this.photo.metadata.creationDate);
-    let locale = 'en-us';
+    const locale = 'en-us';
     return date.toLocaleString(locale, {weekday: 'long'});
   }
 
@@ -76,7 +76,7 @@ export class InfoPanelLightboxComponent {
     let str = this.photo.metadata.positionData.city ||
       this.photo.metadata.positionData.state;
 
-    if (str.length != 0) {
+    if (str.length !== 0) {
       str += ', ';
     }
     str += this.photo.metadata.positionData.country;
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css
index 00387c33..5c706ca5 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.css
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.css
@@ -9,7 +9,7 @@
   cursor: pointer;
 }
 
-gallery-lightbox-photo {
+app-gallery-lightbox-photo {
   overflow: hidden;
 }
 
@@ -120,7 +120,7 @@ gallery-lightbox-photo {
   animation: blink 3s ease-in-out infinite;
 }
 
-info-panel {
+app-info-panel {
   z-index: 1100; /* Sit on top */
   position: fixed;
   height: 100vh;
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html
index 4cc6e6d0..8a6570e3 100644
--- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html
+++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html
@@ -5,11 +5,11 @@
   </div>
 
   <div class="lightbox" #lightbox>
-    <gallery-lightbox-photo [gridPhoto]="activePhoto ? activePhoto.gridPhoto : null"
-                            [loadImage]="!animating"
-                            [windowAspect]="getPhotoFrameWidth()/getPhotoFrameHeight()"
-                            #photo>
-    </gallery-lightbox-photo>
+    <app-gallery-lightbox-photo [gridPhoto]="activePhoto ? activePhoto.gridPhoto : null"
+                                [loadImage]="!animating"
+                                [windowAspect]="getPhotoFrameWidth()/getPhotoFrameHeight()"
+                                #photo>
+    </app-gallery-lightbox-photo>
   </div>
   <div
     (swipeleft)="nextImage()" (swiperight)="prevImage()" (swipeup)="hide()"
@@ -62,11 +62,11 @@
             title="fast auto play"></span>
     </div>
   </div>
-  <info-panel *ngIf="activePhoto && infoPanelVisible"
-              id="info-panel"
-              [style.width.px]="infoPanelWidth"
-              [photo]="activePhoto.gridPhoto.photo"
-              (onClose)="hideInfoPanel()">
+  <app-info-panel *ngIf="activePhoto && infoPanelVisible"
+                  id="info-panel"
+                  [style.width.px]="infoPanelWidth"
+                  [photo]="activePhoto.gridPhoto.photo"
+                  (onClose)="hideInfoPanel()">
 
-  </info-panel>
+  </app-info-panel>
 </div>
diff --git a/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts
index c9a5311c..640da36f 100644
--- a/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts
+++ b/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts
@@ -2,7 +2,7 @@ import {Component, ElementRef, Input, OnChanges} from '@angular/core';
 import {GridPhoto} from '../../grid/GridPhoto';
 
 @Component({
-  selector: 'gallery-lightbox-photo',
+  selector: 'app-gallery-lightbox-photo',
   styleUrls: ['./photo.lightbox.gallery.component.css'],
   templateUrl: './photo.lightbox.gallery.component.html'
 })
@@ -51,7 +51,7 @@ export class GalleryLightboxPhotoComponent implements OnChanges {
   }
 
   public showThumbnail(): boolean {
-    return this.gridPhoto /*&& !this.imageLoaded*/ &&
+    return this.gridPhoto && !this.imageLoaded &&
       (this.gridPhoto.isThumbnailAvailable() || this.gridPhoto.isReplacementThumbnailAvailable());
   }
 
diff --git a/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.ts b/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.ts
index e91aa750..0d395553 100644
--- a/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.ts
+++ b/frontend/app/gallery/map/lightbox/lightbox.map.gallery.component.ts
@@ -8,7 +8,7 @@ import {IconPhoto} from '../../IconPhoto';
 import {Photo} from '../../Photo';
 
 @Component({
-  selector: 'gallery-map-lightbox',
+  selector: 'app-gallery-map-lightbox',
   styleUrls: ['./lightbox.map.gallery.component.css'],
   templateUrl: './lightbox.map.gallery.component.html',
 })
@@ -32,9 +32,9 @@ export class GalleryMapLightboxComponent implements OnChanges {
               private thumbnailService: ThumbnailManagerService) {
   }
 
-//TODO: fix zooming
+  // TODO: fix zooming
   ngOnChanges() {
-    if (this.visible == false) {
+    if (this.visible === false) {
       return;
     }
     this.showImages();
@@ -70,9 +70,9 @@ export class GalleryMapLightboxComponent implements OnChanges {
 
   public hide() {
     this.fullScreenService.exitFullScreen();
-    let to = this.startPosition;
+    const to = this.startPosition;
 
-    //iff target image out of screen -> scroll to there
+    // iff target image out of screen -> scroll to there
     if (this.getBodyScrollTop() > to.top || this.getBodyScrollTop() + this.getScreenHeight() < to.top) {
       this.setBodyScrollTop(to.top);
     }
@@ -113,7 +113,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
         }
 
       };
-      if (iconTh.Available == true) {
+      if (iconTh.Available === true) {
         obj.iconUrl = iconTh.Src;
       } else {
         iconTh.OnLoad = () => {
@@ -163,12 +163,12 @@ export class GalleryMapLightboxComponent implements OnChanges {
   //noinspection JSUnusedGlobalSymbols
   @HostListener('window:keydown', ['$event'])
   onKeyPress(e: KeyboardEvent) {
-    if (this.visible != true) {
+    if (this.visible !== true) {
       return;
     }
-    let event: KeyboardEvent = window.event ? <any>window.event : e;
+    const event: KeyboardEvent = window.event ? <any>window.event : e;
     switch (event.keyCode) {
-      case 27: //escape
+      case 27: // escape
         this.hide();
         break;
     }
@@ -186,6 +186,6 @@ export interface MapPhoto {
     width: number;
     height: number;
     thumbnail: Thumbnail;
-  }
+  };
 }
 
diff --git a/frontend/app/gallery/map/map.gallery.component.html b/frontend/app/gallery/map/map.gallery.component.html
index 7cbcd853..0bb0b390 100644
--- a/frontend/app/gallery/map/map.gallery.component.html
+++ b/frontend/app/gallery/map/map.gallery.component.html
@@ -1,5 +1,5 @@
 <ng-template [ngIf]="mapPhotos.length>0">
-  <gallery-map-lightbox [photos]="photos"></gallery-map-lightbox>
+  <app-gallery-map-lightbox [photos]="photos"></app-gallery-map-lightbox>
   <div id="map" #map>
     <agm-map
       (click)="click()"
diff --git a/frontend/app/gallery/map/map.gallery.component.ts b/frontend/app/gallery/map/map.gallery.component.ts
index 24120649..72619cda 100644
--- a/frontend/app/gallery/map/map.gallery.component.ts
+++ b/frontend/app/gallery/map/map.gallery.component.ts
@@ -4,7 +4,7 @@ import {Dimension, IRenderable} from '../../model/IRenderable';
 import {GalleryMapLightboxComponent} from './lightbox/lightbox.map.gallery.component';
 
 @Component({
-  selector: 'gallery-map',
+  selector: 'app-gallery-map',
   templateUrl: './map.gallery.component.html',
   styleUrls: ['./map.gallery.component.css']
 })
@@ -17,7 +17,7 @@ export class GalleryMapComponent implements OnChanges, IRenderable {
   mapCenter = {latitude: 0, longitude: 0};
   @ViewChild('map') map: ElementRef;
 
-  //TODO: fix zooming
+  // TODO: fix zooming
   ngOnChanges() {
     this.mapPhotos = this.photos.filter(p => {
       return p.metadata && p.metadata.positionData && p.metadata.positionData.GPSData &&
diff --git a/frontend/app/gallery/navigator/navigator.gallery.component.ts b/frontend/app/gallery/navigator/navigator.gallery.component.ts
index 0d17b0eb..e028b847 100644
--- a/frontend/app/gallery/navigator/navigator.gallery.component.ts
+++ b/frontend/app/gallery/navigator/navigator.gallery.component.ts
@@ -7,7 +7,7 @@ import {ShareService} from '../share.service';
 import {I18n} from '@ngx-translate/i18n-polyfill';
 
 @Component({
-  selector: 'gallery-navbar',
+  selector: 'app-gallery-navbar',
   templateUrl: './navigator.gallery.component.html',
   providers: [RouterLink],
 })
@@ -31,12 +31,12 @@ export class GalleryNavigatorComponent implements OnChanges {
       return [];
     }
 
-    let path = this.directory.path.replace(new RegExp('\\\\', 'g'), '/');
+    const path = this.directory.path.replace(new RegExp('\\\\', 'g'), '/');
 
-    let dirs = path.split('/');
+    const dirs = path.split('/');
     dirs.push(this.directory.name);
 
-    //removing empty strings
+    // removing empty strings
     for (let i = 0; i < dirs.length; i++) {
       if (!dirs[i] || 0 === dirs[i].length || '.' === dirs[i]) {
         dirs.splice(i, 1);
@@ -45,19 +45,19 @@ export class GalleryNavigatorComponent implements OnChanges {
     }
 
     const user = this._authService.user.value;
-    let arr: NavigatorPath[] = [];
+    const arr: NavigatorPath[] = [];
 
-    //create root link
-    if (dirs.length == 0) {
+    // create root link
+    if (dirs.length === 0) {
       arr.push({name: this.i18n('Images'), route: null});
     } else {
       arr.push({name: this.i18n('Images'), route: UserDTO.isPathAvailable('/', user.permissions) ? '/' : null});
     }
 
-    //create rest navigation
+    // create rest navigation
     dirs.forEach((name, index) => {
       const route = dirs.slice(0, dirs.indexOf(name) + 1).join('/');
-      if (dirs.length - 1 == index) {
+      if (dirs.length - 1 === index) {
         arr.push({name: name, route: null});
       } else {
         arr.push({name: name, route: UserDTO.isPathAvailable(route, user.permissions) ? route : null});
diff --git a/frontend/app/gallery/search/search.gallery.component.ts b/frontend/app/gallery/search/search.gallery.component.ts
index 2ea8f9db..dfd78833 100644
--- a/frontend/app/gallery/search/search.gallery.component.ts
+++ b/frontend/app/gallery/search/search.gallery.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnDestroy} from '@angular/core';
 import {AutoCompleteService} from './autocomplete.service';
 import {AutoCompleteItem, SearchTypes} from '../../../../common/entities/AutoCompleteItem';
 import {ActivatedRoute, Params, RouterLink} from '@angular/router';
@@ -6,23 +6,23 @@ import {GalleryService} from '../gallery.service';
 import {Config} from '../../../../common/config/public/Config';
 
 @Component({
-  selector: 'gallery-search',
+  selector: 'app-gallery-search',
   templateUrl: './search.gallery.component.html',
   styleUrls: ['./search.gallery.component.css'],
   providers: [AutoCompleteService, RouterLink]
 })
-export class GallerySearchComponent {
+export class GallerySearchComponent implements OnDestroy {
 
   autoCompleteItems: Array<AutoCompleteRenderItem> = [];
-  public searchText: string = '';
+  public searchText = '';
   private cache = {
     lastAutocomplete: '',
     lastInstantSearch: ''
   };
 
   SearchTypes: any = [];
-
-  private subscription = null;
+  mouseOverAutoComplete = false;
+  private readonly subscription = null;
 
   constructor(private _autoCompleteService: AutoCompleteService,
               private _galleryService: GalleryService,
@@ -31,8 +31,8 @@ export class GallerySearchComponent {
     this.SearchTypes = SearchTypes;
 
     this.subscription = this._route.params.subscribe((params: Params) => {
-      let searchText = params['searchText'];
-      if (searchText && searchText != '') {
+      const searchText = params['searchText'];
+      if (searchText && searchText !== '') {
         this.searchText = searchText;
       }
     });
@@ -47,14 +47,14 @@ export class GallerySearchComponent {
 
   onSearchChange(event: KeyboardEvent) {
 
-    let searchText = (<HTMLInputElement>event.target).value.trim();
+    const searchText = (<HTMLInputElement>event.target).value.trim();
 
-    if (Config.Client.Search.autocompleteEnabled && this.cache.lastAutocomplete != searchText) {
+    if (Config.Client.Search.autocompleteEnabled && this.cache.lastAutocomplete !== searchText) {
       this.cache.lastAutocomplete = searchText;
       this.autocomplete(searchText);
     }
 
-    if (Config.Client.Search.instantSearchEnabled && this.cache.lastInstantSearch != searchText) {
+    if (Config.Client.Search.instantSearchEnabled && this.cache.lastInstantSearch !== searchText) {
       this.cache.lastInstantSearch = searchText;
       this._galleryService.instantSearch(searchText);
     }
@@ -72,14 +72,13 @@ export class GallerySearchComponent {
   }
 
 
-  mouseOverAutoComplete: boolean = false;
 
   public setMouseOverAutoComplete(value: boolean) {
     this.mouseOverAutoComplete = value;
   }
 
   public onFocusLost() {
-    if (this.mouseOverAutoComplete == false) {
+    if (this.mouseOverAutoComplete === false) {
       this.autoCompleteItems = [];
     }
   }
@@ -96,7 +95,7 @@ export class GallerySearchComponent {
     if (!Config.Client.Search.autocompleteEnabled) {
       return;
     }
-    if (searchText.trim() == '.') {
+    if (searchText.trim() === '.') {
       return;
     }
 
@@ -117,7 +116,7 @@ export class GallerySearchComponent {
   private showSuggestions(suggestions: Array<AutoCompleteItem>, searchText: string) {
     this.emptyAutoComplete();
     suggestions.forEach((item: AutoCompleteItem) => {
-      let renderItem = new AutoCompleteRenderItem(item.text, searchText, item.type);
+      const renderItem = new AutoCompleteRenderItem(item.text, searchText, item.type);
       this.autoCompleteItems.push(renderItem);
     });
   }
@@ -129,13 +128,13 @@ export class GallerySearchComponent {
 }
 
 class AutoCompleteRenderItem {
-  public preText: string = '';
-  public highLightText: string = '';
-  public postText: string = '';
+  public preText = '';
+  public highLightText = '';
+  public postText = '';
   public type: SearchTypes;
 
   constructor(public text: string, searchText: string, type: SearchTypes) {
-    let preIndex = text.toLowerCase().indexOf(searchText.toLowerCase());
+    const preIndex = text.toLowerCase().indexOf(searchText.toLowerCase());
     if (preIndex > -1) {
       this.preText = text.substring(0, preIndex);
       this.highLightText = text.substring(preIndex, preIndex + searchText.length);
diff --git a/frontend/app/gallery/share/share.gallery.component.ts b/frontend/app/gallery/share/share.gallery.component.ts
index 1ae0286d..952b2420 100644
--- a/frontend/app/gallery/share/share.gallery.component.ts
+++ b/frontend/app/gallery/share/share.gallery.component.ts
@@ -12,15 +12,15 @@ import {I18n} from '@ngx-translate/i18n-polyfill';
 
 
 @Component({
-  selector: 'gallery-share',
+  selector: 'app-gallery-share',
   templateUrl: './share.gallery.component.html',
   styleUrls: ['./share.gallery.component.css'],
 })
 export class GalleryShareComponent implements OnInit, OnDestroy {
   @ViewChild('shareModal') public childModal: ModalDirective;
 
-  enabled: boolean = true;
-  url: string = '';
+  enabled = true;
+  url = '';
 
   input = {
     includeSubfolders: true,
@@ -30,7 +30,7 @@ export class GalleryShareComponent implements OnInit, OnDestroy {
     },
     password: ''
   };
-  currentDir: string = '';
+  currentDir = '';
   sharing: SharingDTO = null;
   contentSubscription = null;
   passwordProtection = false;
@@ -62,7 +62,7 @@ export class GalleryShareComponent implements OnInit, OnDestroy {
   }
 
   calcValidity() {
-    switch (parseInt(this.input.valid.type.toString())) {
+    switch (parseInt(this.input.valid.type.toString(), 10)) {
       case ValidityTypes.Minutes:
         return this.input.valid.amount * 1000 * 60;
       case ValidityTypes.Hours:
@@ -80,7 +80,8 @@ export class GalleryShareComponent implements OnInit, OnDestroy {
       return;
     }
     this.url = 'loading..';
-    this.sharing = await this._sharingService.updateSharing(this.currentDir, this.sharing.id, this.input.includeSubfolders, this.input.password, this.calcValidity());
+    this.sharing = await this._sharingService.updateSharing(this.currentDir,
+      this.sharing.id, this.input.includeSubfolders, this.input.password, this.calcValidity());
     this.url = Config.Client.publicUrl + '/share/' + this.sharing.sharingKey;
   }
 
diff --git a/frontend/app/language/language.component.ts b/frontend/app/language/language.component.ts
index 1eed392c..7d5af419 100644
--- a/frontend/app/language/language.component.ts
+++ b/frontend/app/language/language.component.ts
@@ -4,7 +4,7 @@ import {Cookie} from 'ng2-cookies';
 import {CookieNames} from '../../../common/CookieNames';
 
 @Component({
-  selector: 'language',
+  selector: 'app-language',
   templateUrl: './language.component.html',
   styleUrls: ['./language.component.css'],
 })
diff --git a/frontend/app/login/login.component.html b/frontend/app/login/login.component.html
index 9cc6e749..857dd429 100644
--- a/frontend/app/login/login.component.html
+++ b/frontend/app/login/login.component.html
@@ -1,6 +1,6 @@
 <div class="container">
   <div class="row">
-    <language class="pull-right"></language>
+    <app-language class="pull-right"></app-language>
   </div>
   <div class="row title">
     <h1><img src="assets/icon.png"/>{{title}}</h1>
diff --git a/frontend/app/model/network/user.service.spec.ts b/frontend/app/model/network/user.service.spec.ts
index 86abf4f2..3baf7b5f 100644
--- a/frontend/app/model/network/user.service.spec.ts
+++ b/frontend/app/model/network/user.service.spec.ts
@@ -26,7 +26,7 @@ describe('UserService', () => {
 
     it('should call postJson at login', inject([UserService, NetworkService], (userService, networkService) => {
       spyOn(networkService, 'postJson');
-      let credential = new LoginCredential('name', 'pass');
+      const credential = new LoginCredential('name', 'pass');
       userService.login(credential);
       expect(networkService.postJson).toHaveBeenCalled();
       expect(networkService.postJson.calls.argsFor(0)).toEqual(['/user/login', {'loginCredential': credential}]);
diff --git a/frontend/app/model/network/user.service.ts b/frontend/app/model/network/user.service.ts
index ed0a5db5..683653f3 100644
--- a/frontend/app/model/network/user.service.ts
+++ b/frontend/app/model/network/user.service.ts
@@ -27,7 +27,7 @@ export class UserService {
 
   public async getSessionUser(): Promise<UserDTO> {
     await this._shareService.wait();
-    if (Config.Client.Sharing.enabled == true) {
+    if (Config.Client.Sharing.enabled === true) {
       if (this._shareService.isSharing()) {
         return this._networkService.getJson<UserDTO>('/user/login?sk=' + this._shareService.getSharingKey());
       }
diff --git a/frontend/app/settings/_abstract/abstract.settings.component.ts b/frontend/app/settings/_abstract/abstract.settings.component.ts
index 09e109ed..3c27ff94 100644
--- a/frontend/app/settings/_abstract/abstract.settings.component.ts
+++ b/frontend/app/settings/_abstract/abstract.settings.component.ts
@@ -26,7 +26,7 @@ export abstract class SettingsComponent<T, S extends AbstractSettingsService<T>=
   public error: string = null;
   public changed = false;
   private _subscription = null;
-  private _settingsSubscription = null;
+  private readonly _settingsSubscription = null;
 
   public settings: T = <any>{};
   public original: T = <any>{};
diff --git a/frontend/app/settings/basic/basic.settings.component.ts b/frontend/app/settings/basic/basic.settings.component.ts
index a81039dd..b25d3894 100644
--- a/frontend/app/settings/basic/basic.settings.component.ts
+++ b/frontend/app/settings/basic/basic.settings.component.ts
@@ -8,7 +8,7 @@ import {BasicConfigDTO} from '../../../../common/entities/settings/BasicConfigDT
 import {I18n} from '@ngx-translate/i18n-polyfill';
 
 @Component({
-  selector: 'settings-basic',
+  selector: 'app-settings-basic',
   templateUrl: './basic.settings.component.html',
   styleUrls: ['./basic.settings.component.css',
     './../_abstract/abstract.settings.component.css'],
@@ -33,7 +33,7 @@ export class BasicSettingsComponent extends SettingsComponent<BasicConfigDTO> {
 
   public async save(): Promise<boolean> {
     const val = await super.save();
-    if (val == true) {
+    if (val === true) {
 
       this.notification.info('Restart the server to apply the new settings');
     }
diff --git a/frontend/app/settings/database/database.settings.component.ts b/frontend/app/settings/database/database.settings.component.ts
index ad2c3ec7..1341c8fb 100644
--- a/frontend/app/settings/database/database.settings.component.ts
+++ b/frontend/app/settings/database/database.settings.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {AuthenticationService} from '../../model/network/authentication.service';
 import {DataBaseConfig, DatabaseType} from '../../../../common/config/private/IPrivateConfig';
 import {Utils} from '../../../../common/Utils';
@@ -9,13 +9,13 @@ import {DatabaseSettingsService} from './database.settings.service';
 import {I18n} from '@ngx-translate/i18n-polyfill';
 
 @Component({
-  selector: 'settings-database',
+  selector: 'app-settings-database',
   templateUrl: './database.settings.component.html',
   styleUrls: ['./database.settings.component.css',
     './../_abstract/abstract.settings.component.css'],
   providers: [DatabaseSettingsService],
 })
-export class DatabaseSettingsComponent extends SettingsComponent<DataBaseConfig> {
+export class DatabaseSettingsComponent extends SettingsComponent<DataBaseConfig> implements OnInit {
 
   public types: Array<any> = [];
   public DatabaseType: any;
diff --git a/frontend/app/settings/indexing/indexing.settings.component.ts b/frontend/app/settings/indexing/indexing.settings.component.ts
index 566c4b4d..cd085518 100644
--- a/frontend/app/settings/indexing/indexing.settings.component.ts
+++ b/frontend/app/settings/indexing/indexing.settings.component.ts
@@ -12,7 +12,7 @@ import {Utils} from '../../../../common/Utils';
 import {I18n} from '@ngx-translate/i18n-polyfill';
 
 @Component({
-  selector: 'settings-indexing',
+  selector: 'app-settings-indexing',
   templateUrl: './indexing.settings.component.html',
   styleUrls: ['./indexing.settings.component.css',
     './../_abstract/abstract.settings.component.css'],
@@ -47,7 +47,6 @@ export class IndexingSettingsComponent extends SettingsComponent<IndexingConfig,
       this.subscription.timer.unsubscribe();
       this.subscription.timer = null;
     }
-
   };
 
   constructor(_authService: AuthenticationService,
diff --git a/frontend/app/settings/map/map.settings.component.ts b/frontend/app/settings/map/map.settings.component.ts
index dd454464..fd3cf031 100644
--- a/frontend/app/settings/map/map.settings.component.ts
+++ b/frontend/app/settings/map/map.settings.component.ts
@@ -9,7 +9,7 @@ import {I18n} from '@ngx-translate/i18n-polyfill';
 
 
 @Component({
-  selector: 'settings-map',
+  selector: 'app-settings-map',
   templateUrl: './map.settings.component.html',
   styleUrls: ['./map.settings.component.css',
     './../_abstract/abstract.settings.component.css'],
diff --git a/frontend/app/settings/other/other.settings.component.ts b/frontend/app/settings/other/other.settings.component.ts
index 87ebecb5..adc12822 100644
--- a/frontend/app/settings/other/other.settings.component.ts
+++ b/frontend/app/settings/other/other.settings.component.ts
@@ -8,7 +8,7 @@ import {OtherConfigDTO} from '../../../../common/entities/settings/OtherConfigDT
 import {I18n} from '@ngx-translate/i18n-polyfill';
 
 @Component({
-  selector: 'settings-other',
+  selector: 'app-settings-other',
   templateUrl: './other.settings.component.html',
   styleUrls: ['./other.settings.component.css',
     './../_abstract/abstract.settings.component.css'],
@@ -36,7 +36,7 @@ export class OtherSettingsComponent extends SettingsComponent<OtherConfigDTO> im
 
   public async save(): Promise<boolean> {
     const val = await super.save();
-    if (val == true) {
+    if (val === true) {
 
       this.notification.info(this.i18n('Restart the server to apply the new settings'), this.i18n('Info'));
     }
diff --git a/frontend/app/settings/search/search.settings.component.ts b/frontend/app/settings/search/search.settings.component.ts
index 3b1eee9d..9ee42d2f 100644
--- a/frontend/app/settings/search/search.settings.component.ts
+++ b/frontend/app/settings/search/search.settings.component.ts
@@ -8,7 +8,7 @@ import {SearchSettingsService} from './search.settings.service';
 import {I18n} from '@ngx-translate/i18n-polyfill';
 
 @Component({
-  selector: 'settings-search',
+  selector: 'app-settings-search',
   templateUrl: './search.settings.component.html',
   styleUrls: ['./search.settings.component.css',
     './../_abstract/abstract.settings.component.css'],
diff --git a/frontend/app/settings/search/search.settings.service.ts b/frontend/app/settings/search/search.settings.service.ts
index c0a49b47..0b5e4f5b 100644
--- a/frontend/app/settings/search/search.settings.service.ts
+++ b/frontend/app/settings/search/search.settings.service.ts
@@ -13,7 +13,7 @@ export class SearchSettingsService extends AbstractSettingsService<ClientConfig.
   }
 
   public isSupported(): boolean {
-    return this._settingsService.settings.value.Server.database.type != DatabaseType.memory;
+    return this._settingsService.settings.value.Server.database.type !== DatabaseType.memory;
   }
 
   public updateSettings(settings: ClientConfig.SearchConfig): Promise<void> {
diff --git a/frontend/app/settings/share/share.settings.component.ts b/frontend/app/settings/share/share.settings.component.ts
index df7e9f2c..c27631aa 100644
--- a/frontend/app/settings/share/share.settings.component.ts
+++ b/frontend/app/settings/share/share.settings.component.ts
@@ -8,7 +8,7 @@ import {ShareSettingsService} from './share.settings.service';
 import {I18n} from '@ngx-translate/i18n-polyfill';
 
 @Component({
-  selector: 'settings-share',
+  selector: 'app-settings-share',
   templateUrl: './share.settings.component.html',
   styleUrls: ['./share.settings.component.css',
     './../_abstract/abstract.settings.component.css'],
diff --git a/frontend/app/settings/share/share.settings.service.ts b/frontend/app/settings/share/share.settings.service.ts
index 06969779..c78f5d3f 100644
--- a/frontend/app/settings/share/share.settings.service.ts
+++ b/frontend/app/settings/share/share.settings.service.ts
@@ -15,7 +15,7 @@ export class ShareSettingsService extends AbstractSettingsService<ClientConfig.S
 
 
   public isSupported(): boolean {
-    return this._settingsService.settings.value.Server.database.type != DatabaseType.memory;
+    return this._settingsService.settings.value.Server.database.type !== DatabaseType.memory;
   }
 
   public updateSettings(settings: ClientConfig.SharingConfig): Promise<void> {
diff --git a/frontend/app/settings/thumbnail/thumbanil.settings.component.ts b/frontend/app/settings/thumbnail/thumbanil.settings.component.ts
index 649d6deb..eb1583df 100644
--- a/frontend/app/settings/thumbnail/thumbanil.settings.component.ts
+++ b/frontend/app/settings/thumbnail/thumbanil.settings.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {SettingsComponent} from '../_abstract/abstract.settings.component';
 import {AuthenticationService} from '../../model/network/authentication.service';
 import {NavigationService} from '../../model/navigation.service';
@@ -10,13 +10,15 @@ import {Utils} from '../../../../common/Utils';
 import {I18n} from '@ngx-translate/i18n-polyfill';
 
 @Component({
-  selector: 'settings-thumbnail',
+  selector: 'app-settings-thumbnail',
   templateUrl: './thumbanil.settings.component.html',
   styleUrls: ['./thumbanil.settings.component.css',
     './../_abstract/abstract.settings.component.css'],
   providers: [ThumbnailSettingsService],
 })
-export class ThumbnailSettingsComponent extends SettingsComponent<{ server: ThumbnailConfig, client: ClientConfig.ThumbnailConfig }> {
+export class ThumbnailSettingsComponent
+  extends SettingsComponent<{ server: ThumbnailConfig, client: ClientConfig.ThumbnailConfig }>
+  implements OnInit {
   types: Array<any> = [];
   ThumbnailProcessingLib: any;
 
@@ -38,14 +40,16 @@ export class ThumbnailSettingsComponent extends SettingsComponent<{ server: Thum
   set ThumbnailSizes(value: string) {
     value = value.replace(new RegExp(',', 'g'), ';');
     value = value.replace(new RegExp(' ', 'g'), ';');
-    this.settings.client.thumbnailSizes = value.split(';').map(s => parseInt(s)).filter(i => !isNaN(i) && i > 0);
+    this.settings.client.thumbnailSizes = value.split(';')
+      .map(s => parseInt(s, 10))
+      .filter(i => !isNaN(i) && i > 0);
   }
 
   ngOnInit() {
     super.ngOnInit();
     this.types = Utils
       .enumToArray(ThumbnailProcessingLib).map((v) => {
-        if (v.value.toLowerCase() == 'sharp') {
+        if (v.value.toLowerCase() === 'sharp') {
           v.value += ' ' + this.i18n('(recommended)');
         }
         return v;
diff --git a/frontend/app/settings/usermanager/usermanager.settings.component.ts b/frontend/app/settings/usermanager/usermanager.settings.component.ts
index 3ddc40c7..18710c80 100644
--- a/frontend/app/settings/usermanager/usermanager.settings.component.ts
+++ b/frontend/app/settings/usermanager/usermanager.settings.component.ts
@@ -10,7 +10,7 @@ import {ErrorCodes, ErrorDTO} from '../../../../common/entities/Error';
 import {I18n} from '@ngx-translate/i18n-polyfill';
 
 @Component({
-  selector: 'settings-usermanager',
+  selector: 'app-settings-usermanager',
   templateUrl: './usermanager.settings.component.html',
   styleUrls: ['./usermanager.settings.component.css',
     './../_abstract/abstract.settings.component.css'],
diff --git a/frontend/app/sharelogin/share-login.component.html b/frontend/app/sharelogin/share-login.component.html
index 631b25c8..4a628877 100644
--- a/frontend/app/sharelogin/share-login.component.html
+++ b/frontend/app/sharelogin/share-login.component.html
@@ -1,7 +1,7 @@
 <div class="container">
 
   <div class="row">
-    <language class="pull-right"></language>
+    <app-language class="pull-right"></app-language>
   </div>
   <div class="row title">
     <h1><img src="assets/icon.png"/>{{title}}</h1>
diff --git a/frontend/app/sharelogin/share-login.component.ts b/frontend/app/sharelogin/share-login.component.ts
index de830967..3ec16860 100644
--- a/frontend/app/sharelogin/share-login.component.ts
+++ b/frontend/app/sharelogin/share-login.component.ts
@@ -5,7 +5,7 @@ import {Config} from '../../../common/config/public/Config';
 import {NavigationService} from '../model/navigation.service';
 
 @Component({
-  selector: 'share-login',
+  selector: 'app-share-login',
   templateUrl: './share-login.component.html',
   styleUrls: ['./share-login.component.css'],
 })