Make a searchResultPartial and initial HomePage with filter system

2025-04-16 11:20:33 +02:00
parent 3ec9d4be79
commit c8ff0dd9dd
2 changed files with 60 additions and 0 deletions
@@ -0,0 +1,6 @@
+<form hx-get="/Home/Search" hx-target="#search-results" hx-trigger="keyup changed delay:300ms" onsubmit="return false;" class="mb-4">
+	<input type="text" name="query" class="form-control" placeholder="Suchen nach Rezepten oder Zutaten..." autocomplete="off" />
+</form>
+
+<div id="search-results" class="mt-4"></div>
+
@@ -0,0 +1,54 @@
+@model IEnumerable<Francesco.Recipes.World.Models.BackendModels.Recipe.Recipe>
+
+@if (!Model.Any())
+{
+	<p class="text-muted">Keine Ergebnisse gefunden.</p>
+}
+else
+{
+	<div class="row">
+		@foreach (var recipe in Model)
+		{
+			<div class="col-md-4 mb-3">
+				<div class="card h-100 shadow-sm">
+					<div class="recipe-image">
+						@{
+							var mediaFile = recipe.MediaFiles.FirstOrDefault();
+						}
+						@if (mediaFile != null && mediaFile.Data != null)
+						{
+							<img src="data:@mediaFile.MimeType;base64,@Convert.ToBase64String(mediaFile.Data)"
+								 alt="@recipe.Name"
+								 class="card-img-top" />
+						}
+						else
+						{
+							<img src="~/images/placeholder.png"
+								 alt="Platzhalter"
+								 class="card-img-top" />
+						}
+					</div>
+
+					<div class="card-body d-flex flex-column justify-content-between">
+						<div>
+							<h5 class="card-title">@recipe.Name</h5>
+							<p class="card-text text-muted mb-2">
+								<i class="bi bi-clock"></i>
+								@recipe.PreparationTime.Hours h @recipe.PreparationTime.Minutes min
+							</p>
+						</div>
+
+						<div>
+							<button class="btn btn-outline-secondary"
+									hx-post="/Recipe/ToggleFavorite"
+									hx-vals='{"id": "@recipe.Id"}'
+									hx-swap="outerHTML">
+								<i class="bi @((recipe.IsFavorite) ? "bi-star-fill" : "bi-star")"></i>
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		}
+	</div>
+}