mirror of https://github.com/kcal-app/kcal.git
Add page titles
This commit is contained in:
Christopher C. Wells
parent
2a6a1741e1
commit
3524836878
|
|
@ -1,4 +1,5 @@
|
|||
<x-guest-layout>
|
||||
<x-slot name="title">Confirm Password</x-slot>
|
||||
<x-auth-card>
|
||||
<x-slot name="logo">
|
||||
<a href="/">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<x-guest-layout>
|
||||
<x-slot name="title">Forgot Password</x-slot>
|
||||
<x-auth-card>
|
||||
<x-slot name="logo">
|
||||
<a href="/">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<x-guest-layout>
|
||||
<x-slot name="title">Login</x-slot>
|
||||
<x-auth-card>
|
||||
<x-slot name="logo">
|
||||
<a href="/">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<x-guest-layout>
|
||||
<x-slot name="title">Register</x-slot>
|
||||
<x-auth-card>
|
||||
<x-slot name="logo">
|
||||
<a href="/">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<x-guest-layout>
|
||||
<x-slot name="title">Reset Password</x-slot>
|
||||
<x-auth-card>
|
||||
<x-slot name="logo">
|
||||
<a href="/">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<x-guest-layout>
|
||||
<x-slot name="title">Verify Email</x-slot>
|
||||
<x-auth-card>
|
||||
<x-slot name="logo">
|
||||
<a href="/">
|
||||
|
|
|
|||
|
|
@ -1,49 +1,50 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">Delete {{ $food->name }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
Delete {{ $food->name }}?
|
||||
</h2>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ route('foods.destroy', $food) }}">
|
||||
@method('delete')
|
||||
@csrf
|
||||
<div class="pb-3">
|
||||
<div class="text-lg">Are you sure what to delete <span class="font-extrabold">{{ $food->name }}</span>?</div>
|
||||
<div class="flex flex-col space-y-2 mt-2 text-lg">
|
||||
@if($food->detail)
|
||||
<div>
|
||||
<span class="font-bold">Detail:</span>
|
||||
<span>{{ $food->detail }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@if($food->brand)
|
||||
<div>
|
||||
<span class="font-bold">Brand:</span>
|
||||
<span>{{ $food->brand }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@if(!$food->ingredientAmountRelationships->isEmpty())
|
||||
<div class="flex space-x-2 items-center text-lg">
|
||||
<div class="text-yellow-500">
|
||||
<svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>Deleting this food will also remove it from the following recipes:</div>
|
||||
</div>
|
||||
<ul class="list-disc list-inside ml-3 space-y-1">
|
||||
@foreach ($food->ingredientAmountRelationships as $ia)
|
||||
<li> <a class="text-gray-500 hover:text-gray-700"
|
||||
href="{{ route('recipes.show', $ia->parent) }}">{{ $ia->parent->name }}</a></li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
</div>
|
||||
@method('delete')
|
||||
@csrf
|
||||
<div class="pb-3">
|
||||
<div class="text-lg">Are you sure what to delete <span class="font-extrabold">{{ $food->name }}</span>?</div>
|
||||
<div class="flex flex-col space-y-2 mt-2 text-lg">
|
||||
@if($food->detail)
|
||||
<div>
|
||||
<span class="font-bold">Detail:</span>
|
||||
<span>{{ $food->detail }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@if($food->brand)
|
||||
<div>
|
||||
<span class="font-bold">Brand:</span>
|
||||
<span>{{ $food->brand }}</span>
|
||||
</div>
|
||||
@endif
|
||||
@if(!$food->ingredientAmountRelationships->isEmpty())
|
||||
<div class="flex space-x-2 items-center text-lg">
|
||||
<div class="text-yellow-500">
|
||||
<svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<x-inputs.button class="bg-red-800 hover:bg-red-700">
|
||||
Yes, delete
|
||||
</x-inputs.button>
|
||||
<a class="ml-3 text-gray-500 hover:text-gray-700" href="{{ route('foods.show', $food) }}">
|
||||
No, do not delete</a>
|
||||
</form>
|
||||
<div>Deleting this food will also remove it from the following recipes:</div>
|
||||
</div>
|
||||
<ul class="list-disc list-inside ml-3 space-y-1">
|
||||
@foreach ($food->ingredientAmountRelationships as $ia)
|
||||
<li> <a class="text-gray-500 hover:text-gray-700"
|
||||
href="{{ route('recipes.show', $ia->parent) }}">{{ $ia->parent->name }}</a></li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<x-inputs.button class="bg-red-800 hover:bg-red-700">
|
||||
Yes, delete
|
||||
</x-inputs.button>
|
||||
<a class="ml-3 text-gray-500 hover:text-gray-700" href="{{ route('foods.show', $food) }}">
|
||||
No, do not delete</a>
|
||||
</form>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<x-app-layout>
|
||||
{{ $title = ($food->exists ? "Edit {$food->name}" : 'Add Food') }}
|
||||
<x-slot name="title">{{ $title }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
{{ ($food->exists ? "Edit {$food->name}" : 'Add Food') }}
|
||||
</h2>
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h2>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ ($food->exists ? route('foods.update', $food) : route('foods.store')) }}">
|
||||
@if ($food->exists)@method('put')@endif
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">Foods</x-slot>
|
||||
<x-slot name="header">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="font-semibold text-2xl text-gray-800 leading-tight">Foods</h2>
|
||||
|
|
@ -11,58 +12,58 @@
|
|||
</div>
|
||||
</x-slot>
|
||||
<x-search-view :route="route('api:v1:foods.index')" :tags="$tags">
|
||||
<x-slot name="results">
|
||||
<template x-for="food in results" :key="food">
|
||||
<div class="p-1 border-2 border-black font-sans">
|
||||
<div class="text-2xl lowercase font-extrabold leading-none">
|
||||
<a x-bind:href="food.showUrl"
|
||||
class="hover:text-gray-600">
|
||||
<span x-text="food.name"></span><span class="text-gray-500" x-text="`, ${food.detail}`" x-show="food.detail"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="lowercase text-lg text-gray-600" x-text="food.brand" x-show="food.brand"></div>
|
||||
<div class="flex justify-between font-bold border-b-8 border-black">
|
||||
<div>Serving size</div>
|
||||
<div>
|
||||
<span x-text="food.servingSizeFormatted"></span>
|
||||
<span x-text="food.servingUnitFormatted ?? food.name"></span>
|
||||
<span x-text="`(${food.servingWeight}g)`"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-bold text-right">Amount per serving</div>
|
||||
<div class="flex justify-between items-end font-extrabold">
|
||||
<div class="text-xl">Calories</div>
|
||||
<div class="text-xl" x-text="food.calories"></div>
|
||||
</div>
|
||||
<div class="border-t-4 border-black text-sm">
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Fat</div>
|
||||
<div x-text="`${food.fat}g`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Cholesterol</div>
|
||||
<div x-text="`${food.cholesterol}mg`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Sodium</div>
|
||||
<div x-text="`${food.sodium}mg`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Carbohydrate</div>
|
||||
<div x-text="`${food.carbohydrates}g`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Protein</div>
|
||||
<div x-text="`${food.protein}g`"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</x-slot>
|
||||
</x-search-view>
|
||||
<x-slot name="results">
|
||||
<template x-for="food in results" :key="food">
|
||||
<div class="p-1 border-2 border-black font-sans">
|
||||
<div class="text-2xl lowercase font-extrabold leading-none">
|
||||
<a x-bind:href="food.showUrl"
|
||||
class="hover:text-gray-600">
|
||||
<span x-text="food.name"></span><span class="text-gray-500" x-text="`, ${food.detail}`" x-show="food.detail"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="lowercase text-lg text-gray-600" x-text="food.brand" x-show="food.brand"></div>
|
||||
<div class="flex justify-between font-bold border-b-8 border-black">
|
||||
<div>Serving size</div>
|
||||
<div>
|
||||
<span x-text="food.servingSizeFormatted"></span>
|
||||
<span x-text="food.servingUnitFormatted ?? food.name"></span>
|
||||
<span x-text="`(${food.servingWeight}g)`"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-bold text-right">Amount per serving</div>
|
||||
<div class="flex justify-between items-end font-extrabold">
|
||||
<div class="text-xl">Calories</div>
|
||||
<div class="text-xl" x-text="food.calories"></div>
|
||||
</div>
|
||||
<div class="border-t-4 border-black text-sm">
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Fat</div>
|
||||
<div x-text="`${food.fat}g`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Cholesterol</div>
|
||||
<div x-text="`${food.cholesterol}mg`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Sodium</div>
|
||||
<div x-text="`${food.sodium}mg`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Carbohydrate</div>
|
||||
<div x-text="`${food.carbohydrates}g`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Protein</div>
|
||||
<div x-text="`${food.protein}g`"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</x-slot>
|
||||
</x-search-view>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">{{ $food->name }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto items-center">
|
||||
<div>
|
||||
|
|
@ -23,81 +24,81 @@
|
|||
</h2>
|
||||
</x-slot>
|
||||
<div class="flex flex-col space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<div class="p-1 mb-2 border-2 border-black font-sans md:w-72">
|
||||
<div class="text-3xl font-extrabold leading-none">Nutrition Facts</div>
|
||||
<div class="flex justify-between font-bold border-b-8 border-black">
|
||||
<div>Serving size</div>
|
||||
<div>
|
||||
{{ $food->servingSizeFormatted }}
|
||||
{{ $food->servingUnitFormatted ?? $food->name }}
|
||||
({{ $food->serving_weight }}g)
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-bold text-right">Amount per serving</div>
|
||||
<div class="flex justify-between items-end font-extrabold">
|
||||
<div class="text-3xl">Calories</div>
|
||||
<div class="text-4xl">{{ $food->calories }}</div>
|
||||
</div>
|
||||
<div class="border-t-4 border-black text-sm">
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Fat</div>
|
||||
<div>{{ $food->fat }}g</div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Cholesterol</div>
|
||||
<div>{{ $food->cholesterol }}mg</div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Sodium</div>
|
||||
<div>{{ $food->sodium }}mg</div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Carbohydrate</div>
|
||||
<div>{{ $food->carbohydrates }}g</div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Protein</div>
|
||||
<div>{{ $food->protein }}g</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-2">
|
||||
@if(!$food->tags->isEmpty())
|
||||
<h3 class="font-bold text-2xl">Tags</h3>
|
||||
<div class="flex flex-wrap">
|
||||
@foreach ($food->tags as $tag)
|
||||
<span class="m-1 bg-gray-200 rounded-full px-2 leading-loose">{{ $tag->name }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
@if($food->description)
|
||||
<h3 class="font-bold text-2xl">Description</h3>
|
||||
<div class="text-gray-800">{{ $food->description }}</div>
|
||||
@endif
|
||||
@if(!$food->ingredientAmountRelationships->isEmpty())
|
||||
<h3 class="font-bold text-2xl">Recipes</h3>
|
||||
<ul class="list-disc list-inside ml-3 space-y-1">
|
||||
@foreach ($food->ingredientAmountRelationships as $ia)
|
||||
<li> <a class="text-gray-500 hover:text-gray-700"
|
||||
href="{{ route('recipes.show', $ia->parent) }}">{{ $ia->parent->name }}</a></li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
@if($food->source)
|
||||
<h3 class="font-bold text-2xl">Source</h3>
|
||||
<div>
|
||||
@if(filter_var($food->source, FILTER_VALIDATE_URL))
|
||||
<a class="text-gray-500 hover:text-gray-700" href="{{ $food->source }}">{{ $food->source }}</a>
|
||||
@else
|
||||
{{ $food->source }}
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="p-1 mb-2 border-2 border-black font-sans md:w-72">
|
||||
<div class="text-3xl font-extrabold leading-none">Nutrition Facts</div>
|
||||
<div class="flex justify-between font-bold border-b-8 border-black">
|
||||
<div>Serving size</div>
|
||||
<div>
|
||||
{{ $food->servingSizeFormatted }}
|
||||
{{ $food->servingUnitFormatted ?? $food->name }}
|
||||
({{ $food->serving_weight }}g)
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-bold text-right">Amount per serving</div>
|
||||
<div class="flex justify-between items-end font-extrabold">
|
||||
<div class="text-3xl">Calories</div>
|
||||
<div class="text-4xl">{{ $food->calories }}</div>
|
||||
</div>
|
||||
<div class="border-t-4 border-black text-sm">
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Fat</div>
|
||||
<div>{{ $food->fat }}g</div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Cholesterol</div>
|
||||
<div>{{ $food->cholesterol }}mg</div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Sodium</div>
|
||||
<div>{{ $food->sodium }}mg</div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Carbohydrate</div>
|
||||
<div>{{ $food->carbohydrates }}g</div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Protein</div>
|
||||
<div>{{ $food->protein }}g</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-2">
|
||||
@if(!$food->tags->isEmpty())
|
||||
<h3 class="font-bold text-2xl">Tags</h3>
|
||||
<div class="flex flex-wrap">
|
||||
@foreach ($food->tags as $tag)
|
||||
<span class="m-1 bg-gray-200 rounded-full px-2 leading-loose">{{ $tag->name }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
@if($food->description)
|
||||
<h3 class="font-bold text-2xl">Description</h3>
|
||||
<div class="text-gray-800">{{ $food->description }}</div>
|
||||
@endif
|
||||
@if(!$food->ingredientAmountRelationships->isEmpty())
|
||||
<h3 class="font-bold text-2xl">Recipes</h3>
|
||||
<ul class="list-disc list-inside ml-3 space-y-1">
|
||||
@foreach ($food->ingredientAmountRelationships as $ia)
|
||||
<li> <a class="text-gray-500 hover:text-gray-700"
|
||||
href="{{ route('recipes.show', $ia->parent) }}">{{ $ia->parent->name }}</a></li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
@if($food->source)
|
||||
<h3 class="font-bold text-2xl">Source</h3>
|
||||
<div>
|
||||
@if(filter_var($food->source, FILTER_VALIDATE_URL))
|
||||
<a class="text-gray-500 hover:text-gray-700" href="{{ $food->source }}">{{ $food->source }}</a>
|
||||
@else
|
||||
{{ $food->source }}
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,20 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">Delete Goal</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
Delete {{ $goal->goal }} goal?
|
||||
</h2>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ route('goals.destroy', $goal) }}">
|
||||
@method('delete')
|
||||
@csrf
|
||||
<div class="text-lg pb-3">
|
||||
Are you sure what to delete your <span class="font-extrabold">{{ $goal->summary }}</span> goal?
|
||||
</div>
|
||||
<x-inputs.button class="bg-red-800 hover:bg-red-700">
|
||||
Yes, delete
|
||||
</x-inputs.button>
|
||||
<a class="ml-3 text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
href="{{ route('goals.show', $goal) }}">No, do not delete</a>
|
||||
</form>
|
||||
@method('delete')
|
||||
@csrf
|
||||
<div class="text-lg pb-3">
|
||||
Are you sure what to delete your <span class="font-extrabold">{{ $goal->summary }}</span> goal?
|
||||
</div>
|
||||
<x-inputs.button class="bg-red-800 hover:bg-red-700">
|
||||
Yes, delete
|
||||
</x-inputs.button>
|
||||
<a class="ml-3 text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
href="{{ route('goals.show', $goal) }}">No, do not delete</a>
|
||||
</form>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -1,70 +1,70 @@
|
|||
<x-app-layout>
|
||||
{{ $title = ($goal->exists ? 'Edit' : 'Add') . ' Goal' }}
|
||||
<x-slot name="title">{{ $title }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
{{ ($goal->exists ? 'Edit' : 'Add') }} Goal
|
||||
</h2>
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h2>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ ($goal->exists ? route('goals.update', $goal) : route('goals.store')) }}">
|
||||
@if ($goal->exists)@method('put')@endif
|
||||
@csrf
|
||||
<div class="flex flex-col space-y-4">
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
|
||||
<!-- From -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="from" value="From"/>
|
||||
<x-inputs.input name="from"
|
||||
type="date"
|
||||
class="block w-full"
|
||||
:value="old('from', $goal->from?->toDateString())" />
|
||||
</div>
|
||||
@if ($goal->exists)@method('put')@endif
|
||||
@csrf
|
||||
<div class="flex flex-col space-y-4">
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
|
||||
<!-- From -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="from" value="From"/>
|
||||
<x-inputs.input name="from"
|
||||
type="date"
|
||||
class="block w-full"
|
||||
:value="old('from', $goal->from?->toDateString())" />
|
||||
</div>
|
||||
|
||||
<!-- To -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="to" value="To"/>
|
||||
<x-inputs.input name="to"
|
||||
type="date"
|
||||
class="block w-full"
|
||||
:value="old('to', $goal->to?->toDateString())" />
|
||||
</div>
|
||||
<!-- To -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="to" value="To"/>
|
||||
<x-inputs.input name="to"
|
||||
type="date"
|
||||
class="block w-full"
|
||||
:value="old('to', $goal->to?->toDateString())" />
|
||||
</div>
|
||||
|
||||
<!-- Frequency -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="frequency" value="Frequency" />
|
||||
<x-inputs.select name="frequency"
|
||||
class="block w-full"
|
||||
:options="$frequencyOptions"
|
||||
:selectedValue="old('frequency', $goal->frequency)">
|
||||
</x-inputs.select>
|
||||
</div>
|
||||
<!-- Frequency -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="frequency" value="Frequency" />
|
||||
<x-inputs.select name="frequency"
|
||||
class="block w-full"
|
||||
:options="$frequencyOptions"
|
||||
:selectedValue="old('frequency', $goal->frequency)">
|
||||
</x-inputs.select>
|
||||
</div>
|
||||
|
||||
<!-- Name -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="name" value="Trackable" />
|
||||
<x-inputs.select name="name"
|
||||
class="block w-full"
|
||||
:options="$nameOptions"
|
||||
:selectedValue="old('name', $goal->name)"
|
||||
required>
|
||||
</x-inputs.select>
|
||||
</div>
|
||||
<!-- Name -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="name" value="Trackable" />
|
||||
<x-inputs.select name="name"
|
||||
class="block w-full"
|
||||
:options="$nameOptions"
|
||||
:selectedValue="old('name', $goal->name)"
|
||||
required>
|
||||
</x-inputs.select>
|
||||
</div>
|
||||
|
||||
<!-- Goal -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="goal" value="Goal" />
|
||||
<x-inputs.input name="goal"
|
||||
type="number"
|
||||
step="any"
|
||||
class="block w-full"
|
||||
:value="old('goal', $goal->goal)"
|
||||
required />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Goal -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="goal" value="Goal" />
|
||||
<x-inputs.input name="goal"
|
||||
type="number"
|
||||
step="any"
|
||||
class="block w-full"
|
||||
:value="old('goal', $goal->goal)"
|
||||
required />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mt-4">
|
||||
<x-inputs.button class="ml-3">
|
||||
{{ ($goal->exists ? 'Save' : 'Add') }}
|
||||
</x-inputs.button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex items-center justify-end mt-4">
|
||||
<x-inputs.button class="ml-3">
|
||||
{{ ($goal->exists ? 'Save' : 'Add') }}
|
||||
</x-inputs.button>
|
||||
</div>
|
||||
</form>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">My Goals - {{ $date->format('D, j M Y') }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="leading-tight text-center">
|
||||
<div class="text-2xl font-semibold text-gray-800">{{ Auth::user()->name }}'s Goals</div>
|
||||
<div class="text-2xl font-semibold text-gray-800">My Goals</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<div>
|
||||
<a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
|
|
@ -32,25 +33,25 @@
|
|||
</div>
|
||||
</x-slot>
|
||||
<div class="space-y-4">
|
||||
@forelse($goals['present'] as $goal)
|
||||
<div class="flex space-x-2 items-center">
|
||||
<a class="text-gray-500 hover:text-gray-700 hover:border-gray-300 text-sm"
|
||||
href="{{ route('goals.edit', $goal) }}">
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
|
||||
<path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
<a class="text-red-500 hover:text-red-700 hover:border-red-300 text-sm"
|
||||
href="{{ route('goals.delete', $goal) }}">
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
<div class="text-lg font-bold">{{ $goal->summary }}</div>
|
||||
</div>
|
||||
@empty
|
||||
<div>No goals set.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
@forelse($goals['present'] as $goal)
|
||||
<div class="flex space-x-2 items-center">
|
||||
<a class="text-gray-500 hover:text-gray-700 hover:border-gray-300 text-sm"
|
||||
href="{{ route('goals.edit', $goal) }}">
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
|
||||
<path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
<a class="text-red-500 hover:text-red-700 hover:border-red-300 text-sm"
|
||||
href="{{ route('goals.delete', $goal) }}">
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
<div class="text-lg font-bold">{{ $goal->summary }}</div>
|
||||
</div>
|
||||
@empty
|
||||
<div>No goals set.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">Goal</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto">
|
||||
{{ $goal->summary }}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">Add Entry</x-slot>
|
||||
<x-slot name="header">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Add Entry</h2>
|
||||
|
|
@ -8,63 +9,63 @@
|
|||
</div>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ route('journal-entries.store.from-nutrients') }}">
|
||||
@csrf
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 w-full mb-4">
|
||||
<!-- Date -->
|
||||
<div class="w-full sm:w-auto">
|
||||
<x-inputs.label for="date" value="Date"/>
|
||||
@csrf
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 w-full mb-4">
|
||||
<!-- Date -->
|
||||
<div class="w-full sm:w-auto">
|
||||
<x-inputs.label for="date" value="Date"/>
|
||||
|
||||
<x-inputs.input name="date"
|
||||
type="date"
|
||||
class="block w-full"
|
||||
:value="old('date', $default_date->toDateString())"
|
||||
required />
|
||||
</div>
|
||||
<x-inputs.input name="date"
|
||||
type="date"
|
||||
class="block w-full"
|
||||
:value="old('date', $default_date->toDateString())"
|
||||
required />
|
||||
</div>
|
||||
|
||||
<!-- Meal -->
|
||||
<div class="w-full sm:w-auto">
|
||||
<x-inputs.label for="meal" value="Meal"/>
|
||||
<!-- Meal -->
|
||||
<div class="w-full sm:w-auto">
|
||||
<x-inputs.label for="meal" value="Meal"/>
|
||||
|
||||
<x-inputs.select name="meal"
|
||||
class="block w-full"
|
||||
:options="$meals"
|
||||
:selectedValue="old('meal')"
|
||||
required>
|
||||
<option value=""></option>
|
||||
</x-inputs.select>
|
||||
</div>
|
||||
<x-inputs.select name="meal"
|
||||
class="block w-full"
|
||||
:options="$meals"
|
||||
:selectedValue="old('meal')"
|
||||
required>
|
||||
<option value=""></option>
|
||||
</x-inputs.select>
|
||||
</div>
|
||||
|
||||
<!-- Summary -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="summary" value="Summary"/>
|
||||
<!-- Summary -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="summary" value="Summary"/>
|
||||
|
||||
<x-inputs.input name="summary"
|
||||
type="text"
|
||||
class="block w-full"
|
||||
:value="old('summary')"
|
||||
required />
|
||||
</div>
|
||||
</div>
|
||||
<x-inputs.input name="summary"
|
||||
type="text"
|
||||
class="block w-full"
|
||||
:value="old('summary')"
|
||||
required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 w-full">
|
||||
@foreach (\App\Support\Nutrients::all()->sortBy('weight') as $nutrient)
|
||||
<!-- {{ ucfirst($nutrient['value']) }} -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="{{ $nutrient['value'] }}"
|
||||
:value="ucfirst($nutrient['value']) . ($nutrient['unit'] ? ' (' . $nutrient['unit'] . ')' : '')"/>
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 w-full">
|
||||
@foreach (\App\Support\Nutrients::all()->sortBy('weight') as $nutrient)
|
||||
<!-- {{ ucfirst($nutrient['value']) }} -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="{{ $nutrient['value'] }}"
|
||||
:value="ucfirst($nutrient['value']) . ($nutrient['unit'] ? ' (' . $nutrient['unit'] . ')' : '')"/>
|
||||
|
||||
<x-inputs.input id="{{ $nutrient['value'] }}"
|
||||
class="block w-full"
|
||||
type="number"
|
||||
step="any"
|
||||
name="{{ $nutrient['value'] }}"
|
||||
:value="old($nutrient['value'])"/>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<x-inputs.input id="{{ $nutrient['value'] }}"
|
||||
class="block w-full"
|
||||
type="number"
|
||||
step="any"
|
||||
name="{{ $nutrient['value'] }}"
|
||||
:value="old($nutrient['value'])"/>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end mt-4">
|
||||
<x-inputs.button class="ml-3">Add Entry</x-inputs.button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex items-center justify-end mt-4">
|
||||
<x-inputs.button class="ml-3">Add Entry</x-inputs.button>
|
||||
</div>
|
||||
</form>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">Add Entries</x-slot>
|
||||
<x-slot name="header">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Add Entries</h2>
|
||||
|
|
@ -8,28 +9,28 @@
|
|||
</div>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ route('journal-entries.store') }}">
|
||||
@csrf
|
||||
<div x-data x-init="initJournalEntries($el);" class="space-y-4">
|
||||
@foreach($ingredients as $ingredient)
|
||||
@include('journal-entries.partials.entry-item-input', $ingredient)
|
||||
@endforeach
|
||||
<div class="journal-entry-template hidden">
|
||||
@include('journal-entries.partials.entry-item-input', ['default_date' => $default_date])
|
||||
</div>
|
||||
<x-inputs.icon-button type="button" color="green" x-on:click="addEntryNode($el);">
|
||||
<svg class="h-10 w-10 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</x-inputs.icon-button>
|
||||
<div class="flex items-center justify-end mt-4 space-x-4">
|
||||
<fieldset class="flex space-x-2">
|
||||
<x-inputs.label for="groupEntries" value="Group entries by day and meal" />
|
||||
<x-inputs.input type="checkbox" name="group_entries" value="1" checked />
|
||||
</fieldset>
|
||||
<x-inputs.button x-on:click="removeTemplate($el);">Add entries</x-inputs.button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@csrf
|
||||
<div x-data x-init="initJournalEntries($el);" class="space-y-4">
|
||||
@foreach($ingredients as $ingredient)
|
||||
@include('journal-entries.partials.entry-item-input', $ingredient)
|
||||
@endforeach
|
||||
<div class="journal-entry-template hidden">
|
||||
@include('journal-entries.partials.entry-item-input', ['default_date' => $default_date])
|
||||
</div>
|
||||
<x-inputs.icon-button type="button" color="green" x-on:click="addEntryNode($el);">
|
||||
<svg class="h-10 w-10 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</x-inputs.icon-button>
|
||||
<div class="flex items-center justify-end mt-4 space-x-4">
|
||||
<fieldset class="flex space-x-2">
|
||||
<x-inputs.label for="groupEntries" value="Group entries by day and meal" />
|
||||
<x-inputs.input type="checkbox" name="group_entries" value="1" checked />
|
||||
</fieldset>
|
||||
<x-inputs.button x-on:click="removeTemplate($el);">Add entries</x-inputs.button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@once
|
||||
@push('scripts')
|
||||
|
|
|
|||
|
|
@ -1,31 +1,32 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">Delete Entry</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
Delete {{ $entry->summary }}?
|
||||
</h2>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ route('journal-entries.destroy', $entry) }}">
|
||||
@method('delete')
|
||||
@csrf
|
||||
<div class="text-lg">Are you sure what to delete this journal entry?</div>
|
||||
<div class="flex flex-col space-y-2 mt-4 mb-4 text-lg">
|
||||
<div>
|
||||
<span class="font-bold">Summay:</span>
|
||||
<span>{{ $entry->summary }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-bold">Date:</span>
|
||||
<span>{{ $entry->date->format('D, j M Y') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-bold">Meal:</span>
|
||||
<span>{{ $entry->meal }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<x-inputs.button class="bg-red-800 hover:bg-red-700">
|
||||
Yes, delete
|
||||
</x-inputs.button>
|
||||
<a class="ml-3 text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
href="{{ route('journal-entries.index') }}">No, do not delete</a>
|
||||
</form>
|
||||
@method('delete')
|
||||
@csrf
|
||||
<div class="text-lg">Are you sure what to delete this journal entry?</div>
|
||||
<div class="flex flex-col space-y-2 mt-4 mb-4 text-lg">
|
||||
<div>
|
||||
<span class="font-bold">Summay:</span>
|
||||
<span>{{ $entry->summary }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-bold">Date:</span>
|
||||
<span>{{ $entry->date->format('D, j M Y') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-bold">Meal:</span>
|
||||
<span>{{ $entry->meal }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<x-inputs.button class="bg-red-800 hover:bg-red-700">
|
||||
Yes, delete
|
||||
</x-inputs.button>
|
||||
<a class="ml-3 text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
href="{{ route('journal-entries.index') }}">No, do not delete</a>
|
||||
</form>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">My Journal - {{ $date->format('D, j M Y') }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="leading-tight text-center">
|
||||
<div class="text-2xl font-semibold text-gray-800">{{ Auth::user()->name }}'s Journal</div>
|
||||
<div class="text-2xl font-semibold text-gray-800">My Journal</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<div>
|
||||
<a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
|
|
@ -32,128 +33,128 @@
|
|||
</div>
|
||||
</x-slot>
|
||||
<div class="flex align-top flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<div class="w-full sm:w-5/12 lg:w-4/12">
|
||||
<div class="flex justify-between items-baseline">
|
||||
<h3 class="font-semibold text-lg text-gray-800">{{ $date->format('D, j M Y') }}</h3>
|
||||
<div class="text-gray-700">{{ $entries->count() }} {{ \Illuminate\Support\Pluralizer::plural('entry', $entries->count()) }}</div>
|
||||
</div>
|
||||
<div class="text-right border-t-8 border-black text-sm pt-2">% Daily goal</div>
|
||||
<div class="flex justify-between items-baseline border-b-4 border-black">
|
||||
<div>
|
||||
<span class="font-extrabold text-2xl">Calories</span>
|
||||
<span class="text-lg">{{ number_format($sums['calories']) }}</span>
|
||||
</div>
|
||||
<div class="font-extrabold text-right text-lg">
|
||||
{{ $dailyGoals['calories'] ?? 'N/A' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline border-b border-gray-300 text-sm">
|
||||
<div>
|
||||
<span class="font-bold">Fat</span>
|
||||
{{ number_format($sums['fat']) }}g
|
||||
</div>
|
||||
<div class="text-right">
|
||||
{{ $dailyGoals['fat'] ?? 'N/A' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline border-b border-gray-300 text-sm">
|
||||
<div>
|
||||
<span class="font-bold">Cholesterol</span>
|
||||
{{ number_format($sums['cholesterol']) }}mg
|
||||
</div>
|
||||
<div class="text-right">
|
||||
{{ $dailyGoals['cholesterol'] ?? 'N/A' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline border-b border-gray-300 text-sm">
|
||||
<div>
|
||||
<span class="font-bold">Sodium</span>
|
||||
{{ number_format($sums['sodium']) }}mg
|
||||
</div>
|
||||
<div class="text-right">
|
||||
{{ $dailyGoals['sodium'] ?? 'N/A' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline border-b border-gray-300 text-sm">
|
||||
<div>
|
||||
<span class="font-bold">Carbohydrates</span>
|
||||
{{ number_format($sums['carbohydrates']) }}g
|
||||
</div>
|
||||
<div class="text-right">
|
||||
{{ $dailyGoals['carbohydrates'] ?? 'N/A' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline text-sm">
|
||||
<div>
|
||||
<span class="font-bold">Protein</span>
|
||||
{{ number_format($sums['protein']) }}g
|
||||
</div>
|
||||
<div class="text-right">
|
||||
{{ $dailyGoals['protein'] ?? 'N/A' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full sm:w-5/12 lg:w-4/12">
|
||||
<div class="flex justify-between items-baseline">
|
||||
<h3 class="font-semibold text-lg text-gray-800">{{ $date->format('D, j M Y') }}</h3>
|
||||
<div class="text-gray-700">{{ $entries->count() }} {{ \Illuminate\Support\Pluralizer::plural('entry', $entries->count()) }}</div>
|
||||
</div>
|
||||
<div class="text-right border-t-8 border-black text-sm pt-2">% Daily goal</div>
|
||||
<div class="flex justify-between items-baseline border-b-4 border-black">
|
||||
<div>
|
||||
<span class="font-extrabold text-2xl">Calories</span>
|
||||
<span class="text-lg">{{ number_format($sums['calories']) }}</span>
|
||||
</div>
|
||||
<div class="font-extrabold text-right text-lg">
|
||||
{{ $dailyGoals['calories'] ?? 'N/A' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline border-b border-gray-300 text-sm">
|
||||
<div>
|
||||
<span class="font-bold">Fat</span>
|
||||
{{ number_format($sums['fat']) }}g
|
||||
</div>
|
||||
<div class="text-right">
|
||||
{{ $dailyGoals['fat'] ?? 'N/A' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline border-b border-gray-300 text-sm">
|
||||
<div>
|
||||
<span class="font-bold">Cholesterol</span>
|
||||
{{ number_format($sums['cholesterol']) }}mg
|
||||
</div>
|
||||
<div class="text-right">
|
||||
{{ $dailyGoals['cholesterol'] ?? 'N/A' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline border-b border-gray-300 text-sm">
|
||||
<div>
|
||||
<span class="font-bold">Sodium</span>
|
||||
{{ number_format($sums['sodium']) }}mg
|
||||
</div>
|
||||
<div class="text-right">
|
||||
{{ $dailyGoals['sodium'] ?? 'N/A' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline border-b border-gray-300 text-sm">
|
||||
<div>
|
||||
<span class="font-bold">Carbohydrates</span>
|
||||
{{ number_format($sums['carbohydrates']) }}g
|
||||
</div>
|
||||
<div class="text-right">
|
||||
{{ $dailyGoals['carbohydrates'] ?? 'N/A' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-baseline text-sm">
|
||||
<div>
|
||||
<span class="font-bold">Protein</span>
|
||||
{{ number_format($sums['protein']) }}g
|
||||
</div>
|
||||
<div class="text-right">
|
||||
{{ $dailyGoals['protein'] ?? 'N/A' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full sm:w-3/5 md:w-2/3 lg:w-3/4 flex flex-col space-y-4">
|
||||
@foreach(['breakfast', 'lunch', 'dinner', 'snacks'] as $meal)
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg text-gray-800">
|
||||
<div class="flex items-center">
|
||||
<div>{{ Str::ucfirst($meal) }}</div>
|
||||
<div class="ml-2 w-full"><hr/></div>
|
||||
</div>
|
||||
<div class="w-full sm:w-3/5 md:w-2/3 lg:w-3/4 flex flex-col space-y-4">
|
||||
@foreach(['breakfast', 'lunch', 'dinner', 'snacks'] as $meal)
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg text-gray-800">
|
||||
<div class="flex items-center">
|
||||
<div>{{ Str::ucfirst($meal) }}</div>
|
||||
<div class="ml-2 w-full"><hr/></div>
|
||||
</div>
|
||||
<span class="text-sm text-gray-500">
|
||||
@foreach(\App\Support\Nutrients::all()->sortBy('weight') as $nutrient)
|
||||
{{ round($entries->where('meal', $meal)->sum($nutrient['value']), 2) }}{{ $nutrient['unit'] }}
|
||||
{{ $nutrient['value'] }}@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</span>
|
||||
</h3>
|
||||
@forelse($entries->where('meal', $meal) as $entry)
|
||||
<details>
|
||||
<summary>{{ $entry->summary }}</summary>
|
||||
<div class="border-blue-100 border-2 p-2 ml-4">
|
||||
<div class="float-right">
|
||||
<a class="h-6 w-6 text-red-500 hover:text-red-700 hover:border-red-300 float-right text-sm"
|
||||
href="{{ route('journal-entries.delete', $entry) }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-bold">nutrients:</span>
|
||||
@foreach(\App\Support\Nutrients::all()->sortBy('weight') as $nutrient)
|
||||
{{ round($entry->{$nutrient['value']}, 2) }}{{ $nutrient['unit'] }}
|
||||
{{ $nutrient['value'] }}@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</div>
|
||||
@if($entry->foods()->exists())
|
||||
<div>
|
||||
<span class="font-bold">foods:</span>
|
||||
@foreach($entry->foods as $food)
|
||||
<a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
href="{{ route('foods.show', $food) }}">
|
||||
{{ $food->name }}</a>@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
@if($entry->recipes()->exists())
|
||||
<div>
|
||||
<span class="font-bold">recipes:</span>
|
||||
@foreach($entry->recipes as $recipe)
|
||||
<a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
href="{{ route('recipes.show', $recipe) }}">
|
||||
{{ $recipe->name }}</a>@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</details>
|
||||
@empty
|
||||
<em>No entries.</em>
|
||||
@endforelse
|
||||
</div>
|
||||
<span class="text-sm text-gray-500">
|
||||
@foreach(\App\Support\Nutrients::all()->sortBy('weight') as $nutrient)
|
||||
{{ round($entries->where('meal', $meal)->sum($nutrient['value']), 2) }}{{ $nutrient['unit'] }}
|
||||
{{ $nutrient['value'] }}@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</h3>
|
||||
@forelse($entries->where('meal', $meal) as $entry)
|
||||
<details>
|
||||
<summary>{{ $entry->summary }}</summary>
|
||||
<div class="border-blue-100 border-2 p-2 ml-4">
|
||||
<div class="float-right">
|
||||
<a class="h-6 w-6 text-red-500 hover:text-red-700 hover:border-red-300 float-right text-sm"
|
||||
href="{{ route('journal-entries.delete', $entry) }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-bold">nutrients:</span>
|
||||
@foreach(\App\Support\Nutrients::all()->sortBy('weight') as $nutrient)
|
||||
{{ round($entry->{$nutrient['value']}, 2) }}{{ $nutrient['unit'] }}
|
||||
{{ $nutrient['value'] }}@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</div>
|
||||
@if($entry->foods()->exists())
|
||||
<div>
|
||||
<span class="font-bold">foods:</span>
|
||||
@foreach($entry->foods as $food)
|
||||
<a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
href="{{ route('foods.show', $food) }}">
|
||||
{{ $food->name }}</a>@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
@if($entry->recipes()->exists())
|
||||
<div>
|
||||
<span class="font-bold">recipes:</span>
|
||||
@foreach($entry->recipes as $recipe)
|
||||
<a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
|
||||
href="{{ route('recipes.show', $recipe) }}">
|
||||
{{ $recipe->name }}</a>@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</details>
|
||||
@empty
|
||||
<em>No entries.</em>
|
||||
@endforelse
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
|
||||
<title>{{ config('app.name', 'Laravel') }}</title>
|
||||
<title>{{ $title }} - {{ config('app.name', 'Laravel') }}</title>
|
||||
|
||||
<!-- Styles -->
|
||||
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">Delete {{ $recipe->name }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
Delete {{ $recipe->name }}?
|
||||
|
|
|
|||
|
|
@ -1,112 +1,112 @@
|
|||
<x-app-layout>
|
||||
{{ $title = ($recipe->exists ? "Edit {$recipe->name}" : 'Add Recipe') }}
|
||||
<x-slot name="title">{{ $title }}</x-slot>
|
||||
<x-slot name="header">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
||||
{{ ($recipe->exists ? "Edit {$recipe->name}" : 'Add Recipe') }}
|
||||
</h2>
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">{{ $title }}</h2>
|
||||
</x-slot>
|
||||
<form method="POST" action="{{ ($recipe->exists ? route('recipes.update', $recipe) : route('recipes.store')) }}">
|
||||
@if ($recipe->exists)@method('put')@endif
|
||||
@csrf
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
|
||||
<!-- Name -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="name" value="Name" />
|
||||
@if ($recipe->exists)@method('put')@endif
|
||||
@csrf
|
||||
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
|
||||
<!-- Name -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="name" value="Name" />
|
||||
|
||||
<x-inputs.input name="name"
|
||||
type="text"
|
||||
class="block mt-1 w-full"
|
||||
:value="old('name', $recipe->name)"
|
||||
required />
|
||||
</div>
|
||||
<x-inputs.input name="name"
|
||||
type="text"
|
||||
class="block mt-1 w-full"
|
||||
:value="old('name', $recipe->name)"
|
||||
required />
|
||||
</div>
|
||||
|
||||
<!-- Servings -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="servings" value="Servings" />
|
||||
<!-- Servings -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="servings" value="Servings" />
|
||||
|
||||
<x-inputs.input name="servings"
|
||||
type="number"
|
||||
class="block mt-1 w-full"
|
||||
:value="old('servings', $recipe->servings)"
|
||||
required />
|
||||
</div>
|
||||
<x-inputs.input name="servings"
|
||||
type="number"
|
||||
class="block mt-1 w-full"
|
||||
:value="old('servings', $recipe->servings)"
|
||||
required />
|
||||
</div>
|
||||
|
||||
<!-- Weight -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="weight" value="Total weight (g)" />
|
||||
<!-- Weight -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="weight" value="Total weight (g)" />
|
||||
|
||||
<x-inputs.input name="weight"
|
||||
type="number"
|
||||
step="any"
|
||||
class="block mt-1 w-full"
|
||||
:value="old('weight', $recipe->weight)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4 mt-4">
|
||||
<!-- Source -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="source" value="Source" />
|
||||
<x-inputs.input name="weight"
|
||||
type="number"
|
||||
step="any"
|
||||
class="block mt-1 w-full"
|
||||
:value="old('weight', $recipe->weight)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4 mt-4">
|
||||
<!-- Source -->
|
||||
<div class="flex-auto">
|
||||
<x-inputs.label for="source" value="Source" />
|
||||
|
||||
<x-inputs.input name="source"
|
||||
type="text"
|
||||
class="block mt-1 w-full"
|
||||
:value="old('source', $recipe->source)" />
|
||||
</div>
|
||||
<x-inputs.input name="source"
|
||||
type="text"
|
||||
class="block mt-1 w-full"
|
||||
:value="old('source', $recipe->source)" />
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div>
|
||||
<x-inputs.label for="description" value="Description" />
|
||||
<!-- Description -->
|
||||
<div>
|
||||
<x-inputs.label for="description" value="Description" />
|
||||
|
||||
<x-inputs.textarea name="description"
|
||||
class="block mt-1 w-full"
|
||||
:value="old('description', $recipe->description)" />
|
||||
</div>
|
||||
<x-inputs.textarea name="description"
|
||||
class="block mt-1 w-full"
|
||||
:value="old('description', $recipe->description)" />
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<x-tagger :defaultTags="$recipe_tags"/>
|
||||
</div>
|
||||
<!-- Tags -->
|
||||
<x-tagger :defaultTags="$recipe_tags"/>
|
||||
</div>
|
||||
|
||||
<!-- Ingredients -->
|
||||
<h3 class="mt-6 mb-2 font-extrabold text-lg">Ingredients</h3>
|
||||
<div x-data class="ingredients space-y-4">
|
||||
@forelse($ingredients as $ingredient)
|
||||
@include('recipes.partials.ingredient-input', $ingredient)
|
||||
@empty
|
||||
@include('recipes.partials.ingredient-input')
|
||||
@endforelse
|
||||
<div class="entry-template hidden">
|
||||
@include('recipes.partials.ingredient-input')
|
||||
</div>
|
||||
<x-inputs.icon-button type="button" color="green" x-on:click="addEntryNode($el);">
|
||||
<svg class="h-10 w-10 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</x-inputs.icon-button>
|
||||
</div>
|
||||
<!-- Ingredients -->
|
||||
<h3 class="mt-6 mb-2 font-extrabold text-lg">Ingredients</h3>
|
||||
<div x-data class="ingredients space-y-4">
|
||||
@forelse($ingredients as $ingredient)
|
||||
@include('recipes.partials.ingredient-input', $ingredient)
|
||||
@empty
|
||||
@include('recipes.partials.ingredient-input')
|
||||
@endforelse
|
||||
<div class="entry-template hidden">
|
||||
@include('recipes.partials.ingredient-input')
|
||||
</div>
|
||||
<x-inputs.icon-button type="button" color="green" x-on:click="addEntryNode($el);">
|
||||
<svg class="h-10 w-10 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</x-inputs.icon-button>
|
||||
</div>
|
||||
|
||||
<!-- Steps -->
|
||||
<h3 class="mt-6 mb-2 font-extrabold text-lg">Steps</h3>
|
||||
<div x-data class="steps">
|
||||
@forelse($steps as $step)
|
||||
@include('recipes.partials.step-input', $step)
|
||||
@empty
|
||||
@include('recipes.partials.step-input')
|
||||
@endforelse
|
||||
<div class="entry-template hidden">
|
||||
@include('recipes.partials.step-input')
|
||||
</div>
|
||||
<x-inputs.icon-button type="button" color="green" x-on:click="addEntryNode($el);">
|
||||
<svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</x-inputs.icon-button>
|
||||
</div>
|
||||
<!-- Steps -->
|
||||
<h3 class="mt-6 mb-2 font-extrabold text-lg">Steps</h3>
|
||||
<div x-data class="steps">
|
||||
@forelse($steps as $step)
|
||||
@include('recipes.partials.step-input', $step)
|
||||
@empty
|
||||
@include('recipes.partials.step-input')
|
||||
@endforelse
|
||||
<div class="entry-template hidden">
|
||||
@include('recipes.partials.step-input')
|
||||
</div>
|
||||
<x-inputs.icon-button type="button" color="green" x-on:click="addEntryNode($el);">
|
||||
<svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</x-inputs.icon-button>
|
||||
</div>
|
||||
|
||||
<div x-data class="flex items-center justify-end mt-4">
|
||||
<x-inputs.button x-on:click="removeTemplates();" class="ml-3">
|
||||
{{ ($recipe->exists ? 'Save' : 'Add') }}
|
||||
</x-inputs.button>
|
||||
</div>
|
||||
</form>
|
||||
<div x-data class="flex items-center justify-end mt-4">
|
||||
<x-inputs.button x-on:click="removeTemplates();" class="ml-3">
|
||||
{{ ($recipe->exists ? 'Save' : 'Add') }}
|
||||
</x-inputs.button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@once
|
||||
@push('scripts')
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<x-app-layout>
|
||||
<x-slot name="title">Recipes</x-slot>
|
||||
<x-slot name="header">
|
||||
<div class="flex justify-between items-center">
|
||||
<h2 class="font-semibold text-2xl text-gray-800 leading-tight">Recipes</h2>
|
||||
|
|
@ -11,54 +12,54 @@
|
|||
</div>
|
||||
</x-slot>
|
||||
<x-search-view :route="route('api:v1:recipes.index')" :tags="$tags">
|
||||
<x-slot name="results">
|
||||
<template x-for="recipe in results" :key="recipe">
|
||||
<div class="p-1 border-2 border-black font-sans">
|
||||
<div class="text-2xl font-extrabold">
|
||||
<a x-bind:href="recipe.showUrl"
|
||||
class="hover:text-gray-600" x-text="recipe.name"></a>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="leading-snug" x-text="`${recipe.servings} servings`"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-end font-extrabold" x-show="recipe.serving_weight">
|
||||
<div>Serving weight</div>
|
||||
<div x-text="`${recipe.serving_weight}g`"></div>
|
||||
</div>
|
||||
<div class="font-bold text-right border-t-8 border-black">Amount per serving</div>
|
||||
<div class="flex justify-between items-end font-extrabold">
|
||||
<div class="text-xl">Calories</div>
|
||||
<div class="text-xl" x-text="`${recipe.caloriesPerServing}`"></div>
|
||||
</div>
|
||||
<div class="border-t-4 border-black text-sm">
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Fat</div>
|
||||
<div x-text="`${recipe.fatPerServing}g`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Cholesterol</div>
|
||||
<div x-text="`${recipe.cholesterolPerServing}mg`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Sodium</div>
|
||||
<div x-text="`${recipe.sodiumPerServing}mg`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Carbohydrate</div>
|
||||
<div x-text="`${recipe.carbohydratesPerServing}g`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Protein</div>
|
||||
<div x-text="`${recipe.proteinPerServing}g`"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</x-slot>
|
||||
</x-search-view>
|
||||
<x-slot name="results">
|
||||
<template x-for="recipe in results" :key="recipe">
|
||||
<div class="p-1 border-2 border-black font-sans">
|
||||
<div class="text-2xl font-extrabold">
|
||||
<a x-bind:href="recipe.showUrl"
|
||||
class="hover:text-gray-600" x-text="recipe.name"></a>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="leading-snug" x-text="`${recipe.servings} servings`"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-end font-extrabold" x-show="recipe.serving_weight">
|
||||
<div>Serving weight</div>
|
||||
<div x-text="`${recipe.serving_weight}g`"></div>
|
||||
</div>
|
||||
<div class="font-bold text-right border-t-8 border-black">Amount per serving</div>
|
||||
<div class="flex justify-between items-end font-extrabold">
|
||||
<div class="text-xl">Calories</div>
|
||||
<div class="text-xl" x-text="`${recipe.caloriesPerServing}`"></div>
|
||||
</div>
|
||||
<div class="border-t-4 border-black text-sm">
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Fat</div>
|
||||
<div x-text="`${recipe.fatPerServing}g`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Cholesterol</div>
|
||||
<div x-text="`${recipe.cholesterolPerServing}mg`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Sodium</div>
|
||||
<div x-text="`${recipe.sodiumPerServing}mg`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Total Carbohydrate</div>
|
||||
<div x-text="`${recipe.carbohydratesPerServing}g`"></div>
|
||||
</div>
|
||||
<hr class="border-gray-500"/>
|
||||
<div class="flex justify-between">
|
||||
<div class="font-bold">Protein</div>
|
||||
<div x-text="`${recipe.proteinPerServing}g`"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</x-slot>
|
||||
</x-search-view>
|
||||
</x-app-layout>
|
||||
|
|
|
|||
Loading…
Reference in New Issue