Remove js an placed to site.js
This commit is contained in:
franc
@@ -5,114 +5,38 @@
|
|||||||
{
|
{
|
||||||
<div class="instruction-item" id="instruction-@Model.Instructions[i].Id">
|
<div class="instruction-item" id="instruction-@Model.Instructions[i].Id">
|
||||||
<div class="instruction-controls">
|
<div class="instruction-controls">
|
||||||
<input type="file" />
|
@if (Model.Instructions[i].MediaFiles != null && Model.Instructions[i].MediaFiles.Any())
|
||||||
<textarea placeholder="Beschreibung" class="form-control">@Model.Instructions[i].Description</textarea>
|
{
|
||||||
<button type="button" class="btn-delete" onclick="removeInstruction('@Model.Instructions[i].Id')">🗑️</button>
|
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>
|
||||||
<div class="instruction-actions">
|
<div class="instruction-actions">
|
||||||
<button type="button" class="btn-move-up" onclick="moveInstructionUp('@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')">⬇️</button>
|
<button type="button" class="btn-move-down" onclick="moveInstructionDown('@Model.Instructions[i].Id', '@Model.RecipeId')">⬇️</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<button type="button" class="btn-add" onclick="addInstruction()">Schritte hinzufügen</button>
|
<button type="button" class="btn-add" onclick="addInstruction()">Schritte hinzufügen</button>
|
||||||
|
|
||||||
|
|
||||||
@section Scripts {
|
@section Scripts {
|
||||||
<script>
|
<script>
|
||||||
htmx.on('htmx:afterSwap', (event) => {
|
setRecipeId('@Model.RecipeId');
|
||||||
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);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user