franc
60 lines
1.8 KiB
Plaintext
60 lines
1.8 KiB
Plaintext
@model Francesco.Recipes.World.Models.BackendModels.Recipe.Recipe
|
|
|
|
@{
|
|
ViewData["Title"] = "Add Instructions";
|
|
}
|
|
|
|
<h1>Add Instructions to @Model.Name</h1>
|
|
|
|
<div class="instructions-list">
|
|
<h3>Existing Instructions</h3>
|
|
<ul>
|
|
@foreach (var instruction in Model.Instructions.OrderBy(i => i.Number))
|
|
{
|
|
<li>@instruction.Number. @instruction.Description</li>
|
|
}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="add-instruction-form">
|
|
<h3>Add New Instruction</h3>
|
|
<form id="instruction-form" method="post" asp-action="AddInstruction" asp-controller="Recipe">
|
|
<input type="hidden" name="recipeId" value="@Model.Id" />
|
|
<div class="form-group">
|
|
<label for="description">Description</label>
|
|
<input type="text" class="form-control" id="description" name="description" required />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="number">Number</label>
|
|
<input type="number" class="form-control" id="number" name="number" required min="1" />
|
|
</div>
|
|
<button type="submit" class="btn btn-primary" onclick="addInstructionToRecipe()">Add Instruction</button>
|
|
</form>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script>
|
|
async function addInstructionToRecipe() {
|
|
var form = document.getElementById('instruction-form');
|
|
var recipeId = form.querySelector('input[name="recipeId"]').value;
|
|
var description = form.querySelector('input[name="description"]').value;
|
|
var number = form.querySelector('input[name="number"]').value;
|
|
|
|
var response = await fetch('/Recipe/' + recipeId + '/AddInstruction', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ recipeId: recipeId, description: description, number: number })
|
|
});
|
|
|
|
if (response.ok) {
|
|
location.reload();
|
|
} else {
|
|
alert('Failed to add instruction.');
|
|
}
|
|
}
|
|
</script>
|
|
}
|
|
|