Changeset 9216 for src/django_gheat

Timestamp:

May 26, 2011, 5:15:09 PM (13 years ago)

Author:

dennisw

Message:

Redid some code with help of a java.sun.com article. Should make it easier to add the filters.

A lot of crappy/old code is still there, will clean up when done.

Location:

src/django_gheat/website

Files:

• static/heatmap_extensions.js (modified) (2 diffs)
• templates/home.html (modified) (1 diff)

src/django_gheat/website/static/heatmap_extensions.js

@@ +1 @@
+// Base stolen from http://java.sun.com/developer/technicalArticles/J2EE/AJAX/RealtimeValidation/
+function AjaxRequest(url, callback) {
+
+  var req = init();
+  req.onreadystatechange = processRequest;
+        
+  function init() {
+    if (window.XMLHttpRequest) {
+      return new XMLHttpRequest();
+    } else if (window.ActiveXObject) {
+      return new ActiveXObject("Microsoft.XMLHTTP");
+    }
+  }
+    
+  function processRequest () {
+    if (req.readyState == 4) {
+      if (req.status == 200) {
+        if (callback) callback(req.responseText);
+      }
+    }
+  }
+
+  this.doGet = function() {
+    req.open("GET", url, true);
+    req.send(null);
+  }
+}
+
 // Uses zoomlevel en mouseposition to call the nodelist.py view. View returns nodes in json format which is read and printed in document element.
