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

Last change on this file since 9264 was 9264, checked in by dennisw, 13 years ago

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