Clicking on nearby markers displays a popup showing the name of the mapper with a...

[rails.git] / app / views / user / account.rhtml

diff --git a/app/views/user/account.rhtml b/app/views/user/account.rhtml
index f969203a33185f928b10c0182697f327056005fc..f4af984e92c99bccd01c2e1f3e46dde137d22ce3 100644 (file)
--- a/app/views/user/account.rhtml
+++ b/app/views/user/account.rhtml
@@ -1,11 +1,20 @@
 <h2>User details</h2>
 <%= error_messages_for 'user' %>
 <%= start_form_tag :controller => 'user', :action => 'edit', :display_name => @user.display_name %>
-<table>
-  <tr><td>Email</td><td><%= @user.email %></td></tr>
+<table style="width : 100%">
+  <tr><td>Name</td><td><%= @user.email %></td></tr>
   <tr><td>Mapper since</td><td><%= @user.creation_time %> (<%= time_ago_in_words(@user.creation_time) %> ago)</td></tr>
   <tr><td>Display Name</td><td><%= text_field :user, :display_name, :value => @user.display_name %></td></tr>
   <tr id="homerow" <% unless @user.home_lat and @user.home_lon %> class="nohome" <%end%> ><td>Your home</td><td><em class="message">You have not entered your home location.</em><span class="location">Latitude: <%= text_field :user, :home_lat, :value => @user.home_lat, :size => 20, :id => "home_lat" %> Longitude <%= text_field :user, :home_lon, :value => @user.home_lon, :size => 20, :id => "home_lon" %></span>  </td></tr>
+
+  <tr><td></td><td>
+  <p>Update home location when I click on the map? <input type="checkbox" value="1" <% unless @user.home_lat and @user.home_lon %> checked="checked" <% end %> id="updatehome" /> </p>
+  <div id="map" style="border: 1px solid black; position: relative; width : 90%; height : 300px;">
+    <% # This now just used to detect the width/height required for the popup. %>
+    <p id="highlightinfo"></p>
+  </div>
+  </td></tr>
+
   <tr><td valign="top">Description</td><td><%= text_area :user, :description, :value => @user.description, :class => "editDescription" %></td></tr>
 </table>
 <%= submit_tag 'Save Changes' %>
@@ -22,7 +31,6 @@
     <p>These users are mapping in your area:</p>
     <table>
     <tr>
-    <th>Email</th>
     <th>Name</th>
     <th>Contact</th>
     </tr>
@@ -30,9 +38,8 @@
     <% nearest_str = "nearest.push( { 'display_name' : '#{nearby.display_name}', 'home_lat' : #{nearby.home_lat}, 'home_lon' : #{nearby.home_lon} } )" %>
 
     <tr>
-    <td><%= nearby.email %></td>
-    <td><%= nearby.display_name %></td>
-    <td><%= link_to 'send message', :controller => 'message', :action => 'new', :display_name => nearby.display_name %></td>
+    <td><%= link_to nearby.display_name, :controller => 'user', :action => 'view',  :display_name => nearby.display_name %></td>
+    <td><%= link_to 'send message', :controller => 'message', :action => 'new', :user_id => nearby.id %></td>
     </tr>
     <%end%>
     </table>
@@ -45,12 +52,6 @@
     <%= nearest_str %>
 </script>
 
-
-
-<div id="map" style="border: 1px solid black; position: relative; width : 90%; height : 300px;">
-    <h3>Click on the map to (re)set your location</h3>
-</div>
-
 <% if @user.home_lat and @user.home_lon %>
     <% marker = true %>
     <% mlon = @user.home_lon %> 
@@ -96,7 +97,7 @@
 
 <script type="text/javascript">
   <!--
-  var map, layer, markers, marker;
+  var map, layer, markers, marker, popup;
 
 
   function mercator2lonlat( merc ) {
@@ -133,6 +134,7 @@
 
     <% if marker %>
     marker = new OpenLayers.Marker(new OpenLayers.LonLat(mlon,mlat));
+    marker.events.register("click", "marker", markerOnClick );
     markers.addMarker(marker);
     <%end%>
 
@@ -140,7 +142,9 @@
     near_icon.url = OpenLayers.Util.getImagesLocation() + "marker-green.png";;
     var i = nearest.length;
     while( i-- ) {
-        markers.addMarker( new OpenLayers.Marker( lonlat2mercator( new OpenLayers.LonLat( nearest[i].home_lon, nearest[i].home_lat ) ), near_icon ) );
+        var nearmarker = new OpenLayers.Marker( lonlat2mercator( new OpenLayers.LonLat( nearest[i].home_lon, nearest[i].home_lat ) ), near_icon );
+        markers.addMarker( nearmarker );
+        nearmarker.events.register("click", "nearmarker", makeMarkerFunction( i ) );
     }
 
       map.addControl(new OpenLayers.Control.LayerSwitcher());
@@ -149,7 +153,39 @@
     map.events.register("click", map, setHome);
   }        
 
+  function makeMarkerFunction( i ) {
+    return function() { markerOnClick( i ); };
+  }
+
+  function markerOnClick( i ) {
+    var html, position;
+    if( typeof( i ) == 'number'  ) {
+        html = '<p>Nearby mapper: <a href="/user/'+nearest[i].display_name+'">'+nearest[i].display_name+'</a></p>';
+        html += '<p style="text-align:right">(<a href="#" onclick="return closePopup();">close</a>)</p>';
+        position = lonlat2mercator( new OpenLayers.LonLat( nearest[i].home_lon, nearest[i].home_lat ) );
+    } else {
+        html = '<p>Your location (<a href="#" onclick="return closePopup()">close</a>)</p>';
+        position = new OpenLayers.LonLat(mlon,mlat);
+    }
+    var box = document.getElementById( 'highlightinfo' );
+    box.innerHTML = html;
+    closePopup();
+    popup = new OpenLayers.Popup.AnchoredBubble( 'popup', position, new OpenLayers.Size( box.offsetWidth, box.offsetHeight ), html, OpenLayers.Marker.defaultIcon(), true );
+    map.addPopup( popup );
+  }
+  
+    function closePopup() {
+        if( popup ) {
+            map.removePopup( popup );
+            delete popup;
+        }
+        return false;
+    }
+
     function setHome( e ) { 
+        closePopup();
+        if( ! document.getElementById( 'updatehome' ).checked )
+            return;
         var lonlat = map.getLonLatFromViewPortPx(e.xy)
 
         var lon_deg = (lonlat.lon / 20037508.34) * 180;