template_preload.html

<! -- Fix for Bootstrap css with Google Maps https://github.com/twitter/bootstrap/issues/1552 -->
<style type="text/css">
    .map_canvas label {
        width: auto;
        display: inline;
    }
    .map_canvas img {
        max-width: none;
    }

    .map_cnt {
        position: relative;
        border: 1px solid rgb(0, 0, 0.1);
        box-shadow: 0 0 5px #888;
    }

    .map_btn {
        text-align: center;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        opacity: 0;
        background-color: rgba(51,51,51, 0.7); 
        z-index: 999;
        transition: all 0.4s ease-in-out;
    }

    .map_btn h3 {
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        position: relative;
        font-size: 17px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.6);
        margin: 20px 0 0 0
    }

    .map_btn p {
        color: #fff;
        text-align: center;
        position: relative;
        font-size: 14px;
        padding-top: 10px;
    }


    .map_btn button{
        margin-top: 10%;
    }

    .map_btn:hover {
        opacity: 1;
    }


    .layersDiv label {
        color: white;
    }
    .olControlOverviewMapElement {
        background-color: white;
    }
</style>

<div class="row">
  <!-- Success and Error Messages for the user --> 
  <!-- Question, task id, photo and action buttons for answering the question-->
  <div class="span12" style="height:50px;">
    <div id="success" class="alert alert-success" style="display:none;">
      <a class="close">×</a>
      <strong>Well done!</strong> Your answer has been saved</strong>
    </div>
    <div id="taskcompleted" class="alert alert-info" style="display:none;">
      <strong>The task has been completed!</strong> Thanks a lot!</strong>
    </div>
    <div id="finish" class="alert alert-success" style="display:none;">
      <strong>Congratulations!</strong> You have participated in all available tasks!</strong>
      <br/>
      <div class="alert-actions">
              <a class="btn small" href="/">Go back</a>
              <a class="btn small" href="/app">or, Check other applications</a>
      </div>
    </div>
    <div id="error" class="alert alert-error" style="display:none;">
      <a class="close">×</a>
      <strong>Error!</strong> Something went wrong, please contact the site administrators</strong>
    </div>
    <div id="warning" class="alert alert-warning" style="display:none;">
      <a class="close">×</a>
      <strong>Oooops!</strong> Tile not found, trying with a new one!</strong>
    </div>
  </div>
</div>

<!-- Header of the task -->
<div class="row">
  <div class="skeleton span8">
    <div id="question">
      <h1>Question</h1>
      <!--<h3 id="area">Area</h3>-->
    </div>
  </div>
  <div class="skeleton span2">
      <!-- Change margin-top to align button with H1-->
      <div style="margin-top:10px">
        <a href="../tutorial" class="btn btn-primary btn-large"> Tutorial</a>
      </div>
  </div>
</div>

<div class="row skeleton">
    <div class="span12">
        <p>You have completed: <span id="done" class="label label-info"></span> tasks from
        <span id="total" class="label label-inverse"></span> You are now working in Task: <span id="task-id" class="label label-warning">#</span></p>
        <div class="progress progress-striped">
            <div id="progress" rel="tooltip" title="#" class="bar" style="width: 0%;"></div>
        </div>
    </div>
</div>

<!-- Map Canvas -->
<div id="maps" class="row">

</div>

<div style="text-align:center; padding-top:20px;"> 
      <a href="../tutorial" class="btn btn-primary btn-large"> Tutorial</a>
</div>

<script src="/static/openlayers/OpenLayers.debug.js"></script>
<script src="http://mustache.github.com/extras/mustache.js"></script>
<script src="/static/js/pybossa/pybossa.js" type="text/javascript"></script>
<!-- PyBossa interface -->
<script>
// Map Server URL
var mapfile = "map=/home/forestwatchers/map/timeline2.map";
var server = "http://forestwatchers.net/cgi-bin/mapserv" + "?" + mapfile;

var totalArea = 0;
// Map options
var options = {
    allowOverlays: true,
    numZoomLevels: 3
}
// Map Array for loading the images
var map = [];
var boxes  = new OpenLayers.Layer.Boxes( "Limits of the tile" );

