added coor saving

netbox_topology_views/static_dev/js/home.js

@@ -34,6 +34,24 @@ var options = {
 };
 var selected_regions = [];
 var selected_sites = [];
+var coord_save_checkbox = null;
+
+function getCookie(name) {
+    var cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        var cookies = document.cookie.split(';');
+        for (var i = 0; i < cookies.length; i++) {
+            var cookie = cookies[i].trim();
+            // Does this cookie string begin with the name we want?
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
 
 function htmlTitle(html) {
     container = document.createElement("div");
@@ -53,15 +71,17 @@ function addNode(item) {
 
 function iniPlotboxIndex() {
     document.addEventListener('DOMContentLoaded', function () {
+        csrftoken = getCookie('csrftoken');
         container = document.getElementById('visgraph');
         handleLoadData();
         downloadButton = document.getElementById('btnDownloadImage');
         btnFullView = document.getElementById('btnFullView');
+        coord_save_checkbox = document.getElementById('id_save_coords');
     }, false);
 }
 
 function handleLoadData() {
-
+    if (topology_data !== null) {
         graph = null;
         nodes = new vis.DataSet();
         edges = new vis.DataSet();
@@ -79,4 +99,36 @@ function handleLoadData() {
             downloadButton.download = "topology";
         });
 
+        graph.on("dragEnd", function (params) {
+            dragged = this.getPositions(params.nodes);
+
+            if (coord_save_checkbox.checked) {
+                if (Object.keys(dragged).length !== 0) {
+                    for (dragged_device in dragged) {
+                        var node_id = dragged_device;
+
+                        var url = "/api/plugins/netbox_topology_views/save-coords/save_coords/";
+                        var xhr = new XMLHttpRequest();
+                        xhr.open("PATCH", url);
+                        xhr.setRequestHeader('X-CSRFToken', csrftoken );
+                        xhr.setRequestHeader("Accept", "application/json");
+                        xhr.setRequestHeader("Content-Type", "application/json");
+    
+                        xhr.onreadystatechange = function () {
+                        if (xhr.readyState === 4) {
+                            console.log(xhr.status);
+                            console.log(xhr.responseText);
+                        }};
+    
+                        var data = JSON.stringify({
+                            'node_id': node_id,
+                            'x': dragged[node_id].x,
+                            'y': dragged[node_id].y});
+    
+                        xhr.send(data);
+                    }
+                }
+            }
+        });
+    }
 }