frnix_06/Francescos.Recipes.World
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove js an placed to site.js

Browse Source
This commit is contained in:
franc
2025-05-05 12:32:32 +02:00
parent a7a5650046
commit 1e6d354343
2 changed files with 56 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Francesco.Recipes.World/Views/Shared/_GetInstructions.cshtml
+21 -97
View File
@@ -5,114 +5,38 @@
{
<div class="instruction-item" id="instruction-@Model.Instructions[i].Id">
<div class="instruction-controls">
<input type="file" />
<textarea placeholder="Beschreibung" class="form-control">@Model.Instructions[i].Description</textarea>
<button type="button" class="btn-delete" onclick="removeInstruction('@Model.Instructions[i].Id')">🗑️</button>
@if (Model.Instructions[i].MediaFiles != null && Model.Instructions[i].MediaFiles.Any())
{
var mediaFile = Model.Instructions[i].MediaFiles.First();
if (mediaFile.Data != null)
{
<div class="instruction-media">
<img src="data:@mediaFile.MimeType;base64,@Convert.ToBase64String(mediaFile.Data)"
alt="Instruction Media" class="instruction-media-preview" />
</div>
}
}
<input type="file" name="InstructionViewModel.Instructions[@i].MediaFile" class="instruction-file" />
<textarea name="InstructionViewModel.Instructions[@i].Description" placeholder="Beschreibung" class="form-control">@Model.Instructions[i].Description</textarea>
<button type="button" class="btn-delete" onclick="removeInstruction('@Model.Instructions[i].Id', '@Model.RecipeId',)">🗑️</button>
</div>
<div class="instruction-actions">
<button type="button" class="btn-move-up" onclick="moveInstructionUp('@Model.Instructions[i].Id')">⬆️</button>
<button type="button" class="btn-move-down" onclick="moveInstructionDown('@Model.Instructions[i].Id')">⬇️</button>
<button type="button" class="btn-move-up" onclick="moveInstructionUp('@Model.Instructions[i].Id', '@Model.RecipeId')">⬆️</button>
<button type="button" class="btn-move-down" onclick="moveInstructionDown('@Model.Instructions[i].Id', '@Model.RecipeId')">⬇️</button>
</div>
</div>
}
</div>
<button type="button" class="btn-add" onclick="addInstruction()">Schritte hinzufügen</button>
@section Scripts {
<script>
htmx.on('htmx:afterSwap', (event) => {
if (event.target.id === 'instructions-container') {
console.log('Instructions reloaded.');
}
});
const recipeId = '@Model.RecipeId';
async function moveInstructionUp(instructionId) {
try {
const response = await fetch(`/Recipe/${recipeId}/Instruction/${instructionId}/move-up`, {
method: 'POST',
headers: {
'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
}
});
if (response.ok) {
htmx.ajax('GET', `/Recipe/${recipeId}/Instructions`, '#instructions-container');
} else {
const error = await response.json();
alert(error.Error || 'Failed to move instruction up.');
}
} catch (error) {
console.error('Error moving instruction up:', error);
}
}
async function moveInstructionDown(instructionId) {
try {
const response = await fetch(`/Recipe/${recipeId}/Instruction/${instructionId}/move-down`, {
method: 'POST',
headers: {
'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
}
});
if (response.ok) {
htmx.ajax('GET', `/Recipe/${recipeId}/Instructions`, '#instructions-container');
} else {
const error = await response.json();
alert(error.Error || 'Failed to move instruction down.');
}
} catch (error) {
console.error('Error moving instruction down:', error);
}
}
async function removeInstruction(instructionId) {
if (!confirm('Möchtest du diesen Schritt wirklich löschen?')) return;
try {
const response = await fetch(`/${recipeId}/RemoveInstruction/${instructionId}`, {
method: 'POST',
headers: {
'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
}
});
if (response.ok) {
const element = document.getElementById(`instruction-${instructionId}`);
if (element) {
element.remove();
}
} else {
const error = await response.json();
alert(error.Error || 'Fehler beim Löschen der Anweisung.');
}
} catch (error) {
console.error('Fehler beim Löschen:', error);
}
}
function addInstruction() {
const container = document.getElementById('instructions-container');
const newInstructionHtml = `
<div class="instruction-item">
<div class="instruction-controls">
<input type="file" />
<textarea placeholder="Beschreibung" class="form-control"></textarea>
<button type="button" class="btn-delete" onclick="deleteInstruction()">🗑️</button>
</div>
<div class="instruction-actions">
<button type="button" class="btn-move-up" onclick="moveInstructionUp()">⬆️</button>
<button type="button" class="btn-move-down" onclick="moveInstructionDown()">⬇️</button>
</div>
</div>
`;
container.insertAdjacentHTML('beforeend', newInstructionHtml);
}
setRecipeId('@Model.RecipeId');
</script>
}
Francesco.Recipes.World/Views/Shared/_IngredientsPartial.cshtml
+35
View File
@@ -0,0 +1,35 @@
@model Francesco.Recipes.World.Models.IngredientViewModel
@Html.AntiForgeryToken()
<div id="ingredients-container">
@for (int i = 0; i < Model.Ingredients.Count; i++)
{
<div class="ingredient-item" id="ingredient-@Model.Ingredients[i].Id">
<div class="ingredient-controls">
<input type="text" name="IngredientViewModel.Ingredients[@i].Name" value="@Model.Ingredients[i].Name" placeholder="Name" class="form-control" />
<input type="number" name="IngredientViewModel.Ingredients[@i].RecipeIngredients[0].Quantity" value="@(Model.Ingredients[i].RecipeIngredients.FirstOrDefault()?.Quantity)" placeholder="Menge" class="form-control" />
<select name="IngredientViewModel.Ingredients[@i].RecipeIngredients[0].Unit.Id" class="form-control">
@foreach (var unit in Model.Units)
{
@if (Model.Ingredients[i].RecipeIngredients.FirstOrDefault()?.Unit?.Id == unit.Id)
{
<option value="@unit.Id" selected>@unit.Name (@unit.Symbol)</option>
}
else
{
<option value="@unit.Id">@unit.Name (@unit.Symbol)</option>
}
}
</select>
<button type="button" class="btn-delete" onclick="removeIngredient('@Model.Ingredients[i].Id')">🗑️</button>
</div>
</div>
}
</div>
<button type="button" class="btn-add" onclick="addIngredient()">Zutat hinzufügen</button>
@section Scripts {
<script>
recipeId = '@Model.RecipeId';
</script>
}