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

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="Favourite Postcodes" > 
    <Require feature="opensocial-0.7"/>
  </ModulePrefs>
<Content type="html">
<![CDATA[
<script type="text/javascript" src="http://www.mattkruse.com/javascript/datadumper/datadumper.js"></script>
<script type="text/javascript"> 
  gadgets.util.registerOnLoadHandler(startApp);
  var geocoder = "http://www.npemap.org.uk/cgi/geocoder.fcgi?format=js&postcode=";
  var persistentTag = "favourite_postcode";
  var lastLookedForPC = null;

  function startApp() {
        findPC();
        findFriends();
  }

  function findFriends() {
        var req = opensocial.newDataRequest();
        req.add(req.newFetchPeopleRequest(opensocial.DataRequest.Group.VIEWER_FRIENDS), 'viewerFriends');
        req.add(req.newFetchPersonAppDataRequest("VIEWER_FRIENDS", [persistentTag]), "pc");
        req.send(loadedFriends);
  }
  function loadedFriends(data) {
        var html = "<ul>";

        var fd = data.get("pc").getData();

        var friends = data.get("viewerFriends").getData();
        friends.each(function(person) {
                var postcode = "(not set)";
                var theirData = fd[person.getId()]
                if(theirData && theirData[persistentTag]) {
                        postcode = theirData[persistentTag];
                }
                html += "<li>" + person.getDisplayName() + " " + postcode + "</li>";
        });
        html += "</ul>";

        document.getElementById("friends").innerHTML = html;
  }

  function findPC() {
        var req = opensocial.newDataRequest();
        req.add(req.newFetchPersonAppDataRequest("VIEWER", [persistentTag]), "pc");
        req.send(gotPC);
  }
  function gotPC(data) {
        if(data.hadError()) {
                alert(data.getError());
        } else {
                var pc = data.get("pc").getData();
                for (var k in pc) {
                        var postcode = pc[k][persistentTag];
                        startShowMap(postcode);
                }
        }
  }

  function pickPC() {
        var pc = document.getElementById("pc").value;

        var req = opensocial.newDataRequest();
        req.add(req.newUpdatePersonAppDataRequest("VIEWER",persistentTag, pc));
        req.send(checkOK);
  }
  function checkOK(data) {
        if(data.hadError()) {
                alert(data.getError());
        } else {
                alert("Updated your favourite postcode!");
                findPC();
        }
  }

  function startShowMap(postcode) {
        lastLookedForPC = postcode;
        document.getElementById("pc").value = postcode;

        // Ditch any spaces
        postcode = postcode.replace(" ","");

        // Find the details
        var url = geocoder + postcode;
        var params = {};
        params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
        gadgets.io.makeRequest(url, doShowMap, params);
  }
  function doShowMap(obj) {
        // Zap old
        var map = document.getElementById("yourmap");
        while(map.hasChildNodes()) {
                map.removeChild(map.firstChild);
        }

        var json = obj.data;
//      if(obj.errors) {
//              alert(obj.errors);
//              alert(obj.text);
//      }
        if(json) {
                var tile_e = '000' + Math.floor(json["e"]/1000);
                var tile_n = '000' + Math.floor(json["n"]/1000);
                tile_e = tile_e.substring(tile_e.length-3);
                tile_n = tile_n.substring(tile_n.length-3);
                var tile = "http://tile.npemap.org.uk/osgb/scaled1/" + tile_e + "/" + tile_n + ".jpg";

                map.innerHTML = "<img src='" + tile + "' alt='Map of "+ json["pc"] +"' />";
        } else {
                map.innerHTML = "No map found for postcode " + lastLookedForPC + ", sorry";
        }
  }
</script>
<div id="content_div">
 <div id="yourmap"></div>
 <div id="pickpc">
   <label for="pc">Favourite Postcode:</label>
   <input type="text" id="pc" style="width: 10em" onblur="pickPC()" />
 </div>
 <div>Your friends:</div>
 <div id="friends"></div>
</div>
]]> 
</Content>
</Module>