everything working,

rowers/templates/stepeditor.html

@@ -19,14 +19,47 @@
 <div class="stepcontainer" id="list">
 <section class="drop-zone">
 <h2>Training Steps for {{ ps.name }}</h2>
+<p>
+<form onsubmit="event.preventDefault(); saveSession();">
+  <input id="hidden" type="hidden" value="">
+  <input id="savebutton" type="submit" value="Save">
+</form>
+</p>
+{% for step in currentsteps %}
+<div id="{{ step.id }}" draggable="true" class="trainingstep {{ step.intensity }}" >
+  <span  id="{{ step.id }}" class="stepcontent">
+  {{ step.name }}
+  </span>
+  <span id="{{ step.id }}">
+    <a href="/rowers/plans/step/{{ step.id }}/edit/{{ ps.id }}/">
+    <i class="fas fa-pencil-alt fa-fw"></i>
+    </a>
+  </span>
+  <span id="{{ step.id }}">
+    <a href="/rowers/plans/step/{{ step.id }}/delete/?id={{ ps.id }}">
+    <i class="fas fa-trash-alt fa-fw"></i>
+    </a>
+  </span>
+</div>
+{% endfor %}
 </section>
 <section class="library">
   <h2>Library</h2>
   {% for step in steps %}
-  <div draggable="true" class="trainingstep {{ step.intensity }}" >
-    <div  id="{{ forloop.counter }}" class="stepcontent">
+  <div id="{{ step.id }}" draggable="true" class="trainingstep {{ step.intensity }}" >
+    <span  id="{{ step.id }}" class="stepcontent">
     {{ step.name }}
-    </div>
+    </span>
+    <span id="{{ step.id }}">
+      <a href="/rowers/plans/step/{{ step.id }}/edit/{{ ps.id }}/">
+      <i class="fas fa-pencil-alt fa-fw"></i>
+      </a>
+    </span>
+    <span id="{{ step.id }}">
+      <a href="/rowers/plans/step/{{ step.id }}/delete/?id={{ ps.id }}">
+      <i class="fas fa-trash-alt fa-fw"></i>
+      </a>
+    </span>
   </div>
   {% endfor %}
 </div>
@@ -57,18 +90,16 @@
 </script>
 <script>
   let csrftoken;
-  let steps = {};
+  let mysteps = {};
   {% for step in steps %}
-  steps["{{ step.id }}"] = { 'name': '{{ step.name }}' };
+  mysteps["{{ step.id }}"] = { 'name': '{{ step.name }}' };
   {% endfor %}
   let descriptions = {}
   {% for key, value in stepdescriptions.items %}
   descriptions["{{ key }}"] = "{{ value }}"
   {% endfor %}
-  console.log(descriptions);
   $(document).ready(function() {
     csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
-    console.log("CSRF token",csrftoken);
   });
   function csrfSafeMethod(method) {
     // these HTTP methods do not require CSRF protection
@@ -85,20 +116,46 @@
     let dragged;
     let origcolor;
 
+    function saveSession() {
+
+      var list = [];
+      steps = document.querySelector('.drop-zone');
+      steps.childNodes.forEach(function(item) {
+        if (item.className && item.className.includes("trainingstep")) {
+          item.childNodes.forEach(function(child) {
+            if (child.id && child.className == 'stepcontent') {
+              list.push(child.id);
+            }
+          })
+        }
+      });
+      $.ajax({
+        data: JSON.stringify(list),
+        type: 'POST',
+        url: '/rowers/plans/stepadder/{{ ps.id }}/?save=1',
+        error: function(result) {
+          $("#id_waiting").replaceWith(
+          '<div id="id_failed" class="grid_12 alpha message">Your upload failed</div>'
+          );
+        },
+        success: function(result) {
+          console.log(result)
+        }
+    })
+    }
+
     function saveState() {
       var list = [];
       steps = document.querySelector('.drop-zone');
       steps.childNodes.forEach(function(item) {
         if (item.className && item.className.includes("trainingstep")) {
           item.childNodes.forEach(function(child) {
-            console.log(child.id);
-            if (child.id) {
+            if (child.id && child.className == 'stepcontent') {
               list.push(child.id);
             }
           })
         }
       });
-      console.log(list);
       $.ajax({
         data: JSON.stringify(list),
         type: 'POST',
@@ -109,8 +166,7 @@
           );
         },
         success: function(result) {
-          console.log('got something back');
-          console.log(result);
+          console.log(result)
         }
     })
   };
@@ -142,12 +198,13 @@
     function handleMouseOver(event) {
       if (event.preventDefault) {
         const id = event.target.id;
-        console.log(id);
-        var name = steps[id]['name'];
-        var txt = descriptions[id];
-        var divstring = `<p>${name}</p><p>${txt}</p>`
-        const div = document.getElementById("stepinfo");
-        div.innerHTML = divstring
+        if (id) {
+          var name = mysteps[id]['name'];
+          var txt = descriptions[id];
+          var divstring = `<p>${name}</p><p>${txt}</p>`
+          const div = document.getElementById("stepinfo");
+          div.innerHTML = divstring;
+        }
       }
 
       return false;
@@ -183,7 +240,6 @@
       event.target.style.backgroundColor = '';
 
       if (dragged.parentNode.className.includes("drop-zone")) {
-        console.log("trashing");
         trash(event);
       }
     }
@@ -211,6 +267,7 @@
           dragged.style.opacity = '';
           dragged.style.backgroundColor = origcolor;
           var dropped = dragged.cloneNode(true);
+          dropped.id = 0;
           target.appendChild(dropped);
         }
         if (target.nodeName == 'DIV') {
@@ -253,6 +310,7 @@
       item.addEventListener('mouseleave',handleMouseLeave);
     });
 
+
 </script>
 {% endblock %}