mirrors.html

<%- query = req.parameters.q %>
<% title = 'CPAN Mirrors' %>
<script src="/static/openlayers/OpenLayers.js"></script>
<ul class="nav-list slidepanel">
    <li class="visible-xs">
      <% INCLUDE mobile/toolbar-search-form.html %>
    </li>
    <li class="nav-header">Sorting</li>
    <li>
      <span style="float: right; visibility: hidden" id="busy"><i class="fa fa-spinner fa-spin"></i></span>
      <button class="btn-link" onclick="searchForNearest(); return false;"><i class="fa fa-fw fa-map-marker black"></i>Nearest</button>
    </li>
    <li class="nav-header">Protocols</li>
    <%-
      FOREACH proto IN ['http', 'ftp', 'rsync'];
        checked = 0;
        protos = c.req.params.q ? c.req.params.q.split(/\s+/) : [];
    %>
    <li><a href="?q=<%
      IF protos.grep(->(p){ p == proto }).size;
        checked = 1;
        protos = protos.grep(->(p){ p != proto });
      ELSE;
        protos.push(proto);
      END;
      protos.sort.join('%20');
      %>"><i class="fa fa-fw<% checked ? " fa-check-circle" : "" %> black"></i><% proto.uc %></a></li>
    <%- END %>
    <li class="nav-header">Continents</li>
    <%- continents = []; FOREACH mirror IN mirrors; continents.push(mirror.continent); END %>
    <% FOREACH continent IN continents.unique.sort %>
    <li><a href="#<% continent %>"><% continent %></a></li>
    <% END %>
</ul>

<div class="box-right">
  <ul class="nav-list box-right hidden-phone">
    <li class="nav-header">Countries</li>
    <%- countries = {}; FOREACH mirror IN mirrors; countries.${mirror.country} = mirror.ccode; END %>
      <%- FOREACH country IN countries.keys.sort %>
      <li><a href="#<% country %>"><img class="flag" src="/static/images/flag/<% countries.$country %>.png" /><% country %></a></li>
      <% END %>
  </ul>
</div>

<div class="mirrors content">
  <div class="map"><div id="map"></div></div>
<ul>
<%-
dots = [];
continents = [];
FOREACH mirror IN mirrors;
  dots.push(mirror.location);
  UNLESS continents.last().name == mirror.continent;
    continents.push({ name = mirror.continent, countries = [] });
  END;
  continent = continents.last();
  UNLESS continent.countries.last().name == mirror.country;
    continent.countries.push({ name = mirror.country, code = mirror.ccode, mirrors = [] });
  END;
  continent.countries.last().mirrors.push(mirror);
END;
FOREACH continent IN continents;
%>
  <li id="<% continent.name %>"><big><strong><% continent.name %></strong></big>
    <ul>
<%-
  FOREACH country IN continent.countries %>
      <li id="<% country.name %>"><img src="/static/images/flag/<% country.code %>.png" /> <strong><% country.name %></strong>
        <ul>
  <%-
    FOREACH mirror IN country.mirrors;
      date = mirror.inceptdate.dt;
      day = date.day _ '/' _ date.month _ '/' _ date.year;
    %>
          <li>
            <a class="label label-default<% mirror.ftp ? "" : " invisible" %>" href="<% mirror.ftp %>">ftp</a>
            <a class="label label-warning<% mirror.http ? "" : " invisible" %>" href="<% mirror.http %>">http</a>
            <a class="label label-success<% mirror.rsync ? "" : " invisible" %>" href="<% mirror.rsync %>">rsync</a>
            <span title="active since <% day %>"><% mirror.org %>, <% mirror.city %><span>
            <%- IF mirror.distance %> (<% mirror.distance | format_number %> km)<% END %>
          </li>
    <%- END %>
    </ul></li>
  <%- END %>
  </ul></li>
<%- END %>
</ul>
<script type="text/javascript">
$(function(){
  $('#map').width("auto");
  map = new OpenLayers.Map( 'map' );
  map.addLayer(new OpenLayers.Layer.OSM());
  var dots = <% dots.json %>;
  var styleMap = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults(
          {fillColor: "#BAD3EA", fillOpacity: 1, strokeColor: "#36C", pointRadius: 4},
          OpenLayers.Feature.Vector.style["default"]));
  var markers = new OpenLayers.Layer.Vector("name", {styleMap: styleMap});
  map.addLayer(markers);

  for(var i = 0; i < dots.length; i++) {
    var lonLat = new OpenLayers.LonLat( dots[i][0], dots[i][1] )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );

    markers.addFeatures([
      new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat))]);
  }
  map.setCenter (new OpenLayers.LonLat( 14,35 ).transform(
    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
    map.getProjectionObject() // to Spherical Mercator Projection
  ), 2);

});
</script>
</div>