add the city search bar and complete result cards

ot_core/Classes/Domain/Model/FederationStructure.php

@@ -86,7 +86,14 @@ class FederationStructure extends AbstractEntity
      *
      * @var string
      */
-    protected $logo_id;
+    protected $logoUri;
+
+    /**
+     * parent_name
+     *
+     * @var string
+     */
+    protected $parent_name;
 
     /**
      * parents
@@ -305,22 +312,43 @@ class FederationStructure extends AbstractEntity
     /**
      * Returns the logo
      *
-     * @return string $logo_id
+     * @return string $logoUri
      */
-    public function getLogoId(): ?string
+    public function getLogoUri(): ?string
     {
-        return $this->logo_id;
+        return $this->logoUri;
     }
 
     /**
      * Sets the logo
      *
-     * @param string|null $logo_id
+     * @param string|null $logoUri
+     * @return void
+     */
+    public function setLogoUri(?string $logoUri)
+    {
+        $this->logoUri = $logoUri;
+    }
+
+    /**
+     * Returns the parent name
+     *
+     * @return string $parent_name
+     */
+    public function getParentName(): ?string
+    {
+        return $this->parent_name;
+    }
+
+    /**
+     * Sets the parent name
+     *
+     * @param string|null $parent_name
      * @return void
      */
-    public function setLogoId(?string $logo_id)
+    public function setParentName(?string $parent_name)
     {
-        $this->logo_id = $logo_id;
+        $this->parent_name = $parent_name;
     }
 
     /**

ot_core/Classes/Domain/Repository/FederationStructureRepository.php

@@ -60,7 +60,10 @@ class FederationStructureRepository extends BaseApiRepository
         $federationStructure->setLongitude($record['longitude']);
         $federationStructure->setCountry($record['country']);
         $federationStructure->setCategories($record['categories']);
-        $federationStructure->setLogoId($record['logo_id']);
+        if ($record['logoId']) {
+            $federationStructure->setLogoUri($this->apiService->getApiUri('_internal/secure/files/') . $record['logoId']);
+        }
+        $federationStructure->setParentName($record['n1Name']);
         $federationStructure->setParents($record['parents']);
         return $federationStructure;
     }

ot_core/Classes/Service/OpentalentApiService.php

@@ -70,7 +70,7 @@ class OpentalentApiService implements LoggerAwareInterface
      * @param string $trailing_part
      * @return string
      */
