Skip to content

Commit

Permalink
Export controls functional.
Browse files Browse the repository at this point in the history
  • Loading branch information
@deleted
deleted committed Oct 6, 2012
1 parent bc003d0 commit fa0c81e
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 77 deletions.
43 changes: 43 additions & 0 deletions geocamTiePoint/static/geocamTiePoint/js/backbone/models.js
View file
Expand Up @@ -18,6 +18,13 @@ $(function($) {
initialize: function(){ initialize: function(){
// Bind all the model's function properties to the instance, so they can be passed around as event handlers and such. // Bind all the model's function properties to the instance, so they can be passed around as event handlers and such.
_.bindAll(this); _.bindAll(this);
this.on('before_warp', this.beforeWarp);
this.on('change:exportUrl', function(){
if ( this.exportPending && this.get('exportUrl') ) {
console.log('Export trigger.');
}
}, this);
this.on('export_ready', function(){ console.log('Export Ready!'); } );
}, },


url: function() { url: function() {
Expand Down Expand Up @@ -111,6 +118,10 @@ $(function($) {
return Backbone.Model.prototype.save.call(this, attributes, options); return Backbone.Model.prototype.save.call(this, attributes, options);
}, },


beforeWarp: function() {
this.unset('exportUrl'); // We have to clear this because this.fetch() won't.
},

warp: function(options) { warp: function(options) {
// Save the overlay, then trigger a server-side warp. // Save the overlay, then trigger a server-side warp.
options = options || {}; options = options || {};
Expand All @@ -119,6 +130,7 @@ $(function($) {
saveOptions = { saveOptions = {
error: options.error || function(){}, error: options.error || function(){},
success: function() { success: function() {
model.trigger('before_warp');
var jqXHR = $.post(warpUrl); var jqXHR = $.post(warpUrl);
jqXHR.success(function(){ jqXHR.success(function(){
model.fetch({ model.fetch({
Expand All @@ -134,6 +146,37 @@ $(function($) {
this.save({}, saveOptions); this.save({}, saveOptions);
}, },


startExport: function(options) {
//this.unset('exportUrl');
assert(! this.get('exportUrl'), "Model has an exportUrl already.");
var request_url = this.get('url').replace('.json', '/generateExport');
this.exportPending = true;
var model = this;
model.on('export_ready', function(){this.exportPending = false;}, this);
$.post(request_url, '', function(){
model.fetch({ success: function(){
model.trigger('export_ready');
if (options.success) options.success();
} });
}, 'json')
.error(function(xhr, status, error){
this.exportPending = false;
if (options.error) options.error();
});
this.pollUntilExportComplete(model);
},

pollUntilExportComplete: function pollForExportComplete (model, timeout){
if (!model.exportPending) return false;
this.fetch();
//var timeout = timeout ? 1.5 * timeout : 1000;
var timeout = 10000;
console.log("polling overlay: " + timeout);
this.pollTimer = setTimeout(_.bind(pollForExportComplete, this), timeout, model, timeout);
},



}); });


app.OverlayCollection = Backbone.Collection.extend({ app.OverlayCollection = Backbone.Collection.extend({
Expand Down
20 changes: 13 additions & 7 deletions geocamTiePoint/static/geocamTiePoint/js/backbone/router.js
View file
Expand Up @@ -4,7 +4,8 @@ $(function($) {
var AppRouter = Backbone.Router.extend({ var AppRouter = Backbone.Router.extend({
routes: { routes: {
'overlays/': 'listOverlays', 'overlays/': 'listOverlays',
'overlays/new': 'newOverlay', 'overlays/new': 'newOverlay',
'overlay/:overlay_id/export': 'exportOverlay',
'overlay/:overlay_id': 'showOverlay', 'overlay/:overlay_id': 'showOverlay',
'': 'root' '': 'root'
}, },
Expand All @@ -21,16 +22,21 @@ $(function($) {


showOverlay: function(overlay_id) { showOverlay: function(overlay_id) {
console.log('Routed to showOverlay for ' + overlay_id); console.log('Routed to showOverlay for ' + overlay_id);
//var view = new app.views.ImageQtreeView({id: overlay_id});
var view = new app.views.SplitOverlayView({id: overlay_id}); var view = new app.views.SplitOverlayView({id: overlay_id});
view.render(); view.render();
}, },


newOverlay: function() { newOverlay: function() {
console.log('Routed to newOveraly'); console.log('Routed to newOveraly');
var view = new app.views.NewOverlayView(); var view = new app.views.NewOverlayView();
view.render(); view.render();
}, },

exportOverlay: function(overlay_id) {
console.log('Routed to exportOverlay for ' + overlay_id);
var view = new app.views.ExportOverlayView({id: overlay_id});
view.render();
},


start: function() { start: function() {
Backbone.history.start(); Backbone.history.start();
Expand Down
201 changes: 131 additions & 70 deletions geocamTiePoint/static/geocamTiePoint/js/backbone/views.js
View file
Expand Up @@ -27,13 +27,13 @@ $(function($) {
if (! this._renderedTemplate) { if (! this._renderedTemplate) {
this._renderedTemplate = Handlebars.compile(this.template); this._renderedTemplate = Handlebars.compile(this.template);
} }
assert(this.context || this.model.toJson, assert(this.context || this.model.toJSON,
'Could note find a a context for the template.'); 'Could note find a a context for the template.');
var context; var context;
if (this.context) { if (this.context) {
context = _.isFunction(this.context) ? this.context() : this.context; context = _.isFunction(this.context) ? this.context() : this.context;
} else { } else {
context = this.model.toJson(); context = this.model.toJSON();
} }
var output = this._renderedTemplate(context); var output = this._renderedTemplate(context);
this.$el.html(output); this.$el.html(output);
Expand Down Expand Up @@ -92,7 +92,6 @@ $(function($) {
this.model = app.overlays.get(this.id); this.model = app.overlays.get(this.id);
} }
assert(this.model, 'Requires a model!'); assert(this.model, 'Requires a model!');
this.context = this.model.toJSON();
}, },


getState: function() { getState: function() {
Expand Down Expand Up @@ -408,7 +407,7 @@ $(function($) {
'<button id="save">Save</button>'+ '<button id="save">Save</button>'+
'<button id="undo" onclick="undo()">Undo</button>'+ '<button id="undo" onclick="undo()">Undo</button>'+
'<button id="redo" onclick="redo()">Redo</button>'+ '<button id="redo" onclick="redo()">Redo</button>'+
'<button id="export" disabled="true">Export</button>'+ '<button id="export">Export</button>'+
'</div>' + '</div>' +
'<input type="search" id="locationSearch" placeholder="Jump to a location"></input>' + '<input type="search" id="locationSearch" placeholder="Jump to a location"></input>' +
'<div id="zoom_controls">' + '<div id="zoom_controls">' +
Expand Down Expand Up @@ -536,6 +535,10 @@ $(function($) {
}); });
}); });


$('button#export').click(function() {
app.router.navigate('overlay/'+overlay.id+'/export', {trigger: true});
});

$('input#show_overlay').change(function(evt){ $('input#show_overlay').change(function(evt){
if (this.checked) { if (this.checked) {
splitView.mapView.overlay_enabled = true; splitView.mapView.overlay_enabled = true;
Expand Down Expand Up @@ -578,75 +581,133 @@ $(function($) {


app.views.NewOverlayView = app.views.View.extend({ app.views.NewOverlayView = app.views.View.extend({


template: '<form encytype="multipart/form-data" id="newOverlayForm">Image: <input type="file" name="file" id="newOverlayFile" /><br><input type="button" value="Submit" id="newOverlayFormSubmitButton" />'+window.csrf_token+'</form>', template: '<form encytype="multipart/form-data" id="newOverlayForm">Image: <input type="file" name="file" id="newOverlayFile" /><br><input type="button" value="Submit" id="newOverlayFormSubmitButton" />'+window.csrf_token+'</form>',


initialize: function() { initialize: function() {
app.views.View.prototype.initialize.apply(this, arguments); app.views.View.prototype.initialize.apply(this, arguments);
this.context = { overlays: app.overlays.toJSON() }; this.context = { overlays: app.overlays.toJSON() };
}, },


afterRender: function() { afterRender: function() {
this.$('input#newOverlayFormSubmitButton').click(this.submitForm); this.$('input#newOverlayFormSubmitButton').click(this.submitForm);
}, },


getCookie: function(name) { getCookie: function(name) {
var cookieValue = null; var cookieValue = null;
if (document.cookie && document.cookie != '') { if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';'); var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) { for (var i = 0; i < cookies.length; i++) {
var cookie = $.trim(cookies[i]); var cookie = $.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) { if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break; break;
}
} }
} }
return cookieValue;
},

csrfSafeMethod: function(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
},

submitForm: function() {
var data = new FormData();
$.each($('input#newOverlayFile')[0].files, function(i, file) {
data.append('image', file);
});
var csrftoken = app.views.NewOverlayView.prototype.getCookie('csrftoken');
$.ajax({
url: '/overlays/new.html',
crossDomain: false,
beforeSend: function(xhr, settings) {
if (!app.views.NewOverlayView.prototype.csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
},
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: app.views.NewOverlayView.prototype.submitSuccess
});
},

submitSuccess: function(data) {
console.log("got data back");
try {
var json = JSON.parse(data);
} catch (error) {
console.log('Failed to parse response as JSON: ' + error.message);
return;
}
if (json['status'] == 'success') {
var overlay = new app.models.Overlay({key: json.id});
app.overlays.add(overlay);
overlay.fetch({ 'success': function() {
app.router.navigate('overlay/'+json['id'], {trigger: true});
} });
} }
return cookieValue;
},

csrfSafeMethod: function(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
},

submitForm: function() {
var data = new FormData();
$.each($('input#newOverlayFile')[0].files, function(i, file) {
data.append('image', file);
});
var csrftoken = app.views.NewOverlayView.prototype.getCookie('csrftoken');
$.ajax({
url: '/overlays/new.html',
crossDomain: false,
beforeSend: function(xhr, settings) {
if (!app.views.NewOverlayView.prototype.csrfSafeMethod(settings.type)) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
},
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: app.views.NewOverlayView.prototype.submitSuccess
});
},

submitSuccess: function(data) {
console.log("got data back");
try {
var json = JSON.parse(data);
} catch (error) {
console.log('Failed to parse response as JSON: ' + error.message);
return;
}
if (json['status'] == 'success') {
var overlay = new app.models.Overlay({key: json.id});
app.overlays.add(overlay);
overlay.fetch({ 'success': function() {
app.router.navigate('overlay/'+json['id'], {trigger: true});
} });
}
} }
});


}); }); // end NewOverlayView


app.views.ExportOverlayView = app.views.OverlayView.extend({

initialize: function() {
app.views.OverlayView.prototype.initialize.apply(this, arguments);
_.bindAll(this);
},

template: '<h1>Export Map</h1>'+
'<h2><a href="#overlay/{{key}}">{{name}}</a><h2>'+
'{{#if exportUrl}}'+
'<p>Your exported tarball is ready.</p>' +
'<div id="download_link">'+
'<a href="{{exportUrl}}">Click to Download</a>'+
'</div>'+
'{{else}}'+
'<div id="export_controls">' +
'{{#if alignedTilesUrl}}' +
'<span id="export_button"><button id="create_archive">Create Archive</button></span>' +
'<span id="exportError" style="color:red"></span>' +
'{{else}}' +
'<p>Add at least 2 tiepoint pairs before exporting the aligned image.</p>' +
'{{/if}}' +
'</div>' +
'{{/if}}',

afterRender: function(){
this.$('#create_archive').click( _.bind(this.requestExport, this) );
if( this.model.exportPending ) {
this.startSpinner();
}
},

requestExport: function(){
//this.model.unset('exportUrl');
this.$('#create_archive').attr('disabled', true);
this.model.startExport({
error: function(){
$('#exportError').html('Error during export: ' + error);
},
});
this.startSpinner();
},

startSpinner: function(){
thisView = this;
this.model.on('export_ready', function onExportReady(){
debugger;
this.model.off(null, onExportReady, null);
if ( app.currentView === thisView ) this.render();
}, this);
this.$('#create_archive').attr('disabled', true);
this.$('#export_button').html('<img src="/static/geocamTiePoint/images/loading.gif">');
},

}); //end ExportOverlayView

}); // end jQuery ready handler

0 comments on commit fa0c81e

Please sign in to comment.