ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor collection detail and viva templates to improve link handling and enhance user instructions with modal display

Browse Source
This commit is contained in:
Ross
2025-08-11 10:55:32 +01:00
parent eb194aa1e6
commit bc5749a308
3 changed files with 79 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/collection_detail.html
+15 -12
View File
@@ -15,6 +15,21 @@
Self review: {{collection.self_review}}<br /> Self review: {{collection.self_review}}<br />
Open access: {{collection.open_access}}<br /> Open access: {{collection.open_access}}<br />
</div> </div>
{% if collection.collection_type == "VIV" %}
<p><a href='{% url "atlas:collection_viva" collection.pk %}'><button class="btn btn-primary">Start Viva</button></a>
{% else %}
<p>This collection will be available to view/take <a href='{{collection.get_take_url}}' id="take-url">here</a>{% if not collection.active %} (when active){% endif %} <button
_="on click
writeText(#take-url's href) on navigator.clipboard
put 'copied url!' into me
wait 1s
put 'copy url' into me"
class="btn btn-sm">copy link</button>
<p>Review collection <a href='{% url "atlas:collection_viva" collection.pk %}'>here</a>
{% endif %}
<h3>Cases</h3> <h3>Cases</h3>
<ol id="full-question-list" class="sortable"> <ol id="full-question-list" class="sortable">
{% for casedetail in casesdetails %} {% for casedetail in casesdetails %}
@@ -50,18 +65,6 @@
{% if collection.collection_type == "VIV" %}
<p>View as a viva collection <a href='{% url "atlas:collection_viva" collection.pk %}'>here</a>
{% else %}
<p>This collection will be available to view/take <a href='{{collection.get_take_url}}' id="take-url">here</a>{% if not collection.active %} (when active){% endif %} <button
_="on click
writeText(#take-url's href) on navigator.clipboard
put 'copied url!' into me
wait 1s
put 'copy url' into me"
class="btn btn-sm">copy link</button>
<p>Review collection <a href='{% url "atlas:collection_viva" collection.pk %}'>here</a>
{% endif %}
{% if can_edit %} {% if can_edit %}
<p><button id='button-edit-order' title='click and drag questions to change order' data-posturl="{% url 'atlas:exam_json_edit' pk=collection.pk %}">Edit case order / Delete cases</button></p> <p><button id='button-edit-order' title='click and drag questions to change order' data-posturl="{% url 'atlas:exam_json_edit' pk=collection.pk %}">Edit case order / Delete cases</button></p>
atlas/templates/atlas/collection_viva.html
+6 -2
View File
@@ -2,7 +2,7 @@
{% block content %} {% block content %}
<details class="help-text"> <details class="help-text">
<summary title="Click to view instructions">Instructions</summary> <summary><i class="bi bi-info-circle"></i> Help</summary>
<p>This set up is designed to allow you to project/share cases in a seperate window whilst controlling/tracking their display from this page.</p> <p>This set up is designed to allow you to project/share cases in a seperate window whilst controlling/tracking their display from this page.</p>
<p>First you will need to open the linked viewer window by clicking the 'Open Viewer' button. This will open a new window/tab with the viewer in it. You will probably need to detach this from your current window.</p> <p>First you will need to open the linked viewer window by clicking the 'Open Viewer' button. This will open a new window/tab with the viewer in it. You will probably need to detach this from your current window.</p>
<p>If you are sharing the window you can maximise the screen area by hiding the tab/bookmark bar and the address bar. In Microsoft Edge this can be done by installing as an app, in Chrome you can use an extension such as <a href='https://chromewebstore.google.com/detail/ncppfjladdkdaemaghochfikpmghbcpc'>Open-as-Popup</a>.</p> <p>If you are sharing the window you can maximise the screen area by hiding the tab/bookmark bar and the address bar. In Microsoft Edge this can be done by installing as an app, in Chrome you can use an extension such as <a href='https://chromewebstore.google.com/detail/ncppfjladdkdaemaghochfikpmghbcpc'>Open-as-Popup</a>.</p>
@@ -294,7 +294,11 @@
}); });
function openSecondaryWindow(url) { function openSecondaryWindow(url) {
//return win2 = window.open(url,'secondary','width=300,height=100'); //return win2 = window.open(url,'secondary','width=300,height=100');
return win2 = window.open(url,'secondary'); return win2 = window.open(
url,
'secondary',
'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=1200,height=800'
);
} }
</script> </script>
atlas/templates/atlas/viewer_local.html
+57 -11
View File
@@ -1,27 +1,72 @@
{% load static %} {% load static %}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Viewer</title> <title>Viewer</title>
<style type="text/css"> <style type="text/css">
body, html body, html {
{
margin: 0; padding: 0; height: 100%; overflow: hidden; margin: 0; padding: 0; height: 100%; overflow: hidden;
} }
#viewer {
#viewer
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px; position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
} }
/* Modal styles */
.center-modal {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
width: 100vw; height: 100vh;
background: rgba(20,20,30,0.96);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.center-modal-content {
background: #23232b;
color: #eee;
padding: 2em 2.5em;
border-radius: 12px;
box-shadow: 0 4px 32px rgba(0,0,0,0.4);
max-width: 90vw;
max-height: 80vh;
text-align: center;
font-size: 1.2em;
}
.highlight-action {
display: inline-block;
background: #0d6efd;
color: #fff;
font-weight: bold;
padding: 0.4em 1em;
border-radius: 6px;
margin: 0.7em 0 1.2em 0;
font-size: 1.3em;
box-shadow: 0 2px 8px rgba(13,110,253,0.15);
letter-spacing: 0.03em;
}
.center-modal-content ul {
color: #bdbdbd;
}
.center-modal-content h2 {
color: #fff;
}
</style> </style>
<script src="{% static 'dv3d/index.js' %}" type="module" defer="defer" type="module"></script> <script src="{% static 'dv3d/index.js' %}" type="module" defer="defer"></script>
</head> </head>
<body> <body>
<div id="awating-load"> <!-- Centered modal for instructions -->
<p>Awating load request</p> <div id="awaiting-modal" class="center-modal">
This page will display series when loaded from other pages. <div class="center-modal-content">
<span class="highlight-action">Share this screen</span>
<h2>Awaiting Load Request</h2>
<p>This page will display a DICOM series when loaded from another page.</p>
<ul style="text-align:left; margin: 1em auto; max-width: 30em;">
<li>Return to the previous page and select a series to view.</li>
<li>This viewer will update automatically when a series is loaded.</li>
<li>Keep this tab open to receive data.</li>
</ul>
</div>
</div> </div>
<div id="root" class="dicom-viewer-root" <div id="root" class="dicom-viewer-root"
style="box-sizing: border-box; background: #222; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh;" style="box-sizing: border-box; background: #222; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh;"
@@ -39,7 +84,8 @@
console.log("message received"); console.log("message received");
console.log(event); console.log(event);
if (event.data.type == "open") { if (event.data.type == "open") {
document.getElementById("awating-load").style.display = "none"; // Hide modal when data is loaded
document.getElementById("awaiting-modal").style.display = "none";
document.getElementById("root").dataset.images = event.data.images; document.getElementById("root").dataset.images = event.data.images;
if ( if (