Skip to content

Commit

Permalink
updating to latest
Browse files Browse the repository at this point in the history
  • Loading branch information
@techno-newb
techno-newb committed Oct 21, 2023
1 parent 35493bf commit 04d82f7
Show file tree
Hide file tree
Showing 8 changed files with 283 additions and 368 deletions.
168 changes: 124 additions & 44 deletions app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ class App {
patientEverythingToggleContainer: document.getElementById(
"patient-everything-toggle-container"
),
editButton: document.getElementById("edit-button"),
};
}

Expand All @@ -42,6 +43,9 @@ class App {
// Setup event listeners for the UI elements based on the capability statement
this.setupEventListeners(capabilityStatement);
}

// Build the query string when the page loads
this.buildQueryString();
}

// Asynchronous function to fetch and validate the capability statement
Expand Down Expand Up @@ -112,22 +116,55 @@ class App {

// Set up the event listeners for the pagination buttons
this.setupPaginationButtons();

// Add an event listener to the "Edit" button that opens the edit page when clicked
this.getElement.editButton.addEventListener("click", () =>
this.openEditPage(this.currentResource)
);

// Add an event listener to the read operation toggle
this.getElement.readOperationToggle.addEventListener("change", () => {
this.buildQueryString();
});

// Add an event listener to the patient everything operation toggle
this.getElement.patientEverythingToggle.addEventListener("change", () => {
this.buildQueryString();
});
}

openEditPage(resource) {
// Get the JSON representation of the FHIR resource
const resourceJson = JSON.stringify(resource, null, 2);

// Encode the JSON string so it can be included in a URL
const encodedJson = encodeURIComponent(resourceJson);

// Get the server URL
const serverUrl = this.getElement.serverUrl.value;

// Encode the server URL so it can be included in a URL
const encodedServerUrl = encodeURIComponent(serverUrl);

// Open the edit page in a new tab and pass the JSON and server URL as URL parameters
window.open(
`./pages/editor.html?resource=${encodedJson}&serverUrl=${encodedServerUrl}`,
"_blank"
);
}

