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

Improved navigation and clarity in details view.

Browse Source
This commit is contained in:
lwark
2024-09-13 15:23:11 -05:00
parent 744394f236
commit c7d83401e7
15 changed files with 270 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/submissions/templates/basicsample_details.html
View File

@@ -1,65 +1,37 @@
<!doctype html>
{% extends "details.html" %}
<html>
<head>
{% block head %}
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
font-size: large;
}
</style>
<title>Sample Details for {{ sample['Submitter ID'] }}</title>
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
{{ super() }}
<title>Sample Details for {{ sample['submitter_id'] }}</title>
{% endblock %}
</head>
<body>
{% block body %}
<h2><u>Sample Details for {{ sample['Submitter ID'] }}</u></h2>
<h2><u>Sample Details for {{ sample['submitter_id'] }}</u></h2>
{{ super() }}
<p>{% for key, value in sample.items() if key not in sample['excluded'] %}
&nbsp;&nbsp;&nbsp;&nbsp;<b>{{ key | replace("_", " ") | title }}: </b>{{ value }}<br>
{% endfor %}</p>
{% if sample['submissions'] %}<h2>Submissions:</h2>
{% for submission in sample['submissions'] %}
<p id="{{ submission['plate_name'] }}"><b>{{ submission['plate_name'] }}:</b> {{ submission['well'] }}</p>
<p><b><a class="data-link" id="{{ submission['plate_name'] }}">{{ submission['plate_name'] }}:</a></b> {{ submission['well'] }}</p>
{% endfor %}
{% endif %}
{% endblock %}
</body>
<script>
var backend;
new QWebChannel(qt.webChannelTransport, function (channel) {
backend = channel.objects.backend;
});
{% block script %}
{{ super() }}
{% for submission in sample['submissions'] %}
document.getElementById("{{ submission['plate_name'] }}").addEventListener("dblclick", function(){
document.getElementById("{{ submission['plate_name'] }}").addEventListener("click", function(){
backend.submission_details("{{ submission['plate_name'] }}");
});
{% endfor %}
document.addEventListener('DOMContentLoaded', function() {
backend.activate_export(false);
}, false);
{% endblock %}
</script>
</html>

41
src/submissions/templates/basicsubmission_details.html
View File

@@ -1,26 +1,25 @@
<!doctype html>
{% extends "details.html" %}
<html>
<head>
{% block head %}
{% if css %}
<style>
{{ css }}
</style>
{% endif %}
<title>Submission Details for {{ sub['Plate Number'] }}</title>
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
{{ super() }}
<title>Submission Details for {{ sub['plate_number'] }}</title>
{% endblock %}
</head>
<body>
{% block body %}
<h2><u>Submission Details for {{ sub['plate_number'] }}</u></h2>&nbsp;&nbsp;&nbsp;{% if sub['barcode'] %}<img align='right' height="30px" width="120px" src="data:image/jpeg;base64,{{ sub['barcode'] | safe }}">{% endif %}
{{ super() }}
<p>{% for key, value in sub.items() if key not in sub['excluded'] %}
&nbsp;&nbsp;&nbsp;&nbsp;<b>{{ key | replace("_", " ") | title | replace("Pcr", "PCR") }}: </b>{% if key=='cost' %}{% if sub['cost'] %} {{ "${:,.2f}".format(value) }}{% endif %}{% else %}{{ value }}{% endif %}<br>
{% endfor %}</p>
<h3><u>Reagents:</u></h3>
<p>{% for item in sub['reagents'] %}
&nbsp;&nbsp;&nbsp;&nbsp;<b>{{ item['role'] }}</b>: {{ item['lot'] }} (EXP: {{ item['expiry'] }})<br>
&nbsp;&nbsp;&nbsp;&nbsp;<b>{{ item['role'] }}</b>: <a class="data-link" id="{{ item['lot'] }}">{{ item['lot'] }} (EXP: {{ item['expiry'] }})</a><br>
{% endfor %}</p>
{% if sub['equipment'] %}
<h3><u>Equipment:</u></h3>
<p>{% for item in sub['equipment'] %}
@@ -36,7 +35,7 @@
{% if sub['samples'] %}
<h3><u>Samples:</u></h3>
<p>{% for item in sub['samples'] %}
&nbsp;&nbsp;&nbsp;&nbsp;<b>{{ item['well'] }}:</b> {% if item['organism'] %} {{ item['name'] }} - ({{ item['organism']|replace('\n\t', '<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;') }}){% else %} {{ item['name']|replace('\n\t', '<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;') }}{% endif %}<br>
&nbsp;&nbsp;&nbsp;&nbsp;<b>{{ item['well'] }}:</b><a class="data-link" id="{{ item['submitter_id'] }}_alpha">{% if item['organism'] %} {{ item['name'] }} - ({{ item['organism']|replace('\n\t', '<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;') }}){% else %} {{ item['name']|replace('\n\t', '<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;') }}{% endif %}</a><br>
{% endfor %}</p>
{% endif %}
@@ -76,17 +75,29 @@
<br>
</body>
<script>
var backend;
new QWebChannel(qt.webChannelTransport, function (channel) {
backend = channel.objects.backend;
});
{% block script %}
{{ super() }}
{% for sample in sub['samples'] %}
document.getElementById("{{ sample['submitter_id'] }}").addEventListener("dblclick", function(){
document.getElementById("{{ sample['submitter_id'] }}").addEventListener("click", function(){
backend.sample_details("{{ sample['submitter_id'] }}");
});
{% endfor %}
{% for sample in sub['samples'] %}
document.getElementById("{{ sample['submitter_id'] }}_alpha").addEventListener("click", function(){
backend.sample_details("{{ sample['submitter_id'] }}");
});
{% endfor %}
{% for reagent in sub['reagents'] %}
document.getElementById("{{ reagent['lot'] }}").addEventListener("click", function(){
backend.reagent_details("{{ reagent['lot'] }}", "{{ sub['extraction_kit'] }}");
});
{% endfor %}
document.getElementById("sign_btn").addEventListener("click", function(){
backend.sign_off("{{ sub['plate_number'] }}");
})
document.addEventListener('DOMContentLoaded', function() {
backend.activate_export(true);
}, false);
{% endblock %}
</script>
</html>

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

@@ -27,3 +27,15 @@
visibility: visible;
font-size: large;
}
.data-link {
color: blue;
text-decoration: underline;
text-decoration-color: blue;
}
.data-link:hover {
color: #ff33ff;
text-decoration-color: #ff33ff;
cursor: pointer;
}

28
src/submissions/templates/details.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta charset="UTF-8">
{% if css %}
<style>
{{ css }}
</style>
{% endif %}
<script src="qrc:///qtwebchannel/qwebchannel.js"></script>
{% endblock %}
</head>
<body>
{% block body %}
<!--<button type="button" id="back_btn">Back</button>-->
{% endblock %}
</body>
<script>
{% block script %}
var backend;
new QWebChannel(qt.webChannelTransport, function (channel) {
backend = channel.objects.backend;
});
{% endblock %}
</script>
</html>

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

@@ -1,6 +1,6 @@
<div class="gallery" style="display: grid;grid-template-columns: repeat({{ PLATE_COLUMNS }}, 7.5vw);grid-template-rows: repeat({{ PLATE_ROWS }}, 7.5vw);grid-gap: 2px;">
{% for sample in samples %}
<div class="well" id="{{sample['submitter_id']}}" style="background-color: {{sample['background_color']}};
<div class="well data-link" id="{{sample['submitter_id']}}" style="background-color: {{sample['background_color']}};
border: 1px solid #000;
padding: 20px;
grid-column-start: {{sample['column']}};

35
src/submissions/templates/reagent_details.html Normal file
View File

@@ -0,0 +1,35 @@
{% extends "details.html" %}
<head>
{% block head %}
{{ super() }}
<title>Reagent Details for {{ reagent['name'] }} - {{ reagent['lot'] }}</title>
{% endblock %}
</head>
<body>
{% block body %}
<h2><u>Reagent Details for {{ reagent['name'] }} - {{ reagent['lot'] }}</u></h2>
{{ super() }}
<p>{% for key, value in reagent.items() if key not in reagent['excluded'] %}
&nbsp;&nbsp;&nbsp;&nbsp;<b>{{ key | replace("_", " ") | title }}: </b>{{ value }}<br>
{% endfor %}</p>
{% if reagent['submissions'] %}<h2>Submissions:</h2>
{% for submission in reagent['submissions'] %}
<p><b><a class="data-link" id="{{ submission }}">{{ submission }}:</a></b> {{ reagent['role'] }}</p>
{% endfor %}
{% endif %}
{% endblock %}
</body>
<script>
{% block script %}
{{ super() }}
{% for submission in reagent['submissions'] %}
document.getElementById("{{ submission }}").addEventListener("click", function(){
backend.submission_details("{{ submission }}");
});
{% endfor %}
document.addEventListener('DOMContentLoaded', function() {
backend.activate_export(false);
}, false);
{% endblock %}
</script>
</html>