app/views/directions/show.html.erb

   1 <% content_for(:content_class) { "overlay-sidebar" } %>
   2
   3 <svg class="d-none">
   4   <% Rails.root.glob("app/assets/images/routing/*.svg")
   5           .map { |path| File.basename(path, ".svg") }
   6           .each do |icon| %>
   7     <%= inline_svg_tag "routing/#{icon}.svg", :id => "routing-sprite-#{icon}", :to_symbol => true %>
   8     <% if icon.end_with?("right") %>
   9       <symbol id="routing-sprite-<%= icon.sub("right", "left") %>">
  10         <use href="#routing-sprite-<%= icon %>" transform="matrix(-1 0 0 1 20 0)" />
  11       </symbol>
  12     <% end
  13   end %>
  14 </svg>
  15
  16 <%= render "sidebar_header", :title => t(".title") %>
  17
  18 <div id="directions_loader" hidden>
  19   <div class="text-center loader">
  20     <div class="spinner-border" role="status">
  21       <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
  22     </div>
  23   </div>
  24 </div>
  25
  26 <div id="directions_error" hidden></div>
  27
  28 <div id="directions_route" hidden>
  29   <div id="directions_distance_units_settings" class="collapse">
  30     <div class="btn-group btn-group-sm w-100">
  31       <input type="radio" class="btn-check" name="directions_distance_units" value="km_m" id="directions_distance_units_km_m" autocomplete="off" checked>
  32       <label class="btn btn-outline-secondary p-0 px-1" for="directions_distance_units_km_m"><%= t ".kilometers" %></label>
  33
  34       <input type="radio" class="btn-check" name="directions_distance_units" value="mi_ft" id="directions_distance_units_mi_ft" autocomplete="off">
  35       <label class="btn btn-outline-secondary p-0 px-1" for="directions_distance_units_mi_ft"><%= t ".miles_feet" %></label>
  36
  37       <input type="radio" class="btn-check" name="directions_distance_units" value="mi_yd" id="directions_distance_units_mi_yd" autocomplete="off">
  38       <label class="btn btn-outline-secondary p-0 px-1" for="directions_distance_units_mi_yd"><%= t ".miles_yards" %></label>
  39     </div>
  40   </div>
  41
  42   <div class="mx-n3">
  43     <table class='table table-hover table-sm mb-3'>
  44       <thead>
  45         <td colspan="2" class="ps-3">
  46           <span>
  47             <%= t ".distance" %>: <output id="directions_route_distance"></output>.
  48             <%= t ".time" %>: <output id="directions_route_time"></output>.
  49           </span>
  50           <br>
  51           <span id="directions_route_ascend_descend">
  52             <%= t ".ascend" %>: <output id="directions_route_ascend"></output>.
  53             <%= t ".descend" %>: <output id="directions_route_descend"></output>.
  54           </span>
  55         </td>
  56         <td class="pe-3 text-end">
  57           <button type="button" class="btn btn-outline-secondary p-1 border-0 me-n1" data-bs-toggle="collapse" data-bs-target="#directions_distance_units_settings">
  58             <%= inline_svg_tag "icons/gear.svg", :class => "d-block", :title => t(".distance_units_settings") %>
  59           </button>
  60         </td>
  61       </thead>
  62       <tbody id="directions_route_steps"></tbody>
  63     </table>
  64   </div>
  65
  66   <p class="text-center">
  67     <%= tag.a t(".download"), :id => "directions_route_download", :download => t(".filename") %>
  68   </p>
  69
  70   <p class="text-center">
  71     <%= t ".directions_courtesy_html", :link => tag.a("", :id => "directions_route_credit", :target => "_blank") %>
  72   </p>
  73 </div>