146 lines
4.1 KiB
HTML
146 lines
4.1 KiB
HTML
{% extends "newbase.html" %}
|
|
{% load static %}
|
|
{% load rowerfilters %}
|
|
|
|
{% block title %}Rowsandall Training Plans{% endblock %}
|
|
|
|
|
|
{% block main %}
|
|
<h2>Plan Training Steps</h2>
|
|
<div class="stepcontainer" id="list">
|
|
<section class="drop-zone">
|
|
<h2>Training</h2>
|
|
</section>
|
|
<section class="library">
|
|
<h2>Library</h2>
|
|
{% for step in steps %}
|
|
<div draggable="true" class="trainingstep" style="background-color: {{ step.color }}">
|
|
<div id="{{ forloop.counter }}" class="stepcontent">
|
|
{{ step.name }}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
<section class="trash-can">
|
|
<h2>Remove</h2>
|
|
</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 dragged;
|
|
|
|
function handleDragStart(event) {
|
|
let target = event.target;
|
|
if (target) {
|
|
dragged = target;
|
|
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
|
|
dragged = null;
|
|
}
|
|
}
|
|
|
|
function handleDragOver(event) {
|
|
if (event.preventDefault) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
function handleDragEnter(event) {
|
|
const target = event.target;
|
|
if (target && dragged) {
|
|
event.preventDefault();
|
|
// Set the dropEffect to move
|
|
event.dataTransfer.dropEffect = 'move'
|
|
target.style.background = '#1f904e';
|
|
}
|
|
}
|
|
|
|
function handleDragLeave(event) {
|
|
console.log(event.target.nodeName);
|
|
event.target.style.background = '';
|
|
}
|
|
|
|
function trash(event) {
|
|
const target = event.target;
|
|
console.log("trash", target)
|
|
target.style.backgroundColor = '';
|
|
if (target && dragged) {
|
|
event.preventDefault();
|
|
console.log(dragged.parentNode.className);
|
|
if (dragged.parentNode.className == "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 = '';
|
|
var dropped = dragged.cloneNode(true);
|
|
target.appendChild(dropped);
|
|
}
|
|
if (target.nodeName == 'DIV') {
|
|
// insert after
|
|
dragged.style.opacity = '';
|
|
var dropped = dragged.cloneNode(true);
|
|
if (target.parentNode.nodeName == 'SECTION') {
|
|
target.after(dropped);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
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 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('drop',noDrop);
|
|
item.addEventListener('dragenter',noDrop);
|
|
});
|
|
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block sidebar %}
|
|
{% include 'menu_plan.html' %}
|
|
{% endblock %}
|