switch to broadcast channel for page maangement
This commit is contained in:
Ross
@@ -4,14 +4,15 @@
|
||||
<details class="help-text">
|
||||
<summary>Instructions</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>Click on the 'Open' button to open the case in a new window/tab, this should be positioned on it's own window (you may have to detach the tab). Opening subsequent cases/series will replace the first case in the window.</p>
|
||||
<p>It is also possible to open a single series by clicking on the 'Open' button next to the indvidual series.</p>
|
||||
<p>Click on the 'Load' button to open the case in a new window/tab, this should be positioned on it's own window (you may have to detach the tab). Opening subsequent cases/series will replace the first case in the window.</p>
|
||||
<p>It is also possible to open a single series by clicking on the 'Load' button next to the indvidual series.</p>
|
||||
<p>Once opened the case details will be show on the right hand side of the page.</p>
|
||||
</details>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<h3>Cases</h3>
|
||||
<button id="open-viewer">Open Viewer</button>
|
||||
<ol id="" class="sortable">
|
||||
{% for case in cases %}
|
||||
|
||||
@@ -20,7 +21,7 @@
|
||||
<div class="case-item" data-title="{{case.title}}" data-case={{case.pk}} data-case-json='{{case.get_viva_details_json}}'>Case {{forloop.counter}}: {{case.title}}
|
||||
{% comment %} <button class="show-case no-padding" data-target="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Show</button> {% endcomment %}
|
||||
{% comment %} <button class="send-message no-padding" data-title="{{case.title}}" data-target="/ohif/viewer/dicomjson?url=https://www.penracourses.org.uk{% url 'atlas:case_dicom_json' case.pk %}">Open</button> {% endcomment %}
|
||||
<button class="open-case no-padding" data-target="{% url 'atlas:collection_viva_case' collection.pk forloop.counter0 %}" data-type="case">Open</button>
|
||||
<button class="open-case no-padding" data-target="{% url 'atlas:collection_viva_case' collection.pk forloop.counter0 %}" data-type="case">Load</button>
|
||||
<br />
|
||||
<div class="pre-whitespace multi-image-block">
|
||||
<details><summary>Series:</summary>
|
||||
@@ -34,7 +35,7 @@
|
||||
show
|
||||
</button> {% endcomment %}
|
||||
<button class="open-series no-padding text-secondary border-secondary" data-type="series" data-series={{forloop.counter}} data-case={{case.pk}} data-target="{% url 'atlas:collection_viva_series' collection.pk series.pk %}">
|
||||
open
|
||||
Load
|
||||
</button>
|
||||
<br>
|
||||
</span>
|
||||
@@ -70,7 +71,7 @@
|
||||
var win2 = false;
|
||||
|
||||
$(document).ready(function() {
|
||||
//const bc = new BroadcastChannel("test_channel");
|
||||
const bc = new BroadcastChannel("test_channel");
|
||||
console.log('ready')
|
||||
$('.show-collection, .show-case, .show-series').click(function() {
|
||||
var url = $(this).data('target');
|
||||
@@ -98,19 +99,23 @@
|
||||
} else {
|
||||
$('#current-case-series').text("Series: " + $(this).data('series'));
|
||||
}
|
||||
//bc.postMessage(url);
|
||||
if (win2 == false || win2.closed) {
|
||||
win2 = openSecondaryWindow(url);
|
||||
console.log('opened', win2)
|
||||
} else {
|
||||
win2.location.href = url
|
||||
}
|
||||
bc.postMessage({"type": "open", "url" : url});
|
||||
//if (win2 == false || win2.closed) {
|
||||
// win2 = openSecondaryWindow(url);
|
||||
// console.log('opened', win2)
|
||||
//} else {
|
||||
// win2.location.href = url
|
||||
//}
|
||||
//win2 = openSecondaryWindow(url);
|
||||
})
|
||||
$('.send-message').click(function() {
|
||||
var url = $(this).data('target');
|
||||
bc.postMessage(url);
|
||||
})
|
||||
$('#open-viewer').click(function() {
|
||||
openSecondaryWindow("{% url 'atlas:collection_viewer' %}");
|
||||
//bc.postMessage(url);
|
||||
})
|
||||
|
||||
});
|
||||
function openSecondaryWindow(url) {
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
console.log('ready');
|
||||
const bc = new BroadcastChannel("test_channel");
|
||||
bc.onmessage = (event) => {
|
||||
console.log("message received");
|
||||
console.log(event);
|
||||
};
|
||||
});
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Viewer</title>
|
||||
<style type="text/css">
|
||||
body, html
|
||||
{
|
||||
margin: 0; padding: 0; height: 100%; overflow: hidden;
|
||||
}
|
||||
|
||||
#viewer
|
||||
{
|
||||
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Awating load request</p>
|
||||
This page will display series when loaded from other pages.
|
||||
<iframe id="viewer" style="width: 100%; height: 100%; border: none; padding: 0px;" ></iframe>
|
||||
|
||||
<script type="text/javascript">
|
||||
var win2 = false;
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
document.title = "Case: {{current_case.title}}";
|
||||
console.log('ready');
|
||||
const bc = new BroadcastChannel("test_channel");
|
||||
bc.onmessage = (event) => {
|
||||
console.log("message received");
|
||||
console.log(event);
|
||||
if (event.data.type == "open") {
|
||||
document.getElementById("viewer").src = event.url;
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -56,6 +56,7 @@ urlpatterns = [
|
||||
views.CaseCollectionUpdate.as_view(),
|
||||
name="exam_update",
|
||||
),
|
||||
path("collection/viewer", TemplateView.as_view(template_name="atlas/viewer.html"), name="collection_viewer"),
|
||||
path("collection/<int:pk>", views.collection_detail, name="collection_detail"),
|
||||
path("collection/<int:pk>/viva", views.collection_viva, name="collection_viva"),
|
||||
path("collection/<int:pk>/viva/<int:case_number>", views.collection_viva_case, name="collection_viva_case"),
|
||||
|
||||
Reference in New Issue
Block a user