GonnaHetzMe/WotBlitzStatisticsBlazor
0
0 Fork 0
mirror of https://github.com/DrMboga/WotBlitzStatisticsBlazor.git synced 2026-10-25 03:10:07 +01:00
Code Issues Projects Releases Wiki Activity

feat: mobile tanks view sorting added

Browse Source
This commit is contained in:
Mikhail Shabanov committed 2022-05-04 10:33:51 +02:00
1 parent 1d402d16f9
commit 58414a3ac4
37 files changed
+266 -177
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksListBase.cs
+1 -1
View File
@@ -50,7 +50,7 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
protected override void OnInitialized()
{
FilteredTankList = TanksList;
FilteredTankList = TanksList.OrderByDescending(t => t.LastBattleTime);
CountTotalParams();
for (int i = 1; i < 11; i++)
{
WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksListSmall.razor
+63 -5
View File
@@ -1,21 +1,53 @@
@inherits PlayerInfoTanksListBase;
@if (TanksList != null && TanksList.Count() > 0)
@if (TanksList != null && FilteredTankList.Count() > 0)
{
<div class="filters">
<div @onclick="@(e => OnFilterClick(e, TanksSorting.LastBattle))">
<img class="filter-button" src="/icons/calendar.scale-200.png" />
@if(sorting == TanksSorting.LastBattle && isSortAscending)
{<img class="filter-arrow" src="/icons/Ascending.png" />}
@if(sorting == TanksSorting.LastBattle && !isSortAscending)
{<img class="filter-arrow" src="/icons/Descending.png" />}
</div>
<div @onclick="@(e => OnFilterClick(e, TanksSorting.Winrate))">
<img class="filter-button" src="/icons/details.wins.scale-200.png" />
<img class="filter-button" src="/icons/sortby.wins.scale-200.png" />
@if(sorting == TanksSorting.Winrate && isSortAscending)
{<img class="filter-arrow" src="/icons/Ascending.png" />}
@if(sorting == TanksSorting.Winrate && !isSortAscending)
{<img class="filter-arrow" src="/icons/Descending.png" />}
</div>
<div @onclick="@(e => OnFilterClick(e, TanksSorting.Battles))">
<img class="filter-button" src="/icons/details.battles.scale-200.png" />
<img class="filter-button" src="/icons/sortby.battle.scale-200.png" />
@if(sorting == TanksSorting.Battles && isSortAscending)
{<img class="filter-arrow" src="/icons/Ascending.png" />}
@if(sorting == TanksSorting.Battles && !isSortAscending)
{<img class="filter-arrow" src="/icons/Descending.png" />}
</div>
<div @onclick="@(e => OnFilterClick(e, TanksSorting.Damage))">
<img class="filter-button" src="/icons/sortby.damage.scale-200.png" />
@if(sorting == TanksSorting.Damage && isSortAscending)
{<img class="filter-arrow" src="/icons/Ascending.png" />}
@if(sorting == TanksSorting.Damage && !isSortAscending)
{<img class="filter-arrow" src="/icons/Descending.png" />}
</div>
<div @onclick="@(e => OnFilterClick(e, TanksSorting.Tier))">
<img class="filter-button" src="/icons/sortby.vehicle.level.scale-200.png" />
@if(sorting == TanksSorting.Tier && isSortAscending)
{<img class="filter-arrow" src="/icons/Ascending.png" />}
@if(sorting == TanksSorting.Tier && !isSortAscending)
{<img class="filter-arrow" src="/icons/Descending.png" />}
</div>
<div @onclick="@(e => OnFilterClick(e, TanksSorting.Wn7))">
Wn7
@if(sorting == TanksSorting.Wn7 && isSortAscending)
{<img class="filter-arrow" src="/icons/Ascending.png" />}
@if(sorting == TanksSorting.Wn7 && !isSortAscending)
{<img class="filter-arrow" src="/icons/Descending.png" />}
</div>
</div>
@sorting <span>ascending: @isSortAscending</span>
<div class="tanks-list">
@foreach (var tank in TanksList)
@foreach (var tank in FilteredTankList)
{
<TankListItem Tank=@tank></TankListItem>
}
@@ -50,5 +82,31 @@
{
isSortAscending = !isSortAscending;
}
FilterTanksList();
}
private void FilterTanksList()
{
switch (sorting)
{
case TanksSorting.LastBattle:
FilteredTankList = isSortAscending ? TanksList.OrderBy(t => t.LastBattleTime) : TanksList.OrderByDescending(t => t.LastBattleTime);
break;
case TanksSorting.Winrate:
FilteredTankList = isSortAscending ? TanksList.OrderBy(t => t.WinRate) : TanksList.OrderByDescending(t => t.WinRate);
break;
case TanksSorting.Battles:
FilteredTankList = isSortAscending ? TanksList.OrderBy(t => t.Battles) : TanksList.OrderByDescending(t => t.Battles);
break;
case TanksSorting.Damage:
FilteredTankList = isSortAscending ? TanksList.OrderBy(t => t.AvgDamage) : TanksList.OrderByDescending(t => t.AvgDamage);
break;
case TanksSorting.Wn7:
FilteredTankList = isSortAscending ? TanksList.OrderBy(t => t.Wn7) : TanksList.OrderByDescending(t => t.Wn7);
break;
case TanksSorting.Tier:
FilteredTankList = isSortAscending ? TanksList.OrderBy(t => t.Tier) : TanksList.OrderByDescending(t => t.Tier);
break;
}
}
}
WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksListSmall.razor.css
+15 -10
View File
@@ -1,17 +1,22 @@
.tanks-list {
height: 350px;
overflow-y: scroll;
height: 350px;
overflow-y: scroll;
}
.filters {
display: flex;
flex-direction: row;
justify-content: flex-start;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.filter-button {
min-height: 24px;
min-width: 24px;
width: 24px;
height: 24px;
}
min-height: 24px;
min-width: 24px;
width: 24px;
height: 24px;
}
.filter-arrow {
min-height: 24px;
height: 24px;
}
WotBlitzStatisticsPro.Blazor/Pages/TankListItem.razor
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="tank-list-item" >
<div class="tank-image" >
<div class="tank-flag-background" style="background-image: url('@Tank.TankNationId.NationAsset()')"></div>
<div class="tank-flag-background" style="background-image: url('@Tank.TankNationId.NationAssetFaded()')"></div>
<div class="tank-tier">
@if (Tank.IsPremium)
{
WotBlitzStatisticsPro.Blazor/Pages/TankListItem.razor.css
+57 -58
View File
@@ -1,89 +1,88 @@
.tank-list-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 100%;
background-color: #3a474d;
margin-top: 5px;
font-size: 12px;
display: flex;
flex-direction: row;
justify-content: flex-start;
width: 100%;
background-color: #3a474d;
margin-top: 5px;
font-size: 12px;
}
.tank-image {
position: relative;
width: 120px;
min-width: 120px;
height: 70px;
justify-content: flex-end;
display: flex;
flex-direction: row;
position: relative;
width: 120px;
min-width: 120px;
height: 70px;
justify-content: flex-end;
display: flex;
flex-direction: row;
}
.tank-flag-background {
/*filter: grayscale(60%);*/
filter: blur(1.5px);
position: absolute;
width: 120px;
min-width: 120px;
height: 70px;
/*filter: grayscale(60%);*/
/* filter: blur(1.5px);*/
position: absolute;
width: 120px;
min-width: 120px;
height: 70px;
}
.tank-tier {
position: absolute;
left: 5px;
top: 0px;
width: 24px;
height: 24px;
position: absolute;
left: 5px;
top: 0px;
width: 24px;
height: 24px;
}
.tank-preview {
position: absolute;
left: 25px;
top: 0px;
width: 95px;
height: 70px;
position: absolute;
left: 25px;
top: 0px;
width: 95px;
height: 70px;
}
.tank-type {
position: absolute;
left: 0px;
top: 46px;
width: 24px;
height: 24px;
position: absolute;
left: 0px;
top: 46px;
width: 24px;
height: 24px;
}
.mastery-image {
position: absolute;
left: 96px;
top: 46px;
width: 24px;
height: 24px;
position: absolute;
left: 96px;
top: 46px;
width: 24px;
height: 24px;
}
.tank-info {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
margin-left: 2px;
margin-right: 2px;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
margin-left: 2px;
margin-right: 2px;
}
.tank-info-first-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
}
.tank-info-second-row {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
.icon-scale {
width: 20px;
height: 20px;
}
width: 20px;
height: 20px;
}