Add linter and fixed linter errors.

client/.eslintrc.json

@@ -0,0 +1,50 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

client/angular.json

@@ -45,8 +45,13 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -102,11 +107,23 @@
           "options": {
             "browserTarget": "client:build"
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
   },
   "cli": {
-    "analytics": false
+    "analytics": false,
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }

client/package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "update": "ng update --force --allow-dirty @angular/cli @angular/core @angular/cdk @angular/flex-layout"
+    "update": "ng update --force --allow-dirty @angular/cli @angular/core @angular/cdk @angular/flex-layout",
+    "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
@@ -32,11 +33,19 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^14.2.6",
+    "@angular-eslint/builder": "14.1.2",
+    "@angular-eslint/eslint-plugin": "14.1.2",
+    "@angular-eslint/eslint-plugin-template": "14.1.2",
+    "@angular-eslint/schematics": "14.1.2",
+    "@angular-eslint/template-parser": "14.1.2",
     "@angular/cli": "^14.2.6",
     "@angular/compiler-cli": "^14.2.6",
     "@angular/language-service": "^14.2.6",
     "@types/file-saver": "^2.0.5",
     "@types/node": "^18.11.0",
+    "@typescript-eslint/eslint-plugin": "5.37.0",
+    "@typescript-eslint/parser": "5.37.0",
+    "eslint": "^8.23.1",
     "typescript": "~4.8.4"
   }
 }

client/src/app/add-new-torrent/add-new-torrent.component.html

@@ -144,8 +144,8 @@
         <input class="input" type="number" max="100000" min="0" step="1" [(ngModel)]="torrentLifetime" />
       </div>
       <p class="help">
-        The maximum lifetime of a torrent in minutes. When this time has passed, mark the torrent as error. If the torrent
-      is completed and has downloads, the lifetime setting will not apply. 0 to disable.
+        The maximum lifetime of a torrent in minutes. When this time has passed, mark the torrent as error. If the
+        torrent is completed and has downloads, the lifetime setting will not apply. 0 to disable.
       </p>
     </div>
   </div>
@@ -163,7 +163,7 @@
             Select all
           </label>
         </div>
-        <div class="field" *ngIf="downloadAction === 2 && availableFiles != null">
+        <div class="field" *ngIf="downloadAction === 2 && availableFiles !== null">
           <label class="checkbox is-fullwidth-label" *ngFor="let file of availableFiles">
             <input
               type="checkbox"
@@ -173,7 +173,7 @@
             {{ file.filename }} ({{ file.filesize | filesize }})
           </label>
         </div>
-        <div class="field" *ngIf="downloadAction !== 2 && availableFiles != null">
+        <div class="field" *ngIf="downloadAction !== 2 && availableFiles !== null">
           <label class="is-fullwidth-label is-block" *ngFor="let file of availableFiles">
             {{ file.filename }}
             <span *ngIf="file.filesize > 0">({{ file.filesize | filesize }})</span>

client/src/app/add-new-torrent/add-new-torrent.component.ts

@@ -39,7 +39,9 @@ export class AddNewTorrentComponent implements OnInit {
     private router: Router,
     private torrentService: TorrentService,
     private settingsService: SettingsService
-  ) {
+  ) {}
+
+  ngOnInit(): void {
     this.settingsService.get().subscribe((settings) => {
       const providerSetting = settings.first((m) => m.key === 'Provider:Provider');
       this.provider = providerSetting.enumValues[providerSetting.value as number];
@@ -58,8 +60,6 @@ export class AddNewTorrentComponent implements OnInit {
     });
   }
 
-  ngOnInit(): void {}
-
   public pickFile(evt: Event): void {
     const files = (evt.target as HTMLInputElement).files;
 

client/src/app/login/login.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { AuthService } from '../auth.service';
 
@@ -7,7 +7,7 @@ import { AuthService } from '../auth.service';
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss'],
 })
