[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] | 2 | function 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 | });
|
---|