-    protected function getApiUri(string $trailing_part = ""): string
+    public function getApiUri(string $trailing_part = ""): string
     {
         $host = $_SERVER['HTTP_HOST'] ?? $_SERVER['VIRTUAL_HOST'];
 

ot_templating/Resources/Private/Language/locallang.xlf

@@ -1644,7 +1644,7 @@
 			    <source>Dance</source>
 			</trans-unit>
 			<trans-unit id="5FA" xml:space="preserve">
-			    <source>Art du spectacle </source>
+			    <source>Art du spectacle</source>
 			</trans-unit>
 			<trans-unit id="OTAR" xml:space="preserve">
 			    <source>Arts de rue</source>

ot_templating/Resources/Private/Layouts/Classic/StructuresFrame.html

@@ -51,19 +51,32 @@
                     </header>
                     <div class="structure-search">
                         <form method="get" id="structure-search-form">
-                            <div class="search-bar-wrapper">
-                                <input type="text"
-                                       name="search-query"
-                                       class="search-bar"
-                                       value="{ot:request.getArgument(argument: 'search-loc')}"/>
-                                <button class="search-submit"
-                                        name="search-submit"
-                                >
-                                    <i class="fas fa-search"></i>
-                                </button>
+                            <div class="structure-search-row">
+                                <div class="search-bar-wrapper">
+                                    <input type="text"
+                                           class="search-bar"
+                                           name="search-query"
+                                           placeholder="{f:translate(key: 'what')}?"
+                                           value="{ot:request.getArgument(argument: 'search-query')}"/>
+                                    <button class="search-bar-btn"
+                                            name="search-submit"
+                                    >
+                                        <i class="fas fa-search"></i>
+                                    </button>
+                                </div>
+                                <div class="search-bar-wrapper">
+                                    <input type="text"
+                                           name="search-city"
+                                           class="search-bar"
+                                           placeholder="{f:translate(key: 'where')}?"
+                                           value="{ot:request.getArgument(argument: 'search-city')}"/>
+                                    <button class="search-bar-btn"
+                                            name="search-localize">
+                                        <i class="fas fa-crosshairs"></i>
+                                    </button>
+                                </div>
                             </div>
-
-                            <div class="filters">
+                            <div class="structure-search-row filters">
                                 <f:form.select name="search-category"
                                                value="{ot:request.getArgument(argument: 'search-category')}">
                                     <f:form.select.option value="">Type</f:form.select.option>
@@ -85,9 +98,13 @@
                                     <f:form.select.option value="">Fédération</f:form.select.option>
                                     <f:form.select.option value="0">CMF</f:form.select.option>
                                 </f:form.select>
-                                <select class="search-distance-max">
+                                <select disabled class="search-distance-max">
                                     <option value="">Distance</option>
-                                    <option value="0">100</option>
+                                    <option value="10">10km</option>
+                                    <option value="30">30km</option>
+                                    <option value="50">50km</option>
+                                    <option value="100">100km</option>
+                                    <option value="200">200km</option>
                                 </select>
 
                                 <button class="reset-search">Réinitialiser</button>

ot_templating/Resources/Public/assets/Classic/script/structures.js

@@ -1,4 +1,16 @@
 
+let structures_categories = {
+    '1MC': 'Musique',
+    '2TH': 'Théatre',
+    '3DA': 'Dance',
+    '5FA': 'Art du spectacle',
+    'OTAR': 'Arts de rue',
+    'OTCI': 'École de cirque',
+    '6AR': 'Musée',
+    '8CI': 'Cinéma',
+    'OTAU': 'Autres'
+}
+
 // Specific JS used for the Structures layout
 // > Needs to be loaded after the main.js script
 $(document).ready(function() {
@@ -97,12 +109,22 @@ $(document).ready(function() {
 
                     cardDiv.data('id', structure.id);
 
-                    cardDiv.find('.structure-poster').first().children('img').first().attr('src', structure.logoId);
+                    let categoryTagModel = cardDiv.find('.structure-category-model').first();
+                    structure.categories.forEach(function(cat) {
+                        let tag = categoryTagModel.clone();
+                        tag.text(structures_categories[cat]);
+                        tag.removeClass('structure-category-model')
+                        tag.addClass('structure-category')
+                        tag.show();
+                        categoryTagModel.parent().append(tag);
+                    });
+
+                    cardDiv.find('.structure-poster').first().children('img').first().attr('src', structure.logoUri);
                     cardDiv.find('.structure-name').first().text(structure.name);
                     cardDiv.find('.structure-details-address').first().text(
                         [structure.streetAddress, structure.postalCode, structure.addressCity].join(" ")
                     );
-                    cardDiv.find('.structure-details-federation').first().text("A network...");
+                    cardDiv.find('.structure-details-federation').first().text(structure.parentName);
 
                     cardDiv.show();
                     cardDiv.removeClass('structure-card-model');

ot_templating/Resources/Public/assets/Classic/style/module/_structures.scss

@@ -144,6 +144,7 @@ $input-border-color: #bfbfbf;
 .ot-structures-frame {
   @include flex;
   flex-direction: row;
+  flex-wrap: wrap;
 
   header {
     display: flex;
@@ -253,25 +254,31 @@ $input-border-color: #bfbfbf;
     flex-direction: column;
   }
 
-  .search-bar-wrapper {
+  .structure-search-row {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
+  }
+
+  .search-bar-wrapper {
     height: 34px;
     padding: 8px 24px;
     border: solid 1px $input-border-color;
-    margin-bottom: 14px;
+    margin: 6px auto;
   }
 
-  .structure-search .search-bar {
+  .search-bar {
     flex: 1;
     background: none;
     outline: none;
     height: auto;
     font-size: 18px;
     border: none;
+    width: 190px;
   }
 
-  .structure-search .search-submit {
+  .search-bar-btn {
     border: none;
     background: none;
     width: 24px;
@@ -282,16 +289,10 @@ $input-border-color: #bfbfbf;
     min-height: 32px;
   }
 
-  .structure-search .search-submit .fas {
+  .search-bar-btn .fas {
     color: darken($input-border-color, 20);
   }
 
-  .structure-search .filters {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-
   .structure-search select {
     color: $btn-background-color;
     padding: 4px 6px;