sander/rowsandall
Private
Public Access
1
0
Fork 0
Code Activity

step s

Browse Source
This commit is contained in:
Sander Roosendaal
2025-01-22 20:17:47 +01:00
parent 4cf92155a6
commit 95bc02e122
3 changed files with 176 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

331
rowers/templates/stepeditor.html
View File

@@ -20,9 +20,9 @@
<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 target="/rowers/plans/stepadder/{{ ps.id}}/?save=1" onsubmit="event.preventDefault(); saveSession();">
<input id="hidden" type="hidden" value="">
<input id="savebutton" type="submit" value="Save">
</form>
</p>
{% for step in currentsteps %}
@@ -175,216 +175,219 @@
descriptions["{{ key }}"] = "{{ value }}"
{% endfor %}
$(document).ready(function() {
csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
});
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(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);
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
}
});
let dragged;
let origcolor;
function saveSession() {
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);
}
})
}
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);
}
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)
}
})
saveState();
// reload the page
location.reload();
// window.location.reload(true);
}
function saveState() {
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++;
}
})
}
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)
}
})
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) {
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;
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) {
}
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;
// 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) {
}
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 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;
}
div.innerHTML = '<p>Hover over a step to get details</p>'
}
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) {
}
function handleDragOver(event) {
event.preventDefault();
}
function handleDragEnter(event) {
}
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';
event.preventDefault();
// Set the dropEffect to move
event.dataTransfer.dropEffect = 'move'
target.style.background = '#1f904e';
}
}
function handleDragLeave(event) {
}
function handleDragLeave(event) {
event.target.style.backgroundColor = '';
if (dragged.parentNode.className.includes("drop-zone")) {
trash(event);
trash(event);
}
saveState();
}
function 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();
}
event.preventDefault();
if (dragged.parentNode.className.includes("drop-zone")) {
dragged.remove();
}
}
}
function handleDrop(event) {
}
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);
target.style.backgroundColor = '';
event.preventDefault();
// Get the id of the target and add the moved element to the targets 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.parentNode.parentNode.nodeName == 'SECTION') {
target.parentNode.after(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();
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) {
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);
@@ -392,10 +395,10 @@
item.addEventListener('dragenter',noDrop);
item.addEventListener('mouseover',handleMouseOver);
item.addEventListener('mouseleave',handleMouseLeave);
});
</script>
});
</script>
{% endblock %}
{% block sidebar %}