From 2488198f7c773ea8b2ff83fb206bf4c78f44e645 Mon Sep 17 00:00:00 2001 From: Noah Lancien Date: Thu, 15 Jun 2023 12:08:37 +0200 Subject: [PATCH] Added check if request wants JSON and replaced fetch requests with axios --- app/Http/Controllers/Fo/ShopController.php | 27 +- .../ts/fo/components/GeocodageComponent.vue | 573 +++++++++++------- resources/views/fo/layout.blade.php | 1 + .../views/modules/scriptRoutes.blade.php | 2 + routes/web-fo.php | 4 +- 5 files changed, 376 insertions(+), 231 deletions(-) diff --git a/app/Http/Controllers/Fo/ShopController.php b/app/Http/Controllers/Fo/ShopController.php index 47d2ae2..c3b31be 100644 --- a/app/Http/Controllers/Fo/ShopController.php +++ b/app/Http/Controllers/Fo/ShopController.php @@ -3,8 +3,8 @@ namespace App\Http\Controllers\Fo; use App\Http\Controllers\Controller; +use App\Http\Requests\Fo\Shop\GetNearestShopRequest; use App\Models\Shop; -use Illuminate\Http\Request; use Illuminate\Support\Facades\DB; class ShopController extends Controller @@ -15,28 +15,35 @@ class ShopController extends Controller * Get all shops * @return json */ - public function getAll() + public function index() { - return response() - ->json(Shop::all()); + if (request()->wantsJson()) { + return response() + ->json(Shop::all()); + } + return abort(404); } /** * Get the 5 nearest shops with the given coords in the request. - * @param Request $request + * @param App\Http\Requests\Fo\Shop\GetNearestShopRequest $request * @return json */ - public function getNearest(Request $request) + public function getNearest(GetNearestShopRequest $request) { - $latitude = $request->input('latitude'); - $longitude = $request->input('longitude'); + $latitude = $request->latitude; + $longitude = $request->longitude; $raw = DB::raw( 'ROUND ((6371*acos(cos(radians(' . $latitude . '))*cos(radians(latitude))*cos(radians(longitude) - radians(' . $longitude . '))+sin(radians(' . $latitude . '))*sin(radians(latitude)))), 2) AS distance' ); $results = DB::table("shops")->select('*')->addSelect($raw)->orderBy('distance', 'ASC')->limit(5)->get(); - return response() - ->json($results); + + if ($request->wantsJson()) { + return response() + ->json($results); + } + return abort(404); } } diff --git a/resources/ts/fo/components/GeocodageComponent.vue b/resources/ts/fo/components/GeocodageComponent.vue index 2629883..4c1ca4d 100644 --- a/resources/ts/fo/components/GeocodageComponent.vue +++ b/resources/ts/fo/components/GeocodageComponent.vue @@ -1,234 +1,369 @@ - - - - - \ No newline at end of file + }, + displayShopsList() { + const list = document.getElementById("shops-list") as HTMLElement; + const baseItem = document.getElementById("shop-list-item") as HTMLElement; + + list.replaceChildren(baseItem); + let i = 1; + for (let shop of this.shops) { + let shopListElement = baseItem?.cloneNode(true) as HTMLElement; + // Set the shop sign logo + const imgTag = shopListElement.childNodes[1] + .childNodes[1] as HTMLElement; + imgTag.setAttribute("src", this.stickers[shop.signs]); + imgTag.setAttribute("alt", "Logo " + this.labels[shop.signs]); + // Display the name and address + shopListElement.childNodes[1].childNodes[3].childNodes[1].textContent = + shop.name; + shopListElement.childNodes[1].childNodes[3].childNodes[3].textContent = + shop.address + ", " + shop.postcode + " " + shop.city; + // Display the distance + let unit = " km"; + if (shop.distance < 1) { + unit = " mètres"; + shop.distance = shop.distance * 1000; + } + shopListElement.childNodes[1].childNodes[3].childNodes[5].textContent = + shop.distance?.toString() + unit; + // Link to get the journey on Google Maps + let aTag = shopListElement.childNodes[3] as HTMLElement; + aTag.setAttribute( + "href", + "https://www.google.com/maps/dir/?api=1&origin=" + + this.searchedAddress.geometry.coordinates[1] + + "," + + this.searchedAddress.geometry.coordinates[0] + + "&destination=" + + shop.latitude + + "," + + shop.longitude + ); + aTag.setAttribute("target", "_blank"); + + shopListElement.classList.remove("d-none"); + shopListElement.setAttribute("id", "shop-list-item-" + i); + shopListElement.addEventListener("click", (event: Event) => { + this.defineZoom(shop); + }); + list.appendChild(shopListElement); + i++; + } + }, + }, + watch: { + addressInput() { + let addressInputField = document.getElementById( + "address" + ) as HTMLInputElement; + this.addressInput = addressInputField.value; + this.fullAddress = this.addressInput.split(","); + this.address = this.fullAddress[0].split(" ").join("+"); + }, + }, +}); + + + diff --git a/resources/views/fo/layout.blade.php b/resources/views/fo/layout.blade.php index 617eb32..114903f 100644 --- a/resources/views/fo/layout.blade.php +++ b/resources/views/fo/layout.blade.php @@ -20,6 +20,7 @@ @stack('scriptsConstants') @include('modules.scriptConstants') +@include('modules.scriptRoutes') @stack('scripts') diff --git a/resources/views/modules/scriptRoutes.blade.php b/resources/views/modules/scriptRoutes.blade.php index ecff2e9..d379ff4 100644 --- a/resources/views/modules/scriptRoutes.blade.php +++ b/resources/views/modules/scriptRoutes.blade.php @@ -3,4 +3,6 @@ if (!window.__SYSTEM._routes) { window.__SYSTEM._routes = {}; } +window.__SYSTEM._routes['shops.index'] = '{{ route('shops.index') }}'; +window.__SYSTEM._routes['shops.nearest'] = '{{ route('shops.nearest') }}'; diff --git a/routes/web-fo.php b/routes/web-fo.php index 37a35e2..cd1edb4 100644 --- a/routes/web-fo.php +++ b/routes/web-fo.php @@ -47,5 +47,5 @@ Route::view('/politique-de-donnees-personnelles', 'fo.pages.policies')->name('po Route::view('/mentions-legales', 'fo.pages.legals')->name('legals'); // * ROUTES TO GET SHOPS FOR MARKET FINDER -Route::get('/api/shops', [ShopController::class, 'getAll']); -Route::get('/api/shops/search', [ShopController::class, 'getNearest']); +Route::get('/api/shops', [ShopController::class, 'index'])->name('shops.index'); +Route::get('/api/shops/search', [ShopController::class, 'getNearest'])->name('shops.nearest');