TO DO Fix composant razor

pull/9/head
Louwar 3 years ago
parent 03d099eff3
commit a22ba71351

@ -0,0 +1,7 @@
<h3>Card</h3>
@typeparam TItem
<div class="card text-center">
@CardHeader(Item)
@CardBody(Item)
@CardFooter
</div>

@ -0,0 +1,19 @@
using Microsoft.AspNetCore.Components;
namespace ValblazeProject.Components
{
public partial class Card<TItem>
{
[Parameter]
public RenderFragment<TItem> CardBody { get; set; }
[Parameter]
public RenderFragment CardFooter { get; set; }
[Parameter]
public RenderFragment<TItem> CardHeader { get; set; }
[Parameter]
public TItem Item { get; set; }
}
}

@ -0,0 +1,50 @@
<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)
{
<CraftingItem Item="item" NoDrop="true" />
}
</div>
</div>
</div>
<div class="col-6">
<div>Recipe</div>
<div>
<div class="css-recipe">
<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" />
</div>
</div>
<div>Result</div>
<div>
<CraftingItem Item="RecipeResult" />
</div>
</div>
<div class="col-12">
<div>Actions</div>
<div class="actions" id="actions">
</div>
</div>
</div>
</div>
</CascadingValue>

@ -0,0 +1,19 @@
.css-grid {
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 10px;
display: grid;
width: 286px;
}
.css-recipe {
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 10px;
display: grid;
width: 212px;
}
.actions {
border: 1px solid black;
height: 250px;
overflow: scroll;
}

@ -0,0 +1,16 @@
window.Crafting =
{
AddActions: function (data) {
data.forEach(element => {
var div = document.createElement('div');
div.innerHTML = 'Action: ' + element.action + ' - Index: ' + element.index;
if (element.item) {
div.innerHTML += ' - Item Name: ' + element.item.name;
}
document.getElementById('actions').appendChild(div);
});
}
}

@ -0,0 +1,11 @@
using ValblazeProject.Models;
namespace ValblazeProject.Components
{
public class CraftingAction
{
public string Action { get; set; }
public int Index { get; set; }
public Item Item { get; set; }
}
}

@ -0,0 +1,14 @@
<div
class="item"
ondragover="event.preventDefault();"
draggable="true"
@ondragstart="@OnDragStart"
@ondrop="@OnDrop"
@ondragenter="@OnDragEnter"
@ondragleave="@OnDragLeave">
@if (Item != null)
{
@Item.DisplayName
}
</div>

@ -0,0 +1,64 @@
using Blazorise;
using Microsoft.AspNetCore.Components;
using ValblazeProject.Models;
namespace ValblazeProject.Components
{
public partial class CraftingItem
{
[Parameter]
public int Index { get; set; }
[Parameter]
public Item Item { get; set; }
[Parameter]
public bool NoDrop { get; set; }
[CascadingParameter]
public Crafting Parent { get; set; }
internal void OnDragEnter()
{
if (NoDrop)
{
return;
}
Parent.Actions.Add(new CraftingAction { Action = "Drag Enter", Item = this.Item, Index = this.Index });
}
internal void OnDragLeave()
{
if (NoDrop)
{
return;
}
Parent.Actions.Add(new CraftingAction { Action = "Drag Leave", Item = this.Item, Index = this.Index });
}
internal void OnDrop()
{
if (NoDrop)
{
return;
}
this.Item = Parent.CurrentDragItem;
Parent.RecipeItems[this.Index] = this.Item;
Parent.Actions.Add(new CraftingAction { Action = "Drop", Item = this.Item, Index = this.Index });
// Check recipe
Parent.CheckRecipe();
}
private void OnDragStart()
{
Parent.CurrentDragItem = this.Item;
Parent.Actions.Add(new CraftingAction { Action = "Drag Start", Item = this.Item, Index = this.Index });
}
}
}

@ -0,0 +1,6 @@
.item {
width: 64px;
height: 64px;
border: 1px solid;
overflow: hidden;
}

@ -0,0 +1,10 @@
using ValblazeProject.Models;
namespace ValblazeProject.Components
{
public class CraftingRecipe
{
public Item Give { get; set; }
public List<List<string>> Have { get; set; }
}
}

@ -0,0 +1,12 @@
@typeparam TItem
<div>
@if ((Items?.Count ?? 0) != 0)
{
@foreach (var item in Items)
{
@ShowTemplate(item)
;
}
}
</div>

@ -0,0 +1,13 @@
using Microsoft.AspNetCore.Components;
namespace ValblazeProject.Components
{
public partial class ShowItems<TItem>
{
[Parameter]
public List<TItem> Items { get; set; }
[Parameter]
public RenderFragment<TItem> ShowTemplate { get; set; }
}
}

@ -0,0 +1,9 @@
namespace ValblazeProject.Models
{
public class Cake
{
public int Id { get; set; }
public string Name { get; set; }
public decimal Cost { get; set; }
}
}

