frames/pages/structures_adherentes/index.vue

<template>
  <LayoutContainer>
    <!-- All members -->
    <div
      class="ot-structures-frame map-view"
    >
      <header>
        <h2>{{ $t("member_companies") }}</h2>
        <a href="#" class="activate-map-view">{{ $t("map") }}</a>
        <a href="#" class="activate-list-view">{{ $t("list") }}</a>
      </header>

      <div class="structure-col structure-col-map">
        <div id="structure-map-wrapper">
          <div id="structure-map" />
        </div>

        <div id="structure-map-bar">
          <div class="advice">
            {{ $t("click_on_land_to_go_there") }}
          </div>
          <ul id="overseas-provinces-list">
            <li><nuxt-img src="/images/metropole.png" alt="Metropole" data="{map-fit: '51.03,-5.78;41.2,9.70'}" /></li>
            <li><nuxt-img src="/images/guadeloupe.png" alt="Guadeloupe" data="{map-fit: '16.62,-62.03;15.74,-60.97'}" /></li>
            <li><nuxt-img src="/images/martinique.png" alt="Martinique" data="{map-fit: '14.95,-61.43;14.28,-60.60'}" /></li>
            <li><nuxt-img src="/images/mayotte.png" alt="Mayotte" data="{map-fit: '-12.51,44.86;-13.19,45.45'}" /></li>
            <li><nuxt-img src="/images/la_reunion.png" alt="La Réunion" data="{map-fit: '-20.65,54.92;-21.65,56.15'}" /></li>
            <li><nuxt-img src="/images/guyane.png" alt="Guyane" data="{map-fit: '6.24,-54.62;1.87,-50.59'}" /></li>
          </ul>
        </div>
      </div>

      <div class="structure-col structure-col-results">
        <div class="structure-search">
          <v-form id="structure-search-form" method="get">
            <div class="structure-search-row">
              <div class="search-bar-wrapper">
                <v-text-field
                  type="text"
                  class="search-bar"
                  name="search-query"
                  :placeholder="$t('what') + ' ?'"
                >
                  <button
                    class="search-bar-btn"
                    name="submit-search"
                  >
                    <i class="fas fa-search" />
                  </button>
                </v-text-field>
              </div>
              <div class="search-bar-wrapper">
                <v-text-field
                  type="text"
                  name="search-city"
                  class="search-bar"
                  :placeholder="$t('what') + ' ?'"
                  autocomplete="off"
                >
                  <button
                    class="search-bar-btn"
                    name="search-localize"
                  >
                    <i class="fas fa-crosshairs" />
                  </button>
                  <div class="city-search-dropdown" style="display: none;">
                    <div class="city-search-loading">
                      <nuxt-img
                        src="EXT:ot_templating/Resources/Public/media/gear.gif"
                        :alt="$t('please_wait')"
                      />
                    </div>
                    <div class="city-search-no-result">
                      {{ $t('no_result') }}
                    </div>
                    <div class="city-search-results" />
                  </div>
                  <input type="hidden" name="lat" value="{ot:request.getArgument(argument: 'lat')}">
                  <input type="hidden" name="long" value="{ot:request.getArgument(argument: 'long')}">
                </v-text-field>
              </div>
            </div>
            <div class="structure-search-row filters">
              <select name="search-practice" disabled>
                <option value="">
                  Type
                </option>
              </select>
              <select name="search-province">
                <option value="">
                  Département
                </option>
                <option value="01">
                  01 - Ain
                </option><option value="02">
                  02 - Aisne
                </option><option value="03">
                  03 - Allier
                </option><option value="04">
                  04 - Alpes-de-Haute-Provence
                </option><option value="05">
                  05 - Hautes-Alpes
                </option><option value="06">
                  06 - Alpes-Maritimes
                </option><option value="07">
                  07 - Ardèche
                </option><option value="08">
                  08 - Ardennes
                </option><option value="09">
                  09 - Ariège
                </option><option value="10">
                  10 - Aube
                </option><option value="11">
                  11 - Aude
                </option><option value="12">
                  12 - Aveyron
                </option><option value="13">
                  13 - Bouches-du-Rhône
                </option><option value="14">
                  14 - Calvados
                </option><option value="15">
                  15 - Cantal
                </option><option value="16">
                  16 - Charente
                </option><option value="17">
                  17 - Charente-Maritime
                </option><option value="18">
                  18 - Cher
                </option><option value="19">
                  19 - Corrèze
                </option><option value="2A">
                  2A - Corse-du-Sud
                </option><option value="2B">
                  2B - Haute-Corse
                </option><option value="21">
                  21 - Côte-d'Or
                </option><option value="22">
                  22 - Côtes-d'Armor
                </option><option value="23">
                  23 - Creuse
                </option><option value="24">
                  24 - Dordogne
                </option><option value="25">
                  25 - Doubs
                </option><option value="26">
                  26 - Drôme
                </option><option value="27">
                  27 - Eure
                </option><option value="28">
                  28 - Eure-et-Loir
                </option><option value="29">
                  29 - Finistère
                </option><option value="2A">
                  2A - Corse-du-Sud
                </option><option value="2B">
                  2B - Haute-Corse
                </option><option value="30">
                  30 - Gard
                </option><option value="31">
                  31 - Haute-Garonne
                </option><option value="32">
                  32 - Gers
                </option><option value="33">
                  33 - Gironde
                </option><option value="34">
                  34 - Hérault
                </option><option value="35">
                  35 - Ille-et-Vilaine
                </option><option value="36">
                  36 - Indre
                </option><option value="37">
                  37 - Indre-et-Loire
                </option><option value="38">
                  38 - Isère
                </option><option value="39">
                  39 - Jura
                </option><option value="40">
                  40 - Landes
                </option><option value="41">
                  41 - Loir-et-Cher
                </option><option value="42">
                  42 - Loire
                </option><option value="43">
                  43 - Haute-Loire
                </option><option value="44">
                  44 - Loire-Atlantique
                </option><option value="45">
                  45 - Loiret
                </option><option value="46">
                  46 - Lot
                </option><option value="47">
                  47 - Lot-et-Garonne
                </option><option value="48">
                  48 - Lozère
                </option><option value="49">
                  49 - Maine-et-Loire
                </option><option value="50">
                  50 - Manche
                </option><option value="51">
                  51 - Marne
                </option><option value="52">
                  52 - Haute-Marne
                </option><option value="53">
                  53 - Mayenne
                </option><option value="54">
                  54 - Meurthe-et-Moselle
                </option><option value="55">
                  55 - Meuse
                </option><option value="56">
                  56 - Morbihan
                </option><option value="57">
                  57 - Moselle
                </option><option value="58">
                  58 - Nièvre
                </option><option value="59">
                  59 - Nord
                </option><option value="60">
                  60 - Oise
                </option><option value="61">
                  61 - Orne
                </option><option value="62">
                  62 - Pas-de-Calais
                </option><option value="63">
                  63 - Puy-de-Dôme
                </option><option value="64">
                  64 - Pyrénées-Atlantiques
                </option><option value="65">
                  65 - Hautes-Pyrénées
                </option><option value="66">
                  66 - Pyrénées-Orientales
                </option><option value="67">
                  67 - Bas-Rhin
                </option><option value="68">
                  68 - Haut-Rhin
                </option><option value="69">
                  69 - Rhône
                </option><option value="70">
                  70 - Haute-Saône
                </option><option value="71">
                  71 - Saône-et-Loire
                </option><option value="72">
                  72 - Sarthe
                </option><option value="73">
                  73 - Savoie
                </option><option value="74">
                  74 - Haute-Savoie
                </option><option value="75">
                  75 - Paris
                </option><option value="76">
                  76 - Seine-Maritime
                </option><option value="77">
                  77 - Seine-et-Marne
                </option><option value="78">
                  78 - Yvelines
                </option><option value="79">
                  79 - Deux-Sèvres
                </option><option value="80">
                  80 - Somme
                </option><option value="81">
                  81 - Tarn
                </option><option value="82">
                  82 - Tarn-et-Garonne
                </option><option value="83">
                  83 - Var
                </option><option value="84">
                  84 - Vaucluse
                </option><option value="85">
                  85 - Vendée
                </option><option value="86">
                  86 - Vienne
                </option><option value="87">
                  87 - Haute-Vienne
                </option><option value="88">
                  88 - Vosges
                </option><option value="89">
                  89 - Yonne
                </option><option value="90">
                  90 - Territoire de Belfort
                </option><option value="91">
                  91 - Essonne
                </option><option value="92">
                  92 - Hauts-de-Seine
                </option><option value="93">
                  93 - Seine-Saint-Denis
                </option><option value="94">
                  94 - Val-de-Marne
                </option><option value="95">
                  95 - Val-d'Oise
                </option><option value="971">
                  971 - Guadeloupe
                </option><option value="972">
                  972 - Martinique
                </option><option value="973">
                  973 - Guyane
                </option><option value="974">
                  974 - La Réunion
                </option><option value="976">
                  976 - Mayotte
                </option>
              </select>

              <select name="search-federation" disabled>
                <option value="">
                  Fédération
                </option>
                <option value="-1" />
              </select>

              <select name="search-radius">
                <option value="">
                  Distance
                </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>
            </div>
            <div class="structure-search-row search-buttons">
              <button class="reset-search">
                Réinitialiser
              </button>
              <span class="spacer" />
              <button class="submit-search" name="submit-search">
                Rechercher
              </button>
            </div>
          </v-form>
        </div>

        <div class="structure-results">
          <span class="please-wait">
            <nuxt-img
              src="/images/gear.gif"
              :alt="$t('please_wait')"
              style="margin-top:100px; width:70px"
            />
          </span>

          <span class="no-result" style="display: none">{{ $t("no_result") }}</span>
          <span class="error-message" style="display: none">{{ $t("an_error_occured") }}</span>
          <span class="results-count-message" style="display: none">
            <i class="count" />&nbsp;<i>{{ $t("results") }}</i>
          </span>

          <div class="structures-page">
            <div class="structure-card-model" data-id="" style="display: none">
              <div class="structure-poster">
                <nuxt-img src="images/event-default.jpg" alt="poster" />
              </div>

              <div class="structure-details">
                <div class="structure-practices">
                  <span class="structure-practice-model" style="display: none" />
                </div>

                <div class="structure-name">
                  <a target="_blank" href="" />
                </div>
                <table class="structure-details-table">
                  <tr class="structure-details-entry structure-address">
                    <td><i class="fas fa-map-marker-alt" /></td>
                    <td class="structure-details-address" />
                  </tr>
                  <tr class="structure-details-entry structure-federation">
                    <td><i class="fas fa-project-diagram" /></td>
                    <td class="structure-details-federation" />
                  </tr>
                </table>
              </div>

              <div class="spacer" />

              <a class="btn structure-see" data-organization-id="" href="#">
                <span>{{ $t("see_more") }}</span>
                <i class="fa fa-caret-right" style="margin-left: 5px;" />
              </a>
            </div>
          </div>

          <div class="pagination-bar" style="display:none;">
            <a class="goto-page goto-first-page" data-page="1" href="#" :title="$t('go_to_first_page')">
              <i class="fa fa-angle-double-left" />
            </a>

            <ul class="pagination-list">
              <li class="goto-page-li-model" style="display: none;">
                <a class="goto-page" data-page="1" href="#" :title="$t('go_to_page')">
                  1
                </a>
              </li>
            </ul>

            <a class="goto-page goto-last-page" data-page="-1" href="#" :title="$t('go_to_last_page')">
              <i class="fa fa-angle-double-right" />
            </a>
          </div>
        </div>
      </div>
    </div>
  </LayoutContainer>
</template>