Work on showing the requests for #32

PlexRequests.UI/Content/requests.js

@@ -6,11 +6,12 @@
 });
 
 var searchSource = $("#search-template").html();
+var albumSource = $("#album-template").html();
 var searchTemplate = Handlebars.compile(searchSource);
+var albumTemplate = Handlebars.compile(albumSource);
 var movieTimer = 0;
 var tvimer = 0;
-var noResultsHtml = "<div class='no-search-results'>" +
+
-    "<i class='fa fa-film no-search-results-icon'></i><div class='no-search-results-text'>Sorry, there are no {0} requests yet!</div></div>";
 var mixItUpDefault = {
     animation: { enable: true },
     load: {
@@ -86,7 +87,7 @@ $('#approveMovies').click(function (e) {
             generateNotify("Something went wrong!", "danger");
         },
         complete: function (e) {
-            finishLoading(buttonId, "success", origHtml)
+            finishLoading(buttonId, "success", origHtml);
         }
     });
 });
@@ -116,7 +117,7 @@ $('#approveTVShows').click(function (e) {
             generateNotify("Something went wrong!", "danger");
         },
         complete: function (e) {
-            finishLoading(buttonId, "success", origHtml)
+            finishLoading(buttonId, "success", origHtml);
         }
     });
 });
@@ -384,6 +385,8 @@ function mixItUpConfig(activeState) {
 function initLoad() {
     movieLoad();
     tvLoad();
+    albumLoad();
+    //noResultsMusic
 }
 
 function movieLoad() {
@@ -432,6 +435,29 @@ function tvLoad() {
     });
 };
 
+function albumLoad() {
+    var $albumL = $('#MusicList');
+    if ($albumL.mixItUp('isLoaded')) {
+        activeState = $albumL.mixItUp('getState');
+        $albumL.mixItUp('destroy');
+    }
+    $albumL.html("");
+
+    $.ajax("/requests/albums/").success(function (results) {
+        if (results.length > 0) {
+            results.forEach(function (result) {
+                var context = buildRequestContext(result, "album");
+                var html = searchTemplate(context);
+                $albumL.append(html);
+            });
+        }
+        else {
+            $albumL.html(noResultsMusic.format("albums"));
+        }
+        $albumL.mixItUp(mixItUpConfig());
+    });
+};
+
 // Builds the request context.
 function buildRequestContext(result, type) {
     var context = {
@@ -455,8 +481,11 @@ function buildRequestContext(result, type) {
         requestId: result.id,
         adminNote: result.adminNotes,
         imdb: result.imdbId,
-        seriesRequested: result.tvSeriesRequestType
+        seriesRequested: result.tvSeriesRequestType,
+        coverArtUrl: result.coverArtUrl,
+
     };
 
     return context;
 }
+

PlexRequests.UI/Content/search.js

@@ -9,10 +9,7 @@ var searchSource = $("#search-template").html();
 var musicSource = $("#music-template").html();
 var searchTemplate = Handlebars.compile(searchSource);
 var musicTemplate = Handlebars.compile(musicSource);
-var noResultsHtml = "<div class='no-search-results'>" +
+
-    "<i class='fa fa-film no-search-results-icon'></i><div class='no-search-results-text'>Sorry, we didn't find any results!</div></div>";
-var noResultsMusic = "<div class='no-search-results'>" +
-    "<i class='fa fa-headphones no-search-results-icon'></i><div class='no-search-results-text'>Sorry, we didn't find any results!</div></div>";
 var searchTimer = 0;
 
 // Type in movie search

PlexRequests.UI/Content/site.js

@@ -45,3 +45,8 @@ function finishLoading(elementId, originalCss, html) {
     $('#' + elementId).addClass("btn-" + originalCss + "-outline");
     $('#' + elementId).html(html);
 }
+
+var noResultsHtml = "<div class='no-search-results'>" +
+    "<i class='fa fa-film no-search-results-icon'></i><div class='no-search-results-text'>Sorry, we didn't find any results!</div></div>";
+var noResultsMusic = "<div class='no-search-results'>" +
+    "<i class='fa fa-headphones no-search-results-icon'></i><div class='no-search-results-text'>Sorry, we didn't find any results!</div></div>";

PlexRequests.UI/Models/RequestViewModel.cs

@@ -51,5 +51,6 @@ namespace PlexRequests.UI.Models
         public string OtherMessage { get; set; }
         public string AdminNotes { get; set; }
         public string TvSeriesRequestType { get; set; }
+        public string MusicBrainzId { get; set; }
     }
 }

PlexRequests.UI/Modules/RequestsModule.cs

@@ -56,6 +56,7 @@ namespace PlexRequests.UI.Modules
             Get["/"] = _ => LoadRequests();
             Get["/movies"] = _ => GetMovies();
             Get["/tvshows"] = _ => GetTvShows();
