Skip to content

W
web-ui
Commit 1216179c by Owen Ryan Ang
Options

pwede na to

parent d274021d
Showing with 776 additions and 442 deletions
WebGde/.classpath
......@@ -37,7 +37,7 @@
<attribute name="optional" value="true"/>
</attributes>
</classpathentry>
<classpathentry kind="con" path="fish.payara.eclipse.tools.server.lib.system">
<classpathentry kind="con" path="org.eclipse.payara.tools.lib.system">
<attributes>
<attribute name="owner.project.facets" value="jst.web"/>
</attributes>
......
WebGde/.settings/org.eclipse.wst.common.project.facet.core.xml
<?xml version="1.0" encoding="UTF-8"?>
<faceted-project>
<runtime name="Payara"/>
<runtime name="Payara Server 5 (5.2022.5)"/>
<fixed facet="jst.web"/>
<fixed facet="java"/>
<fixed facet="wst.jsdt.web"/>
......
WebGde/WebContent/WebGde-Widgets/BPO/rejectElement.js
......@@ -2,6 +2,7 @@ import { createLoadingScreen, removeLoadingScreen, resetGDE } from "../../script
import { SCHEMA_FILE_PATH } from "../DataInputWidget/config.js";
import { validateInput } from "../DataInputWidget/validateInput.js";
import { goBackToElementListViewer } from "../ElementListWidget/ElementListWidget.js";
import { createLoadingModal, removePrompt } from "../LoadingModal/LoadingModal.js";
import { PROJECT_CODE } from "../Submit/config.js";
import { ENCODING_PASS, REASON_LIST } from "../config.js";
import { createInfoModal, createModal } from "../genericPopup/genericPopup.js";
......@@ -38,7 +39,7 @@ async function rejectElement() {
document.getElementById("backdropContainer").remove();
if(goBackToElementListViewer()){
resetGDE();
removeLoadingScreen();
removePrompt();
};
}
createInfoModal(successfulReturn, 'OK', "Element rejected");
......@@ -97,102 +98,79 @@ async function rejectElement() {
createInfoModal(successfulReturn,"Log out" ,"Error ${response.status}: Returning element");
}
}
//window for reason rejecting element
// var rejectButton = document.getElementById("reject");
// rejectButton.onclick = function () {
// createRejectWindow();
// /*let screenMain = document.getElementById("reject_window");
// /* screenMain.style.display = 'block';*/
// rejectButton.disabled = true;
// //rejectElement();
// //const fieldForm = document.getElementById("fields");
// //fieldForm.querySelector('input[type="submit"]').click();
// };
// window.addEventListener('keydown', function(e) {
// if (e.ctrlKey == true && e.keyCode == 69){
// createRejectWindow();
// rejectButton.disabled = true;
// }
// });
export function createRejectWindow(){
createLoadingScreen();
let popUpDisplay = document.createElement("div");
popUpDisplay.id = "rejectWindow";
popUpDisplay.classList.add("modal-container")
let screenMain = document.createElement('div');
screenMain.id = 'parent_Window';
// screenMain.classList.add('modal');
screenMain.classList.add('reject-modal');
document.body.appendChild(screenMain);
export function createRejectWindow() {
var backdropContainer = document.getElementById("backdropContainer");
if (backdropContainer) {
backdropContainer.remove();
}
backdropContainer = document.createElement("div");
backdropContainer.id = "backdropContainer";
var popupContainer = document.createElement("div");
popupContainer.id = "popupContainer";
var popupContent = document.createElement("div");
popupContent.id = "popupContent";
var popupTitle = document.createElement("div"); // Use a div instead of p for consistency
popupTitle.innerHTML = '<span class="icon"></span> Reject Element';
popupTitle.classList.add("error-top-div"); // Add the headerLabel class
// Create a div for the radio options
var radioOptions = document.createElement("div");
var resList = REASON_LIST.split(",");
let rejectLabel = document.createElement("div");
rejectLabel.textContent = "Reject";
rejectLabel.classList.add("headerLabel");
screenMain.appendChild(rejectLabel);
for(let i = 0; i < resList.length; i++){
screenMain.appendChild(checkLabelComponent(resList[i],resList[i],"check" + (i + 1)));
}
for (let i = 0; i < resList.length; i++) {
radioOptions.appendChild(checkLabelComponent(resList[i], resList[i], "check" + (i + 1)));
}
let buttonPanel = document.createElement("div");
buttonPanel.classList.add("floatingButtonPanel");
let cancelButton = createButtonElem("normalButton", "Cancel");
let okButton = createButtonElem("emphasizeButton", "Ok");
buttonPanel.append(cancelButton);
buttonPanel.append(okButton);
screenMain.appendChild(checkLabelComponent('Others','','check5'));
screenMain.appendChild(createMessageBox('MssgBox'));
screenMain.appendChild(buttonPanel);
// Include the 'Others' check label component
radioOptions.appendChild(checkLabelComponent('Others', '', 'check5'));
// Create a div for the message box
var messageBox = createMessageBox('MssgBox');
// Create a div for the button panel
var buttonPanel = document.createElement("div");
buttonPanel.classList.add("modal-button-container");
var cancelButton = createButtonElem("modal-button", "Cancel");
var okButton = createButtonElem("modal-button", "Reject");
okButton.setAttribute('id','rejectButton');
cancelButton.setAttribute('id','cancelButtonModal');
buttonPanel.appendChild(cancelButton);
buttonPanel.appendChild(okButton);
popupContent.appendChild(popupTitle);
popupContent.appendChild(radioOptions);
popupContent.appendChild(messageBox);
popupContent.appendChild(buttonPanel);
popupContainer.appendChild(popupContent);
backdropContainer.appendChild(popupContainer);
document.body.appendChild(backdropContainer);
setRadioHandler('MssgBox');
okButton.onclick = function () {
if (document.querySelector('input[name="rejectRadio"]:checked').value != null) {
if (document.querySelector('input[name="rejectRadio"]:checked').value.trim().length != 0) {
saveExceptionToXml();//save xml
rejectElement();//reject on bpo
document.getElementById("rejectWindow").remove();
// popUpDisplay.remove();
// var fileName = sessionStorage.getItem("file_Name");
// if(fileName !== null && fileName !== undefined){
// document.getElementById("controlsContainer").outerHTML="";
// }else{
// document.getElementById("TiffViewer_ButtonContainer").outerHTML="";
// }
// return;
}
createLoadingModal("Rejecting Element", "Please Wait...", null, null, null);
if (document.querySelector('input[name="rejectRadio"]:checked').value != null) {
if (document.querySelector('input[name="rejectRadio"]:checked').value.trim().length != 0) {
saveExceptionToXml(); //save xml
rejectElement(); //reject on bpo
document.getElementById("popupContainer").remove();
}
document.getElementById('MssgBox').value = "";
document.getElementById('rejectSubmit').click();
}
cancelButton.onclick = function () {
document.getElementById("rejectWindow").remove();
removeLoadingScreen();
}
}
popUpDisplay.append(screenMain);
popUpDisplay.style.display = "block";
document.body.append(popUpDisplay);
}
cancelButton.onclick = function () {
document.getElementById("backdropContainer").remove();
}
document.getElementById("popupContainer").style.display = "block";
}
......
WebGde/WebContent/WebGde-Widgets/BPO/returnElement.js
......@@ -2,10 +2,10 @@ import { createLoadingScreen, removeLoadingScreen, resetGDE } from "../../script
import { SCHEMA_FILE_PATH } from "../DataInputWidget/config.js";
import { validateInput } from "../DataInputWidget/validateInput.js";
import { goBackToElementListViewer } from "../ElementListWidget/ElementListWidget.js";
import { removePrompt, showPrompt } from "../LogInWidget/LogInPrompt.js";
import { createLoadingModal, removePrompt } from "../LoadingModal/LoadingModal.js";
import { PROJECT_CODE } from "../Submit/config.js";
import { interval } from "../captureMetrics/captureMetrics.js";
import { createInfoModal, createModal } from "../genericPopup/genericPopup.js";
import { createConfirmationModal, createInfoModal, createModal } from "../genericPopup/genericPopup.js";
import { BPO_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_STORAGE } from "../globalVariable.js";
import { getUrlReturnElement } from "./bpoService.js";
......@@ -86,38 +86,13 @@ function returnSaveXML(){
}
export function createReturnWindow() {
let popUpDisplay = document.createElement("div");
popUpDisplay.id = "returnWindow";
popUpDisplay.classList.add("modal-container")
let screenMain = document.createElement('div');
screenMain.id = 'parent_Window';
screenMain.classList.add('return-modal');
document.body.appendChild(screenMain);
let returnLabel = document.createElement("div");
returnLabel.textContent = "Return Element?";
returnLabel.classList.add("headerLabel");
screenMain.appendChild(returnLabel);
let buttonPanel = document.createElement("div");
buttonPanel.classList.add("floatingButtonPanel");
let cancelButton = createButtonElem("normalButton", "Cancel");
let okButton = createButtonElem("emphasizeButton", "Ok");
buttonPanel.append(cancelButton);
buttonPanel.append(okButton);
screenMain.appendChild(buttonPanel);
okButton.onclick = async function() {
showPrompt("Returning Element", "Please wait...", null, null, null);
async function returnButtonFunction() {
createLoadingModal("Returning Element", "Please wait...", null, null, null);
let response = await returnElementBPO(sessionStorage.getItem("element_id"));
if (response.status == 200) {
sessionStorage.removeItem("section");
sessionStorage.removeItem("doctype");
removePrompt();
document.getElementById("returnWindow").remove();
goBackToElementListViewer();
}else{
......@@ -127,14 +102,8 @@ export function createReturnWindow() {
createInfoModal(errorReturn, 'Error', "Error ${response.status}: Returning element");
}
}
cancelButton.addEventListener("click", function() {
document.getElementById("returnWindow").remove();
});
popUpDisplay.append(screenMain);
popUpDisplay.style.display = "block";
document.body.append(popUpDisplay);
createConfirmationModal(returnButtonFunction, "Return to Item List Menu?");
}
function createButtonElem(className, buttonName, icon) {
......
WebGde/WebContent/WebGde-Widgets/DataInputWidget/Assets/delete-button-svgrepo-com.svg 0 → 100644
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#006BA6" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 482.428 482.429"
xml:space="preserve">
<g>
<g>
<path d="M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098
c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117
h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828
C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879
C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096
c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266
c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979
V115.744z"/>
<path d="M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07
c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z"/>
<path d="M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07
c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z"/>
<path d="M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07
c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z"/>
</g>
</g>
</svg>
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/DataInputWidget/DataInputWidget.css
......@@ -20,7 +20,7 @@ html, body {
* {
-webkit-font-smoothing: auto;
font-size: 14px;
letter-spacing: 0.1em;
/* letter-spacing: 0.1em; */
text-rendering: optimizeLegibility;
font-weight: normal;
font-family: Open Sans, sans-serif;
......@@ -333,6 +333,56 @@ input[type=file]:hover {
overflow: hidden;
}
.image-container {
background-color: #a0c4dc;
padding: 8px;
border-radius: 8px;
border-style: solid;
border-color: #5da1c6;
display: flex;
justify-content: space-between;
}
.thumbnail {
height: 40px;
width: 40px;
border-radius: 4px;
}
.file-details {
width: 60%;
}
.file-name {
color: #0f2853;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-size {
color: #678aa7;
}
.close-icon-container {
width: 40px;
height: 40px;
background-color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.close-icon {
background-image: url('Assets/delete-button-svgrepo-com.svg');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
width: 18px;
height: 18px;
}
.fingerprint-capture button {
width: 75%;
border-radius: 8px;
......
WebGde/WebContent/WebGde-Widgets/DataInputWidget/ImageCapture/captureImage.js
export function processCapture(key, imgFilename) {
export function processCapture(key, imgFilename, imgFileSize) {
const form = document.getElementById('fields');
const img = document.getElementById(`${key}_zz`);
const thumb = document.getElementById(`${key}_thumbnail`);
const filename = document.getElementById(`${key}_fname`);
const x = document.getElementById(`${key}_x`);
// const filenameString = generateMediaFileName(sessionStorage.getItem('user_id'));
const filenameString = imgFilename;
// get image container
const container = document.getElementById(`${key}_outputContainer`);
container.style.display = 'flex';
container.classList.add('image-container');
// Create thumbnail preview on the left
const thumbnail = document.createElement('img');
thumbnail.classList.add('thumbnail');
thumbnail.id = `${key}_thumbnail`;
thumbnail.src = document.getElementById(`${key}_zz`).src;
container.appendChild(thumbnail);
// Create file details in the center
const detailsContainer = document.createElement('div');
detailsContainer.classList.add('file-details');
// File name
const fileName = document.createElement('div');
fileName.classList.add('file-name')
fileName.textContent = imgFilename;
detailsContainer.appendChild(fileName);
// File size
const fileSize = document.createElement('div');
fileSize.classList.add('file-size');
fileSize.textContent = `${imgFileSize}`;
detailsContainer.appendChild(fileSize);
// Append details container to the main container
container.appendChild(detailsContainer);
// Create delete icon container
const closeIconContainer = document.createElement('div');
closeIconContainer.classList.add('close-icon-container');
container.appendChild(closeIconContainer);
// Create delete icon
const closeIcon = document.createElement('span');
closeIcon.classList.add('x-icon', 'close-icon', 'x');
closeIcon.id = `${key}_x`;
// Append the close icon to the icon container
closeIconContainer.appendChild(closeIcon);
// Create hidden inputs for fname and file content
const hiddenFnameInput = document.createElement('input');
hiddenFnameInput.setAttribute('id', `${key}`);
......@@ -20,37 +60,23 @@ export function processCapture(key, imgFilename) {
hiddenFileContentInput.setAttribute('name', 'hidden_file_content');
form.appendChild(hiddenFileContentInput);
img.style.display = 'inline';
img.style.width = '100%'; // Set maximum width to 100% of the container
img.style.height = '100%'; // Set maximum height to a specific value (adjust as needed)
thumb.style.display = 'none';
filename.textContent = filenameString;
filename.style.display = 'inline';
// Set the hidden inputs when a file is selected
hiddenFnameInput.value = filenameString;
hiddenFnameInput.display = '';
hiddenFileContentInput.value = img.src; // This will store the base64-encoded content of the file
hiddenFileContentInput.display = '';
document.getElementById(`${key}_buttonsContainer-video`).style.display = 'none';
x.style.display = 'block';
x.style.position = 'absolute';
document.getElementById(`${key}_container`).style.display = 'none';
document.getElementById(`${key}_x`).addEventListener('click', () => {
img.style.display = 'none';
img.src = '';
thumb.style.display = 'none';
x.style.display = 'none';
filename.style.display = 'none';
filename.textContent = '';
document.getElementById(`${key}_buttonsContainer-video`).style.display = 'flex';
container.innerHTML = '';
container.style.display = 'none';
document.getElementById(`${key}_container`).style.display = 'block';
// Clear the hidden fields
hiddenFnameInput.display = 'none';
hiddenFnameInput.value = '';
hiddenFileContentInput.display = 'none';
hiddenFileContentInput.value = '';
hiddenFnameInput.remove();
hiddenFileContentInput.remove();
});
}
......
WebGde/WebContent/WebGde-Widgets/DataInputWidget/generateFields.js
......@@ -523,9 +523,12 @@ const inputImageCapture = (key, validation) => {
const container = document.createElement('div');
const container2 = document.createElement('div');
const outputContainer = document.createElement('div');
container.appendChild(container2);
container.appendChild(outputContainer);
container2.classList.add('image-capture');
container2.setAttribute('id', `${key}_container`);
outputContainer.setAttribute('id', `${key}_outputContainer`);
const input = document.createElement('input');
input.setAttribute('id', `${key}_attachedMedia`);
......@@ -546,116 +549,6 @@ const inputImageCapture = (key, validation) => {
capturedImage.setAttribute('type', 'hidden');
capturedImage.setAttribute('style', 'display: none');
// Add an event listener to handle when a file is selected
input.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
// Create hidden inputs for fname and file content
const hiddenFnameInput = document.createElement('input');
hiddenFnameInput.setAttribute('id', `${key}`);
hiddenFnameInput.setAttribute('type', 'hidden');
hiddenFnameInput.setAttribute('name', 'hidden_fname');
container2.appendChild(hiddenFnameInput);
const hiddenFileContentInput = document.createElement('input');
hiddenFileContentInput.setAttribute('id', `${key}`);
hiddenFileContentInput.setAttribute('type', 'hidden');
hiddenFileContentInput.setAttribute('name', 'hidden_file_content');
container2.appendChild(hiddenFileContentInput);
const img = document.getElementById(`${key}_zz`);
const thumb = document.getElementById(`${key}_thumbnail`);
const x = document.getElementById(`${key}_x`);
if (file.type.startsWith('image/')) {
// If it's an image file, display it directly
const reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result;
img.style.display = 'inline';
thumb.style.display = 'none';
filename.textContent = file.name;
filename.style.display = 'inline';
// Set the hidden inputs when a file is selected
hiddenFnameInput.value = file.name;
hiddenFnameInput.display = '';
hiddenFileContentInput.value = e.target.result; // This will store the base64-encoded content of the file
hiddenFileContentInput.display = '';
document.getElementById(`${key}_buttonsContainer-video`).style.display = 'none';
x.style.display = 'block';
x.style.position = 'absolute';
document.getElementById(`${key}_x`).addEventListener('click', () => {
img.style.display = 'none';
img.src = '';
thumb.style.display = 'none';
x.style.display = 'none';
input.value = ''
filename.style.display = 'none';
filename.textContent = '';
document.getElementById(`${key}_buttonsContainer-video`).style.display = 'flex';
// Clear the hidden fields
container2.removeChild(hiddenFnameInput);
container2.removeChild(hiddenFileContentInput);
});
};
reader.readAsDataURL(file);
} else if (file.type.startsWith('video/')) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
thumbnail.src = e.target.result;
thumbnail.style.display = 'inline';
filename.textContent = file.name;
filename.style.display = 'inline';
// Set the hidden inputs when a file is selected
hiddenFnameInput.value = file.name;
hiddenFnameInput.display = '';
hiddenFileContentInput.value = e.target.result; // This will store the base64-encoded content of the file
hiddenFileContentInput.display = '';
// Hide the img tag since we're showing the video thumbnail
document.getElementById(`${key}_zz`).style.display = 'none';
document.getElementById(`${key}_buttonsContainer-video`).style.display = 'none';
x.style.display = 'block';
x.style.position = 'absolute';
document.getElementById(`${key}_x`).addEventListener('click', () => {
img.style.display = 'none';
img.src = '';
thumb.style.display = 'none';
x.style.display = 'none';
filename.style.display = 'none';
filename.textContent = '';
document.getElementById(`${key}_buttonsContainer-video`).style.display = 'flex';
input.value = ''
// Clear the hidden fields
container2.removeChild(hiddenFnameInput);
container2.removeChild(hiddenFileContentInput);
});
}
}
else {
console.log('Unsupported file type');
}
}
});
const x = document.createElement('span')
x.setAttribute('id', `${key}_x`)
x.setAttribute('class', 'x');
x.setAttribute('style', 'display: none')
x.textContent = 'x';
const dash = document.createElement('label');
dash.setAttribute('class', 'dash');
dash.innerHTML = ' or ';
const input1 = document.createElement('input');
input1.setAttribute('id', `${key}`);
input1.setAttribute('name', `${key}`);
......@@ -667,6 +560,7 @@ const inputImageCapture = (key, validation) => {
const input2 = document.createElement('button');
input2.setAttribute('type', 'button');
input2.setAttribute('id', `${key}`);
input2.setAttribute('name', `${key}`);
input2.innerHTML = '<span class="icon"></span> Camera';
......@@ -676,9 +570,6 @@ const inputImageCapture = (key, validation) => {
window.processCapture = processCapture;
const img = document.createElement('img');
const thumbnail = document.createElement('video');
thumbnail.setAttribute('style', 'display: none');
thumbnail.setAttribute('id', `${key}_thumbnail`);
img.setAttribute('id', `${key}_zz`);
img.setAttribute('style', 'display: none');
......@@ -689,25 +580,14 @@ const inputImageCapture = (key, validation) => {
container2.classList.add('input-valid');
});
const filename = document.createElement('span');
filename.setAttribute('id', `${key}_fname`);
filename.setAttribute('name', `${key}`);
filename.setAttribute('type', 'text');
filename.setAttribute('style', 'display: none; font-size: inherit;');
// Append all elements to the container
const container3 = document.createElement('div');
container2.appendChild(x);
container3.setAttribute('id', `${key}_buttonsContainer-video`)
container3.setAttribute('class', 'buttonsContainer');
container3.appendChild(input);
// container3.appendChild(input1);
// container3.appendChild(dash);
container3.appendChild(input2);
container2.appendChild(container3)
container2.appendChild(img);
container2.appendChild(thumbnail);
container2.appendChild(filename);
mandatory ? input.setAttribute('required', 'true') : null
......@@ -1518,7 +1398,6 @@ const inputChecklist = (key, validation) => {
inputTextBox.id = `dependentTB_${key}`;
inputTextBox.classList.add('checkboxOther');
inputTextBox.style.display = 'none';
inputTextBox.style.padding = '0px';
dropdownContent.appendChild(inputTextBox);
// Add event listener to the "other" checkbox
......
WebGde/WebContent/WebGde-Widgets/DataInputWidget/style.css
* {
-webkit-font-smoothing: auto;
font-size: 16px;
letter-spacing: 0.1em;
/* letter-spacing: 0.1em; */
text-rendering: optimizeLegibility;
font-weight: normal;
font-family: Inter;
......
WebGde/WebContent/WebGde-Widgets/ElementListWidget/Assets/down-arrow-svgrepo-com.svg 0 → 100644
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#98A3B5" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 330 330" xml:space="preserve">
<path id="XMLID_225_" d="M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393
c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393
s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z"/>
</svg>
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/ElementListWidget/Assets/profile-user-svgrepo-com.svg 0 → 100644
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#98A3B5" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 45.532 45.532"
xml:space="preserve">
<g>
<path d="M22.766,0.001C10.194,0.001,0,10.193,0,22.766s10.193,22.765,22.766,22.765c12.574,0,22.766-10.192,22.766-22.765
S35.34,0.001,22.766,0.001z M22.766,6.808c4.16,0,7.531,3.372,7.531,7.53c0,4.159-3.371,7.53-7.531,7.53
c-4.158,0-7.529-3.371-7.529-7.53C15.237,10.18,18.608,6.808,22.766,6.808z M22.761,39.579c-4.149,0-7.949-1.511-10.88-4.012
c-0.714-0.609-1.126-1.502-1.126-2.439c0-4.217,3.413-7.592,7.631-7.592h8.762c4.219,0,7.619,3.375,7.619,7.592
c0,0.938-0.41,1.829-1.125,2.438C30.712,38.068,26.911,39.579,22.761,39.579z"/>
</g>
</svg>
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.css
......@@ -20,20 +20,18 @@ body {
/* Main Container */
#containerId {
max-width: 900px;
margin: 2rem 1rem;
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 2rem;
overflow: hidden;
display: flex;
flex-direction: column;
}
}
/* Element List Wrapper */
.element-list {
max-height: 70vh;
height: 100%;
overflow-y: auto;
padding-bottom: 1rem;
margin-bottom: 1rem;
......@@ -44,32 +42,44 @@ body {
.element-container {
display: flex;
flex-direction: column;
background-color: #fafafa;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 1.5rem;
padding: 1rem;
border: 1px solid #00000029;
transition: all 0.3s ease;
cursor: pointer;
}
.element-container:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.element-container.selected {
background-color: #d3e5ff;
border-color: #007bff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
color: white;
background-color: #006BA6;
border: 1px solid #00000029;
}
/* Element Item */
.element-item {
margin-top: 17px;
margin-bottom: 17px;
margin-left: 32px;
font-size: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.element-item span{
font-size: 20px;
font-weight: bold;
}
.element-arrow-icon {
width:24px;
height: 24px;
margin-right: 20px;
transform: rotate(180deg);
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
background-image: url('Assets/down-arrow-svgrepo-com.svg');
}
/* Element Details */
.extra-details {
margin-top: 1rem;
......@@ -77,23 +87,34 @@ body {
color: #7d7d7d;
}
.details-container {
padding: 22px 42px ;
background-color: #E7EAF1;
}
/* Detail Item */
.detail-item {
margin-top: 0.5rem;
padding: 0.5rem 0;
border-top: 1px solid #e0e0e0;
font-size: 0.9rem;
color: #7d7d7d;
color: #98A3B5;
white-space: normal;
overflow-wrap: break-word;
}
.detail-item span {
font-size: 18px;
}
/* Specific styles for the encode button */
#encode-btn {
width: 100%;
padding: 1rem 2rem;
border: none;
border-radius: 50px;
font-size: 1rem;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #007bff;
background-color: #006BA6;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.1s ease;
}
......@@ -112,7 +133,7 @@ body {
/* Style for disabled encode button */
#encode-btn.disabled {
background-color: #9fb3c8;
background-color: #94c1da;
/* Grayed out color */
cursor: not-allowed;
}
......@@ -143,6 +164,10 @@ body {
}
.button-container {
padding-top: 17px;
padding-bottom: 17px;
padding-left: 32px;
padding-right: 32px;
margin-top: auto;
display: flex;
justify-content: center;
......@@ -150,27 +175,106 @@ body {
gap: 2rem;
}
.element-list-top-div {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom-color: #006BA6;
border-bottom-style: solid;
border-bottom-width: thin;
}
#search-input {
padding: 8px;
margin-bottom: 10px;
margin-top: 12px;
margin-bottom: 12px;
margin-left: 20px;
margin-right: 10px;
width: 100%;
box-sizing: border-box;
/* Ensures padding doesn't increase its size */
border: 1px solid #ccc;
border-radius: 4px;
border-radius: 8px;
}
.user-profile-icon {
height: 35px;
width: 35px;
margin-right: 10px;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
background-image: url('Assets/profile-user-svgrepo-com.svg');
}
.encode-details-container {
background-color: white;
cursor: pointer;
height: auto;
width: 100%;
max-width: 100%;
border-bottom-left-radius: 19px;
border-bottom-right-radius: 19px;
z-index: 49;
transition: height 0.5s ease;
}
.element-id-container {
display: flex;
margin-bottom: 9px;
}
.back-icon {
height: 24px;
width: 20px;
transform: rotate(90deg);
margin-left: 18px;
margin-top: 12px;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
background-image: url('Assets/down-arrow-svgrepo-com.svg');
}
.element-id {
margin-top: 9px;
margin-left: 12px;
font-size: 20px;
font-weight: bold;
color: #006BA6;
}
.pull-tab {
border-top: solid;
border-color: #E5E8EC;
border-width: thin;
height: 19px;
display: flex;
justify-content: center;
align-items: center;
}
.line {
width: 25%;
height: 7px; /* Adjust the thickness of the line as needed */
background-color: #E5E8EC;
border-radius: 6px;
margin-top: 8px;
margin-bottom: 8px;
}
/* Media Queries */
@media (max-width: 768px) {
#containerId {
padding: 1rem;
}
.details-container-encode {
display: none;
max-height: 70vh;
overflow-y: auto;
}
.element-container,
button {
padding: 1rem;
}
.extra-detail {
font-size: 16px;
margin-top: 12px;
margin-bottom: 12px;
margin-left: 50px;
margin-right: 40px;
white-space: normal;
overflow-wrap: break-word;
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/ElementListWidget/ElementListWidget.js
import { createWebGdeInterface, removeLoadingScreen } from '../../script.js';
import { createReturnWindow } from '../BPO/returnElement.js';
import { populateFields } from '../DataInputWidget/generateFields.js';
import { ADD_NEW_OPTION, CURRENT_NODE, BPO_URL, DISPLAYED_DETAILS } from '../config.js';
import { DocumentControlWidget } from "../documentControlWidget/documentControlWidget.js";
......@@ -82,17 +83,29 @@ export class ElementListWidget {
// Initialize the encode button as disabled
this.global.encodeButton = document.createElement("button");
this.global.encodeButton.textContent = "ENCODE";
this.global.encodeButton.textContent = "Encode";
this.global.encodeButton.id = "encode-btn";
this.global.encodeButton.disabled = true;
this.global.encodeButton.classList.add("disabled");
// Create top div
const topDiv = document.createElement("div");
topDiv.classList.add("element-list-top-div");
// Create a search input field
const searchInput = document.createElement("input");
searchInput.placeholder = "Search elements...";
searchInput.id = "search-input";
searchInput.type = "text";
this.global.container.appendChild(searchInput);
topDiv.appendChild(searchInput);
this.global.container.appendChild(topDiv);
// Create user profile icon span
const userProfileIcon = document.createElement("span");
userProfileIcon.classList.add("user-profile-icon");
// Append user profile icon to topDiv
topDiv.appendChild(userProfileIcon);
// Event listener for search input
searchInput.addEventListener("input", () => {
......@@ -181,9 +194,16 @@ export class ElementListWidget {
elementIdSpan.textContent = element.elementId;
elementDiv.appendChild(elementIdSpan);
const elementArrow = document.createElement("span");
elementArrow.classList.add("element-arrow-icon");
elementDiv.appendChild(elementArrow);
elementContainer.appendChild(elementDiv);
elementList.appendChild(elementContainer);
elementArrow.addEventListener("click", () =>{
this.showExtraDetails(element, elementContainer);
});
// Click event listener for each element container
elementContainer.addEventListener("click", () => {
if (elementContainer.classList.contains("selected")) {
......@@ -192,8 +212,7 @@ export class ElementListWidget {
deselectAll();
elementContainer.classList.add("selected");
this.global.selectedElement = element;
this.global.queueIndex = element.queueIndex; // <-- Update the queueIndex here
this.showExtraDetails(element, elementContainer);
this.global.queueIndex = element.queueIndex; // <-- Update the queueIndex here
this.global.encodeButton.disabled = false;
this.global.encodeButton.classList.remove("disabled");
}
......@@ -208,6 +227,11 @@ export class ElementListWidget {
// Remove existing extra details if any
this.removeExtraDetails(elementContainer);
// Create container for extra details
const detailsContainer = document.createElement("div");
detailsContainer.classList.add("details-container");
// Check if there are any extra details
if (element.extraDetails && Object.keys(element.extraDetails).length > 0) {
const displayedKeys = DISPLAYED_DETAILS.split('|'); // Split into an array
......@@ -221,15 +245,17 @@ export class ElementListWidget {
detailSpan.textContent = `${key}: ${value}`;
detailDiv.appendChild(detailSpan);
elementContainer.appendChild(detailDiv);
detailsContainer.appendChild(detailDiv);
}
});
elementContainer.appendChild(detailsContainer);
}
}
removeExtraDetails(elementContainer) {
const detailsItems = elementContainer.querySelectorAll(".detail-item");
const detailsItems = elementContainer.querySelectorAll(".details-container");
if (detailsItems.length > 0) {
detailsItems.forEach(detailItem => {
detailItem.remove();
......@@ -253,15 +279,34 @@ export class ElementListWidget {
// Create and style a new container for the selected element's details
const detailsContainer = document.createElement('div');
detailsContainer.classList.add('details-container');
detailsContainer.classList.add('encode-details-container');
// Retrieve and display the selected element's ID
const elementId = sessionStorage.getItem('selectedElementId');
sessionStorage.setItem("element_id", elementId);
// Create element ID Div
const elementIdDiv = document.createElement('div');
elementIdDiv.textContent = `Element ID: ${elementId}`;
elementIdDiv.textContent = `${elementId}`;
elementIdDiv.classList.add('element-id');
detailsContainer.appendChild(elementIdDiv);
// Span for back icon
const backButton = document.createElement('span');
backButton.classList.add('back-icon');
backButton.addEventListener('click', createReturnWindow);
// Create element ID Div container
const elementIdDivContainer = document.createElement('div');
elementIdDivContainer.classList.add('element-id-container');
elementIdDivContainer.appendChild(backButton);
elementIdDivContainer.appendChild(elementIdDiv);
detailsContainer.appendChild(elementIdDivContainer);
// Create container for extra details
const extraDetailsContainer = document.createElement('div');
extraDetailsContainer.classList.add('details-container-encode');
detailsContainer.appendChild(extraDetailsContainer);
// Retrieve and display the selected element's extra details
const extraDetails = JSON.parse(sessionStorage.getItem('selectedElementExtraDetails'));
......@@ -269,12 +314,25 @@ export class ElementListWidget {
const detailDiv = document.createElement('div');
detailDiv.textContent = `${key}: ${value}`;
detailDiv.classList.add('extra-detail');
detailsContainer.appendChild(detailDiv);
extraDetailsContainer.appendChild(detailDiv);
}
// Create pull tab for extra details
const pullTab = document.createElement('div');
pullTab.classList.add('pull-tab');
pullTab.addEventListener('click', this.toggleDetails);
// Create a div for line of the pull tab
const lineDiv = document.createElement('div');
lineDiv.classList.add('line');
// Append pulltab to container
pullTab.appendChild(lineDiv);
detailsContainer.appendChild(pullTab);
// Insert the details container above the input container in the DOM
const inputContainer = document.getElementById("input-field-container");
inputContainer.parentElement.insertBefore(detailsContainer, inputContainer);
inputContainer.insertBefore(detailsContainer, inputContainer.firstChild);
// Append the DocumentControlWidget
setDocumentControlObject(new DocumentControlWidget());
......@@ -295,6 +353,29 @@ export class ElementListWidget {
await populateFields();
}
}
toggleDetails(){
const detailsContainer = document.querySelector('.details-container-encode');
const mainTopContainer = document.querySelector('.encode-details-container');
if (detailsContainer) {
// Check if detailsContainer is currently hidden
const isHidden = detailsContainer.style.display === 'none' || window.getComputedStyle(detailsContainer).display === 'none';
// Get the current height only when detailsContainer is hidden
const currentHeight = isHidden ? mainTopContainer.offsetHeight : 0;
detailsContainer.style.display = isHidden ? 'block' : 'none';
mainTopContainer.style.position = isHidden ? 'absolute' : '';
// Get fields container
const fieldsContainer = document.getElementById('fields');
if (!isHidden) {
// If detailsContainer is visible, reset the top margin
fieldsContainer.style.marginTop = '0';
} else {
// If detailsContainer is hidden, set the top margin to the stored height
fieldsContainer.style.marginTop = currentHeight + 'px';
}
}
}
}
async function fetchWorkersForNode(nodeId) {
......
WebGde/WebContent/WebGde-Widgets/Submit/submit.js
......@@ -4,10 +4,10 @@ import { saveForm } from "../DataInputWidget/generateFields.js";
import { checkValidValues, validateInput } from "../DataInputWidget/validateInput.js";
import { goBackToElementListViewer } from "../ElementListWidget/ElementListWidget.js";
import { uploadFile } from "../FileUpload/fileUpload.js";
import { removePrompt, showPrompt } from "../LogInWidget/LogInPrompt.js";
import { createLoadingModal, removePrompt } from "../LoadingModal/LoadingModal.js";
import { global_end_time, saveMetrics, stopMetricCapture, setGlobalEndTime, interval } from "../captureMetrics/captureMetrics.js";
import { IS_RETRIEVE_FROM_BPO, SHOW_ELEMENT_LIST_VIEWER } from "../config.js";
import { createInfoModal } from "../genericPopup/genericPopup.js";
import { createConfirmationModal, createErrorModal, createInfoModal } from "../genericPopup/genericPopup.js";
import { DISPLAY_FIELD_OBJECT } from "../globalVariable.js";
import { Settings } from "./XMLWriter/Global.js";
import { urlGetFile } from "./XMLWriter/WebServices.js";
......@@ -117,9 +117,9 @@ export const submitForm = async (e) => {
if (error) {
if (errorMsg !== null) {
createInfoModal(null, 'OK', errorMsg);
createErrorModal(null, 'Return', errorMsg);
} else {
createInfoModal(null, 'OK', 'Invalid or Missing data on highlighted fields!');
createErrorModal(null, 'Return', 'Invalid or Missing data on highlighted fields!');
}
return false
}
......@@ -175,33 +175,8 @@ export const submitForm = async (e) => {
export async function createSubmitWindow(e){
let submitStatus;
let popUpDisplay = document.createElement("div");
popUpDisplay.id = "submitWindow";
popUpDisplay.classList.add("modal-container")
let screenMain = document.createElement('div');
screenMain.id = 'parent_Window';
screenMain.classList.add('submit-modal');
document.body.appendChild(screenMain);
let returnLabel = document.createElement("div");
returnLabel.textContent = "Submit Element?";
returnLabel.classList.add("headerLabel");
screenMain.appendChild(returnLabel);
let buttonPanel = document.createElement("div");
buttonPanel.classList.add("floatingButtonPanel");
let cancelButton = createButtonElem("normalButton", "Cancel");
let okButton = createButtonElem("emphasizeButton", "Ok");
buttonPanel.append(cancelButton);
buttonPanel.append(okButton);
screenMain.appendChild(buttonPanel);
okButton.onclick = async function() {
showPrompt("Returning Element", "Please wait...", null, null, null);
document.getElementById("submitWindow").remove();
async function okButtonFunction() {
createLoadingModal("Submitting Element", "Please wait...", null, null, null);
submitStatus = await submitForm(e);
if(submitStatus){
removePrompt();
......@@ -218,16 +193,9 @@ export async function createSubmitWindow(e){
} else{
removePrompt();
}
}
};
cancelButton.addEventListener("click", function() {
document.getElementById("submitWindow").remove();
return false;
});
popUpDisplay.append(screenMain);
popUpDisplay.style.display = "block";
document.body.append(popUpDisplay);
return createConfirmationModal(okButtonFunction, "Submit Element?");
}
function validateMedia(key){
......@@ -248,11 +216,13 @@ export async function completeToNextNode(elementId) {
}
}
};
let authorization = "Bearer " + sessionStorage.getItem('token');
console.log(authorization);
let response = await fetch(getUrlCompleteToNextNode(elementId), {
method: "POST",
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
"Authorization": authorization
},
body: JSON.stringify(requestJSON)
});
......
WebGde/WebContent/WebGde-Widgets/config.js
......@@ -32,7 +32,7 @@ export const NEXT_NODE = "Complete"
export const EXCEPTION_NODE = "Exception"
export const SHOW_ELEMENT_LIST_VIEWER = "Y"
export const ADD_NEW_OPTION = "N"
export const DISPLAYED_DETAILS = "Address" //pipe-delimited
export const DISPLAYED_DETAILS = "Address|Cassandra_Key|GFS_Loc" //pipe-delimited
export const PDF_EXTENSION = ".pdf"
export const JPG_EXTENSION = ".jpg"
......
WebGde/WebContent/WebGde-Widgets/documentControlWidget/DocumentControl.css
......@@ -17,12 +17,14 @@
}
#submitButton {
font-weight: bold;
background-color: #096835;
margin-left: 5px;
margin-right: 25px;
}
#rejectButton {
font-weight: bold;
background-color: #9B0404;
margin-left: 25px;
margin-right: 5px;
......
WebGde/WebContent/WebGde-Widgets/documentControlWidget/documentControlWidget.js
......@@ -44,9 +44,8 @@ export class DocumentControlWidget {
this.global.rejectBtn.textContent = "Reject";
if (IS_RETRIEVE_FROM_BPO === "Y") {
this.global.container.appendChild(this.global.submitBtn);
this.global.container.appendChild(this.global.returnBtn);
this.global.container.appendChild(this.global.rejectBtn);
this.global.container.appendChild(this.global.submitBtn);
} else {
this.global.container.appendChild(this.global.rejectBtn);
this.global.container.appendChild(this.global.submitBtn);
......
WebGde/WebContent/WebGde-Widgets/genericPopup/Assets/exclamation-mark-inside-a-circle-svgrepo-com.svg 0 → 100644
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#FFFFFF" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 27.963 27.963" xml:space="preserve">
<g>
<g id="c129_exclamation">
<path d="M13.983,0C6.261,0,0.001,6.259,0.001,13.979c0,7.724,6.26,13.984,13.982,13.984s13.98-6.261,13.98-13.984
C27.963,6.259,21.705,0,13.983,0z M13.983,26.531c-6.933,0-12.55-5.62-12.55-12.553c0-6.93,5.617-12.548,12.55-12.548
c6.931,0,12.549,5.618,12.549,12.548C26.531,20.911,20.913,26.531,13.983,26.531z"/>
<polygon points="15.579,17.158 16.191,4.579 11.804,4.579 12.414,17.158 "/>
<path d="M13.998,18.546c-1.471,0-2.5,1.029-2.5,2.526c0,1.443,0.999,2.528,2.444,2.528h0.056c1.499,0,2.469-1.085,2.469-2.528
C16.441,19.575,15.468,18.546,13.998,18.546z"/>
</g>
<g id="Capa_1_207_">
</g>
</g>
</svg>
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/genericPopup/genericPopup.css 0 → 100644
#backdropContainer {
background-color: #000000a1;
display: -webkit-inline-box;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 50;
backdrop-filter: blur(4px);
}
#popupContainer {
width: 80%;
/* height: 160px; */
display: none;
justify-content: space-between;
flex-direction: column;
flex: 1;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
border-style: none;
border-radius: 8px;
background: white;
padding: 20px;
text-align: center;
z-index: 999;
animation-name: modalTransition;
animation-duration: .4s;
box-shadow: 0px 3px 6px #00000029;
}
#popupContent {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
}
#popupContent form{
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 20px;
height: 120px;
}
.popup-text {
font-size: 19px;
margin-bottom: 25px;
}
.modal-button-container {
display: flex;
justify-content: space-evenly;
}
.modal-button {
border-style: none;
border-radius: 8px;
width: 40%;
font-size: 16px;
padding: 8px 0px;
}
#cancelButtonModal {
border-style: solid;
border-color: #707070;
border-width: thin;
color: #98A3B5;
font-weight: bold;
}
#yesButtonModal {
background-color: #006BA6;
color: white;
font-weight: bold;
}
#okButton {
border-style: solid;
border-color: #707070;
border-width: thin;
color: #98A3B5;
font-weight: bold;
width: 40%;
}
#rejectButton {
background-color: #D46565;
color: white;
font-weight: bold;
}
.error-top-div {
background-color: #D46565;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
border-radius: 8px 8px 0 0;
margin-left: -20px;
margin-right: -20px;
margin-top: -20px;
margin-bottom: 20px;
padding-top: 14px;
padding-bottom: 14px;
font-size: 21px;
font-weight: bold;
color: white;
}
.error-top-div .icon{
height: 30px;
width: 30px;
display: inline-block;
margin-right: 14px;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
background-image: url('Assets/exclamation-mark-inside-a-circle-svgrepo-com.svg');
}
#checkBoxCont label{
font-weight: 100;
color: black;
}
#MssgBox {
border-radius: 8px;
}
@keyframes modalTransition {
from{
top:-300px;
opacity: 0;
}
to{
top:55%;
opacity: 1;
}
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/genericPopup/genericPopup.js
......@@ -2,15 +2,10 @@ export function createModal(okButtonAction, popupTitleText) {
var okButton = document.createElement("button");
okButton.id = "okButton";
okButton.textContent = "OK";
okButton.style.width = "80px";
okButton.style.height = "30px";
okButton.style.marginRight = "10px";
var cancelButton = document.createElement("button");
cancelButton.id = "cancelButton";
cancelButton.textContent = "Cancel";
cancelButton.style.width = "80px";
cancelButton.style.height = "30px";
var backdropContainer = document.getElementById("backdropContainer");
if (backdropContainer) {
......@@ -18,30 +13,8 @@ export function createModal(okButtonAction, popupTitleText) {
}
backdropContainer = document.createElement("div");
backdropContainer.id = "backdropContainer";
backdropContainer.style.backgroundColor = "#000000a1";
backdropContainer.style.display = "-webkit-inline-box";
backdropContainer.style.width = "100%";
backdropContainer.style.height = "100%";
backdropContainer.style.position = "absolute";
backdropContainer.style.top = "0";
backdropContainer.style.zIndex = "50";
backdropContainer.style.backdropFilter = "blur(4px)";
var popupContainer = document.createElement("div");
popupContainer.id = "popupContainer";
popupContainer.style.display = "none";
popupContainer.style.position = "fixed";
popupContainer.style.top = "50%";
popupContainer.style.left = "50%";
popupContainer.style.transform = "translate(-50%, -50%)";
popupContainer.style.border = "1px solid gray";
popupContainer.style.background = "white";
popupContainer.style.padding = "20px";
popupContainer.style.textAlign = "center";
popupContainer.style.zIndex = "999";
var popupContent = document.createElement("div");
popupContent.id = "popupContent";
......@@ -72,18 +45,15 @@ function handleOK() {
export function createInfoModal(okButtonAction, buttonTxt, popupTitleText) {
var buttonGroup = document.createElement("div");
buttonGroup.classList.add("modal-button-container");
var okButton = document.createElement("button");
okButton.id = "okButton";
okButton.classList.add("modal-button");
okButton.textContent = buttonTxt;
okButton.style.width = "80px";
okButton.style.height = "30px";
okButton.style.marginRight = "10px";
// var cancelButton = document.createElement("button");
// cancelButton.id = "cancelButton";
// cancelButton.textContent = "Cancel";
// cancelButton.style.width = "80px";
// cancelButton.style.height = "30px";
buttonGroup.appendChild(okButton);
var backdropContainer = document.getElementById("backdropContainer");
if (backdropContainer) {
......@@ -91,37 +61,66 @@ export function createInfoModal(okButtonAction, buttonTxt, popupTitleText) {
}
backdropContainer = document.createElement("div");
backdropContainer.id = "backdropContainer";
backdropContainer.style.backgroundColor = "#000000a1";
backdropContainer.style.display = "-webkit-inline-box";
backdropContainer.style.width = "100%";
backdropContainer.style.height = "100%";
backdropContainer.style.position = "absolute";
backdropContainer.style.top = "0";
backdropContainer.style.zIndex = "50";
backdropContainer.style.backdropFilter = "blur(4px)";
var popupContainer = document.createElement("div");
popupContainer.id = "popupContainer";
var popupContent = document.createElement("div");
popupContent.id = "popupContent";
var popupTitle = document.createElement("p");
popupTitle.textContent = popupTitleText;
popupTitle.classList.add("popup-text");
popupContent.appendChild(popupTitle);
popupContent.appendChild(buttonGroup);
popupContainer.appendChild(popupContent);
backdropContainer.appendChild(popupContainer);
document.body.appendChild(backdropContainer);
document.getElementById("popupContainer").style.display = "block";
document.getElementById("okButton").addEventListener("click", function() {
console.log("OK Button clicked!"); // This will let you know the button was clicked
document.getElementById("backdropContainer").style.display = "none";
if (typeof okButtonAction === "function") {
console.log("YES");
okButtonAction();
}
});
}
export function createErrorModal(okButtonAction, buttonTxt, popupTitleText){
var topDiv = document.createElement("div");
topDiv.classList.add("error-top-div");
topDiv.innerHTML = '<span class="icon"></span> Error';
var buttonGroup = document.createElement("div");
buttonGroup.classList.add("modal-button-container");
var okButton = document.createElement("button");
okButton.id = "okButton";
okButton.classList.add("modal-button");
okButton.textContent = buttonTxt;
buttonGroup.appendChild(okButton);
var backdropContainer = document.getElementById("backdropContainer");
if (backdropContainer) {
backdropContainer.remove();
}
backdropContainer = document.createElement("div");
backdropContainer.id = "backdropContainer";
var popupContainer = document.createElement("div");
popupContainer.id = "popupContainer";
popupContainer.style.display = "none";
popupContainer.style.position = "fixed";
popupContainer.style.top = "50%";
popupContainer.style.left = "50%";
popupContainer.style.transform = "translate(-50%, -50%)";
popupContainer.style.border = "1px solid gray";
popupContainer.style.background = "white";
popupContainer.style.padding = "20px";
popupContainer.style.textAlign = "center";
popupContainer.style.zIndex = "999";
var popupContent = document.createElement("div");
popupContent.id = "popupContent";
var popupTitle = document.createElement("p");
popupTitle.textContent = popupTitleText;
popupTitle.classList.add("popup-text");
popupContent.appendChild(popupTitle);
popupContent.appendChild(okButton);
popupContent.appendChild(buttonGroup);
popupContainer.appendChild(topDiv);
popupContainer.appendChild(popupContent);
backdropContainer.appendChild(popupContainer);
document.body.appendChild(backdropContainer);
......@@ -134,5 +133,63 @@ export function createInfoModal(okButtonAction, buttonTxt, popupTitleText) {
okButtonAction();
}
});
}
export function createConfirmationModal(okButtonFunction, popupTitleText) {
var yesButton = document.createElement("button");
yesButton.id = "yesButtonModal";
yesButton.textContent = "Yes";
yesButton.classList.add("modal-button");
var cancelButton = document.createElement("button");
cancelButton.id = "cancelButtonModal";
cancelButton.textContent = "Cancel";
cancelButton.classList.add("modal-button");
}
\ No newline at end of file
var buttonGroup = document.createElement("div");
buttonGroup.classList.add("modal-button-container");
buttonGroup.appendChild(cancelButton);
buttonGroup.appendChild(yesButton);
var backdropContainer = document.getElementById("backdropContainer");
if (backdropContainer) {
backdropContainer.remove();
}
backdropContainer = document.createElement("div");
backdropContainer.id = "backdropContainer";
backdropContainer.classList.add("backdrop-container");
var popupContainer = document.createElement("div");
popupContainer.id = "popupContainer";
popupContainer.classList.add("popup-container");
var popupContent = document.createElement("div");
popupContent.id = "popupContent";
var popupTitle = document.createElement("p");
popupTitle.classList.add("popup-text");
popupTitle.textContent = popupTitleText;
popupContent.appendChild(popupTitle);
popupContent.appendChild(buttonGroup);
popupContainer.appendChild(popupContent);
backdropContainer.appendChild(popupContainer);
document.body.appendChild(backdropContainer);
document.getElementById("popupContainer").style.display = "flex";
document.getElementById("yesButtonModal").addEventListener("click", function () {
document.getElementById("backdropContainer").style.display = "none";
if (typeof okButtonFunction === "function") {
okButtonFunction();
}
return true;
});
document.getElementById("cancelButtonModal").addEventListener("click", function () {
document.getElementById("backdropContainer").remove();
return false;
});
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/sample_schema/dev_schema.json
......@@ -8,7 +8,17 @@
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": false
"mandatory": true
}
},
"Middle Name": {
"fieldLabel": "Middle Name",
"aka": "field72",
"validation": {
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": true
}
},
"Civil_Status": {
......@@ -23,7 +33,7 @@
"Married",
"Widowed"
],
"mandatory": true
"mandatory": false
}
},
"Checkbox_List": {
......@@ -37,7 +47,8 @@
"sample-item2",
"sample-item3",
"sample-item4",
"sample-item5"
"sample-item5",
"other"
],
"mandatory": false
}
......@@ -82,15 +93,7 @@
"collection": "image-capture",
"mandatory": false
}
},
"Fingerprint":{
"fieldLabel": "Fingerprint",
"aka": "field5",
"validation": {
"collection": "fingerprint",
"mandatory": false
}
}
}
}
}
}
\ No newline at end of file
WebGde/WebContent/index.html
......@@ -11,6 +11,7 @@
<link rel="stylesheet" href="./WebGde-Widgets/LoadingModal/LoadingModalStyle.css">
<link rel="stylesheet" href="./WebGde-Widgets/DataInputWidget/DataInputWidget.css">
<link rel="stylesheet" href="./WebGde-Widgets/documentControlWidget/DocumentControl.css">
<link rel="stylesheet" href="./WebGde-Widgets/genericPopup/genericPopup.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">
<!-- <link id="loginStylesheet" rel="stylesheet" href="./WebGde-Widgets/LogInWidget/LoginStyle.css"> -->
<script type="module" src="./startup.js"></script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment