source: src/django_gheat/website/static/heatmap_extensions.js@ 9266

Last change on this file since 9266 was 9265, checked in by dennisw, 14 years ago

Cleanup, no more 'Added this & that' spam when adding filters.

File size: 6.9 KB
RevLine 
[9243]1// Uses zoomlevel and mouseposition to call the nodelist.py view. View returns nodes in json format which is read and printed in document element.
[9223]2function getNodeList(zoomlevel, mousepos) {
[9234]3 $.getJSON("/website/nodelist/" + zoomlevel + "," + mousepos.lat + "," + mousepos.lon,
4 function(json) {
5 content = 'Wireless Leiden nodes on mouseposition:<br /><b>';
6 $.each(json, function(i,json){
[9244]7 content += json.fields.ssid + '<br />';
[9234]8 });
[9244]9 content += '</b>';
[9234]10 $("#node_list").html(content);
[9223]11 }
[9234]12 );
[9223]13}
14
[9235]15$(document).ready(function() {
[9263]16 var userlist = new Array();
17 var nodelist = new Array();
[9237]18
19 // Fastest?: http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery
[9244]20 $.getJSON("/website/filters/",
[9235]21 function(json) {
22 $.each(json, function(i,json){
[9241]23 $("#select_user").append($("<option/>").attr("value",json.gebruiker).text(json.gebruiker));
[9263]24 userlist.push(json.gebruiker);
[9235]25 $.each(json.meetrondje, function(m, meetrondje){
[9243]26 $("#select_dataset").append($("<option/>").attr({"class":json.gebruiker, "value":meetrondje.naam}).text(meetrondje.naam));
[9235]27 $.each(meetrondje.nodes, function(n, nodes){
[9243]28 $("#select_node").append($("<option/>").attr({"class":meetrondje.naam, "value":nodes}).text(nodes));
[9263]29 if(jQuery.inArray(nodes, nodelist)<0){
30 nodelist.push(nodes);
31 }
[9235]32 });
33 });
34 });
[9243]35 // Initiate the chain
[9239]36 $("#select_dataset").chained("#select_user");
37 $("#select_node").chained("#select_dataset");
[9229]38 }
[9235]39 );
[9223]40
[9263]41 // add filter per user
42 $('#user_filter').click(function(){
[9264]43 if(this.value=='Add userfilter'){
44 $.each(userlist, function(u, user){
45 colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
46 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
47 initialize: function(name, options) {
48 var url = [
49 "/website/tile/${z}/${x},${y}.png?" + colour + "&meetrondje__gebruiker__naam=" + user
50 ];
51 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
52 var newArguments = [name, url, options];
53 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
54 },
55 CLASS_NAME: "OpenLayers.Layer.Overlay"
56 });
57 filterlayer = new OpenLayers.Layer.OSM.Overlay("User: "+ user, {isBaseLayer: false, visibility: true});
58 map.addLayer(filterlayer);
[9263]59 });
[9264]60 $(this).attr('value', 'Del userfilter');
61 }
62 else{
63 $(this).attr('value', 'Add userfilter');
64 $.each(userlist, function(u, user){
65 layer = map.getLayersByName('User: ' + user);
66 map.removeLayer(layer[0]);
67 });
68 }
[9263]69 });
70
71 // add filter per node
72 $('#node_filter').click(function(){
[9264]73 if(this.value=='Add nodefilter'){
74 $.each(nodelist, function(n, node){
75 colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
76 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
77 initialize: function(name, options) {
78 var url = [
79 "/website/tile/${z}/${x},${y}.png?" + colour + "&accespoint__ssid=" + node
80 ];
81 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
82 var newArguments = [name, url, options];
83 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
84 },
85 CLASS_NAME: "OpenLayers.Layer.Overlay"
86 });
87 nodefilterlayer = new OpenLayers.Layer.OSM.Overlay("Node: "+ node, {isBaseLayer: false, visibility: true});
88 map.addLayer(nodefilterlayer);
[9263]89 });
[9264]90 $(this).attr('value', 'Del nodefilter');
91 }
92 else{
93 $(this).attr('value', 'Add nodefilter');
94 $.each(nodelist, function(n, node){
95 layer = map.getLayersByName('Node: ' + node);
96 map.removeLayer(layer[0]);
97 });
98 }
[9263]99 });
100
101 // add custom filter
[9235]102 $('#add_filter').click(function(){
[9263]103 //get values from elements
[9235]104 user = $('#select_user option:selected').text();
105 dataset = $('#select_dataset option:selected').text();
106 wlnode = $('#select_node option:selected').text();
[9251]107 start_date = $('#start_date').val();
108 end_date = $('#end_date').val();
[9235]109 colour = encodeURIComponent(document.getElementById("colour").value);
110 lname = encodeURIComponent(document.getElementById("lname").value);
[9223]111
[9246]112 // HEX to RGB: http://stackoverflow.com/questions/5798868/need-some-tips-with-how-to-convert-a-hexadecimal-color-value-to-a-rgb-one/5798900#5798900
113 // '#' comes out as '%23', so substr() starts at char 3
114 colour = parseInt((colour.substr(3, 2)),16) + ',' + parseInt((colour.substr(5, 2)),16) + ',' + parseInt((colour.substr(7, 2)),16);
115
[9263]116 // some checks if values are correct, and adding them to parts of the link
[9241]117 if (user != ''){user='&meetrondje__gebruiker__naam='+user;}
118 if (dataset != ''){dataset='&meetrondje__naam='+dataset;}
[9246]119 if (wlnode != ''){wlnode='&accespoint__ssid='+wlnode;}
[9251]120 if (start_date && end_date){
121 sd_d=start_date.substr(0,2);
122 sd_m=start_date.substr(3,2);
123 sd_y=start_date.substr(6,4);
124
125 ed_d=end_date.substr(0,2);
126 ed_m=end_date.substr(3,2);
127 ed_y=end_date.substr(6,4);
128
129 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
130 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
131 }
[9253]132 if (start_date && !end_date){
133 sd_d=start_date.substr(0,2);
134 sd_m=start_date.substr(3,2);
135 sd_y=start_date.substr(6,4);
136 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
137 end_date='';
138 }
139 if (!start_date && end_date){
140 ed_d=end_date.substr(0,2);
141 ed_m=end_date.substr(3,2);
142 ed_y=end_date.substr(6,4);
143 start_date='';
144 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
145 }
[9251]146 if (colour != 'NaN,NaN,NaN'){colour='colour='+colour;}
[9235]147 else {colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);}
148 if (lname != ''){lname=lname;}
149 else {lname = 'Custom Filter';}
[9223]150
[9263]151 // setting layer
[9235]152 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
153 initialize: function(name, options) {
154 var url = [
[9263]155 "/website/tile/${z}/${x},${y}.png?" + colour + user + dataset + wlnode + start_date + end_date
[9235]156 ];
157 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
158 var newArguments = [name, url, options];
159 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
160 },
161 CLASS_NAME: "OpenLayers.Layer.Overlay"
162 });
[9223]163
[9263]164 // adding layer
[9235]165 filterlayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
166 map.addLayer(filterlayer);
[9223]167 });
[9235]168});
Note: See TracBrowser for help on using the repository browser.