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 @@ ...@@ -37,7 +37,7 @@
<attribute name="optional" value="true"/> <attribute name="optional" value="true"/>
</attributes> </attributes>
</classpathentry> </classpathentry>
<classpathentry kind="con" path="fish.payara.eclipse.tools.server.lib.system"> <classpathentry kind="con" path="org.eclipse.payara.tools.lib.system">
<attributes> <attributes>
<attribute name="owner.project.facets" value="jst.web"/> <attribute name="owner.project.facets" value="jst.web"/>
</attributes> </attributes>
......
WebGde/.settings/org.eclipse.wst.common.project.facet.core.xml
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<faceted-project> <faceted-project>
<runtime name="Payara"/> <runtime name="Payara Server 5 (5.2022.5)"/>
<fixed facet="jst.web"/> <fixed facet="jst.web"/>
<fixed facet="java"/> <fixed facet="java"/>
<fixed facet="wst.jsdt.web"/> <fixed facet="wst.jsdt.web"/>
......
WebGde/WebContent/WebGde-Widgets/BPO/rejectElement.js
...@@ -2,6 +2,7 @@ import { createLoadingScreen, removeLoadingScreen, resetGDE } from "../../script ...@@ -2,6 +2,7 @@ import { createLoadingScreen, removeLoadingScreen, resetGDE } from "../../script
import { SCHEMA_FILE_PATH } from "../DataInputWidget/config.js"; import { SCHEMA_FILE_PATH } from "../DataInputWidget/config.js";
import { validateInput } from "../DataInputWidget/validateInput.js"; import { validateInput } from "../DataInputWidget/validateInput.js";
import { goBackToElementListViewer } from "../ElementListWidget/ElementListWidget.js"; import { goBackToElementListViewer } from "../ElementListWidget/ElementListWidget.js";
import { createLoadingModal, removePrompt } from "../LoadingModal/LoadingModal.js";
import { PROJECT_CODE } from "../Submit/config.js"; import { PROJECT_CODE } from "../Submit/config.js";
import { ENCODING_PASS, REASON_LIST } from "../config.js"; import { ENCODING_PASS, REASON_LIST } from "../config.js";
import { createInfoModal, createModal } from "../genericPopup/genericPopup.js"; import { createInfoModal, createModal } from "../genericPopup/genericPopup.js";
...@@ -38,7 +39,7 @@ async function rejectElement() { ...@@ -38,7 +39,7 @@ async function rejectElement() {
document.getElementById("backdropContainer").remove(); document.getElementById("backdropContainer").remove();
if(goBackToElementListViewer()){ if(goBackToElementListViewer()){
resetGDE(); resetGDE();
removeLoadingScreen(); removePrompt();
}; };
} }
createInfoModal(successfulReturn, 'OK', "Element rejected"); createInfoModal(successfulReturn, 'OK', "Element rejected");
...@@ -97,102 +98,79 @@ async function rejectElement() { ...@@ -97,102 +98,79 @@ async function rejectElement() {
createInfoModal(successfulReturn,"Log out" ,"Error ${response.status}: Returning element"); createInfoModal(successfulReturn,"Log out" ,"Error ${response.status}: Returning element");
} }
} }
//window for reason rejecting element
// var rejectButton = document.getElementById("reject");
// rejectButton.onclick = function () { export function createRejectWindow() {
// createRejectWindow(); var backdropContainer = document.getElementById("backdropContainer");
// /*let screenMain = document.getElementById("reject_window"); if (backdropContainer) {
// /* screenMain.style.display = 'block';*/ backdropContainer.remove();
// rejectButton.disabled = true; }
// //rejectElement(); backdropContainer = document.createElement("div");
// //const fieldForm = document.getElementById("fields"); backdropContainer.id = "backdropContainer";
// //fieldForm.querySelector('input[type="submit"]').click();
// }; var popupContainer = document.createElement("div");
popupContainer.id = "popupContainer";
var popupContent = document.createElement("div");
// window.addEventListener('keydown', function(e) { popupContent.id = "popupContent";
// if (e.ctrlKey == true && e.keyCode == 69){ var popupTitle = document.createElement("div"); // Use a div instead of p for consistency
popupTitle.innerHTML = '<span class="icon"></span> Reject Element';
// createRejectWindow(); popupTitle.classList.add("error-top-div"); // Add the headerLabel class
// rejectButton.disabled = true;
// } // Create a div for the radio options
// }); var radioOptions = document.createElement("div");
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);
var resList = REASON_LIST.split(","); var resList = REASON_LIST.split(",");
for (let i = 0; i < resList.length; i++) {
radioOptions.appendChild(checkLabelComponent(resList[i], resList[i], "check" + (i + 1)));
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)));
}
// Include the 'Others' check label component
let buttonPanel = document.createElement("div"); radioOptions.appendChild(checkLabelComponent('Others', '', 'check5'));
buttonPanel.classList.add("floatingButtonPanel");
// Create a div for the message box
let cancelButton = createButtonElem("normalButton", "Cancel"); var messageBox = createMessageBox('MssgBox');
let okButton = createButtonElem("emphasizeButton", "Ok");
// Create a div for the button panel
buttonPanel.append(cancelButton); var buttonPanel = document.createElement("div");
buttonPanel.append(okButton); buttonPanel.classList.add("modal-button-container");
var cancelButton = createButtonElem("modal-button", "Cancel");
screenMain.appendChild(checkLabelComponent('Others','','check5')); var okButton = createButtonElem("modal-button", "Reject");
screenMain.appendChild(createMessageBox('MssgBox')); okButton.setAttribute('id','rejectButton');
screenMain.appendChild(buttonPanel); 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'); setRadioHandler('MssgBox');
okButton.onclick = function () { okButton.onclick = function () {
if (document.querySelector('input[name="rejectRadio"]:checked').value != null) { createLoadingModal("Rejecting Element", "Please Wait...", null, null, null);
if (document.querySelector('input[name="rejectRadio"]:checked').value.trim().length != 0) { if (document.querySelector('input[name="rejectRadio"]:checked').value != null) {
saveExceptionToXml();//save xml if (document.querySelector('input[name="rejectRadio"]:checked').value.trim().length != 0) {
rejectElement();//reject on bpo saveExceptionToXml(); //save xml
document.getElementById("rejectWindow").remove(); rejectElement(); //reject on bpo
// popUpDisplay.remove(); document.getElementById("popupContainer").remove();
// var fileName = sessionStorage.getItem("file_Name");
// if(fileName !== null && fileName !== undefined){
// document.getElementById("controlsContainer").outerHTML="";
// }else{
// document.getElementById("TiffViewer_ButtonContainer").outerHTML="";
// }
// return;
}
} }
}
document.getElementById('MssgBox').value = "";
document.getElementById('rejectSubmit').click();
}
cancelButton.onclick = function () {
document.getElementById("rejectWindow").remove();
removeLoadingScreen();
} }
popUpDisplay.append(screenMain); cancelButton.onclick = function () {
popUpDisplay.style.display = "block"; document.getElementById("backdropContainer").remove();
document.body.append(popUpDisplay); }
}
document.getElementById("popupContainer").style.display = "block";
}
......
WebGde/WebContent/WebGde-Widgets/BPO/returnElement.js
...@@ -2,10 +2,10 @@ import { createLoadingScreen, removeLoadingScreen, resetGDE } from "../../script ...@@ -2,10 +2,10 @@ import { createLoadingScreen, removeLoadingScreen, resetGDE } from "../../script
import { SCHEMA_FILE_PATH } from "../DataInputWidget/config.js"; import { SCHEMA_FILE_PATH } from "../DataInputWidget/config.js";
import { validateInput } from "../DataInputWidget/validateInput.js"; import { validateInput } from "../DataInputWidget/validateInput.js";
import { goBackToElementListViewer } from "../ElementListWidget/ElementListWidget.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 { PROJECT_CODE } from "../Submit/config.js";
import { interval } from "../captureMetrics/captureMetrics.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 { BPO_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_STORAGE } from "../globalVariable.js";
import { getUrlReturnElement } from "./bpoService.js"; import { getUrlReturnElement } from "./bpoService.js";
...@@ -86,38 +86,13 @@ function returnSaveXML(){ ...@@ -86,38 +86,13 @@ function returnSaveXML(){
} }
export function createReturnWindow() { export function createReturnWindow() {
let popUpDisplay = document.createElement("div"); async function returnButtonFunction() {
popUpDisplay.id = "returnWindow"; createLoadingModal("Returning Element", "Please wait...", null, null, null);
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);
let response = await returnElementBPO(sessionStorage.getItem("element_id")); let response = await returnElementBPO(sessionStorage.getItem("element_id"));
if (response.status == 200) { if (response.status == 200) {
sessionStorage.removeItem("section"); sessionStorage.removeItem("section");
sessionStorage.removeItem("doctype"); sessionStorage.removeItem("doctype");
removePrompt(); removePrompt();
document.getElementById("returnWindow").remove();
goBackToElementListViewer(); goBackToElementListViewer();
}else{ }else{
...@@ -127,14 +102,8 @@ export function createReturnWindow() { ...@@ -127,14 +102,8 @@ export function createReturnWindow() {
createInfoModal(errorReturn, 'Error', "Error ${response.status}: Returning element"); createInfoModal(errorReturn, 'Error', "Error ${response.status}: Returning element");
} }
} }
cancelButton.addEventListener("click", function() { createConfirmationModal(returnButtonFunction, "Return to Item List Menu?");
document.getElementById("returnWindow").remove();
});
popUpDisplay.append(screenMain);
popUpDisplay.style.display = "block";
document.body.append(popUpDisplay);
} }
function createButtonElem(className, buttonName, icon) { 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 { ...@@ -20,7 +20,7 @@ html, body {
* { * {
-webkit-font-smoothing: auto; -webkit-font-smoothing: auto;
font-size: 14px; font-size: 14px;
letter-spacing: 0.1em; /* letter-spacing: 0.1em; */
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-weight: normal; font-weight: normal;
font-family: Open Sans, sans-serif; font-family: Open Sans, sans-serif;
...@@ -333,6 +333,56 @@ input[type=file]:hover { ...@@ -333,6 +333,56 @@ input[type=file]:hover {
overflow: hidden; 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 { .fingerprint-capture button {
width: 75%; width: 75%;
border-radius: 8px; 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 form = document.getElementById('fields');
const img = document.getElementById(`${key}_zz`); 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; 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 // Create hidden inputs for fname and file content
const hiddenFnameInput = document.createElement('input'); const hiddenFnameInput = document.createElement('input');
hiddenFnameInput.setAttribute('id', `${key}`); hiddenFnameInput.setAttribute('id', `${key}`);
...@@ -20,37 +60,23 @@ export function processCapture(key, imgFilename) { ...@@ -20,37 +60,23 @@ export function processCapture(key, imgFilename) {
hiddenFileContentInput.setAttribute('name', 'hidden_file_content'); hiddenFileContentInput.setAttribute('name', 'hidden_file_content');
form.appendChild(hiddenFileContentInput); 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 // Set the hidden inputs when a file is selected
hiddenFnameInput.value = filenameString; hiddenFnameInput.value = filenameString;
hiddenFnameInput.display = ''; hiddenFnameInput.display = '';
hiddenFileContentInput.value = img.src; // This will store the base64-encoded content of the file hiddenFileContentInput.value = img.src; // This will store the base64-encoded content of the file
hiddenFileContentInput.display = ''; hiddenFileContentInput.display = '';
document.getElementById(`${key}_buttonsContainer-video`).style.display = 'none'; document.getElementById(`${key}_container`).style.display = 'none';
x.style.display = 'block';
x.style.position = 'absolute';
document.getElementById(`${key}_x`).addEventListener('click', () => { document.getElementById(`${key}_x`).addEventListener('click', () => {
img.style.display = 'none';
img.src = ''; img.src = '';
thumb.style.display = 'none'; container.innerHTML = '';
x.style.display = 'none'; container.style.display = 'none';
filename.style.display = 'none'; document.getElementById(`${key}_container`).style.display = 'block';
filename.textContent = '';
document.getElementById(`${key}_buttonsContainer-video`).style.display = 'flex';
// Clear the hidden fields // Clear the hidden fields
hiddenFnameInput.display = 'none'; hiddenFnameInput.remove();
hiddenFnameInput.value = ''; hiddenFileContentInput.remove();
hiddenFileContentInput.display = 'none';
hiddenFileContentInput.value = '';
}); });
} }
......
WebGde/WebContent/WebGde-Widgets/DataInputWidget/generateFields.js
...@@ -523,9 +523,12 @@ const inputImageCapture = (key, validation) => { ...@@ -523,9 +523,12 @@ const inputImageCapture = (key, validation) => {
const container = document.createElement('div'); const container = document.createElement('div');
const container2 = document.createElement('div'); const container2 = document.createElement('div');
const outputContainer = document.createElement('div');
container.appendChild(container2); container.appendChild(container2);
container.appendChild(outputContainer);
container2.classList.add('image-capture'); container2.classList.add('image-capture');
container2.setAttribute('id', `${key}_container`); container2.setAttribute('id', `${key}_container`);
outputContainer.setAttribute('id', `${key}_outputContainer`);
const input = document.createElement('input'); const input = document.createElement('input');
input.setAttribute('id', `${key}_attachedMedia`); input.setAttribute('id', `${key}_attachedMedia`);
...@@ -546,116 +549,6 @@ const inputImageCapture = (key, validation) => { ...@@ -546,116 +549,6 @@ const inputImageCapture = (key, validation) => {
capturedImage.setAttribute('type', 'hidden'); capturedImage.setAttribute('type', 'hidden');
capturedImage.setAttribute('style', 'display: none'); 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'); const input1 = document.createElement('input');
input1.setAttribute('id', `${key}`); input1.setAttribute('id', `${key}`);
input1.setAttribute('name', `${key}`); input1.setAttribute('name', `${key}`);
...@@ -667,6 +560,7 @@ const inputImageCapture = (key, validation) => { ...@@ -667,6 +560,7 @@ const inputImageCapture = (key, validation) => {
const input2 = document.createElement('button'); const input2 = document.createElement('button');
input2.setAttribute('type', 'button');
input2.setAttribute('id', `${key}`); input2.setAttribute('id', `${key}`);
input2.setAttribute('name', `${key}`); input2.setAttribute('name', `${key}`);
input2.innerHTML = '<span class="icon"></span> Camera'; input2.innerHTML = '<span class="icon"></span> Camera';
...@@ -676,9 +570,6 @@ const inputImageCapture = (key, validation) => { ...@@ -676,9 +570,6 @@ const inputImageCapture = (key, validation) => {
window.processCapture = processCapture; window.processCapture = processCapture;
const img = document.createElement('img'); 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('id', `${key}_zz`);
img.setAttribute('style', 'display: none'); img.setAttribute('style', 'display: none');
...@@ -689,25 +580,14 @@ const inputImageCapture = (key, validation) => { ...@@ -689,25 +580,14 @@ const inputImageCapture = (key, validation) => {
container2.classList.add('input-valid'); 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 // Append all elements to the container
const container3 = document.createElement('div'); const container3 = document.createElement('div');
container2.appendChild(x);
container3.setAttribute('id', `${key}_buttonsContainer-video`) container3.setAttribute('id', `${key}_buttonsContainer-video`)
container3.setAttribute('class', 'buttonsContainer'); container3.setAttribute('class', 'buttonsContainer');
container3.appendChild(input); container3.appendChild(input);
// container3.appendChild(input1);
// container3.appendChild(dash);
container3.appendChild(input2); container3.appendChild(input2);
container2.appendChild(container3) container2.appendChild(container3)
container2.appendChild(img); container2.appendChild(img);
container2.appendChild(thumbnail);
container2.appendChild(filename);
mandatory ? input.setAttribute('required', 'true') : null mandatory ? input.setAttribute('required', 'true') : null
...@@ -1518,7 +1398,6 @@ const inputChecklist = (key, validation) => { ...@@ -1518,7 +1398,6 @@ const inputChecklist = (key, validation) => {
inputTextBox.id = `dependentTB_${key}`; inputTextBox.id = `dependentTB_${key}`;
inputTextBox.classList.add('checkboxOther'); inputTextBox.classList.add('checkboxOther');
inputTextBox.style.display = 'none'; inputTextBox.style.display = 'none';
inputTextBox.style.padding = '0px';
dropdownContent.appendChild(inputTextBox); dropdownContent.appendChild(inputTextBox);
// Add event listener to the "other" checkbox // Add event listener to the "other" checkbox
......
WebGde/WebContent/WebGde-Widgets/DataInputWidget/style.css
* { * {
-webkit-font-smoothing: auto; -webkit-font-smoothing: auto;
font-size: 16px; font-size: 16px;
letter-spacing: 0.1em; /* letter-spacing: 0.1em; */
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-weight: normal; font-weight: normal;
font-family: Inter; 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 { ...@@ -20,20 +20,18 @@ body {
/* Main Container */ /* Main Container */
#containerId { #containerId {
max-width: 900px; width: 100%;
margin: 2rem 1rem; height: 100%;
background-color: #fff; background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 2rem;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
/* Element List Wrapper */ /* Element List Wrapper */
.element-list { .element-list {
max-height: 70vh; height: 100%;
overflow-y: auto; overflow-y: auto;
padding-bottom: 1rem; padding-bottom: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
...@@ -44,32 +42,44 @@ body { ...@@ -44,32 +42,44 @@ body {
.element-container { .element-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #fafafa; border: 1px solid #00000029;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 1.5rem;
padding: 1rem;
transition: all 0.3s ease; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
} }
.element-container:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.element-container.selected { .element-container.selected {
background-color: #d3e5ff; color: white;
border-color: #007bff; background-color: #006BA6;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border: 1px solid #00000029;
} }
/* Element Item */ /* Element Item */
.element-item { .element-item {
margin-top: 17px;
margin-bottom: 17px;
margin-left: 32px;
font-size: 20px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; 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 */ /* Element Details */
.extra-details { .extra-details {
margin-top: 1rem; margin-top: 1rem;
...@@ -77,23 +87,34 @@ body { ...@@ -77,23 +87,34 @@ body {
color: #7d7d7d; color: #7d7d7d;
} }
.details-container {
padding: 22px 42px ;
background-color: #E7EAF1;
}
/* Detail Item */ /* Detail Item */
.detail-item { .detail-item {
margin-top: 0.5rem;
padding: 0.5rem 0; padding: 0.5rem 0;
border-top: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0;
font-size: 0.9rem; color: #98A3B5;
color: #7d7d7d; white-space: normal;
overflow-wrap: break-word;
}
.detail-item span {
font-size: 18px;
} }
/* Specific styles for the encode button */ /* Specific styles for the encode button */
#encode-btn { #encode-btn {
width: 100%;
padding: 1rem 2rem; padding: 1rem 2rem;
border: none; border: none;
border-radius: 50px; border-radius: 8px;
font-size: 1rem; font-size: 16px;
font-weight: bold;
color: #fff; color: #fff;
background-color: #007bff; background-color: #006BA6;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s ease, transform 0.1s ease; transition: background-color 0.3s ease, transform 0.1s ease;
} }
...@@ -112,7 +133,7 @@ body { ...@@ -112,7 +133,7 @@ body {
/* Style for disabled encode button */ /* Style for disabled encode button */
#encode-btn.disabled { #encode-btn.disabled {
background-color: #9fb3c8; background-color: #94c1da;
/* Grayed out color */ /* Grayed out color */
cursor: not-allowed; cursor: not-allowed;
} }
...@@ -143,6 +164,10 @@ body { ...@@ -143,6 +164,10 @@ body {
} }
.button-container { .button-container {
padding-top: 17px;
padding-bottom: 17px;
padding-left: 32px;
padding-right: 32px;
margin-top: auto; margin-top: auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -150,27 +175,106 @@ body { ...@@ -150,27 +175,106 @@ body {
gap: 2rem; 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 { #search-input {
padding: 8px; padding: 8px;
margin-bottom: 10px; margin-top: 12px;
margin-bottom: 12px;
margin-left: 20px;
margin-right: 10px;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
/* Ensures padding doesn't increase its size */ /* Ensures padding doesn't increase its size */
border: 1px solid #ccc; 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 */ .details-container-encode {
@media (max-width: 768px) { display: none;
#containerId { max-height: 70vh;
padding: 1rem; overflow-y: auto;
} }
.element-container, .extra-detail {
button { font-size: 16px;
padding: 1rem; 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 { createWebGdeInterface, removeLoadingScreen } from '../../script.js';
import { createReturnWindow } from '../BPO/returnElement.js';
import { populateFields } from '../DataInputWidget/generateFields.js'; import { populateFields } from '../DataInputWidget/generateFields.js';
import { ADD_NEW_OPTION, CURRENT_NODE, BPO_URL, DISPLAYED_DETAILS } from '../config.js'; import { ADD_NEW_OPTION, CURRENT_NODE, BPO_URL, DISPLAYED_DETAILS } from '../config.js';
import { DocumentControlWidget } from "../documentControlWidget/documentControlWidget.js"; import { DocumentControlWidget } from "../documentControlWidget/documentControlWidget.js";
...@@ -82,17 +83,29 @@ export class ElementListWidget { ...@@ -82,17 +83,29 @@ export class ElementListWidget {
// Initialize the encode button as disabled // Initialize the encode button as disabled
this.global.encodeButton = document.createElement("button"); 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.id = "encode-btn";
this.global.encodeButton.disabled = true; this.global.encodeButton.disabled = true;
this.global.encodeButton.classList.add("disabled"); 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 // Create a search input field
const searchInput = document.createElement("input"); const searchInput = document.createElement("input");
searchInput.placeholder = "Search elements..."; searchInput.placeholder = "Search elements...";
searchInput.id = "search-input"; searchInput.id = "search-input";
searchInput.type = "text"; 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 // Event listener for search input
searchInput.addEventListener("input", () => { searchInput.addEventListener("input", () => {
...@@ -181,9 +194,16 @@ export class ElementListWidget { ...@@ -181,9 +194,16 @@ export class ElementListWidget {
elementIdSpan.textContent = element.elementId; elementIdSpan.textContent = element.elementId;
elementDiv.appendChild(elementIdSpan); elementDiv.appendChild(elementIdSpan);
const elementArrow = document.createElement("span");
elementArrow.classList.add("element-arrow-icon");
elementDiv.appendChild(elementArrow);
elementContainer.appendChild(elementDiv); elementContainer.appendChild(elementDiv);
elementList.appendChild(elementContainer); elementList.appendChild(elementContainer);
elementArrow.addEventListener("click", () =>{
this.showExtraDetails(element, elementContainer);
});
// Click event listener for each element container // Click event listener for each element container
elementContainer.addEventListener("click", () => { elementContainer.addEventListener("click", () => {
if (elementContainer.classList.contains("selected")) { if (elementContainer.classList.contains("selected")) {
...@@ -192,8 +212,7 @@ export class ElementListWidget { ...@@ -192,8 +212,7 @@ export class ElementListWidget {
deselectAll(); deselectAll();
elementContainer.classList.add("selected"); elementContainer.classList.add("selected");
this.global.selectedElement = element; this.global.selectedElement = element;
this.global.queueIndex = element.queueIndex; // <-- Update the queueIndex here this.global.queueIndex = element.queueIndex; // <-- Update the queueIndex here
this.showExtraDetails(element, elementContainer);
this.global.encodeButton.disabled = false; this.global.encodeButton.disabled = false;
this.global.encodeButton.classList.remove("disabled"); this.global.encodeButton.classList.remove("disabled");
} }
...@@ -208,6 +227,11 @@ export class ElementListWidget { ...@@ -208,6 +227,11 @@ export class ElementListWidget {
// Remove existing extra details if any // Remove existing extra details if any
this.removeExtraDetails(elementContainer); 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 // Check if there are any extra details
if (element.extraDetails && Object.keys(element.extraDetails).length > 0) { if (element.extraDetails && Object.keys(element.extraDetails).length > 0) {
const displayedKeys = DISPLAYED_DETAILS.split('|'); // Split into an array const displayedKeys = DISPLAYED_DETAILS.split('|'); // Split into an array
...@@ -221,15 +245,17 @@ export class ElementListWidget { ...@@ -221,15 +245,17 @@ export class ElementListWidget {
detailSpan.textContent = `${key}: ${value}`; detailSpan.textContent = `${key}: ${value}`;
detailDiv.appendChild(detailSpan); detailDiv.appendChild(detailSpan);
elementContainer.appendChild(detailDiv); detailsContainer.appendChild(detailDiv);
} }
}); });
elementContainer.appendChild(detailsContainer);
} }
} }
removeExtraDetails(elementContainer) { removeExtraDetails(elementContainer) {
const detailsItems = elementContainer.querySelectorAll(".detail-item"); const detailsItems = elementContainer.querySelectorAll(".details-container");
if (detailsItems.length > 0) { if (detailsItems.length > 0) {
detailsItems.forEach(detailItem => { detailsItems.forEach(detailItem => {
detailItem.remove(); detailItem.remove();
...@@ -253,15 +279,34 @@ export class ElementListWidget { ...@@ -253,15 +279,34 @@ export class ElementListWidget {
// Create and style a new container for the selected element's details // Create and style a new container for the selected element's details
const detailsContainer = document.createElement('div'); const detailsContainer = document.createElement('div');
detailsContainer.classList.add('details-container'); detailsContainer.classList.add('encode-details-container');
// Retrieve and display the selected element's ID // Retrieve and display the selected element's ID
const elementId = sessionStorage.getItem('selectedElementId'); const elementId = sessionStorage.getItem('selectedElementId');
sessionStorage.setItem("element_id", elementId); sessionStorage.setItem("element_id", elementId);
// Create element ID Div
const elementIdDiv = document.createElement('div'); const elementIdDiv = document.createElement('div');
elementIdDiv.textContent = `Element ID: ${elementId}`; elementIdDiv.textContent = `${elementId}`;
elementIdDiv.classList.add('element-id'); 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 // Retrieve and display the selected element's extra details
const extraDetails = JSON.parse(sessionStorage.getItem('selectedElementExtraDetails')); const extraDetails = JSON.parse(sessionStorage.getItem('selectedElementExtraDetails'));
...@@ -269,12 +314,25 @@ export class ElementListWidget { ...@@ -269,12 +314,25 @@ export class ElementListWidget {
const detailDiv = document.createElement('div'); const detailDiv = document.createElement('div');
detailDiv.textContent = `${key}: ${value}`; detailDiv.textContent = `${key}: ${value}`;
detailDiv.classList.add('extra-detail'); 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 // Insert the details container above the input container in the DOM
const inputContainer = document.getElementById("input-field-container"); const inputContainer = document.getElementById("input-field-container");
inputContainer.parentElement.insertBefore(detailsContainer, inputContainer); inputContainer.insertBefore(detailsContainer, inputContainer.firstChild);
// Append the DocumentControlWidget // Append the DocumentControlWidget
setDocumentControlObject(new DocumentControlWidget()); setDocumentControlObject(new DocumentControlWidget());
...@@ -295,6 +353,29 @@ export class ElementListWidget { ...@@ -295,6 +353,29 @@ export class ElementListWidget {
await populateFields(); 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) { async function fetchWorkersForNode(nodeId) {
......
WebGde/WebContent/WebGde-Widgets/Submit/submit.js
...@@ -4,10 +4,10 @@ import { saveForm } from "../DataInputWidget/generateFields.js"; ...@@ -4,10 +4,10 @@ import { saveForm } from "../DataInputWidget/generateFields.js";
import { checkValidValues, validateInput } from "../DataInputWidget/validateInput.js"; import { checkValidValues, validateInput } from "../DataInputWidget/validateInput.js";
import { goBackToElementListViewer } from "../ElementListWidget/ElementListWidget.js"; import { goBackToElementListViewer } from "../ElementListWidget/ElementListWidget.js";
import { uploadFile } from "../FileUpload/fileUpload.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 { global_end_time, saveMetrics, stopMetricCapture, setGlobalEndTime, interval } from "../captureMetrics/captureMetrics.js";
import { IS_RETRIEVE_FROM_BPO, SHOW_ELEMENT_LIST_VIEWER } from "../config.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 { DISPLAY_FIELD_OBJECT } from "../globalVariable.js";
import { Settings } from "./XMLWriter/Global.js"; import { Settings } from "./XMLWriter/Global.js";
import { urlGetFile } from "./XMLWriter/WebServices.js"; import { urlGetFile } from "./XMLWriter/WebServices.js";
...@@ -117,9 +117,9 @@ export const submitForm = async (e) => { ...@@ -117,9 +117,9 @@ export const submitForm = async (e) => {
if (error) { if (error) {
if (errorMsg !== null) { if (errorMsg !== null) {
createInfoModal(null, 'OK', errorMsg); createErrorModal(null, 'Return', errorMsg);
} else { } else {
createInfoModal(null, 'OK', 'Invalid or Missing data on highlighted fields!'); createErrorModal(null, 'Return', 'Invalid or Missing data on highlighted fields!');
} }
return false return false
} }
...@@ -175,33 +175,8 @@ export const submitForm = async (e) => { ...@@ -175,33 +175,8 @@ export const submitForm = async (e) => {
export async function createSubmitWindow(e){ export async function createSubmitWindow(e){
let submitStatus; let submitStatus;
let popUpDisplay = document.createElement("div"); async function okButtonFunction() {
popUpDisplay.id = "submitWindow"; createLoadingModal("Submitting Element", "Please wait...", null, null, null);
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();
submitStatus = await submitForm(e); submitStatus = await submitForm(e);
if(submitStatus){ if(submitStatus){
removePrompt(); removePrompt();
...@@ -218,16 +193,9 @@ export async function createSubmitWindow(e){ ...@@ -218,16 +193,9 @@ export async function createSubmitWindow(e){
} else{ } else{
removePrompt(); removePrompt();
} }
} };
cancelButton.addEventListener("click", function() { return createConfirmationModal(okButtonFunction, "Submit Element?");
document.getElementById("submitWindow").remove();
return false;
});
popUpDisplay.append(screenMain);
popUpDisplay.style.display = "block";
document.body.append(popUpDisplay);
} }
function validateMedia(key){ function validateMedia(key){
...@@ -248,11 +216,13 @@ export async function completeToNextNode(elementId) { ...@@ -248,11 +216,13 @@ export async function completeToNextNode(elementId) {
} }
} }
}; };
let authorization = "Bearer " + sessionStorage.getItem('token');
console.log(authorization);
let response = await fetch(getUrlCompleteToNextNode(elementId), { let response = await fetch(getUrlCompleteToNextNode(elementId), {
method: "POST", method: "POST",
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json',
"Authorization": authorization
}, },
body: JSON.stringify(requestJSON) body: JSON.stringify(requestJSON)
}); });
......
WebGde/WebContent/WebGde-Widgets/config.js
...@@ -32,7 +32,7 @@ export const NEXT_NODE = "Complete" ...@@ -32,7 +32,7 @@ export const NEXT_NODE = "Complete"
export const EXCEPTION_NODE = "Exception" export const EXCEPTION_NODE = "Exception"
export const SHOW_ELEMENT_LIST_VIEWER = "Y" export const SHOW_ELEMENT_LIST_VIEWER = "Y"
export const ADD_NEW_OPTION = "N" 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 PDF_EXTENSION = ".pdf"
export const JPG_EXTENSION = ".jpg" export const JPG_EXTENSION = ".jpg"
......
WebGde/WebContent/WebGde-Widgets/documentControlWidget/DocumentControl.css
...@@ -17,12 +17,14 @@ ...@@ -17,12 +17,14 @@
} }
#submitButton { #submitButton {
font-weight: bold;
background-color: #096835; background-color: #096835;
margin-left: 5px; margin-left: 5px;
margin-right: 25px; margin-right: 25px;
} }
#rejectButton { #rejectButton {
font-weight: bold;
background-color: #9B0404; background-color: #9B0404;
margin-left: 25px; margin-left: 25px;
margin-right: 5px; margin-right: 5px;
......
WebGde/WebContent/WebGde-Widgets/documentControlWidget/documentControlWidget.js
...@@ -44,9 +44,8 @@ export class DocumentControlWidget { ...@@ -44,9 +44,8 @@ export class DocumentControlWidget {
this.global.rejectBtn.textContent = "Reject"; this.global.rejectBtn.textContent = "Reject";
if (IS_RETRIEVE_FROM_BPO === "Y") { 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.rejectBtn);
this.global.container.appendChild(this.global.submitBtn);
} else { } else {
this.global.container.appendChild(this.global.rejectBtn); this.global.container.appendChild(this.global.rejectBtn);
this.global.container.appendChild(this.global.submitBtn); 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) { ...@@ -2,15 +2,10 @@ export function createModal(okButtonAction, popupTitleText) {
var okButton = document.createElement("button"); var okButton = document.createElement("button");
okButton.id = "okButton"; okButton.id = "okButton";
okButton.textContent = "OK"; okButton.textContent = "OK";
okButton.style.width = "80px";
okButton.style.height = "30px";
okButton.style.marginRight = "10px";
var cancelButton = document.createElement("button"); var cancelButton = document.createElement("button");
cancelButton.id = "cancelButton"; cancelButton.id = "cancelButton";
cancelButton.textContent = "Cancel"; cancelButton.textContent = "Cancel";
cancelButton.style.width = "80px";
cancelButton.style.height = "30px";
var backdropContainer = document.getElementById("backdropContainer"); var backdropContainer = document.getElementById("backdropContainer");
if (backdropContainer) { if (backdropContainer) {
...@@ -18,30 +13,8 @@ export function createModal(okButtonAction, popupTitleText) { ...@@ -18,30 +13,8 @@ export function createModal(okButtonAction, popupTitleText) {
} }
backdropContainer = document.createElement("div"); backdropContainer = document.createElement("div");
backdropContainer.id = "backdropContainer"; 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"); 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"); var popupContent = document.createElement("div");
popupContent.id = "popupContent"; popupContent.id = "popupContent";
...@@ -72,18 +45,15 @@ function handleOK() { ...@@ -72,18 +45,15 @@ function handleOK() {
export function createInfoModal(okButtonAction, buttonTxt, popupTitleText) { export function createInfoModal(okButtonAction, buttonTxt, popupTitleText) {
var buttonGroup = document.createElement("div");
buttonGroup.classList.add("modal-button-container");
var okButton = document.createElement("button"); var okButton = document.createElement("button");
okButton.id = "okButton"; okButton.id = "okButton";
okButton.classList.add("modal-button");
okButton.textContent = buttonTxt; okButton.textContent = buttonTxt;
okButton.style.width = "80px";
okButton.style.height = "30px";
okButton.style.marginRight = "10px";
// var cancelButton = document.createElement("button"); buttonGroup.appendChild(okButton);
// cancelButton.id = "cancelButton";
// cancelButton.textContent = "Cancel";
// cancelButton.style.width = "80px";
// cancelButton.style.height = "30px";
var backdropContainer = document.getElementById("backdropContainer"); var backdropContainer = document.getElementById("backdropContainer");
if (backdropContainer) { if (backdropContainer) {
...@@ -91,37 +61,66 @@ export function createInfoModal(okButtonAction, buttonTxt, popupTitleText) { ...@@ -91,37 +61,66 @@ export function createInfoModal(okButtonAction, buttonTxt, popupTitleText) {
} }
backdropContainer = document.createElement("div"); backdropContainer = document.createElement("div");
backdropContainer.id = "backdropContainer"; 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"); var popupContainer = document.createElement("div");
popupContainer.id = "popupContainer"; 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"); var popupContent = document.createElement("div");
popupContent.id = "popupContent"; popupContent.id = "popupContent";
var popupTitle = document.createElement("p"); var popupTitle = document.createElement("p");
popupTitle.textContent = popupTitleText; popupTitle.textContent = popupTitleText;
popupTitle.classList.add("popup-text");
popupContent.appendChild(popupTitle); popupContent.appendChild(popupTitle);
popupContent.appendChild(okButton); popupContent.appendChild(buttonGroup);
popupContainer.appendChild(topDiv);
popupContainer.appendChild(popupContent); popupContainer.appendChild(popupContent);
backdropContainer.appendChild(popupContainer); backdropContainer.appendChild(popupContainer);
document.body.appendChild(backdropContainer); document.body.appendChild(backdropContainer);
...@@ -134,5 +133,63 @@ export function createInfoModal(okButtonAction, buttonTxt, popupTitleText) { ...@@ -134,5 +133,63 @@ export function createInfoModal(okButtonAction, buttonTxt, popupTitleText) {
okButtonAction(); 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");
} var buttonGroup = document.createElement("div");
\ No newline at end of file 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 @@ ...@@ -8,7 +8,17 @@
"fieldLength": 30, "fieldLength": 30,
"collection": "alphanumeric", "collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>", "invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": false "mandatory": true
}
},
"Middle Name": {
"fieldLabel": "Middle Name",
"aka": "field72",
"validation": {
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": true
} }
}, },
"Civil_Status": { "Civil_Status": {
...@@ -23,7 +33,7 @@ ...@@ -23,7 +33,7 @@
"Married", "Married",
"Widowed" "Widowed"
], ],
"mandatory": true "mandatory": false
} }
}, },
"Checkbox_List": { "Checkbox_List": {
...@@ -37,7 +47,8 @@ ...@@ -37,7 +47,8 @@
"sample-item2", "sample-item2",
"sample-item3", "sample-item3",
"sample-item4", "sample-item4",
"sample-item5" "sample-item5",
"other"
], ],
"mandatory": false "mandatory": false
} }
...@@ -82,15 +93,7 @@ ...@@ -82,15 +93,7 @@
"collection": "image-capture", "collection": "image-capture",
"mandatory": false "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 @@ ...@@ -11,6 +11,7 @@
<link rel="stylesheet" href="./WebGde-Widgets/LoadingModal/LoadingModalStyle.css"> <link rel="stylesheet" href="./WebGde-Widgets/LoadingModal/LoadingModalStyle.css">
<link rel="stylesheet" href="./WebGde-Widgets/DataInputWidget/DataInputWidget.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/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 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"> --> <!-- <link id="loginStylesheet" rel="stylesheet" href="./WebGde-Widgets/LogInWidget/LoginStyle.css"> -->
<script type="module" src="./startup.js"></script> <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