Add ability to google recipe per-ingredient nutrient data

This commit is contained in:
Christopher C. Wells 2021-02-16 06:04:14 -08:00
parent 8ce5b82825
commit e356c56bf6
3 changed files with 46 additions and 18 deletions

View File

@ -36,6 +36,7 @@ class IngredientAmountSchema extends SchemaProvider
'protein' => $resource->protein(), 'protein' => $resource->protein(),
'sodium' => $resource->sodium(), 'sodium' => $resource->sodium(),
'detail' => $resource->detail, 'detail' => $resource->detail,
'nutrientsSummary' => $resource->nutrients_summary,
'weight' => $resource->weight, 'weight' => $resource->weight,
'createdAt' => $resource->created_at, 'createdAt' => $resource->created_at,
'updatedAt' => $resource->updated_at, 'updatedAt' => $resource->updated_at,

View File

@ -85,7 +85,11 @@ final class IngredientAmount extends Model
/** /**
* @inheritdoc * @inheritdoc
*/ */
protected $appends = ['amount_formatted', 'unit_formatted']; protected $appends = [
'amount_formatted',
'nutrients_summary',
'unit_formatted'
];
/** /**
* Get the amount as a formatted string (e.g. 0.5 = 1/2). * Get the amount as a formatted string (e.g. 0.5 = 1/2).
@ -94,6 +98,20 @@ final class IngredientAmount extends Model
return Number::fractionStringFromFloat($this->amount); return Number::fractionStringFromFloat($this->amount);
} }
/**
* Get a simple string summary of nutrients for the ingredient amount.
*
* TODO: Move to HasIngredients trait.
*/
public function getNutrientsSummaryAttribute(): string {
$summary = [];
foreach (Nutrients::$all as $nutrient) {
$amount = round($this->{$nutrient['value']}(), 2);
$summary[] = "{$nutrient['label']}: {$amount}";
}
return implode(', ', $summary);
}
/** /**
* Get a "formatted" unit. * Get a "formatted" unit.
* *

View File

@ -16,7 +16,7 @@
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg"> <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200"> <div class="p-6 bg-white border-b border-gray-200">
<div class="flex flex-col-reverse justify-between pb-4 sm:flex-row"> <div class="flex flex-col-reverse justify-between pb-4 sm:flex-row">
<div> <div x-data="{showNutrientsSummary: false}">
@if(!$recipe->tags->isEmpty()) @if(!$recipe->tags->isEmpty())
<div class="mb-2 text-gray-700 text-sm"> <div class="mb-2 text-gray-700 text-sm">
<span class="font-extrabold">Tags:</span> <span class="font-extrabold">Tags:</span>
@ -27,24 +27,33 @@
<h3 class="mb-2 font-bold text-2xl">Description</h3> <h3 class="mb-2 font-bold text-2xl">Description</h3>
<div class="mb-2 text-gray-800">{{ $recipe->description }}</div> <div class="mb-2 text-gray-800">{{ $recipe->description }}</div>
@endif @endif
<h3 class="mb-2 font-bold text-2xl">Ingredients</h3> <h3 class="mb-2 font-bold text-2xl">
@foreach($recipe->ingredientAmounts as $ia) Ingredients
<div class="flex flex-row space-x-2 mb-2"> <span class="text-sm font-normal cursor-pointer"
<div>{{ \App\Support\Number::fractionStringFromFloat($ia->amount) }}</div> x-on:click="showNutrientsSummary = !showNutrientsSummary">[toggle nutrients]</span>
@if($ia->unitFormatted)<div>{{ $ia->unitFormatted }}</div>@endif </h3>
<div class="space-y-2">
@foreach($recipe->ingredientAmounts as $ia)
<div> <div>
@if($ia->ingredient->type === \App\Models\Recipe::class) <div class="flex flex-row space-x-2">
<a class="text-gray-500 hover:text-gray-700 hover:border-gray-300" <div>{{ \App\Support\Number::fractionStringFromFloat($ia->amount) }}</div>
href="{{ route('recipes.show', $ia->ingredient) }}"> @if($ia->unitFormatted)<div>{{ $ia->unitFormatted }}</div>@endif
{{ $ia->ingredient->name }} <div>
</a> @if($ia->ingredient->type === \App\Models\Recipe::class)
@else <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
{{ $ia->ingredient->name }}@if($ia->ingredient->detail), {{ $ia->ingredient->detail }}@endif href="{{ route('recipes.show', $ia->ingredient) }}">
@endif {{ $ia->ingredient->name }}
</a>
@else
{{ $ia->ingredient->name }}@if($ia->ingredient->detail), {{ $ia->ingredient->detail }}@endif
@endif
</div>
@if($ia->detail)<div class="text-gray-500">{{ $ia->detail }}</div>@endif
</div>
<div x-show="showNutrientsSummary" class="text-sm text-gray-500">{{ $ia->nutrients_summary }}</div>
</div> </div>
@if($ia->detail)<div class="text-gray-500">{{ $ia->detail }}</div>@endif @endforeach
</div> </div>
@endforeach
</div> </div>
<div> <div>
<div class="p-1 border-2 border-black font-sans md:w-72"> <div class="p-1 border-2 border-black font-sans md:w-72">