This repository has been archived on 2021-04-30. You can view files and clone it, but cannot push or open issues or pull requests.
blazing-workshop/BlazingPizza.Client/Pages/Index.razor

75 lines
2.2 KiB
Plaintext
Raw Normal View History

2020-12-17 15:52:43 +00:00
@page "/"
@inject HttpClient HttpClient
@inject OrderState OrderState
@inject NavigationManager NavigationManager
@inject IJSRuntime JS
<div class="main">
<ul class="pizza-cards">
@if (specials != null)
{
@foreach (var special in specials)
{
<li @onclick="@(() =>OrderState.ShowConfigurePizzaDialog(special))" style="background-image: url('@special.ImageUrl')">
<div class="pizza-info">
<span class="title">@special.Name</span>
@special.Description
<span class="price">@special.GetFormattedBasePrice()</span>
</div>
</li>
}
}
</ul>
</div>
<div class="sidebar">
@if (Order.Pizzas.Any())
{
<div class="order-contents">
<h2>Ihre Bestellung</h2>
@foreach (var configuredPizza in Order.Pizzas)
{
<ConfiguredPizzaItem Pizza="configuredPizza" OnRemoved="@(() => RemovePizza(configuredPizza))" />
}
</div>
}
else
{
<div class="empty-cart">Wählen sie eine Pizza<br>um zu beginnen</div>
}
<div class="order-total @(Order.Pizzas.Any() ? "" : "hidden")">
Summe:
<span class="total-price">@Order.GetFormattedTotalPrice()</span>
<a href="checkout" class="@(Order.Pizzas.Count == 0 ? "btn btn-warning disabled" : "btn btn-warning")">
Bestellen >
</a>
</div>
</div>
<TemplatedDialog Show="OrderState.ShowingConfigureDialog">
<ConfigurePizzaDialog
Pizza="OrderState.ConfiguringPizza"
OnCancel="OrderState.CancelConfigurePizzaDialog"
OnConfirm="OrderState.ConfirmConfigurePizzaDialog" />
</TemplatedDialog>
@code {
List<PizzaSpecial> specials;
Order Order => OrderState.Order;
protected override async Task OnInitializedAsync()
{
specials = await HttpClient.GetFromJsonAsync<List<PizzaSpecial>>("specials");
}
async Task RemovePizza(Pizza configuredPizza)
{
if (await JS.Confirm($"{configuredPizza.Special.Name} von der Bestellung entfernen?"))
{
OrderState.RemoveConfiguredPizza(configuredPizza);
}
}
}