works

rowers/templates/stepeditor.html

@@ -31,7 +31,8 @@
   {% endfor %}
 </div>
 </section>
-<section>
+<ul class="main-content">
+<li class="grid_2 library">
   <h2>Add new step</h2>
   <form enctype="multipart/multipart/form-data" method="post">
   <table>
@@ -40,7 +41,14 @@
   {% csrf_token %}
   <input name="newstep" type="submit" value="Add to Library">
   </form>
-</section>
+</li>
+<li class="grid_2 library">
+  <h2>Step Information</h2>
+  <div id="stepinfo">
+    <p>Step information</p>
+  </div>
+</li>
+</ul>
 {% endblock %}
 
 {% block scripts %}
@@ -49,6 +57,15 @@
 </script>
 <script>
   let csrftoken;
+  let steps = {};
+  {% for step in steps %}
+  steps["{{ 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);
@@ -122,14 +139,33 @@
       }
     }
 
-    function handleDragOver(event) {
+    function handleMouseOver(event) {
       if (event.preventDefault) {
-        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
       }
 
       return false;
     }
 
+    function handleMouseLeave(event) {
+      if (event.preventDefault) {
+        const div = document.getElementById("stepinfo");
+        div.innerHTML = '<p>Hover over a step to get details</p>'
+      }
+
+      return false;
+    }
+
+    function handleDragOver(event) {
+      event.preventDefault();
+    }
+
     function handleDragEnter(event) {
       this.classList.add('over');
       const target = event.target;
@@ -213,6 +249,8 @@
       item.addEventListener('dragleave', handleDragLeave);
       item.addEventListener('drop',noDrop);
       item.addEventListener('dragenter',noDrop);
+      item.addEventListener('mouseover',handleMouseOver);
+      item.addEventListener('mouseleave',handleMouseLeave);
     });
 
 </script>