Add recipe ingredient JSON serialization and dynamic function via JS
This commit is contained in:
Francesco Lorenzo D'Amico
@@ -1,95 +1,332 @@
|
|||||||
@model Francesco.Recipes.World.Models.ShoppingListDetailsViewModel
|
@model Francesco.Recipes.World.Models.ShoppingListDetailsViewModel
|
||||||
@{
|
@{
|
||||||
ViewData["Title"] = "Einkaufsliste Details";
|
ViewData["Title"] = "Einkaufsliste Details";
|
||||||
}
|
}
|
||||||
|
|
||||||
<h2>Einkaufsliste Details</h2>
|
@using System.Text.Json
|
||||||
<div style="border:2px solid black; border-radius:30px; padding:10px 30px; display:inline-block; margin-bottom:20px;">
|
@{
|
||||||
Anzahl Rezepte: <span id="recipeCount">@Model.RecipeCount</span>
|
var recipeIngredientsJson = JsonSerializer.Serialize(
|
||||||
|
Model.RecipesInAnyShoppingList.ToDictionary(
|
||||||
|
r => r.Id,
|
||||||
|
r => r.RecipeIngredients.Select(ri => new
|
||||||
|
{
|
||||||
|
id = ri.Id,
|
||||||
|
name = ri.Ingredient.Name,
|
||||||
|
amount = ri.Quantity,
|
||||||
|
unit = ri.Unit.Name,
|
||||||
|
shoppingListId = Model.RecipeIngredientToShoppingListMap.ContainsKey(ri.Id)
|
||||||
|
? Model.RecipeIngredientToShoppingListMap[ri.Id]
|
||||||
|
: Guid.Empty
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||||
|
<h2>Einkaufsliste Details</h2>
|
||||||
|
<div style="border:2px solid black; border-radius:30px; padding:10px 30px; display:inline-block;">
|
||||||
|
Anzahl Rezepte: <span id="recipeCount">@Model.RecipeCount</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-center mb-4">
|
||||||
|
<button class="btn btn-outline-secondary me-2" type="button" id="carouselLeft">
|
||||||
|
<i class="bi bi-arrow-left"></i>
|
||||||
|
</button>
|
||||||
|
<div class="flex-grow-1 overflow-auto" style="white-space:nowrap;" id="recipeCarousel">
|
||||||
|
@foreach (var recipe in Model.RecipesInAnyShoppingList)
|
||||||
|
{
|
||||||
|
var mediaFile = recipe.MediaFiles?.FirstOrDefault();
|
||||||
|
var imageData = mediaFile?.Data;
|
||||||
|
var mimeType = mediaFile?.MimeType;
|
||||||
|
var ingredientCount = recipe.RecipeIngredients?.Count() ?? 0;
|
||||||
|
|
||||||
|
<div class="card d-inline-block mx-2 recipe-card"
|
||||||
|
data-recipe-id="@recipe.Id"
|
||||||
|
style="width: 180px; vertical-align:top; border: 1px solid #000;">
|
||||||
|
<div class="position-relative">
|
||||||
|
<div class="position-absolute top-0 end-0 p-2">
|
||||||
|
<button class="btn btn-sm btn-link text-dark" title="Rezept entfernen"
|
||||||
|
onclick="removeRecipe('@recipe.Id');">
|
||||||
|
<i class="bi bi-trash" style="font-size: 1.2rem;"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="text-center p-2" style="height: 120px; display: flex; align-items: center; justify-content: center;">
|
||||||
|
@if (imageData != null && mimeType != null)
|
||||||
|
{
|
||||||
|
<img src="data:@mimeType;base64,@Convert.ToBase64String(imageData)"
|
||||||
|
alt="@recipe.Name"
|
||||||
|
style="max-height: 100%; max-width: 100%; object-fit: contain;" />
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
|
||||||
|
<i class="bi bi-image" style="font-size: 3rem; color: #ccc;"></i>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div class="p-2 text-center" style="border-top: 1px solid #000; background-color: #fff;">
|
||||||
|
<div class="recipe-name" style="font-weight: bold; font-size: 0.9rem; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 40px;">@recipe.Name</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-outline-secondary ms-2" type="button" id="carouselRight">
|
||||||
|
<i class="bi bi-arrow-right"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="ingredientListContainer" class="mt-4">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header bg-primary text-white">
|
||||||
|
<h4 class="mb-0">Zutaten</h4>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<ul id="ingredientList" class="list-group"></ul>
|
||||||
|
<div class="text-center mt-3">
|
||||||
|
<button id="removeSelectedButton" class="btn" onclick="removeSelectedIngredients()">
|
||||||
|
ENTFERNE MARKIERTE
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="d-flex align-items-center mb-4">
|
|
||||||
<button class="btn btn-outline-secondary me-2" type="button" id="carouselLeft">
|
|
||||||
<i class="bi bi-arrow-left"></i>
|
|
||||||
</button>
|
|
||||||
<div class="flex-grow-1 overflow-auto" style="white-space:nowrap;" id="recipeCarousel">
|
|
||||||
@foreach (var recipe in Model.RecipesInAnyShoppingList)
|
|
||||||
{
|
|
||||||
var mediaFile = recipe.MediaFiles?.FirstOrDefault();
|
|
||||||
var imageData = mediaFile?.Data;
|
|
||||||
var mimeType = mediaFile?.MimeType;
|
|
||||||
|
|
||||||
<div class="card d-inline-block mx-2" style="width: 180px; vertical-align:top; border: 1px solid #000;">
|
|
||||||
<div class="position-relative">
|
|
||||||
<div class="position-absolute top-0 end-0 p-2">
|
|
||||||
<button class="btn btn-sm btn-link text-dark" title="Rezept entfernen">
|
|
||||||
<i class="bi bi-trash" style="font-size: 1.2rem;"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="text-center p-2" style="height: 120px; display: flex; align-items: center; justify-content: center;">
|
|
||||||
@if (imageData != null && mimeType != null)
|
|
||||||
{
|
|
||||||
<img src="data:@mimeType;base64,@Convert.ToBase64String(imageData)"
|
|
||||||
alt="@recipe.Name"
|
|
||||||
style="max-height: 100%; max-width: 100%; object-fit: contain;" />
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
|
|
||||||
<i class="bi bi-image" style="font-size: 3rem; color: #ccc;"></i>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div class="p-2 text-center" style="border-top: 1px solid #000; background-color: #fff;">
|
|
||||||
<div class="recipe-name" style="font-weight: bold; font-size: 0.9rem; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 40px;">@recipe.Name</div>
|
|
||||||
</div>
|
|
||||||
<div style="height: 10px; background-color: #000;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<button class="btn btn-outline-secondary ms-2" type="button" id="carouselRight">
|
|
||||||
<i class="bi bi-arrow-right"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@section Scripts {
|
@section Scripts {
|
||||||
<script>
|
@Html.AntiForgeryToken()
|
||||||
async function updateRecipeCount() {
|
<script>
|
||||||
try {
|
const selectedIngredients = new Set();
|
||||||
const response = await fetch('/ShoppingList/RecipeCount');
|
const recipeIngredients = @Html.Raw(recipeIngredientsJson);
|
||||||
if (!response.ok) {
|
let activeRecipeId = Object.keys(recipeIngredients)[0];
|
||||||
throw new Error(`HTTP error! Status: ${response.status}`);
|
async function updateRecipeCount() {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/ShoppingList/RecipeCount');
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||||
|
}
|
||||||
|
const data = await response.json();
|
||||||
|
document.getElementById('recipeCount').textContent = data.count;
|
||||||
|
} 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);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById('carouselLeft').onclick = function() {
|
||||||
|
document.getElementById('recipeCarousel').scrollBy({ left: -200, behavior: 'smooth' });
|
||||||
|
};
|
||||||
|
document.getElementById('carouselRight').onclick = function() {
|
||||||
|
document.getElementById('recipeCarousel').scrollBy({ left: 200, behavior: 'smooth' });
|
||||||
|
};
|
||||||
|
function renderIngredientList(recipeId) {
|
||||||
|
const list = document.getElementById('ingredientList');
|
||||||
|
list.innerHTML = '';
|
||||||
|
const ingredients = recipeIngredients[recipeId] || [];
|
||||||
|
if (ingredients.length === 0) {
|
||||||
|
list.innerHTML = '<li class="list-group-item text-muted">Keine Zutaten vorhanden.</li>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
ingredients.forEach(ingredient => {
|
||||||
|
const isSelected = selectedIngredients.has(ingredient.id);
|
||||||
|
const li = document.createElement('li');
|
||||||
|
li.className = 'list-group-item d-flex justify-content-between align-items-center';
|
||||||
|
if (isSelected) {
|
||||||
|
li.classList.add('selected-ingredient');
|
||||||
|
}
|
||||||
|
li.innerHTML = `
|
||||||
|
<span>
|
||||||
|
<strong>${ingredient.name}</strong>
|
||||||
|
<span class="text-secondary ms-2">${ingredient.amount} ${ingredient.unit}</span>
|
||||||
|
</span>
|
||||||
|
<button class="btn btn-sm btn-outline-danger" title="Zutat entfernen" onclick="toggleIngredientSelection('${ingredient.id}', this); event.stopPropagation();" ${isSelected ? '' : ''}>
|
||||||
|
<i class="bi bi-dash"></i>
|
||||||
|
</button>
|
||||||
|
`;
|
||||||
|
list.appendChild(li);
|
||||||
|
});
|
||||||
|
updateRemoveSelectedButton();
|
||||||
|
}
|
||||||
|
function setActiveCard(recipeId) {
|
||||||
|
document.querySelectorAll('.recipe-card').forEach(card => {
|
||||||
|
card.classList.toggle('active-recipe-card', card.dataset.recipeId === recipeId);
|
||||||
|
});
|
||||||
|
activeRecipeId = recipeId;
|
||||||
|
renderIngredientList(recipeId);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleIngredientSelection(ingredientId, button) {
|
||||||
|
const listItem = button.closest('li');
|
||||||
|
if (selectedIngredients.has(ingredientId)) {
|
||||||
|
selectedIngredients.delete(ingredientId);
|
||||||
|
listItem.classList.remove('selected-ingredient');
|
||||||
|
} else {
|
||||||
|
selectedIngredients.add(ingredientId);
|
||||||
|
listItem.classList.add('selected-ingredient');
|
||||||
|
}
|
||||||
|
updateRemoveSelectedButton();
|
||||||
|
}
|
||||||
|
function updateRemoveSelectedButton() {
|
||||||
|
document.getElementById('removeSelectedButton').style.display =
|
||||||
|
selectedIngredients.size > 0 ? 'inline-block' : 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
async function removeSelectedIngredients() {
|
||||||
|
if (selectedIngredients.size === 0) return;
|
||||||
|
|
||||||
|
const shoppingListIds = [];
|
||||||
|
selectedIngredients.forEach(ingredientId => {
|
||||||
|
for (const recipeId in recipeIngredients) {
|
||||||
|
const ingredients = recipeIngredients[recipeId];
|
||||||
|
const ingredient = ingredients.find(ing => ing.id === ingredientId);
|
||||||
|
if (ingredient && ingredient.shoppingListId &&
|
||||||
|
ingredient.shoppingListId !== "00000000-0000-0000-0000-000000000000") {
|
||||||
|
shoppingListIds.push(ingredient.shoppingListId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (shoppingListIds.length === 0) {
|
||||||
|
console.warn("Keine gültigen Shopping List IDs gefunden");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('/ShoppingList/RemoveIngredients', {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value,
|
||||||
|
'Cache-Control': 'no-cache',
|
||||||
|
'Pragma': 'no-cache'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(shoppingListIds)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
window.location.reload();
|
||||||
|
} else {
|
||||||
|
console.error("Fehler beim Entfernen der Zutaten:", result.error);
|
||||||
|
alert("Beim Entfernen der Zutaten ist ein Fehler aufgetreten.");
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Fehler beim Entfernen der Zutaten:", err);
|
||||||
|
alert("Beim Entfernen der Zutaten ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
if (activeRecipeId) {
|
||||||
|
setActiveCard(activeRecipeId);
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll('.recipe-card').forEach(card => {
|
||||||
|
card.addEventListener('click', function() {
|
||||||
|
setActiveCard(this.dataset.recipeId);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
async function removeRecipe(recipeId) {
|
||||||
|
let confirmed = false;
|
||||||
|
|
||||||
|
if (window.Swal) {
|
||||||
|
const result = await Swal.fire({
|
||||||
|
title: 'Rezept entfernen?',
|
||||||
|
text: 'Möchten Sie dieses Rezept wirklich aus der Einkaufsliste entfernen?',
|
||||||
|
icon: 'warning',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonText: 'Ja, entfernen',
|
||||||
|
cancelButtonText: 'Abbrechen',
|
||||||
|
confirmButtonColor: '#d33',
|
||||||
|
cancelButtonColor: '#3085d6'
|
||||||
|
});
|
||||||
|
confirmed = result.isConfirmed;
|
||||||
|
} else {
|
||||||
|
confirmed = confirm('Möchten Sie dieses Rezept wirklich aus der Einkaufsliste entfernen?');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!confirmed) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const tokenElement = document.querySelector('input[name="__RequestVerificationToken"]');
|
||||||
|
if (!tokenElement) {
|
||||||
|
console.error('Anti-forgery token not found');
|
||||||
|
alert('Fehler: Anti-Forgery Token nicht gefunden');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await fetch(`/ShoppingList/RemoveRecipeFromList/${recipeId}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'RequestVerificationToken': tokenElement.value
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await response.json();
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
if (window.Swal) {
|
||||||
|
await Swal.fire({
|
||||||
|
title: 'Erfolgreich!',
|
||||||
|
text: 'Das Rezept wurde entfernt.',
|
||||||
|
icon: 'success',
|
||||||
|
timer: 1500,
|
||||||
|
showConfirmButton: false
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
alert('Das Rezept wurde erfolgreich entfernt.');
|
||||||
|
}
|
||||||
|
window.location.reload();
|
||||||
|
} else {
|
||||||
|
const errorMsg = result.error || 'Unbekannter Fehler';
|
||||||
|
console.error('Fehler beim Entfernen:', errorMsg);
|
||||||
|
if (window.Swal) {
|
||||||
|
await Swal.fire({
|
||||||
|
title: 'Fehler',
|
||||||
|
text: errorMsg,
|
||||||
|
icon: 'error'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
alert('Fehler: ' + errorMsg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Fehler beim Entfernen des Rezepts:', err);
|
||||||
|
if (window.Swal) {
|
||||||
|
await Swal.fire({
|
||||||
|
title: 'Fehler',
|
||||||
|
text: 'Beim Löschen ist ein Fehler aufgetreten.',
|
||||||
|
icon: 'error'
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
alert('Beim Löschen ist ein Fehler aufgetreten.');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const data = await response.json();
|
|
||||||
document.getElementById('recipeCount').textContent = data.count;
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Fehler beim Aktualisieren der Rezeptanzahl:", err);
|
|
||||||
}
|
}
|
||||||
}
|
</script>
|
||||||
|
|
||||||
const countUpdateInterval = setInterval(updateRecipeCount, 5000);
|
|
||||||
|
|
||||||
|
|
||||||
document.addEventListener('shopping-list-changed', function() {
|
|
||||||
updateRecipeCount();
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('beforeunload', function() {
|
|
||||||
clearInterval(countUpdateInterval);
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('carouselLeft').onclick = function() {
|
|
||||||
document.getElementById('recipeCarousel').scrollBy({ left: -200, behavior: 'smooth' });
|
|
||||||
};
|
|
||||||
document.getElementById('carouselRight').onclick = function() {
|
|
||||||
document.getElementById('recipeCarousel').scrollBy({ left: 200, behavior: 'smooth' });
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user