Show amount of shoppinglists in the view with dynamically change of amount

This commit is contained in:
Francesco Lorenzo D'Amico
2025-05-19 13:28:26 +02:00
parent 385be506a7
commit dca567ba9f
@@ -1,56 +1,38 @@
@model Francesco.Recipes.World.Models.BackendModels.Shoppinglist.ShoppingList @model Francesco.Recipes.World.Models.ShoppingListDetailsViewModel
@using Francesco.Recipes.World.Models.BackendModels.RecipeShoppingList
@using Francesco.Recipes.World.Models.BackendModels.RecipeIngredient
@using Francesco.Recipes.World.Models.BackendModels.Recipe
@{ @{
ViewData["Title"] = "Einkaufsliste Details"; ViewData["Title"] = "Einkaufsliste Details";
} }
<h2>Einkaufsliste Details</h2> <h2>Einkaufsliste Details</h2>
<div style="border:2px solid black; border-radius:30px; padding:10px 30px; display:inline-block; margin-bottom:20px;">
@if (TempData["SuccessMessage"] != null) Anzahl Rezepte: <span id="recipeCount">@Model.RecipeCount</span>
{
<div class="alert alert-success">
@TempData["SuccessMessage"]
</div>
}
<div>
<h4>Einkaufsliste</h4>
<hr />
<dl class="row">
<dt class="col-sm-2">
ID
</dt>
<dd class="col-sm-10">
@Model.Id
</dd>
</dl>
</div> </div>
<h4>Rezepte</h4>
<table class="table"> @section Scripts {
<thead> <script>
<tr> async function updateRecipeCount() {
<th>Rezeptname</th> try {
<th>Zutaten</th> const response = await fetch('/ShoppingList/RecipeCount');
</tr> if (!response.ok) {
</thead> throw new Error(`HTTP error! Status: ${response.status}`);
<tbody>
@foreach (var recipeShoppingList in Model.RecipeShoppingList)
{
<tr>
<td>@recipeShoppingList.Recipe.Name</td>
<td>
<ul>
@foreach (var ingredient in recipeShoppingList.SelectedIngredients)
{
<li>@ingredient.RecipeIngredient.Ingredient.Name - @ingredient.RecipeIngredient.Quantity @ingredient.RecipeIngredient.Unit.Name</li>
} }
</ul> const data = await response.json();
</td> document.getElementById('recipeCount').textContent = data.count;
</tr> } catch (err) {
console.error("Fehler beim Aktualisieren der Rezeptanzahl:", err);
}
}
const countUpdateInterval = setInterval(updateRecipeCount, 5000);
document.addEventListener('shopping-list-changed', function() {
updateRecipeCount();
});
window.addEventListener('beforeunload', function() {
clearInterval(countUpdateInterval);
});
</script>
} }
</tbody>
</table>