Sudo-JHare/FHIRFLARE-IG-Toolkit
Sudo-JHare/FHIRFLARE-IG-Toolkit
1
0
Fork 0
mirror of https://github.com/Sudo-JHare/FHIRFLARE-IG-Toolkit.git synced 2025-11-05 13:35:15 +00:00
Code Issues Packages Projects Releases 6 Wiki Activity

ui hotfix

Browse Source
This commit is contained in:
Joshua Hare 2025-08-28 10:59:58 +10:00
parent 9f3748cc49
commit 356914f306
3 changed files with 140 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
templates/fhir_ui.html
View File

@ -6,7 +6,7 @@
<h1 class="display-5 fw-bold text-body-emphasis">FHIR API Explorer</h1> <h1 class="display-5 fw-bold text-body-emphasis">FHIR API Explorer</h1>
<div class="col-lg-6 mx-auto"> <div class="col-lg-6 mx-auto">
<p class="lead mb-4"> <p class="lead mb-4">
Interact with FHIR servers using GET, POST, PUT, or DELETE requests. Toggle between local Fhir Server or a custom server to explore resources or perform searches. Interact with FHIR servers using GET, POST, PUT, or DELETE requests. Toggle between local HAPI or a custom server to explore resources or perform searches.
</p> </p>
</div> </div>
</div> </div>
@ -21,11 +21,11 @@
<label class="form-label">FHIR Server</label> <label class="form-label">FHIR Server</label>
<div class="input-group"> <div class="input-group">
<button type="button" class="btn btn-outline-primary" id="toggleServer"> <button type="button" class="btn btn-outline-primary" id="toggleServer">
<span id="toggleLabel">Use Local </span> <span id="toggleLabel">Use Local Server</span>
</button> </button>
<input type="text" class="form-control" id="fhirServerUrl" name="fhir_server_url" placeholder="e.g., https://hapi.fhir.org/baseR4" style="display: none;" aria-describedby="fhirServerHelp"> <input type="text" class="form-control" id="fhirServerUrl" name="fhir_server_url" placeholder="e.g., https://hapi.fhir.org/baseR4" style="display: none;" aria-describedby="fhirServerHelp">
</div> </div>
<small id="fhirServerHelp" class="form-text text-muted">Toggle to use local (http://localhost:8080/fhir) or enter a custom FHIR server URL.</small> <small id="fhirServerHelp" class="form-text text-muted">Toggle to use local HAPI (http://localhost:8080/fhir) or enter a custom FHIR server URL.</small>
</div> </div>
<div class="mb-3" id="authSection" style="display: none;"> <div class="mb-3" id="authSection" style="display: none;">
<label class="form-label">Authentication</label> <label class="form-label">Authentication</label>
@ -126,7 +126,7 @@ document.addEventListener('DOMContentLoaded', function() {
const authSection = document.getElementById('authSection'); const authSection = document.getElementById('authSection');
const authTypeSelect = document.getElementById('authType'); const authTypeSelect = document.getElementById('authType');
const authInputsGroup = document.getElementById('authInputsGroup'); const authInputsGroup = document.getElementById('authInputsGroup');
const bearerTokenInput = document.getElementById('bearerToken'); const bearerTokenInput = document.getElementById('bearerTokenInput');
const basicAuthInputs = document.getElementById('basicAuthInputs'); const basicAuthInputs = document.getElementById('basicAuthInputs');
const usernameInput = document.getElementById('username'); const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password'); const passwordInput = document.getElementById('password');
@ -141,7 +141,6 @@ document.addEventListener('DOMContentLoaded', function() {
// --- State Variable --- // --- State Variable ---
let useLocalHapi = true; let useLocalHapi = true;
let localHapiBaseUrl = ''; // New variable to store the fetched URL
// --- Get App Mode from Flask Context --- // --- Get App Mode from Flask Context ---
const appMode = '{{ app_mode | default("standalone") | lower }}'; const appMode = '{{ app_mode | default("standalone") | lower }}';
@ -194,22 +193,6 @@ document.addEventListener('DOMContentLoaded', function() {
} catch (err) { console.error('Copy failed:', err); } } catch (err) { console.error('Copy failed:', err); }
} }
async function fetchLocalUrlAndSetUI() {
try {
const response = await fetch('/api/get-local-server-url');
if (!response.ok) throw new Error('Failed to fetch local server URL.');
const data = await response.json();
localHapiBaseUrl = data.url;
console.log(`Local HAPI URL fetched: ${localHapiBaseUrl}`);
} catch (error) {
console.error(error);
localHapiBaseUrl = '/fhir'; // Fallback to proxy
alert('Could not fetch local HAPI server URL. Falling back to proxy.');
} finally {
updateServerToggleUI();
}
}
function updateServerToggleUI() { function updateServerToggleUI() {
if (appMode === 'lite') { if (appMode === 'lite') {
useLocalHapi = false; useLocalHapi = false;
@ -229,7 +212,7 @@ document.addEventListener('DOMContentLoaded', function() {
toggleServerButton.style.pointerEvents = 'auto'; toggleServerButton.style.pointerEvents = 'auto';
toggleServerButton.removeAttribute('aria-disabled'); toggleServerButton.removeAttribute('aria-disabled');
toggleServerButton.title = "Toggle between Local HAPI and Custom URL"; toggleServerButton.title = "Toggle between Local HAPI and Custom URL";
toggleLabel.textContent = useLocalHapi ? 'Using Local HAPI' : 'Using Custom URL'; toggleLabel.textContent = useLocalHapi ? 'Using Local Server' : 'Using Custom URL';
fhirServerUrlInput.style.display = useLocalHapi ? 'none' : 'block'; fhirServerUrlInput.style.display = useLocalHapi ? 'none' : 'block';
fhirServerUrlInput.placeholder = "e.g., https://hapi.fhir.org/baseR4"; fhirServerUrlInput.placeholder = "e.g., https://hapi.fhir.org/baseR4";
fhirServerUrlInput.required = !useLocalHapi; fhirServerUrlInput.required = !useLocalHapi;
@ -261,7 +244,8 @@ document.addEventListener('DOMContentLoaded', function() {
fhirServerUrlInput.value = ''; fhirServerUrlInput.value = '';
} }
updateServerToggleUI(); updateServerToggleUI();
console.log(`Server toggled: Now using ${useLocalHapi ? 'Local HAPI' : 'Custom URL'}`); updateAuthInputsUI();
console.log(`Server toggled: Now using ${useLocalHapi ? 'Local Server' : 'Custom URL'}`);
} }
function updateRequestBodyVisibility() { function updateRequestBodyVisibility() {
@ -277,7 +261,7 @@ document.addEventListener('DOMContentLoaded', function() {
} }
// --- Initial Setup --- // --- Initial Setup ---
fetchLocalUrlAndSetUI(); // Fetch the URL and then set up the UI updateServerToggleUI();
updateRequestBodyVisibility(); updateRequestBodyVisibility();
// --- Event Listeners --- // --- Event Listeners ---
@ -312,7 +296,7 @@ document.addEventListener('DOMContentLoaded', function() {
const customUrl = fhirServerUrlInput.value.trim(); const customUrl = fhirServerUrlInput.value.trim();
let body = undefined; let body = undefined;
const authType = authTypeSelect ? authTypeSelect.value : 'none'; const authType = authTypeSelect ? authTypeSelect.value : 'none';
const bearerToken = bearerTokenInput ? bearerTokenInput.value.trim() : ''; const bearerToken = document.getElementById('bearerToken').value.trim();
const username = usernameInput ? usernameInput.value.trim() : ''; const username = usernameInput ? usernameInput.value.trim() : '';
const password = passwordInput ? passwordInput.value : ''; const password = passwordInput ? passwordInput.value : '';
@ -329,30 +313,14 @@ document.addEventListener('DOMContentLoaded', function() {
sendButton.textContent = 'Send Request'; sendButton.textContent = 'Send Request';
return; return;
} }
if (!useLocalHapi && !customUrl) {
// --- Determine Final URL & Headers --- alert('Please enter a custom FHIR Server URL.');
const cleanedPath = cleanFhirPath(path); fhirServerUrlInput.classList.add('is-invalid');
const headers = { 'Accept': 'application/fhir+json, application/fhir+xml;q=0.9, */*;q=0.8' }; sendButton.disabled = false;
let finalFetchUrl; sendButton.textContent = 'Send Request';
return;
if (useLocalHapi) { }
if (!localHapiBaseUrl) { if (!useLocalHapi && customUrl) {
alert('Local HAPI URL not available. Please refresh the page.');
sendButton.disabled = false;
sendButton.textContent = 'Send Request';
return;
}
// Direct request to the local URL
finalFetchUrl = `${localHapiBaseUrl.replace(/\/+$/, '')}/${cleanedPath}`;
} else {
// Use the proxy for custom URLs
if (!customUrl) {
alert('Please enter a custom FHIR Server URL.');
fhirServerUrlInput.classList.add('is-invalid');
sendButton.disabled = false;
sendButton.textContent = 'Send Request';
return;
}
try { new URL(customUrl); } try { new URL(customUrl); }
catch (_) { catch (_) {
alert('Invalid custom FHIR Server URL format.'); alert('Invalid custom FHIR Server URL format.');
@ -361,19 +329,27 @@ document.addEventListener('DOMContentLoaded', function() {
sendButton.textContent = 'Send Request'; sendButton.textContent = 'Send Request';
return; return;
} }
finalFetchUrl = '/fhir/' + cleanedPath; }
headers['X-Target-FHIR-Server'] = customUrl.replace(/\/+$/, '');
console.log("Adding header X-Target-FHIR-Server:", headers['X-Target-FHIR-Server']); // --- Validate Authentication ---
if (authType === 'bearer') { if (!useLocalHapi) {
headers['Authorization'] = `Bearer ${bearerToken}`; if (authType === 'bearer' && !bearerToken) {
console.log("Adding header Authorization: Bearer <truncated>"); alert('Please enter a Bearer Token.');
} else if (authType === 'basic') { document.getElementById('bearerToken').classList.add('is-invalid');
const credentials = btoa(`${username}:${password}`); sendButton.disabled = false;
headers['Authorization'] = `Basic ${credentials}`; sendButton.textContent = 'Send Request';
console.log("Adding header Authorization: Basic <redacted>"); return;
}
if (authType === 'basic' && (!username || !password)) {
alert('Please enter both Username and Password for Basic Authentication.');
if (!username) usernameInput.classList.add('is-invalid');
if (!password) passwordInput.classList.add('is-invalid');
sendButton.disabled = false;
sendButton.textContent = 'Send Request';
return;
} }
} }
// --- Validate & Get Body --- // --- Validate & Get Body ---
if (method === 'POST' || method === 'PUT') { if (method === 'POST' || method === 'PUT') {
body = validateRequestBody(method, path); body = validateRequestBody(method, path);
@ -386,6 +362,31 @@ document.addEventListener('DOMContentLoaded', function() {
if (body === '') body = ''; if (body === '') body = '';
} }
// --- Determine Fetch URL and Headers ---
const cleanedPath = cleanFhirPath(path);
const finalFetchUrl = '/fhir/' + cleanedPath;
const headers = { 'Accept': 'application/fhir+json, application/fhir+xml;q=0.9, */*;q=0.8' };
if (body !== undefined) {
if (body.trim().startsWith('{')) { headers['Content-Type'] = 'application/fhir+json'; }
else if (body.trim().startsWith('<')) { headers['Content-Type'] = 'application/fhir+xml'; }
else if (method === 'POST' && path.endsWith('_search') && body && !body.trim().startsWith('{') && !body.trim().startsWith('<')) { headers['Content-Type'] = 'application/x-www-form-urlencoded'; }
else if (body) { headers['Content-Type'] = 'application/fhir+json'; }
}
if (!useLocalHapi && customUrl) {
headers['X-Target-FHIR-Server'] = customUrl.replace(/\/+$/, '');
console.log("Adding header X-Target-FHIR-Server:", headers['X-Target-FHIR-Server']);
if (authType === 'bearer') {
headers['Authorization'] = `Bearer ${bearerToken}`;
console.log("Adding header Authorization: Bearer <truncated>");
} else if (authType === 'basic') {
const credentials = btoa(`${username}:${password}`);
headers['Authorization'] = `Basic ${credentials}`;
console.log("Adding header Authorization: Basic <redacted>");
}
}
const csrfTokenInput = form.querySelector('input[name="csrf_token"]'); const csrfTokenInput = form.querySelector('input[name="csrf_token"]');
const csrfToken = csrfTokenInput ? csrfTokenInput.value : null; const csrfToken = csrfTokenInput ? csrfTokenInput.value : null;
if (useLocalHapi && ['POST', 'PUT', 'DELETE', 'PATCH'].includes(method) && csrfToken) { if (useLocalHapi && ['POST', 'PUT', 'DELETE', 'PATCH'].includes(method) && csrfToken) {
@ -453,7 +454,7 @@ document.addEventListener('DOMContentLoaded', function() {
} catch (error) { } catch (error) {
console.error('Fetch error:', error); console.error('Fetch error:', error);
responseCard.style.display = 'block'; responseCard.style.display = 'block';
responseStatus.textContent = `Network Error`; responseStatus.textContent = 'Network Error';
responseStatus.className = 'badge bg-danger'; responseStatus.className = 'badge bg-danger';
responseHeaders.textContent = 'N/A'; responseHeaders.textContent = 'N/A';
let errorDetail = `Error: ${error.message}\n\n`; let errorDetail = `Error: ${error.message}\n\n`;

102
templates/fhir_ui_operations.html
View File

@ -114,14 +114,7 @@
<p class="lead mb-4"> <p class="lead mb-4">
Explore FHIR server operations by selecting resource types or system operations. Toggle between local Server or a custom server to interact with FHIR metadata, resources, and server-wide operations. Explore FHIR server operations by selecting resource types or system operations. Toggle between local Server or a custom server to interact with FHIR metadata, resources, and server-wide operations.
</p> </p>
<!-----------------------------------------------------------------remove the buttons-----------------------------------------------------
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
<a href="{{ url_for('index') }}" class="btn btn-primary btn-lg px-4 gap-3">Back to Home</a>
<a href="{{ url_for('fhir_ui') }}" class="btn btn-outline-secondary btn-lg px-4">FHIR API Explorer</a>
<a href="{{ url_for('validate_sample') }}" class="btn btn-outline-secondary btn-lg px-4">Validate FHIR Sample</a>
</div> </div>
------------------------------------------------------------------------------------------------------------------------------------------>
</div>
</div> </div>
<div class="container mt-4"> <div class="container mt-4">
@ -134,11 +127,12 @@
<label class="form-label fw-bold">FHIR Server</label> <label class="form-label fw-bold">FHIR Server</label>
<div class="input-group"> <div class="input-group">
<button type="button" class="btn btn-outline-primary" id="toggleServer"> <button type="button" class="btn btn-outline-primary" id="toggleServer">
<span id="toggleLabel">Use Local </span> <span id="toggleLabel">Use Local Server</span>
</button> </button>
<input type="text" class="form-control" id="fhirServerUrl" name="fhir_server_url" placeholder="Enter FHIR Base URL e.g., https://hapi.fhir.org/baseR4" style="display: none;" aria-describedby="fhirServerHelp"> <input type="text" class="form-control" id="fhirServerUrl" name="fhir_server_url" placeholder="Enter FHIR Base URL e.g., https://hapi.fhir.org/baseR4" style="display: none;" aria-describedby="fhirServerHelp">
</div> </div>
<small id="fhirServerHelp" class="form-text text-muted">Toggle to use local Fhir Server (/fhir proxy) or enter a custom FHIR server URL.</small> <small id="fhirServerHelp" class="form-text text-muted">Toggle to use local Fhir Server (/fhir proxy) or enter a custom FHIR server URL.</small>
<small id="fhirServerHelp1" class="form-text text-muted">To enable the input fields you will have to toggle the server button when changing options (Issue Raised)</small>
</div> </div>
<div class="mb-3" id="authSection" style="display: none;"> <div class="mb-3" id="authSection" style="display: none;">
<label class="form-label fw-bold">Authentication</label> <label class="form-label fw-bold">Authentication</label>
@ -367,7 +361,8 @@ document.addEventListener('DOMContentLoaded', () => {
const authSection = document.getElementById('authSection'); const authSection = document.getElementById('authSection');
const authTypeSelect = document.getElementById('authType'); const authTypeSelect = document.getElementById('authType');
const authInputsGroup = document.getElementById('authInputsGroup'); const authInputsGroup = document.getElementById('authInputsGroup');
const bearerTokenInput = document.getElementById('bearerToken'); const bearerTokenInput = document.getElementById('bearerTokenInput');
const basicAuthInputs = document.getElementById('basicAuthInputs');
const usernameInput = document.getElementById('username'); const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password'); const passwordInput = document.getElementById('password');
if (!toggleServerButton || !toggleLabel || !fhirServerUrlInput || !authSection || !authTypeSelect) { if (!toggleServerButton || !toggleLabel || !fhirServerUrlInput || !authSection || !authTypeSelect) {
@ -413,9 +408,14 @@ function updateAuthInputsUI() {
authInputsGroup.style.display = (authType === 'bearer' || authType === 'basic') ? 'block' : 'none'; authInputsGroup.style.display = (authType === 'bearer' || authType === 'basic') ? 'block' : 'none';
bearerTokenInput.style.display = authType === 'bearer' ? 'block' : 'none'; bearerTokenInput.style.display = authType === 'bearer' ? 'block' : 'none';
basicAuthInputs.style.display = authType === 'basic' ? 'block' : 'none'; basicAuthInputs.style.display = authType === 'basic' ? 'block' : 'none';
if (authType !== 'bearer' && bearerTokenInput) bearerTokenInput.value = ''; if (authType !== 'bearer') {
if (authType !== 'basic' && usernameInput) usernameInput.value = ''; const tokenInput = document.getElementById('bearerToken');
if (authType !== 'basic' && passwordInput) passwordInput.value = ''; if (tokenInput) tokenInput.value = '';
}
if (authType !== 'basic') {
if (usernameInput) usernameInput.value = '';
if (passwordInput) passwordInput.value = '';
}
console.log(`[updateAuthInputsUI] authInputsGroup display: ${authInputsGroup.style.display}, bearer: ${bearerTokenInput.style.display}, basic: ${basicAuthInputs.style.display}`); console.log(`[updateAuthInputsUI] authInputsGroup display: ${authInputsGroup.style.display}, bearer: ${bearerTokenInput.style.display}, basic: ${basicAuthInputs.style.display}`);
} }
@ -445,7 +445,7 @@ function updateAuthInputsUI() {
toggleServerButton.style.pointerEvents = 'auto'; toggleServerButton.style.pointerEvents = 'auto';
toggleServerButton.removeAttribute('aria-disabled'); toggleServerButton.removeAttribute('aria-disabled');
toggleServerButton.title = ""; toggleServerButton.title = "";
toggleLabel.textContent = isUsingLocalHapi ? 'Use Local HAPI' : 'Use Custom URL'; toggleLabel.textContent = isUsingLocalHapi ? 'Use Local Server' : 'Use Custom URL';
fhirServerUrlInput.style.display = isUsingLocalHapi ? 'none' : 'block'; fhirServerUrlInput.style.display = isUsingLocalHapi ? 'none' : 'block';
fhirServerUrlInput.placeholder = "Enter FHIR Base URL e.g., https://hapi.fhir.org/baseR4"; fhirServerUrlInput.placeholder = "Enter FHIR Base URL e.g., https://hapi.fhir.org/baseR4";
authSection.style.display = isUsingLocalHapi ? 'none' : 'block'; authSection.style.display = isUsingLocalHapi ? 'none' : 'block';
@ -533,6 +533,7 @@ function updateAuthInputsUI() {
isUsingLocalHapi = !isUsingLocalHapi; isUsingLocalHapi = !isUsingLocalHapi;
updateServerToggleUI(); updateServerToggleUI();
updateAuthInputsUI();
if (isUsingLocalHapi && fhirServerUrlInput) { if (isUsingLocalHapi && fhirServerUrlInput) {
fhirServerUrlInput.value = ''; fhirServerUrlInput.value = '';
@ -543,7 +544,7 @@ function updateAuthInputsUI() {
fetchedMetadataCache = null; fetchedMetadataCache = null;
availableSystemOperations = []; availableSystemOperations = [];
operationDefinitionCache = {}; operationDefinitionCache = {};
console.log(`Server toggled (Standalone): Now using ${isUsingLocalHapi ? 'Local HAPI' : 'Custom URL'}`); console.log(`Server toggled (Standalone): Now using ${isUsingLocalHapi ? 'Use Local Server' : 'Use Custom URL'}`);
} }
if (toggleServerButton) { if (toggleServerButton) {
@ -1068,7 +1069,7 @@ function updateAuthInputsUI() {
</div> </div>
<div class="opblock-section responses-section"> <div class="opblock-section responses-section">
<div class="opblock-section-header"><h4>Example Response / Schema</h4></div><table class="responses-table"><thead><tr class="responses-header"><td class="response-col_status">Code</td><td class="response-col_description">Description</td></tr></thead><tbody><tr class="response" data-code="200"><td class="response-col_status">200</td><td class="response-col_description"><div class="response-col_description__inner"><div class="renderedMarkdown"><p>Success</p></div></div><section class="response-controls mb-2"><div class="row g-2 align-items-center mb-1"> <div class="opblock-section-header"><h4>Example Response / Schema</h4></div><table class="responses-table"><thead><tr class="responses-header"><td class="response-col_status">Code</td><td class="response-col_description">Description</td></tr></thead><tbody><tr class="response" data-code="200"><td class="response-col_status">200</td><td class="response-col_description"><div class="response-col_description__inner"><div class="renderedMarkdown"><p>Success</p></div></div><section class="response-controls mb-2"><div class="row g-2 align-items-center mb-1">
<div class="col-auto"><label for="${blockId}-example-media-type" class="response-control-media-type__title mb-0">Example Format:</label></div><div class="col-auto"><div class="content-type-wrapper"><select id="${blockId}-example-media-type" aria-label="Example Media Type" class="content-type example-media-type-select form-select form-select-sm" style="width: auto;"><option value="application/fhir+json">JSON</option><option value="application/fhir+xml">XML</option></select></div></div><div class="col"><small class="response-control-media-type__accept-message text-muted">Controls example/schema format.</small></div></div></section><div class="model-example"><ul class="tab list-unstyled ps-0 mb-2" role="tablist"><li class="tabitem active"><button class="tablinks badge active" data-name="example">Example Value</button></li><li class="tabitem"><button class="tablinks badge" data-name="schema">Schema</button></li></ul><div class="example-panel" style="display: block;"><div class="highlight-code"><pre class="example-code-display"><code class="language-json">${query.example && typeof query.example === 'string' ? query.example : '{}'}</code></pre></div></div><div class="schema-panel" style="display: none;"><div class="highlight-code"><pre class="schema-code-display"><code class="language-json">${JSON.stringify(query.schema || {}, null, 2)}</code></pre></div></div></div></td></tr><tr class="response" data-code="4xx/5xx"><td class="response-col_status">4xx/5xx</td><td class="response-col_description"><p>Error (e.g., Not Found, Server Error)</p></td></tr></tbody></table> <div class="col-auto"><label for="${blockId}-example-media-type" class="response-control-media-type__title mb-0">Example Format:</label></div><div class="col-auto"><div class="content-type-wrapper"><select id="${blockId}-example-media-type" aria-label="Example Media Type" class="content-type example-media-type-select form-select form-select-sm" style="width: auto;"><option value="application/fhir+json">JSON</option><option value="application/fhir+xml">XML</option></select></div></div><div class="col"><small class="response-control-media-type__accept-message text-muted">Controls example/schema format.</small></div></div></section><div class="model-example"><ul class="tab list-unstyled ps-0 mb-2" role="tablist"><li class="tabitem active"><button class="tablinks badge active" data-name="example">Example Value</button></li><li class="tabitem"><button class="tablinks badge" data-name="schema">Schema</button></li></ul><div class="example-panel" style="display: block;"><div class="highlight-code"><pre class="request-example-code"><code class="language-json">${query.example && typeof query.example === 'string' ? query.example : '{}'}</code></pre></div></div><div class="schema-panel" style="display: none;"><div class="highlight-code"><pre class="schema-code-display"><code class="language-json">${JSON.stringify(query.schema || {}, null, 2)}</code></pre></div></div></div></td></tr><tr class="response" data-code="4xx/5xx"><td class="response-col_status">4xx/5xx</td><td class="response-col_description"><p>Error (e.g., Not Found, Server Error)</p></td></tr></tbody></table>
</div> </div>
</div>`; </div>`;
queryListContainer.appendChild(block); queryListContainer.appendChild(block);
@ -1090,20 +1091,19 @@ function updateAuthInputsUI() {
const curlOutput = executeWrapper?.querySelector('.curl-output code'); const curlOutput = executeWrapper?.querySelector('.curl-output code');
const copyCurlButton = executeWrapper?.querySelector('.copy-curl-btn'); const copyCurlButton = executeWrapper?.querySelector('.copy-curl-btn');
const copyRespButton = executeWrapper?.querySelector('.copy-response-btn'); const copyRespButton = executeWrapper?.querySelector('.copy-response-btn');
const downloadRespButton = executeWrapper?.querySelector('.download-response-btn'); const downloadRespButton = executeWrapper?.querySelector('.copy-response-btn');
const exampleMediaTypeSelect = block.querySelector('.example-media-type-select'); const exampleMediaTypeSelect = block.querySelector('.example-media-type-select');
const exampleTabs = block.querySelectorAll('.responses-section .tablinks.badge'); const exampleTabs = block.querySelectorAll('.responses-section .tablinks.badge');
const examplePanel = block.querySelector('.responses-section .example-panel'); const examplePanel = block.querySelector('.responses-section .example-panel');
const schemaPanel = block.querySelector('.responses-section .schema-panel'); const schemaPanel = block.querySelector('.responses-section .schema-panel');
if (opblockSummary) { if (opblockSummary) {
opblockSummary.addEventListener('click', (e) => { opblockSummary.addEventListener('click', (e) => {
if (e.target.closest('button, a, input, select')) return; if (e.target.closest('button, a, input, select')) return;
const wasOpen = block.classList.contains('is-open'); const wasOpen = block.classList.contains('is-open');
block.classList.toggle('is-open', !wasOpen); block.classList.toggle('is-open', !wasOpen);
if(opblockBody) opblockBody.style.display = wasOpen ? 'none' : 'block'; if(opblockBody) opblockBody.style.display = wasOpen ? 'none' : 'block';
}); });
} }
if (tryButton && executeButton) { if (tryButton && executeButton) {
@ -1113,22 +1113,22 @@ function updateAuthInputsUI() {
paramInputs.forEach(input => { paramInputs.forEach(input => {
input.disabled = !enable; input.disabled = !enable;
if (!enable) { if (!enable) {
input.classList.remove('is-invalid'); input.classList.remove('is-invalid');
if (input.type === 'checkbox') { if (input.type === 'checkbox') {
input.checked = false; input.checked = false;
} else if (input.tagName === 'SELECT') { } else if (input.tagName === 'SELECT') {
const exampleValue = input.dataset.example; const exampleValue = input.dataset.example;
if (exampleValue && input.querySelector(`option[value="${exampleValue}"]`)) { input.value = exampleValue; } if (exampleValue && input.querySelector(`option[value="${exampleValue}"]`)) { input.value = exampleValue; }
else if (input.options.length > 0) { input.selectedIndex = 0; } else if (input.options.length > 0) { input.selectedIndex = 0; }
} else { } else {
input.value = input.dataset.example || ''; input.value = input.dataset.example || '';
} }
} }
}); });
if (reqBodyTextarea) reqBodyTextarea.disabled = !enable; if (reqBodyTextarea) reqBodyTextarea.disabled = !enable;
if (reqContentTypeSelect) reqContentTypeSelect.disabled = !enable; if (reqContentTypeSelect) reqContentTypeSelect.disabled = !enable;
if (!enable && reqBodyTextarea && !query.parameters.some(p => p.in === 'body (Parameters)')) { if (!enable && reqBodyTextarea && !query.parameters.some(p => p.in === 'body (Parameters)')) {
reqBodyTextarea.value = (query.method === 'POST' && query.path.endsWith('_search')) ? query.example : ''; reqBodyTextarea.value = (query.method === 'POST' && query.path.endsWith('_search')) ? query.example : '';
} }
tryButton.textContent = enable ? 'Cancel' : 'Try it out'; tryButton.textContent = enable ? 'Cancel' : 'Try it out';
tryButton.classList.toggle('cancel', enable); tryButton.classList.toggle('cancel', enable);
@ -1151,9 +1151,9 @@ function updateAuthInputsUI() {
} }
if (reqContentTypeSelect && reqBodyTextarea && tryButton) { if (reqContentTypeSelect && reqBodyTextarea && tryButton) {
const reqExampleCode = block.querySelector('.request-example-code code'); const reqExampleCode = block.querySelector('.request-example-code code');
const reqExampleContainer = block.querySelector('.request-body-example'); const reqExampleContainer = block.querySelector('.request-body-example');
reqContentTypeSelect.addEventListener('change', () => { reqContentTypeSelect.addEventListener('change', () => {
const type = reqContentTypeSelect.value; const type = reqContentTypeSelect.value;
const isFormUrlEncoded = type === 'application/x-www-form-urlencoded'; const isFormUrlEncoded = type === 'application/x-www-form-urlencoded';
const isJsonParams = type === 'application/fhir+json' && query.parameters.some(p => p.in === 'body (Parameters)'); const isJsonParams = type === 'application/fhir+json' && query.parameters.some(p => p.in === 'body (Parameters)');
@ -1177,8 +1177,8 @@ function updateAuthInputsUI() {
reqExampleCode.className = 'language-xml'; reqExampleCode.textContent = jsonToFhirXml(jsonExample); Prism.highlightElement(reqExampleCode); reqExampleCode.className = 'language-xml'; reqExampleCode.textContent = jsonToFhirXml(jsonExample); Prism.highlightElement(reqExampleCode);
} }
} }
}); });
reqContentTypeSelect.dispatchEvent(new Event('change')); reqContentTypeSelect.dispatchEvent(new Event('change'));
} }
if (executeButton && executeWrapper && respStatusDiv && reqUrlOutput && curlOutput && respFormatSelect && copyRespButton && downloadRespButton && respOutputCode && respNarrativeDiv && respOutputPre) { if (executeButton && executeWrapper && respStatusDiv && reqUrlOutput && curlOutput && respFormatSelect && copyRespButton && downloadRespButton && respOutputCode && respNarrativeDiv && respOutputPre) {
@ -1223,14 +1223,30 @@ function updateAuthInputsUI() {
if (!isUsingLocalHapi) { if (!isUsingLocalHapi) {
const authType = authTypeSelect.value; const authType = authTypeSelect.value;
const bearerToken = bearerTokenInput.value.trim(); const bearerTokenValue = document.getElementById('bearerToken').value.trim();
const username = usernameInput.value.trim(); const usernameValue = document.getElementById('username').value.trim();
const password = passwordInput.value; const passwordValue = document.getElementById('password').value;
if (authType === 'bearer') { if (authType === 'bearer') {
headers['Authorization'] = `Bearer ${bearerToken}`; if (!bearerTokenValue) {
alert('Please enter a Bearer Token.');
document.getElementById('bearerToken').classList.add('is-invalid');
executeButton.disabled = false;
executeButton.textContent = 'Execute';
return;
}
headers['Authorization'] = `Bearer ${bearerTokenValue}`;
console.log("Adding header Authorization: Bearer <truncated>"); console.log("Adding header Authorization: Bearer <truncated>");
} else if (authType === 'basic') { } else if (authType === 'basic') {
headers['Authorization'] = `Basic ${btoa(`${username}:${password}`)}`; if (!usernameValue || !passwordValue) {
alert('Please enter both Username and Password for Basic Authentication.');
if (!usernameValue) document.getElementById('username').classList.add('is-invalid');
if (!passwordValue) document.getElementById('password').classList.add('is-invalid');
executeButton.disabled = false;
executeButton.textContent = 'Execute';
return;
}
headers['Authorization'] = `Basic ${btoa(`${usernameValue}:${passwordValue}`)}`;
console.log("Adding header Authorization: Basic <redacted>"); console.log("Adding header Authorization: Basic <redacted>");
} }
} }
@ -1618,8 +1634,8 @@ function updateAuthInputsUI() {
url = '/fhir/metadata'; url = '/fhir/metadata';
headers['X-Target-FHIR-Server'] = customUrl; headers['X-Target-FHIR-Server'] = customUrl;
const authType = authTypeSelect.value; const authType = authTypeSelect.value;
if (authType === 'bearer' && bearerTokenInput && bearerTokenInput.value) { if (authType === 'bearer' && document.getElementById('bearerToken') && document.getElementById('bearerToken').value) {
headers['Authorization'] = `Bearer ${bearerTokenInput.value}`; headers['Authorization'] = `Bearer ${document.getElementById('bearerToken').value}`;
} else if (authType === 'basic' && usernameInput && passwordInput && usernameInput.value && passwordInput.value) { } else if (authType === 'basic' && usernameInput && passwordInput && usernameInput.value && passwordInput.value) {
const credentials = btoa(`${usernameInput.value}:${passwordInput.value}`); const credentials = btoa(`${usernameInput.value}:${passwordInput.value}`);
headers['Authorization'] = `Basic ${credentials}`; headers['Authorization'] = `Basic ${credentials}`;
@ -1700,7 +1716,7 @@ function updateAuthInputsUI() {
if (diagnostics) { if (diagnostics) {
html += `<p class="mb-0 mt-1 small"><em>Diagnostics: ${diagnostics}</em></p>`; html += `<p class="mb-0 mt-1 small"><em>Diagnostics: ${diagnostics}</em></p>`;
} }
html += `</li>`; html += '</li>';
}); });
html += '</ul>'; html += '</ul>';

30
templates/retrieve_split_data.html
View File

@ -32,7 +32,7 @@
<label class="form-label fw-bold">FHIR Server</label> <label class="form-label fw-bold">FHIR Server</label>
<div class="input-group"> <div class="input-group">
<button type="button" class="btn btn-outline-primary" id="toggleServer"> <button type="button" class="btn btn-outline-primary" id="toggleServer">
<span id="toggleLabel">Use Local </span> <span id="toggleLabel">Use Local Server</span>
</button> </button>
{{ form.fhir_server_url(class="form-control", id="fhirServerUrl", style="display: none;", placeholder="e.g., https://fhir.hl7.org.au/aucore/fhir/DEFAULT", **{'aria-describedby': 'fhirServerHelp'}) }} {{ form.fhir_server_url(class="form-control", id="fhirServerUrl", style="display: none;", placeholder="e.g., https://fhir.hl7.org.au/aucore/fhir/DEFAULT", **{'aria-describedby': 'fhirServerHelp'}) }}
</div> </div>
@ -162,7 +162,7 @@ document.addEventListener('DOMContentLoaded', () => {
const authSection = document.getElementById('authSection'); const authSection = document.getElementById('authSection');
const authTypeSelect = document.getElementById('authType'); const authTypeSelect = document.getElementById('authType');
const authInputsGroup = document.getElementById('authInputsGroup'); const authInputsGroup = document.getElementById('authInputsGroup');
const bearerTokenInput = document.getElementById('bearerToken'); const bearerTokenInput = document.getElementById('bearerTokenInput');
const basicAuthInputs = document.getElementById('basicAuthInputs'); const basicAuthInputs = document.getElementById('basicAuthInputs');
const usernameInput = document.getElementById('username'); const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password'); const passwordInput = document.getElementById('password');
@ -221,7 +221,7 @@ document.addEventListener('DOMContentLoaded', () => {
toggleServerButton.classList.remove('disabled'); toggleServerButton.classList.remove('disabled');
toggleServerButton.style.pointerEvents = 'auto'; toggleServerButton.style.pointerEvents = 'auto';
toggleServerButton.removeAttribute('aria-disabled'); toggleServerButton.removeAttribute('aria-disabled');
toggleLabel.textContent = useLocalHapi ? 'Using Local HAPI' : 'Using Custom URL'; toggleLabel.textContent = useLocalHapi ? 'Use Local Server' : 'Use Custom URL';
fhirServerUrlInput.style.display = useLocalHapi ? 'none' : 'block'; fhirServerUrlInput.style.display = useLocalHapi ? 'none' : 'block';
fhirServerUrlInput.placeholder = "e.g., https://hapi.fhir.org/baseR4"; fhirServerUrlInput.placeholder = "e.g., https://hapi.fhir.org/baseR4";
fhirServerUrlInput.required = !useLocalHapi; fhirServerUrlInput.required = !useLocalHapi;
@ -237,9 +237,15 @@ document.addEventListener('DOMContentLoaded', () => {
authInputsGroup.style.display = (authType === 'bearer' || authType === 'basic') ? 'block' : 'none'; authInputsGroup.style.display = (authType === 'bearer' || authType === 'basic') ? 'block' : 'none';
bearerTokenInput.style.display = authType === 'bearer' ? 'block' : 'none'; bearerTokenInput.style.display = authType === 'bearer' ? 'block' : 'none';
basicAuthInputs.style.display = authType === 'basic' ? 'block' : 'none'; basicAuthInputs.style.display = authType === 'basic' ? 'block' : 'none';
if (authType !== 'bearer' && bearerTokenInput) bearerTokenInput.value = ''; if (authType !== 'bearer') {
if (authType !== 'basic' && usernameInput) usernameInput.value = ''; // Correctly reference the input element by its ID
if (authType !== 'basic' && passwordInput) passwordInput.value = ''; const tokenInput = document.getElementById('bearerToken');
if (tokenInput) tokenInput.value = '';
}
if (authType !== 'basic') {
if (usernameInput) usernameInput.value = '';
if (passwordInput) passwordInput.value = '';
}
} }
function toggleFetchReferenceBundles() { function toggleFetchReferenceBundles() {
if (validateReferencesCheckbox && fetchReferenceBundlesGroup) { if (validateReferencesCheckbox && fetchReferenceBundlesGroup) {
@ -260,6 +266,7 @@ document.addEventListener('DOMContentLoaded', () => {
useLocalHapi = !useLocalHapi; useLocalHapi = !useLocalHapi;
if (useLocalHapi) fhirServerUrlInput.value = ''; if (useLocalHapi) fhirServerUrlInput.value = '';
updateServerToggleUI(); updateServerToggleUI();
updateAuthInputsUI();
resourceTypesDiv.style.display = 'none'; resourceTypesDiv.style.display = 'none';
fetchedMetadataCache = null; fetchedMetadataCache = null;
console.log(`Server toggled: useLocalHapi=${useLocalHapi}`); console.log(`Server toggled: useLocalHapi=${useLocalHapi}`);
@ -308,8 +315,8 @@ document.addEventListener('DOMContentLoaded', () => {
fetchUrl = `${customUrl}/metadata`; fetchUrl = `${customUrl}/metadata`;
// Add authentication headers for the direct request to the custom server // Add authentication headers for the direct request to the custom server
const authType = authTypeSelect.value; const authType = authTypeSelect.value;
if (authType === 'bearer' && bearerTokenInput && bearerTokenInput.value) { if (authType === 'bearer' && document.getElementById('bearerToken') && document.getElementById('bearerToken').value) {
headers['Authorization'] = `Bearer ${bearerTokenInput.value}`; headers['Authorization'] = `Bearer ${document.getElementById('bearerToken').value}`;
} else if (authType === 'basic' && usernameInput && passwordInput && usernameInput.value && passwordInput.value) { } else if (authType === 'basic' && usernameInput && passwordInput && usernameInput.value && passwordInput.value) {
const credentials = btoa(`${usernameInput.value}:${passwordInput.value}`); const credentials = btoa(`${usernameInput.value}:${passwordInput.value}`);
headers['Authorization'] = `Basic ${credentials}`; headers['Authorization'] = `Basic ${credentials}`;
@ -404,15 +411,16 @@ document.addEventListener('DOMContentLoaded', () => {
if (!useLocalHapi && authTypeSelect) { if (!useLocalHapi && authTypeSelect) {
const authType = authTypeSelect.value; const authType = authTypeSelect.value;
formData.append('auth_type', authType); formData.append('auth_type', authType);
if (authType === 'bearer' && bearerTokenInput) { if (authType === 'bearer') {
if (!bearerTokenInput.value) { const bearerToken = document.getElementById('bearerToken').value.trim();
if (!bearerToken) {
alert('Please enter a Bearer Token.'); alert('Please enter a Bearer Token.');
retrieveButton.disabled = false; retrieveButton.disabled = false;
if (spinner) spinner.style.display = 'none'; if (spinner) spinner.style.display = 'none';
if (icon) icon.style.display = 'inline-block'; if (icon) icon.style.display = 'inline-block';
return; return;
} }
formData.append('bearer_token', bearerTokenInput.value); formData.append('bearer_token', bearerToken);
} else if (authType === 'basic' && usernameInput && passwordInput) { } else if (authType === 'basic' && usernameInput && passwordInput) {
if (!usernameInput.value || !passwordInput.value) { if (!usernameInput.value || !passwordInput.value) {
alert('Please enter both Username and Password for Basic Authentication.'); alert('Please enter both Username and Password for Basic Authentication.');