switch to broadcast channel for page maangement

atlas/templates/atlas/collection_viva.html

@@ -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>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 'Open' button next to the indvidual series.</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}} &nbsp;
                                 {% 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);
+                bc.postMessage({"type": "open", "url" : url});
-                if (win2 == false || win2.closed) {
+                //if (win2 == false || win2.closed) {
-                    win2 = openSecondaryWindow(url);
+                //    win2 = openSecondaryWindow(url);
-                    console.log('opened', win2)
+                //    console.log('opened', win2)
-                } else {
+                //} else {
-                    win2.location.href = url
+                //    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) {

atlas/templates/atlas/collection_viva_case.html

@@ -27,6 +27,7 @@
             console.log('ready');
             const bc = new BroadcastChannel("test_channel");
             bc.onmessage = (event) => {
+                console.log("message received");
                 console.log(event);
             };
         });

atlas/templates/atlas/viewer.html

@@ -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>

atlas/urls.py

@@ -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"),