109 lines
3.1 KiB
HTML
109 lines
3.1 KiB
HTML
{% extends "interface/project_base.html" %}
|
|
|
|
{% block admin %}
|
|
<a href="{% url 'item_list_append' project.pk %}" class="button is-link">
|
|
<span class="icon"><i class="fas fa-plus-circle"></i></span>
|
|
<span>Add</span>
|
|
</a>
|
|
<a href="#" onclick="save()" class="button is-link">
|
|
<span class="icon"><i class="fas fa-save"></i></span>
|
|
<span>Save</span>
|
|
</a>
|
|
{% endblock %}
|
|
|
|
{% block page %}
|
|
<table style="max-width: 600px; margin: 10pt auto;" class="zebra">
|
|
<thead>
|
|
<tr>
|
|
<th>Item</th>
|
|
<th>Time</th>
|
|
<th/>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="work-list">
|
|
{% for item in object_list %}
|
|
<tr data-pk="{{ item.pk }}" data-order="{{ forloop.counter }}">
|
|
<td>{{ item.work.name }}</td>
|
|
<td>{{ item.work.duration }}</td>
|
|
<td style="text-align: center;">
|
|
<i class="fas fa-arrow-up clickable" title="Move up" onclick="moveItem({{ item.pk }}, -1)"></i>
|
|
<i class="fas fa-arrow-down clickable" title="Move down" onclick="moveItem({{ item.pk }}, 1)"></i>
|
|
<i class="fas fa-trash clickable" title="Remove" onClick="moveItem({{ item.pk }}, 0)"></i>
|
|
</td>
|
|
|
|
</tr>
|
|
{% empty %}
|
|
<tr><td colspan="2">No items</td></tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script type="text/javascript">
|
|
|
|
let workList = document.getElementById('work-list');
|
|
var dirty = false;
|
|
|
|
function moveItem(pk, dir) {
|
|
let items = Array.prototype.slice.call(workList.children, 0);
|
|
var i=0;
|
|
pk = "" + pk;
|
|
for(i=0; i<items.length; i++) {
|
|
if(items[i].dataset.pk === pk) break;
|
|
}
|
|
if(i >= items.length) return;
|
|
|
|
// check the direction is sensible
|
|
if (i + dir < 0 || i + dir >= items.length) return;
|
|
|
|
if (dir === 0) {
|
|
items[i].dataset.order = -1;
|
|
items[i].style = "display: none";
|
|
} else {
|
|
items[i].dataset.order = parseInt(items[i].dataset.order) + dir;
|
|
items[i+dir].dataset.order = parseInt(items[i+dir].dataset.order) - dir;
|
|
}
|
|
|
|
items.sort((a, b) => parseInt(a.dataset.order) - parseInt(b.dataset.order))
|
|
|
|
workList.innerHTML = ""
|
|
for(let j=0; j<items.length; j++) {
|
|
workList.appendChild(items[j]);
|
|
}
|
|
dirty = true;
|
|
}
|
|
|
|
function save() {
|
|
|
|
let items = Array.prototype.slice.call(workList.children, 0);
|
|
let data = {};
|
|
for(var i=0; i<items.length; i++) {
|
|
let item = items[i].dataset;
|
|
data[item.pk] = item.order;
|
|
}
|
|
console.log(data);
|
|
|
|
fetch("", {
|
|
method: "POST",
|
|
headers: {"Content-Type": "application/json", "X-CSRFToken": "{{ csrf_token }}"},
|
|
body: JSON.stringify(data)
|
|
}).then((response) => {
|
|
if (response.ok) {
|
|
dirty=false;
|
|
window.location = "{% url 'item_list' project=project.pk %}";
|
|
} else {
|
|
alert("Failed: " + response.statusText)
|
|
}
|
|
})
|
|
}
|
|
|
|
function checkSaved(e) {
|
|
if(dirty) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
window.addEventListener('beforeunload', checkSaved);
|
|
|
|
</script>
|
|
{% endblock %} |