lucie.bedouret
/
blazorCourse
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

beautifull alignment / trying the images

Browse Source
master
Lilian BRETON 2 years ago
parent dd45acd446
commit f0d89e4874
5 changed files with 119 additions and 54 deletions
Show Stats Download Patch File Download Diff File

3
myBlazorApp/myBlazorApp/Components/MyInventory.razor.css
Unescape View File

@ -1,6 +1,5 @@
.inventory-items {
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 10px;
gap: 5px;
display: grid;
width: 40%;
}

63
myBlazorApp/myBlazorApp/Pages/Inventory.razor
Unescape View File

@ -4,53 +4,48 @@
@using myBlazorApp.Models;
<div class="inventory">
<MyInventory/>
</div>
<div id="ItemList">
<div>
<h3>List of Items</h3>
@*SearchBar*@
<p>
<b>CurrentCulture</b>: @CultureInfo.CurrentCulture
</p>
<div class="body">
<div class="inventory">
<MyInventory/>
</div>
<div id="ItemList" class="align-end">
<div id="ItemList">
<div>
<p>
List of items
</p>
<h3>List of Items</h3>
@*SearchBar*@
</div>
<DataGrid TItem="Item"
Data="@items"
ReadData="@OnReadData"
TotalItems="@totalItem"
PageSize="10"
ShowPager
Responsive>
<DataGridColumn TItem="Item" Field=""/>
<DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
<DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
<DisplayTemplate>
@if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{context.Name}.png"))
<div id="ItemList" class="align-end">
<div>
<p>
List of items
</p>
@*SearchBar*@
</div>
<DataGrid TItem="Item"
Data="@items"
ReadData="@OnReadData"
TotalItems="@totalItem"
PageSize="10"
ShowPager
Responsive>
<DataGridColumn TItem="Item" Field=""/>
<DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
<DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
@if (!string.IsNullOrWhiteSpace(context.ImageBase64))
{
<img src="images/@(context.Name).png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
<img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 50px; max-width: 150px" />
}
else
{
<img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
}
</DisplayTemplate>
</DataGridColumn>
</DataGrid>
</DataGridColumn>
</DataGrid>
</div>
</div>
</div>

25
myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs
Unescape View File

@ -4,6 +4,7 @@ using Blazored.Modal.Services;
using Blazorise.DataGrid;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Localization;
using myBlazorApp.Factories;
using myBlazorApp.Modals;
using myBlazorApp.Models;
using myBlazorApp.Services;
@ -13,6 +14,15 @@ namespace myBlazorApp.Pages
public partial class Inventory
{
[Parameter]
public int Id { get; set; }
private ItemModel itemModel = new()
{
EnchantCategories = new List<string>(),
RepairWith = new List<string>()
};
private List<Item> items = new List<Item>();
private int totalItem;
@ -62,6 +72,21 @@ namespace myBlazorApp.Pages
NavigationManager.NavigateTo("list", true);
}
protected override async Task OnInitializedAsync()
{
var item = await DataService.GetById(Id);
var fileContent = await File.ReadAllBytesAsync($"{WebHostEnvironment.WebRootPath}/images/default.png");
if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{itemModel.Name}.png"))
{
fileContent = await File.ReadAllBytesAsync($"{WebHostEnvironment.WebRootPath}/images/{item.Name}.png");
}
// Set the model with the item
itemModel = ItemFactory.ToModel(item, fileContent);
}
}
}

18
myBlazorApp/myBlazorApp/Pages/Inventory.razor.css
Unescape View File

@ -1,21 +1,17 @@
.body {
display: flex;
width: 100%;
}
.inventory-items {
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 10px;
display: grid;
width: 40%;
}
.align-start {
.inventory {
align-items: flex-start;
justify-content: start
justify-content: start;
width: 35%;
margin-right: 20%;
}
.align-end {
.ItemList {
align-content: flex-end;
justify-content: end;
width: 400px;
width: 45%;
}

50
myBlazorApp/myBlazorApp/Services/DataLocalService.cs
Unescape View File

@ -36,6 +36,22 @@ namespace myBlazorApp.Services
/// Add the item to the current data
currentData.Add(ItemFactory.Create(model));
// Save the image
var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
// Check if the folder "images" exist
if (!imagePathInfo.Exists)
{
imagePathInfo.Create();
}
// Determine the image name
var fileName = new FileInfo($"{imagePathInfo}/{model.Name}.png");
// Write the file content
await File.WriteAllBytesAsync(fileName.FullName, model.ImageContent);
// Save the data
await _localStorage.SetItemAsync("data", currentData);
}
@ -91,6 +107,32 @@ namespace myBlazorApp.Services
throw new Exception($"Unable to found the item with ID: {id}");
}
// Save the image
var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
// Check if the folder "images" exist
if (!imagePathInfo.Exists)
{
imagePathInfo.Create();
}
// Delete the previous image
if (item.Name != model.Name)
{
var oldFileName = new FileInfo($"{imagePathInfo}/{item.Name}.png");
if (oldFileName.Exists)
{
File.Delete(oldFileName.FullName);
}
}
// Determine the image name
var fileName = new FileInfo($"{imagePathInfo}/{model.Name}.png");
// Write the file content
await File.WriteAllBytesAsync(fileName.FullName, model.ImageContent);
// Modify the content of the item
ItemFactory.Update(item, model);
@ -109,6 +151,14 @@ namespace myBlazorApp.Services
// Delete item in
currentData.Remove(item);
// Delete the image
var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
var fileName = new FileInfo($"{imagePathInfo}/{item.Name}.png");
if (fileName.Exists)
{
File.Delete(fileName.FullName);
}
// Save the data
await _localStorage.SetItemAsync("data", currentData);

Write Preview
Loading…
Cancel
Save