rowsandall/rowers/templates/stepeditor.html

{% extends "newbase.html" %}
{% load static %}
{% load rowerfilters %}

{% block title %}Rowsandall Training Plans{% endblock %}


{% 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 Steps for {{ ps.name }}</h2>
</section>
<section class="library">
  <h2>Library</h2>
  {% for step in steps %}
  <div draggable="true" class="trainingstep {{ step.intensity }}" >
    <div  id="{{ forloop.counter }}" class="stepcontent">
    {{ step.name }}
    </div>
  </div>
  {% endfor %}
</div>
</section>
<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 %}

{% block scripts %}
<script type='text/javascript'
        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
</script>
<script>
  let csrftoken;
  $(document).ready(function() {
    csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
    console.log("CSRF token",csrftoken);
  });
  function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }
  $.ajaxSetup({
    beforeSend: function(xhr, settings) {
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
      }
    }
  });

    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")) {
          item.childNodes.forEach(function(child) {
            console.log(child.id);
            if (child.id) {
              list.push(child.id);
            }
          })
        }
      });
      console.log(list);
      $.ajax({
        data: JSON.stringify(list),
        type: 'POST',
        url: '/rowers/plans/stepadder/{{ ps.id }}/',
        error: function(result) {
          $("#id_waiting").replaceWith(
          '<div id="id_failed" class="grid_12 alpha message">Your upload failed</div>'
          );
        },
        success: function(result) {
          console.log('got something back');
          console.log(result);
        }
    })
  };

    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
        event.target.style.opacity = .3;
      }
    }

    function handleDragEnd(event) {
      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;
      }
    }

    function handleDragOver(event) {
      if (event.preventDefault) {
        event.preventDefault();
      }

      return false;
    }

    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
        event.dataTransfer.dropEffect = 'move'
        target.style.background = '#1f904e';
      }
    }

    function handleDragLeave(event) {
      event.target.style.backgroundColor = '';

      if (dragged.parentNode.className.includes("drop-zone")) {
        console.log("trashing");
        trash(event);
      }
    }

    function trash(event) {
      const target = event.target;
      event.target.style.backgroundColor = '';
      if (target && dragged) {
        event.preventDefault();
        if (dragged.parentNode.className.includes("drop-zone")) {
          dragged.remove();
          saveState();
        }
      }
    }

    function handleDrop(event) {
      const target = event.target;
      if (target && dragged) {
        target.style.backgroundColor = '';
        event.preventDefault();
        // Get the id of the target and add the moved element to the target's DOM
        // 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) {
    event.preventDefault();
  }


    let dropzone = document.querySelector('.drop-zone')
    dropzone.addEventListener('dragenter', handleDragEnter);
    dropzone.addEventListener('dragleave', handleDragLeave);
    dropzone.addEventListener('drop', handleDrop)
    dropzone.addEventListener('dragover', handleDragOver);
    dropzone.addEventListener('dragstart', handleDragStart);
    dropzone.addEventListener('dragend', handleDragEnd);

    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);
    });

</script>
{% endblock %}

{% block sidebar %}
{% include 'menu_plan.html' %}
{% endblock %}