nitrobon
/
pipicar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

nim_filter

pull/9/head
nimtaurel 2025-04-24 13:33:09 +05:00
parent 3ab4d53051
commit 2534ae1f48
7 changed files with 386 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/Http/Controllers/MobileApiController.php
View File

@ -3,20 +3,12 @@
namespace App\Http\Controllers; namespace App\Http\Controllers;
use A7kz\Platform\Models\UniModel; use A7kz\Platform\Models\UniModel;
use A7kz\Platform\Modules\Platform\Segment\Facades\Segment;
use App\Modules\applications\Enum\ApplicationStatus; use App\Modules\applications\Enum\ApplicationStatus;
use App\Modules\auto\Enums\AutoStatusEnums; use App\Modules\auto\Enums\AutoStatusEnums;
use Carbon\CarbonPeriod; use Carbon\CarbonPeriod;
use Exception;
use Illuminate\Http\JsonResponse; use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request; use Illuminate\Http\Request;
use Illuminate\Support\Carbon; use Illuminate\Support\Carbon;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Facades\Notification;
use Illuminate\Support\Facades\Storage;
use Mpdf\Tag\Mark;
use function PHPUnit\Framework\isEmpty;
class MobileApiController extends Controller class MobileApiController extends Controller
{ {

23
modules/main/Components/Main.php
View File

@ -10,7 +10,7 @@
namespace App\Modules\main\Components; namespace App\Modules\main\Components;
use A7kz\Platform\Modules\Platform\Core\Services\Base\Component; use A7kz\Platform\Modules\Platform\Core\Services\Base\Component;
use Illuminate\Http\Request; use Illuminate\Support\Facades\Request;
use Illuminate\Support\Carbon; use Illuminate\Support\Carbon;
use Illuminate\Support\Facades\Http; use Illuminate\Support\Facades\Http;
@ -21,18 +21,21 @@ class Main extends Component
parent::__construct($params, $module); parent::__construct($params, $module);
$this->template = 'pipicar::main.views.main'; $this->template = 'pipicar::main.views.main';
// $request = new Request([
// 'started_at' => Carbon::now()->toDateString(),
// 'ended_at' => Carbon::now()->addDays(3)->toDateString(),
// ]);
//
// $response = (new \App\Http\Controllers\MobileApiController)->getAvailableMarksList($request);
// $this->params['cars'] = $response->getData(true);
$response = Http::get('https://cvm10.a7.kz/api/mobile/getAvailableMarksList', [
$request = new \Illuminate\Http\Request([
'started_at' => Carbon::now()->toDateString(), 'started_at' => Carbon::now()->toDateString(),
'ended_at' => Carbon::now()->addDays(3)->toDateString(), 'ended_at' => Carbon::now()->addDays(3)->toDateString(),
]); ]);
$this->params['cars'] = collect($response->json());
$response = (new \App\Http\Controllers\MobileApiController)->getAvailableMarksList($request);
$this->params['cars'] = collect($response->getData(true));
// $class_filters = Request::input('class_filters') ?? null;
// $response = Http::get('https://cvm10.a7.kz/api/mobile/getAvailableMarksList', [
// 'started_at' => Carbon::now()->toDateString(),
// 'ended_at' => Carbon::now()->addDays(3)->toDateString(),
// ]);
// $this->params['cars'] = collect($response->json());
} }
} }

258
modules/main/views/main.blade.php
View File