-function getNodeList(zoomlevel, mousepos){
-  var nodelist;
+function getNodeList(zoomlevel, mousepos) {
+  var url = "/website/nodelist/" + zoomlevel + "," + mousepos.lat + "," + mousepos.lon;
+  var ajax = new AjaxRequest(url, setNodeList); 
+  ajax.doGet(); 
+}
 
-  if (window.XMLHttpRequest){
-    nodelist=new XMLHttpRequest();
+
+function setNodeList(responseText) {
+  json=eval('(' + responseText + ')');
+  var list = 'test';
+  if (json.length>0){
+    list = 'Wireless Leiden nodes on mouseposition:<br /><b>';
+    for (var i=0; i<json.length; i++){
+      list += json[i].fields.ssid + '<br />';
+    }
+    list += '</b>';
   }
   else{
-    nodelist=new ActiveXObject("Microsoft.XMLHTTP");
+    list = 'No nodes to display.';
   }
-
-  nodelist.onreadystatechange=function(){
-    if (nodelist.readyState==4 && nodelist.status==200){
-      json=eval('(' + nodelist.responseText + ')');
-      var list;
-      if (json.length>0){
-        list = 'Wireless Leiden nodes on mouseposition:<br /><b>';
-        for (var i=0; i<json.length; i++){
-          list += json[i].fields.ssid + '<br />';
-        }
-        list += '</b>';
-      }
-      else{
-        list = 'No nodes to display.';
-      }
-      document.getElementById('node_list').innerHTML=list;
-    }
-  }
-  nodelist.open("GET","/website/nodelist/" + zoomlevel + "," + mousepos.lat + "," + mousepos.lon,true);
-  nodelist.send();
+  document.getElementById('node_list').innerHTML=list;
 }
 
+
+
+/*
+
+The following code is old, broken and for reference purposes. Will be removed when new code is done.
+The above (new) code was used instead to make everything more easy when adding new pieces.
 
 // Get filter values from django view and serve as option list
 function getFilters(){
   var filterlist;
+  var nodelist;
+  var userlist;
+  var datasetlist;
 
   if (window.XMLHttpRequest){
-    filterlist=new XMLHttpRequest();
+    nodelist=new XMLHttpRequest();
+    userlist=new XMLHttpRequest();
+    datasetlist=new XMLHttpRequest();
   }
   else{
-    filterlist=new ActiveXObject("Microsoft.XMLHTTP");
+    nodelist=new ActiveXObject("Microsoft.XMLHTTP");
+    userlist=new ActiveXObject("Microsoft.XMLHTTP");
+    datasetlist=new ActiveXObject("Microsoft.XMLHTTP");
   }
+
+  var list = '<form method="get" action="">';
+
+
   // todo: Get new options if one option is selected; every user has different datasets, make sure when user 'John' is selected, you can only choose datasets who are his.
-  filterlist.onreadystatechange=function(){
-    if (filterlist.readyState==4 && filterlist.status==200){
-      json=eval('(' + filterlist.responseText + ')');
-      var list = '<form method="get" action="">';
-      list += '<input type="text" id="user" name="user" size="10"/> User<br />';
-      list += '<input type="text" id="dataset" name="dataset" size="10"/> Dataset<br />';
-      list += '<input type="text" id="date" name="date" size="10"/> Date<br />';
+
+  userlist.onreadystatechange=function(){
+    if (userlist.readyState==4 && userlist.status==200){
+      userlist=eval('(' + userlist.responseText + ')');
       
+      list += '<select id="user" style="width:104px"><option></option>';
+      for (var i=0; i<userlist.length; i++){
+        list += '<option>' + userlist[i].fields.naam + '</option>';
+      }
+      list += '</select> User<br />';
+
+      document.getElementById('filter_list').innerHTML=list;
+    }
+  }
+
+
+
+
+  nodelist.onreadystatechange=function(){
+    if (nodelist.readyState==4 && nodelist.status==200){
+      nodelist=eval('(' + nodelist.responseText + ')');
+
       list += '<select id="wlnode" style="width:104px"><option></option>';
-      for (var i=0; i<json.length; i++){
-        list += '<option>' + json[i].fields.ssid + '</option>';
+      for (var i=0; i<nodelist.length; i++){
+        list += '<option>' + nodelist[i].fields.ssid + '</option>';
       }
       list += '</select> WLnode<br />';
 
-      list += '<input type="text" id="enc" name="enc" size="10"/> Encrypted<br />';
-      list += '<input type="text" id="colour" name="colour" size="10"/> Colour<br />';
-      list += '<input type="text" id="lname" name="lname" size="10"/> Layername<br />';
-      list += '<input type="button" value="Add filter" onClick="addFilter()"/>';
-      list += '</form>';
       document.getElementById('filter_list').innerHTML=list;
     }
   }
-  filterlist.open("GET","/website/filters",true);
-  filterlist.send();
+
+
+  datasetlist.onreadystatechange=function(){
+    if (datasetlist.readyState==4 && datasetlist.status==200){
+      datasetlist=eval('(' + datasetlist.responseText + ')');
+
+      list += '<select id="dataset" style="width:104px"><option></option>';
+      for (var i=0; i<datasetlist.length; i++){
+        list += '<option>' + datasetlist[i].fields.naam + '</option>';
+      }
+      list += '</select> Dataset<br />';
+
+      document.getElementById('filter_list').innerHTML=list;
+    }
+  }
+
+
+  list += '<input type="text" id="enc" name="enc" size="10"/> Encrypted<br />';
+  list += '<input type="text" id="colour" name="colour" size="10"/> Colour<br />';
+  list += '<input type="text" id="lname" name="lname" size="10"/> Layername<br />';
+  list += '<input type="button" value="Add filter" onClick="addFilter()"/>';
+  list += '</form>';
+
+
+
+
+
+  nodelist.open("GET","/website/filters/1",true);
+  nodelist.send();
+  userlist.open("GET","/website/filters/2",true);
+  userlist.send();
+  datasetlist.open("GET","/website/filters/3",true);
+  datasetlist.send();
 }
 
@@ -108 +185 @@
   map.addLayer(filterlayer);
 }
+*/

src/django_gheat/website/templates/home.html

@@ -29 +29 @@
 
 
-<body onload="init(),getFilters()">
+<body onload="init()">
   <div id="heatmap"></div>
   <div id="container">