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>
<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 }} {{ 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 }}/">
    <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="allcentered">
  <div class="allcenteredchild">
  <h1><i class="fas fa-arrow-left fa-fw"></i></h1>
  </div>
</section>
<section class="library">
  <h2>Step Library</h2>
  {% for step in steps %}
  <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 }}/">
      <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>
</section>
<ul class="main-content">
<li class="grid_2 library">
  <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>
</li>
<li class="grid_2 library">
  <h2>Step Information</h2>
  <div id="stepinfo">
    <p>Step information</p>
  </div>
</li>
<li class="grid_2">
  <h2>Explanation</h2>
  <table width=90% class="listtable shortpadded">
    <tr>
      <th>Parameter</th>
      <th>Regular Step</th>
      <th>Repeat Step</th>
    </tr>
    <tr>
      <th>Duration Type</th><td>Time or Distance</td><td>Repeat</td>
    </tr>
    <tr>
      <th>Duration Value</th><td>Minutes / Meters</td><td>Block number to start repeat from</td>
    </tr>
    <tr>
      <th>Target Type</th><td>Set a target to hold</td><td>---</td>
    </tr>
    <tr>
      <th>Target Value</th>
      <td>
        <div>Power: Zone number (1-10), &#37; of FTP (10-1000)</div>
        <div>Speed: 1000x target speed in m/s</div>
        <div>Heart Rate: Zone number (1-10), &#37; of max (10-100); </div>
        <div>Cadence: Strokes per Minute</div>
      </td>
      <td>
        Number of repetitions
      </td>
    </tr>
    <tr>
      <th>Target Value Low</th>
      <td>
        <div>Power: &#37; of FTP (10-1000)</div>
        <div>Speed: 1000x target speed in m/s</div>
        <div>Heart Rate: &#37; of max (10-100); </div>
        <div>Cadence: Strokes per Minute</div>
      </td>
      <td>
      </td>
    </tr>
    <tr>
      <th>Target Value High</th>
      <td>
        <div>Power: &#37; of FTP (10-1000)</div>
        <div>Speed: 1000x target speed in m/s</div>
        <div>Heart Rate: &#37; of max (10-100); </div>
        <div>Cadence: Strokes per Minute</div>
      </td>
      <td>
      </td>
    </tr>
    <tr>
      <th>Intensity</th><td>Warming Up, Active, Rest</td><td>Set to Active</td>
    </tr>
    <tr>
      <th>Description</th><td>Any other text</td><td></td>
    </tr>
  </table>
</li>

</ul>
{% 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;
  let mysteps = {};
  {% for step in steps %}
  mysteps["{{ step.id }}"] = { 'name': '{{ step.name }}' };
  {% endfor %}
  let descriptions = {}
  {% for key, value in stepdescriptions.items %}
  descriptions["{{ key }}"] = "{{ value }}"
  {% endfor %}
  $(document).ready(function() {
    csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
  });
  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 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)
        }
    })
    window.location.reload(true);
    }

    function saveState() {
      var cntr = 0;
      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);
            }
            if (child.className == "stepid") {
              s = `(${cntr})`
              child.replaceWith(s);
              cntr++;
            }
          })
        }
      });
      $.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(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;
      }
      saveState();
    }

    function handleMouseOver(event) {
      if (event.preventDefault) {
        const id = event.target.id;
        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;
    }

    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;
      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")) {
        trash(event);
      }
      saveState();
    }

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

    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);
          dropped.id = 0;
          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);
      item.addEventListener('mouseover',handleMouseOver);
      item.addEventListener('mouseleave',handleMouseLeave);
    });


</script>
{% endblock %}

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