forked from fixin.me/fixin.me
111 lines
3.8 KiB
Plaintext
111 lines
3.8 KiB
Plaintext
<div class="rightside buttongrid">
|
|
<% if current_user.at_least(:active) %>
|
|
<%= image_link_to t('.new_unit'), 'plus-outline', new_unit_path,
|
|
id: dom_id(Unit, :new, :link), onclick: 'this.blur();', data: {turbo_stream: true} %>
|
|
<% end %>
|
|
<%= image_link_to t('.import_units'), 'download-outline', default_units_path, class: 'tools' %>
|
|
</div>
|
|
|
|
<%= tag.div id: :unit_form %>
|
|
|
|
<table class="main items">
|
|
<thead>
|
|
<tr>
|
|
<th><%= User.human_attribute_name(:symbol).capitalize %></th>
|
|
<th><%= User.human_attribute_name(:description).capitalize %></th>
|
|
<th><%= User.human_attribute_name(:multiplier).capitalize %></th>
|
|
<% if current_user.at_least(:active) %>
|
|
<th><%= t :actions %></th>
|
|
<th></th>
|
|
<% end %>
|
|
</tr>
|
|
<%= tag.tr id: 'unit_', hidden: true,
|
|
ondragover: 'dragOver(event)', ondrop: 'drop(event)',
|
|
ondragenter: 'dragEnter(event)', ondragleave: 'dragLeave(event)',
|
|
data: {drop_id: 'unit_'} do %>
|
|
<th colspan="5"><%= t '.top_level_drop' %></th>
|
|
<% end %>
|
|
</thead>
|
|
<tbody id="units">
|
|
<%= render(@units) || render_no_items %>
|
|
</tbody>
|
|
</table>
|
|
|
|
<%= javascript_tag do %>
|
|
function processKey(event) {
|
|
if (event.key == "Escape") {
|
|
event.currentTarget.querySelector("a[name=cancel]").click();
|
|
}
|
|
}
|
|
|
|
var lastEnterTime;
|
|
function dragStart(event) {
|
|
lastEnterTime = event.timeStamp;
|
|
var row = event.currentTarget;
|
|
row.closest("table").querySelectorAll("thead tr").forEach((tr) => {
|
|
tr.toggleAttribute("hidden");
|
|
});
|
|
event.dataTransfer.setData("text/plain", row.getAttribute("data-drag-path"));
|
|
var rowRectangle = row.getBoundingClientRect();
|
|
event.dataTransfer.setDragImage(row, event.x - rowRectangle.left, event.y - rowRectangle.top);
|
|
event.dataTransfer.dropEffect = "move";
|
|
}
|
|
|
|
/*
|
|
* Drag tracking assumptions (based on FF 122.0 experience):
|
|
* * Enter/Leave events at the same timeStamp may not be logically ordered
|
|
* (e.g. E -> E -> L, not E -> L -> E),
|
|
* * not every Enter event has corresponding Leave event, especially during
|
|
* rapid pointer moves
|
|
* NOTE: sometimes Leave is not emitted when pointer goes fast over table
|
|
* and outside. This should probably be fixed in browser, than patched here.
|
|
*/
|
|
function dragEnter(event) {
|
|
//console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id);
|
|
dragLeave(event);
|
|
lastEnterTime = event.timeStamp;
|
|
const id = event.currentTarget.getAttribute("data-drop-id");
|
|
document.getElementById(id).classList.add("dropzone");
|
|
}
|
|
|
|
function dragOver(event) {
|
|
event.preventDefault();
|
|
}
|
|
|
|
function dragLeave(event) {
|
|
//console.log(event.timeStamp + " " + event.type + ": " + event.currentTarget.id);
|
|
// Leave has been accounted for by Enter at the same timestamp, processed earlier
|
|
if (event.timeStamp <= lastEnterTime) return;
|
|
event.currentTarget.closest("table").querySelectorAll(".dropzone").forEach((tr) => {
|
|
tr.classList.remove("dropzone");
|
|
})
|
|
}
|
|
|
|
function dragEnd(event) {
|
|
dragLeave(event);
|
|
event.currentTarget.closest("table").querySelectorAll("thead tr").forEach((tr) => {
|
|
tr.toggleAttribute("hidden");
|
|
});
|
|
}
|
|
|
|
function drop(event) {
|
|
event.preventDefault();
|
|
|
|
var params = new URLSearchParams();
|
|
var base_id = event.currentTarget.getAttribute("data-drop-id").split("_").pop();
|
|
params.append("unit[base_id]", base_id);
|
|
|
|
fetch(event.dataTransfer.getData("text/plain"), {
|
|
body: params,
|
|
headers: {
|
|
"Accept": "text/vnd.turbo-stream.html",
|
|
"X-CSRF-Token": document.head.querySelector("meta[name=csrf-token]").content,
|
|
"X-Requested-With": "XMLHttpRequest"
|
|
},
|
|
method: "POST"
|
|
})
|
|
.then(response => response.text())
|
|
.then(html => Turbo.renderStreamMessage(html))
|
|
}
|
|
<% end %>
|