80 lines
2.9 KiB
HTML
80 lines
2.9 KiB
HTML
@let recipe = recipeView().recipe;
|
|
<article>
|
|
<div id="recipe-header">
|
|
<div>
|
|
<h1>{{ recipe.title }}</h1>
|
|
<div class="recipe-actions">
|
|
@if (isLoggedIn()) {
|
|
<button id="star" matButton="filled" (click)="starMutation.mutate()">
|
|
<div id="star-label">
|
|
<fa-icon [icon]="faStar" />
|
|
<span>Star</span>
|
|
<span id="star-count">{{ recipe.starCount }}</span>
|
|
</div>
|
|
</button>
|
|
} @else {
|
|
<div>
|
|
<fa-icon [icon]="faStar" />
|
|
<span id="star-count">{{ recipe.starCount }}</span>
|
|
</div>
|
|
}
|
|
@if (isOwner()) {
|
|
<button class="actions-button" matButton="text" [matMenuTriggerFor]="recipeActionsMenu">
|
|
<fa-icon [icon]="faEllipsis" size="3x"></fa-icon>
|
|
</button>
|
|
<mat-menu #recipeActionsMenu="matMenu">
|
|
<button mat-menu-item (click)="onRecipeEdit()">Edit recipe</button>
|
|
<button mat-menu-item (click)="onRecipeDelete()">Delete recipe</button>
|
|
</mat-menu>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<fa-icon [icon]="faUser" />
|
|
<span>{{ recipe.owner.username }}</span>
|
|
</div>
|
|
@if (recipe.isPublic) {
|
|
<fa-icon [icon]="faGlobe" />
|
|
} @else {
|
|
<fa-icon [icon]="faLock" />
|
|
}
|
|
</div>
|
|
</div>
|
|
@if (mainImageQuery.isLoading()) {
|
|
<app-spinner></app-spinner>
|
|
} @else if (mainImageQuery.isError()) {
|
|
<p>There was an error loading the main image.</p>
|
|
} @else if (mainImageQuery.isEnabled()) {
|
|
<img
|
|
id="main-image"
|
|
[src]="mainImageQuery.data()!.blobUrl"
|
|
[alt]="recipe.mainImage!.alt"
|
|
[height]="recipe.mainImage!.height"
|
|
[width]="recipe.mainImage!.width"
|
|
/>
|
|
}
|
|
|
|
@if (recipe.ingredients?.length) {
|
|
<h3>Ingredients</h3>
|
|
<ul class="ingredients-list">
|
|
@for (ingredient of recipe.ingredients; track $index) {
|
|
<li class="ingredient">
|
|
@if (ingredient.amount) {
|
|
<span>{{ ingredient.amount }}</span>
|
|
}
|
|
<span>{{ ingredient.name }}</span>
|
|
@if (ingredient.notes) {
|
|
<span>{{ ingredient.notes }}</span>
|
|
}
|
|
</li>
|
|
}
|
|
</ul>
|
|
}
|
|
|
|
<h3>Instructions</h3>
|
|
<div [innerHTML]="recipe.text"></div>
|
|
|
|
<app-recipe-comments-list [recipeUsername]="recipe.owner.username" [recipeSlug]="recipe.slug" />
|
|
</article>
|