@ -1,4 +1,7 @@
@using System.Globalization
@using ValblazeProject.Components
@using ValblazeProject.Models
@page "/"
@ -14,3 +17,90 @@ Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<!--
<Card>
<CardHeader>
<div class="card-header">
My Templated Component
</div>
</CardHeader>
<CardBody>
<div class="card-body">
<h5>Welcome To Template Component</h5>
</div>
</CardBody>
<CardFooter>
<div class="card-footer text-muted">
Click Here
</div>
</CardFooter>
</Card>
<Card>
<CardHeader>
<div class="card-header">
Templated Component
</div>
</CardHeader>
<CardHeader>
<div class="card-header">
Hi I'm duplicated header
</div>
</CardHeader>
</Card>
-->
<Card Item="CakeItem">
<CardHeader>
<div class="card-header">
Cake Token Number - @context.Id
</div>
</CardHeader>
<CardBody>
<div class="card-body">
<div>@context.Name</div>
<div>$ @context.Cost</div>
</div>
</CardBody>
<CardFooter>
<div class="card-footer text-muted">
Click Here
</div>
</CardFooter>
</Card>
<Card Item="CakeItem" Context="cakeContext">
<CardHeader>
<div class="card-header">
Cake Token Number - @cakeContext.Id
</div>
</CardHeader>
<CardBody>
<div class="card-body">
<div>@cakeContext.Name</div>
<div>$ @cakeContext.Cost</div>
</div>
</CardBody>
</Card>
<ShowItems Items="Cakes" >
<ShowTemplate Context="CakeContext">
<div class="card text-center">
<div class="card-header">
Cake Token Id - @CakeContext.Id
</div>
<div class="card-body">
<h5 class="card-title">@CakeContext.Name</h5>
<p class="card-text">Price $@CakeContext.Cost</p>
</div>
<div class="card-footer text-muted">
Click Here
</div>
</div>
</ShowTemplate>
</ShowItems>
<div>
<Crafting Items="Items" Recipes="Recipes" />
</div>

@ -0,0 +1,61 @@
using Microsoft.AspNetCore.Components;
using ValblazeProject.Components;
using ValblazeProject.Models;
using ValblazeProject.Services;
namespace ValblazeProject.Pages
{
public partial class Index
{
public List<Cake> Cakes { get; set; }
protected override Task OnAfterRenderAsync(bool firstRender)
{
LoadCakes();
StateHasChanged();
return base.OnAfterRenderAsync(firstRender);
}
public void LoadCakes()
{
Cakes = new List<Cake>
{
// items hidden for display purpose
new Cake
{
Id = 1,
Name = "Red Velvet",
Cost = 60
},
};
}
private Cake CakeItem = new Cake
{
Id = 1,
Name = "Black Forest",
Cost = 50
};
[Inject]
public IDataService DataService { get; set; }
public List<Item> Items { get; set; } = new List<Item>();
private List<CraftingRecipe> Recipes { get; set; } = new List<CraftingRecipe>();
protected override async Task OnAfterRenderAsync(bool firstRender)
{
base.OnAfterRenderAsync(firstRender);
if (!firstRender)
{
return;
}
Items = await DataService.List(0, await DataService.Count());
Recipes = await DataService.GetRecipes();
StateHasChanged();
}
}
}

@ -38,5 +38,7 @@
<script src="_content/Blazored.Modal/blazored.modal.js"></script>
<script src="Components/Crafting.razor.js"></script>
</body>
</html>

@ -1,5 +1,6 @@
using Blazored.LocalStorage;
using Microsoft.AspNetCore.Components;
using ValblazeProject.Components;
using ValblazeProject.Factories;
using ValblazeProject.Models;
@ -162,5 +163,23 @@ namespace ValblazeProject.Services
// Save the data
await _localStorage.SetItemAsync("data", currentData);
}
public Task<List<CraftingRecipe>> GetRecipes()
{
var items = new List<CraftingRecipe>
{
new CraftingRecipe
{
Give = new Item { DisplayName = "Diamond", Name = "diamond" },
Have = new List<List<string>>
{
new List<string> { "dirt", "dirt", "dirt" },
new List<string> { "dirt", null, "dirt" },
new List<string> { "dirt", "dirt", "dirt" }
}
}
};
return Task.FromResult(items);
}
}
}

@ -10,5 +10,6 @@ namespace ValblazeProject.Services
Task<Item> GetById(int id);
Task Update(int id, ItemModel model);
Task Delete(int id);
Task<List<CraftingRecipe>> GetRecipes();
}
}

@ -0,0 +1,28 @@
@typeparam TItem
@using System.Diagnostics.CodeAnalysis
<table class="table">
<thead>
<tr>@TableHeader</tr>
</thead>
<tbody>
@foreach (var item in Items)
{
if (RowTemplate is not null)
{
<tr>@RowTemplate(item)</tr>
}
}
</tbody>
</table>
@code {
[Parameter]
public RenderFragment? TableHeader { get; set; }
[Parameter]
public RenderFragment<TItem>? RowTemplate { get; set; }
[Parameter, AllowNull]
public IReadOnlyList<TItem> Items { get; set; }
}

@ -6,6 +6,16 @@
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<None Remove="Components\Crafting.razor.css" />
<None Remove="Components\Crafting.razor.js" />
</ItemGroup>
<ItemGroup>
<Content Include="Components\Crafting.razor.css" />
<Content Include="Components\Crafting.razor.js" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Blazored.LocalStorage" Version="4.2.0" />
<PackageReference Include="Blazored.Modal" Version="7.1.0" />

Loading…
Cancel
Save