You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Ombi/src/Ombi/ClientApp/src/app/requests/music/musicrequests.component.html

291 lines
12 KiB

<div class="form-group">
<div class="input-group">
<input
type="text"
id="search"
class="form-control form-control-custom searchwidth"
[placeholder]="'Search.Search' | translate"
(keyup)="search($event)"
/>
<span class="input-group-btn">
<button id="filterBtn" class="btn btn-sm btn-info-outline" (click)="filterDisplay = !filterDisplay">
<i class="fas fa-filter"></i> {{ 'Requests.Filter' | translate }}
</button>
<button
class="btn btn-sm btn-primary-outline dropdown-toggle"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
>
<i class="fas fa-sort"></i> {{ 'Requests.Sort' | translate }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li>
<a (click)="setOrder(OrderType.RequestedDateAsc, $event)">{{ 'Requests.SortRequestDateAsc' | translate }} </a>
<a class="active" (click)="setOrder(OrderType.RequestedDateDesc, $event)">{{ 'Requests.SortRequestDateDesc' | translate }} </a>
<a (click)="setOrder(OrderType.TitleAsc, $event)">{{ 'Requests.SortTitleAsc' | translate }} </a>
<a (click)="setOrder(OrderType.TitleDesc, $event)">{{ 'Requests.SortTitleDesc' | translate }} </a>
<a (click)="setOrder(OrderType.StatusAsc, $event)">{{ 'Requests.SortStatusAsc' | translate }} </a>
<a (click)="setOrder(OrderType.StatusDesc, $event)">{{ 'Requests.SortStatusDesc' | translate }} </a>
</li>
</ul>
</span>
</div>
</div>
<br />
<div class="col-md-12">
<div *ngFor="let request of albumRequests" class="col-md-4">
<div class="row">
<div class="album-bg backdrop" [style.background-image]="request.background"></div>
<div class="album-tint" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%)"></div>
<div class="col-sm-12 small-padding">
<img *ngIf="request.disk" class="img-responsive poster album-cover" src="{{ request.disk }}" alt="poster" />
</div>
<div class="col-sm-12 small-padding">
<div>
<h4>
<a href="" target="_blank">
{{ request.title | truncate: 36 }}
</a>
</h4>
<h5>
<a href="">
{{ request.artistName }}
</a>
</h5>
</div>
<div class="request-info">
<div class="request-by">
<span>{{ 'Requests.RequestedBy' | translate }} </span>
<span *ngIf="request.requestedByAlias">{{ request.requestedByAlias }}</span>
<span *ngIf="!request.requestedByAlias">
<span *ngIf="!isAdmin">{{ request.requestedUser.userName }}</span>
<span *ngIf="isAdmin && request.requestedUser.alias">{{ request.requestedUser.alias }}</span>
<span *ngIf="isAdmin && !request.requestedUser.alias">{{ request.requestedUser.userName }}</span>
</span>
</div>
<div class="requested-status">
<span>{{ 'Requests.RequestStatus' | translate }} </span>
<span *ngIf="request.available" class="label label-success" id="availableLabel" [translate]="'Common.Available'"></span>
<span
*ngIf="request.approved && !request.available"
id="processingRequestLabel"
class="label label-info"
[translate]="'Common.ProcessingRequest'"
></span>
<span *ngIf="request.denied" class="label label-danger" id="requestDeclinedLabel" [translate]="'Common.RequestDenied'"></span>
<span *ngIf="request.deniedReason" title="{{ request.deniedReason }}">
<i class="fas fa-info-circle"></i>
</span>
<span
*ngIf="!request.approved && !request.availble && !request.denied"
id="pendingApprovalLabel"
class="label label-warning"
[translate]="'Common.PendingApproval'"
></span>
</div>
<div *ngIf="request.denied" id="requestDenied">
{{ 'Requests.Denied' | translate }}
<i style="color: red" class="fas fa-check" pTooltip="{{ request.deniedReason }}"></i>
</div>
<div id="releaseDate">{{ 'Requests.ReleaseDate' | translate: { date: request.releaseDate | ombiDate: 'PP' } }}</div>
<div id="requestedDate">{{ 'Requests.RequestDate' | translate }} {{ request.requestedDate | ombiDate: 'PP' }}</div>
<br />
</div>
<!-- <div *ngIf="isAdmin">
<div *ngIf="request.qualityOverrideTitle" class="quality-override">{{ 'Requests.QualityOverride' | translate }}
<span>{{request.qualityOverrideTitle}} </span>
</div>
<div *ngIf="request.rootPathOverrideTitle" class="root-override">{{ 'Requests.RootFolderOverride' | translate }}
<span>{{request.rootPathOverrideTitle}} </span>
</div>
</div> -->
</div>
<div class="col-sm-12 small-padding">
<!-- <div class="row">
<div class="col-md-2 col-md-push-6">
<a *ngIf="request.showSubscribe && !request.subscribed" style="color:white" (click)="subscribe(request)" pTooltip="Subscribe for notifications">
<i class="fas fa-rss"></i>
</a>
<a *ngIf="request.showSubscribe && request.subscribed" style="color:red" (click)="unSubscribe(request)" pTooltip="Unsubscribe notification">
<i class="fas fa-rss"></i>
</a>
</div>
</div> -->
<div *ngIf="isAdmin">
<div *ngIf="!request.approved" id="approveBtn">
<form class="col-md-6">
<button (click)="approve(request)" style="text-align: right" class="btn btn-sm btn-success-outline approve" type="submit">
<i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }}
</button>
</form>
<!--Radarr Root Folder-->
<!-- <div *ngIf="radarrRootFolders" class="btn-group btn-split" id="rootFolderBtn">
<button type="button" class="btn btn-sm btn-warning-outline">
<i class="fas fa-plus"></i> {{ 'Requests.ChangeRootFolder' | translate }}
</button>
<button type="button" class="btn btn-warning-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li *ngFor="let folder of radarrRootFolders">
<a href="#" (click)="selectRootFolder(request, folder, $event)">{{folder.path}}</a>
</li>
</ul>
</div> -->
<!--Radarr Quality Profiles -->
<!-- <div *ngIf="radarrProfiles" class="btn-group btn-split" id="changeQualityBtn">
<button type="button" class="btn btn-sm btn-warning-outline">
<i class="fas fa-plus"></i> {{ 'Requests.ChangeQualityProfile' | translate }}
</button>
<button type="button" class="btn btn-warning-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li *ngFor="let profile of radarrProfiles">
<a href="#" (click)="selectQualityProfile(request, profile, $event)">{{profile.name}}</a>
</li>
</ul>
</div> -->
<div *ngIf="!request.denied" id="denyBtn" class="col-md-6">
<button type="button" (click)="deny(request)" class="btn btn-sm btn-danger-outline deny">
<i class="fas fa-times"></i> {{ 'Requests.Deny' | translate }}
</button>
</div>
</div>
<form id="markBtnGroup">
<button
id="unavailableBtn"
*ngIf="request.available"
(click)="changeAvailability(request, false)"
style="text-align: right"
value="false"
class="btn btn-sm btn-info-outline change"
>
<i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable' | translate }}
</button>
<button
id="availableBtn"
*ngIf="!request.available"
(click)="changeAvailability(request, true)"
style="text-align: right"
value="true"
class="btn btn-sm btn-success-outline change"
>
<i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
</button>
</form>
</div>
<div *ngIf="isAdmin || isRequestUser(request)">
<form id="removeBtn">
<button (click)="removeRequest(request)" style="text-align: right" class="btn btn-sm btn-danger-outline delete">
<i class="fas fa-minus"></i> {{ 'Requests.Remove' | translate }}
</button>
</form>
</div>
<div class="dropdown" *ngIf="issueCategories && issuesEnabled" id="issuesBtn">
<button
class="btn btn-sm btn-primary-outline dropdown-toggle"
type="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true"
>
<i class="fas fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li *ngFor="let cat of issueCategories">
<a [routerLink]="" (click)="reportIssue(cat, request)">{{ cat.value }}</a>
</li>
</ul>
</div>
</div>
</div>
<br />
<br />
</div>
<p-paginator [rows]="10" [totalRecords]="totalAlbums" (onPageChange)="paginate($event)"></p-paginator>
</div>
<issue-report
[movie]="true"
[visible]="issuesBarVisible"
(visibleChange)="issuesBarVisible = $event"
[title]="issueRequest?.title"
[issueCategory]="issueCategorySelected"
[id]="issueRequest?.id"
[providerId]="issueProviderId"
></issue-report>
<p-sidebar [(visible)]="filterDisplay" styleClass="ui-sidebar-md side-back side-small">
<h3>{{ 'Requests.Filter' | translate }}</h3>
<hr />
<div>
<h4>{{ 'Filter.FilterHeaderAvailability' | translate }}</h4>
<div class="form-group">
<div class="radio">
<input type="radio" id="Available" name="Availability" (click)="filterAvailability(filterType.Available, $event)" />
<label for="Available">{{ 'Common.Available' | translate }}</label>
</div>
</div>
<div class="form-group">
<div class="radio">
<input type="radio" id="notAvailable" name="Availability" (click)="filterAvailability(filterType.NotAvailable, $event)" />
<label for="notAvailable">{{ 'Common.NotAvailable' | translate }}</label>
</div>
</div>
</div>
<div>
<h4>{{ 'Filter.FilterHeaderRequestStatus' | translate }}</h4>
<div class="form-group">
<div class="radio">
<input type="radio" id="approved" name="Status" (click)="filterStatus(filterType.Approved, $event)" />
<label for="approved">{{ 'Filter.Approved' | translate }}</label>
</div>
</div>
<div class="form-group">
<div class="radio">
<input type="radio" id="Processing" name="Status" (click)="filterStatus(filterType.Processing, $event)" />
<label for="Processing">{{ 'Common.ProcessingRequest' | translate }}</label>
</div>
</div>
<div class="form-group">
<div class="radio">
<input type="radio" id="pendingApproval" name="Status" (click)="filterStatus(filterType.PendingApproval, $event)" />
<label for="pendingApproval">{{ 'Filter.PendingApproval' | translate }}</label>
</div>
</div>
</div>
<button class="btn btn-sm btn-primary-outline" (click)="clearFilter($event)">
<i class="fas fa-filter"></i> {{ 'Filter.ClearFilter' | translate }}
</button>
</p-sidebar>
<p-dialog *ngIf="requestToDeny" header="Deny Request '{{ requestToDeny.title }}''" [(visible)]="denyDisplay" [draggable]="false">
<span>Please enter a rejection reason, the user will be notified of this:</span>
<textarea [(ngModel)]="rejectionReason" class="form-control-custom form-control"></textarea>
<p-footer>
<button type="button" (click)="denyRequest()" label="Reject" class="btn btn-success">Deny</button>
<button type="button" (click)="denyDisplay = false" label="Close" class="btn btn-danger">Close</button>
</p-footer>
</p-dialog>