// Function to set up event listeners for pagination buttons
setupPaginationButtons() {
// Add an event listener to the "Next Page" button
// When the button is clicked, it retrieves the next page of results
this.getElement.nextPageButton.addEventListener(
"click",
() => this.getNextPage()
this.getElement.nextPageButton.addEventListener("click", () =>
this.getNextPage()
);

// Add an event listener to the "Previous Page" button
// When the button is clicked, it retrieves the previous page of results
this.getElement.previousPageButton.addEventListener(
"click",
() => this.getPreviousPage()
this.getElement.previousPageButton.addEventListener("click", () =>
this.getPreviousPage()
);
}

Expand Down Expand Up @@ -156,6 +193,9 @@ class App {

// Populate the parameters for the selected resource based on the capability statement
this.populateParameters(selectedResource, capabilityStatement);

// Build the query string when the resource type is changed
this.buildQueryString();
}

// Function to handle the event when the form is submitted
Expand Down Expand Up @@ -238,25 +278,30 @@ class App {

// Method to handle addition of a new parameter by the user
addParameter() {
// Retrieve user input for parameter name and value
const parameterName = this.getElement.parameterNameInput.value;
const parameterValue = this.getElement.parameterValueInput.value;

// If both parameter name and value are not empty
if (parameterName && parameterValue) {
// Create a container element to display the user added parameter
const parameterContainer = this.createParameterContainer(
parameterName,
parameterValue
);

// Append this new parameter container to the parameters container element
this.getElement.parametersContainer.appendChild(parameterContainer);
let parameterContainer;
if (this.getElement.addParameterButton.dataset.editing) {
const parameterContainerId =
this.getElement.addParameterButton.dataset.editing;
parameterContainer = document.getElementById(parameterContainerId);
parameterContainer.querySelector(".userParameterName").innerText =
parameterName;
parameterContainer.querySelector(".userParameterValue").innerText =
parameterValue;
this.getElement.addParameterButton.innerText = "Add Parameter";
delete this.getElement.addParameterButton.dataset.editing;
} else {
parameterContainer = this.createParameterContainer(
parameterName,
parameterValue
);
this.getElement.parametersContainer.appendChild(parameterContainer);
}

// Rebuild the query string to include this new parameter
this.buildQueryString();

// Clear the parameter input fields for next entry
this.getElement.parameterNameInput.value = "";
this.getElement.parameterValueInput.value = "";
}
Expand Down Expand Up @@ -320,11 +365,14 @@ class App {
const searchParams = collectSearchParams();

// Create an instance of URLSearchParams with the collected search parameters
const queryParams = new URLSearchParams(searchParams);
const queryParams = new URLSearchParams();
for (const [key, value] of searchParams) {
queryParams.append(key, value);
}

// Check if the read operation toggle is checked
const isReadOperation = this.getElement.readOperationToggle.checked;

// Check if the patient everything operation is checked and the selected resource is 'Patient'
const isPatientEverything =
this.getElement.patientEverythingToggle.checked &&
Expand All @@ -333,33 +381,33 @@ class App {
// Start building the URL with the server URL and the selected resource
let queryString = `${serverUrl}/${resourceType}`;

// If it's a read operation and there's an _id parameter, append it to the URL
if (isReadOperation && searchParams._id) {
// Read operation
queryString += `/${searchParams._id}`;
} else if (isPatientEverything) {
// If it's a patient everything operation, append '$everything' to the URL
// Find the _id parameter in the searchParams array
const idParam = searchParams.find((param) => param[0] === "_id");

// If it's a patient everything operation, append '$everything' to the URL
if (isPatientEverything) {
// If there's an _id parameter, append it to the URL before '$everything'
if (searchParams._id) {
if (idParam) {
// Patient $everything operation with _id
queryString += `/${searchParams._id}/$everything`;
queryString += `/${idParam[1]}/$everything`;
// Remove the _id parameter from the queryParams
queryParams.delete("_id");
} else {
// Patient $everything operation without _id
queryString += `/$everything`;
}

//TODO - I think this IF/ELSE statement is doing the same thing
// If there are any parameters left after deleting _id, append them to the URL
if (queryParams.toString().length > 0) {
queryString += `?${queryParams}`;
}
} else {
// If there are any parameters, append them to the URL
const hasSearchParams = Array.from(queryParams).length > 0;
queryString += `${hasSearchParams ? "?" : ""}${queryParams}`;
} else if (isReadOperation && idParam) {
// If it's a read operation and there's an _id parameter, append it to the URL
// Read operation
queryString += `/${idParam[1]}`;
// Remove the _id parameter from the queryParams
queryParams.delete("_id");
}

// If there are any parameters, append them to the URL
const hasSearchParams = Array.from(queryParams).length > 0;
queryString += `${hasSearchParams ? "?" : ""}${queryParams}`;

// Update the query string output text in the form
if (this.getElement.queryStringOutput) {
this.getElement.queryStringOutput.innerText = queryString;
Expand Down Expand Up @@ -460,6 +508,8 @@ class App {
const cardBody = createCardBody(resource);

card.appendChild(cardBody);

// Add an event listener to the card
card.addEventListener("click", () => {
const jsonString = JSON.stringify(resource, null, 2);

Expand All @@ -481,14 +531,24 @@ class App {
this.getElement.modal.style.display = "none";
}
};

// Store the current resource
this.currentResource = resource;

// Show the "Edit" button
this.getElement.editButton.style.display = "block";
});

return card;
}

createParameterContainer(parameterName, parameterValue) {
const parameterContainer = document.createElement("div");
parameterContainer.classList.add("form-group");

// Assign an id to the parameterContainer
parameterContainer.id = `param-${parameterName}`;

const parameterNameElement = document.createElement("span");
parameterNameElement.classList.add("userParameterName");
parameterNameElement.label = "Parameter";
Expand All @@ -498,18 +558,38 @@ class App {
parameterValueElement.classList.add("userParameterValue");
parameterValueElement.innerText = parameterValue;

const editButton = document.createElement("button");
editButton.classList.add("edit-button");
editButton.classList.add("btn");
editButton.innerText = "Edit";
editButton.addEventListener("click", (e) => {
e.preventDefault(); // Prevent the form from being submitted
this.getElement.parameterNameInput.value = parameterName;
this.getElement.parameterValueInput.value = parameterValue;
this.getElement.addParameterButton.innerText = "Update Parameter";
this.getElement.addParameterButton.dataset.editing = parameterContainer;
this.getElement.addParameterButton.dataset.editing =
parameterContainer.id;
});

const removeButton = document.createElement("button");
removeButton.classList.add("remove-button");
removeButton.classList.add("btn");
removeButton.innerText = "x";
removeButton.innerText = "Remove";
removeButton.addEventListener("click", () => {
parameterContainer.remove();
this.buildQueryString();
});

const buttonContainer = document.createElement("div");
buttonContainer.classList.add("button-container");

buttonContainer.appendChild(editButton);
buttonContainer.appendChild(removeButton);

parameterContainer.appendChild(parameterNameElement);
parameterContainer.appendChild(parameterValueElement);
parameterContainer.appendChild(removeButton);
parameterContainer.appendChild(buttonContainer);

return parameterContainer;
}
Expand Down Expand Up @@ -596,15 +676,15 @@ function createTokenInput(parameter) {
}

function collectSearchParams() {
const searchParams = {};
const searchParams = [];

document
.querySelectorAll(
"#parameters-container select, #parameters-container input"
)
.forEach((input) => {
if (input.value !== "") {
searchParams[input.name] = input.value;
searchParams.push([input.name, input.value]);
}
});

Expand All @@ -621,7 +701,7 @@ function collectSearchParams() {
const parameterValue = parameterValueElement.innerText;

if (parameterName && parameterValue) {
searchParams[parameterName] = parameterValue;
searchParams.push([parameterName, parameterValue]);
}
}
});
Expand Down
5 changes: 3 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,12 @@
</div>
<div class="form-group form-operation-toggle">
<input type="checkbox" id="read-operation-toggle" name="read-operation-toggle" class="retro-checkbox">
<label for="read-operation-toggle">_id Read Operation<span class="tooltip-text">If checked the _id string will be formatted as [Resource]/[Id] instead of [Resource]?_id=[Id]</span>
<label for="read-operation-toggle">_id Read Operation Override<span class="tooltip-text">If checked the _id value will be formatted in the search string as [Resource]/{id} instead of [Resource]?_id={id}</span>
</label>
</div>
<div class="form-group" id="patient-everything-toggle-container" style="display: none;">
<input type="checkbox" id="patient-everything-toggle" name="patient-everything-toggle" class="retro-checkbox">
<label for="patient-everything-toggle">Patient $everything Operation<span class="tooltip-text">If checked followed by an _id parameter the query string will be formatted as Patient/[Id]/$everything</span>
<label for="patient-everything-toggle">Patient $everything Operation<span class="tooltip-text">Appends $everything to the request. If provided, the _id value will be formatted in the search string as Patient/{id}/$everything</span>
</label>
</div>
</div>
Expand Down Expand Up @@ -75,6 +75,7 @@ <h2>Query Result</h2>
<div class="modal-content">
<span id="close-modal" class="close">&times;</span>
<pre><code id="json-display" class="language-json json-display"></code></pre>
<button class="btn" id="edit-button" style="display: none;">Edit</button>
</div>
</div>
<script src="app.js"></script>
Expand Down
42 changes: 42 additions & 0 deletions pages/editor.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Edit FHIR Resource</title>
<link rel="stylesheet" href="../resources/styles.css">
</head>
<body>
<div class="container">
<h1>Edit FHIR Resource</h1>
<div class="server-container">
<div class="form-group">
<label for="server-url">Server URL:</label>
<input type="text" id="server-url">
</div>
<div class="form-group">
<label for="http-method">HTTP Method:</label>
<select id="http-method">
<option value="PUT">PUT</option>
<option value="POST">POST</option>
</select>
</div>
<div class="form-group">
<button class="btn" id="save-button">Save Resource</button>
</div>
</div>
<div class="server-container">
<div class="form-group">
<textarea id="json-editor"></textarea>
</div>
</div>
<div id="json-modal" class="modal">
<div class="modal-content">
<span id="close-modal" class="close">&times;</span>
<pre><code id="json-display" class="language-json json-display"></code></pre>
</div>
</div>
</div>
<script src="editor.js"></script>
</body>

</html>
Loading

0 comments on commit 04d82f7

Please sign in to comment.