some more fine tuning

rowers/templates/stepeditor.html

@@ -26,9 +26,15 @@
 </form>
 </p>
 {% for step in currentsteps %}
-<div id="{{ step.id }}" draggable="true" class="trainingstep {{ step.intensity }}" >
+<div id="{{ step.id }}" draggable="true" class="trainingstep {{ step.intensity }} {{ step.durationtype }}" >
+  <span id="{{ step.id }}" class="stepid">
+    ({{ forloop.counter|add:-1 }})
+  </span>
   <span  id="{{ step.id }}" class="stepcontent">
   {{ step.name }}
+  {% if step.durationtype == "RepeatUntilStepsCmplt" %}
+  - repeat {{ step.targetvalue }}x from block {{ step.durationvalue|floatformat }}
+  {% endif %}
   </span>
   <span id="{{ step.id }}">
     <a href="/rowers/plans/step/{{ step.id }}/edit/{{ ps.id }}/">
@@ -43,12 +49,22 @@
 </div>
 {% endfor %}
 </section>
+<section class="allcentered">
+  <div class="allcenteredchild">
+  <h1><i class="fas fa-arrow-left fa-fw"></i></h1>
+  </div>
+</section>
 <section class="library">
-  <h2>Library</h2>
+  <h2>Step Library</h2>
   {% for step in steps %}
-  <div id="{{ step.id }}" draggable="true" class="trainingstep {{ step.intensity }}" >
+  <div id="{{ step.id }}" draggable="true" class="trainingstep {{ step.intensity }} {{ step.durationtype}}" >
+    <span id="{{ step.id }}" class="stepid">
+    </span>
     <span  id="{{ step.id }}" class="stepcontent">
     {{ step.name }}
+    {% if step.durationtype == "RepeatUntilStepsCmplt" %}
+    - repeat {{ step.targetvalue }}x from block {{ step.durationvalue|floatformat }}
+    {% endif %}
     </span>
     <span id="{{ step.id }}">
       <a href="/rowers/plans/step/{{ step.id }}/edit/{{ ps.id }}/">
@@ -142,9 +158,11 @@
           console.log(result)
         }
     })
+    window.location.reload(true);
     }
 
     function saveState() {
+      var cntr = 0;
       var list = [];
       steps = document.querySelector('.drop-zone');
       steps.childNodes.forEach(function(item) {
@@ -153,6 +171,11 @@
             if (child.id && child.className == 'stepcontent') {
               list.push(child.id);
             }
+            if (child.className == "stepid") {
+              s = `(${cntr})`
+              child.replaceWith(s);
+              cntr++;
+            }
           })
         }
       });
@@ -193,6 +216,7 @@
         dragged = null;
         origcolor = null;
       }
+      saveState();
     }
 
     function handleMouseOver(event) {
@@ -242,6 +266,7 @@
       if (dragged.parentNode.className.includes("drop-zone")) {
         trash(event);
       }
+      saveState();
     }
 
     function trash(event) {
@@ -251,7 +276,6 @@
         event.preventDefault();
         if (dragged.parentNode.className.includes("drop-zone")) {
           dragged.remove();
-          saveState();
         }
       }
     }