source: trunk/gpx.npemap.org.uk/favourite_postcode.xml @ 660

Last change on this file since 660 was 660, checked in by Nick Burch, 11 years ago

Demo!

  • Property svn:eol-style set to native
File size: 3.6 KB
Line 
1<?xml version="1.0" encoding="UTF-8" ?> 
2<Module>
3  <ModulePrefs title="Favourite Postcodes" > 
4    <Require feature="opensocial-0.7"/>
5  </ModulePrefs>
6<Content type="html">
7<![CDATA[
8<script type="text/javascript" src="http://www.mattkruse.com/javascript/datadumper/datadumper.js"></script>
9<script type="text/javascript"> 
10  gadgets.util.registerOnLoadHandler(startApp);
11  var geocoder = "http://www.npemap.org.uk/cgi/geocoder.fcgi?format=js&postcode=";
12  var persistentTag = "favourite_postcode";
13  var lastLookedForPC = null;
14
15  function startApp() {
16        findPC();
17        findFriends();
18  }
19
20  function findFriends() {
21        var req = opensocial.newDataRequest();
22        req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS), 'viewerFriends');
23        req.add(req.newFetchPersonAppDataRequest("VIEWER_FRIENDS", [persistentTag]), "pc");
24        req.send(loadedFriends);
25  }
26  function loadedFriends(data) {
27        var html = "<ul>";
28
29        var fd = data.get("pc").getData();
30
31        var friends = data.get("viewerFriends").getData();
32        friends.each(function(person) {
33                var postcode = "(not set)";
34                var theirData = fd[person.getId()]
35                if(theirData && theirData[persistentTag]) {
36                        postcode = theirData[persistentTag];
37                }
38                html += "<li>" + person.getDisplayName() + " " + postcode + "</li>";
39        });
40        html += "</ul>";
41
42        document.getElementById("friends").innerHTML = html;
43  }
44
45  function findPC() {
46        var req = opensocial.newDataRequest();
47        req.add(req.newFetchPersonAppDataRequest("VIEWER", [persistentTag]), "pc");
48        req.send(gotPC);
49  }
50  function gotPC(data) {
51        if(data.hadError()) {
52                alert(data.getError());
53        } else {
54                var pc = data.get("pc").getData();
55                for (var k in pc) {
56                        var postcode = pc[k][persistentTag];
57                        if(postcode) {
58                                startShowMap(postcode);
59                        }
60                }
61        }
62  }
63
64  function pickPC() {
65        var pc = document.getElementById("pc").value;
66
67        var req = opensocial.newDataRequest();
68        req.add(req.newUpdatePersonAppDataRequest("VIEWER",persistentTag, pc));
69        req.send(checkOK);
70  }
71  function checkOK(data) {
72        if(data.hadError()) {
73                if(data.getError != null) {
74                        alert(data.getError());
75                } else {
76                        alert("Unknown error!");
77                }
78        } else {
79                alert("Updated your favourite postcode!");
80                findPC();
81        }
82  }
83
84  function startShowMap(postcode) {
85        lastLookedForPC = postcode;
86        document.getElementById("pc").value = postcode;
87
88        // Ditch any spaces
89        postcode = postcode.replace(" ","");
90
91        // Find the details
92        var url = geocoder + postcode;
93        var params = {};
94        params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
95        gadgets.io.makeRequest(url, doShowMap, params);
96  }
97  function doShowMap(obj) {
98        // Zap old
99        var map = document.getElementById("yourmap");
100        while(map.hasChildNodes()) {
101                map.removeChild(map.firstChild);
102        }
103
104        var json = obj.data;
105//      if(obj.errors) {
106//              alert(obj.errors);
107//              alert(obj.text);
108//      }
109        if(json) {
110                var tile_e = '000' + Math.floor(json["e"]/1000);
111                var tile_n = '000' + Math.floor(json["n"]/1000);
112                tile_e = tile_e.substring(tile_e.length-3);
113                tile_n = tile_n.substring(tile_n.length-3);
114                var tile = "http://tile.npemap.org.uk/osgb/scaled1/" + tile_e + "/" + tile_n + ".jpg";
115
116                map.innerHTML = "<img src='" + tile + "' alt='Map of "+ json["pc"] +"' />";
117        } else {
118                map.innerHTML = "No map found for postcode " + lastLookedForPC + ", sorry";
119        }
120  }
121</script>
122<div id="content_div">
123 <div id="yourmap"></div>
124 <div id="pickpc">
125   <label for="pc">Favourite Postcode:</label>
126   <input type="text" id="pc" style="width: 10em" onblur="pickPC()" />
127   <input type="button" value="Change" onclick="pickPC()" />
128 </div>
129 <div>Your friends:</div>
130 <div id="friends"></div>
131</div>
132]]> 
133</Content>
134</Module>
Note: See TracBrowser for help on using the repository browser.