+            Get["/albums"] = _ => GetAlbumRequests();
             Post["/delete"] = _ => DeleteRequest((int)Request.Form.id);
             Post["/reportissue"] = _ => ReportIssue((int)Request.Form.requestId, (IssueState)(int)Request.Form.issue, null);
             Post["/reportissuecomment"] = _ => ReportIssue((int)Request.Form.requestId, IssueState.Other, (string)Request.Form.commentArea);
@@ -156,6 +157,47 @@ namespace PlexRequests.UI.Modules
             return Response.AsJson(viewModel);
         }
 
+        private Response GetAlbumRequests()
+        {
+            var settings = PrSettings.GetSettings();
+            var isAdmin = Context.CurrentUser.IsAuthenticated();
+            var dbAlbum = Service.GetAll().Where(x => x.Type == RequestType.Album);
+            if (settings.UsersCanViewOnlyOwnRequests && !isAdmin)
+            {
+                dbAlbum = dbAlbum.Where(x => x.UserHasRequested(Username));
+            }
+
+            var viewModel = dbAlbum.Select(album => {
+                return new RequestViewModel
+                {
+                    ProviderId = album.ProviderId,
+                    Type = album.Type,
+                    Status = album.Status,
+                    ImdbId = album.ImdbId,
+                    Id = album.Id,
+                    PosterPath = album.PosterPath,
+                    ReleaseDate = album.ReleaseDate.Humanize(),
+                    ReleaseDateTicks = album.ReleaseDate.Ticks,
+                    RequestedDate = DateTimeHelper.OffsetUTCDateTime(album.RequestedDate, DateTimeOffset).Humanize(),
+                    RequestedDateTicks = DateTimeHelper.OffsetUTCDateTime(album.RequestedDate, DateTimeOffset).Ticks,
+                    Approved = album.Available || album.Approved,
+                    Title = album.Title,
+                    Overview = album.Overview,
+                    RequestedUsers = isAdmin ? album.AllUsers.ToArray() : new string[] { },
+                    ReleaseYear = album.ReleaseDate.Year.ToString(),
+                    Available = album.Available,
+                    Admin = isAdmin,
+                    Issues = album.Issues.Humanize(LetterCasing.Title),
+                    OtherMessage = album.OtherMessage,
+                    AdminNotes = album.AdminNote,
+                    TvSeriesRequestType = album.SeasonsRequested,
+                    MusicBrainzId = album.MusicBrainzId
+                };
+            }).ToList();
+
+            return Response.AsJson(viewModel);
+        }
+
         private Response DeleteRequest(int requestid)
         {
             if (!Context.CurrentUser.IsAuthenticated())

PlexRequests.UI/Modules/SearchModule.cs

@@ -512,7 +512,8 @@ namespace PlexRequests.UI.Modules
                 Type = RequestType.Album,
                 ProviderId = 0,
                 RequestedUsers = new List<string>() { Username },
-                Status = albumInfo.status
+                Status = albumInfo.status,
+                Issues = IssueState.None
             };
 
 

PlexRequests.UI/Views/Requests/Index.cshtml

@@ -16,7 +16,7 @@
         }
         @if (Model.SearchForMusic)
         {
-            <li role="presentation"><a href="#MusicTab" aria-controls="profile" role="tab" data-toggle="tab">Music</a></li>
+            <li role="presentation"><a href="#MusicTab" aria-controls="profile" role="tab" data-toggle="tab">Albums</a></li>
         }
     </ul>
     <br />
@@ -233,6 +233,119 @@
     </div>
 </script>
 
