From fd99280ebf55bb88b2e262f96adbc468be46836d Mon Sep 17 00:00:00 2001 From: Mateusz Skoczek Date: Fri, 27 Sep 2024 19:38:05 +0200 Subject: [PATCH 1/7] MainLayout - data downloading improved, background displaying improved --- .../Accounts/AccountProfilePicture.cs | 14 +- .../WatchIt.Website/Layout/MainLayout.razor | 227 +++++------------- .../Layout/MainLayout.razor.cs | 102 ++++++++ .../Layout/MainLayout.razor.css | 22 +- .../WatchIt.Website/Pages/SearchPage.razor | 5 + .../WatchIt.Website/Pages/SearchPage.razor.cs | 7 + .../Pages/SearchPage.razor.css | 0 .../WatchIt.Website/wwwroot/app.css | 17 ++ 8 files changed, 211 insertions(+), 183 deletions(-) create mode 100644 WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs create mode 100644 WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor create mode 100644 WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs create mode 100644 WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.css diff --git a/WatchIt.Common/WatchIt.Common.Model/Accounts/AccountProfilePicture.cs b/WatchIt.Common/WatchIt.Common.Model/Accounts/AccountProfilePicture.cs index 8ca5569..06114ee 100644 --- a/WatchIt.Common/WatchIt.Common.Model/Accounts/AccountProfilePicture.cs +++ b/WatchIt.Common/WatchIt.Common.Model/Accounts/AccountProfilePicture.cs @@ -2,20 +2,8 @@ namespace WatchIt.Common.Model.Accounts; -public abstract class AccountProfilePicture +public abstract class AccountProfilePicture : Picture { - #region PROPERTIES - - [JsonPropertyName("image")] - public required byte[] Image { get; set; } - - [JsonPropertyName("mime_type")] - public required string MimeType { get; set; } - - #endregion - - - #region CONSTRUCTORS [JsonConstructor] diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor index 338cb2f..b816a89 100644 --- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor +++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor @@ -1,178 +1,77 @@ @using WatchIt.Common.Model.Photos @using WatchIt.Website.Services.WebAPI.Photos + @inherits LayoutComponentBase -@if (_loaded) -{ -
-
-
- + + + + @if (_loaded) + { +
+
+
+ +
+
+

Menu

+
+
+
+ @if (_user is null) + { + Sign in + } + else + { +
+ + +
+ } +
+
-
-

Menu

-
-
-
- @if (_user is null) - { - Sign in - } - else - { -
- - -
- } +
+
+ @Body
-
-
- @Body -
-
-
- -} - - - - -@code -{ - #region SERVICES - - [Inject] public ILogger Logger { get; set; } = default!; - [Inject] public NavigationManager NavigationManager { get; set; } = default!; - [Inject] public ITokensService TokensService { get; set; } = default!; - [Inject] public IAuthenticationService AuthenticationService { get; set; } = default!; - [Inject] public IAccountsWebAPIService AccountsWebAPIService { get; set; } = default!; - [Inject] public IMediaWebAPIService MediaWebAPIService { get; set; } = default!; - [Inject] public IPhotosWebAPIService PhotosWebAPIService { get; set; } = default!; - - #endregion - - - - #region FIELDS - - private bool _loaded = false; - - private string _background = "assets/background_temp.jpg"; - private string _firstGradientColor = "#c6721c"; - private string _secondGradientColor = "#85200c"; - - private User? _user = null; - private string _userProfilePicture = "assets/user_placeholder.png"; - private bool _userMenuIsActive = false; - - #endregion - - - - #region METHODS - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - List bgTasks = new List(); - - bgTasks.Add(GetBackground()); - - await GetAuthenticatedUser(); - - if (_user is not null) - { - bgTasks.Add(GetProfilePicture()); + } - - private async Task GetAuthenticatedUser() - { - _user = await AuthenticationService.GetUserAsync(); - } - - private async Task GetProfilePicture() - { - Action successAction = (data) => - { - string imageBase64 = Convert.ToBase64String(data.Image); - _userProfilePicture = $"data:{data.MimeType};base64,{imageBase64}"; - }; - await AccountsWebAPIService.GetAccountProfilePicture(_user.Id, successAction); - } - - private async Task UserMenuLogOut() - { - await AuthenticationService.LogoutAsync(); - await TokensService.RemoveAuthenticationData(); - NavigationManager.Refresh(true); - } - - #endregion -} \ No newline at end of file + \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs new file mode 100644 index 0000000..feeecbe --- /dev/null +++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs @@ -0,0 +1,102 @@ +using Microsoft.AspNetCore.Components; +using WatchIt.Common.Model.Accounts; +using WatchIt.Common.Model.Photos; +using WatchIt.Website.Services.Utility.Authentication; +using WatchIt.Website.Services.Utility.Tokens; +using WatchIt.Website.Services.WebAPI.Accounts; +using WatchIt.Website.Services.WebAPI.Media; +using WatchIt.Website.Services.WebAPI.Photos; + +namespace WatchIt.Website.Layout; + +public partial class MainLayout : LayoutComponentBase +{ + #region SERVICES + + [Inject] public ILogger Logger { get; set; } = default!; + [Inject] public NavigationManager NavigationManager { get; set; } = default!; + [Inject] public ITokensService TokensService { get; set; } = default!; + [Inject] public IAuthenticationService AuthenticationService { get; set; } = default!; + [Inject] public IAccountsWebAPIService AccountsWebAPIService { get; set; } = default!; + [Inject] public IMediaWebAPIService MediaWebAPIService { get; set; } = default!; + [Inject] public IPhotosWebAPIService PhotosWebAPIService { get; set; } = default!; + + #endregion + + + + #region FIELDS + + private bool _loaded = false; + + private User? _user = null; + private AccountProfilePictureResponse? _userProfilePicture; + + private bool _menuUserIsActive; + + #endregion + + + + #region PROPERTIES + + public PhotoResponse? BackgroundPhoto { get; set; } + + #endregion + + + + #region PRIVATE METHODS + + #region Main + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + List endTasks = new List(); + List step1Tasks = new List(); + + // STEP 0 + step1Tasks.AddRange( + [ + Task.Run(async () => _user = await AuthenticationService.GetUserAsync()) + ]); + endTasks.AddRange( + [ + PhotosWebAPIService.GetPhotoRandomBackground(data => BackgroundPhoto = data) + ]); + + // STEP 1 + await Task.WhenAll(step1Tasks); + if (_user is not null) + { + endTasks.AddRange( + [ + AccountsWebAPIService.GetAccountProfilePicture(_user.Id, data => _userProfilePicture = data) + ]); + } + + // END + await Task.WhenAll(endTasks); + + _loaded = true; + StateHasChanged(); + } + } + + #endregion + + #region User menu + + private async Task UserMenuLogOut() + { + await AuthenticationService.LogoutAsync(); + await TokensService.RemoveAuthenticationData(); + NavigationManager.Refresh(true); + } + + #endregion + + #endregion +} \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css index 350d80d..7538cab 100644 --- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css +++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css @@ -1,7 +1,21 @@ -body { - background-size: cover; +/* TAGS */ + +h1 { + margin: 0; } + + +/* IDS */ + +#user-menu { + position: fixed; +} + + + +/* CLASSES */ + .logo { font-size: 40px; } @@ -14,8 +28,4 @@ body { .body-content { padding-top: 100px; -} - -h1 { - margin: 0; } \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor new file mode 100644 index 0000000..ed6aeca --- /dev/null +++ b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor @@ -0,0 +1,5 @@ +@page "/search" + + + +

SearchPage

\ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs new file mode 100644 index 0000000..dbf03b0 --- /dev/null +++ b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs @@ -0,0 +1,7 @@ +using Microsoft.AspNetCore.Components; + +namespace WatchIt.Website.Pages; + +public partial class SearchPage : ComponentBase +{ +} \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.css b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.css new file mode 100644 index 0000000..e69de29 diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/app.css b/WatchIt.Website/WatchIt.Website/wwwroot/app.css index dbd9667..575af4e 100644 --- a/WatchIt.Website/WatchIt.Website/wwwroot/app.css +++ b/WatchIt.Website/WatchIt.Website/wwwroot/app.css @@ -1,5 +1,22 @@ +/* TAGS */ + +html { + height: 100%; +} + +body { + background-position: center; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + + height: 100%; +} + body, html { background-color: transparent; + + height: 100%; margin: 0; padding: 0; From d87f4f9d83c90457e46bb544607eeadce17adeb7 Mon Sep 17 00:00:00 2001 From: Mateusz Skoczek Date: Fri, 27 Sep 2024 20:35:27 +0200 Subject: [PATCH 2/7] background loading fixed, components improved --- .../Components/ErrorComponent.razor | 50 +++++++++---------- .../Components/LoadingComponent.razor | 16 +++--- .../WatchIt.Website/Layout/MainLayout.razor | 4 +- .../Layout/MainLayout.razor.cs | 30 +++++++++-- .../WatchIt.Website/Pages/AdminPage.razor | 12 ++++- .../WatchIt.Website/Pages/AdminPage.razor.cs | 13 ++++- .../WatchIt.Website/Pages/HomePage.razor | 12 ++++- .../WatchIt.Website/Pages/HomePage.razor.cs | 11 ++++ .../WatchIt.Website/Pages/MediaEditPage.razor | 35 ++++++------- .../Pages/MediaEditPage.razor.cs | 9 ++-- .../WatchIt.Website/Pages/MediaPage.razor | 29 ++++------- .../WatchIt.Website/Pages/MediaPage.razor.cs | 8 ++- 12 files changed, 140 insertions(+), 89 deletions(-) diff --git a/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor b/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor index 6f1c699..9624ad0 100644 --- a/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor +++ b/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor @@ -1,32 +1,28 @@ -
-
-
-
-
-
-
-
⚠︎
-
-
+
+
+
+
+
+
⚠︎
-
-
-
-

An error occured while loading a page

-
-
-
- @if (!string.IsNullOrWhiteSpace(ErrorMessage)) - { -
-
-
-

@ErrorMessage

-
-
-
- }
+
+
+
+

An error occured while loading a page

+
+
+
+ @if (!string.IsNullOrWhiteSpace(ErrorMessage)) + { +
+
+
+

@ErrorMessage

+
+
+
+ }
\ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor b/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor index ea3d99a..a57afcc 100644 --- a/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor +++ b/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor @@ -1,12 +1,8 @@ -
-
-
-
- -
-
-

Loading...

-
-
+
+
+ +
+
+

Loading...

\ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor index b816a89..24e27be 100644 --- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor +++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor @@ -56,7 +56,7 @@ } diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs index feeecbe..9485fc0 100644 --- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs +++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs @@ -28,6 +28,8 @@ public partial class MainLayout : LayoutComponentBase #region FIELDS private bool _loaded = false; + + private PhotoResponse? _defaultBackgroundPhoto; private User? _user = null; private AccountProfilePictureResponse? _userProfilePicture; @@ -39,8 +41,17 @@ public partial class MainLayout : LayoutComponentBase #region PROPERTIES - - public PhotoResponse? BackgroundPhoto { get; set; } + + private PhotoResponse? _backgroundPhoto; + public PhotoResponse? BackgroundPhoto + { + get => _backgroundPhoto; + set + { + _backgroundPhoto = value; + StateHasChanged(); + } + } #endregion @@ -64,7 +75,7 @@ public partial class MainLayout : LayoutComponentBase ]); endTasks.AddRange( [ - PhotosWebAPIService.GetPhotoRandomBackground(data => BackgroundPhoto = data) + PhotosWebAPIService.GetPhotoRandomBackground(data => _defaultBackgroundPhoto = data) ]); // STEP 1 @@ -84,6 +95,19 @@ public partial class MainLayout : LayoutComponentBase StateHasChanged(); } } + + private PhotoResponse? GetBackgroundPhoto() + { + if (BackgroundPhoto?.Background is not null) + { + return BackgroundPhoto; + } + else if (_defaultBackgroundPhoto?.Background is not null) + { + return _defaultBackgroundPhoto; + } + return null; + } #endregion diff --git a/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor b/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor index fed8def..8946ac8 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor @@ -26,11 +26,19 @@ } else { - +
+
+ +
+
} } else { - +
+
+ +
+
}
\ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor.cs index 2a9306a..3817611 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor.cs +++ b/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor.cs @@ -1,15 +1,24 @@ using Microsoft.AspNetCore.Components; +using WatchIt.Website.Layout; using WatchIt.Website.Services.Utility.Authentication; namespace WatchIt.Website.Pages; public partial class AdminPage { - #region SERVICE + #region SERVICES [Inject] public IAuthenticationService AuthenticationService { get; set; } = default!; #endregion + + + + #region PARAMETERS + + [CascadingParameter] public MainLayout Layout { get; set; } + + #endregion @@ -28,6 +37,8 @@ public partial class AdminPage { if (firstRender) { + Layout.BackgroundPhoto = null; + User? user = await AuthenticationService.GetUserAsync(); if (user is not null && user.IsAdmin) { diff --git a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor index 2d99b94..0e9cc89 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor @@ -87,11 +87,19 @@ } else { - +
+
+ +
+
} } else { - +
+
+ +
+
}
\ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.cs index 706a9c6..5f528db 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.cs +++ b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor.cs @@ -2,6 +2,7 @@ using WatchIt.Common.Model.Media; using WatchIt.Common.Model.Movies; using WatchIt.Common.Model.Series; +using WatchIt.Website.Layout; using WatchIt.Website.Services.WebAPI.Media; using WatchIt.Website.Services.WebAPI.Movies; using WatchIt.Website.Services.WebAPI.Series; @@ -21,6 +22,14 @@ public partial class HomePage + #region PARAMETERS + + [CascadingParameter] public MainLayout Layout { get; set; } + + #endregion + + + #region FIELDS private bool _loaded; @@ -39,6 +48,8 @@ public partial class HomePage { if (firstRender) { + Layout.BackgroundPhoto = null; + List step1Tasks = new List(); List endTasks = new List(); diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor index 616d826..bcfcac0 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor @@ -362,31 +362,28 @@ } else { - +
+
+ +
+
} } else { - +
+
+ +
+
} } else { - +
+
+ +
+
} -
- - - -@if (_background is not null) -{ - -} \ No newline at end of file +
\ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor.cs index 780d580..e034282 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor.cs +++ b/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor.cs @@ -5,6 +5,7 @@ using WatchIt.Common.Model.Media; using WatchIt.Common.Model.Movies; using WatchIt.Common.Model.Photos; using WatchIt.Common.Model.Series; +using WatchIt.Website.Layout; using WatchIt.Website.Services.Utility.Authentication; using WatchIt.Website.Services.WebAPI.Media; using WatchIt.Website.Services.WebAPI.Movies; @@ -33,6 +34,8 @@ public partial class MediaEditPage : ComponentBase [Parameter] public long? Id { get; set; } [Parameter] public string? Type { get; set; } + [CascadingParameter] public MainLayout Layout { get; set; } + #endregion @@ -43,8 +46,6 @@ public partial class MediaEditPage : ComponentBase private string? _error; private User? _user; - - private PhotoResponse? _background; private MediaResponse? _media; private MovieRequest? _movieRequest; @@ -86,6 +87,8 @@ public partial class MediaEditPage : ComponentBase { if (firstRender) { + Layout.BackgroundPhoto = null; + List step1Tasks = new List(); List step2Tasks = new List(); List endTasks = new List(); @@ -112,7 +115,7 @@ public partial class MediaEditPage : ComponentBase { endTasks.AddRange( [ - MediaWebAPIService.GetMediaPhotoRandomBackground(Id.Value, data => _background = data), + MediaWebAPIService.GetMediaPhotoRandomBackground(Id.Value, data => Layout.BackgroundPhoto = data), MediaWebAPIService.GetMediaPoster(Id.Value, data => { _mediaPosterSaved = data; diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor index a59a95f..b6b6a6f 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor @@ -193,26 +193,19 @@ else } else { - +
+
+ +
+
} } else { - +
+
+ +
+
} -
- - - -@if (_background is not null) -{ - -} \ No newline at end of file +
\ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs index 0df1dc3..50ad2f4 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs +++ b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs @@ -5,6 +5,7 @@ using WatchIt.Common.Model.Media; using WatchIt.Common.Model.Movies; using WatchIt.Common.Model.Photos; using WatchIt.Common.Model.Series; +using WatchIt.Website.Layout; using WatchIt.Website.Services.Utility.Authentication; using WatchIt.Website.Services.WebAPI.Media; using WatchIt.Website.Services.WebAPI.Movies; @@ -30,6 +31,8 @@ public partial class MediaPage : ComponentBase [Parameter] public long Id { get; set; } + [CascadingParameter] public MainLayout Layout { get; set; } + #endregion @@ -43,7 +46,6 @@ public partial class MediaPage : ComponentBase private User? _user; - private PhotoResponse? _background; private MediaPosterResponse? _poster; private IEnumerable _genres; private MediaRatingResponse _globalRating; @@ -62,6 +64,8 @@ public partial class MediaPage : ComponentBase { if (firstRender) { + Layout.BackgroundPhoto = null; + List step1Tasks = new List(); List step2Tasks = new List(); List endTasks = new List(); @@ -84,7 +88,7 @@ public partial class MediaPage : ComponentBase endTasks.AddRange( [ MediaWebAPIService.PostMediaView(Id), - MediaWebAPIService.GetMediaPhotoRandomBackground(Id, data => _background = data), + MediaWebAPIService.GetMediaPhotoRandomBackground(Id, data => Layout.BackgroundPhoto = data), MediaWebAPIService.GetMediaPoster(Id, data => _poster = data), MediaWebAPIService.GetMediaGenres(Id, data => _genres = data), MediaWebAPIService.GetMediaRating(Id, data => _globalRating = data), From 0994edb983b921662ede27d9c04f054e8785094f Mon Sep 17 00:00:00 2001 From: Mateusz Skoczek Date: Sat, 28 Sep 2024 00:18:04 +0200 Subject: [PATCH 3/7] LoadingComponent improvement, SearchResultComponent added, some fixes --- .../MoviesControllerService.cs | 3 +- .../SeriesControllerService.cs | 3 +- .../Components/LoadingComponent.razor | 6 +- .../Components/LoadingComponent.razor.cs | 12 ++++ .../SearchPage/SearchResultComponent.razor | 55 ++++++++++++++++ .../SearchPage/SearchResultComponent.razor.cs | 56 ++++++++++++++++ .../SearchResultComponent.razor.css | 0 .../WatchIt.Website/Pages/AdminPage.razor | 4 +- .../WatchIt.Website/Pages/HomePage.razor | 5 +- .../WatchIt.Website/Pages/MediaEditPage.razor | 4 +- .../WatchIt.Website/Pages/MediaPage.razor | 4 +- .../WatchIt.Website/Pages/SearchPage.razor | 66 ++++++++++++++++++- .../WatchIt.Website/Pages/SearchPage.razor.cs | 52 +++++++++++++++ 13 files changed, 258 insertions(+), 12 deletions(-) create mode 100644 WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor.cs create mode 100644 WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor create mode 100644 WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs create mode 100644 WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.css diff --git a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Movies/MoviesControllerService.cs b/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Movies/MoviesControllerService.cs index 50256b0..f94ce06 100644 --- a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Movies/MoviesControllerService.cs +++ b/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Movies/MoviesControllerService.cs @@ -38,7 +38,8 @@ public class MoviesControllerService : IMoviesControllerService public async Task GetAllMovies(MovieQueryParameters query) { - IEnumerable data = await _database.MediaMovies.Select(x => new MovieResponse(x)).ToListAsync(); + IEnumerable rawData = await _database.MediaMovies.ToListAsync(); + IEnumerable data = rawData.Select(x => new MovieResponse(x)); data = query.PrepareData(data); return RequestResult.Ok(data); } diff --git a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Series/SeriesControllerService.cs b/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Series/SeriesControllerService.cs index 79527ad..15cee28 100644 --- a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Series/SeriesControllerService.cs +++ b/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Series/SeriesControllerService.cs @@ -38,7 +38,8 @@ public class SeriesControllerService : ISeriesControllerService public async Task GetAllSeries(SeriesQueryParameters query) { - IEnumerable data = await _database.MediaSeries.Select(x => new SeriesResponse(x)).ToListAsync(); + IEnumerable rawData = await _database.MediaSeries.ToListAsync(); + IEnumerable data = rawData.Select(x => new SeriesResponse(x)); data = query.PrepareData(data); return RequestResult.Ok(data); } diff --git a/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor b/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor index a57afcc..4803ba5 100644 --- a/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor +++ b/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor @@ -1,8 +1,8 @@ -
+
- +
-

