Profile page finished

This commit is contained in:
2024-11-02 15:22:25 +01:00
Unverified
parent 1154cc547b
commit 4b9034fe87
32 changed files with 1770 additions and 302 deletions

View File

@@ -13,7 +13,7 @@
<link rel="stylesheet" href="css/panel.css?version=0.3.0.3"/>
<link rel="stylesheet" href="css/main_button.css?version=0.3.0.0"/>
<link rel="stylesheet" href="css/gaps.css?version=0.3.0.1"/>
<link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.4.0.12"/>
<link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.4.0.13"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- BOOTSTRAP -->

View File

@@ -1,12 +1,10 @@
@using WatchIt.Website.Components.Pages.HomePage.Subcomponents
@typeparam TItem
<div class="panel">
<div class="vstack gap-3">
<span class="panel-text-title">Top @(Count) @(Name) this week by popularity</span>
<span class="panel-text-title">@(Title)</span>
@if (_loaded)
{
<div class="container-grid">
@@ -18,10 +16,10 @@
{
<a class="text-reset text-decoration-none" href="@(string.Format(ItemUrlFormatString, IdSource(_items.ElementAt(i))))">
@{int iCopy = i;}
<ViewRankItemComponent Place="@(i + 1)"
Name="@(NameSource(_items.ElementAt(iCopy)))"
PosterPlaceholder="@(PosterPlaceholder)"
GetPosterAction="@(action => GetPictureAction(IdSource(_items.ElementAt(iCopy)), action))"/>
<HorizontalListItemComponent Place="@(i + 1)"
Name="@(NameSource(_items.ElementAt(iCopy)))"
PosterPlaceholder="@(PosterPlaceholder)"
GetPosterAction="@(action => GetPictureAction(IdSource(_items.ElementAt(iCopy)), action))"/>
</a>
}
</div>

View File

@@ -3,19 +3,19 @@ using Microsoft.AspNetCore.Components;
using WatchIt.Common.Model;
using WatchIt.Common.Query;
namespace WatchIt.Website.Components.Pages.HomePage.Panels;
namespace WatchIt.Website.Components.Common.Panels;
public partial class ViewRankPanelComponent<TItem> : ComponentBase
public partial class HorizontalListPanelComponent<TItem> : ComponentBase
{
#region PARAMETERS
[Parameter] public int Count { get; set; } = 5;
[Parameter] public required string Name {get; set; }
[Parameter] public required Func<int, Action<IEnumerable<TItem>>, Task> GetViewRankAction { get; set; }
[Parameter] public required string Title {get; set; }
[Parameter] public required Func<Action<IEnumerable<TItem>>, Task> GetItemsAction { get; set; }
[Parameter] public required string ItemUrlFormatString { get; set; }
[Parameter] public required Func<TItem, long> IdSource { get; set; }
[Parameter] public required Func<TItem, string> NameSource { get; set; }
[Parameter] public required string PosterPlaceholder {get; set; }
[Parameter] public required string PosterPlaceholder { get; set; }
[Parameter] public required Func<long, Action<Picture>, Task> GetPictureAction { get; set; }
#endregion
@@ -43,7 +43,7 @@ public partial class ViewRankPanelComponent<TItem> : ComponentBase
// STEP 0
endTasks.AddRange(
[
GetViewRankAction(Count, data => _items = data)
GetItemsAction(data => _items = data)
]);
// END

View File

@@ -1,9 +1,9 @@
using Microsoft.AspNetCore.Components;
using WatchIt.Common.Model;
namespace WatchIt.Website.Components.Pages.HomePage.Subcomponents;
namespace WatchIt.Website.Components.Common.Subcomponents;
public partial class ViewRankItemComponent : ComponentBase
public partial class HorizontalListItemComponent : ComponentBase
{
#region PARAMETERS

View File

@@ -70,5 +70,13 @@
<NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="1" @bind-Value="@(Query.UserRatingTo)"/>
</div>
</div>
<div class="row my-1">
<div class="input-group input-group-sm">
<span class="col-3 input-group-text">User rating date</span>
<InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.UserRatingDateFrom)"/>
<span class="col-auto input-group-text">-</span>
<InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.UserRatingDateTo)"/>
</div>
</div>
</div>
</EditForm>

View File

@@ -8,25 +8,25 @@
<div class="container-grid">
<div class="row mb-1">
<div class="input-group input-group-sm">
<span class="col-3 input-group-text">Name</span>
<span class="col-4 input-group-text">Name</span>
<InputText class="col form-control" placeholder="Search with regex" @bind-Value="@(Query.Name)"></InputText>
</div>
</div>
<div class="row my-1">
<div class="input-group input-group-sm">
<span class="col-3 input-group-text">Full name</span>
<span class="col-4 input-group-text">Full name</span>
<InputText class="col form-control" placeholder="Search with regex" @bind-Value="@(Query.FullName)"/>
</div>
</div>
<div class="row my-1">
<div class="input-group input-group-sm">
<span class="col-3 input-group-text">Description</span>
<span class="col-4 input-group-text">Description</span>
<InputText class="col form-control" placeholder="Search with regex" @bind-Value="@(Query.Description)"/>
</div>
</div>
<div class="row my-1">
<div class="input-group input-group-sm">
<span class="col-3 input-group-text">Birth date</span>
<span class="col-4 input-group-text">Birth date</span>
<InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.BirthDateFrom)"/>
<span class="col-auto input-group-text">-</span>
<InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.BirthDateTo)"/>
@@ -34,7 +34,7 @@
</div>
<div class="row my-1">
<div class="input-group input-group-sm">
<span class="col-3 input-group-text">Death date</span>
<span class="col-4 input-group-text">Death date</span>
<InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.DeathDateFrom)"/>
<span class="col-auto input-group-text">-</span>
<InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.DeathDateTo)"/>
@@ -42,7 +42,7 @@
</div>
<div class="row my-1">
<div class="input-group input-group-sm">
<span class="col-3 input-group-text">Gender</span>
<span class="col-4 input-group-text">Gender</span>
<InputSelect TValue="short?" class="col form-control" @bind-Value="@(Query.GenderId)">
<option @onclick="() => Query.GenderId = null">No choice</option>
@foreach (GenderResponse gender in _genders)
@@ -54,7 +54,7 @@
</div>
<div class="row my-1">
<div class="input-group input-group-sm">
<span class="col-3 input-group-text">Rating (count)</span>
<span class="col-4 input-group-text">Rating (count)</span>
<NumericEdit TValue="long?" Class="col form-control" Min="0" @bind-Value="@(Query.RatingCountFrom)"/>
<span class="col-auto input-group-text">-</span>
<NumericEdit TValue="long?" Class="col form-control" Min="0" @bind-Value="@(Query.RatingCountTo)"/>
@@ -62,7 +62,7 @@
</div>
<div class="row mt-1">
<div class="input-group input-group-sm">
<span class="col-3 input-group-text">Rating (average)</span>
<span class="col-4 input-group-text">Rating (average)</span>
<NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="@(0.01M)" @bind-Value="@(Query.RatingAverageFrom)"/>
<span class="col-auto input-group-text">-</span>
<NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="@(0.01M)" @bind-Value="@(Query.RatingAverageTo)"/>
@@ -70,7 +70,7 @@
</div>
<div class="row my-1">
<div class="input-group input-group-sm">
<span class="col-3 input-group-text">User rating (count)</span>
<span class="col-4 input-group-text">User rating (count)</span>
<NumericEdit TValue="long?" Class="col form-control" Min="0" @bind-Value="@(Query.UserRatingCountFrom)"/>
<span class="col-auto input-group-text">-</span>
<NumericEdit TValue="long?" Class="col form-control" Min="0" @bind-Value="@(Query.UserRatingCountTo)"/>
@@ -78,11 +78,19 @@
</div>
<div class="row mt-1">
<div class="input-group input-group-sm">
<span class="col-3 input-group-text">User rating (average)</span>
<span class="col-4 input-group-text">User rating (average)</span>
<NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="@(0.01M)" @bind-Value="@(Query.UserRatingAverageFrom)"/>
<span class="col-auto input-group-text">-</span>
<NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="@(0.01M)" @bind-Value="@(Query.UserRatingAverageTo)"/>
</div>
</div>
<div class="row my-1">
<div class="input-group input-group-sm">
<span class="col-4 input-group-text">User rating (date)</span>
<InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.UserRatingLastDateFrom)"/>
<span class="col-auto input-group-text">-</span>
<InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.UserRatingLastDateTo)"/>
</div>
</div>
</div>
</EditForm>

