map_route_planner-1.0.0-alpha4/templates/map-route.html.twig

{#
/**
 * @file
 * Default theme implementation to present a map route entity.
 *
 * This template is used when viewing a registered map route's page,
 * e.g., /admin/config/content/map-route)/123. 123 being the map route's ID.
 *
 * Available variables:
 * - content: A list of content items. Use 'content' to print all content, or
 *   print a subset such as 'content.title'.
 * - attributes: HTML attributes for the container element.
 *
 * @see template_preprocess_map_route()
 */
#}

{% if content['map_route'] %}
  {% set map_route = content['map_route'] %}
  {% set enable_element_btn_switch = map_route['enable_element_btn_switch'] %}
  {% set enable_element_btn_minimize_restore = map_route['enable_element_btn_minimize_restore'] %}
  {% set other_options_submit_button_label = map_route['other_options_submit_button_label'] %}

  <div id='container-map-route'>

    <div id='container-google-map'>

      {% block google_map %}
        <div id='google-map'></div>
      {% endblock google_map %}

      {% block destination_form %}
        <form id='destination_form' onsubmit='return false;' spellcheck='false'>

          {% block travel_mode %}
            <div id='travel_mode'>

              {% for transport_key, transport_label in map_route['enable_element_transport'] %}
                {% set transport_default_value = ''%}
                {% if loop.first %}
                  {% set transport_default_value = ' checked'%}
                {% endif %}
                <input type='radio' id='travel_mode-{{ transport_key }}'
                       name='travel-mode' value='{{ transport_key }}'
                       data-tooltip='{{ transport_label }}'
                       title='{{ transport_label }}'{{ transport_default_value }}>
                <label for='travel_mode-{{ transport_key }}'>
                  {% include '@map_route_planner/../icons/directions-' ~ transport_key ~ '.svg' %}
                </label>
              {% endfor %}

            </div>
          {% endblock travel_mode %}

          {% block destinations %}
            <div id='destinations'>
              <ul id='destinations-icons'>
                <li>
                <span class='icon'>
                  {% include '@map_route_planner/../icons/circle.svg' %}
                </span>
                </li>
                <li>
                <span class='icon'>
                  {% include '@map_route_planner/../icons/3dots.svg' %}
                </span>
                </li>
                <li>
                <span class='icon'>
                  {% include '@map_route_planner/../icons/place.svg' %}
                </span>
                </li>
              </ul>
              <div id='destinations-addresses'>
                <div id='address-0' class='input-contain'>
                  <input type='text' id='location-input' name='location-input' autocomplete='off' aria-labelledby='placeholder-location-input' placeholder='{{ map_route['other_options_starting_address_placeholder'] }}'>
                  <button class='icon-button search-button'>
                    {% include '@map_route_planner/../icons/search-magnifier.svg' %}
                  </button>
                  {% if map_route['label_address_show_start'] and map_route['label_address_text_start'] is not empty %}
                    <label class='placeholder-text' for='location-input' id='placeholder-location-input'>
                      <div class='text'>{{ map_route['label_address_text_start'] }}</div>
                    </label>
                  {% endif %}
                </div>
                <div id='address-1' class='input-contain'>
                  <select id='label_end' name='label_end' aria-labelledby='placeholder-label_end' disabled='true'>
                    <option id='title' value='{{ map_route['destination_address'] }}' selected='true'>{{ map_route['destination_title'] }}</option>
                  </select>
                  {% if map_route['label_address_show_end'] %}
                    <label class='placeholder-text' for='label_end' id='placeholder-label_end'>
                      <div class='text'>{{ map_route['label_address_text_end'] }}</div>
                    </label>
                  {% endif %}
                </div>
              </div>
              <div id='destinations-addresses-reverse'>
                {% if enable_element_btn_switch %}
                  <button type='button' class='icon-button' id='addresses-reverse'
                          data-tooltip='{{ 'Reverse the starting point and destination'|t }}'
                  >
                    {% include '@map_route_planner/../icons/swap-vertical.svg' %}
                  </button>
                {% endif %}
              </div>
            </div>
          {% endblock destinations %}

          {% block button_actions %}
            <div id='button_actions'>
              {% if enable_element_btn_minimize_restore %}
                <div id='btn-minimize-restore'>
                  <button type='button' id='minimize'
                          data-tooltip='{{ 'Reduce'|t }}'>
                    {% include '@map_route_planner/../icons/minimize.svg' %}
                  </button>
                  <button type='button' id='restore'
                          data-tooltip='{{ 'Restore'|t }}'>
                    {% include '@map_route_planner/../icons/restore.svg' %}
                  </button>
                </div>
              {% endif %}
              <button type='submit' id='map_route_planner' data-tooltip='{{ other_options_submit_button_label }}'>
                {{ other_options_submit_button_label }}
              </button>
            </div>
          {% endblock button_actions %}

        </form>
      {% endblock destination_form %}

      {% block overlay_and_map_loader %}
        <div id='overlay'>
          <div id='map-loader'></div>
        </div>
      {% endblock overlay_and_map_loader %}

    </div>

    {% block print %}
      <div id='print'>
        <span>{{ 'Print'|t }}</span>
        <div id='sub_print'>
          <p id='print1'>{{ 'Itinerary'|t }}</p>
        </div>
      </div>
    {% endblock print %}

    {% block panel %}
      <div id='directions-panel'></div>
    {% endblock panel %}
  </div>

{% endif %}