-export class LoginComponent implements OnInit {
+export class LoginComponent {
   public userName: string;
   public password: string;
   public error: string;
@@ -15,8 +15,6 @@ export class LoginComponent implements OnInit {
 
   constructor(private authService: AuthService, private router: Router) {}
 
-  ngOnInit(): void {}
-
   public setUserName(event: Event): void {
     this.userName = (event.target as any).value;
   }

client/src/app/main-layout/main-layout.component.ts

@@ -1,12 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-main-layout',
   templateUrl: './main-layout.component.html',
   styleUrls: ['./main-layout.component.scss'],
 })
-export class MainLayoutComponent implements OnInit {
+export class MainLayoutComponent {
   constructor() {}
-
-  ngOnInit(): void {}
 }

client/src/app/profile/profile.component.html

@@ -19,7 +19,7 @@
 
 <div class="field">
   <div class="control">
-    <div class="notification is-danger is-light" *ngIf="error != null">Error saving: {{ error }}</div>
+    <div class="notification is-danger is-light" *ngIf="error !== null">Error saving: {{ error }}</div>
   </div>
 </div>
 

client/src/app/profile/profile.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { AuthService } from '../auth.service';
 
 @Component({
@@ -6,7 +6,7 @@ import { AuthService } from '../auth.service';
   templateUrl: './profile.component.html',
   styleUrls: ['./profile.component.scss'],
 })
-export class ProfileComponent implements OnInit {
+export class ProfileComponent {
   constructor(private authService: AuthService) {}
 
   public username: string;
@@ -16,10 +16,6 @@ export class ProfileComponent implements OnInit {
   public success: boolean;
   public error: string;
 
-  ngOnInit(): void {
-
-  }
-
   public save(): void {
     this.success = false;
     this.error = null;

client/src/app/setup/setup.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { AuthService } from '../auth.service';
 
@@ -7,7 +7,7 @@ import { AuthService } from '../auth.service';
   templateUrl: './setup.component.html',
   styleUrls: ['./setup.component.scss'],
 })
-export class SetupComponent implements OnInit {
+export class SetupComponent {
   public userName: string;
   public password: string;
   public provider = 'RealDebrid';
@@ -20,8 +20,6 @@ export class SetupComponent implements OnInit {
 
   constructor(private authService: AuthService, private router: Router) {}
 
-  ngOnInit(): void {}
-
   public setup(): void {
     this.error = null;
     this.working = true;

client/src/app/torrent-table/torrent-table.component.html

@@ -6,7 +6,13 @@
   <table class="table is-fullwidth is-hoverable">
     <thead>
       <tr>
-        <th><input type="checkbox" (click)="toggleSelectAll($event)" [checked]="selectedTorrents.length == torrents.length"></th>
+        <th>
+          <input
+            type="checkbox"
+            (click)="toggleSelectAll($event)"
+            [checked]="selectedTorrents.length === torrents.length"
+          />
+        </th>
         <th>Name</th>
         <th>Category</th>
         <th>Priority</th>
@@ -19,7 +25,11 @@
     <tbody>
       <tr *ngFor="let torrent of torrents; trackBy: trackByMethod">
         <td>
-          <input type="checkbox" (click)="toggleSelect(torrent.torrentId)" [checked]="selectedTorrents.contains(torrent.torrentId)">
+          <input
+            type="checkbox"
+            (click)="toggleSelect(torrent.torrentId)"
+            [checked]="selectedTorrents.contains(torrent.torrentId)"
+          />
         </td>
         <td (click)="openTorrent(torrent.torrentId)">
           {{ torrent.rdName }}
@@ -46,7 +56,14 @@
     </tbody>
   </table>
 
-  <button class="button is-danger" (click)="showDeleteModal()" [disabled]="selectedTorrents.length == 0" *ngIf="torrents.length > 0">Delete Selected</button>
+  <button
+    class="button is-danger"
+    (click)="showDeleteModal()"
+    [disabled]="selectedTorrents.length === 0"
+    *ngIf="torrents.length > 0"
+  >
+    Delete Selected
+  </button>
 </div>
 
 <div class="modal" [class.is-active]="isDeleteModalActive">

client/src/app/torrent-table/torrent-table.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Torrent } from '../models/torrent.model';
 import { TorrentService } from '../torrent.service';
-import { forkJoin } from 'rxjs';
+import { forkJoin, Observable } from 'rxjs';
 
 @Component({
   selector: 'app-torrent-table',
@@ -21,8 +21,7 @@ export class TorrentTableComponent implements OnInit {
   public deleteRdTorrent: boolean;
   public deleteLocalFiles: boolean;
 
-  constructor(private router: Router, private torrentService: TorrentService) {
-  }
+  constructor(private router: Router, private torrentService: TorrentService) {}
 
   ngOnInit(): void {
     this.torrentService.getList().subscribe(
@@ -50,9 +49,9 @@ export class TorrentTableComponent implements OnInit {
   public toggleSelectAll(event: any) {
     this.selectedTorrents = [];
 
-    if(event.target.checked){
+    if (event.target.checked) {
       this.torrents.map((torrent) => {
-        this.selectedTorrents.push(torrent.torrentId)
+        this.selectedTorrents.push(torrent.torrentId);
       });
     }
   }
@@ -62,8 +61,7 @@ export class TorrentTableComponent implements OnInit {
 
     if (index > -1) {
       this.selectedTorrents.splice(index, 1);
-    }
-    else {
+    } else {
       this.selectedTorrents.push(torrentId);
     }
   }
@@ -84,12 +82,10 @@ export class TorrentTableComponent implements OnInit {
   public deleteOk(): void {
     this.deleting = true;
 
-    let calls: any[] = [];
+    let calls: Observable<void>[] = [];
 
-    this.selectedTorrents.forEach((torrentId) =>
-    {
-      calls.push(this.torrentService
-        .delete(torrentId, this.deleteData, this.deleteRdTorrent, this.deleteLocalFiles));
+    this.selectedTorrents.forEach((torrentId) => {
+      calls.push(this.torrentService.delete(torrentId, this.deleteData, this.deleteRdTorrent, this.deleteLocalFiles));
     });
 
     forkJoin(calls).subscribe({
@@ -99,10 +95,10 @@ export class TorrentTableComponent implements OnInit {
 
         this.selectedTorrents = [];
       },
-      error: err => {
-        this.deleteError = err.error
+      error: (err) => {
+        this.deleteError = err.error;
         this.deleting = false;
-      }
-    })
+      },
+    });
   }
 }

client/src/app/torrent/torrent.component.html

@@ -12,12 +12,12 @@
   </ul>
 </div>
 
-<div *ngIf="torrent == null">
+<div *ngIf="torrent === null || torrent === undefined">
   <div class="fa-3x">
     <i class="fas fa-spinner fa-spin"></i>
   </div>
 </div>
-<div *ngIf="torrent != null">
+<div *ngIf="torrent !== null && torrent !== undefined">
   <div fxLayout.lt-lg="column" fxLayout.gt-sm="row" fxLayoutGap="20px" *ngIf="activeTab === 0">
     <div fxFlex>
       <div class="field is-grouped">
@@ -90,15 +90,15 @@
       </div>
       <div class="field">
         <label class="label">Files selected on</label>
-        <ng-container *ngIf="torrent.filesSelected == null">(no files selected yet) </ng-container>
-        <ng-container *ngIf="torrent.filesSelected != null">
+        <ng-container *ngIf="torrent.filesSelected === null">(no files selected yet) </ng-container>
+        <ng-container *ngIf="torrent.filesSelected !== null">
           {{ torrent.filesSelected | date: "fullDate" }} {{ torrent.filesSelected | date: "mediumTime" }}
         </ng-container>
       </div>
       <div class="field">
         <label class="label">Completed on</label>
-        <ng-container *ngIf="torrent.completed == null">(not completed yet) </ng-container>
-        <ng-container *ngIf="torrent.completed != null">
+        <ng-container *ngIf="torrent.completed === null">(not completed yet) </ng-container>
+        <ng-container *ngIf="torrent.completed !== null">
           {{ torrent.completed | date: "fullDate" }} {{ torrent.completed | date: "mediumTime" }}
         </ng-container>
       </div>