View File

@@ -73,5 +73,13 @@
<NumericEdit TValue="decimal?" Class="col form-control" Min="0" Max="10" Step="1" @bind-Value="@(Query.UserRatingTo)"/>
</div>
</div>
<div class="row my-1">
<div class="input-group input-group-sm">
<span class="col-3 input-group-text">User rating date</span>
<InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.UserRatingDateFrom)"/>
<span class="col-auto input-group-text">-</span>
<InputDate TValue="DateOnly?" class="col form-control" @bind-Value="@(Query.UserRatingDateTo)"/>
</div>
</div>
</div>
</EditForm>

View File

@@ -1,7 +1,6 @@
@using WatchIt.Common.Model.Movies
@using WatchIt.Common.Model.Persons
@using WatchIt.Common.Model.Series
@using WatchIt.Website.Components.Pages.HomePage.Panels
@page "/"
@@ -10,28 +9,28 @@
<div class="vstack gap-default">
<ViewRankPanelComponent TItem="MovieResponse"
Name="movies"
GetViewRankAction="@((count, action) => MoviesClientService.GetMoviesViewRank(count, successAction: action))"
ItemUrlFormatString="/media/{0}"
IdSource="@(item => item.Id)"
NameSource="@(item => item.ReleaseDate.HasValue ? $"{item.Title} ({item.ReleaseDate.Value.Year})" : item.Title)"
PosterPlaceholder="/assets/media_poster.png"
GetPictureAction="@((id, action) => MediaClientService.GetMediaPoster(id, action))"/>
<ViewRankPanelComponent TItem="SeriesResponse"
Name="TV series"
GetViewRankAction="@((count, action) => SeriesClientService.GetSeriesViewRank(count, successAction: action))"
ItemUrlFormatString="/media/{0}"
IdSource="@(item => item.Id)"
NameSource="@(item => item.ReleaseDate.HasValue ? $"{item.Title} ({item.ReleaseDate.Value.Year})" : item.Title)"
PosterPlaceholder="/assets/media_poster.png"
GetPictureAction="@((id, action) => MediaClientService.GetMediaPoster(id, action))"/>
<ViewRankPanelComponent TItem="PersonResponse"
Name="people"
GetViewRankAction="@((count, action) => PersonsClientService.GetPersonsViewRank(count, successAction: action))"
ItemUrlFormatString="/person/{0}"
IdSource="@(item => item.Id)"
NameSource="@(item => item.Name)"
PosterPlaceholder="/assets/person_poster.png"
GetPictureAction="@((id, action) => PersonsClientService.GetPersonPhoto(id, action))"/>
<HorizontalListPanelComponent TItem="MovieResponse"
Title="Top 5 movies this week by popularity"
GetItemsAction="@(action => MoviesClientService.GetMoviesViewRank(successAction: action))"
ItemUrlFormatString="/media/{0}"
IdSource="@(item => item.Id)"
NameSource="@(item => item.ReleaseDate.HasValue ? $"{item.Title} ({item.ReleaseDate.Value.Year})" : item.Title)"
PosterPlaceholder="/assets/media_poster.png"
GetPictureAction="@((id, action) => MediaClientService.GetMediaPoster(id, action))"/>
<HorizontalListPanelComponent TItem="SeriesResponse"
Title="Top 5 TV series this week by popularity"
GetItemsAction="@(action => SeriesClientService.GetSeriesViewRank(successAction: action))"
ItemUrlFormatString="/media/{0}"
IdSource="@(item => item.Id)"
NameSource="@(item => item.ReleaseDate.HasValue ? $"{item.Title} ({item.ReleaseDate.Value.Year})" : item.Title)"
PosterPlaceholder="/assets/media_poster.png"
GetPictureAction="@((id, action) => MediaClientService.GetMediaPoster(id, action))"/>
<HorizontalListPanelComponent TItem="PersonResponse"
Title="Top 5 people this week by popularity"
GetItemsAction="@(action => PersonsClientService.GetPersonsViewRank(successAction: action))"
ItemUrlFormatString="/person/{0}"
IdSource="@(item => item.Id)"
NameSource="@(item => item.Name)"
PosterPlaceholder="/assets/person_poster.png"
GetPictureAction="@((id, action) => PersonsClientService.GetPersonPhoto(id, action))"/>
</div>

