3 <title>My Hangouts
</title>
4 <link href=
"/static/css/myhangouts.css" rel=
"stylesheet" type=
"text/css"/>
8 <div class=
"wrapper" id=
"wrapper">
9 <div class=
"header" class=
"header"><h1>My Hangouts
</h1>
12 <b>{{ current_user|escape }}
</b> |
<a href=
"{{ logout_url }}">Sign Out
</a>
14 <a href=
"{{ login_url }}">Sign In
</a>
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>
27 <div class=
"map" id=
"map"> </div>
28 <div class=
"list" id=
"list"> </div>
30 <form class=
"left" onSubmit=
"return false;">
31 <input type=submit
value=
"Update Display"
32 onClick=
"server.GetLocations(server.display_user, DisplayLocations);"/>
35 <div class=
"body" id=
"body">
38 onSubmit=
"GeocodeAddLocation(this.address.value, this.name.value); this.reset(); return false;">
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>
46 Please
<a href=
"{{ login_url }}">sign in
</a> to add a new location.
48 <div> <!-- End Wrapper -->
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>
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&key=ABQIAAAALrh5mwxiKkNrHuqNwGGHJRTwM0brOpm-All5BF6PoaKBxRWWERQ6Ykd3tAT6M4xWsQW4l2QU6snihg"> </script>
57 <script language=
"javascript" src=
"/static/MochiKit/MochiKit.js"> </script>
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
); }
67 InstallFunction("AddLocation");
68 InstallFunction("GetLocations");
69 InstallFunction("RemoveLocation");
73 <script language=
"javascript">
77 var map
= new GMap(document
.getElementById("map"));
78 map
.addControl(new GSmallMapControl());
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() {
87 this.selection
.elem
.className
= "item";
88 this.selection
= null;
93 server
.GetLocations(server
.display_user
, DisplayLocations
);
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'];
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
;
107 this.elem
= DIV({ 'class' : 'item',
108 'onclick' : "this.loc.click();"},
110 if (server
.display_user
== server
.user
)
111 replaceChildNodes(this.elem
,
112 DIV({ 'class' : 'remove',
113 'onclick' : "this.parentNode.loc.remove();"
117 this.elem
.loc
= this;
120 Location
.prototype.display = function() {
121 this.map
.centerAtLatLng(this.point
);
122 this.map
.addOverlay(this.marker
);
123 appendChildNodes(this.parent
, this.elem
);
130 Location
.prototype.remove = function() {
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
);
138 server
.RemoveLocation(
143 Location
.prototype.select = function() {
144 this.parent
.deselect();
145 this.elem
.className
= "selection";
146 this.parent
.selection
= this;
149 Location
.prototype.click = function() {
150 this.map
.recenterOrPanToLatLng(this.point
);
151 if (this.parent
.selection
== this)
152 this.parent
.deselect();
157 // Add a listner for the map to add new locations
158 GEvent
.addListener(map
, 'click', function(overlay
, point
) {
160 if (overlay
&& overlay
.loc
) {
161 overlay
.loc
.select();
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
);
174 // Add a single location, and display it
175 function AddDisplayLocation(latd
, longd
, name
) {
177 document
.location
= server
.login_url
178 server
.AddLocation(latd
, longd
, name
,
180 if (server
.display_user
!= server
.user
) {
181 document
.forms
['user'].user
.value
= server
.user
;
182 document
.forms
['user'].submit();
184 var loc
= new Location(list
, map
, obj
);
191 // Display all locations
192 function DisplayLocations(locs
) {
195 replaceChildNodes(list
);
197 for (var i
= 0; i
< locs
.length
; ++i
) {
198 var loc
= new Location(list
, map
, locs
[i
]);
202 // If no locations, display default location
203 if (locs
.length
== 0) {
204 map
.centerAndZoom(new GPoint(-122.1419, 37.4419), 13);
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
);