Made new overlay method with backbone actually work, but it's still b…

…uggy, and for some reason when there are no overlays, backbone fails to start

geocamTiePoint/static/geocamTiePoint/js/backbone/router.js

@@ -4,8 +4,8 @@ $(function($) {
     var AppRouter = Backbone.Router.extend({
         routes: {
             'overlays/': 'listOverlays',
+	    'overlays/new': 'newOverlay',
             'overlay/:overlay_id': 'showOverlay',
-            'overlay/new': 'newOverlay',
             '': 'root'
         },
 
@@ -28,7 +28,7 @@ $(function($) {
 
 	newOverlay: function() {
 	    console.log('Routed to newOveraly');
-	    var view = new apps.views.NewOverlayView();
+	    var view = new app.views.NewOverlayView();
 	    view.render();
 	},
 
@@ -38,5 +38,5 @@ $(function($) {
     });
 
     app.router = new AppRouter();
-
+    //app.router.start();
 });

geocamTiePoint/static/geocamTiePoint/js/backbone/views.js

@@ -38,7 +38,7 @@ $(function($) {
 
     app.views.ListOverlaysView = app.views.View.extend({
         template: '<h1>Choose an overlay:</h1>' +
-            '<a href="#overlay/new">New Overlay</a>' +
+            '<a href="#overlays/new">New Overlay</a>' +
             '{{debug}}' +
             '<ul>' +
             '{{#each overlays }}' +
@@ -335,10 +335,15 @@ $(function($) {
 
     app.views.NewOverlayView = app.views.View.extend({
 
-	template: '<form encytype="multipart/form-data" id="newOverlayForm"><input type="image" name="file" id="newOverlayFile" /><input type="submit" value="Submit" />'+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() {
+           app.views.View.prototype.initialize.apply(this, arguments);
+           this.context = { overlays: app.overlays.toJSON() };
+        },
 
 	afterRender: function() {
-	    this.$('form#newOverlayForm').submit(this.submitForm);
+	    this.$('input#newOverlayFormSubmitButton').click(this.submitForm);
 	},
 
         getCookie: function(name) {
@@ -356,18 +361,21 @@ $(function($) {
             return cookieValue;
         },
 
+	csrfSafeMethod: function(method) {
+	    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
+	},
+
 	submitForm: function() {
-	    console.log("Submiting new overlay form");
 	    var data = new FormData();
-	    $.each(this.$('input#newOverlayFile')[0].files, function(i, file) {
+	    $.each($('input#newOverlayFile')[0].files, function(i, file) {
 		data.append('image', file);
 	    });
-            var csrftoken = this.getCookie('csrftoken');
+            var csrftoken = app.views.NewOverlayView.prototype.getCookie('csrftoken');
 	    $.ajax({
-		url: 'overlay/new.html',
+		url: '/overlays/new.html',
                 crossDomain: false,
                 beforeSend: function(xhr, settings) {
-                    if (!csrfSafeMethod(settings.type)) {
+                    if (!app.views.NewOverlayView.prototype.csrfSafeMethod(settings.type)) {
                         xhr.setRequestHeader("X-CSRFToken", csrftoken);
                     }
                 },
@@ -376,18 +384,21 @@ $(function($) {
 		contentType: false,
 		processData: false,
 		type: 'POST',
-		success: this.submitSuccess
+		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;
             }
-            app.router.navigate('overlay/'+json['id']);
+	    if (json['status'] == 'success') {
+		app.router.navigate('overlay/'+json['id'], {trigger: true});
+	    }
         }
     });
 

geocamTiePoint/templates/geocamTiePoint/backbone.html

@@ -13,6 +13,10 @@
 
 {% block scripts %}
 {{ block.super }}
+<script type="text/javascript">
+// this line needs to be here otherwise views.js won't get it
+window.csrf_token = "{% csrf_token %}";
+</script>
 <script type="text/javascript" src="/static/external/js/jquery-1.7.2.min.js"></script>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
 <script type="text/javascript" src="/static/external/js/markerwithlabel.js"></script>

geocamTiePoint/views.py

@@ -115,6 +115,7 @@ def overlayNew(request):
         form = forms.NewImageDataForm(request.POST, request.FILES)
         if form.is_valid():
             # create and save new empty overlay so we can refer to it
+            # this causes a ValueError if the user isn't logged in
             overlay = models.Overlay(author=request.user)
             overlay.save()