Make a completly new Create view with some css style, that contains all PartialViews
This commit is contained in:
franc
@@ -1,58 +1,188 @@
|
|||||||
@model Francesco.Recipes.World.Models.BackendModels.Recipe.Recipe
|
@model Francesco.Recipes.World.Models.CreateRecipeViewModel
|
||||||
@using Francesco.Recipes.World.Models.BackendModels.Recipe
|
@using Francesco.Recipes.World.Models.BackendModels.Recipe
|
||||||
|
@using Francesco.Recipes.World.Models
|
||||||
@{
|
@{
|
||||||
ViewData["Title"] = "Create Recipe";
|
ViewData["Title"] = "Erstelle Rezept";
|
||||||
}
|
}
|
||||||
|
|
||||||
<h1>Create Recipe</h1>
|
<h1 class="mb-4">Erstelle Rezept</h1>
|
||||||
|
|
||||||
<form method="post" enctype="multipart/form-data">
|
<form method="post" enctype="multipart/form-data" asp-controller="Recipe" asp-action="Create" asp-route-categoryId="@Model.CategoryId">
|
||||||
<div class="form-group">
|
<div class="mb-4">
|
||||||
<label asp-for="Name"></label>
|
<h2>Allgemein</h2>
|
||||||
<input asp-for="Name" class="form-control" />
|
<div class="form-group">
|
||||||
<span asp-validation-for="Name" class="text-danger"></span>
|
<label asp-for="Name">Name</label>
|
||||||
|
<input asp-for="Name" class="form-control" required />
|
||||||
|
<span asp-validation-for="Name" class="text-danger"></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label asp-for="Description">Beschreibung</label>
|
||||||
|
<textarea asp-for="Description" class="form-control"></textarea>
|
||||||
|
<span asp-validation-for="Description" class="text-danger"></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label asp-for="Difficulty">Schwierigkeit</label>
|
||||||
|
<select asp-for="Difficulty" class="form-control" required>
|
||||||
|
<option value="">Schwierigkeit wählen</option>
|
||||||
|
@foreach (var difficulty in Enum.GetValues(typeof(Difficulty)))
|
||||||
|
{
|
||||||
|
<option value="@difficulty">@difficulty</option>
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
<span asp-validation-for="Difficulty" class="text-danger"></span>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<label asp-for="Servings">Portion (pro Person)</label>
|
||||||
|
<input asp-for="Servings" type="number" min="1" class="form-control" required />
|
||||||
|
<span asp-validation-for="Servings" class="text-danger"></span>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<label>Vorbereitungszeit</label>
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="input-group mr-2">
|
||||||
|
<input asp-for="PrepHours" type="number" class="form-control" min="0" value="0" />
|
||||||
|
<div class="input-group-append">
|
||||||
|
<span class="input-group-text">h</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<input asp-for="PrepMinutes" type="number" class="form-control" min="0" max="59" value="0" />
|
||||||
|
<div class="input-group-append">
|
||||||
|
<span class="input-group-text">min</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-sm-4">
|
||||||
|
<label>Kochzeit</label>
|
||||||
|
<div class="d-flex">
|
||||||
|
<div class="input-group mr-2">
|
||||||
|
<input asp-for="CookHours" type="number" class="form-control" min="0" value="0" />
|
||||||
|
<div class="input-group-append">
|
||||||
|
<span class="input-group-text">h</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-group">
|
||||||
|
<input asp-for="CookMinutes" type="number" class="form-control" min="0" max="59" value="0" />
|
||||||
|
<div class="input-group-append">
|
||||||
|
<span class="input-group-text">min</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label asp-for="Description"></label>
|
<div class="mb-4">
|
||||||
<textarea asp-for="Description" class="form-control"></textarea>
|
<h2>Zutaten</h2>
|
||||||
<span asp-validation-for="Description" class="text-danger"></span>
|
@await Html.PartialAsync("_IngredientsPartial", Model.IngredientViewModel ?? new IngredientViewModel
|
||||||
|
{
|
||||||
|
RecipeId = Model.CategoryId, // Setzt die richtige ID für das globale Script
|
||||||
|
Ingredients = new List<Francesco.Recipes.World.Models.BackendModels.Ingredient.Ingredient>(),
|
||||||
|
Units = ViewBag.Units ?? new List<Francesco.Recipes.World.Models.BackendModels.Unit.Unit>()
|
||||||
|
})
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label asp-for="Difficulty"></label>
|
<div class="mb-4">
|
||||||
<select asp-for="Difficulty" class="form-control">
|
<h2>Anweisungen</h2>
|
||||||
<option value="">Select Difficulty</option>
|
@await Html.PartialAsync("_GetInstructions", Model.InstructionViewModel ?? new InstructionViewModel
|
||||||
@foreach (var difficulty in Enum.GetValues(typeof(Difficulty)))
|
{
|
||||||
{
|
RecipeId = Model.CategoryId,
|
||||||
<option value="@difficulty">@difficulty</option>
|
Instructions = new List<Francesco.Recipes.World.Models.BackendModels.Instruction.Instruction>()
|
||||||
}
|
})
|
||||||
</select>
|
|
||||||
<span asp-validation-for="Difficulty" class="text-danger"></span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label asp-for="Servings"></label>
|
<div class="mb-4">
|
||||||
<input asp-for="Servings" class="form-control" />
|
<h2>Bild/Video</h2>
|
||||||
<span asp-validation-for="Servings" class="text-danger"></span>
|
<div class="form-group">
|
||||||
|
<label asp-for="Photo">Foto</label>
|
||||||
|
<input asp-for="Photo" class="form-control-file" accept="image/*" />
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label asp-for="Video">Video</label>
|
||||||
|
<input asp-for="Video" class="form-control-file" accept="video/*" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label asp-for="PreparationTime"></label>
|
<div class="text-center mt-4">
|
||||||
<input asp-for="PreparationTime" class="form-control" />
|
<button type="submit" class="btn btn-success btn-lg">Rezept speichern</button>
|
||||||
<span asp-validation-for="PreparationTime" class="text-danger"></span>
|
<a asp-action="Index" asp-controller="Category" class="btn btn-secondary btn-lg ml-2">Abbrechen</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
|
||||||
<label asp-for="CookingTime"></label>
|
|
||||||
<input asp-for="CookingTime" class="form-control" />
|
|
||||||
<span asp-validation-for="CookingTime" class="text-danger"></span>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="photo">Photo</label>
|
|
||||||
<input type="file" name="photo" class="form-control" />
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn btn-primary">Create</button>
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
@section Scripts {
|
<style>
|
||||||
@{
|
.instruction-item, .ingredient-item {
|
||||||
await Html.RenderPartialAsync("_ValidationScriptsPartial");
|
background-color: #f8f9fa;
|
||||||
}
|
padding: 15px;
|
||||||
}
|
margin-bottom: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instruction-controls, .ingredient-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instruction-media {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instruction-media img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instruction-file {
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea.form-control {
|
||||||
|
min-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-delete, .btn-move-up, .btn-move-down, .btn-save {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-delete {
|
||||||
|
color: #dc3545;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-save {
|
||||||
|
color: #28a745;
|
||||||
|
}
|
||||||
|
|
||||||
|
.instruction-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-add {
|
||||||
|
background-color: #007bff;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
@section Scripts {
|
||||||
|
<script>
|
||||||
|
window.recipeId = '@Model.CategoryId';
|
||||||
|
</script>
|
||||||
|
<script src="~/js/site.js"></script>
|
||||||
|
@await Html.PartialAsync("_ValidationScriptsPartial")
|
||||||
|
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user