Added the artist to the search. Also did the Lidarr settings page

src/Ombi/ClientApp/angular.json

@@ -32,8 +32,8 @@
               "node_modules/primeng/resources/primeng.min.css",
               "node_modules/primeng/resources/themes/nova-light/theme.css",
               "node_modules/primeicons/primeicons.css",
-              "node_modules/fullcalendar/dist/fullcalendar.min.css",
               "node_modules/please-wait/src/please-wait.scss",
+              "node_modules/@fullcalendar/core/main.min.css",
               "node_modules/spinkit/scss/spinners/11-folding-cube.scss",
               "node_modules/spinkit/scss/spinkit.scss"
             ],
@@ -41,7 +41,8 @@
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/chart.js/dist/Chart.js",
               "node_modules/hammerjs/hammer.min.js",
-              "node_modules/fullcalendar/dist/fullcalendar.min.js"
+              "./node_modules/@fullcalendar/core/main.js",
+              "./node_modules/@fullcalendar/interaction/main.js"
             ]
           },
           "configurations": {

src/Ombi/ClientApp/package.json

@@ -24,6 +24,8 @@
     "@angularclass/hmr": "^2.1.3",
     "@aspnet/signalr": "^1.1.0",
     "@auth0/angular-jwt": "^2.1.0",
+    "@fullcalendar/core": "^4.2.0",
+    "@fullcalendar/interaction": "^4.2.0",
     "@ng-bootstrap/ng-bootstrap": "^4.0.1",
     "@ngu/carousel": "^1.4.9-beta-2",
     "@ngx-translate/core": "^11.0.1",
@@ -40,7 +42,6 @@
     "core-js": "^2.5.4",
     "eventemitter2": "^5.0.1",
     "font-awesome": "^4.7.0",
-    "fullcalendar": "4.0.0-alpha.2",
     "hammerjs": "^2.0.8",
     "jquery": "3.3.1",
     "moment": "^2.23.0",

src/Ombi/ClientApp/src/app/media-details/components/artist/artist-details.component.ts

@@ -28,7 +28,7 @@ export class ArtistDetailsComponent {
         public dialog: MatDialog, private requestService: RequestService,
         public messageService: MessageService, private auth: AuthService) {
         this.route.params.subscribe((params: any) => {
-            this.theMovidDbId = params.movieDbId;
+            this.theMovidDbId = params.artistId;
             this.load();
         });
     }

src/Ombi/ClientApp/src/app/media-details/media-details.module.ts

@@ -13,12 +13,14 @@ import { PipeModule } from "../pipes/pipe.module";
 import * as fromComponents from './components';
 import { AuthGuard } from "../auth/auth.guard";
 import { RequestServiceV2 } from "../services/requestV2.service";
+import { ArtistDetailsComponent } from "./components/artist/artist-details.component";
 
 
 const routes: Routes = [
     { path: "movie/:movieDbId", component: MovieDetailsComponent, canActivate: [AuthGuard] },
     { path: "tv/:tvdbId/:search", component: TvDetailsComponent, canActivate: [AuthGuard] },
     { path: "tv/:tvdbId", component: TvDetailsComponent, canActivate: [AuthGuard] },
+    { path: "artist/:artistId", component: ArtistDetailsComponent, canActivate: [AuthGuard] },
 ];
 @NgModule({
     imports: [

src/Ombi/ClientApp/src/app/my-nav/nav-search.component.html

@@ -14,6 +14,12 @@
         <span>{{result.title}}</span>
     </div>
 
+    <div *ngIf="result.mediaType === 'Artist'">
+            <i class="fa fa-music"></i> &nbsp;
+     
+        <span>{{result.title}}</span>
+    </div>
+
     <div *ngIf="result.mediaType === 'person'">
         <i class="fa fa-user"></i> &nbsp;
     <span >{{result.title}}</span>

src/Ombi/ClientApp/src/app/my-nav/nav-search.component.ts

@@ -48,6 +48,9 @@ export class NavSearchComponent {
         } else if (event.item.mediaType == "person") {
             this.router.navigate([`discover/actor/${event.item.id}`]);
             return;
+        } else if (event.item.mediaType == "Artist") {
+            this.router.navigate([`details/artist/${event.item.id}`]);
+            return;
         }
     }
 }

src/Ombi/ClientApp/src/app/services/notification.service.ts

@@ -1,8 +1,15 @@
 import { Injectable } from "@angular/core";
 import { Message } from "primeng/components/common/api";
+import { MatSnackBar, MatSnackBarConfig } from "@angular/material";
 
 @Injectable()
 export class NotificationService {
+    constructor(private snackbar: MatSnackBar) { }
+
+    private config: MatSnackBarConfig<any> = {
+        duration:3000,
+        
+    }
     public messages: Message[] = [];
     public addMessage(message: Message) {
         this.clearMessages();
@@ -11,19 +18,19 @@ export class NotificationService {
     }
 
     public success(body: string) {
-        this.addMessage({ severity: "success", detail: body });
+        this.snackbar.open(body, "OK", this.config);
     }
 
     public info(title: string, body: string) {
-        this.addMessage({ severity: "info", detail: body, summary: title });
+        this.snackbar.open(body, "OK", this.config);
     }
 
     public warning(title: string, body: string) {
-        this.addMessage({ severity: "warning", detail: body, summary: title });
+        this.snackbar.open(body, "OK", this.config);
     }
 
     public error(body: string) {
-        this.addMessage({ severity: "error", detail: body });
+        this.snackbar.open(body, "OK", this.config);
     }
 
     public clearMessages() {

src/Ombi/ClientApp/src/app/settings/about/about.component.html

@@ -3,8 +3,8 @@
   <legend>About</legend>
 
   <div class="mat-table">
-      <div class="mat-row" style="background:red;" *ngIf="!notSupported">
+      <div class="mat-row" style="background:red;" *ngIf="notSupported">
-          <div class="mat-cell" style="text-align: center;"><b>NOT SUPPORTED OS. Please use the docker image available on the Container Station</b></div>
+          <div class="mat-cell" style="text-align: center;"><b>NOT SUPPORTED OS. Please use the docker image available on the Container Station (It's free)</b></div>
         </div>
     <div class="mat-row" *ngIf="connectedUsers">
       <div class="mat-cell">Users Online</div>

src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.html

@@ -1,148 +1,130 @@
-
+<settings-menu></settings-menu>
-<settings-menu></settings-menu>
+<div *ngIf="form" class="container">
-<div *ngIf="form">
+  <fieldset>
-    <fieldset>
+    <legend>Lidarr Settings</legend>
-        <legend>Lidarr Settings</legend>
+    <div style="float: right;">
-        <div style="float: right;">
+
-            <span style="vertical-align: top;">Advanced</span>
+      <mat-slide-toggle [(ngModel)]="advanced">Advanced</mat-slide-toggle>
-            <p-inputSwitch id="customInputSwitch" [(ngModel)]="advanced"></p-inputSwitch>
+    </div>
+    <div>
+      <form novalidate [formGroup]="form" class="row" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">
+        <div class="col">
+          <div>
+            <mat-slide-toggle formControlName="enabled">Enable</mat-slide-toggle>
+          </div>
+
+
+          <div>
+            <mat-form-field>
+              <input matInput placeholder="Hostname or IP" formControlName="ip">
+            </mat-form-field>
+          </div>
+          <div>
+            <mat-form-field>
+              <input matInput placeholder="Port" formControlName="port">
+            </mat-form-field>
+          </div>
+          <div>
+            <mat-form-field>
+              <input matInput placeholder="API Key" formControlName="apiKey">
+            </mat-form-field>
+          </div>
+
+
+          <div>
+            <mat-slide-toggle formControlName="ssl">
+              Enable SSL
+            </mat-slide-toggle>
+          </div>
+
+
+          <div>
+            <mat-form-field>
+              <input matInput placeholder="Base Url" formControlName="subDir">
+            </mat-form-field>
+          </div>
         </div>
-        <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">
+        <div class="col">
-            <div class="col-md-6">
+
-                <div class="form-group">
+          <div>
-                    <div class="checkbox">
+            <mat-form-field>
-                        <input type="checkbox" id="enable" formControlName="enabled" ng-checked="form.enabled">
+              <mat-label>Quality Profiles</mat-label>
-                        <label for="enable">Enable</label>
+              <mat-select formControlName="defaultQualityProfile" required>
-                    </div>
+                <mat-option *ngFor="let quality of qualities" [value]="quality.id">
-                </div>
+                  {{quality.name}}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <div><button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span
+                  *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button></div>
+          </div>
+
+          <div>
+            <mat-form-field>
+              <mat-label>Default Root Folder</mat-label>
+              <mat-select formControlName="defaultRootPath" required>
+                <mat-option *ngFor="let folder of rootFolders" [value]="folder.path">
+                  {{folder.path}}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <div><button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span
+                  *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button></div>
+          </div>
+
+          <div>
+            <mat-form-field>
+              <mat-label>Language Profile</mat-label>
+              <mat-select formControlName="languageProfileId" required>
+                <mat-option *ngFor="let folder of languageProfiles" [value]="folder.id">
+                  {{folder.name}}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+            <div><button mat-raised-button (click)="getLanguageProfiles(form)" color="primary">Load Languages <span
+                  *ngIf="languageRunning" class="fa fa-spinner fa-spin"></span></button></div>
+          </div>
+
+          <div>
+            <mat-form-field>
+              <mat-label>Metadata Profile</mat-label>
+              <mat-select formControlName="metadataProfileId" required>
+                <mat-option *ngFor="let folder of metadataProfiles" [value]="folder.id">
+                  {{folder.name}}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </div>
 
 
+          <div>
+            <mat-slide-toggle formControlName="albumFolder">
+              Album Folder
+            </mat-slide-toggle>
+          </div>
 
-                <div class="form-group">
+          <div *ngIf="advanced" style="color:#ff761b">
-                    <label for="Ip" class="control-label">Hostname or IP
+            <mat-slide-toggle formControlName="addOnly">
-                        
+              Do not search
-                        <i *ngIf="form.get('ip').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="IP/Hostname is required"></i>
+            </mat-slide-toggle>
-                    </label>
+          </div>
-
-                        <input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="localhost" formControlName="ip"  [ngClass]="{'form-error': form.get('ip').hasError('required')}">
-                </div>
-
-                <div class="form-group">
-                    <label for="portNumber" class="control-label">Port 
-                        <i *ngIf="form.get('port').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Port is required"></i></label>
-
-                        <input type="text" class="form-control form-control-custom " formControlName="port" id="portNumber" name="Port" placeholder="Port Number"  [ngClass]="{'form-error': form.get('port').hasError('required')}">
-
-                </div>
 
 
-                <div class="form-group">
+          <div class="form-group">
-                    <label for="ApiKey" class="control-label">API Key <i *ngIf="form.get('apiKey').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="API Key is required"></i></label>
+            <div>
-                    
+              <button mat-raised-button type="button" [disabled]="form.invalid" (click)="test(form)">Test
-                        <input type="text" class="form-control form-control-custom "  [ngClass]="{'form-error': form.get('apiKey').hasError('required')}" id="ApiKey" name="ApiKey" formControlName="apiKey">
+                Connectivity <span id="spinner"></span></button>
-
-                </div>
-                <div class="form-group">
-                    <div class="checkbox">
-
-                        <input type="checkbox" id="Ssl" name="Ssl" formControlName="ssl"><label for="Ssl">SSL</label>
-
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="SubDir" class="control-label">Base Url</label>
-                    <div>
-                        <input type="text" class="form-control form-control-custom" formControlName="subDir" id="SubDir" name="SubDir">
-                    </div>
-                </div>
             </div>
-            <div class="col-md-6">
+          </div>
-
-                <div class="form-group">
-                    <label for="select" class="control-label">Quality Profiles 
-                        <i *ngIf="form.get('defaultQualityProfile').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Quality Profile is required"></i>
-                    </label>
-                    <div id="profiles">
-                        <select formControlName="defaultQualityProfile" class="form-control form-control-custom  col-md-5 form-half" id="select"  [ngClass]="{'form-error': form.get('defaultQualityProfile').hasError('required')}">
-                            <option *ngFor="let quality of qualities" value="{{quality.id}}">{{quality.name}}</option>
-                        </select>
-                        <button (click)="getProfiles(form)" type="button" class="btn btn-primary-outline col-md-4 col-md-push-1">Get Quality Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"> </span></button>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label for="rootFolders" class="control-label">Default Root Folders 
-                        
-                        <i *ngIf="form.get('defaultRootPath').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Root Path is required"></i>
-                    </label>
-                    <div id="rootFolders">
-                        <select formControlName="defaultRootPath" class="form-control form-control-custom col-md-5 form-half"  [ngClass]="{'form-error': form.get('defaultRootPath').hasError('required')}">
-                            <option *ngFor="let folder of rootFolders" value="{{folder.path}}" >{{folder.path}}</option>
-                        </select>
-                        <button (click)="getRootFolders(form)" type="button" class="btn btn-primary-outline col-md-4 col-md-push-1">Get Root Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
-
-                    </div>                    
-                </div>
 
 
-                <div class="form-group">
+          <div class="form-group">
-                    <label for="languageProfileId" class="control-label">Language Profile
+            <div>
-                        
+              <button mat-raised-button type="submit" color="primary" [disabled]="form.invalid">Submit</button>
-                        <i *ngIf="form.get('languageProfileId').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Language Profile is required"></i>
-                    </label>
-                    <div id="languageProfileId">
-                        <select formControlName="languageProfileId" class="form-control form-control-custom col-md-5 form-half"  [ngClass]="{'form-error': form.get('languageProfileId').hasError('required')}">
-                            <option *ngFor="let folder of languageProfiles" value="{{folder.id}}" >{{folder.name}}</option>
-                        </select>
-                        <button (click)="getLanguageProfiles(form)" type="button" class="btn btn-primary-outline col-md-4 col-md-push-1">Get Languages <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
-
-                    </div>                    
-                </div>
-
-
-                <div class="form-group">
-                    <label for="metadataProfileId" class="control-label">Metadata Profile
-                         
-                        <i *ngIf="form.get('metadataProfileId').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Metadata Profile is required"></i>
-                    </label>
-                    <div id="metadataProfileId">
-                        
-                        <select formControlName="metadataProfileId" class="form-control form-control-custom col-md-5 form-half"  [ngClass]="{'form-error': form.get('metadataProfileId').hasError('required')}">
-                            <option *ngFor="let folder of metadataProfiles" value="{{folder.id}}" >{{folder.name}}</option>
-                        </select>
-                        <button (click)="getMetadataProfiles(form)" type="button" class="btn btn-primary-outline col-md-4  col-md-push-1">Get Metadata <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
-
-                    </div>                     
-                    
-                </div>
-
-                <div class="form-group">
-                    <div class="checkbox">
-                        <input type="checkbox" id="albumFolder" name="albumFolder" formControlName="albumFolder">
-                        <label for="albumFolder">Album Folder</label>
-                    </div>
-                </div>
-
-                <div class="form-group" *ngIf="advanced" style="color:#ff761b">
-                    <div class="checkbox">
-                        <input type="checkbox" id="addOnly" formControlName="addOnly">
-                        <label for="addOnly">Do not search</label>
-                    </div>
-                </div>
-                
-                <div class="form-group">
-                    <div>
-                        <button type="button" [disabled]="form.invalid" (click)="test(form)" class="btn btn-primary-outline">Test Connectivity <span id="spinner"></span></button>
-                    </div>
-                </div>
-
-
-                <div class="form-group">
-                    <div>
-                        <button type="submit" [disabled]="form.invalid" class="btn btn-primary-outline ">Submit</button>
-                    </div>
-                </div>
             </div>
-        </form>
+          </div>
-    </fieldset>
+        </div>
+      </form>
+    </div>
+  </fieldset>
 </div>

src/Ombi/ClientApp/src/app/shared/shared.module.ts

@@ -13,7 +13,7 @@ import {
   MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule, MatTooltipModule, MatSelectModule, MatTableModule, MatPaginatorModule, MatSortModule, 
   MatTreeModule, MatStepperModule, MatSnackBarModule} from '@angular/material';
   import {  MatCardModule, MatInputModule, MatTabsModule, MatAutocompleteModule, MatCheckboxModule, MatExpansionModule, MatDialogModule, MatProgressSpinnerModule,
-    MatChipsModule } from "@angular/material";
+    MatChipsModule, MatSlideToggleModule } from "@angular/material";
 import { EpisodeRequestComponent } from "./episode-request/episode-request.component";
 
 @NgModule({
@@ -51,6 +51,7 @@ import { EpisodeRequestComponent } from "./episode-request/episode-request.compo
     MatTreeModule,
     MatStepperModule,
     MatSnackBarModule,
+    MatSlideToggleModule,
   ],
   entryComponents: [
     EpisodeRequestComponent
@@ -88,6 +89,7 @@ import { EpisodeRequestComponent } from "./episode-request/episode-request.compo
       MatPaginatorModule,
       MatSortModule,
       MatStepperModule,
+      MatSlideToggleModule,
     ],
 })
 export class SharedModule {}