Show amount of shoppinglists in the view with dynamically change of amount
This commit is contained in:
@@ -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>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user