commit 0c60d16d378ca921862ff2f76e1df1dd9d5f64c1 Author: Iain R. Learmonth irl@fsfe.org Date: Mon Nov 27 18:33:12 2017 +0000
Prepares for the integration of an aggregated map view --- js/router.js | 46 ++++++++++++++++++++++++++++++++++++++++++-- js/views/aggregate/map.js | 41 +++++++++++++++++++++++++++++++++++++++ templates/aggregate/map.html | 39 +++++++++++++++++++++++++++++++++++++ 3 files changed, 124 insertions(+), 2 deletions(-)
diff --git a/js/router.js b/js/router.js index 6b029bd..c6b5eb8 100644 --- a/js/router.js +++ b/js/router.js @@ -7,8 +7,9 @@ define([ 'views/search/main', 'views/search/do', 'views/aggregate/search', + 'views/aggregate/map', 'jssha' -], function($, _, Backbone, mainDetailsView, mainSearchView, doSearchView, aggregateSearchView, jsSHA){ +], function($, _, Backbone, mainDetailsView, mainSearchView, doSearchView, aggregateSearchView, aggregateMapView, jsSHA){ var AppRouter = Backbone.Router.extend({ routes: { // Define the routes for the actions in Atlas @@ -20,6 +21,7 @@ define([ 'toprelays': 'showTopRelays', 'aggregate/:aType(/:query)': 'aggregateSearch', 'aggregate(/:aType)/': 'emptyAggregateSearch', + 'map(/:query)': 'aggregateMap', // Default '*actions': 'defaultAction' }, @@ -73,7 +75,7 @@ define([ $("#content").show();
}, - // Perform a countries aggregation + // Perform an aggregate search aggregateSearch: function(aType, query){ $(".breadcrumb").html("<li><a href="https://metrics.torproject.org/%5C%22%3EHome</a></li><li><a href="https://metrics.torproject.org/services.html%5C%22%3EServices</a></li><li><a href="#">Relay Search</a></li><li class="active">Aggregated search" + ((query) ? " for " + query : "") + "</li>");
@@ -113,7 +115,47 @@ define([ } }); }, + // Perform an aggregate search + aggregateMap: function(aType, query){ + $(".breadcrumb").html("<li><a href="https://metrics.torproject.org/%5C%22%3EHome</a></li><li><a href="https://metrics.torproject.org/services.html%5C%22%3EServices</a></li><li><a href="#">Relay Search</a></li><li class="active">Map view" + ((query) ? " for " + query : "") + "</li>");
+ $("#content").hide(); + $("#secondary-search").hide(); + $(".progress").show(); + + aggregateMapView.collection.aType = "cc"; + aggregateMapView.aggregationType = "consensus_weight_fraction"; + + if (query) { + query = query.trim(); + $("#secondary-search-query").val(query); + aggregateMapView.collection.url = + aggregateMapView.collection.baseurl + "&search=" + this.hashFingerprint(query); + } else { + aggregateMapView.collection.url = + aggregateMapView.collection.baseurl; + query = ""; + } + aggregateMapView.collection.lookup({ + success: function(err, relaysPublished, bridgesPublished){ + aggregateMapView.error = err; + aggregateMapView.relaysPublished = relaysPublished; + aggregateMapView.bridgesPublished = bridgesPublished; + aggregateMapView.render(query); + $("#search-title").text("Map view" + ((query) ? " for " + query : "")); + $(".progress").hide(); + $("#secondary-search").show(); + $("#content").show(); + }, + error: function(err){ + aggregateMapView.error = err; + aggregateMapView.renderError(); + $(".progress").hide(); + $("#secondary-search").show(); + $("#content").show(); + } + }); + }, // Perform a search on Atlas doSearch: function(query){ $(".breadcrumb").html("<li><a href="https://metrics.torproject.org/%5C%22%3EHome</a></li><li><a href="https://metrics.torproject.org/services.html%5C%22%3EServices</a></li><li><a href="#">Relay Search</a></li><li class="active">Search for " + query + "</li>"); diff --git a/js/views/aggregate/map.js b/js/views/aggregate/map.js new file mode 100644 index 0000000..04c7388 --- /dev/null +++ b/js/views/aggregate/map.js @@ -0,0 +1,41 @@ +// ~ views/search/do ~ +define([ + 'jquery', + 'underscore', + 'backbone', + 'collections/aggregates', + 'text!templates/aggregate/map.html', + 'datatables', + 'datatablessort', + 'helpers', + 'bootstrap', + 'datatablesbs' +], function($, _, Backbone, aggregatesCollection, aggregateMapTemplate){ + var aggregateSearchView = Backbone.View.extend({ + el: "#content", + initialize: function() { + this.collection = new aggregatesCollection; + }, + render: function(query){ + document.title = "Relay Search"; + var compiledTemplate = _.template(aggregateMapTemplate) + this.$el.html(compiledTemplate({query: query, + aggregates: this.collection.models, + countries: CountryCodes, + error: this.error, + relaysPublished: this.relaysPublished, + bridgesPublished: this.bridgesPublished})); + + var aggregate_type = this.aggregateType; + + //map plotting code will go here + + }, + renderError: function(){ + var compiledTemplate = _.template(aggregateSearchTemplate); + this.$el.html(compiledTemplate({aggregates: null, error: this.error, countries: null})); + } + }); + return new aggregateSearchView; +}); + diff --git a/templates/aggregate/map.html b/templates/aggregate/map.html new file mode 100644 index 0000000..00cf099 --- /dev/null +++ b/templates/aggregate/map.html @@ -0,0 +1,39 @@ + +<h2 id="search-title"></h2> + +<% if(!aggregates) { %> + <% if(error == 0) { %> + <div class="alert alert-info"> + <strong>No Results found!</strong><p> + No Tor relays matched your query :(</p> + <p><a href="#">Return to home page</a></p> + </div> + <% } else if (error == 2) { %> + <div class="alert alert-error"> + <strong>Backend error!</strong> + <p>Relay Search is unable to get a response from its backend server. This + probably means that the backend server is unavailable right now. This + can also happen, however, if you did not format your query correctly. + Please have a look at <a href="#about">the About page</a> that explains + what type of search queries are supported by Relay Search.</p> + </div> + <% } else if (error == 3) { %> + <div class="alert alert-error"> + <strong>JavaScript Error!</strong><p>There is a problem with your + javascript environment, you may have noscript enabled on the remote + onionoo backend. Try temporarily allowing noscript to connect to the + backend IP address. If the problem persits consult <a + href="https://trac.torproject.org/%22%3Ethe bugtracker.</a></p> + </div> + <% } else if (error == 5) { %> + <div class="alert alert-error"> + <strong>No query submitted!</strong> + <p>The search query was found to be empty, which is not supported. You + must enter a search query in order to generate results. Please have a + look at <a href="#about">the About page</a> that explains what type of + search queries are supported by Relay Search.</p> + </div> + <% } %> +<% } else { %> + <div id="aggregate-map"></div> +<% } %>