Improvements to the card info popup

src/Ombi/ClientApp/src/app/app.component.ts

@@ -37,8 +37,7 @@ export class AppComponent implements OnInit {
         private readonly identityService: IdentityService,
         private readonly platformLocation: PlatformLocation) {
 
-        const base = this.platformLocation.getBaseHrefFromDOM();
-        debugger;
+        // const base = this.platformLocation.getBaseHrefFromDOM();
         // if (base.length > 1) {
         //     __webpack_public_path__ = base + "/dist/";
         // }

src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.html

@@ -1,4 +1,4 @@
-<div mat-dialog-content class="background">
+<div *ngIf="result" mat-dialog-content class="background">
     <div class="row">
         <div class="col-4">
             <img id="cardImage" src="{{data.posterPath}}" class="poster" alt="{{data.title}}">
@@ -13,22 +13,32 @@
             </div>
             <div class="row top-spacing details">
                 <div class="col-6">
-                    <strong>Availability:</strong> Unavailable
+                    <strong>Availability: </strong>      <small>                 <ng-template [ngIf]="data.available"><span class="label label-success" id="availableLabel"
+                        [translate]="'Common.Available'"></span></ng-template>
+                        <ng-template [ngIf]="!data.available"><span class="label label-success" id="availableLabel"
+                            [translate]="'Common.NotAvailable'"></span></ng-template></small>
                 </div>
                 <div class="col-6">
-                    <strong>Studio: </strong> Studio1
+                    <strong>Studio: </strong> <small>{{result.productionCompanies[0].name}}</small>
                 </div>
                 <div class="col-6">
-                    <strong>Request Status: </strong> Studio1
+                    <strong>Request Status: </strong> <small>
+                    <ng-template [ngIf]="data.approved && !data.available"><span class="label label-info"
+                            id="processingRequestLabel" [translate]="'Common.ProcessingRequest'"></span></ng-template>
+                    <ng-template [ngIf]="data.requested && !data.approved && !data.available"><span class="label label-warning"
+                            id="pendingApprovalLabel" [translate]="'Common.PendingApproval'"></span></ng-template>
+                    <ng-template [ngIf]="!data.requested && !data.available && !data.approved"><span
+                            class="label label-danger" id="notRequestedLabel" [translate]="'Common.NotRequested'"></span></ng-template>
+                        </small>
                 </div>
                 <div class="col-6">
-                    <strong>Director: </strong> Studio1
+                    <strong>Director: </strong> <small>{{result.credits.crew[0].name}}</small>
                 </div>
                 <div class="col-6">
-                    <strong>In Cinemas: </strong> Studio1
+                    <strong>In Cinemas: </strong> <small>{{result.releaseDate}}</small>
                 </div>
                 <div class="col-6">
-                    <strong>Writer: </strong> Studio1
+                    <strong>Writer: </strong> <small>{{result.credits.crew[1].name}}</small>
                 </div>
             </div>
 

src/Ombi/ClientApp/src/app/discover/card/discover-card-details.component.ts

@@ -1,18 +1,31 @@
-import { Component, Inject } from "@angular/core";
+import { Component, Inject, OnInit } from "@angular/core";
 import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material";
 import { IDiscoverCardResult } from "../interfaces";
+import { SearchV2Service } from "../../services";
+import { dataURLToBlob } from "blob-util";
+import { RequestType } from "../../interfaces";
+import { ISearchMovieResultV2 } from "../../interfaces/ISearchMovieResultV2";
 
 @Component({
     selector: "discover-card-details",
     templateUrl: "./discover-card-details.component.html",
     styleUrls: ["./discover-card-details.component.scss"],
 })
-export class DiscoverCardDetailsComponent {
+export class DiscoverCardDetailsComponent implements OnInit {
+
+    public result: ISearchMovieResultV2;
+
     constructor(
         public dialogRef: MatDialogRef<DiscoverCardDetailsComponent>,
-        @Inject(MAT_DIALOG_DATA) public data: IDiscoverCardResult) { }
-    
-      onNoClick(): void {
+        @Inject(MAT_DIALOG_DATA) public data: IDiscoverCardResult, private searchService: SearchV2Service) { }
+        
+        public async ngOnInit() {
+            if (this.data.type === RequestType.movie) {
+                this.result = await this.searchService.getFullMovieDetailsPromise(this.data.id);
+            }
+        }
+
+      public onNoClick(): void {
         this.dialogRef.close();
       }
 }

src/Ombi/ClientApp/src/app/discover/card/discover-card.component.html

@@ -7,7 +7,9 @@
 
             <h6 *ngIf="result.title.length <= 13">{{result.title}}</h6>
             <h6 *ngIf="result.title.length > 13" matTooltip="{{result.title}}">{{result.title | truncate:13}}</h6>
-            <small>{{result.overview | truncate: 50}}</small>
+            <div class="fade-text">
+            <small class="overview-text">{{result.overview | truncate: 50}}</small>
+        </div>
         </mat-card-content>
         <mat-card-actions class="expand">
             <button mat-icon-button (click)="openDetails(result);">

src/Ombi/ClientApp/src/app/discover/card/discover-card.component.scss

@@ -47,4 +47,4 @@ $border-width: 3px;
     background-color: $ombi-primary;
     color: white;
     border-radius: 2%
-}
+}

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

@@ -8,6 +8,7 @@ import { IMultiSearchResult, ISearchMovieResult, ISearchTvResult } from "../inte
 import { ServiceHelpers } from "./service.helpers";
 
 import { ISearchMovieResultV2 } from "../interfaces/ISearchMovieResultV2";
+import { promise } from "selenium-webdriver";
 
 @Injectable()
 export class SearchV2Service extends ServiceHelpers {
@@ -21,6 +22,9 @@ export class SearchV2Service extends ServiceHelpers {
     public getFullMovieDetails(theMovieDbId: number): Observable<ISearchMovieResultV2> {
         return this.http.get<ISearchMovieResultV2>(`${this.url}/Movie/${theMovieDbId}`);
     }
+    public getFullMovieDetailsPromise(theMovieDbId: number): Promise<ISearchMovieResultV2> {
+        return this.http.get<ISearchMovieResultV2>(`${this.url}/Movie/${theMovieDbId}`).toPromise();
+    }
     
     public similarMovies(theMovieDbId: number, langCode: string): Observable<ISearchMovieResult[]> {
         return this.http.post<ISearchMovieResult[]>(`${this.url}/Movie/similar`, {theMovieDbId, languageCode: langCode});