@ -1,108 +1,174 @@
<div class="container text-center my-3 main-page"> <div class="container text-center my-3 main-page">
<p class="top-title">Доступные автомобили</p> <div class="main-page-header">
<p class="title with-line line-center">Выберите лучший автомобиль</p> <p class="top-title">Доступные автомобили</p>
<p class="subtitle">У нас есть автомобили разных классов. Выберите свой идеальный вариант и забронируйте его.</p> <p class="title">Выберите лучший автомобиль</p>
<div class="row mx-auto my-auto"> </div>
<div id="recipeCarousel" class="carousel slide w-100" data-bs-ride="carousel"> <div class="container my-4">
<div class="carousel-inner w-100" role="listbox"> <div class="row">
@php $carsValues = array_values($cars->toArray()); @endphp <div class="col-12 col-md-3 card-catalog-left-container">
@for($i = 0; $i < count($carsValues); $i++) <div class="text-end">
@if($i % 1 == 0) <button class="btn btn-outline" id="toggleFilterBtn">
<div class="carousel-item {{ $i == 0 ? 'active' : '' }}"> @lang('Фильтр')
<div class="row"> </button>
@for($j = $i; $j < $i + 3 && $j < count($carsValues); $j++) </div>
@php $car = $carsValues[$j]; @endphp <div class="card card-catalog-left-filter collapsible collapsed" id="filterCard">
<div class="col-md-4"> <div class="card-body">
<div class="car-card"> {{-- Дата начала --}}
<img class="img-fluid" src="{{ $car['photo'] ?? asset('img/default.png') }}" alt="Car Image"> <form method="GET" id="filter">
<div class="title">{{ $car['brand'] . ' ' . $car['mark'] . ' - ' . $car['year'] }}</div> <div class="form-group mb-3 pb-4 d-flex flex-column justify-content-around align-content-center">
<div class="card-car-chars"> <label class="form-label d-block">Даты аренды</label>
<div class="add-li"><i class="material-symbols-outlined">ac_unit</i><p>&nbsp;Кондиционер</p></div> <div class="d-flex flex-row justify-content-around align-content-center">
<div class="add-li"><i class="material-symbols-outlined">auto_transmission</i><p>&nbsp;{{ $car['fuel_type'] }}</p></div> <input type="text"
<div class="add-li"> <i class="material-symbols-outlined">groups</i><p>&nbsp;{{ $car['people'] }} мест</p></div> class="form-control"
</div> name="started_at"
<div class="car-card-footer"> id="started_at"
<div class="cost"> autocomplete="off"
<small>Базовая ставка</small> inputmode="numeric"
<p> pattern="\d{2}\.\d{2}\.\d{4}"
@isset($car['tariffs'][0]['price']) placeholder="дд.мм.гггг"
{{ $car['tariffs'][0]['price'] }} ₸ value="{{ request('started_at') }}"
@endisset style="max-width: 120px">
</p> <span class="separator">–</span>
</div> <input type="text"
<a href="#" class="btn btn-primary">Арендовать</a> class="form-control"
</div> name="ended_at"
</div> id="ended_at"
</div> autocomplete="off"
@endfor inputmode="numeric"
pattern="\d{2}\.\d{2}\.\d{4}"
placeholder="дд.мм.гггг"
value="{{ request('ended_at') }}"
style="max-width: 120px">
</div>
</div> </div>
{{-- Класс авто --}}
<div class="mb-3 pb-4">
<label class="form-label d-block">Класс авто</label>
<div class="btn-group" role="group" aria-label="Класс">
<input type="checkbox" class="btn-check" name="class_filters[]" value="1" id="class_option1" {{ in_array('1', (array) request('class_filters')) ? 'checked' : '' }}>
<label class="btn btn-outline-primary" for="class_option1">Эконом</label>
<input type="checkbox" class="btn-check" name="class_filters[]" value="2" id="class_option2" {{ in_array('2', (array) request('class_filters')) ? 'checked' : '' }}>
<label class="btn btn-outline-primary" for="class_option2">Средний</label>
<input type="checkbox" class="btn-check" name="class_filters[]" value="3" id="class_option3" {{ in_array('3', (array) request('class_filters')) ? 'checked' : '' }}>
<label class="btn btn-outline-primary" for="class_option3">Бизнес</label>
</div>
</div>
{{-- Тип кузова --}}
<div class="mb-3 pb-4">
<label class="form-label d-block">Тип кузова</label>
<div class="btn-group" role="group" aria-label="Кузов">
<input type="checkbox" class="btn-check" name="bodywork_filters[]" value="1" id="bodywork_option1" {{ in_array('1', (array) request('bodywork_filters')) ? 'checked' : '' }}>
<label class="btn btn-outline-primary" for="bodywork_option1">Седан</label>
<input type="checkbox" class="btn-check" name="bodywork_filters[]" value="2" id="bodywork_option2" {{ in_array('2', (array) request('bodywork_filters')) ? 'checked' : '' }}>
<label class="btn btn-outline-primary" for="bodywork_option2">Кроссовер</label>
<input type="checkbox" class="btn-check" name="bodywork_filters[]" value="3" id="bodywork_option3" {{ in_array('3', (array) request('bodywork_filters')) ? 'checked' : '' }}>
<label class="btn btn-outline-primary" for="bodywork_option3">Внедорожник</label>
</div>
</div>
{{-- Кнопка --}}
<button type="submit" class="btn btn-success" style="width: 100%; font-size: 14px">
@lang('Искать')
</button>
</form>
</div> </div>
@endif </div>
@endfor
<div class="card card-catalog-left mt-4">
<div class="card-body">
<p class="title">Все предложения включают:</p>
<ul>
<li><i class="material-symbols-outlined">done</i>
<span>&nbsp;Бесплатное перебронирование и отмена</span></li>
<li><i class="material-symbols-outlined">done</i>
<span>&nbsp;Лимит пробега по городу 200 км</span></li>
<li><i class="material-symbols-outlined">done</i> <span>&nbsp;Страхование гражданской ответственности</span></li>
<li><i class="material-symbols-outlined">done</i> <span>&nbsp;Эконом класс</span></li>
<li><i class="material-symbols-outlined">done</i> <span>&nbsp;Депозит</span></li>
<li><i class="material-symbols-outlined">done</i>
<span>&nbsp;Межгород по дополнительным тарифам</span></li>
</ul>
</div>
</div>
<div class="card card-catalog-left2 mt-4">
<div class="card-body">
<p class="title">Другие условия:</p>
<p class="cr-item">Минимальный возраст водителя - 21 год</p>
<p class="cr-item">Минимальный срок владения водительскими правами - 2 года</p>
<p class="title m-0">Прочие условия:</p>
<a href="https://pcar.kz/#faq" target="_blank" class="btn-link">Условия аренды автомобиля</a>
</div>
</div>
</div>
<div class="col-12 col-md-9 mb-4 d-flex justify-content-center">
<div class="row custom-row">
@php $carsValues = array_values($cars->toArray()); @endphp
@foreach($carsValues as $car)
<div class="col-12 col-md-6 mb-4">
<div class="car-card">
<img class="img-fluid" src="{{ $car['photo'] ?? asset('img/default.png') }}" alt="Car Image">
<div class="title">{{ $car['brand'] . ' ' . $car['mark'] . ' - ' . $car['year'] }}</div>
<div class="card-car-chars">
<div class="add-li"><i class="material-symbols-outlined">ac_unit</i><p>&nbsp;Кондиционер</p></div>
<div class="add-li"><i class="material-symbols-outlined">auto_transmission</i><p>&nbsp;{{ $car['fuel_type'] }}</p></div>
<div class="add-li"><i class="material-symbols-outlined">groups</i><p>&nbsp;{{ $car['people'] }} мест</p></div>
</div>
<div class="car-card-footer">
<div class="cost">
<small>Базовая ставка</small>
<p class="m-0">@isset($car['tariffs'][0]['price']){{ $car['tariffs'][0]['price'] }} ₸@endisset</p>
</div>
<a href="#" class="btn btn-primary">Арендовать</a>
</div>
</div>
</div>
@endforeach
</div>
</div> </div>
<a class="carousel-control-prev" href="#recipeCarousel" role="button" data-bs-slide="prev">
<span class="icon-container rounded-circle d-flex align-items-center justify-content-center">
<i class="bi bi-chevron-left"></i>
</span>
</a>
<a class="carousel-control-next" href="#recipeCarousel" role="button" data-bs-slide="next">
<span class="icon-container rounded-circle d-flex align-items-center justify-content-center">
<i class="bi bi-chevron-right"></i>
</span>
</a>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
document.addEventListener('DOMContentLoaded', function() { function debounce(func, wait) {
const carousel = new bootstrap.Carousel(document.querySelector('#recipeCarousel'), { let timeout;
interval: 10000, return function (...args) {
ride: 'carousel', const context = this;
wrap: true clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
const datepickerConfig = {
buttons: ['today', 'clear'],
autoClose: true
};
const startedAtPicker = new AirDatepicker('#started_at', datepickerConfig);
const endedAtPicker = new AirDatepicker('#ended_at', datepickerConfig);
document.addEventListener('DOMContentLoaded', function () {
const toggleBtn = document.getElementById('toggleFilterBtn');
const filterCard = document.getElementById('filterCard');
let isExpanded = false;
toggleBtn.addEventListener('click', function () {
if (!isExpanded) {
filterCard.style.transition = 'max-height 1.2s ease, opacity 1.2s ease';
filterCard.classList.add('expanded');
isExpanded = true;
} else {
filterCard.style.transition = 'max-height 0.4s ease, opacity 0.4s ease';
filterCard.classList.remove('expanded');
isExpanded = false;
}
}); });
}); });
</script> </script>
<style>
.carousel-control-prev,
.carousel-control-next {
width: 40px;
height: 40px;
background: white;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
border: 1px solid #ddd;
opacity: 1;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
}
.carousel-control-prev {
left: -20px;
}
.carousel-control-next {
right: -20px;
}
.icon-container {
width: 100%;
height: 100%;
color: black; /* Цвет иконки */
font-size: 1.2rem;
}
/* Hover эффект */
.carousel-control-prev:hover,
.carousel-control-next:hover {
background: #f8f9fa;
}
.bi::before, [class^=bi-]::before, [class*=" bi-"]::before {
vertical-align: -0.2em;
}
</style>

4
public/css/app.css
View File

File diff suppressed because one or more lines are too long

2
public/css/app.css.map
View File

File diff suppressed because one or more lines are too long

70
resources/assets/sass/app.scss
View File

@ -265,51 +265,41 @@ body {
.main-page { .main-page {
padding: 20px; padding: 20px;
.top-title {
margin: 0;
line-height: 1;
text-transform: uppercase;
font-size: 12px;
color: #a8a8a8;
font-weight: 600;
}
.title {
font-weight: 800;
font-size: 36px;
margin-bottom: 40px;
text-transform: uppercase;
position: relative;
}
.subtitle { .main-page-header {
.top-title {
margin: 0;
line-height: 1;
text-transform: uppercase;
font-size: 12px;
color: #a8a8a8;
font-weight: 600;
}
.title {
font-weight: 800;
font-size: 36px;
margin-bottom: 40px;
text-transform: uppercase;
position: relative;
}
.subtitle {
font-size: 20px; font-size: 20px;
color: #5d5d5d; color: #5d5d5d;
margin: 0 0 50px 0; margin: 0 0 50px 0;
} }
.with-line.line-center:before { .with-line.line-center:before {
left: 50%; left: 50%;
transform: translate(-50%); transform: translate(-50%);
} }
.with-line:before { .with-line:before {
content: ""; content: "";
position: absolute; position: absolute;
bottom: -20px; bottom: -20px;
width: 45px; width: 45px;
height: 4px; height: 4px;
background-color: #01b0e8; background-color: #01b0e8;
} }
.carousel-control-prev-icon, .carousel-control-next-icon {
width: 3.125rem;
height: 3.125rem;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
} }
} }

237
resources/assets/sass/components/card.scss
View File

@ -53,78 +53,197 @@ iframe {
box-shadow: none; box-shadow: none;
} }
.carousel-inner {
overflow: hidden;
.carousel-item { .row.custom-row {
transition: transform 0.6s ease-in-out; display: flex;
flex-wrap: wrap;
justify-content: flex-start; // Можно center, если хочешь выравнивать
.row { .car-card {
width: 100%;
transition: .3s all ease;
padding: 25px 20px;
border-radius: 8px;
border-bottom: 2px solid transparent;
box-shadow: #0000001a 0 4px 6px -1px, #0000000f 0 2px 4px -1px;
img {
width: 100%;
height: 240px;
object-fit: contain;
}
.title {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
}
.add-li {
display: flex; display: flex;
flex-wrap: nowrap; align-content: center;
justify-content: center; color: #a8a8a8;
margin-bottom: 35px; margin-bottom: 5px;
.car-card { font-size: 16px;
margin: 0 10px; transition: .3s all ease;
min-width: calc(33.333% - 20px);
transition: .3s all ease;
padding: 25px 20px;
border-radius: 8px;
border-bottom: 2px solid transparent;
box-shadow: #0000001a 0 4px 6px -1px, #0000000f 0 2px 4px -1px;
img { p {
width: 100%; margin-bottom: 0;
height: 240px; }
object-fit: contain; }
}
.title { .car-card-footer {
font-size: 24px; display: flex;
font-weight: 700; align-items: flex-end;
margin-bottom: 20px; justify-content: space-between;
} border-top: 1px solid #ddd;
padding-top: 10px;
margin-top: 10px;
.add-li { .cost {
display: flex; font-size: 1rem;
align-content: center; small {
font-size: .875em;
color: #a8a8a8; color: #a8a8a8;
margin-bottom: 5px;
font-size: 16px;
transition: .3s all ease;
p {
margin-bottom: 0;
}
} }
.car-card-footer { p {
display: flex;
align-items: flex-end; margin: 0;
justify-content: space-between; font-size: 24px;
border-top: 1px solid #ddd; font-weight: 800;
padding-top: 10px; line-height: 1;
margin-top: 10px;
.cost p {
margin: 0;
font-size: 24px;
font-weight: 800;
line-height: 1;
}
} }
} }
.car-card:hover { }
box-shadow: #0000001a 0 20px 25px -5px, #0000000a 0 10px 10px -5px; }
border-bottom: 2px solid #01B0E8;
.add-li { .car-card:hover {
p { box-shadow: #0000001a 0 20px 25px -5px, #0000000a 0 10px 10px -5px;
color: #1e1e1e; border-bottom: 2px solid #01B0E8;
}
i { .add-li {
color: $primary-color; p {
} color: #1e1e1e;
}
} }
i {
color: $primary-color;
}
} }
} }
} }
.card-catalog-left-container {
.card {
border: none;
box-shadow: #0000001a 0 4px 6px -1px, #0000000f 0 2px 4px -1px;
padding: 0;
border-radius: .25rem;
margin: 0;
.card-body {
flex: 1 1 auto;
padding: 1rem 1rem;
.title {
font-weight: 700;
text-align: left;
}
}
}
.card-catalog-left {
background-color: #01b0e8;
color: #fff;
.title {
font-size: 16px;
}
ul {
padding-inline-start: 0;
list-style-type: none;
padding: 0;
text-align: left;
li {
display: flex;
align-items: flex-start;
margin-bottom: 7px;
padding-bottom: 7px;
border-bottom: 1px dashed #45d2f4;
font-size: 14px;
justify-content: start;
&:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
}
}
}
}
.card-catalog-left2 {
background-color:#fff;
color: #7e7e7e;
text-align: left;
.title {
font-size: 18px;
color: #333235;
}
.cr-item {
font-size: 14px;
color: #7e7e7e;
}
.btn-link {
font-size: 14px;
color: #01b0e8;
}
}
.card-catalog-left-filter {
transition: max-height 0.3s ease, opacity 0.3s ease;
overflow: hidden;
.form-label {
color: #a8a8a8;
}
#started_at, #ended_at {
font-size: 14px;
}
.separator {
font-size: 18px;
padding: 0 8px;
display: inline-block;
vertical-align: middle;
color: #333235;
}
.btn-group {
display: inline-flex;
flex-wrap: wrap !important;
gap: 6px;
justify-content: center;
align-content: center;
.btn {
flex: none;
flex-shrink: 0;
width: auto;
font-size: 14px;
padding: 5px 12px;
color: #333235;
background-color: #F1F1F1;
border-radius: 0.8rem!important;
}
.btn-check:checked + .btn {
background-color: #01b0e8;
color: #fff;
border-color: #01b0e8;
}
}
}
.collapsible {
max-height: 0;
overflow: hidden;
opacity: 0;
}
.collapsible.expanded {
max-height: 1000px;
opacity: 1;
}