saveState not working yet

rowers/templates/stepeditor.html

@@ -7,6 +7,15 @@
 
 {% block main %}
 <h2>Plan Training Steps</h2>
+<p>
+  WARNING: This is experimental functionality which may not behave as you
+  expect. Does not work on smartphones.
+</p>
+<p>
+  Drag from Library to Training to add a step to the end.
+  Drag on top of a training step to insert after it.
+  Drag out of Training to remove a step.
+</p>
 <div class="stepcontainer" id="list">
 <section class="drop-zone">
 <h2>Training</h2>
@@ -14,7 +23,7 @@
 <section class="library">
   <h2>Library</h2>
   {% for step in steps %}
-  <div draggable="true" class="trainingstep" style="background-color: {{ step.color }}">
+  <div draggable="true" class="trainingstep {{ step.intensity }}" >
     <div  id="{{ forloop.counter }}" class="stepcontent">
     {{ step.name }}
     </div>
@@ -22,8 +31,15 @@
   {% endfor %}
 </div>
 </section>
-<section class="trash-can">
-  <h2>Remove</h2>
+<section>
+  <h2>Add new step</h2>
+  <form enctype="multipart/multipart/form-data" method="post">
+  <table>
+    {{ form.as_table }}
+  </table>
+  {% csrf_token %}
+  <input name="newstep" type="submit" value="Add to Library">
+  </form>
 </section>
 {% endblock %}
 
@@ -33,11 +49,25 @@
 </script>
 <script>
     let dragged;
+    let origcolor;
+
+    function saveState() {
+      var list = [];
+      steps = document.querySelector('.drop-zone');
+      steps.childNodes.forEach(function(item) {
+        if (item.className && item.className.includes("trainingstep")) {
+          console.log(item);
+        }
+      });
+      console.log(list);
+    }
+
 
     function handleDragStart(event) {
       let target = event.target;
       if (target) {
         dragged = target;
+        origcolor = dragged.style.backgroundColor;
         event.dataTransfer.setData('text', target.id);
         event.dataTransfer.dropEffect = 'move';
         // Make it half transparent
@@ -49,7 +79,11 @@
       if (event.target) {
         // Reset the transparency
         event.target.style.opacity = ''; // reset opacity when drag ends
+        items.forEach(function (item) {
+          item.classList.remove('over');
+        });
         dragged = null;
+        origcolor = null;
       }
     }
 
@@ -62,7 +96,10 @@
     }
 
     function handleDragEnter(event) {
+      this.classList.add('over');
       const target = event.target;
+      overcolor = event.target.style.backgroundColor;
+
       if (target && dragged) {
         event.preventDefault();
         // Set the dropEffect to move
@@ -72,19 +109,22 @@
     }
 
     function handleDragLeave(event) {
-      console.log(event.target.nodeName);
-      event.target.style.background = '';
+      event.target.style.backgroundColor = '';
+
+      if (dragged.parentNode.className.includes("drop-zone")) {
+        console.log("trashing");
+        trash(event);
+      }
     }
 
     function trash(event) {
       const target = event.target;
-      console.log("trash", target)
-      target.style.backgroundColor = '';
+      event.target.style.backgroundColor = '';
       if (target && dragged) {
         event.preventDefault();
-        console.log(dragged.parentNode.className);
-        if (dragged.parentNode.className == "drop-zone") {
+        if (dragged.parentNode.className.includes("drop-zone")) {
           dragged.remove();
+          saveState();
         }
       }
     }
@@ -98,18 +138,24 @@
         // dragged.parentNode.removeChild(dragged);
         if (target.nodeName == "SECTION") {
           dragged.style.opacity = '';
+          dragged.style.backgroundColor = origcolor;
           var dropped = dragged.cloneNode(true);
           target.appendChild(dropped);
         }
         if (target.nodeName == 'DIV') {
           // insert after
           dragged.style.opacity = '';
+          dragged.style.backgroundColor = origcolor;
           var dropped = dragged.cloneNode(true);
           if (target.parentNode.nodeName == 'SECTION') {
             target.after(dropped);
           }
+          if (target.parentNode.parentNode.nodeName == 'SECTION') {
+            target.parentNode.after(dropped);
+          }
         }
       }
+      saveState();
   }
 
   function noDrop(event) {
@@ -124,15 +170,12 @@
     dropzone.addEventListener('dragover', handleDragOver);
     dropzone.addEventListener('dragstart', handleDragStart);
     dropzone.addEventListener('dragend', handleDragEnd);
-    let trashcan = document.querySelector('.trash-can');
-    trashcan.addEventListener('drop', trash)
-    trashcan.addEventListener('dragenter', handleDragEnter);
-    trashcan.addEventListener('dragleave', handleDragLeave);
-    trashcan.addEventListener('dragover', handleDragOver);
+
     let items = document.querySelectorAll('.stepcontainer .trainingstep');
     items.forEach(function(item) {
       item.addEventListener('dragstart', handleDragStart);
       item.addEventListener('dragend', handleDragEnd);
+      item.addEventListener('dragleave', handleDragLeave);
       item.addEventListener('drop',noDrop);
       item.addEventListener('dragenter',noDrop);
     });