Untitled

<!DOCTYPE html>
<html>

<head>
  <script data-require="underscore.js@*" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="backbone.js@*" data-semver="1.1.2" src="http://backbonejs.org/backbone-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <div id="app">
    <script type="text/template" id="city_select_template">
      <select id="city-select">
      <% cities.each(function(city) { %> 
        <option value="<%= city.get('relation_id') %>"> <%= city.get('name') %>
        </option>
      <% }); %>
      </select>
    </script>
    <div id="city-select-container"></div>
    <div id="#table"></div>
  </div>

  
  <script src="app.js"></script>
  <script src="tableView.js"></script>
  <script src="tramRoutes.js"></script>
  <script src="cities.js"></script>

</body>

</html>

/* Styles go here */

.route_entry {
  border: 1px solid black;
}

var app = app || {};


(function($) {
  'use strict';
  app.AppView = Backbone.View.extend({

    el: '#app',

    events: {
      'change #city-select': 'onCityChange'
    },

    initialize: function() {

      var name_to_relation_id = {
        'Odesa': 1413934,
        'Ivano-Frankivsk': 2362670,
        'Kiev': 421866
      };
      var area_id = name_to_relation_id['Odesa'] + 3600000000;

      app.routes.fetch({
        data: {
          data: '[out:json][timeout:25];area(' + area_id + ')->.area;(node["route"="tram"]["type"="route"](area.area);way["route"="tram"]["type"="route"](area.area);relation["route"="tram"]["type"="route"](area.area););out body;>;out skel qt;'
        },
        success: function(collection) {
          var routes = collection.toJSON();
          var table = new app.Table(routes, ["ref", "name", "relation_id", "from", "to"]);
          $('#table').append(table.render().el);
        }
      });
    },

    onCityChange: function(e) {
      if (e.which === ENTER_KEY && this.$input.val().trim()) {
        app.todos.create(this.newAttributes());
        this.$input.val('');
      }
    },

  });
})(jQuery);

$(function() {
  'use strict';

  // kick things off by creating the `App`
  new app.AppView();
});

var app = app || {};


app.Table = Backbone.View.extend({
  el: "div",
  initialize: function(data, columns) {
    this.data = data;
    this.columns = columns;
    this.tabulate(d3.select(this.el), this.data, this.columns);
  },

  tabulate: function(selection, data, columns) {
    var table = selection.append("table")
      .attr("class", "route"),
      thead = table.append("thead"),
      tbody = table.append("tbody");

    // append the header row
    thead.append("tr")
      .selectAll("th")
      .data(columns)
      .enter()
      .append("th")
      .text(function(column) {
        return column;
      });

    // create a row for each object in the data
    var rows = tbody.selectAll("tr")
      .data(data)
      .enter()
      .append("tr");

    // create a cell in each row for each column
    var cells = rows.selectAll("td")
      .data(function(row) {
        return columns.map(function(column) {
          return {
            column: column,
            value: row[column]
          };
        });
      })
      .enter()
      .append("td")
      .attr("class", "route_entry")
      .html(function(d) {
        return d.value;
      });

    return table;
  }

});

var app = app || {};



app.Route = Backbone.Model.extend();

app.TramRoutes = Backbone.Collection.extend({
  model: app.Route,
  url: 'http://overpass-api.de/api/interpreter',
  parse: function(data) {
    var routes = data.elements.filter(function(el) {
      return el.type == "relation";
    });
    routes = $.map(routes, function(obj) {
      obj.tags.relation_id = obj.id;
      return obj.tags;
    });
    routes = routes.sort(function(a, b) {
      var refA = parseInt(a.ref),
        refB = parseInt(b.ref);
      if (refA < refB) return -1;
      if (refA > refB) return 1;
      return 0;
    });
    return routes;
  }
});

app.routes = new app.TramRoutes();

var app = app || {};



app.City = Backbone.Model.extend();

app.Cities = Backbone.Collection.extend({
  model: app.City
});


app.CitiesView = Backbone.View.extend({
    el: $('#city-select'),
    initialize: function() {
        this.cities = new app.Cities(null, {
            view: this
        });
      var name_to_relation_id = {
        'Odesa': 1413934,
        'Ivano-Frankivsk': 2362670,
        'Kiev': 421866
      };

        this.cities.add(new app.City({
            name: "Odesa",
            relation_id: 1413934
        }));
        this.cities.add(new app.City({
            name: "Ivano-Frankivsk",
            relation_id: 2362670
        }));
        this.cities.add(new app.City({
            name: "Kiev",
            relation_id: 421866
        }));

        this.render();
    },
    render: function() {
      var city_select_template = _.template($("#city_select_template").html(), {
          cities: this.cities
      });
      $('#city-select-container').html(city_select_template);
    },
});

var citiesView = new app.CitiesView();