remove the multiuser sync support
This commit is contained in:
Ross
@@ -146,9 +146,8 @@
|
||||
<a class="nav-link d-inline" title="Additional Features"><i class="bi bi-three-dots me-1" aria-hidden="true"></i>Other</a>
|
||||
<a class="nav-link d-inline dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<ul class="dropdown-menu">
|
||||
<a class="dropdown-item" href="{% url 'atlas:question_schema_overview' %}" title="View and edit question schemas"><i class="bi bi-journal-text me-1" aria-hidden="true"></i>Question Schemas</a>
|
||||
<a class="dropdown-item" href="{% url 'atlas:multiuser_dashboard' %}" title="Multiuser case sync and review"><i class="bi bi-people me-1" aria-hidden="true"></i>Multiuser Sync</a>
|
||||
<a class="dropdown-item" href="{% url 'atlas:help' %}" title="View the atlas help pages"><i class="bi bi-question-circle me-1" aria-hidden="true"></i>Help</a>
|
||||
<a class="dropdown-item" href="{% url 'atlas:question_schema_overview' %}" title="View and edit question schemas"><i class="bi bi-journal-text me-1" aria-hidden="true"></i>Question Schemas</a>
|
||||
<a class="dropdown-item" href="{% url 'atlas:help' %}" title="View the atlas help pages"><i class="bi bi-question-circle me-1" aria-hidden="true"></i>Help</a>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
@@ -545,9 +545,6 @@
|
||||
style="box-sizing: border-box; background: #222; width: 100%; height: 600px;"
|
||||
data-auto-cache-stack="false"
|
||||
data-named-stacks='{{case.get_case_named_stacks}}'
|
||||
data-multiuser-room="case_{{ case.pk }}"
|
||||
data-username="{{ request.user.username }}"
|
||||
data-is-staff="{% if request.user.is_staff %}true{% else %}false{% endif %}"
|
||||
></div>
|
||||
</details>
|
||||
<details class="series-panel" id="case-series-panel" open>
|
||||
|
||||
@@ -137,13 +137,10 @@
|
||||
<div id="viewer-moveable-home">
|
||||
<div id="viewer-moveable">
|
||||
<div id="viewer-container" class="viewer-resizable-container">
|
||||
<div id="main_viewer" class="dicom-viewer-root viewer-frame-standard"
|
||||
data-auto-cache-stack="false"
|
||||
data-named-stacks='{{ named_stacks_json }}'
|
||||
data-multiuser-room="case_{{ case.pk }}"
|
||||
data-username="{{ request.user.username }}"
|
||||
data-is-staff="{% if request.user.is_staff %}true{% else %}false{% endif %}"
|
||||
></div>
|
||||
<div id="main_viewer" class="dicom-viewer-root viewer-frame-standard"
|
||||
data-auto-cache-stack="false"
|
||||
data-named-stacks='{{ named_stacks_json }}'
|
||||
></div>
|
||||
</div>
|
||||
<div id="viewer-resize-handle" class="viewer-resize-handle" title="Drag to resize viewer">
|
||||
<div class="viewer-resize-grip-inner"></div>
|
||||
|
||||
@@ -1,152 +0,0 @@
|
||||
{% extends 'atlas/base.html' %}
|
||||
|
||||
{% block title %}
|
||||
Multiuser Sync Portal - Atlas
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container py-4">
|
||||
<div class="row mb-4 align-items-center">
|
||||
<div class="col">
|
||||
<h1 class="h3 mb-1"><i class="bi bi-people-fill text-primary me-2"></i>Multiuser DICOM Portal</h1>
|
||||
<p class="text-muted">Create or join real-time collaborative review sessions with synchronized DICOM viewports.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- Sidebar: Start a new session -->
|
||||
{% if request.user.is_staff %}
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="card shadow-sm border-secondary">
|
||||
<div class="card-header bg-dark text-white fw-bold">
|
||||
<i class="bi bi-plus-circle me-1"></i> Start New Session
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="{% url 'atlas:multiuser_create_session' %}">
|
||||
{% csrf_token %}
|
||||
<div class="mb-3">
|
||||
<label for="sessionName" class="form-label">Session Name / Topic (Optional)</label>
|
||||
<input type="text" class="form-control bg-dark text-white border-secondary" id="sessionName" name="name" placeholder="e.g. Case Review Cohort A" max_length="255">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">
|
||||
<i class="bi bi-play-fill me-1"></i> Start Session
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Main content: Sessions list -->
|
||||
<div class="{% if request.user.is_staff %}col-md-8{% else %}col-12{% endif %}">
|
||||
{% if request.user.is_staff %}
|
||||
<!-- My Sessions -->
|
||||
<div class="card shadow-sm mb-4 bg-dark text-white border-secondary">
|
||||
<div class="card-header bg-secondary text-white fw-bold">
|
||||
<i class="bi bi-person-fill-check me-1"></i> Sessions You Managed
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
{% if my_sessions %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-dark table-striped table-hover mb-0 align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Active Case</th>
|
||||
<th>Created At</th>
|
||||
<th class="text-end">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for session in my_sessions %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong class="text-info">{{ session.name|default:"Unnamed Session" }}</strong>
|
||||
<br>
|
||||
<small class="text-muted font-monospace">{{ session.id }}</small>
|
||||
</td>
|
||||
<td>
|
||||
{% if session.active_case %}
|
||||
<span class="badge bg-success">{{ session.active_case.title|default:"Case Loaded" }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">No case active</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ session.created_at|date:"d M Y, H:i" }}</td>
|
||||
<td class="text-end">
|
||||
<a href="{% url 'atlas:multiuser_session_detail' session_id=session.id %}" class="btn btn-outline-info btn-sm">
|
||||
Enter Workspace <i class="bi bi-arrow-right-short"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="p-4 text-center text-muted">
|
||||
<i class="bi bi-inbox-fill fs-2 mb-2 d-block"></i>
|
||||
You haven't created any sessions yet.
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Active public sessions -->
|
||||
<div class="card shadow-sm bg-dark text-white border-secondary">
|
||||
<div class="card-header bg-secondary text-white fw-bold">
|
||||
<i class="bi bi-globe me-1"></i> Active Invited Sessions (Last 24 Hours)
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
{% if active_sessions %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-dark table-striped table-hover mb-0 align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Host</th>
|
||||
<th>Active Case</th>
|
||||
<th>Created At</th>
|
||||
<th class="text-end">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for session in active_sessions %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong class="text-info">{{ session.name|default:"Unnamed Session" }}</strong>
|
||||
<br>
|
||||
<small class="text-muted font-monospace">{{ session.id }}</small>
|
||||
</td>
|
||||
<td>{{ session.creator.get_full_name|default:session.creator.username }}</td>
|
||||
<td>
|
||||
{% if session.active_case %}
|
||||
<span class="badge bg-success">{{ session.active_case.title|default:"Case Loaded" }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">No case active</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ session.created_at|date:"d M Y, H:i" }}</td>
|
||||
<td class="text-end">
|
||||
<a href="{% url 'atlas:multiuser_session_detail' session_id=session.id %}" class="btn btn-outline-info btn-sm">
|
||||
Join Session <i class="bi bi-arrow-right-short"></i>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="p-4 text-center text-muted">
|
||||
<i class="bi bi-broadcast fs-2 mb-2 d-block"></i>
|
||||
No other active sessions found. Create a session to invite others!
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,319 +0,0 @@
|
||||
{% extends 'atlas/base.html' %}
|
||||
{% load static %}
|
||||
{% load django_htmx %}
|
||||
|
||||
{% block title %}
|
||||
Multiuser Workspace - {{ session.name|default:"Session" }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid py-3 px-4">
|
||||
<!-- Session Header -->
|
||||
<div class="row align-items-center mb-3">
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex align-items-center flex-wrap gap-2">
|
||||
<a href="{% url 'atlas:multiuser_dashboard' %}" class="btn btn-outline-secondary btn-sm" title="Back to Dashboard">
|
||||
<i class="bi bi-arrow-left"></i>
|
||||
</a>
|
||||
<h1 class="h4 mb-0 text-white">
|
||||
<i class="bi bi-people text-info me-2"></i>{{ session.name|default:"Unnamed Session" }}
|
||||
</h1>
|
||||
<span class="badge bg-secondary font-monospace small me-2">{{ session.id|stringformat:".8s" }}</span>
|
||||
<!-- Debug Mode Toggle -->
|
||||
<div class="form-check form-switch small text-light mb-0 d-flex align-items-center gap-2 ms-md-2">
|
||||
<input class="form-check-input" type="checkbox" id="syncDebugModeCheckbox" onchange="toggleSyncDebugMode(this.checked)">
|
||||
<label class="form-check-label text-muted small" for="syncDebugModeCheckbox"><i class="bi bi-bug-fill text-info me-1"></i>Debug Mode</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="small text-muted mt-1">
|
||||
Managed by <strong>{{ session.creator.get_full_name|default:session.creator.username }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Invite Sharing Link Widget -->
|
||||
<div class="col-md-6 mt-2 mt-md-0 d-flex justify-content-md-end">
|
||||
<div class="input-group input-group-sm" style="max-width: 420px;">
|
||||
<span class="input-group-text bg-secondary text-white border-secondary">
|
||||
<i class="bi bi-link-45deg"></i> Share Invite
|
||||
</span>
|
||||
<input type="text" id="inviteLinkInput" class="form-control bg-dark text-white border-secondary" readonly value="">
|
||||
<button class="btn btn-info" type="button" id="copyLinkBtn" onclick="copyInviteLink()">
|
||||
<i class="bi bi-clipboard me-1"></i> Copy
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manager Control Bar -->
|
||||
{% if is_manager %}
|
||||
<div class="card bg-dark border-info text-white mb-4">
|
||||
<div class="card-body py-2 px-3 d-flex align-items-center flex-wrap gap-3">
|
||||
<div class="fw-semibold text-info small uppercase me-2">
|
||||
<i class="bi bi-gear-fill me-1 animate-spin"></i> Host Controls:
|
||||
</div>
|
||||
|
||||
<!-- Search Cases input -->
|
||||
<div class="position-relative flex-grow-1" style="max-width: 480px;">
|
||||
<div class="input-group input-group-sm">
|
||||
<span class="input-group-text bg-secondary text-white border-secondary">
|
||||
<i class="bi bi-search"></i>
|
||||
</span>
|
||||
<input type="text" id="multiuserCaseSearch" name="q" class="form-control bg-dark text-white border-secondary"
|
||||
placeholder="Search cases to load..."
|
||||
hx-get="{% url 'atlas:multiuser_search_cases' session_id=session.id %}"
|
||||
hx-trigger="input delay:300ms, focus"
|
||||
hx-target="#caseSearchDropdown"
|
||||
hx-swap="innerHTML"
|
||||
onfocus="document.getElementById('caseSearchDropdown').style.display='block'"
|
||||
autocomplete="off">
|
||||
</div>
|
||||
<!-- Autocomplete Dropdown list -->
|
||||
<div id="caseSearchDropdown" class="position-absolute w-100 mt-1" style="display: none; z-index: 10000;">
|
||||
<!-- Results injected by HTMX -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="text-muted small">|</span>
|
||||
|
||||
<!-- Users Counter -->
|
||||
<div class="small text-light">
|
||||
<i class="bi bi-person-fill text-success"></i> Connected Users: <span id="connectedUsersCount" class="badge bg-secondary">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- Participant Status Bar -->
|
||||
<div class="card bg-dark border-secondary text-white mb-4">
|
||||
<div class="card-body py-2 px-3 d-flex align-items-center justify-content-between">
|
||||
<div class="small text-muted">
|
||||
<i class="bi bi-broadcast text-warning me-1"></i> You are viewing this session in real-time. Viewport controls are synchronized.
|
||||
</div>
|
||||
<div class="small text-light">
|
||||
<i class="bi bi-person-fill text-success"></i> Connected Users: <span id="connectedUsersCountParticipant" class="badge bg-secondary">1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Main Workspace Area -->
|
||||
<div id="multiuser-case-container"
|
||||
hx-get="{% url 'atlas:multiuser_case_content_partial' session_id=session.id %}"
|
||||
hx-trigger="load"
|
||||
hx-swap="innerHTML"
|
||||
>
|
||||
<div class="d-flex justify-content-center py-5">
|
||||
<div class="spinner-border text-info" role="status">
|
||||
<span class="visually-hidden">Loading case workspace...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Live Debug Logs Panel -->
|
||||
<div id="syncDebugLogsPanel" class="card bg-dark border-info text-white mt-4" style="display: none;">
|
||||
<div class="card-header bg-info bg-opacity-25 text-info d-flex justify-content-between align-items-center py-2 px-3">
|
||||
<span class="fw-semibold"><i class="bi bi-terminal me-2"></i>Live Multiuser Sync Logs</span>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<button class="btn btn-outline-info btn-xs py-0 px-2 small" style="font-size: 0.75rem;" onclick="clearDebugLogs()">Clear</button>
|
||||
<span class="badge bg-info text-dark font-monospace small">DEBUG MODE ACTIVE</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div id="syncDebugLogsContainer" class="bg-black text-success font-monospace p-3 small" style="height: 180px; overflow-y: auto; line-height: 1.5; font-size: 0.85rem;">
|
||||
<div class="text-muted">Debug mode activated. Listening for WebSocket messages...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
<script type="text/javascript">
|
||||
function escapeHtml(text) {
|
||||
if (typeof text !== "string") {
|
||||
try {
|
||||
text = JSON.stringify(text);
|
||||
} catch (e) {
|
||||
text = String(text);
|
||||
}
|
||||
}
|
||||
return text
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
function logDebug(message, data) {
|
||||
console.log("[Multiuser Session]", message, data || "");
|
||||
|
||||
// Append to on-screen console if visible
|
||||
const container = document.getElementById("syncDebugLogsContainer");
|
||||
if (container) {
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
const line = document.createElement("div");
|
||||
line.className = "mb-1 border-bottom border-secondary pb-1 border-opacity-25";
|
||||
line.innerHTML = `<span class="text-muted">[${timestamp}]</span> <strong>${escapeHtml(message)}</strong>`;
|
||||
if (data) {
|
||||
line.innerHTML += ` <span class="text-info">${escapeHtml(data)}</span>`;
|
||||
}
|
||||
container.appendChild(line);
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
}
|
||||
window.logDebug = logDebug;
|
||||
|
||||
function clearDebugLogs() {
|
||||
const container = document.getElementById("syncDebugLogsContainer");
|
||||
if (container) {
|
||||
container.innerHTML = '<div class="text-muted">Logs cleared.</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSyncDebugMode(enabled) {
|
||||
localStorage.setItem("multiuser_sync_debug_mode", enabled ? "true" : "false");
|
||||
|
||||
const panel = document.getElementById("syncDebugLogsPanel");
|
||||
if (panel) {
|
||||
panel.style.display = enabled ? "block" : "none";
|
||||
}
|
||||
|
||||
const checkbox = document.getElementById("syncDebugModeCheckbox");
|
||||
if (checkbox && checkbox.checked !== enabled) {
|
||||
checkbox.checked = enabled;
|
||||
}
|
||||
|
||||
if (typeof window.setDicomViewerLogging === "function") {
|
||||
window.setDicomViewerLogging({ minLevel: enabled ? "debug" : "warn" });
|
||||
logDebug("DV3D viewer log level set to " + (enabled ? "debug" : "warn"));
|
||||
} else {
|
||||
logDebug("DV3D viewer logging control not ready yet (will apply when viewer mounts).");
|
||||
}
|
||||
}
|
||||
|
||||
// Set invite link input on load
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const inviteInput = document.getElementById("inviteLinkInput");
|
||||
if (inviteInput) {
|
||||
inviteInput.value = window.location.href;
|
||||
}
|
||||
|
||||
// Initialize Debug Mode from LocalStorage
|
||||
const debugSaved = localStorage.getItem("multiuser_sync_debug_mode") === "true";
|
||||
toggleSyncDebugMode(debugSaved);
|
||||
|
||||
// Keep attempting to apply log level as viewer mounts
|
||||
const checkInterval = setInterval(function() {
|
||||
if (typeof window.setDicomViewerLogging === "function") {
|
||||
const isDebug = localStorage.getItem("multiuser_sync_debug_mode") === "true";
|
||||
window.setDicomViewerLogging({ minLevel: isDebug ? "debug" : "warn" });
|
||||
clearInterval(checkInterval);
|
||||
}
|
||||
}, 200);
|
||||
setTimeout(function() { clearInterval(checkInterval); }, 15000);
|
||||
});
|
||||
|
||||
// Copy to clipboard helper
|
||||
function copyInviteLink() {
|
||||
const inviteInput = document.getElementById("inviteLinkInput");
|
||||
const copyBtn = document.getElementById("copyLinkBtn");
|
||||
|
||||
inviteInput.select();
|
||||
inviteInput.setSelectionRange(0, 99999); // For mobile devices
|
||||
|
||||
navigator.clipboard.writeText(inviteInput.value).then(function() {
|
||||
const origHTML = copyBtn.innerHTML;
|
||||
copyBtn.innerHTML = '<i class="bi bi-check-lg me-1"></i> Copied!';
|
||||
copyBtn.className = "btn btn-success";
|
||||
setTimeout(function() {
|
||||
copyBtn.innerHTML = origHTML;
|
||||
copyBtn.className = "btn btn-info";
|
||||
}, 2000);
|
||||
}).catch(function(err) {
|
||||
console.error('Could not copy link: ', err);
|
||||
});
|
||||
}
|
||||
|
||||
// Hide search autocomplete dropdown when clicking outside
|
||||
document.addEventListener("click", function(e) {
|
||||
const dropdown = document.getElementById("caseSearchDropdown");
|
||||
const searchInput = document.getElementById("multiuserCaseSearch");
|
||||
if (dropdown && searchInput && !dropdown.contains(e.target) && e.target !== searchInput) {
|
||||
dropdown.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Session-level WebSocket to listen for control signals
|
||||
(function() {
|
||||
let socket = null;
|
||||
|
||||
function connect() {
|
||||
const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
|
||||
const host = window.location.host || "localhost:8080";
|
||||
const wsUrl = `${protocol}//${host}/ws/multiuser/{{ session.id }}/?client_type=session`;
|
||||
|
||||
logDebug("Connecting session WS to", wsUrl);
|
||||
socket = new WebSocket(wsUrl);
|
||||
|
||||
socket.onopen = function() {
|
||||
logDebug("Session WS connected successfully");
|
||||
};
|
||||
|
||||
socket.onmessage = function(event) {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
logDebug("Session WS event received (type=" + data.type + ")", data);
|
||||
|
||||
if (data.type === 'change_case') {
|
||||
{% if not is_manager %}
|
||||
logDebug("Session host changed case to " + data.case_id + ". Fetching new case via HTMX...");
|
||||
// Fetch new case content via HTMX
|
||||
htmx.ajax('GET', "{% url 'atlas:multiuser_case_content_partial' session_id=session.id %}", {
|
||||
target: "#multiuser-case-container",
|
||||
swap: "innerHTML"
|
||||
});
|
||||
{% else %}
|
||||
logDebug("Host ignored change_case broadcast to avoid double-swap");
|
||||
{% endif %}
|
||||
} else if (data.type === 'room_status') {
|
||||
// Update user count
|
||||
const userCount = Object.keys(data.users || {}).length;
|
||||
logDebug("Room status update. Active users: " + userCount, data.users);
|
||||
const mgrCountBadge = document.getElementById("connectedUsersCount");
|
||||
const partCountBadge = document.getElementById("connectedUsersCountParticipant");
|
||||
|
||||
if (mgrCountBadge) mgrCountBadge.textContent = userCount;
|
||||
if (partCountBadge) partCountBadge.textContent = userCount;
|
||||
}
|
||||
} catch (err) {
|
||||
logDebug("Error processing session WS message: " + err.message);
|
||||
console.error("Error processing session WS message", err);
|
||||
}
|
||||
};
|
||||
|
||||
socket.onclose = function(e) {
|
||||
logDebug("Session WS closed (code=" + e.code + "). Reconnecting in 3s...");
|
||||
setTimeout(connect, 3000);
|
||||
};
|
||||
|
||||
socket.onerror = function(err) {
|
||||
logDebug("Session WS error encountered");
|
||||
console.error("Session WS error:", err);
|
||||
};
|
||||
}
|
||||
|
||||
connect();
|
||||
})();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.animate-spin {
|
||||
animation: spin 8s linear infinite;
|
||||
display: inline-block;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -1,74 +0,0 @@
|
||||
<div class="row">
|
||||
<!-- Left column: DICOM Viewer -->
|
||||
<div class="col-lg-9 mb-4">
|
||||
<div class="card bg-dark border-secondary">
|
||||
<div class="card-header bg-secondary text-white d-flex align-items-center justify-content-between py-1 px-3">
|
||||
<span class="fw-semibold"><i class="bi bi-display me-1"></i> Interactive DICOM Viewer</span>
|
||||
<span class="badge bg-info">Case: {{ case.title|default:"Untitled Case" }}</span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div id="viewer-container" class="viewer-resizable-container" style="height: 70vh; min-height: 500px; max-height: 900px; position: relative; overflow: hidden; width: 100%;">
|
||||
<div id="main_viewer" class="dicom-viewer-root"
|
||||
data-auto-cache-stack="false"
|
||||
data-named-stacks='{{ named_stacks_json }}'
|
||||
data-multiuser-room="{{ session.id }}"
|
||||
data-username="{{ request.user.username }}"
|
||||
data-is-staff="{% if is_manager %}true{% else %}false{% endif %}"
|
||||
style="width: 100%; height: 100%;"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right column: Case Details -->
|
||||
<div class="col-lg-3">
|
||||
<div class="card bg-dark border-secondary text-white shadow-sm mb-4">
|
||||
<div class="card-header bg-secondary text-white fw-bold">
|
||||
<i class="bi bi-info-circle-fill me-1"></i> Case Information
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="text-info mb-2">{{ case.title|default:"Untitled Case" }}</h5>
|
||||
<hr class="border-secondary mt-0">
|
||||
|
||||
{% if case.description %}
|
||||
<div class="mb-3">
|
||||
<h6 class="text-muted mb-1 small uppercase fw-bold">Description</h6>
|
||||
<p class="mb-0 small">{{ case.description }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if case.history %}
|
||||
<div class="mb-3">
|
||||
<h6 class="text-muted mb-1 small uppercase fw-bold">Patient History</h6>
|
||||
<p class="mb-0 small">{{ case.history|linebreaksbr }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if is_manager %}
|
||||
{% if case.discussion %}
|
||||
<div class="mb-3">
|
||||
<h6 class="text-warning mb-1 small uppercase fw-bold">Discussion (Host Only)</h6>
|
||||
<p class="mb-0 small text-light-emphasis">{{ case.discussion|linebreaksbr }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if case.report %}
|
||||
<div class="mb-3">
|
||||
<h6 class="text-warning mb-1 small uppercase fw-bold">Model Report (Host Only)</h6>
|
||||
<p class="mb-0 small text-light-emphasis">{{ case.report|linebreaksbr }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
if (typeof window.remountDicomViewer === "function") {
|
||||
console.debug("Remounting DICOM viewer for case change");
|
||||
window.remountDicomViewer('main_viewer');
|
||||
} else {
|
||||
console.warn("window.remountDicomViewer is not defined!");
|
||||
}
|
||||
</script>
|
||||
@@ -1,28 +0,0 @@
|
||||
<ul class="list-group bg-dark border-secondary shadow-lg" style="max-height: 300px; overflow-y: auto;">
|
||||
{% for case in cases %}
|
||||
<li class="list-group-item list-group-item-action bg-dark text-white border-secondary d-flex justify-content-between align-items-center py-2 px-3">
|
||||
<div class="me-2 text-truncate">
|
||||
<strong class="text-info d-block text-truncate">{{ case.title|default:"Untitled Case" }}</strong>
|
||||
<span class="text-muted small">
|
||||
Authors:
|
||||
{% for author in case.author.all %}
|
||||
{{ author.username }}{% if not forloop.last %}, {% endif %}
|
||||
{% empty %}
|
||||
Unknown
|
||||
{% endfor %}
|
||||
</span>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-sm flex-shrink-0"
|
||||
hx-post="{% url 'atlas:multiuser_load_case' session_id=session.id %}"
|
||||
hx-vals='{"case_id": "{{ case.pk }}"}'
|
||||
hx-target="#multiuser-case-container"
|
||||
hx-swap="innerHTML"
|
||||
onclick="document.getElementById('caseSearchDropdown').style.display='none'; document.getElementById('multiuserCaseSearch').value='';"
|
||||
>
|
||||
Load Case
|
||||
</button>
|
||||
</li>
|
||||
{% empty %}
|
||||
<li class="list-group-item bg-dark text-muted border-secondary py-2 px-3">No matching cases found</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
@@ -1,12 +0,0 @@
|
||||
<div class="card bg-dark border-secondary text-white text-center py-5 shadow-sm">
|
||||
<div class="card-body py-5">
|
||||
<i class="bi bi-display fs-1 text-muted mb-3 d-block"></i>
|
||||
{% if is_manager %}
|
||||
<h4 class="text-info">Ready to start review!</h4>
|
||||
<p class="text-muted mb-4">Search and select a case above to load it into the session.</p>
|
||||
{% else %}
|
||||
<h4 class="text-info">Welcome to the session!</h4>
|
||||
<p class="text-muted">Waiting for the session host to load a case...</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user