Use the API when editing point in js (using AJAX). Still ugly, might not work

TODO

@@ -1,6 +1,7 @@
 Basic functionalities:
 
 - get the js code to work with DRF (full-AJAX)
+  → WIP, hackish but works somewhat, coordinate reference is wrong (pixel in backend, x in 0..1 and y in -0.5..0.5 in frontend)
 
 - hire a HTML5/CSS designer :-)
 

panorama/models.py

@@ -174,7 +174,8 @@ class Panorama(ReferencePoint):
         """Similar hack, returns all reference points around the panorama."""
         refpoints = [refpoint for refpoint in ReferencePoint.objects.all()
                      if self.great_circle_distance(refpoint) <= settings.PANORAMA_MAX_DISTANCE and refpoint.pk != self.pk]
-        return enumerate([{"name": r.name,
+        return enumerate([{"id": r.pk,
+                           "name": r.name,
                            "cap": self.bearing(r),
                            "elevation": self.elevation(r),
                            "distance": self.line_distance(r) / 1000}

panorama/static/panorama/js/pano.js

@@ -604,6 +604,7 @@ function tzoom(zv) {
 		    var cap = point_list[i][2];
 		    var ele = point_list[i][3];
 		    var lnk = point_list[i][4];
+		    var url = point_list[i][5];
 		    var typ = 'unlocated';
 		    var rxy = this.get_pos_xy(cap, ele);
 		    var is_visible = (
@@ -637,6 +638,7 @@ function tzoom(zv) {
 		    this.pt_list[i]['dist'] = dst;
 		    this.pt_list[i]['label'] = lbl;
 		    this.pt_list[i]['lnk'] = lnk;
+		    this.pt_list[i]['url'] = url;
 		    this.pt_list[i]['xc'] = rxy.x;
 		    this.pt_list[i]['yc'] = Math.floor(this.im.height/2 - rxy.y);
 	    }
@@ -866,13 +868,15 @@ function manage_ref_points(e) {
 }
 
 function insert_ref_point(el, x, y) {
-	var label, posx, posy;
-	el.style.display = 'none';
-	var selected_label = document.getElementById('sel_point').value;
-	var found = false;
+    var label, posx, posy;
+    el.style.display = 'none';
+    var selected_label = document.getElementById('sel_point').value;
+    var found = false;
+    var refpoint_url;
     for(var i = 0; i < zm.pt_list.length; i++) {
 	label = zm.pt_list[i]['label'];
 	if(label == selected_label) {
+	    refpoint_url = zm.pt_list[i]['url'];
 	    posx = nmodulo(last.x + x - canvas.width/2, zm.im.width)/zm.im.width;
 	    posy = 0.5 - (last.y + y - canvas.height/2)/zm.im.height;
 	    var pval = {x:posx, y:posy, cap:zm.pt_list[i]['cap'], ele:zm.pt_list[i]['ele'], label:label};
@@ -892,11 +896,13 @@ function insert_ref_point(el, x, y) {
 	
 	// Then push the modif
 	var xhr = getXMLHttpRequest();
-	xhr.open("POST", "ajax/add_reference.php", true);
-	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-	xhr.send("ref_point="+encodeURIComponent(label)
-	         +"&panorama="+encodeURIComponent(get_base_name())
-	         +"&x="+posx+"&y="+posy);
+	xhr.open("POST", "/api/v1/references/", true);
+    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+    alert("x=" + x + " y=" + y + " last.x=" + last.x + " last.y=" + last.y);
+	xhr.send("reference_point=" + refpoint_url
+	         + "&panorama=" + panorama_url
+                 + "&csrfmiddlewaretoken=" + csrf_token
+	         + "&x=" + (last.x + x) + "&y=" + (last.y + y));
 }
 
 function show_result(clear_before) {

panorama/templates/panorama/view.html

@@ -6,8 +6,11 @@
     <title>{{ panorama.name }}</title>
     <script>
       var title = "{{ panorama.name|escapejs }}";
+      var panorama_id = {{ panorama.pk }};
+      var panorama_url = "/api/v1/panoramas/{{ panorama.pk }}/";
       var img_prefix = '{{ panorama.tiles_url }}';
       var image_loop = {{ panorama.loop|yesno:"true,false,undefined" }};
+      var csrf_token = "{{ csrf_token }}";
     </script>
     <script src="{% static "panorama/js/pano.js" %}"></script>
     <script>window.onload = load_pano</script>
@@ -23,12 +26,12 @@
       {% endfor %}
 
       {% for id, refpoint in panorama.refpoints_data %}
-      point_list[{{ id }}] = new Array("{{ refpoint.name }}", {{ refpoint.distance }}, {{ refpoint.cap }}, {{ refpoint.elevation }}, "");
+      point_list[{{ id }}] = new Array("{{ refpoint.name }}", {{ refpoint.distance }}, {{ refpoint.cap }}, {{ refpoint.elevation }}, "", "/api/v1/refpoints/{{ refpoint.id }}/");
       {% endfor %}
 
       ref_points = new Array();
       {% for ref in panorama.references_data %}
-      ref_points["{{ ref.name }}"] = {x: {{ ref.x }}, y: {{ ref.y }}, cap: {{ ref.cap }}, ele: {{ ref.elevation }}};
+      ref_points["{{ ref.name }}"] = {url: "/api/v1/references/{{ ref.pk }}/", x: {{ ref.x }}, y: {{ ref.y }}, cap: {{ ref.cap }}, ele: {{ ref.elevation }}};
       {% endfor %}
     </script>
     <link type="image/x-icon" rel="shortcut icon" href="{% static "panorama/img/tsf.png" %}"/>