+<script id="album-template" type="text/x-handlebars-template">
+    <div id="{{requestId}}Template" class="mix available-{{available}} approved-{{approved}}" data-requestorder="{{requestedDateTicks}}" data-releaseorder="{{releaseDateTicks}}">
+        <div class="row">
+            <div class="col-sm-2">
+                {{#if coverArtUrl}}
+                <img class="img-responsive" src="{{coverArtUrl}}" width="150" alt="poster">
+                {{/if}}
+            </div>
+            <div class="col-sm-5 ">
+                <div>
+                    <a href="https://musicbrainz.org/release/{{id}}" target="_blank">
+                        <h4>
+                            {{artist}} - {{title}}
+                            {{#if year}}
+                            ({{year}})
+                            {{/if}}
+                        </h4>
+                    </a>
+                    <span class="label label-success">{{status}}</span>
+                </div>
+                <br />
+                <div>Release Date: {{releaseDate}}</div>
+                <div>
+                    Approved:
+                    {{#if_eq approved false}}
+                    <i id="{{requestId}}notapproved" class="fa fa-times"></i>
+                    {{/if_eq}}
+                    {{#if_eq approved true}}
+                    <i class="fa fa-check"></i>
+                    {{/if_eq}}
+                </div>
+                <div>
+                    Available
+                    {{#if_eq available false}}
+                    <i id="availableIcon{{requestId}}" class="fa fa-times"></i>
+                    {{/if_eq}}
+                    {{#if_eq available true}}
+                    <i id="availableIcon{{requestId}}" class="fa fa-check"></i>
+                    {{/if_eq}}
+                </div>
+                {{#if requestedUsers}}
+                <div>Requested By: {{requestedUsers}}</div>
+                {{/if}}
+                <div>Requested Date: {{requestedDate}}</div>
+                <div id="issueArea{{requestId}}">
+                    {{#if otherMessage}}
+                    <div>Message: {{otherMessage}}</div>
+                    {{else}}
+                    <div>Issue: {{issues}}</div>
+                    {{/if}}
+                </div>
+                <div id="adminNotesArea{{requestId}}">
+                    {{#if adminNote}}
+                    <div>Note from Admin: {{adminNote}}</div>
+                    {{/if}}
+                </div>
+            </div>
+            <div class="col-sm-2 col-sm-push-3">
+                {{#if_eq admin true}}
+                {{#if_eq approved false}}
+                <form method="POST" action="/approval/approve" id="approve{{requestId}}">
+                    <input name="requestId" type="text" value="{{requestId}}" hidden="hidden" />
+                    <button id="{{requestId}}" custom-button="{{requestId}}" style="text-align: right" class="btn btn-sm btn-success-outline approve" type="submit"><i class="fa fa-plus"></i> Approve</button>
+                </form>
+                {{/if_eq}}
+                <form method="POST" action="/requests/delete" id="delete{{requestId}}">
+                    <input name="Id" type="text" value="{{requestId}}" hidden="hidden" />
+                    <button id="{{requestId}}" style="text-align: right" class="btn btn-sm btn-danger-outline delete" type="submit"><i class="fa fa-minus"></i> Remove</button>
+                </form>
+
+                <form method="POST" action="/requests/clearissues" id="clear{{requestId}}">
+                    <input name="Id" type="text" value="{{requestId}}" hidden="hidden" />
+                    <button id="{{requestId}}" style="text-align: right" class="btn btn-sm btn-info-outline clear" type="submit"><i class="fa fa-check"></i> Clear Issues</button>
+                </form>
+
+                <form method="POST" action="/requests/changeavailability" id="change{{requestId}}">
+                    <input name="Id" type="text" value="{{requestId}}" hidden="hidden" />
+                    {{#if_eq available true}}
+                    <button id="{{requestId}}" custom-availibility="{{requestId}}" style="text-align: right" value="false" class="btn btn-sm btn-info-outline change" type="submit"><i class="fa fa-minus"></i> Mark Unavailable</button>
+                    {{else}}
+                    <button id="{{requestId}}" custom-availibility="{{requestId}}" style="text-align: right" value="true" class="btn btn-sm btn-success-outline change" type="submit"><i class="fa fa-plus"></i> Mark Available</button>
+                    {{/if_eq}}
+                </form>
+
+                {{/if_eq}}
+
+                <form method="POST" action="/requests/reportissue/" id="report{{requestId}}">
+                    <input name="requestId" type="text" value="{{requestId}}" hidden="hidden" />
+                    <div class="dropdown">
+                        <button id="{{requestId}}" class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                            <i class="fa fa-plus"></i> Report Issue
+                            <span class="caret"></span>
+                        </button>
+                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+                            <li><a id="{{requestId}}" issue-select="0" class="dropdownIssue" href="#">Wrong Audio</a></li>
+                            <li><a id="{{requestId}}" issue-select="1" class="dropdownIssue" href="#">No Subtitles</a></li>
+                            <li><a id="{{requestId}}" issue-select="2" class="dropdownIssue" href="#">Wrong Content</a></li>
+                            <li><a id="{{requestId}}" issue-select="3" class="dropdownIssue" href="#">Playback Issues</a></li>
+                            <li><a id="{{requestId}}" issue-select="4" class="dropdownIssue" data-identifier="{{requestId}}" href="#" data-toggle="modal" data-target="#myModal">Other</a></li>
+
+                            {{#if_eq admin true}}
+                            <li><a id="{{requestId}}" issue-select="4" class="note" data-identifier="{{requestId}}" href="#" data-toggle="modal" data-target="#noteModal">Add Note</a></li>
+                            {{/if_eq}}
+                        </ul>
+                    </div>
+                </form>
+
+            </div>
+        </div>
+        <hr />
+    </div>
+</script>
+
 <div class="modal fade" id="myModal">
     <div class="modal-dialog">
         <div class="modal-content">