mdblog/markdownblog/markdownblog/templates/blog/order.html
2022-06-25 18:31:51 +02:00

98 lines
No EOL
3.6 KiB
HTML

{% extends 'base/base.html' %}
{% load static %}
{% block title %}
Order Topics
{% endblock %}
{% block includehere %}
<link rel="stylesheet" href="{% static 'order_style.css' %}">
{% endblock %}
{% block content %}
<div class="col s8 offset-s2">
<ul id="root_list" class="topic_list" ondrop="drop(event)" ondragover="allowDrop(event)"
ondragleave="resetbgColor(event)">
{% for topic in roottopics %}
{% include "blog/tree_view_template.html" %}
{% endfor %}
<ul class="topic_list" ondrop="drop(event)" ondragover="allowDrop(event)" id="list_posts_{{ topic.id }}">
{% for post in allposts %}
{% if post.topic == None %}
<li class="topic_list_element" draggable="true" ondragstart="drag(event)"
id="list_elem_post_{{ post.id }}">
<a href="{% url 'readpost' title=post.title %}">{{ post }}</a>
<a href="/admin/blog/blogpost/{{ post.id }}/delete">
<button class="btn waves-effect waves-light btn-danger">
<span class="material-icons">delete</span>
</button>
</a>
<a href="{% url 'editpost' id=post.id %}">
<button class="btn waves-effect waves-light btn-edit">
<span class="material-icons">edit</span>
</button>
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</ul>
</div>
<script type="text/javascript">
function getCookie(cname) {
let name = cname + "=";
let decodedCookie = decodeURIComponent(document.cookie);
let ca = decodedCookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function resetbgColor(ev) {
ev.preventDefault();
ev.target.style.backgroundColor = "";
}
function allowDrop(ev) {
ev.preventDefault();
ev.target.style.backgroundColor = "#37FF3733";
Array.from(ev.target.children).forEach(elem => {
elem.style.backgroundColor = "white";
}
);
}
function drag(ev) {
ev.dataTransfer.setData("targetObject", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
const targetObject = ev.dataTransfer.getData("targetObject");
ev.target.appendChild(document.getElementById(targetObject));
ev.target.style.backgroundColor = "";
let fakeForm = new FormData()
fakeForm.append("childID", targetObject.replace("list_elem_", "").replace("post_", ""));
fakeForm.append("rootID", ev.target.id.replace("list_elem_", ""));
if (targetObject.replace("list_elem_", "").startsWith("post_")) {
fakeForm.append("relinkType", "post")
} else {
fakeForm.append("relinkType", "topic")
}
fetch("{% url 'order' %}", {
method: 'POST',
body: fakeForm
});
}
</script>
{% endblock %}