// This function creates the map, the layers, and sets up the map
function initializeMaps(task) {
    var i=0;
}

// This function will center the map for a given tile
function center(task) {
    // bounds = [left, bottom, right, top]
    // restrictedExtent = [left, bottom, right, top]
    // Convert the bounds and restrictedExtent to valid OpenLayers objects
    var b = new OpenLayers.Bounds.fromArray(task.info.tile.bounds);
    var r = new OpenLayers.Bounds.fromArray(task.info.tile.restrictedExtent);
    var a = r.toGeometry();
    totalArea = (a.getGeodesicArea()/1000);
    // Add a box to mark in red the limited restrictedExtent
    //var box = new OpenLayers.Marker.Box(r);
    //boxes.addMarker(box);
    // Set limits for the map: the user should only see a small fraction of the tile
    var i=0;
    for(i=0;i<task.map.length;i++){
        task.map[i].setOptions({
            maxExtent: r,
            restrictedExtent: r
        })
        task.map[i].zoomToExtent(r);
    }
}


// TODO: add the validation
// See: http://stackoverflow.com/questions/4048688/how-can-i-convert-day-of-year-to-date-in-javascript
function dateFromDay( dateString ){
    var year = dateString.substring(0,4);
    //console.log(year);
    var day = dateString.substring(4);
    var date = new Date(year, 0); // initialize a date in `year-01-01`
    return new Date(date.setDate(day)); // add the number of days
}

// Load the task data into the HTML skeleton
//function loadTask ( task_id ) {
//    var t = $.ajax({
//        //url: '/api/task/'+task_id,
//        url: '/pybossa/api/task/'+task_id,
//        dataType: 'json'
//    });
//
//    t.done( function (task) {
//        if ( !$.isEmptyObject(task) ) {
//            if (task.state=='completed') {
//                $('#controls').hide();
//                $('#answer').hide();
//                $('#disqus_thread').hide();
//                $('#taskcompleted').show();
//            }
//
//        }
//        else {
//            $(".skeleton").hide();
//            $("#finish").fadeIn();
//        }
//    });
//}

function loadUserProgress() {
    pybossa.userProgress('besttile', 'http://forestwatchers.net/pybossa').done(function(data){
    //pybossa.userProgress('besttile').done(function(data){
        var pct = Math.round((data.done*100)/data.total);
        $("#progress").css("width", pct.toString() +"%");
        $("#progress").attr("title", pct.toString() + "% completed!");
        $("#progress").tooltip({'placement': 'top'}); 
        $("#total").text(data.total);
        $("#done").text(data.done);
    });
}

// Saves the answer for the given task
//function submitTask(answer) {
//    task_id = $("#task-id").text();
//    console.log(answer);
//
//    pybossa.saveTask( task_id, {'besttile': answer}).done( function(data) {
//    //pybossa.saveTask( task_id, {'besttile': answer}).done( function(data) {
//        // Show the feedback div
//        $("#success").fadeIn(); 
//        // Fade out the pop-up after a 1000 miliseconds
//        setTimeout(function() { $("#success").fadeOut() }, 1000);
//        // Request a new task
//        //window.location.pathname = '/pybossa/app/besttile/newtask';
//        window.location.pathname = '/app/besttile/newtask';
//    });
//
//}

