Cleanup Code

WEB/src/app/app-routing.module.ts

@@ -1,6 +1,6 @@
 import {SongsComponent} from './components/songs/songs.component';
 import {NgModule} from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import {RouterModule, Routes} from '@angular/router';
 
 const routes: Routes = [
     {
@@ -18,4 +18,5 @@ const routes: Routes = [
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {
+}

WEB/src/app/app.component.html

@@ -1,2 +1 @@
-
 <router-outlet></router-outlet>

WEB/src/app/app.component.ts

@@ -5,4 +5,5 @@ import { Component } from '@angular/core';
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.less']
 })
-export class AppComponent { }
+export class AppComponent {
+}

WEB/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {NgModule} from '@angular/core';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {ODataModule} from 'odata-v4-ng';
 
 import {AppRoutingModule} from './app-routing.module';
@@ -66,4 +66,5 @@ import { SongFileEditComponent } from './components/songs/song-file-edit/song-fi
     providers: [],
     bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule {
+}

WEB/src/app/components/songs/song-edit/song-edit.component.html

@@ -1,8 +1,8 @@
 <div class="song-detail-container">
-  <mat-card class="mat-elevation-z8" *ngIf="form">
+    <mat-card *ngIf="form" class="mat-elevation-z8">
         <mat-card-header>
             <div mat-card-avatar>
-        <button mat-icon-button (click)="onBack()" color="warn">
+                <button (click)="onBack()" color="warn" mat-icon-button>
                     <fa-icon [icon]="faArrow"></fa-icon>
                 </button>
             </div>

WEB/src/app/components/songs/song-edit/song-edit.component.ts

@@ -1,11 +1,6 @@
 import {SongsService} from 'src/app/data/songs.service';
 import {FormGroup} from '@angular/forms';
-import {
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from '@angular/core';
-  Component,
-  OnInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef
-} from '@angular/core';
 import {EditSongService} from 'src/app/data/edit-song.service';
 import {faLongArrowAltLeft} from '@fortawesome/free-solid-svg-icons';
 import {State} from 'src/app/data/state';
@@ -25,7 +20,8 @@ export class SongEditComponent implements OnInit {
         private editSongService: EditSongService,
         private songsService: SongsService,
         private change: ChangeDetectorRef
-  ) {}
+    ) {
+    }
 
     ngOnInit() {
         this.form = this.editSongService.initSongEditForm(true);

WEB/src/app/components/songs/song-file-edit/song-file-edit.component.html

@@ -1,9 +1,9 @@
 <form *ngIf="form">
     <mat-form-field>
         <input
+                [formControl]="form.controls.Name"
                 matInput
                 placeholder="Dateiname"
-      [formControl]="form.controls.Name"
         />
     </mat-form-field>
     <mat-form-field>

WEB/src/app/components/songs/song-file-edit/song-file-edit.component.ts

@@ -1,14 +1,7 @@
-import { SongsService } from './../../../data/songs.service';
+import {SongsService} from '../../../data/songs.service';
-import { FileType } from './../../../models/files-types.model.ts';
+import {FileType} from '../../../models/files-types.model.ts';
 import {FormGroup} from '@angular/forms';
-import {
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
-  Component,
-  OnInit,
-  OnDestroy,
-  Input,
-  Output,
-  EventEmitter
-} from '@angular/core';
 import {EditSongService} from 'src/app/data/edit-song.service';
 import {Subscription} from 'rxjs';
 
@@ -32,7 +25,8 @@ export class SongFileEditComponent implements OnInit, OnDestroy {
     constructor(
         private editSongService: EditSongService,
         private songService: SongsService
-  ) {}
+    ) {
+    }
 
     public ngOnInit(): void {
         const form = this.editSongService.initFileEditForm(

WEB/src/app/components/songs/song-files/song-files.component.html

@@ -1,74 +1,74 @@
-<div class="song-detail-container files" *ngIf="song">
+<div *ngIf="song" class="song-detail-container files">
     <mat-card class="mat-elevation-z8">
         <mat-card-content>
-      <table mat-table [dataSource]="song.Files" class="mat-elevation-z8">
+            <table [dataSource]="song.Files" class="mat-elevation-z8" mat-table>
                 <ng-container matColumnDef="name">
-          <th mat-header-cell *matHeaderCellDef>
+                    <th *matHeaderCellDef mat-header-cell>
                         Angehängte Dateien
                     </th>
-          <td mat-cell *matCellDef="let element">
+                    <td *matCellDef="let element" mat-cell>
                         <span *ngIf="fileEditId !== element.ID">{{ element.Name }}</span>
                         <app-song-file-edit
-              [fileId]="element.ID"
                                 (back)="onClickEdit(null)"
                                 *ngIf="fileEditId === element.ID"
+                                [fileId]="element.ID"
                         ></app-song-file-edit>
                     </td>
                 </ng-container>
 
                 <ng-container matColumnDef="action">
-          <th mat-header-cell *matHeaderCellDef>
+                    <th *matHeaderCellDef mat-header-cell>
                         <input
-              type="file"
+                            #newFileUploaderRef
-              ng2FileSelect
                             [uploader]="newFileUploader"
                             multiple
+                            ng2FileSelect
                             style="display:none"
-              #newFileUploaderRef
+                            type="file"
                         />
                         <button
-              mat-icon-button
                                 (click)="newFileUploaderRef.click()"
+                                mat-icon-button
                                 matTooltip="neue Datei hochladen"
                                 matTooltipPosition="left"
                         >
                             <fa-icon [icon]="faFileUpload"></fa-icon>
                         </button>
                     </th>
-          <td mat-cell *matCellDef="let element">
+                    <td *matCellDef="let element" mat-cell>
                         <button
-              mat-icon-button
                                 (click)="onClickEdit(element.ID)"
+                                *ngIf="fileEditId !== element.ID"
+                                mat-icon-button
                                 matTooltip="Eintrag bearbeiten"
                                 matTooltipPosition="left"
-              *ngIf="fileEditId !== element.ID"
                         >
                             <fa-icon [icon]="faEdit"></fa-icon>
                         </button>
                         <button
-              mat-icon-button
                                 (click)="onClickDownload(element.ID, element.Name)"
+                                *ngIf="fileEditId !== element.ID"
+                                mat-icon-button
                                 matTooltip="Datei herunterladen"
                                 matTooltipPosition="left"
-              *ngIf="fileEditId !== element.ID"
                         >
                             <fa-icon [icon]="faDownload"></fa-icon>
                         </button>
                         <button
+                                (click)="onClickEdit(null)"
+                                *ngIf="fileEditId === element.ID"
                                 mat-icon-button
                                 matTooltip="Zurück zur Tabelle"
                                 matTooltipPosition="left"
-              (click)="onClickEdit(null)"
-              *ngIf="fileEditId === element.ID"
                         >
                             <fa-icon [icon]="faArrow"></fa-icon>
                         </button>
                         <button
+                                (click)="onClickDelete(element.ID)"
+                                *ngIf="fileEditId === element.ID"
                                 mat-icon-button
                                 matTooltip="Anhang löschen"
                                 matTooltipPosition="left"
-              (click)="onClickDelete(element.ID)"
-              *ngIf="fileEditId === element.ID"
                         >
                             <fa-icon [icon]="faTrash"></fa-icon>
                         </button>
@@ -76,14 +76,14 @@
                 </ng-container>
 
                 <tr
-          mat-header-row
-          *matHeaderRowDef="columns"
-          ng2FileDrop
-          [uploader]="newFileUploader"
                         (fileOver)="onFileOverNew($event)"
+                        *matHeaderRowDef="columns"
                         [class.file-over]="fileOverNew"
+                        [uploader]="newFileUploader"
+                        mat-header-row
+                        ng2FileDrop
                 ></tr>
-        <tr mat-row *matRowDef="let row; columns: columns"></tr>
+                <tr *matRowDef="let row; columns: columns" mat-row></tr>
             </table>
         </mat-card-content>
     </mat-card>

WEB/src/app/components/songs/song-files/song-files.component.less

@@ -5,6 +5,7 @@
 button {
   font-size: 24px;
   color: #aaa;
+
   &:hover {
     color: #000;
   }

WEB/src/app/components/songs/song-files/song-files.component.ts

@@ -1,15 +1,9 @@
 import {switchMap} from 'rxjs/operators';
-import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import {ChangeDetectorRef, Component} from '@angular/core';
 import {Song} from 'src/app/models/song.model';
 import {SongsService} from 'src/app/data/songs.service';
 import {DownloadService} from 'src/app/data/download.service';
-import {
+import {faDownload, faEdit, faFileUpload, faLongArrowAltLeft, faTrash} from '@fortawesome/free-solid-svg-icons';
-  faFileUpload,
-  faDownload,
-  faEdit,
-  faLongArrowAltLeft,
-  faTrash
-} from '@fortawesome/free-solid-svg-icons';
 import {FileuploadFactory} from 'src/app/services/fileupload.factory';
 import {FileUploader} from 'ng2-file-upload';
 
@@ -42,7 +36,7 @@ export class SongFilesComponent {
             if (_) {
                 this.selectedSongId = _.ID;
                 this.song = _;
-        this.newFileUploader = this.fileuploadFactory.provideForNewFiles(_.ID);
+                this.newFileUploader = FileuploadFactory.provideForNewFiles(_.ID);
                 this.newFileUploader.onCompleteItem = () =>
                     songService.selectSong(_.ID).subscribe();
                 this.newFileUploader.onProgressItem = () => change.markForCheck;
@@ -58,12 +52,15 @@ export class SongFilesComponent {
     public onClickDownload(fileId: number, filename): void {
         this.downloadService.get(this.selectedSongId, fileId, filename);
     }
+
     public onFileOverNew(hover: boolean): void {
         this.fileOverNew = hover;
     }
+
     public onClickEdit(fileId: number): void {
         this.fileEditId = fileId;
     }
+
     public onClickDelete(fileId: number): void {
         const songId = this.song.ID;
         this.songService

WEB/src/app/components/songs/song-form/song-form.component.html

@@ -1,9 +1,9 @@
 <form>
     <mat-form-field>
         <input
+                [formControl]="form.controls.Name"
                 matInput
                 placeholder="Titel"
-        [formControl]="form.controls.Name"
         />
     </mat-form-field>
     <div class="row">
@@ -13,9 +13,9 @@
         </mat-radio-group>
         <mat-form-field>
             <input
+                    [formControl]="form.controls.Number"
                     matInput
                     placeholder="Nummer"
-          [formControl]="form.controls.Number"
             />
         </mat-form-field>
         <mat-form-field>
@@ -28,26 +28,26 @@
         </mat-form-field>
         <mat-form-field>
             <input
+                    [formControl]="form.controls.Tempo"
                     matInput
                     placeholder="Tempo"
-          [formControl]="form.controls.Tempo"
             />
         </mat-form-field>
     </div>
     <mat-form-field>
       <textarea
-        matInput
-        placeholder="Liedtext"
               [formControl]="form.controls.Text"
               [matTextareaAutosize]="true"
+              matInput
+              placeholder="Liedtext"
       ></textarea>
     </mat-form-field>
     <mat-form-field>
         <textarea
-          matInput
-          placeholder="Kommentare"
                 [formControl]="form.controls.Comments"
                 [matTextareaAutosize]="true"
+                matInput
+                placeholder="Kommentare"
         ></textarea>
     </mat-form-field>
 </form>

WEB/src/app/components/songs/song-form/song-form.component.less

@@ -1,6 +1,7 @@
 form {
   display: flex;
   flex-direction: column;
+
   .row {
     display: grid;
     grid-template-columns: 3fr 1fr 1fr 1fr;

WEB/src/app/components/songs/song-new/song-new.component.html

@@ -1,8 +1,8 @@
 <div class="song-detail-container">
-    <mat-card class="mat-elevation-z8" *ngIf="form">
+    <mat-card *ngIf="form" class="mat-elevation-z8">
         <mat-card-header>
             <div mat-card-avatar>
-          <button mat-icon-button (click)="onBack()" color="warn">
+                <button (click)="onBack()" color="warn" mat-icon-button>
                     <fa-icon [icon]="faArrow"></fa-icon>
                 </button>
             </div>
@@ -14,8 +14,9 @@
             <app-song-form [form]="form"></app-song-form>
         </mat-card-content>
         <mat-card-actions>
-        <button mat-button (click)="onClickAdd()">
+            <button (click)="onClickAdd()" mat-button>
-          <fa-icon [icon]="faSave"></fa-icon> neu anlegen
+                <fa-icon [icon]="faSave"></fa-icon>
+                neu anlegen
             </button>
         </mat-card-actions>
     </mat-card>

WEB/src/app/components/songs/song-new/song-new.component.ts

@@ -1,6 +1,6 @@
-import { EditSongService } from './../../../data/edit-song.service';
+import {EditSongService} from '../../../data/edit-song.service';
 import {FormGroup} from '@angular/forms';
-import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit} from '@angular/core';
 import {faLongArrowAltLeft, faSave} from '@fortawesome/free-solid-svg-icons';
 import {State} from 'src/app/data/state';
 import {SongsService} from 'src/app/data/songs.service';
@@ -20,7 +20,8 @@ export class SongNewComponent implements OnInit {
         private editSongService: EditSongService,
         private songsService: SongsService,
         private change: ChangeDetectorRef
-  ) { }
+    ) {
+    }
 
     ngOnInit() {
         this.form = this.editSongService.initSongEditForm(false);

WEB/src/app/components/songs/song/song.component.html

@@ -1,18 +1,20 @@
-<div class="song-detail-container" *ngIf="song">
+<div *ngIf="song" class="song-detail-container">
     <mat-card class="mat-elevation-z8">
         <mat-card-header>
             <div mat-card-avatar>
-        <button mat-icon-button (click)="onBack()" color="warn">
+                <button (click)="onBack()" color="warn" mat-icon-button>
                     <fa-icon [icon]="faArrow"></fa-icon>
                 </button>
             </div>
             <mat-card-title>{{ song.Name }}</mat-card-title>
             <mat-card-subtitle>
                 <mat-chip-list>
-          <mat-chip *ngIf="renderSongType(song.SongType)" [style.background]="renderSongType(song.SongType).color">{{ renderSongType(song.SongType).name }}</mat-chip>
+                    <mat-chip *ngIf="renderSongType(song.SongType)"
+                              [style.background]="renderSongType(song.SongType).color">{{ renderSongType(song.SongType).name }}</mat-chip>
                     <mat-chip *ngIf="song.Key">Tonart: {{ song.Key }}</mat-chip>
                     <mat-chip *ngIf="song.Tempo">Tempo: {{ song.Tempo }}</mat-chip>
-        </mat-chip-list></mat-card-subtitle
+                </mat-chip-list>
+            </mat-card-subtitle
             >
         </mat-card-header>
         <mat-card-content>
@@ -21,8 +23,9 @@
             <p *ngFor="let line of comments">{{ line }}</p>
         </mat-card-content>
         <mat-card-actions>
-      <button mat-button (click)="onClickEdit()">
+            <button (click)="onClickEdit()" mat-button>
-        <fa-icon [icon]="faEdit"></fa-icon> bearbeiten
+                <fa-icon [icon]="faEdit"></fa-icon>
+                bearbeiten
             </button>
         </mat-card-actions>
     </mat-card>

WEB/src/app/components/songs/song/song.component.ts

@@ -1,12 +1,7 @@
 import {SongsService} from 'src/app/data/songs.service';
-import {
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
-  Component,
+import {faEdit, faLongArrowAltLeft} from '@fortawesome/free-solid-svg-icons';
-  ChangeDetectionStrategy,
-  ChangeDetectorRef
-} from '@angular/core';
-import { faLongArrowAltLeft, faEdit } from '@fortawesome/free-solid-svg-icons';
 import {Song} from 'src/app/models/song.model';
-import { DownloadService } from 'src/app/data/download.service';
 import {State} from 'src/app/data/state';
 
 @Component({
@@ -36,13 +31,6 @@ export class SongComponent {
             change.markForCheck();
         });
     }
-  public onBack(): void {
-    this.songService.resetSelectedSong();
-  }
-
-  public onClickEdit(): void {
-    this.songService.state = State.edit;
-  }
 
     public get text(): string[] {
         return this.song && this.song.Text ? this.song.Text.split(/\r?\n/) : [];
@@ -52,11 +40,22 @@ export class SongComponent {
         return this.song && this.song.Comments ? this.song.Comments.split(/\r?\n/) : [];
     }
 
+    public onBack(): void {
+        this.songService.resetSelectedSong();
+    }
+
+    public onClickEdit(): void {
+        this.songService.state = State.edit;
+    }
+
     public renderSongType(songType: string) {
         switch (songType) {
-      case 'Praise': return {name: 'Lobpreis', color: '#99FFB8'};
+            case 'Praise':
-      case 'Worship': return {name: 'Anbetung', color: '#C999FF'};
+                return {name: 'Lobpreis', color: '#99FFB8'};
-      default: return null;
+            case 'Worship':
+                return {name: 'Anbetung', color: '#C999FF'};
+            default:
+                return null;
         }
     }
 }

WEB/src/app/components/songs/songs.component.html

@@ -1,5 +1,5 @@
 <app-table></app-table>
-<app-song-edit [@blend] *ngIf="songsService.state === State.edit"></app-song-edit>
+<app-song-edit *ngIf="songsService.state === State.edit" [@blend]></app-song-edit>
-<app-song-new [@blend] *ngIf="songsService.state === State.new"></app-song-new>
+<app-song-new *ngIf="songsService.state === State.new" [@blend]></app-song-new>
-<app-song [@blend] *ngIf="songsService.state === State.read"></app-song>
+<app-song *ngIf="songsService.state === State.read" [@blend]></app-song>
-<app-song-files [@blend] *ngIf="songsService.state === State.read"></app-song-files>
+<app-song-files *ngIf="songsService.state === State.read" [@blend]></app-song-files>

WEB/src/app/components/songs/songs.component.ts

@@ -11,6 +11,7 @@ import { State } from 'src/app/data/state';
 })
 export class SongsComponent {
     public State = State;
+
     constructor(public songsService: SongsService) {
         songsService.loadSongList$().subscribe();
     }

WEB/src/app/components/songs/table/table.component.html

@@ -1,25 +1,25 @@
 <div
-  class="page-container mat-elevation-z8"
         [class.pinned]="songsService.state !== State.list"
+        class="page-container mat-elevation-z8"
 >
     <div class="table-container">
         <button
-      mat-icon-button
                 (click)="onClickNew()"
                 class="button-new"
+                mat-icon-button
                 matTooltip="neuen Titel anlegen"
                 matTooltipPosition="left"
         >
             <fa-icon [icon]="faNew"></fa-icon>
         </button>
         <table
-      mat-table
                 [dataSource]="songsService.songs | async"
                 class="mat-elevation-z8"
+                mat-table
         >
             <ng-container matColumnDef="Number">
-        <th mat-header-cell *matHeaderCellDef>#</th>
+                <th *matHeaderCellDef mat-header-cell>#</th>
-        <td mat-cell *matCellDef="let element">
+                <td *matCellDef="let element" mat-cell>
                     <mat-chip-list>
                         <mat-chip>{{ element.Number }}</mat-chip>
                     </mat-chip-list>
@@ -27,13 +27,13 @@
             </ng-container>
 
             <ng-container matColumnDef="Name">
-        <th mat-header-cell *matHeaderCellDef>Titel</th>
+                <th *matHeaderCellDef mat-header-cell>Titel</th>
-        <td mat-cell *matCellDef="let element">{{ element.Name }}</td>
+                <td *matCellDef="let element" mat-cell>{{ element.Name }}</td>
             </ng-container>
 
             <ng-container matColumnDef="Key">
-        <th mat-header-cell *matHeaderCellDef></th>
+                <th *matHeaderCellDef mat-header-cell></th>
-        <td mat-cell *matCellDef="let element">
+                <td *matCellDef="let element" mat-cell>
                     <mat-chip-list *ngIf="element.Key">
                         <mat-chip>{{ element.Key }}</mat-chip>
                     </mat-chip-list>
@@ -41,8 +41,8 @@
             </ng-container>
 
             <ng-container matColumnDef="SongType">
-        <th mat-header-cell *matHeaderCellDef></th>
+                <th *matHeaderCellDef mat-header-cell></th>
-        <td mat-cell *matCellDef="let element">
+                <td *matCellDef="let element" mat-cell>
                     <mat-chip-list
                             *ngIf="element.SongType && element.SongType !== 'None'"
                     >
@@ -55,20 +55,20 @@
             </ng-container>
 
             <ng-container matColumnDef="Tempo">
-        <th mat-header-cell *matHeaderCellDef></th>
+                <th *matHeaderCellDef mat-header-cell></th>
-        <td mat-cell *matCellDef="let element">
+                <td *matCellDef="let element" mat-cell>
                     <mat-chip-list *ngIf="element.Tempo">
                         <mat-chip>{{ element.Tempo }}</mat-chip>
                     </mat-chip-list>
                 </td>
             </ng-container>
 
-      <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
+            <tr *matHeaderRowDef="columns; sticky: true" mat-header-row></tr>
             <tr
+                    (click)="onClick(row.ID)"
+                    *matRowDef="let row; columns: columns"
                     [class.selected]="selectedSongId === row.ID"
                     mat-row
-        *matRowDef="let row; columns: columns"
-        (click)="onClick(row.ID)"
             ></tr>
         </table>
     </div>

WEB/src/app/components/songs/table/table.component.less

@@ -17,6 +17,7 @@ table {
   font-size: 24px;
   z-index: 1000;
   color: #aaa;
+
   &:hover {
     color: #000;
   }

WEB/src/app/components/songs/table/table.component.ts

@@ -1,9 +1,5 @@
-import { SongsService } from './../../../data/songs.service';
+import {SongsService} from '../../../data/songs.service';
-import {
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component} from '@angular/core';
-  Component,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef
-} from '@angular/core';
 import {State} from 'src/app/data/state';
 import {faFileMedical} from '@fortawesome/free-solid-svg-icons';
 
@@ -19,9 +15,6 @@ export class TableComponent {
     public faNew = faFileMedical;
     public columnsFull = ['Number', 'Name', 'Key', 'SongType', 'Tempo'];
     public columnsPinned = ['Number', 'Name'];
-  public get columns(): string[] {
-    return this.songsService.state === State.list ? this.columnsFull : this.columnsPinned;
-  }
 
     constructor(
         public songsService: SongsService,
@@ -34,11 +27,18 @@ export class TableComponent {
         );
     }
 
+    public get columns(): string[] {
+        return this.songsService.state === State.list ? this.columnsFull : this.columnsPinned;
+    }
+
     public renderSongType(songType: string) {
         switch (songType) {
-      case 'Praise': return {name: 'Lobpreis', color: '#99FFB8'};
+            case 'Praise':
-      case 'Worship': return {name: 'Anbetung', color: '#C999FF'};
+                return {name: 'Lobpreis', color: '#99FFB8'};
-      default: return null;
+            case 'Worship':
+                return {name: 'Anbetung', color: '#C999FF'};
+            default:
+                return null;
         }
     }
 

WEB/src/app/data/download.service.ts

@@ -6,7 +6,8 @@ import { Injectable } from '@angular/core';
     providedIn: 'root'
 })
 export class DownloadService {
-  constructor(private httpClient: HttpClient) {}
+    constructor(private httpClient: HttpClient) {
+    }
 
     public get(songId: number, fileId: number, filename: string) {
         return this.httpClient

WEB/src/app/data/edit-song.service.ts

@@ -1,7 +1,6 @@
-import { FileType } from './../models/files-types.model.ts';
 import {SongsService} from 'src/app/data/songs.service';
 import {Injectable} from '@angular/core';
-import { FormGroup, FormControl, Validators } from '@angular/forms';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {switchMap} from 'rxjs/operators';
 import {Song} from '../models/song.model';
 import {Subscription} from 'rxjs';
@@ -10,7 +9,8 @@ import { Subscription } from 'rxjs';
     providedIn: 'root'
 })
 export class EditSongService {
-  constructor(private songsService: SongsService) {}
+    constructor(private songsService: SongsService) {
+    }
 
     public initSongEditForm(attachSync: boolean): FormGroup {
         const song = attachSync
@@ -99,7 +99,8 @@ export class EditSongService {
     private firstFreeNumber(): number {
         let number = 0;
         const numbers = this.songsService.songs.value.map(_ => _.Number);
-    while (numbers.indexOf(++number) !== -1) {}
+        while (numbers.indexOf(++number) !== -1) {
+        }
         return number;
     }
 }

WEB/src/app/data/odata.service.ts

@@ -1,11 +1,11 @@
-import { Song } from 'src/app/models/song.model';
+import {Expand, ODataQuery, ODataService} from 'odata-v4-ng';
-import { ODataService, ODataQuery, Expand } from 'odata-v4-ng';
 import {Observable} from 'rxjs';
 import {map, tap} from 'rxjs/operators';
 import {base} from './urls';
 
 export class OdataService {
     private url: string;
+
     constructor(private odataService: ODataService, private entity: string) {
         this.url = base + '/odata/';
     }

WEB/src/app/data/songs.service.ts

@@ -5,7 +5,7 @@ import { ODataService } from 'odata-v4-ng';
 import {OdataService} from './odata.service';
 import {Song} from '../models/song.model';
 import {BehaviorSubject, Observable} from 'rxjs';
-import { tap, switchMap } from 'rxjs/operators';
+import {switchMap, tap} from 'rxjs/operators';
 import {State} from './state';
 import {base} from './urls';
 

WEB/src/app/models/file.model.ts

@@ -1,4 +1,5 @@
 import {FileType} from './files-types.model.ts';
+
 export interface File {
     ID: number;
     Name: string;

WEB/src/app/services/animation.ts

@@ -1,4 +1,4 @@
-import { trigger, transition, style, animate } from '@angular/animations';
+import {animate, style, transition, trigger} from '@angular/animations';
 
 export const blend = trigger('blend', [
     transition(':enter', [

WEB/src/app/services/fileupload.factory.ts

@@ -1,4 +1,4 @@
-import { base } from './../data/urls';
+import {base} from '../data/urls';
 import {Injectable} from '@angular/core';
 import {FileUploader} from 'ng2-file-upload';
 
@@ -6,7 +6,7 @@ import { FileUploader } from 'ng2-file-upload';
     providedIn: 'root'
 })
 export class FileuploadFactory {
-  public provideForNewFiles(songId: number): FileUploader {
+    public static provideForNewFiles(songId: number): FileUploader {
         const uploader = new FileUploader({
             url: base + '/api/songs/' + songId + '/files',
             autoUpload: true,

WEB/src/index.html

@@ -5,8 +5,8 @@
     <title>Wgenerator</title>
     <base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link href="favicon.ico" rel="icon" type="image/x-icon">
 </head>
 <body>
 <app-root></app-root>

WEB/src/styles.less

@@ -19,17 +19,21 @@ html {
   overflow: hidden;
   border-radius: 8px;
   transition: all 300ms ease-in-out;
+
   .mat-table tbody {
     background: none;
   }
+
   th.mat-header-cell:first-of-type {
     border-top-left-radius: 8px;
     transition: all 300ms ease-in-out;
   }
+
   th.mat-header-cell:last-of-type {
     border-top-right-radius: 8px;
     transition: all 300ms ease-in-out;
   }
+
   .mat-table thead {
     border-top-right-radius: 8px;
     border-top-left-radius: 8px;
@@ -40,13 +44,16 @@ html {
     tr.selected {
       background-color: #0002;
     }
+
     tr:hover {
       cursor: pointer;
       background-color: #0001;
+
       td {
         color: #ff9900;
       }
     }
+
     td.mat-cell {
       padding: 0 5px;
     }
@@ -58,14 +65,17 @@ html {
     bottom: 0;
     right: 70vw;
     border-radius: 0px;
+
     th.mat-header-cell:first-of-type {
       border-top-left-radius: 0px;
       transition: all 300ms ease-in-out;
     }
+
     th.mat-header-cell:last-of-type {
       border-top-right-radius: 0px;
       transition: all 300ms ease-in-out;
     }
+
     .mat-table thead {
       border-top-right-radius: 0px;
       border-top-left-radius: 0px;
@@ -95,9 +105,11 @@ html {
 
 .song-detail-container {
   margin-left: 30vw;
+
   .mat-form-field-infix {
     width: 80px;
   }
+
   .mat-radio-button {
     margin: 15px 10px 0 10px;
   }
@@ -106,11 +118,13 @@ html {
     .mat-card {
       padding: 0;
     }
+
     table {
       width: 100%;
       background: none;
       box-shadow: none;
     }
+
     td.mat-cell:last-of-type, td.mat-footer-cell:last-of-type, th.mat-header-cell:last-of-type {
       padding-right: 8px;
       text-align: right;

WEB/src/test.ts

@@ -2,10 +2,7 @@
 
 import 'zone.js/dist/zone-testing';
 import {getTestBed} from '@angular/core/testing';
-import {
+import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
 
 declare const require: any;