View File

@@ -65,7 +65,35 @@
</Items>
<Content>
<TabPanel Name="summary">
<div class="vstack gap-default mt-default">
<HorizontalListPanelComponent TItem="MovieRatedResponse"
Title="Recently rated movies"
Count="6"
GetItemsAction="@(action => AccountsClientService.GetAccountRatedMovies(Id!.Value, new MovieRatedQueryParameters { First = 6, OrderBy = "user_rating_date" }, successAction: action))"
ItemUrlFormatString="/media/{0}"
IdSource="@(item => item.Id)"
NameSource="@(item => item.ReleaseDate.HasValue ? $"{item.Title} ({item.ReleaseDate.Value.Year})" : item.Title)"
PosterPlaceholder="/assets/media_poster.png"
GetPictureAction="@((id, action) => MediaClientService.GetMediaPoster(id, action))"/>
<HorizontalListPanelComponent TItem="SeriesRatedResponse"
Title="Recently rated TV series"
Count="6"
GetItemsAction="@(action => AccountsClientService.GetAccountRatedSeries(Id!.Value, new SeriesRatedQueryParameters { First = 6, OrderBy = "user_rating_date" }, successAction: action))"
ItemUrlFormatString="/media/{0}"
IdSource="@(item => item.Id)"
NameSource="@(item => item.ReleaseDate.HasValue ? $"{item.Title} ({item.ReleaseDate.Value.Year})" : item.Title)"
PosterPlaceholder="/assets/media_poster.png"
GetPictureAction="@((id, action) => MediaClientService.GetMediaPoster(id, action))"/>
<HorizontalListPanelComponent TItem="PersonRatedResponse"
Title="Recently rated people"
Count="6"
GetItemsAction="@(action => AccountsClientService.GetAccountRatedPersons(Id!.Value, new PersonRatedQueryParameters { First = 6, OrderBy = "user_rating_last_date" }, successAction: action))"
ItemUrlFormatString="/person/{0}"
IdSource="@(item => item.Id)"
NameSource="@(item => item.Name)"
PosterPlaceholder="/assets/person_poster.png"
GetPictureAction="@((id, action) => PersonsClientService.GetPersonPhoto(id, action))"/>
</div>
</TabPanel>
<TabPanel Name="movies">
<div class="mt-default">
@@ -81,7 +109,7 @@
UrlIdTemplate="/media/{0}"
PictureDownloadingTask="@((id, action) => MediaClientService.GetMediaPoster(id, action))"
ItemDownloadingTask="@((query, action) => AccountsClientService.GetAccountRatedMovies(Id!.Value, query, action))"
SortingOptions="@(new Dictionary<string, string> { { "user_rating", "User rating" }, { "rating.count", "Number of ratings" }, { "rating.average", "Average rating" }, { "title", "Title" }, { "release_date", "Release date" } })"
SortingOptions="@(new Dictionary<string, string> { { "user_rating", "User rating" }, { "user_rating_date", "User rating date" }, { "rating.count", "Number of ratings" }, { "rating.average", "Average rating" }, { "title", "Title" }, { "release_date", "Release date" } })"
PosterPlaceholder="/assets/media_poster.png"
GetGlobalRatingMethod="@((id, action) => MediaClientService.GetMediaRating(id, action))"
GetUserRatingMethod="@((id, userId, successAction, notfoundAction) => MediaClientService.GetMediaRatingByUser(id, userId, successAction, notfoundAction))"
@@ -105,7 +133,7 @@
UrlIdTemplate="/media/{0}"
PictureDownloadingTask="@((id, action) => MediaClientService.GetMediaPoster(id, action))"
ItemDownloadingTask="@((query, action) => AccountsClientService.GetAccountRatedSeries(Id!.Value, query, action))"
SortingOptions="@(new Dictionary<string, string> { { "user_rating", "User rating" }, { "rating.count", "Number of ratings" }, { "rating.average", "Average rating" }, { "title", "Title" }, { "release_date", "Release date" } })"
SortingOptions="@(new Dictionary<string, string> { { "user_rating", "User rating" }, { "user_rating_date", "User rating date" }, { "rating.count", "Number of ratings" }, { "rating.average", "Average rating" }, { "title", "Title" }, { "release_date", "Release date" } })"
PosterPlaceholder="/assets/media_poster.png"
GetGlobalRatingMethod="@((id, action) => MediaClientService.GetMediaRating(id, action))"
GetUserRatingMethod="@((id, userId, successAction, notfoundAction) => MediaClientService.GetMediaRatingByUser(id, userId, successAction, notfoundAction))"
@@ -132,6 +160,7 @@
{
{ "user_rating.average", "Average user rating" },
{ "user_rating.count", "Number of user ratings" },
{ "user_rating_last_date", "User rating date" },
{ "rating.average", "Average rating" },
{ "rating.count", "Number of ratings" },
{ "name", "Name" },