Loading...

+

Loading...

\ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor.cs new file mode 100644 index 0000000..2ab6e66 --- /dev/null +++ b/WatchIt.Website/WatchIt.Website/Components/LoadingComponent.razor.cs @@ -0,0 +1,12 @@ +using Microsoft.AspNetCore.Components; + +namespace WatchIt.Website.Components; + +public partial class LoadingComponent : ComponentBase +{ + #region PARAMETERS + + [Parameter] public string Color { get; set; } = "dark"; + + #endregion +} \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor new file mode 100644 index 0000000..a4a8bfc --- /dev/null +++ b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor @@ -0,0 +1,55 @@ +@typeparam TItem +@using Microsoft.IdentityModel.Tokens +@typeparam TQuery where TQuery : WatchIt.Common.Query.QueryParameters + + + +
+
+
+
+

@(Title)

+
+
+ @if (_loaded) + { + if (!_items.IsNullOrEmpty()) + { + for (int i = 0; i < _items.Count; i++) + { + if (i > 0) + { +
+
+
+
+
+ } +
+
+ test +
+
+ } + } + else + { +
+
+
+ No items found +
+
+
+ } + } + else + { +
+
+ +
+
+ } +
+
\ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs new file mode 100644 index 0000000..cc55aa7 --- /dev/null +++ b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs @@ -0,0 +1,56 @@ +using Microsoft.AspNetCore.Components; +using WatchIt.Common.Query; + +namespace WatchIt.Website.Components.SearchPage; + +public partial class SearchResultComponent : ComponentBase where TQuery : QueryParameters +{ + #region PARAMETERS + + [Parameter] public required string Title { get; set; } + [Parameter] public required TQuery Query { get; set; } + [Parameter] public Func>, Task> DownloadingTask { get; set; } + + #endregion + + + + #region FIELDS + + private bool _loaded; + + private List _items = []; + private bool _allItemsLoaded; + + + #endregion + + + + #region PRIVATE METHODS + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + // INIT + Query.First = 5; + + List endTasks = new List(); + + // STEP 0 + endTasks.AddRange( + [ + DownloadingTask(Query, data => _items.AddRange(data)) + ]); + + // END + await Task.WhenAll(endTasks); + + _loaded = true; + StateHasChanged(); + } + } + + #endregion +} \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.css new file mode 100644 index 0000000..e69de29 diff --git a/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor b/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor index 8946ac8..7be53a9 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor @@ -37,7 +37,9 @@ {
- +
+ +
} diff --git a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor index 0e9cc89..a804363 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor @@ -1,5 +1,4 @@ @page "/" -@using WatchIt.Common.Model.Movies WatchIt @@ -98,7 +97,9 @@ {
- +
+ +
} diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor index bcfcac0..31550b0 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor @@ -382,7 +382,9 @@ {
- +
+ +
} diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor index b6b6a6f..27b1c79 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor @@ -204,7 +204,9 @@ else {
- +
+ +
} diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor index ed6aeca..1da37d9 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor @@ -1,5 +1,67 @@ -@page "/search" +@using WatchIt.Common.Model.Movies +@using WatchIt.Common.Model.Series +@using WatchIt.Common.Query +@using WatchIt.Website.Components.SearchPage +@using WatchIt.Website.Services.WebAPI.Movies + +@layout MainLayout + +@page "/search/{query}" + +WatchIt - Searching "@(Query)" -

SearchPage

\ No newline at end of file +
+ @if (_loaded) + { + if (string.IsNullOrWhiteSpace(_error)) + { +
+
+
+
+

+ Search results for phrase: "@(DecodedQuery)" +

+
+
+
+
+
+
+ +
+
+
+
+ +
+
+ } + else + { +
+
+ +
+
+ } + } + else + { +
+
+ +
+
+ } +
\ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs index dbf03b0..5fa86fb 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs +++ b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs @@ -1,7 +1,59 @@ +using System.Net; using Microsoft.AspNetCore.Components; +using WatchIt.Website.Layout; +using WatchIt.Website.Services.WebAPI.Movies; +using WatchIt.Website.Services.WebAPI.Series; namespace WatchIt.Website.Pages; public partial class SearchPage : ComponentBase { + #region SERVICES + + [Inject] private IMoviesWebAPIService MoviesWebAPIService { get; set; } = default!; + [Inject] private ISeriesWebAPIService SeriesWebAPIService { get; set; } = default!; + + #endregion + + + + #region FIELDS + + private bool _loaded; + private string? _error; + + #endregion + + + + #region PARAMETERS + + [Parameter] public string Query { get; set; } + + [CascadingParameter] public MainLayout Layout { get; set; } + + #endregion + + + + #region PROPERTIES + + public string DecodedQuery => WebUtility.UrlDecode(Query); + + #endregion + + + + #region PRIVATE METHODS + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + _loaded = true; + StateHasChanged(); + } + } + + #endregion } \ No newline at end of file From 64c73b7b5d20330110e756724677ef2068e848e6 Mon Sep 17 00:00:00 2001 From: Mateusz Skoczek Date: Sat, 28 Sep 2024 02:36:53 +0200 Subject: [PATCH 4/7] search page finished --- .../RatingRequest.cs} | 6 +- .../RatingResponse.cs} | 8 +-- .../MediaController.cs | 5 +- .../IMediaControllerService.cs | 3 +- .../MediaControllerService.cs | 5 +- .../IMediaWebAPIService.cs | 5 +- .../MediaWebAPIService.cs | 5 +- .../Components/ListItemComponent.razor | 26 +++++++++ .../Components/ListItemComponent.razor.cs | 56 +++++++++++++++++++ .../Components/ListItemComponent.razor.css | 17 ++++++ .../SearchPage/SearchResultComponent.razor | 31 +++++++++- .../SearchPage/SearchResultComponent.razor.cs | 43 +++++++++++++- .../WatchIt.Website/Pages/MediaPage.razor.cs | 5 +- .../WatchIt.Website/Pages/SearchPage.razor | 16 +++++- .../WatchIt.Website/Pages/SearchPage.razor.cs | 2 + .../WatchIt.Website/wwwroot/app.css | 4 ++ 16 files changed, 212 insertions(+), 25 deletions(-) rename WatchIt.Common/WatchIt.Common.Model/{Media/MediaRatingRequest.cs => Rating/RatingRequest.cs} (74%) rename WatchIt.Common/WatchIt.Common.Model/{Media/MediaRatingResponse.cs => Rating/RatingResponse.cs} (74%) create mode 100644 WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor create mode 100644 WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.cs create mode 100644 WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.css diff --git a/WatchIt.Common/WatchIt.Common.Model/Media/MediaRatingRequest.cs b/WatchIt.Common/WatchIt.Common.Model/Rating/RatingRequest.cs similarity index 74% rename from WatchIt.Common/WatchIt.Common.Model/Media/MediaRatingRequest.cs rename to WatchIt.Common/WatchIt.Common.Model/Rating/RatingRequest.cs index 6358b4a..54b7ac2 100644 --- a/WatchIt.Common/WatchIt.Common.Model/Media/MediaRatingRequest.cs +++ b/WatchIt.Common/WatchIt.Common.Model/Rating/RatingRequest.cs @@ -1,9 +1,9 @@ using System.Diagnostics.CodeAnalysis; using System.Text.Json.Serialization; -namespace WatchIt.Common.Model.Media; +namespace WatchIt.Common.Model.Rating; -public class MediaRatingRequest +public class RatingRequest { #region PROPERTIES @@ -17,7 +17,7 @@ public class MediaRatingRequest #region CONSTRUCTORS [SetsRequiredMembers] - public MediaRatingRequest(short rating) + public RatingRequest(short rating) { Rating = rating; } diff --git a/WatchIt.Common/WatchIt.Common.Model/Media/MediaRatingResponse.cs b/WatchIt.Common/WatchIt.Common.Model/Rating/RatingResponse.cs similarity index 74% rename from WatchIt.Common/WatchIt.Common.Model/Media/MediaRatingResponse.cs rename to WatchIt.Common/WatchIt.Common.Model/Rating/RatingResponse.cs index e51c9e9..b2b374c 100644 --- a/WatchIt.Common/WatchIt.Common.Model/Media/MediaRatingResponse.cs +++ b/WatchIt.Common/WatchIt.Common.Model/Rating/RatingResponse.cs @@ -1,9 +1,9 @@ using System.Diagnostics.CodeAnalysis; using System.Text.Json.Serialization; -namespace WatchIt.Common.Model.Media; +namespace WatchIt.Common.Model.Rating; -public class MediaRatingResponse +public class RatingResponse { #region PROPERTIES @@ -20,10 +20,10 @@ public class MediaRatingResponse #region CONSTRUCTORS [JsonConstructor] - public MediaRatingResponse() {} + public RatingResponse() {} [SetsRequiredMembers] - public MediaRatingResponse(double ratingAverage, long ratingCount) + public RatingResponse(double ratingAverage, long ratingCount) { RatingAverage = ratingAverage; RatingCount = ratingCount; diff --git a/WatchIt.WebAPI/WatchIt.WebAPI.Controllers/MediaController.cs b/WatchIt.WebAPI/WatchIt.WebAPI.Controllers/MediaController.cs index e2cbce7..0a095e1 100644 --- a/WatchIt.WebAPI/WatchIt.WebAPI.Controllers/MediaController.cs +++ b/WatchIt.WebAPI/WatchIt.WebAPI.Controllers/MediaController.cs @@ -5,6 +5,7 @@ using Microsoft.AspNetCore.Mvc; using WatchIt.Common.Model.Genres; using WatchIt.Common.Model.Media; using WatchIt.Common.Model.Photos; +using WatchIt.Common.Model.Rating; using WatchIt.WebAPI.Services.Controllers.Media; namespace WatchIt.WebAPI.Controllers; @@ -74,7 +75,7 @@ public class MediaController : ControllerBase [HttpGet("{id}/rating")] [AllowAnonymous] - [ProducesResponseType(typeof(MediaRatingResponse), StatusCodes.Status200OK)] + [ProducesResponseType(typeof(RatingResponse), StatusCodes.Status200OK)] [ProducesResponseType(StatusCodes.Status404NotFound)] public async Task GetMediaRating([FromRoute] long id) => await _mediaControllerService.GetMediaRating(id); @@ -90,7 +91,7 @@ public class MediaController : ControllerBase [ProducesResponseType(StatusCodes.Status400BadRequest)] [ProducesResponseType(typeof(void), StatusCodes.Status401Unauthorized)] [ProducesResponseType(StatusCodes.Status404NotFound)] - public async Task PutMediaRating([FromRoute] long id, [FromBody] MediaRatingRequest data) => await _mediaControllerService.PutMediaRating(id, data); + public async Task PutMediaRating([FromRoute] long id, [FromBody] RatingRequest data) => await _mediaControllerService.PutMediaRating(id, data); [HttpDelete("{id}/rating")] [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)] diff --git a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/IMediaControllerService.cs b/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/IMediaControllerService.cs index df8c5c4..a93a938 100644 --- a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/IMediaControllerService.cs +++ b/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/IMediaControllerService.cs @@ -1,5 +1,6 @@ using WatchIt.Common.Model.Media; using WatchIt.Common.Model.Photos; +using WatchIt.Common.Model.Rating; using WatchIt.WebAPI.Services.Controllers.Common; namespace WatchIt.WebAPI.Services.Controllers.Media; @@ -14,7 +15,7 @@ public interface IMediaControllerService Task GetMediaRating(long mediaId); Task GetMediaRatingByUser(long mediaId, long userId); - Task PutMediaRating(long mediaId, MediaRatingRequest data); + Task PutMediaRating(long mediaId, RatingRequest data); Task DeleteMediaRating(long mediaId); Task PostMediaView(long mediaId); diff --git a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/MediaControllerService.cs b/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/MediaControllerService.cs index 50ee996..454cd97 100644 --- a/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/MediaControllerService.cs +++ b/WatchIt.WebAPI/WatchIt.WebAPI.Services/WatchIt.WebAPI.Services.Controllers/WatchIt.WebAPI.Services.Controllers.Media/MediaControllerService.cs @@ -3,6 +3,7 @@ using SimpleToolkit.Extensions; using WatchIt.Common.Model.Genres; using WatchIt.Common.Model.Media; using WatchIt.Common.Model.Photos; +using WatchIt.Common.Model.Rating; using WatchIt.Database; using WatchIt.Database.Model.Media; using WatchIt.Database.Model.Rating; @@ -109,7 +110,7 @@ public class MediaControllerService(DatabaseContext database, IUserService userS double ratingAverage = item.RatingMedia.Any() ? item.RatingMedia.Average(x => x.Rating) : 0; long ratingCount = item.RatingMedia.Count(); - MediaRatingResponse ratingResponse = new MediaRatingResponse(ratingAverage, ratingCount); + RatingResponse ratingResponse = new RatingResponse(ratingAverage, ratingCount); return RequestResult.Ok(ratingResponse); } @@ -131,7 +132,7 @@ public class MediaControllerService(DatabaseContext database, IUserService userS return RequestResult.Ok(rating.Value); } - public async Task PutMediaRating(long mediaId, MediaRatingRequest data) + public async Task PutMediaRating(long mediaId, RatingRequest data) { short ratingValue = data.Rating; if (ratingValue < 1 || ratingValue > 10) diff --git a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/IMediaWebAPIService.cs b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/IMediaWebAPIService.cs index 4eae4f4..9e5c9b4 100644 --- a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/IMediaWebAPIService.cs +++ b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/IMediaWebAPIService.cs @@ -1,6 +1,7 @@ using WatchIt.Common.Model.Genres; using WatchIt.Common.Model.Media; using WatchIt.Common.Model.Photos; +using WatchIt.Common.Model.Rating; namespace WatchIt.Website.Services.WebAPI.Media; @@ -12,9 +13,9 @@ public interface IMediaWebAPIService Task PostMediaGenre(long mediaId, long genreId, Action? successAction = null, Action? unauthorizedAction = null, Action? forbiddenAction = null, Action? notFoundAction = null); Task DeleteMediaGenre(long mediaId, long genreId, Action? successAction = null, Action? unauthorizedAction = null, Action? forbiddenAction = null, Action? notFoundAction = null); - Task GetMediaRating(long mediaId, Action? successAction = null, Action? notFoundAction = null); + Task GetMediaRating(long mediaId, Action? successAction = null, Action? notFoundAction = null); Task GetMediaRatingByUser(long mediaId, long userId, Action? successAction = null, Action? notFoundAction = null); - Task PutMediaRating(long mediaId, MediaRatingRequest body, Action? successAction = null, Action>? badRequestAction = null, Action? unauthorizedAction = null, Action? notFoundAction = null); + Task PutMediaRating(long mediaId, RatingRequest body, Action? successAction = null, Action>? badRequestAction = null, Action? unauthorizedAction = null, Action? notFoundAction = null); Task DeleteMediaRating(long mediaId, Action? successAction = null, Action? unauthorizedAction = null); Task PostMediaView(long mediaId, Action? successAction = null, Action? notFoundAction = null); diff --git a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/MediaWebAPIService.cs b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/MediaWebAPIService.cs index 47bec77..f95ae52 100644 --- a/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/MediaWebAPIService.cs +++ b/WatchIt.Website/WatchIt.Website.Services/WatchIt.Website.Services.WebAPI/WatchIt.Website.Services.WebAPI.Media/MediaWebAPIService.cs @@ -1,6 +1,7 @@ using WatchIt.Common.Model.Genres; using WatchIt.Common.Model.Media; using WatchIt.Common.Model.Photos; +using WatchIt.Common.Model.Rating; using WatchIt.Common.Services.HttpClient; using WatchIt.Website.Services.Utility.Configuration; using WatchIt.Website.Services.Utility.Configuration.Model; @@ -93,7 +94,7 @@ public class MediaWebAPIService : BaseWebAPIService, IMediaWebAPIService #region Rating - public async Task GetMediaRating(long mediaId, Action? successAction = null, Action? notFoundAction = null) + public async Task GetMediaRating(long mediaId, Action? successAction = null, Action? notFoundAction = null) { string url = GetUrl(EndpointsConfiguration.Media.GetMediaRating, mediaId); @@ -117,7 +118,7 @@ public class MediaWebAPIService : BaseWebAPIService, IMediaWebAPIService .ExecuteAction(); } - public async Task PutMediaRating(long mediaId, MediaRatingRequest body, Action? successAction = null, Action>? badRequestAction = null, Action? unauthorizedAction = null, Action? notFoundAction = null) + public async Task PutMediaRating(long mediaId, RatingRequest body, Action? successAction = null, Action>? badRequestAction = null, Action? unauthorizedAction = null, Action? notFoundAction = null) { string url = GetUrl(EndpointsConfiguration.Media.PutMediaRating, mediaId); diff --git a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor new file mode 100644 index 0000000..562ce9b --- /dev/null +++ b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor @@ -0,0 +1,26 @@ +
+
+
+ picture +
+
+
+
+ + @(Name)@(string.IsNullOrWhiteSpace(AdditionalNameInfo) ? string.Empty : AdditionalNameInfo) + +
+
+ ★ +
+ @(_rating is not null && _rating.RatingCount > 0 ? _rating.RatingAverage : "--")/10 + @if (_rating is not null && _rating.RatingCount > 0) + { + @(_rating.RatingCount) + } +
+
+
+
+
+
\ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.cs new file mode 100644 index 0000000..3b72748 --- /dev/null +++ b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.cs @@ -0,0 +1,56 @@ +using Microsoft.AspNetCore.Components; +using WatchIt.Common.Model; +using WatchIt.Common.Model.Rating; + +namespace WatchIt.Website.Components; + +public partial class ListItemComponent : ComponentBase +{ + #region PARAMETERS + + [Parameter] public required long Id { get; set; } + [Parameter] public required string Name { get; set; } + [Parameter] public string? AdditionalNameInfo { get; set; } + [Parameter] public required Func, Task> PictureDownloadingTask { get; set; } + [Parameter] public required Func, Task> RatingDownloadingTask { get; set; } + [Parameter] public int PictureHeight { get; set; } = 150; + + #endregion + + + + #region FIELDS + + private bool _loaded; + + private Picture? _picture; + private RatingResponse? _rating; + + #endregion + + + + #region PRIVATE METHODS + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + List endTasks = new List(); + + // STEP 0 + endTasks.AddRange( + [ + PictureDownloadingTask(Id, picture => _picture = picture), + RatingDownloadingTask(Id, rating => _rating = rating) + ]); + + await Task.WhenAll(endTasks); + + _loaded = true; + StateHasChanged(); + } + } + + #endregion +} \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.css b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.css new file mode 100644 index 0000000..91b920c --- /dev/null +++ b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor.css @@ -0,0 +1,17 @@ +/* IDS */ + +#nameText { + font-size: 25px; +} + +#ratingStar { + font-size: 30px; +} + +#ratingValue { + font-size: 20px; +} + +#ratingCount { + font-size: 10px; +} \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor index a4a8bfc..d25f4ec 100644 --- a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor +++ b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor @@ -1,5 +1,6 @@ -@typeparam TItem @using Microsoft.IdentityModel.Tokens + +@typeparam TItem @typeparam TQuery where TQuery : WatchIt.Common.Query.QueryParameters @@ -27,7 +28,33 @@ }
- test + + + +
+
+ } + if (!_allItemsLoaded) + { +
+
+
+ +
} diff --git a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs index cc55aa7..d115cac 100644 --- a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs +++ b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor.cs @@ -1,4 +1,6 @@ using Microsoft.AspNetCore.Components; +using WatchIt.Common.Model; +using WatchIt.Common.Model.Rating; using WatchIt.Common.Query; namespace WatchIt.Website.Components.SearchPage; @@ -9,7 +11,13 @@ public partial class SearchResultComponent : ComponentBase where [Parameter] public required string Title { get; set; } [Parameter] public required TQuery Query { get; set; } - [Parameter] public Func>, Task> DownloadingTask { get; set; } + [Parameter] public required Func IdSource { get; set; } + [Parameter] public required Func NameSource { get; set; } + [Parameter] public Func AdditionalNameInfoSource { get; set; } = _ => null; + [Parameter] public required string UrlIdTemplate { get; set; } + [Parameter] public required Func>, Task> ItemDownloadingTask { get; set; } + [Parameter] public required Func, Task> PictureDownloadingTask { get; set; } + [Parameter] public required Func, Task> RatingDownloadingTask { get; set; } #endregion @@ -21,7 +29,7 @@ public partial class SearchResultComponent : ComponentBase where private List _items = []; private bool _allItemsLoaded; - + private bool _itemsLoading; #endregion @@ -41,7 +49,18 @@ public partial class SearchResultComponent : ComponentBase where // STEP 0 endTasks.AddRange( [ - DownloadingTask(Query, data => _items.AddRange(data)) + ItemDownloadingTask(Query, data => + { + _items.AddRange(data); + if (data.Count() < 5) + { + _allItemsLoaded = true; + } + else + { + Query.After = 5; + } + }) ]); // END @@ -52,5 +71,23 @@ public partial class SearchResultComponent : ComponentBase where } } + private async Task DownloadItems() + { + _itemsLoading = true; + await ItemDownloadingTask(Query, data => + { + _items.AddRange(data); + if (data.Count() < 5) + { + _allItemsLoaded = true; + } + else + { + Query.After += 5; + } + _itemsLoading = false; + }); + } + #endregion } \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs index 50ad2f4..fb48fd0 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs +++ b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor.cs @@ -4,6 +4,7 @@ using WatchIt.Common.Model.Genres; using WatchIt.Common.Model.Media; using WatchIt.Common.Model.Movies; using WatchIt.Common.Model.Photos; +using WatchIt.Common.Model.Rating; using WatchIt.Common.Model.Series; using WatchIt.Website.Layout; using WatchIt.Website.Services.Utility.Authentication; @@ -48,7 +49,7 @@ public partial class MediaPage : ComponentBase private MediaPosterResponse? _poster; private IEnumerable _genres; - private MediaRatingResponse _globalRating; + private RatingResponse _globalRating; private MovieResponse? _movie; private SeriesResponse? _series; @@ -123,7 +124,7 @@ public partial class MediaPage : ComponentBase } else { - await MediaWebAPIService.PutMediaRating(Id, new MediaRatingRequest(rating)); + await MediaWebAPIService.PutMediaRating(Id, new RatingRequest(rating)); _userRating = rating; } await MediaWebAPIService.GetMediaRating(Id, data => _globalRating = data); diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor index 1da37d9..61bac3b 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor @@ -33,8 +33,14 @@ + ItemDownloadingTask="@(MoviesWebAPIService.GetAllMovies)" + PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))" + RatingDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaRating(id, action))"/>
@@ -42,8 +48,14 @@ + ItemDownloadingTask="@(SeriesWebAPIService.GetAllSeries)" + PictureDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaPoster(id, action))" + RatingDownloadingTask="@((id, action) => MediaWebAPIService.GetMediaRating(id, action))"/>
} diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs index 5fa86fb..0e926d6 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs +++ b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor.cs @@ -1,6 +1,7 @@ using System.Net; using Microsoft.AspNetCore.Components; using WatchIt.Website.Layout; +using WatchIt.Website.Services.WebAPI.Media; using WatchIt.Website.Services.WebAPI.Movies; using WatchIt.Website.Services.WebAPI.Series; @@ -12,6 +13,7 @@ public partial class SearchPage : ComponentBase [Inject] private IMoviesWebAPIService MoviesWebAPIService { get; set; } = default!; [Inject] private ISeriesWebAPIService SeriesWebAPIService { get; set; } = default!; + [Inject] private IMediaWebAPIService MediaWebAPIService { get; set; } = default!; #endregion diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/app.css b/WatchIt.Website/WatchIt.Website/wwwroot/app.css index 575af4e..b27ac15 100644 --- a/WatchIt.Website/WatchIt.Website/wwwroot/app.css +++ b/WatchIt.Website/WatchIt.Website/wwwroot/app.css @@ -113,4 +113,8 @@ body, html { .w-100 { width: 100%; +} + +.picture-aspect-ratio { + aspect-ratio: 3/5; } \ No newline at end of file From df9c9c25ce40d8bdba93640c9ef341190c2ea402 Mon Sep 17 00:00:00 2001 From: Mateusz Skoczek Date: Sun, 29 Sep 2024 03:33:17 +0200 Subject: [PATCH 5/7] header modified --- .../wwwroot/{app.css => css/general.css} | 50 +++++++++++-------- .../wwwroot/css/main_button.css | 0 2 files changed, 29 insertions(+), 21 deletions(-) rename WatchIt.Website/WatchIt.Website/wwwroot/{app.css => css/general.css} (98%) create mode 100644 WatchIt.Website/WatchIt.Website/wwwroot/css/main_button.css diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/app.css b/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css similarity index 98% rename from WatchIt.Website/WatchIt.Website/wwwroot/app.css rename to WatchIt.Website/WatchIt.Website/wwwroot/css/general.css index b27ac15..eac2f26 100644 --- a/WatchIt.Website/WatchIt.Website/wwwroot/app.css +++ b/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css @@ -25,6 +25,8 @@ body, html { font-family: "PT Sans"; } +/* CLASSES */ + .logo { font-family: "Belanosima"; text-decoration: none; @@ -32,27 +34,6 @@ body, html { -webkit-text-fill-color: transparent; } -.mt-9 { - margin-top: 9rem !important; -} - -.panel-header { - background-color: rgba(0, 0, 0, 0.8); -} - -.panel-regular { - background-color: rgba(0, 0, 0, 0.6); -} - -.panel-yellow { - background-color: rgba(255, 184, 58, 0.6); -} - -.panel { - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); - backdrop-filter: blur(25px); -} - .main-button { --r:10px; --b:2px; @@ -102,6 +83,33 @@ body, html { -webkit-mask:none; } + + + + +.mt-9 { + margin-top: 9rem !important; +} + +.panel-header { + background-color: rgba(0, 0, 0, 0.8); +} + +.panel-regular { + background-color: rgba(0, 0, 0, 0.6); +} + +.panel-yellow { + background-color: rgba(255, 184, 58, 0.6); +} + +.panel { + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); + backdrop-filter: blur(25px); +} + + + .dropdown-menu-left { right: auto; left: 0; diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/css/main_button.css b/WatchIt.Website/WatchIt.Website/wwwroot/css/main_button.css new file mode 100644 index 0000000..e69de29 From b449135896daf59a6fcf696a0c35f2f1f2965465 Mon Sep 17 00:00:00 2001 From: Mateusz Skoczek Date: Sun, 29 Sep 2024 13:20:30 +0200 Subject: [PATCH 6/7] style fixes --- WatchIt.Website/WatchIt.Website/App.razor | 8 +- .../Components/ErrorComponent.razor | 2 +- .../Components/ListItemComponent.razor | 2 +- .../SearchPage/SearchResultComponent.razor | 6 +- .../WatchIt.Website/Layout/MainLayout.razor | 82 ++++++++++--------- .../Layout/MainLayout.razor.cs | 9 +- .../Layout/MainLayout.razor.css | 20 +---- .../WatchIt.Website/Pages/AdminPage.razor | 2 +- .../WatchIt.Website/Pages/HomePage.razor | 10 +-- .../WatchIt.Website/Pages/MediaEditPage.razor | 32 ++++---- .../WatchIt.Website/Pages/MediaPage.razor | 8 +- .../WatchIt.Website/Pages/SearchPage.razor | 2 +- WatchIt.Website/WatchIt.Website/Program.cs | 9 ++ .../WatchIt.Website/WatchIt.Website.csproj | 6 ++ .../WatchIt.Website/_Imports.razor | 3 +- .../WatchIt.Website/wwwroot/css/general.css | 57 ++++--------- .../wwwroot/css/main_button.css | 50 +++++++++++ 17 files changed, 167 insertions(+), 141 deletions(-) diff --git a/WatchIt.Website/WatchIt.Website/App.razor b/WatchIt.Website/WatchIt.Website/App.razor index b7ea5bd..4492067 100644 --- a/WatchIt.Website/WatchIt.Website/App.razor +++ b/WatchIt.Website/WatchIt.Website/App.razor @@ -9,12 +9,18 @@ - + + + + + + + diff --git a/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor b/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor index 9624ad0..bc34f73 100644 --- a/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor +++ b/WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor @@ -1,5 +1,5 @@
-
+
diff --git a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor index 562ce9b..cb879cc 100644 --- a/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor +++ b/WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor @@ -1,4 +1,4 @@ -
+
picture diff --git a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor index d25f4ec..4903e4d 100644 --- a/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor +++ b/WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor @@ -6,7 +6,7 @@
-
+

