forked from eatvio/eatvio-infra
153 lines
11 KiB
PHP
153 lines
11 KiB
PHP
<div class="container mb-4 py-3 overflow-hidden --bg_white --shadow --radius --mw-1000" data-diary-id={{ $diaryId }}>
|
|
<div class="d-flex px-md-5 justify-content-between align-items-center flex-wrap flex-lg-nowrap flex-column-reverse flex-lg-row overflow-x-xs-scroll">
|
|
<ul class="nav nav-pills flex-nowrap --bordered --radius --tabs_blue" id="pills-tab" role="tablist">
|
|
@foreach($types as $curType)
|
|
<li class="nav-item" role="presentation">
|
|
<button
|
|
wire:click="$set('type', {{ $curType }})"
|
|
@class(['btn-lg', 'px-md-4', 'nav-link', 'active' => ($type == $curType)])
|
|
id="pills-{{ $typeCssIds[$curType] }}-tab"
|
|
data-bs-toggle="pill"
|
|
data-bs-target="#pills-{{ $curType }}"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="pills-{{ $curType }}"
|
|
aria-selected="{{ $type == $curType ? 'true' : 'false' }}"
|
|
>
|
|
<small>{{ $typeNames[$curType] }}</small>
|
|
</button>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
<div class="d-flex w-md-50 mb-3 mb-lg-0 align-items-center">
|
|
<div class="d-flex align-items-center w-50 me-3 mx-lg-3">
|
|
<small>Время приёма пищи</small>
|
|
</div>
|
|
<div class="d-flex align-items-center position-relative">
|
|
<svg width="23" height="22" class="--input_inline_left_icon"><use xlink:href="#Time"></use></svg>
|
|
<input wire:model="time" name="time" type="time" class="form-control --f_blue --f_bold fs-6 ps-5 pe-0 py-2 w-160px" value="{{ $time }}" placeholder="{{ now()->setTimezone('3')->format('H:i') }}" required="" />
|
|
</div>
|
|
<div class="d-none d-lg-flex align-items-center w-45 ms-4">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="my-3 px-md-5">
|
|
<div class="tab-content" id="pills-tabContent">
|
|
@php $curType = $type @endphp
|
|
{{-- @foreach($types as $curType) --}}
|
|
{{-- <div wire:key="portion-edit-{{ $curType }}" @class(['tab-pane','fade','show' => ($type == $curType), 'active' => ($type == $curType )]) id="pills-{{ $curType }}" role="tabpanel" aria-labelledby="pills-{{ $curType }}-tab"> --}}
|
|
<div wire:key="portion-edit-{{ $curType }}" @class(['tab-pane','fade','show', 'active']) id="pills-{{ $curType }}" role="tabpanel" aria-labelledby="pills-{{ $curType }}-tab">
|
|
<div class="d-flex align-items-center flex-wrap flex-sm-nowrap" data-row="0">
|
|
<div class="fs-6 py-2 w-100">
|
|
<input wire:model="product_name" name="product_name" type="text" class="form-control fs-6 py-2 w-100 @error('product_name') error @enderror" placeholder="Введите название продукта...." />
|
|
<label for="product_name" class="ms-sm-1 error"> @error('product_name') {{ $message }}@enderror</label>
|
|
</div>
|
|
<div class="d-flex w-md-50 ms-sm-3 align-items-center">
|
|
<div class="align-items-center ms-sm-3 mt-3 mt-sm-0">
|
|
<input wire:model="quantity" type="number" min="1" class="form-control fs-6 py-2 w-130px ms-sm-1 @error('quantity') error @enderror" placeholder="Кол-во" />
|
|
<label for="quantity" class="ms-sm-3 error"> @error('quantity') {{ $message }}@enderror</label>
|
|
</div>
|
|
<div class="align-items-center ms-sm-3 mt-3 mt-sm-0">
|
|
<input wire:model="portion" type="text" class="form-control fs-6 py-2 w-130px ms-sm-1 @error('portion') error @enderror" placeholder="Порция" />
|
|
<label for="portion" class="ms-sm-3 error"> @error('portion') {{ $message }}@enderror</label>
|
|
</div>
|
|
{{-- <div class="d-flex align-items-center w-45 ms-4 mt-3 mt-sm-0"> --}}
|
|
{{-- <a href="#"><svg width="30" height="30"><use xlink:href="#Settings"></use></svg></a> --}}
|
|
{{-- </div> --}}
|
|
</div>
|
|
</div>
|
|
<div class="d-flex align-items-center flex-wrap flex-lg-nowrap" data-row="0">
|
|
<div class="w-100">
|
|
@if(count($portions) > 0 )
|
|
<div class="mt-3">
|
|
<table class="table --table_blue mb-0 fs-4_5 --f_bold">
|
|
<tbody>
|
|
@foreach($portions as $key => $item)
|
|
@if($item['type'] == $curType)
|
|
<tr wire:key={{ $key }}>
|
|
<td class="ps-md-5 w-50">{{ $item['product_name'] }}</td>
|
|
<td class="pe-md-5 w-50 text-end">{{ $item['quantity'] . " " . $item['portion'] }}</td>
|
|
<td><a href="#" wire:click="editPortion({{ $key }}, {{ Illuminate\Support\Js::from($item) }})"><svg width="30" height="30"><use xlink:href="#Settings"></use></svg></a></td>
|
|
<td class="">
|
|
<button wire:click="delPortion({{ $key }}, {{ Illuminate\Support\Js::from($item) }})" type="button" class="btn btn-outline-danger">x</button>
|
|
</td>
|
|
</tr>
|
|
@endif
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
<div class="d-flex w-md-50 ms-lg-4 align-items-center">
|
|
<div class="d-flex align-items-center ms-lg-3 mt-3">
|
|
<button wire:click="addPortion" type="button" class="btn btn-lg btn-primary btn-block w-130px ms-lg-1 fs-6 --f_bold w-130px">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@if($curMeal)
|
|
<livewire:diary.meal-photos :meal="$curMeal" :wire:key="$curMeal->id">
|
|
@endif
|
|
</div>
|
|
{{-- @endforeach --}}
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 px-md-5 text-center">
|
|
<p class="--f_bold"><small>Ваше настроение после приёма пищи</small></p>
|
|
<div class="d-flex align-items-end flex-nowrap">
|
|
<svg width="30" height="30"><use xlink:href="#Smile_1"></use></svg>
|
|
<div class="mx-3 --colored flex-grow-1">
|
|
<div class="lh-1"><small>Сытость</small></div>
|
|
<div class="w-100 btn-group --colored" role="group" aria-label="Ваше настроение после приёма пищи">
|
|
<input type="radio" class="btn-check" name="satiety" value="1" id="colored_1_2" autocomplete="off" @checked($satiety == 1) />
|
|
<label wire:click="$set('satiety', 1)" class="btn btn-outline-primary" for="colored_1_2"></label>
|
|
|
|
<input type="radio" class="btn-check" name="satiety" value="2" id="colored_1_3" autocomplete="off" @checked($satiety == 2) />
|
|
<label wire:click="$set('satiety', 2)" class="btn btn-outline-primary" for="colored_1_3"></label>
|
|
|
|
<input type="radio" class="btn-check" name="satiety" value="3" id="colored_1_4" autocomplete="off" @checked($satiety == 3) />
|
|
<label wire:click="$set('satiety', 3)" class="btn btn-outline-primary" for="colored_1_4"></label>
|
|
|
|
<input type="radio" class="btn-check" name="satiety" value="4" id="colored_1_5" autocomplete="off" @checked($satiety == 4) />
|
|
<label wire:click="$set('satiety', 4)" class="btn btn-outline-primary" for="colored_1_5"></label>
|
|
|
|
<input type="radio" class="btn-check" name="satiety" value="5" id="colored_1_6" autocomplete="off" @checked($satiety == 5) />
|
|
<label wire:click="$set('satiety', 5)" class="btn btn-outline-primary" for="colored_1_6"></label>
|
|
</div>
|
|
</div>
|
|
<svg width="30" height="30"><use xlink:href="#Smile_2"></use></svg>
|
|
</div>
|
|
<div class="d-flex my-3 align-items-end flex-nowrap">
|
|
<svg width="30" height="30"><use xlink:href="#Smile_3"></use></svg>
|
|
<div class="mx-3 --colored flex-grow-1">
|
|
<div class="lh-1"><small>Настроение</small></div>
|
|
<div class="w-100 btn-group --colored" role="group" aria-label="Ваше настроение после приёма пищи">
|
|
<input type="radio" class="btn-check" name="mood" value="1" id="colored_2_2" autocomplete="off" @checked($mood == 1)>
|
|
<label wire:click="$set('mood', 1)" class="btn btn-outline-primary" for="colored_2_2"></label>
|
|
|
|
<input type="radio" class="btn-check" name="mood" value="2" id="colored_2_3" autocomplete="off" @checked($mood == 2)>
|
|
<label wire:click="$set('mood', 2)" class="btn btn-outline-primary" for="colored_2_3"></label>
|
|
|
|
<input type="radio" class="btn-check" name="mood" value="3" id="colored_2_4" autocomplete="off" @checked($mood == 3)>
|
|
<label wire:click="$set('mood', 3)" class="btn btn-outline-primary" for="colored_2_4"></label>
|
|
|
|
<input type="radio" class="btn-check" name="mood" value="4" id="colored_2_5" autocomplete="off" @checked($mood == 4)>
|
|
<label wire:click="$set('mood', 4)" class="btn btn-outline-primary" for="colored_2_5"></label>
|
|
|
|
<input type="radio" class="btn-check" name="mood" value="5" id="colored_2_6" autocomplete="off" @checked($mood == 5)>
|
|
<label wire:click="$set('mood', 5)" class="btn btn-outline-primary" for="colored_2_6"></label>
|
|
</div>
|
|
</div>
|
|
<svg width="30" height="30"><use xlink:href="#Smile_4"></use></svg>
|
|
</div>
|
|
</div>
|
|
<div class="container p-0 --mw-130">
|
|
<button wire:click.prevent="addFoodIntake" class="btn btn-lg btn-primary btn-block w-100 --f_bolder disabled:opacity-50" type="button">
|
|
<span wire:loading wire:target="addFoodIntake" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
|
<span>Готово</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|