myhangouts/myhangouts.html

   1 <html>
   2   <head>
   3   <title>My Hangouts</title>
   4   <link href="/static/css/myhangouts.css" rel="stylesheet" type="text/css"/>
   5   </head>
   6   <body>
   7
   8   <div class="wrapper" id="wrapper">
   9   <div class="header" class="header"><h1>My Hangouts</h1>
  10     <div class="login">
  11        {% if current_user %}
  12           <b>{{ current_user|escape }}</b> | <a href="{{ logout_url }}">Sign Out</a>
  13        {% else %}
  14           <a href="{{ login_url }}">Sign In</a>
  15        {% endif %}
  16     </div>
  17
  18   <div>  <form name="user" class="right">
  19     Select a user: <select onChange="server.GetLocations(this.value, DisplayLocations);server.display_user = this.value;" name="user"/>
  20     {% for user in users %}
  21     <option value="{{ user.email }}">{{ user.email }}</option>
  22     {% endfor %}
  23     </select>
  24   </form>
  25
  26   </div>
  27   <div class="map" id="map"> </div>
  28   <div class="list" id="list"> </div>
  29   <div class="top">
  30   <form class="left" onSubmit="return false;">
  31     <input type=submit value="Update Display"
  32            onClick="server.GetLocations(server.display_user, DisplayLocations);"/>
  33   </form>
  34   </div>
  35   <div class="body" id="body">
  36   {% if current_user %}
  37 <form name=addr
  38       onSubmit="GeocodeAddLocation(this.address.value, this.name.value); this.reset(); return false;">
  39   <table>
  40     <tr><td align=right nowrap>Location Name: <td colspan=3><input type=text name=name size=40/></td></tr>
  41     <tr><td align=right nowrap>Address: </td><td colspan=2><input type=text name=address size=40/></td>
  42         <td><input type=submit value="Add" /></td></tr>
  43   </table>
  44 </form>
  45  {% else %}
  46     Please <a href="{{ login_url }}">sign in</a> to add a new location.
  47   {% endif %}
  48 <div> <!-- End Wrapper -->
  49 </script>
  50 <script language="javascript" src="/static/json.js"> </script>
  51 <script language="javascript" src="/static/client.js"> </script>
  52 <script language="javascript" src="/static/geocode.js"> </script>
  53
  54 <!-- The key for the Google Maps API will work only for http://localhost:8080.
  55      To retrieve a new key go to http://code.google.com/apis/maps/signup.html-->
  56 <script language="javascript" src="http://maps.google.com/maps?file=js&v=2&amp;key=ABQIAAAALrh5mwxiKkNrHuqNwGGHJRTwM0brOpm-All5BF6PoaKBxRWWERQ6Ykd3tAT6M4xWsQW4l2QU6snihg"> </script>
  57 <script language="javascript" src="/static/MochiKit/MochiKit.js"> </script>
  58
  59 <script>
  60
  61 server = { user: "{% if current_user %}{{ current_user.nickname }}{% endif %}",
  62            display_user: "{% if display_user %}{{ display_user.nickname }}{% endif %}",
  63            login_url: "{{ login_url }}" };
  64 function InstallFunction(name) {
  65   server[name] = function() { AE_CallRemote(name, arguments); }
  66 }
  67 InstallFunction("AddLocation");
  68 InstallFunction("GetLocations");
  69 InstallFunction("RemoveLocation");
  70
  71 </script>
  72
  73 <script language="javascript">
  74   //<![CDATA[
  75
  76   // Set up the map
  77   var map = new GMap(document.getElementById("map"));
  78   map.addControl(new GSmallMapControl());
  79   // Set up globals
  80   var geocoder = new GClientGeocoder();
  81   var clickMarker = null;
  82   var selectionMarker = null;
  83   var list = document.getElementById('list');
  84   list.selection = null;
  85   list.deselect = function() {
  86     if (this.selection)
  87       this.selection.elem.className = "item";
  88     this.selection = null;
  89
  90   }
  91   // Reset the display
  92   initialized = false;
  93   server.GetLocations(server.display_user, DisplayLocations);
  94
  95   // Location class
  96   function Location(parent, map, obj) {
  97     this.longd = obj['longd'];
  98     this.latd = obj['latd'];
  99     this.name = obj['name'];
 100     this.key = obj['key'];
 101     this.map = map;
 102     this.point = new GPoint(this.longd, this.latd);
 103     this.marker = new GMarker(this.point);
 104     this.marker.loc = this;
 105     this.parent = parent;
 106
 107     this.elem = DIV({ 'class' : 'item',
 108                       'onclick' : "this.loc.click();"},
 109                       this.name);
 110     if (server.display_user == server.user)
 111       replaceChildNodes(this.elem,
 112                         DIV({ 'class' : 'remove',
 113                               'onclick' : "this.parentNode.loc.remove();"
 114                             },
 115                             'Delete'),
 116                             this.name);
 117     this.elem.loc = this;
 118   }
 119
 120   Location.prototype.display = function() {
 121     this.map.centerAtLatLng(this.point);
 122     this.map.addOverlay(this.marker);
 123     appendChildNodes(this.parent, this.elem);
 124     if (!initialized) {
 125       this.map.zoomTo(4);
 126       initialized = true;
 127     }
 128   };
 129
 130   Location.prototype.remove = function() {
 131     var self = this;
 132     function removeFromList() {
 133       self.parent.removeChild(self.elem);
 134       if (self.parent.selection == self)
 135       self.parent.deselect();
 136       self.map.removeOverlay(self.marker);
 137     }
 138     server.RemoveLocation(
 139       this.key,
 140       removeFromList);
 141   };
 142
 143   Location.prototype.select = function() {
 144     this.parent.deselect();
 145     this.elem.className = "selection";
 146     this.parent.selection = this;
 147   };
 148
 149   Location.prototype.click = function() {
 150     this.map.recenterOrPanToLatLng(this.point);
 151     if (this.parent.selection == this)
 152       this.parent.deselect();
 153     else
 154       this.select();
 155   };
 156
 157   // Add a listner for the map to add new locations
 158   GEvent.addListener(map, 'click', function(overlay, point) {
 159     list.deselect();
 160     if (overlay && overlay.loc) {
 161       overlay.loc.select();
 162     }
 163     else if (point) {
 164       var form = document.forms['latlong'];
 165       form.longd.value = point.x;
 166       form.latd.value = point.y;
 167       if (clickMarker != null)
 168       map.removeOverlay(clickMarker);
 169       clickMarker = new GMarker(point);
 170       map.addOverlay(clickMarker);
 171     }
 172   });
 173
 174   // Add a single location, and display it
 175   function AddDisplayLocation(latd, longd, name) {
 176     if (!server.user)
 177       document.location = server.login_url
 178       server.AddLocation(latd, longd, name,
 179       function(obj) {
 180         if (server.display_user != server.user) {
 181            document.forms['user'].user.value = server.user;
 182            document.forms['user'].submit();
 183         } else {
 184           var loc = new Location(list, map, obj);
 185           loc.display();
 186           loc.select();
 187         }
 188     });
 189   }
 190
 191   // Display all locations
 192   function DisplayLocations(locs) {
 193     map.clearOverlays();
 194     list.deselect();
 195     replaceChildNodes(list);
 196
 197     for (var i = 0; i < locs.length; ++i) {
 198       var loc = new Location(list, map, locs[i]);
 199       loc.display();
 200     }
 201
 202     // If no locations, display default location
 203     if (locs.length == 0) {
 204       map.centerAndZoom(new GPoint(-122.1419, 37.4419), 13);
 205       return;
 206     }
 207   };
 208
 209   // Call Geocode RPC, and display resulting location
 210   function GeocodeAddLocation(address, name) {
 211     geocoder.getLocations(address,
 212      function(r) { var lat = r.Placemark[0].Point.coordinates[1];
 213                    var lng = r.Placemark[0].Point.coordinates[0];
 214                    AddDisplayLocation(lat, lng, name);
 215                  });
 216   }
 217
 218   //]]>
 219 </script>
 220
 221 </body>
 222 </html>