card !wip

This commit is contained in:
tidusjar 2019-02-21 23:01:07 +00:00
commit 8a7cd1d798
3 changed files with 74 additions and 25 deletions

View file

@ -16,10 +16,12 @@
</div> </div>
<div class="row top-spacing details"> <div class="row top-spacing details">
<div class="col-6"> <div class="col-6">
<strong>Availability: </strong> <small> <ng-template [ngIf]="data.available"><span class="label label-success" id="availableLabel" <strong>Availability: </strong> <small>
<ng-template [ngIf]="data.available"><span class="label label-success" id="availableLabel"
[translate]="'Common.Available'"></span></ng-template> [translate]="'Common.Available'"></span></ng-template>
<ng-template [ngIf]="!data.available"><span class="label label-success" id="availableLabel" <ng-template [ngIf]="!data.available"><span class="label label-success" id="availableLabel"
[translate]="'Common.NotAvailable'"></span></ng-template></small> [translate]="'Common.NotAvailable'"></span></ng-template>
</small>
</div> </div>
<div class="col-6"> <div class="col-6">
<strong *ngIf="movie">Studio: </strong> <strong *ngIf="movie">Studio: </strong>
@ -30,11 +32,14 @@
<div class="col-6" *ngIf="!data.available"> <div class="col-6" *ngIf="!data.available">
<strong>Request Status: </strong> <small> <strong>Request Status: </strong> <small>
<ng-template [ngIf]="data.approved && !data.available"><span class="label label-info" <ng-template [ngIf]="data.approved && !data.available"><span class="label label-info"
id="processingRequestLabel" [translate]="'Common.ProcessingRequest'"></span></ng-template> id="processingRequestLabel" [translate]="'Common.ProcessingRequest'"></span>
<ng-template [ngIf]="data.requested && !data.approved && !data.available"><span class="label label-warning" </ng-template>
id="pendingApprovalLabel" [translate]="'Common.PendingApproval'"></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 <ng-template [ngIf]="!data.requested && !data.available && !data.approved"><span
class="label label-danger" id="notRequestedLabel" [translate]="'Common.NotRequested'"></span></ng-template> class="label label-danger" id="notRequestedLabel"
[translate]="'Common.NotRequested'"></span></ng-template>
</small> </small>
</div> </div>
<div class="col-6"> <div class="col-6">
@ -70,11 +75,50 @@
</div> </div>
<div mat-dialog-actions> <div mat-dialog-actions>
<div class="action-buttons-right"> <div class="action-buttons-right">
<div class="col-md-12"> <div class="col-md-12" *ngIf="movie">
<button mat-raised-button (click)="onNoClick()" class="request-btn"> <button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available"> {{
<mat-icon>add</mat-icon> 'Common.Available' | translate }}</button>
Request <span *ngIf="!movie.available">
</button> <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
<ng-template #requestedBtn>
<button mat-raised-button class="btn-spacing btn-orange" [disabled]><i class="fa fa-check"></i>
{{ 'Common.Requested' | translate }}</button>
</ng-template>
<ng-template #notRequestedBtn>
<button mat-raised-button class="btn-spacing btn-orange" (click)="request()">
<i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
*ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
<i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
'Common.Request' | translate }}</button>
</ng-template>
</span>
<span *ngIf="movie.available">
<a *ngIf="movie.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
href="{{movie.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
translate}}</a>
<a *ngIf="movie.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{movie.embyUrl}}"
target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
translate}}</a>
</span>
</div>
<div class="col-md-12" *ngIf="tv">
<button mat-raised-button class="btn-green btn-spacing" *ngIf="tv.available"> {{
'Common.Available' | translate }}</button>
<button mat-raised-button class="btn-orange btn-spacing" *ngIf="tv.partlyAvailable"> {{
'Common.PartlyAvailable' | translate }}</button>
<span *ngIf="tv.available">
<a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
href="{{tv.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
translate}}</a>
<a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}"
target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
translate}}</a>
</span>
<button mat-raised-button class="btn-green btn-spacing"> {{
'Common.ViewDetails' | translate }}</button>
</div> </div>
</div> </div>

View file

@ -29,3 +29,7 @@ h3 strong {
width: 100%; width: 100%;
text-align: right; text-align: right;
} }
.btn-spacing {
margin-right:1%;
}

View file

@ -24,6 +24,7 @@
"Denied":"Denied", "Denied":"Denied",
"Approve":"Approve", "Approve":"Approve",
"PartlyAvailable": "Partly Available", "PartlyAvailable": "Partly Available",
"ViewDetails": "View Details",
"Errors": { "Errors": {
"Validation": "Please check your entered values" "Validation": "Please check your entered values"
} }