app/views/directions/show.html.erb

   1 <% content_for(:content_class) { "overlay-sidebar" } %>
   2
   3 <svg width="20" height="20" class="d-none">
   4   <symbol id="routing-sprite-start" fill="none" stroke="currentColor" stroke-width="2">
   5     <path d="M10 16 a1 1 0 1 0 0 -2 1 1 0 1 0 0 2 m0 -4 v-8 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
   6   </symbol>
   7   <symbol id="routing-sprite-destination" fill="none" stroke="currentColor" stroke-width="2">
   8     <path d="M10 5 a1 1 0 1 0 0 -2 1 1 0 1 0 0 2 m0 12 v-8 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
   9   </symbol>
  10
  11   <symbol id="routing-sprite-straight" fill="none" stroke="currentColor" stroke-width="2">
  12     <path d="M10 17 v-13 m2.5 2 l-2.5 -2.5 -2.5 2.5 z" />
  13   </symbol>
  14   <symbol id="routing-sprite-slight-right" fill="none" stroke="currentColor" stroke-width="2">
  15     <path d="M7 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
  16   </symbol>
  17   <symbol id="routing-sprite-right" fill="none" stroke="currentColor" stroke-width="2">
  18     <path d="M8 17 v-5 q0 -3 3 -3 h4 m-2 2.5 l2.5 -2.5 -2.5 -2.5 z" />
  19   </symbol>
  20   <symbol id="routing-sprite-sharp-right" fill="none" stroke="currentColor" stroke-width="2">
  21     <path d="M8 17 v-7 q0 -6 6 0 l2 2 m0 0 v-3 l-3 3 z" />
  22   </symbol>
  23   <symbol id="routing-sprite-u-turn-right" fill="none" stroke="currentColor" stroke-width="2">
  24     <path d="M4 17 v-7 a4.5 4.5 0 0 1 9 0 v5 m2.5 -2 l-2.5 2.5 -2.5 -2.5 z" />
  25   </symbol>
  26   <symbol id="routing-sprite-slight-left">
  27     <use href="#routing-sprite-slight-right" transform="matrix(-1 0 0 1 20 0)" />
  28   </symbol>
  29   <symbol id="routing-sprite-left">
  30     <use href="#routing-sprite-right" transform="matrix(-1 0 0 1 21 0)" />
  31   </symbol>
  32   <symbol id="routing-sprite-sharp-left">
  33     <use href="#routing-sprite-sharp-right" transform="matrix(-1 0 0 1 21 0)" />
  34   </symbol>
  35   <symbol id="routing-sprite-u-turn-left">
  36     <use href="#routing-sprite-u-turn-right" transform="matrix(-1 0 0 1 20 0)" />
  37   </symbol>
  38
  39   <symbol id="routing-sprite-roundabout" fill="none" stroke="currentColor" stroke-width="2">
  40     <path d="M8 17 v-3 a 3 3 0 1 0 0 -6 3 3 0 1 0 0 6 m2 -4 l5 -5 m0 0 h-3 l3 3 z" />
  41   </symbol>
  42
  43   <symbol id="routing-sprite-fork-right" fill="none" stroke="currentColor" stroke-width="2">
  44     <path d="M9 14 q0 -2 -2 -4 l-3 -3" opacity=".5" />
  45     <path d="M9 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
  46   </symbol>
  47   <symbol id="routing-sprite-fork-left">
  48     <use href="#routing-sprite-fork-right" transform="matrix(-1 0 0 1 20 0)" />
  49   </symbol>
  50   <symbol id="routing-sprite-merge-left" fill="none" stroke="currentColor" stroke-width="2">
  51     <path d="M8 7 q0 2 -2 4 l-3 3" opacity=".5" />
  52     <path d="M8 4 v3 q0 2 2 4 l5 5 m-5 -5 h3 l-3 3 z" />
  53   </symbol>
  54   <symbol id="routing-sprite-merge-right">
  55     <use href="#routing-sprite-merge-left" transform="matrix(-1 0 0 1 20 0)" />
  56   </symbol>
  57   <symbol id="routing-sprite-end-of-road-right" fill="none" stroke="currentColor" stroke-width="2">
  58     <path d="M2 9 h10" opacity=".5" />
  59     <path d="M9 17 v-5 q0 -3 3 -3 h4 m-2 2.5 l2.5 -2.5 -2.5 -2.5 z" />
  60   </symbol>
  61   <symbol id="routing-sprite-end-of-road-left">
  62     <use href="#routing-sprite-end-of-road-right" transform="matrix(-1 0 0 1 20 0)" />
  63   </symbol>
  64   <symbol id="routing-sprite-exit-right" fill="none" stroke="currentColor" stroke-width="2">
  65     <path d="M9 14 v-8" opacity=".5" />
  66     <path d="M9 17 v-3 q0 -2 2 -4 l5 -5 m0 0 h-3 l3 3 z" />
  67   </symbol>
  68   <symbol id="routing-sprite-exit-left">
  69     <use href="#routing-sprite-exit-right" transform="matrix(-1 0 0 1 20 0)" />
  70   </symbol>
  71
  72   <symbol id="routing-sprite-ferry" fill="none" stroke="currentColor" stroke-width="1">
  73     <path d="M10.5 8 l-6 2 l2.5 2 v1.5 a2.828 2.828 0 0 1 1.5 1 a2.828 2.828 0 0 1 4 0 a2.828 2.828 0 0 1 1.5 -1 v-1.5 l2.5 -2 z" fill="currentColor" />
  74     <path d="M6.5 9.5 v-5 h8 v5 m-5.5 -6 h3" />
  75     <path d="M5.5 16.5 a1.414 2.828 0 0 1 2 0 a1.414 2.828 0 0 0 2 0 a1.414 2.828 0 0 1 2 0 a1.414 2.828 0 0 0 2 0 a1.414 2.828 0 0 1 2 0" />
  76   </symbol>
  77 </svg>
  78
  79 <%= render "sidebar_header", :title => t(".title") %>
  80
  81 <div id="directions_loader" hidden>
  82   <div class="text-center loader">
  83     <div class="spinner-border" role="status">
  84       <span class="visually-hidden"><%= t("browse.start_rjs.loading") %></span>
  85     </div>
  86   </div>
  87 </div>
  88
  89 <div id="directions_error" hidden></div>
  90
  91 <div id="directions_route" hidden>
  92   <div id="directions_distance_units_settings" class="collapse">
  93     <div class="btn-group btn-group-sm w-100">
  94       <input type="radio" class="btn-check" name="directions_distance_units" value="km_m" id="directions_distance_units_km_m" autocomplete="off" checked>
  95       <label class="btn btn-outline-secondary p-0 px-1" for="directions_distance_units_km_m"><%= t ".kilometers" %></label>
  96
  97       <input type="radio" class="btn-check" name="directions_distance_units" value="mi_ft" id="directions_distance_units_mi_ft" autocomplete="off">
  98       <label class="btn btn-outline-secondary p-0 px-1" for="directions_distance_units_mi_ft"><%= t ".miles_feet" %></label>
  99
 100       <input type="radio" class="btn-check" name="directions_distance_units" value="mi_yd" id="directions_distance_units_mi_yd" autocomplete="off">
 101       <label class="btn btn-outline-secondary p-0 px-1" for="directions_distance_units_mi_yd"><%= t ".miles_yards" %></label>
 102     </div>
 103   </div>
 104
 105   <div class="mx-n3">
 106     <table class='table table-hover table-sm mb-3'>
 107       <thead>
 108         <td colspan="2" class="ps-3">
 109           <span>
 110             <%= t ".distance" %>: <output id="directions_route_distance"></output>.
 111             <%= t ".time" %>: <output id="directions_route_time"></output>.
 112           </span>
 113           <br>
 114           <span id="directions_route_ascend_descend">
 115             <%= t ".ascend" %>: <output id="directions_route_ascend"></output>.
 116             <%= t ".descend" %>: <output id="directions_route_descend"></output>.
 117           </span>
 118         </td>
 119         <td class="pe-3 text-end">
 120           <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">
 121             <svg width="16" height="16" fill="currentColor" class="d-block">
 122               <title><%= t ".distance_units_settings" %></title>
 123               <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0" />
 124               <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z" />
 125             </svg>
 126           </button>
 127         </td>
 128       </thead>
 129       <tbody id="directions_route_steps"></tbody>
 130     </table>
 131   </div>
 132
 133   <p class="text-center">
 134     <%= tag.a t(".download"), :id => "directions_route_download", :download => t(".filename") %>
 135   </p>
 136
 137   <p class="text-center">
 138     <%= t ".directions_courtesy_html", :link => tag.a("", :id => "directions_route_credit", :target => "_blank") %>
 139   </p>
 140 </div>