@(Title)

@@ -46,12 +46,12 @@
diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor index 24e27be..bacd53c 100644 --- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor +++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor @@ -9,49 +9,60 @@ @if (_loaded) {
-
-
- -
+
-

Menu

-
-
-
- @if (_user is null) - { - Sign in - } - else - { -
- - + else + { + + + + + @if (_user.IsAdmin) + { + Administrator panel + } + + Log out + + + } +
+
- } +
-
+
@Body
+ + diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs index 9485fc0..941eb4f 100644 --- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs +++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs @@ -27,15 +27,12 @@ public partial class MainLayout : LayoutComponentBase #region FIELDS - private bool _loaded = false; - + private bool _loaded; + + private User? _user; private PhotoResponse? _defaultBackgroundPhoto; - - private User? _user = null; private AccountProfilePictureResponse? _userProfilePicture; - private bool _menuUserIsActive; - #endregion diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css index 7538cab..443c860 100644 --- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css +++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css @@ -8,24 +8,6 @@ h1 { /* IDS */ -#user-menu { - position: fixed; -} - - - -/* CLASSES */ - -.logo { +#logo { font-size: 40px; -} - -.header { - position: sticky; - top: 10px; - height: 60px; -} - -.body-content { - padding-top: 100px; } \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor b/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor index 7be53a9..c13c42f 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor @@ -2,7 +2,7 @@ WatchIt administrator panel -
+
@if (_loaded) { if (_authenticated) diff --git a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor index a804363..1766091 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/HomePage.razor @@ -2,7 +2,7 @@ WatchIt -
+
@if (_loaded) { if (string.IsNullOrWhiteSpace(_error)) @@ -10,7 +10,7 @@
-
+

Top 5 movies this week by popularity

@@ -25,7 +25,7 @@
poster -
+
@(i + 1)
@@ -48,7 +48,7 @@
-
+

Top 5 TV series this week by popularity

@@ -63,7 +63,7 @@
poster -
+
@(i + 1)
diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor index 31550b0..461dfcc 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor @@ -40,7 +40,7 @@ } -
+
@if (_loaded) { if (string.IsNullOrWhiteSpace(_error)) @@ -57,7 +57,7 @@
-
+
poster @@ -77,12 +77,12 @@
@@ -96,12 +96,12 @@
@@ -115,7 +115,7 @@
-
+
@@ -183,12 +183,12 @@
@@ -202,7 +202,7 @@
-
+
@@ -226,12 +226,12 @@ @@ -248,7 +248,7 @@
@foreach (PhotoResponse photo in _photos) { -
+
photo @@ -301,10 +301,10 @@ } else { -
+
-
+
edit_photo @@ -321,7 +321,7 @@
-
+
diff --git a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor index 27b1c79..ef9ff93 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor @@ -24,7 +24,7 @@ else -
+
@if (_loaded) { if (string.IsNullOrWhiteSpace(_error)) @@ -35,7 +35,7 @@ else
-
+

@@ -60,7 +60,7 @@ else
-
+
@@ -133,7 +133,7 @@ else
-
+

diff --git a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor index 61bac3b..48e98dc 100644 --- a/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor +++ b/WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor @@ -12,7 +12,7 @@ -
+
@if (_loaded) { if (string.IsNullOrWhiteSpace(_error)) diff --git a/WatchIt.Website/WatchIt.Website/Program.cs b/WatchIt.Website/WatchIt.Website/Program.cs index ee79676..283995a 100644 --- a/WatchIt.Website/WatchIt.Website/Program.cs +++ b/WatchIt.Website/WatchIt.Website/Program.cs @@ -1,5 +1,8 @@ using System.Text.Json; using System.Text.Json.Serialization; +using Blazorise; +using Blazorise.Bootstrap5; +using Blazorise.Icons.FontAwesome; using Microsoft.AspNetCore.Components.Authorization; using WatchIt.Common.Services.HttpClient; using WatchIt.Website.Services.Utility.Authentication; @@ -53,6 +56,12 @@ public static class Program private static WebApplicationBuilder SetupServices(this WebApplicationBuilder builder) { builder.Services.AddSingleton(); + builder.Services.AddBlazorise(options => + { + options.Immediate = true; + }) + .AddBootstrap5Providers() + .AddFontAwesomeIcons(); // Utility builder.Services.AddSingleton(); diff --git a/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj b/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj index 0722800..3ba0027 100644 --- a/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj +++ b/WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj @@ -35,10 +35,16 @@ <_ContentIncludedByDefault Remove="Components\Pages\Weather.razor" /> <_ContentIncludedByDefault Remove="wwwroot\bootstrap\bootstrap.min.css" /> <_ContentIncludedByDefault Remove="wwwroot\bootstrap\bootstrap.min.css.map" /> + <_ContentIncludedByDefault Remove="wwwroot\scripts\popper.min.js" /> + + + + + diff --git a/WatchIt.Website/WatchIt.Website/_Imports.razor b/WatchIt.Website/WatchIt.Website/_Imports.razor index 7376a6e..b8693f8 100644 --- a/WatchIt.Website/WatchIt.Website/_Imports.razor +++ b/WatchIt.Website/WatchIt.Website/_Imports.razor @@ -14,4 +14,5 @@ @using WatchIt.Website.Services.Utility.Tokens @using WatchIt.Website.Services.Utility.Authentication @using WatchIt.Website.Services.WebAPI.Accounts -@using WatchIt.Website.Services.WebAPI.Media \ No newline at end of file +@using WatchIt.Website.Services.WebAPI.Media +@using Blazorise \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css b/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css index eac2f26..443ec27 100644 --- a/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css +++ b/WatchIt.Website/WatchIt.Website/wwwroot/css/general.css @@ -27,6 +27,14 @@ body, html { /* CLASSES */ +.container-grid { + padding: 0 !important; + margin: 0 !important; + --bs-gutter-x: 1.5rem; + --bs-gutter-y: 0; + width: 100%; +} + .logo { font-family: "Belanosima"; text-decoration: none; @@ -34,53 +42,16 @@ body, html { -webkit-text-fill-color: transparent; } -.main-button { - --r:10px; - --b:2px; - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - color: transparent; - padding: 5px 10px; - border-radius: var(--r); - display: block; - align-items: self-end; - position: relative; - z-index:0; - text-decoration: none; - transition: 0.3s; - font-family: Belanosima; + + +.top-3 { + top: 1rem !important; } -.main-button::before { - content:""; - position:absolute; - z-index:-1; - inset: 0; - border: var(--b) solid transparent; - border-radius: var(--r); - background: inherit; - background-origin: border-box; - background-clip: border-box; - -webkit-mask: - linear-gradient(#fff 0 0) padding-box, - linear-gradient(#fff 0 0); - -webkit-mask-composite: xor; - mask-composite: exclude; - -webkit-mask-repeat: no-repeat; -} - -.main-button:hover { - color: #fff; - -webkit-text-fill-color: #fff; - -webkit-background-clip: border-box; - background-clip: border-box; -} - -.main-button:hover::before { - -webkit-mask:none; +.mb-2rem { + margin-bottom: 2rem !important; } diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/css/main_button.css b/WatchIt.Website/WatchIt.Website/wwwroot/css/main_button.css index e69de29..2bfc5c7 100644 --- a/WatchIt.Website/WatchIt.Website/wwwroot/css/main_button.css +++ b/WatchIt.Website/WatchIt.Website/wwwroot/css/main_button.css @@ -0,0 +1,50 @@ +/* CLASSES */ + +.main-button { + --r:10px; + --b:2px; + + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + color: transparent; + padding: 5px 10px; + + border-radius: var(--r); + display: block; + align-items: self-end; + position: relative; + z-index:0; + text-decoration: none; + transition: 0.3s; + font-family: Belanosima; +} + +.main-button::before { + content:""; + position:absolute; + z-index:-1; + inset: 0; + border: var(--b) solid transparent; + border-radius: var(--r); + background: inherit; + background-origin: border-box; + background-clip: border-box; + -webkit-mask: + linear-gradient(#fff 0 0) padding-box, + linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + -webkit-mask-repeat: no-repeat; +} + +.main-button:hover { + color: #fff; + -webkit-text-fill-color: #fff; + -webkit-background-clip: border-box; + background-clip: border-box; +} + +.main-button:hover::before { + -webkit-mask:none; +} \ No newline at end of file From a0cbded0d700dcfe9b1d40fe83d9856d0e674986 Mon Sep 17 00:00:00 2001 From: Mateusz Skoczek Date: Sun, 29 Sep 2024 15:47:11 +0200 Subject: [PATCH 7/7] search bar finished --- .../WatchIt.Common.Query/QueryParameters.cs | 2 +- WatchIt.Website/WatchIt.Website/App.razor | 2 +- .../WatchIt.Website/Layout/MainLayout.razor | 18 +++++++++++++++++- .../Layout/MainLayout.razor.cs | 17 +++++++++++++++++ .../Layout/MainLayout.razor.css | 5 +++++ .../wwwroot/assets/icons/cancel.png | Bin 0 -> 581 bytes 6 files changed, 41 insertions(+), 3 deletions(-) create mode 100644 WatchIt.Website/WatchIt.Website/wwwroot/assets/icons/cancel.png diff --git a/WatchIt.Common/WatchIt.Common.Query/QueryParameters.cs b/WatchIt.Common/WatchIt.Common.Query/QueryParameters.cs index 685da26..7934cdc 100644 --- a/WatchIt.Common/WatchIt.Common.Query/QueryParameters.cs +++ b/WatchIt.Common/WatchIt.Common.Query/QueryParameters.cs @@ -66,7 +66,7 @@ public abstract class QueryParameters ( !string.IsNullOrEmpty(property) && - new Regex(regexQuery).IsMatch(property) + Regex.IsMatch(property, regexQuery, RegexOptions.IgnoreCase) ) ); diff --git a/WatchIt.Website/WatchIt.Website/App.razor b/WatchIt.Website/WatchIt.Website/App.razor index 4492067..35cf53c 100644 --- a/WatchIt.Website/WatchIt.Website/App.razor +++ b/WatchIt.Website/WatchIt.Website/App.razor @@ -11,7 +11,7 @@ - + diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor index bacd53c..7473c33 100644 --- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor +++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor @@ -20,7 +20,23 @@
- menu +
+ @if (_searchbarVisible) + { +
+ +
+ + + cancel_icon + + } + else + { + + + } +
diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs index 941eb4f..db6a271 100644 --- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs +++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs @@ -1,3 +1,4 @@ +using System.Net; using Microsoft.AspNetCore.Components; using WatchIt.Common.Model.Accounts; using WatchIt.Common.Model.Photos; @@ -33,6 +34,9 @@ public partial class MainLayout : LayoutComponentBase private PhotoResponse? _defaultBackgroundPhoto; private AccountProfilePictureResponse? _userProfilePicture; + private bool _searchbarVisible; + private string _searchbarText = string.Empty; + #endregion @@ -108,6 +112,19 @@ public partial class MainLayout : LayoutComponentBase #endregion + #region Search + + private void SearchStart() + { + if (!string.IsNullOrWhiteSpace(_searchbarText)) + { + string query = WebUtility.UrlEncode(_searchbarText); + NavigationManager.NavigateTo($"/search/{query}"); + } + } + + #endregion + #region User menu private async Task UserMenuLogOut() diff --git a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css index 443c860..9a467a1 100644 --- a/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css +++ b/WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css @@ -10,4 +10,9 @@ h1 { #logo { font-size: 40px; +} + +#searchbarCancel { + cursor: pointer; + color: #6c757d; } \ No newline at end of file diff --git a/WatchIt.Website/WatchIt.Website/wwwroot/assets/icons/cancel.png b/WatchIt.Website/WatchIt.Website/wwwroot/assets/icons/cancel.png new file mode 100644 index 0000000000000000000000000000000000000000..68a9cba1f6c158cf3d64d65037787f187100eca5 GIT binary patch literal 581 zcmeAS@N?(olHy`uVBq!ia0vp^DIm< zXBI`vQ=4YYL;|IpKQ@?juQFzw-;jS``clsW=?~Zowu>D3ajrOB(H;GVjK8OE&3kG1?p5~V z~JJ()=^_s=m11#%vcOB%6xjcK?7Dkq} zPh-7ra4=mHxLTdZk@O^o2Z#lda_+6TyEafjnVr?JC;**$<<0hbrv2{yA3s$et5i?b zc6(nP+!_!DREfZO63=6AaS62&AIMBD*P~| z@L+6oV3UE{qL`K0cIOYo$6HD$2gcpho&V*b=gET-os)isUYa}oh$2wb=)X+jb5Bm7 zAkd&$a;lukGi6l;lcT1j^t=qvO7Lk8;#_R&<=V4NW2)h;g(U|vnjd)^bk=Y_bAOP% z)Bo~Qb=CK#8>Iui5_4Qm9<^u;5_-(yWp_+)$|VW+fL94J3v5abSU9Zw{$9(iFkCKt i#bci|B(UwwZGCZJUFU?JyY;|y!QkoY=d#Wzp$P!&O7my{ literal 0 HcmV?d00001