master
Mathilde JEAN 2 years ago
parent afef7a2cec
commit 023fad9b5e

@ -0,0 +1,32 @@
<CascadingValue Value="@this">
<div class="container">
<div class="row">
<div class="col-6">
<div>Available items:</div>
<div>
<div class="css-grid">
@foreach (var item in Items)
{
<grid>
<tr>
<td>
<img src="data:image/png;base64, @(item.ImageBase64)" class="img-thumbnail" title="@item.DisplayName" alt="@item.DisplayName" style="min-width: 50px; max-width: 50px"/>
</td>
<td class="txt">
@item.DisplayName
</td>
</tr>
</grid>
}
</div>
</div>
</div>
</div>
</div>
</CascadingValue>

@ -0,0 +1,25 @@
using System;
using BlazorApp.Models;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using System.Collections.ObjectModel;
using System.Collections.Specialized;
namespace BlazorApp.Components
{
public partial class AvailableItem
{
public Item CurrentDragItem { get; set; }
[Parameter]
public List<Item> Items { get; set; }
/// <summary>
/// Gets or sets the java script runtime.
/// </summary>
[Inject]
internal IJSRuntime JavaScriptRuntime { get; set; }
}
}

@ -0,0 +1,18 @@
.item {
width: 64px;
height: 64px;
border: 1px solid;
overflow: hidden;
}
.css-grid {
grid-template-columns: repeat(1,minmax(0,1fr));
gap: 10px;
display: grid;
width: 286px;
}
.txt {
width: 1000px;
}
img {
margin: 10px;
}

@ -45,4 +45,4 @@
<div>
<Crafting Items="Items" Recipes="Recipes" />
</div>
</div>

@ -30,5 +30,4 @@ namespace BlazorApp.Pages
StateHasChanged();
}
}
}
}

@ -1,42 +1,75 @@
@page "/inventory"
@using BlazorApp.Components;
@using BlazorApp.Pages;
@using BlazorApp.Models;
<div class="inventory">
<h3>Inventory</h3>
<h3>Inventory</h3>
<div class="css-grid">
<div class="css-grid">
<CraftingItem Index="0" />
<CraftingItem Index="1" />
<CraftingItem Index="2" />
<CraftingItem Index="3" />
<CraftingItem Index="4" />
<CraftingItem Index="5" />
<CraftingItem Index="6" />
<CraftingItem Index="7" />
<CraftingItem Index="8" />
<CraftingItem Index="9" />
<CraftingItem Index="10" />
<CraftingItem Index="11" />
<CraftingItem Index="12" />
<CraftingItem Index="13" />
<CraftingItem Index="14" />
<CraftingItem Index="15" />
<CraftingItem Index="16" />
<CraftingItem Index="17" />
<!--
<CraftingItem Index="18" />
<CraftingItem Index="19" />
<CraftingItem Index="20" />
<CraftingItem Index="21" />
<CraftingItem Index="22" />
<CraftingItem Index="23" />
<CraftingItem Index="24" />
<CraftingItem Index="25" />
<CraftingItem Index="26" />
-->
<CraftingItem Index="0" />
<CraftingItem Index="1" />
<CraftingItem Index="2" />
<CraftingItem Index="3" />
<CraftingItem Index="4" />
<CraftingItem Index="5" />
<CraftingItem Index="6" />
<CraftingItem Index="7" />
<CraftingItem Index="8" />
<CraftingItem Index="9" />
<CraftingItem Index="10" />
<CraftingItem Index="11" />
<CraftingItem Index="12" />
<CraftingItem Index="13" />
<CraftingItem Index="14" />
<CraftingItem Index="15" />
<CraftingItem Index="16" />
<CraftingItem Index="17" />
<!--
<CraftingItem Index="18" />
<CraftingItem Index="19" />
<CraftingItem Index="20" />
<CraftingItem Index="21" />
<CraftingItem Index="22" />
<CraftingItem Index="23" />
<CraftingItem Index="24" />
<CraftingItem Index="25" />
<CraftingItem Index="26" />
-->
</div>
</div>
<div class="available-items">
<div class="search-container">
<form action="/action_page.php">
<h3>Available Items</h3>
<input type="text" placeholder="Search" name="search"/>
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
<DataGrid TItem="Item"
Data="@Items"
ReadData="@OnReadData"
TotalItems="@totalItem"
PageSize="10"
ShowPager
Sortable="true">
<div>
<AvailableItem Items="Items"/>
<button type="submit" @onclick="() => SortByName()"></button>
<DataGridColumn TItem="Item" Field="@nameof(Item.Id)">
<DisplayTemplate>
@if (!string.IsNullOrWhiteSpace(context.ImageBase64))
{
<img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 50px; max-width: 50px" />
}
else
{
<img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px" />
}
</DisplayTemplate>
</DataGridColumn>
<DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)"/>
</DataGrid>
</div>

@ -2,6 +2,8 @@
using BlazorApp.Components;
using BlazorApp.Models;
using BlazorApp.Services;
using Blazorise;
using Blazorise.DataGrid;
using Microsoft.AspNetCore.Components;
namespace BlazorApp.Pages
@ -13,6 +15,8 @@ namespace BlazorApp.Pages
public List<Item> Items { get; set; } = new List<Item>();
private int totalItem;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
base.OnAfterRenderAsync(firstRender);
@ -26,6 +30,25 @@ namespace BlazorApp.Pages
StateHasChanged();
}
}
}
private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
{
if (e.CancellationToken.IsCancellationRequested)
{
return;
}
if (!e.CancellationToken.IsCancellationRequested)
{
Items = await DataService.List(e.Page, e.PageSize);
totalItem = await DataService.Count();
}
}
private async Task SortByName(DataGridReadDataEventArgs<Item> e)
{
Items = await DataService.SortedList();
}
}
}

@ -2,5 +2,32 @@
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 10px;
display: grid;
width: 40%;
}
.inventory {
float: left;
}
.search-container h3 {
float: left;
margin-right: 94px;
}
input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
}
.search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
cursor: pointer;
}
.search-container button:hover {
background: #ccc;
}
.available-items {
float: right;
width: 50%;
}

@ -89,4 +89,4 @@ namespace BlazorApp.Pages
NavigationManager.NavigateTo("list", true);
}
}
}
}

@ -56,6 +56,18 @@ namespace BlazorApp.Services
{
return await _http.GetFromJsonAsync<List<CraftingRecipe>>("https://codefirst.iut.uca.fr/containers/container-blazor-web-api-julienriboulet/api/Crafting/recipe");
}
}
}
// A CHANGER
/*
public async Task<List<Item>> SortedList(List<Item> items)
{
List<Item> it = await _http.GetFromJsonAsync<List<Item>>($"https://codefirst.iut.uca.fr/containers/container-blazor-web-api-julienriboulet/api/Crafting/");
return it.Sort();
}
*/
}
}

@ -14,7 +14,7 @@ namespace BlazorApp.Services
Task Update(int id, ItemModel itemModel);
Task Delete(int id);
Task<List<CraftingRecipe>> GetRecipes();
Task<List<Item>> SortedList();
}
}

Loading…
Cancel
Save