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

basic procedure creation working

Browse Source
This commit is contained in:
lwark
2025-05-28 14:26:12 -05:00
parent 4e1e06bb5e
commit fef964fba0
7 changed files with 319 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -84,3 +84,29 @@ div.gallery {
width: 100%;
object-fit: contain;
}
.plate {
display: inline-grid;
grid-auto-flow: column;
place-content: center center;
grid-gap: 2px;
}
.well {
border: 1px solid #000;
padding: 20px;
display: flex;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
cursor: move;
}
.well:hover {
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.5);
}
.grid-item p {
max-width: 100%;
border-radius: 8px;
}

22
src/submissions/templates/plate_map.html
View File

@@ -1,17 +1,15 @@
<div class="gallery" style="display: grid;grid-template-columns: repeat({{ plate_columns }}, {{ vw }}vw);grid-template-rows: repeat({{ plate_rows }}, {{ vw }}vw);grid-gap: 2px;">
<div class="plate" id="plate-container" style="grid-template-columns: repeat({{ plate_columns }}, {{ vw }}vw);grid-template-rows: repeat({{ plate_rows }}, {{ vw }}vw);">
{% for sample in samples %}
<div class="well data-link sample" id="{{sample['submitter_id']}}" style="background-color: {{ sample['background_color'] }};
border: 1px solid #000;
padding: 20px;
grid-column-start: {{sample['column']}};
<div class="well" draggable="true" id="sample_{{ sample['submission_rank'] }}" 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']}};
display: flex;
">
<div class="tooltip" style="font-size: 0.5em; text-align: center; word-wrap: break-word;">{{ sample['name'] }}
<span class="tooltiptext">{{ sample['tooltip'] }}</span>
</div>
grid-row-end: {{sample['row']}};-->
</div>
{% endfor %}
</div>
</div>

124
src/submissions/templates/procedure_creation.html Normal file
View File

@@ -0,0 +1,124 @@
{% extends "details.html" %}
<html>
<head>
{% block head %}
{{ super() }}
<title> New {{ proceduretype['name'] }} for {{ run['plate_number'] }}</title>
{% endblock %}
</head>
<!-- Is this working? -->
<body>
{% block body %}
<h1>New {{ proceduretype['name'] }} for {{ run['plate_number'] }}</h1><br><br>
<div class="procedure_creation_leftright">
<div class="left">
<form>
<label for="technician">Technician:</label><br>
<input type="text" class="form_text" id="technician" name="technician" width="100%" value="{{ procedure['technician']['value'] }}" background-color="{{ procedure['technician']['colour'] }}"><br><br>
<label for="repeat">Repeat:</label>
<input type="checkbox" class="form_check" id="repeat" name="repeat" value="{{ procedure['repeat'] }}"><br><br>
<label>Kit Type:</label><br>
<select class="dropdown" id="kittype" background-colour="{{ procedure['kittype']['colour'] }}">
{% for kittype in procedure['possible_kits'] %}
<option value="{{ kittype }}">{{ kittype }}</option>
{% endfor %}
</select><br>
{% if procedure['reagentrole'] %}
<br><hr><br>
{% for key, value in procedure['reagentrole'].items() %}
<label for="{{ key }}">{{ key }}:</label><br>
<select class="reagentrole dropdown" id="{{ key }}" name="{{ reagentrole }}"><br>
{% for reagent in value %}
<option value="{{ reagent }}">{{ reagent }}</option>
{% endfor %}
</select>
{% endfor %}
{% endif %}
</form>
</div>
<div class="right">
{% if plate_map %}
<h1>Plate map:</h1>
{{ plate_map }}
{% endif %}
</div>
</div>
{% endblock %}
</body>
<script>
{% block script %}
{{ super() }}
document.getElementById("kittype").addEventListener("change", function() {
backend.update_kit(this.value);
})
var formchecks = document.getElementsByClassName('form_check');
for(let i = 0; i < formchecks.length; i++) {
formchecks[i].addEventListener("change", function() {
backend.check_toggle(formchecks[i].id, formchecks[i].checked);
})
};
var formtexts = document.getElementsByClassName('form_text');
for(let i = 0; i < formtexts.length; i++) {
formtexts[i].addEventListener("input", function() {
backend.text_changed(formtexts[i].id, formtexts[i].value);
})
};
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 End
gridContainer.addEventListener("dragend", (e) => {
e.target.style.opacity = "1";
draggedItem = null;
});
//handle dragging ove grid items
gridContainer.addEventListener("dragover", (e) => {
e.preventDefault();
});
//Handle Drop
gridContainer.addEventListener("drop", (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);
} else {
backend.log_drag(draggedIndex.toString(), targetIndex.toString() + " Greater");
gridContainer.insertBefore(draggedItem, targetItem);
}
output = [];
fullGrid = [...gridContainer.children];
fullGrid.forEach(function(item, index) {
output.push({item: item, index: index})
});
backend.replow(output);
}
});
{% endblock %}
</script>
</html>