Changeset 9213

Timestamp:

May 24, 2011, 4:08:04 PM (13 years ago)

Author:

dennisw

Message:

Added nodelist to layout again. Progress on filters (remains of useless code may still be there, will clean up later when filters work as planned).

Location:

src/django_gheat/website

Files:

• filters.py (added)
• static/heatmap_extensions.js (modified) (2 diffs)
• static/style.css (modified) (5 diffs)
• templates/home.html (modified) (4 diffs)
• urls.py (modified) (1 diff)

src/django_gheat/website/static/heatmap_extensions.js

@@ -13 +13 @@
     if (nodelist.readyState==4 && nodelist.status==200){
       json=eval('(' + nodelist.responseText + ')');
-      var list = '<br>';
-      for (var i=0; i<json.length; i++){
-        list += json[i].fields.ssid + '<br>';
+      var list;
+      if (json.length>0){
+        list = '<center>Wireless Leiden nodes on mouseposition:<br /><b>';
+        for (var i=0; i<json.length; i++){
+          list += json[i].fields.ssid + '<br />';
+        }
+        list += '</b></center>';
       }
-      document.getElementById('nodelist').innerHTML=list;
+      else{
+        list = '<center>No nodes to display.</center>';
+      }
+      document.getElementById('node_list').innerHTML=list;
     }
   }
@@ -25 +32 @@
 
 
-// Retrieve form values for filter and pass them on to addFilter()
-function filters(){
-  var user = encodeURIComponent(document.getElementById("user").value);
-  var dataset = encodeURIComponent(document.getElementById("dataset").value);
-  var wlnode = encodeURIComponent(document.getElementById("wlnode").value);
-  var enc = encodeURIComponent(document.getElementById("enc").value);
-  var date = encodeURIComponent(document.getElementById("date").value);
-  var colour = encodeURIComponent(document.getElementById("colour").value);
-  var lname = encodeURIComponent(document.getElementById("lname").value);
+// Get filter values from django view and serve as option list
+function getFilters(){
+  var filterlist;
 
-  addFilter(user, dataset, wlnode, enc, date, colour, lname);
+  if (window.XMLHttpRequest){
+    filterlist=new XMLHttpRequest();
+  }
+  else{
+    filterlist=new ActiveXObject("Microsoft.XMLHTTP");
+  }
+
+  filterlist.onreadystatechange=function(){
+    if (filterlist.readyState==4 && filterlist.status==200){
+      json=eval('(' + filterlist.responseText + ')');
+      var list = '<form method="get" action="">';
+      list += '<select id="wlnode" style="width:104px"><option></option>';
+      for (var i=0; i<json.length; i++){
+        list += '<option>' + json[i].fields.ssid + '</option>';
+      }
+      list += '</select> WLnode<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();
 }
 
 
 // Some value checks, create an overlay using these values and place it on the map.
-function addFilter(user, dataset, wlnode, enc, date, colour, lname){
+function addFilter(){
+
+  var user = '';
+  var dataset = '';
+  var wlnode = encodeURIComponent(document.getElementById("wlnode").value);
+  var enc ='';
+  var date = '';
+  var colour = encodeURIComponent(document.getElementById("colour").value);
+  var lname = encodeURIComponent(document.getElementById("lname").value);
 
   if (user != ''){user='&accespoint__id='+user;} 

src/django_gheat/website/static/style.css

@@ -57 +57 @@
 }
 
-#filters{
+#filter{
   width:100%-10px;
   display:none;
@@ -63 +63 @@
 }
 
-#filters_text{
+#filter_text{
   height:100%;
   width:570px;
@@ -70 +70 @@
 }
 
-#filters_list{
+#filter_list{
   padding:5px;
   width:200px;
@@ -76 +76 @@
   float:right;
   margin-bottom:5px;
+}
+
+#node_list{
+  position:absolute;
+  left:50%;
+  margin-left:-150px;
+  bottom:-2px;
+  width:300px;
+  background-color:#FFF;
+  border:2px solid #BA0000;
+  z-index:1;
+  padding:5px;
 }
         
@@ -84 +96 @@
 A:link{
   color:#FFF;
+  padding-left:8px;
 }
 

src/django_gheat/website/templates/home.html

@@ -11 +11 @@
       var hide;
       if(show == 'info'){
-        hide = 'filters';
+        hide = 'filter';
       }
       else{
@@ -29 +29 @@
 
 
-<body onload="init()">
+<body onload="init(),getFilters()">
   <div id="heatmap"></div>
   <div id="container">
@@ -37 +37 @@
     <div id="menu">
       <a href="javascript:toggleDiv('info')">Info</a>
-      <a href="javascript:toggleDiv('filters')" style="padding-left:15px;">Filters</a>
+      <a href="javascript:toggleDiv('filter')">Filters</a>
     </div>
     <div id="info">
        test<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />test
     </div>
-    <div id="filters">
-      <div id="filters_text">
+    <div id="filter">
+      <div id="filter_text">
       <h1>Filters</h1>
       <p>Create your custom layer by choosing the desired filter options on the right and adding it the layer to the list.</p>
       <p>For instance, you can choose to create a layer with data measured only by yourself, or with a certain node from Wireless Leiden only.</p>
       </div>
-      <div id="filters_list">
+      <div id="filter_list">
       <form method="get" action="">
       <table border="0">
@@ -88 +88 @@
     </div>
   </div>
+  <div id='node_list'>
+  <center>Click on the map to display Wireless Leiden nodes.</center>
+  </div>
 </body>
 </html>

src/django_gheat/website/urls.py

@@ -36 +36 @@
        ),
     )
+
+urlpatterns += patterns('website.filters',
+    url(
+        regex = r'^filters$',
+        view = 'serve_filters',
+        name = 'serve_filters',
+       ),
+    )