pybossa.taskLoaded(function(task, deferred){
    if ( !$.isEmptyObject(task) ) {
        var div_map = $("<div/>", {'id': "task_maps_" + task.id});

        // We need to append the div element asap otherwise OpenLayers will fail
        $("#maps").append(div_map);


        // Add divs for the maps
        var tiles = task.info.tile.tiles;
        var l = tiles.length;
        var i = 0;
        var t = Math.floor(12/l);
        var width = t * 60;
        if (t < 4) {
            t = 4;
            var offset = Math.floor(l%3); // 3 tiles of Span4
            width = 60 * t; // Span4
        }

        for (i=0;i<l;i++) {
            //if (i == (l - offset)) {
            //    if (offset == 1) {
            //        var class = 'span' + t + ' offset4';
            //    }
            //    else {
            //        var class = 'span' + t + ' offset' + offset;
            //    }
            //}
            var tmpDate = dateFromDay(tiles[i].replace('.tif','')).toDateString();
            var elem = $("<div/>", {id: 'elem', 'class': 'skeleton span' + t});
            elem.css('padding-bottom', '10px');
            var map_cnt = $("<div/>", {'class': 'map_cnt'});
            var map_canvas = $("<div/>", {id: 'task_' + task.id + '_' + tiles[i].replace('.tif', ''),
                                          'class': 'map_canvas'});
            map_canvas.css("height", width + "px");
            var map_btn = $("<div/>", {id: "task_" + task.id + "_hover_" + tiles[i].replace('.tif', ''), 'class': 'map_btn'});
            map_btn.css("width", "100%");
            map_btn.css("height", width);
            map_btn.append("<h3>Tile: " + tiles[i].replace('.tif', '') + "</h3>");
            map_btn.append("<p>This photo was taken: " + tmpDate + "</p>");
            map_cnt.append(map_canvas);
            map_cnt.append(map_btn);
            elem.append(map_cnt);
            
            $("#task_maps_" + task.id).append(elem);
        }


        var tiles = task.info.tile.tiles;
        var n = tiles.length;
        task.map = [];
        for (i=0;i<n;i++){
            var map_div_id = "task_" + task.id + "_" + tiles[i].replace('.tif', '');
            var m = new OpenLayers.Map(map_div_id, {
                controls: [],
                minScale: 240000,
                numZoomLevels: 3,
                unit: 'degrees'
            });

            // Layers
            // Satellite Imagery Map (default layer)
            m.addLayer(new OpenLayers.Layer.WMS("Satellite", server, 
            {
                // Name of the layer without  the .tif extension
                layers: tiles[i].replace('.tif', ''),
                isBaseLayer: true
            }
            ));

            var b = new OpenLayers.Bounds.fromArray(task.info.tile.bounds);
            var r = new OpenLayers.Bounds.fromArray(task.info.tile.restrictedExtent);
            var a = r.toGeometry();
            totalArea = (a.getGeodesicArea()/1000);
            m.setOptions({
                maxExtent: r,
                restrictedExtent: r
            })
            m.zoomToExtent(r);
            task.map.push(m);
        }

        $("#task_maps_" + task.id).hide();
        deferred.resolve(task);
    }
    else {
        deferred.resolve(task);
    }
});

pybossa.presentTask(function(task, deferred){
    if ( !$.isEmptyObject(task) ) {
        if (task.state=='completed') {
            $('#controls').hide();
            $('#answer').hide();
            $('#disqus_thread').hide();
            $('#taskcompleted').show();
        }

        $("#question h1").text(task.info.question);
        loadUserProgress();
        $("#task-id").text(task.id);

        $("#task_maps_" + task.id).show();

        var tiles = task.info.tile.tiles;
        for(i=0;i<task.map.length;i++) {
            var tile = tiles[i].replace('.tif', '');
            var btn = $("<button/>", {'text': 'Submit this tile!', 
                                      'value': tile,
                                      'class': 'btn btn-large btn-primary'});
            btn.off('click').on('click', function(evt){
                var answer = $(evt.target).attr("value"); 
                pybossa.saveTask(task.id, {'besttile': answer}).done(function(data){
                     $("#task_maps_" + task.id).hide();
                     console.log("Saving Tile: " + answer + " for Task " + task.id);
                     $("#success").fadeIn(); 
                     // Fade out the pop-up after a 1000 miliseconds
                     setTimeout(function() { $("#success").fadeOut() }, 1000);
                     deferred.resolve();
                });
            });
            $("#task_" + task.id + "_hover_" + tile).append(btn);
        }
    }
    else {
        $(".skeleton").hide();
        $("#finish").fadeIn();
    }


});

pybossa.run('besttile');

</script>