landon/Submissions-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Attempt to update treeview.

Browse Source
This commit is contained in:
lwark
2025-06-04 07:18:21 -05:00
parent 26292e275c
commit db0b65b07b
11 changed files with 302 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/submissions/templates/css/styles.css
View File

@@ -85,6 +85,27 @@ div.gallery {
object-fit: contain;
}
.context-menu {
display: none;
flex-direction: column;
align-items: flex-start;
width: 150px;
margin: 32px;
position: absolute;
}
.context-menu--active {
display: block;
z-index: 10;
background-color: white;
border: 2px solid black;
padding: 5px;
}
.plate {
display: inline-grid;
grid-auto-flow: column;
@@ -111,15 +132,17 @@ div.gallery {
border-radius: 8px;
}
.context-menu {
display: none;
position: absolute;
z-index: 10;
background-color: rgba(229, 231, 228, 0.7);
border-radius: 2px;
border-color: black;
ul.no-bullets {
list-style-type: none; /* Remove bullets */
padding: 0; /* Remove padding */
margin: 0; /* Remove margins */
}
.context-menu--active {
display: block;
.negativecontrol {
background-color: cyan;
}
.positivecontrol {
background-color: pink;
}

41
src/submissions/templates/js/context_menu.js
View File

@@ -12,7 +12,7 @@
// menuIndex = eval(event.target.parentNode.id.slice(-1));
// document.querySelectorAll(".multiSelect")[menuIndex].style.transform =
// "translateX(-100%)";
// // document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)";
// document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath = "polygon(0 0, 0 0, 0 100%, 0% 100%)";
// document.querySelectorAll(".multiSelect")[menuIndex].style.clipPath =
// "polygon(100% 0, 100% 0, 100% 100%, 100% 100%)";
// document.querySelectorAll(".multiSelect")[menuIndex + 1].style.transform =
@@ -116,7 +116,7 @@ function menuItemListener( link ) {
insertSample(contextIndex, task_id);
break;
case "InsertControl":
insertControl(contextIndex);
insertControl(taskItemInContext);
break;
case "RemoveSample":
removeSample(contextIndex);
@@ -125,6 +125,7 @@ function menuItemListener( link ) {
backend.log("default");
break;
}
rearrange_plate();
toggleMenuOff();
}
@@ -149,7 +150,7 @@ var clickCoordsX;
var clickCoordsY;
var menu = document.getElementById(contextMenuClassName);
var menuItems = menu.getElementsByClassName(contextMenuItemClassName);
var menuHeader = document.getElementById("menu-header");
const menuHeader = document.getElementById("menu-header");
var menuState = 0;
var menuWidth;
var menuHeight;
@@ -158,6 +159,7 @@ var menuPositionX;
var menuPositionY;
var windowWidth;
var windowHeight;
/**
* Initialise our application's code.
*/
@@ -192,6 +194,7 @@ function contextListener() {
function clickListener() {
document.addEventListener( "click", function(e) {
var clickeElIsLink = clickInsideElement( e, contextMenuLinkClassName );
backend.log(e.target.id)
if ( clickeElIsLink ) {
e.preventDefault();
menuItemListener( clickeElIsLink );
@@ -241,17 +244,39 @@ function insertSample( index ) {
backend.log( "Index - " + index + ", InsertSample");
}
function insertControl( index ) {
backend.log( "Index - " + index + ", InsertEN");
function insertControl( targetItem ) {
const gridC = document.getElementById("plate-container");
var existing_ens = document.getElementsByClassName("EN");
backend.log(existing_ens.length);
var en_num = existing_ens.length + 1;
const en_name = "EN" + en_num + "-" + rsl_plate_num;
var elem = document.createElement("div");
elem.setAttribute("id", en_name);
elem.setAttribute("class", "well negativecontrol EN");
elem.setAttribute("draggable", "true");
elem.innerHTML = '<p style="font-size: 0.7em; text-align: center; word-wrap: break-word;">' + en_name + '</p>'
gridC.insertBefore(elem, targetItem.nextSibling);
targetItem.remove();
}
function removeSample( index ) {
backend.log( "Index - " + index + ", RemoveSample");
function removeSample( targetItem ) {
const gridC = document.getElementById("plate-container");
var existing_wells = document.getElementsByClassName("well");
var en_num = existing_wells.length + 1;
var well_name = "blank_" + en_num;
var elem = document.createElement("div");
elem.setAttribute("id", well_name);
elem.setAttribute("class", "well");
elem.setAttribute("draggable", "true");
elem.innerHTML = '<p style="font-size: 0.7em; text-align: center; word-wrap: break-word;"></p>'
gridC.insertBefore(elem, targetItem.nextSibling);
targetItem.remove();
}
/**
* Run the app.
*/

88
src/submissions/templates/js/grid_drag.js
View File

@@ -1,51 +1,55 @@
const gridContainer = document.getElementById("plate-container");
let draggedItem = null;
const gridContainer = document.getElementById("plate-container");
let draggedItem = null;
//Handle Drag start
gridContainer.addEventListener("dragstart", (e) => {
draggedItem = e.target;
draggedItem.style.opacity = "0.5";
});
//Handle Drag start
gridContainer.addEventListener("dragstart", (e) => {
//Handle Drag End
gridContainer.addEventListener("dragend", (e) => {
e.target.style.opacity = "1";
draggedItem = null;
});
draggedItem = e.target;
draggedItem.style.opacity = "0.5";
});
//handle dragging ove grid items
gridContainer.addEventListener("dragover", (e) => {
e.preventDefault();
});
//Handle Drag End
gridContainer.addEventListener("dragend", (e) => {
e.target.style.opacity = "1";
draggedItem = null;
});
//Handle Drop
gridContainer.addEventListener("drop", (e) => {
e.preventDefault();
//handle dragging ove grid items
gridContainer.addEventListener("dragover", (e) => {
e.preventDefault();
});
const targetItem = e.target;
if (
targetItem &&
targetItem !== draggedItem &&
targetItem.classList.contains("well")
) {
const draggedIndex = [...gridContainer.children].indexOf(draggedItem);
const targetIndex = [...gridContainer.children].indexOf(targetItem);
if (draggedIndex < targetIndex) {
backend.log_drag(draggedIndex.toString(), targetIndex.toString() + " Lesser");
gridContainer.insertBefore(draggedItem, targetItem.nextSibling);
//Handle Drop
gridContainer.addEventListener("drop", (e) => {
e.preventDefault();
} else {
backend.log_drag(draggedIndex.toString(), targetIndex.toString() + " Greater");
gridContainer.insertBefore(draggedItem, targetItem);
const targetItem = e.target;
}
output = [];
fullGrid = [...gridContainer.children];
fullGrid.forEach(function(item, index) {
output.push({sample_id: item.id, index: index + 1})
});
backend.rearrange_plate(output);
}
});
if (
targetItem &&
targetItem !== draggedItem //&&
//targetItem.classList.contains("well")
) {
backend.log(targetItem.id);
const draggedIndex = [...gridContainer.children].indexOf(draggedItem);
const targetIndex = [...gridContainer.children].indexOf(targetItem);
if (draggedIndex < targetIndex) {
backend.log(draggedIndex.toString() + " " + targetIndex.toString() + " Lesser");
gridContainer.insertBefore(draggedItem, targetItem.nextSibling);
} else {
backend.log(draggedIndex.toString() + " " + targetIndex.toString() + " Greater");
gridContainer.insertBefore(draggedItem, targetItem);
}
// output = [];
// fullGrid = [...gridContainer.children];
// fullGrid.forEach(function(item, index) {
// output.push({sample_id: item.id, index: index + 1})
// });
// backend.rearrange_plate(output);
rearrange_plate();
}
});

11
src/submissions/templates/procedure_creation.html
View File

@@ -50,6 +50,17 @@
</body>
{% block script %}
<script>
var rsl_plate_num = "{{ run['plate_number'] }}";
function rearrange_plate() {
output = [];
fullGrid = [...gridContainer.children];
fullGrid.forEach(function(item, index) {
output.push({sample_id: item.id, index: index + 1})
});
backend.rearrange_plate(output);
}
</script>
{{ super() }}
{% endblock %}

4
src/submissions/templates/support/context_menu.html
View File

@@ -1,6 +1,6 @@
<nav class="context-menu" id="context-menu">
<nav class="flexDiv context-menu" id="context-menu">
<h4 id="menu-header"></h4>
<ul class="context-menu__items">
<ul class="context-menu__items no-bullets">
<li class="context-menu__item">
<a href="#" class="context-menu__link" data-action="InsertSample">
<i class="fa fa-eye"></i> Insert Sample

8
src/submissions/templates/support/plate_map.html
View File

@@ -2,14 +2,6 @@
{% for sample in samples %}
<div class="well" draggable="true" id="{{ sample['well_id'] }}" style="background-color: {{ sample['background_color'] }};">
<p style="font-size: 0.7em; text-align: center; word-wrap: break-word;">{{ sample['sample_id'] }}</p>
<!-- <div class="tooltip" style="font-size: 0.5em; text-align: center; word-wrap: break-word;">{{ sample['sample_id'] }}-->
<!-- <span class="tooltiptext">{{ sample['tooltip'] }}</span>-->
<!-- </div>--
grid-column-start: {{sample['column']}};
grid-column-end: {{sample['column']}};
grid-row-start: {{sample['row']}};
grid-row-end: {{sample['row']}};-->
</div>
{% endfor %}
</div>