Display logo and alt attribute for shop signs

app/Enums/SignsEnum.php

@@ -58,6 +58,7 @@ final class SignsEnum extends BaseEnum
     protected static function stickers(): array
     {
         return [
+            'pasDenseigne' => \asset('build/assets/images/signs/logo-default.png'),
             'leclerc' => \asset('build/assets/images/signs/logo-leclerc.png'),
             'systemeU' => \asset('build/assets/images/signs/logo-systemeu.png'),
             'carrefour' => \asset('build/assets/images/signs/logo-carrefour.png'),
@@ -76,4 +77,12 @@ final class SignsEnum extends BaseEnum
         }
         return parent::__get($attribute);
     }
+
+    /**
+     * @return array
+     */
+    public static function getStickers()
+    {
+        return array_values(static::stickers());
+    }
 }

app/Http/Controllers/Bo/ShopController.php

@@ -173,7 +173,7 @@ class ShopController extends Controller
         $longitude = $request->input('longitude');
         $raw       = DB::raw(
             'ROUND ((6371*acos(cos(radians(' . $latitude . '))*cos(radians(latitude))*cos(radians(longitude) 
-            - radians(' . $longitude . '))+sin(radians(' . $latitude . '))*sin(radians(latitude))))) 
+            - radians(' . $longitude . '))+sin(radians(' . $latitude . '))*sin(radians(latitude)))), 2) 
             AS distance'
         );
         $results   = DB::table("shops")->select('*')->addSelect($raw)->orderBy('distance', 'ASC')->limit(5)->get();

config/app.php

@@ -231,7 +231,11 @@ return [
         'Str' => Illuminate\Support\Str::class,
         'URL' => Illuminate\Support\Facades\URL::class,
         'Validator' => Illuminate\Support\Facades\Validator::class,
-        'View' => Illuminate\Support\Facades\View::class
+        'View' => Illuminate\Support\Facades\View::class,
+        /**
+         * Enums aliases
+         */
+        'SignsEnum' => App\Enums\SignsEnum::class,
     ],
 
 ];

resources/ts/fo/components/GeocodageComponent.vue

@@ -7,13 +7,13 @@
   <script lang="ts">
   import { defineComponent } from "vue";
   import * as L from "leaflet";
-import { listenerCount } from "process";
-import { AnyARecord } from "dns";
-import { makeBlock } from "@vue/compiler-core";
-  
+
   export default defineComponent({
     props: {
-      signEnum: {
+      signsStickers: {
+        default: null
+      },
+      signsLabels: {
         default: null
       },
       formId: {
@@ -40,7 +40,8 @@ import { makeBlock } from "@vue/compiler-core";
       userPos: {latitude?: number; longitude?: number},
       map: any,
       centerPos: {latitude?: number; longitude?: number},
-      enum: any,
+      stickers: Array<string>,
+      labels: Array<string>,
     } {
       return {
         formAddress: document.getElementById(this.formId) as HTMLFormElement,
@@ -52,20 +53,23 @@ import { makeBlock } from "@vue/compiler-core";
         map: null,
         centerPos: {},
         shops: [],
-        enum: null,
+        stickers: [],
+        labels: [],
       };
     },
     mounted() {
       const json = String(this.$attrs.json ?? "{}");
       if (json.length) {
         const data = JSON.parse(json);
-        if(data.signEnum) {
-          this.enum = data.signEnum;
+        if(data.signsStickers) {
+          this.stickers = data.signsStickers;
+        }
+        if(data.signsLabels) {
+          this.labels = data.signsLabels;
+          console.log(this.labels)
         }
         if(data.formId) {
-          console.log(data.formId)
           this.formAddress = document.getElementById(data.formId) as HTMLFormElement;
-          console.log(this.formAddress)
           this.formAddress?.addEventListener('submit', this.searchAddress);
         }
       }
@@ -81,9 +85,9 @@ import { makeBlock } from "@vue/compiler-core";
         });
     },
     methods: {
-      searchAddress(event: Event) {
+      searchAddress(event?: Event) {
         console.log(event);
-        event.preventDefault();
+        event?.preventDefault();
         const formInput = this.formAddress.firstElementChild as HTMLInputElement;
         if (formInput.value) {
           this.address = formInput.value.split(" ").join("+");
@@ -186,9 +190,10 @@ import { makeBlock } from "@vue/compiler-core";
         let i = 1;
         for(let shop of this.shops) {
           let shopListElement = baseItem?.cloneNode(true);
-          //! Modifier l'image de l'enseigne
-          // shopListElement.childNodes[1].childNodes[2].setAttribute('src', );
-
+          // 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;

resources/views/fo/pages/map.blade.php

@@ -72,6 +72,8 @@
             <div class="col-lg-6">
                 @php
                 $data = [
+                    'signsStickers' => SignsEnum::getStickers(),
+                    'signsLabels' => SignsEnum::toLabels(),
                     'formId' => 'address-form'
                 ]
                 @endphp