Skip to content

W
web-ui
Commit 2396ede2 by Owen Ryan Ang
Options

Merge branch 'feature-qc-updates' into 'development-mobile'

Feature qc updates See merge request !79
parents 94bd47ba 413d1ee2
Showing with 2220 additions and 1958 deletions
WebGde/.classpath
......@@ -24,19 +24,6 @@
<attribute name="maven.pomderived" value="true"/>
</attributes>
</classpathentry>
<classpathentry excluding="**" kind="src" output="target/classes" path="src/main/resources">
<attributes>
<attribute name="maven.pomderived" value="true"/>
<attribute name="optional" value="true"/>
</attributes>
</classpathentry>
<classpathentry excluding="**" kind="src" output="target/test-classes" path="src/test/resources">
<attributes>
<attribute name="maven.pomderived" value="true"/>
<attribute name="test" value="true"/>
<attribute name="optional" value="true"/>
</attributes>
</classpathentry>
<classpathentry kind="con" path="org.eclipse.payara.tools.lib.system">
<attributes>
<attribute name="owner.project.facets" value="jst.web"/>
......
WebGde/WebContent/WEB-INF/config/config.ini
......@@ -23,3 +23,5 @@ DB_NAME=webgde_db
USERNAME=root
PASSWORD=p455w0rd
[SSO CONFIG]
PUBKEY = C:/Users/oang/git/web-ui-mobile2/WebGde/WebContent/WEB-INF/config/sso/pubkey.pem
\ No newline at end of file
WebGde/WebContent/WEB-INF/config/sso/pubkey.pem 0 → 100644
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA23REfMQ/vghZ1EyHa4cDtSSQdcOHcqXKg7U8JPhqIs+cBt4lKWDaGmroQVxcTjIDz53ZwmmVc9KKEvAwfWM2GEl8VUM9/GszkkDHgY3qEos/4ESO2tWb8Jk6RSPUVJeXRSEOPrjUlvcXust23PXh5rInzfNNowUEkiidVX1jxdvyJq3qHMVzlMpiyJi3X7Lnb20QrMGqxUyCfmewGzlzYeCG5Wk2SjVy9Yog6p3+lbJUBUYZU+/AAtVhtT4Rj4JHtunR5ZDyjNjQkrAYNIFWYlTfZDdWZb1HLAOzpIK27QUC7q9+DzgtirE1xY3h6NJryLUX89Q9MB+VsZQX/4Mb7QIDAQAB
\ No newline at end of file
WebGde/WebContent/WEB-INF/web.xml
......@@ -15,6 +15,10 @@
<param-value>com.svi.webgde.restservice.services</param-value>
</init-param>
<init-param>
<param-name>jersey.config.server.provider.classnames</param-name>
<param-value>com.svi.webgde.restservice.filters.AuthorizedFilter</param-value>
</init-param>
<init-param>
<param-name>jersey.config.server.provider.classnames</param-name>
<param-value>org.glassfish.jersey.media.multipart.MultiPartFeature</param-value>
</init-param>
......
WebGde/WebContent/WebGde-Widgets/BPO/getElement.js
......@@ -100,10 +100,12 @@ export class BPO {
}
async isLSTExisting(element) {
const authToken = sessionStorage.getItem('token');
const response = await fetch(urlGetIfExisting, {
method: "POST",
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify({
"filePath": `${element.fileLocation}/${element.elementId}.lst`
......@@ -113,10 +115,12 @@ export class BPO {
}
async isXMLExisting(element) {
const authToken = sessionStorage.getItem('token');
const response = await fetch(urlGetIfExisting, {
method: "POST",
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify({
"filePath": `${element.fileLocation}/${element.elementId}.${ENCODING_PASS == "PASS1" ? "DTA" : "DTB"}`
......@@ -147,11 +151,13 @@ export class BPO {
"imageName": filePath ,
"outputDir": sessionStorage.getItem("element_file_loc") + "/" + (ENCODING_PASS == "PASS1" ? elementId + ".DTA" : elementId + ".DTB")
}
const authToken = sessionStorage.getItem('token');
let response = await fetch(urlGetFields, {
method: "POST",
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(xmlData)
});
......@@ -167,13 +173,15 @@ export class BPO {
async getMobileFieldData() {
let elementId = sessionStorage.getItem("element_id");
let xmlData = {
"outputDir": sessionStorage.getItem("element_file_loc") + "/" + elementId + ".DFC"
"outputDir": sessionStorage.getItem("element_file_loc") + "/" + elementId + ".DVR"
}
const authToken = sessionStorage.getItem('token');
let response = await fetch(urlGetMobileFields, {
method: "POST",
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(xmlData)
});
......@@ -200,10 +208,12 @@ export class BPO {
async function getFieldXml(element) {
const authToken = sessionStorage.getItem('token');
const response = await fetch(urlGetXml, {
method: "POST",
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify({
"filePath": `${element.fileLocation}/${element.elementId}.${ENCODING_PASS == "PASS1" ? "DTA" : "DTB"}`
......@@ -274,10 +284,12 @@ async function createOutputXml(fields, metrics, doctype, section) {
"section": section
}
const authToken = sessionStorage.getItem('token');
let response = await fetch(urlWriteXml, {
method: "POST",
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(xmlData)
});
......@@ -287,7 +299,8 @@ async function createOutputXml(fields, metrics, doctype, section) {
let response = await fetch(urlUpdateEob, {
method: "POST",
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(xmlData)
});
......@@ -316,10 +329,12 @@ async function completeToNextNode(elementId) {
}
};
const authToken = sessionStorage.getItem('token');
let response = await fetch(getUrlCompleteToNextNode(elementId), {
method: "POST",
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(requestJSON)
});
......@@ -386,10 +401,11 @@ async function getFileLst(url, id, overlay, filename) {
var myObject = {
fileId: id
};
const authToken = sessionStorage.getItem('token');
fetch(url, {
method: 'POST',
headers: {
'Authorization': sessionStorage.getItem('token'),
'Authorization': `Bearer ${authToken}`,
'Content-Type': 'application/json'
},
body: JSON.stringify(myObject)
......
WebGde/WebContent/WebGde-Widgets/BPO/rejectElement.js
import { createLoadingScreen, removeLoadingScreen, resetGDE } from "../../script.js";
import { resetGDE } from "../../script.js";
import { SCHEMA_FILE_PATH } from "../DataInputWidget/config.js";
import { validateInput } from "../DataInputWidget/validateInput.js";
import { goBackToElementListViewer } from "../ElementListWidget/ElementListWidget.js";
import { createLoadingModal, removeLoadingModal } 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";
import { createInfoModal, createModal, createErrorModal } from "../genericPopup/genericPopup.js";
import { BPO_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_STORAGE } from "../globalVariable.js";
import { getRejectElement } from "./bpoService.js";
import { urlUpdateException } from "./gfsService.js";
......@@ -35,10 +36,9 @@ async function rejectElement() {
//isCanvasNotCreated = true;
async function successfulReturn() {
document.getElementById("backdropContainer").remove();
if(goBackToElementListViewer()){
resetGDE();
removeLoadingScreen();
removeLoadingModal();
};
}
createInfoModal(successfulReturn, 'OK', "Element rejected");
......@@ -97,102 +97,87 @@ 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() {
// Get all elements with the class "backdrop-container"
var existingBackdropContainers = document.querySelectorAll(".backdrop-container");
// Iterate through the NodeList and remove each element
existingBackdropContainers.forEach(function (element) {
element.remove();
});
var backdropContainer = document.createElement("div");
backdropContainer.id = "backdropContainerReject";
backdropContainer.classList.add("backdrop-container");
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;
}
}
document.getElementById('MssgBox').value = "";
document.getElementById('rejectSubmit').click();
}
cancelButton.onclick = function () {
document.getElementById("rejectWindow").remove();
removeLoadingScreen();
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("backdropContainerReject").remove();
} else {
createErrorModal(null, "Close", "Reason must not be blank.");
removeLoadingModal();
}
}
}
popUpDisplay.append(screenMain);
popUpDisplay.style.display = "block";
document.body.append(popUpDisplay);
}
cancelButton.onclick = function () {
document.getElementById("backdropContainerReject").remove();
}
document.getElementById("popupContainer").style.display = "block";
}
......@@ -386,10 +371,12 @@ function createMessageBox(id){
async function updateXMLException(xmlData){
const authToken = sessionStorage.getItem('token');
let response = await fetch(urlUpdateException, {
method: "POST",
headers: {
'Content-Type':'application/json'
'Content-Type':'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(xmlData)
});
......
WebGde/WebContent/WebGde-Widgets/BPO/returnElement.js
import { createLoadingScreen, removeLoadingScreen, resetGDE } from "../../script.js";
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, removeLoadingModal } 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";
export async function returnElementBPO(elementId) {
let response = await fetch(getUrlReturnElement(elementId), {method: "POST"});
return response;
try {
let response = await fetch(getUrlReturnElement(elementId), { method: "POST" });
if (response.ok) {
// If the response status is 200
return { success: true, data: await response.json() };
} else {
// If the response status is not 200
return { success: false, error: `Error: ${response.status}` };
}
} catch (error) {
// Handle connection errors or other issues
console.error('Error:', error);
return { success: false, error: 'Connection error' };
}
}
......@@ -86,55 +98,24 @@ 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", "Returning Element", null, null, null);
let response = await returnElementBPO(sessionStorage.getItem("element_id"));
if (response.status == 200) {
if (response.success) {
sessionStorage.removeItem("section");
sessionStorage.removeItem("doctype");
removePrompt();
document.getElementById("returnWindow").remove();
removeLoadingModal();
goBackToElementListViewer();
}else{
function errorReturn(){
removePrompt();
removeLoadingModal();
}
createInfoModal(errorReturn, 'Error', "Error ${response.status}: Returning element");
createInfoModal(errorReturn, 'Error', `${response.error} while returning the 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?", "Any unsubmitted inputs and items will be lost.");
}
function createButtonElem(className, buttonName, icon) {
......
WebGde/WebContent/WebGde-Widgets/DataInputWidget/Assets/Camera-UI.svg 0 → 100644
<svg id="Camera_UI" data-name="Camera UI" xmlns="http://www.w3.org/2000/svg" width="232" height="40" viewBox="0 0 232 40">
<g id="Camera_Button" data-name="Camera Button">
<rect id="Rectangle_18" data-name="Rectangle 18" width="232" height="40" rx="8" fill="#006ba6"/>
<text id="Camera" transform="translate(139.089 24.522)" fill="#fff" font-size="16" font-family="Open Sans-Bold, Open Sans" font-weight="700"><tspan x="-30" y="0">Camera</tspan></text>
<path id="Icon_awesome-camera" data-name="Icon awesome-camera" d="M20.035,6.633V17.9a1.879,1.879,0,0,1-1.878,1.878H1.878A1.879,1.879,0,0,1,0,17.9V6.633A1.879,1.879,0,0,1,1.878,4.754H5.322L5.8,3.467A1.876,1.876,0,0,1,7.56,2.25h4.911a1.876,1.876,0,0,1,1.757,1.217l.485,1.287h3.443A1.879,1.879,0,0,1,20.035,6.633Zm-5.322,5.635a4.7,4.7,0,1,0-4.7,4.7A4.7,4.7,0,0,0,14.713,12.267Zm-1.252,0a3.443,3.443,0,1,1-3.443-3.443A3.449,3.449,0,0,1,13.461,12.267Z" transform="translate(65.089 8.985)" fill="#fff"/>
</g>
</svg>
WebGde/WebContent/WebGde-Widgets/DataInputWidget/Assets/Icon-awesome-camera.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" width="20.035" height="17.53" viewBox="0 0 20.035 17.53">
<path id="Icon_awesome-camera" data-name="Icon awesome-camera" d="M20.035,6.633V17.9a1.879,1.879,0,0,1-1.878,1.878H1.878A1.879,1.879,0,0,1,0,17.9V6.633A1.879,1.879,0,0,1,1.878,4.754H5.322L5.8,3.467A1.876,1.876,0,0,1,7.56,2.25h4.911a1.876,1.876,0,0,1,1.757,1.217l.485,1.287h3.443A1.879,1.879,0,0,1,20.035,6.633Zm-5.322,5.635a4.7,4.7,0,1,0-4.7,4.7A4.7,4.7,0,0,0,14.713,12.267Zm-1.252,0a3.443,3.443,0,1,1-3.443-3.443A3.449,3.449,0,0,1,13.461,12.267Z" transform="translate(0 -2.25)" fill="#fff"/>
</svg>
WebGde/WebContent/WebGde-Widgets/DataInputWidget/Assets/Icon-ionic-ios-calendar.svg 0 → 100644
<svg id="Icon_ionic-ios-calendar" data-name="Icon ionic-ios-calendar" xmlns="http://www.w3.org/2000/svg" width="18.784" height="17.339" viewBox="0 0 18.784 17.339">
<path id="Path_9" data-name="Path 9" d="M19.79,5.625H17.984V6.709a.362.362,0,0,1-.361.361H16.9a.362.362,0,0,1-.361-.361V5.625H7.87V6.709a.362.362,0,0,1-.361.361H6.786a.362.362,0,0,1-.361-.361V5.625H4.619A1.811,1.811,0,0,0,2.813,7.431V19.713a1.811,1.811,0,0,0,1.806,1.806H19.79A1.811,1.811,0,0,0,21.6,19.713V7.431A1.811,1.811,0,0,0,19.79,5.625Zm.361,13.546a.906.906,0,0,1-.9.9H5.16a.906.906,0,0,1-.9-.9V11.043a.362.362,0,0,1,.361-.361H19.79a.362.362,0,0,1,.361.361Z" transform="translate(-2.813 -4.18)" fill="rgba(15,40,83,0.43)"/>
<path id="Path_10" data-name="Path 10" d="M8.945,4.111a.362.362,0,0,0-.361-.361H7.861a.362.362,0,0,0-.361.361V5.195H8.945Z" transform="translate(-3.888 -3.75)" fill="rgba(15,40,83,0.43)"/>
<path id="Path_11" data-name="Path 11" d="M22.07,4.111a.362.362,0,0,0-.361-.361h-.722a.362.362,0,0,0-.361.361V5.195H22.07Z" transform="translate(-6.898 -3.75)" fill="rgba(15,40,83,0.43)"/>
</svg>
WebGde/WebContent/WebGde-Widgets/DataInputWidget/Assets/Icon-ionic-md-time.svg 0 → 100644
<svg id="Icon_ionic-md-time" data-name="Icon ionic-md-time" xmlns="http://www.w3.org/2000/svg" width="18.737" height="18.737" viewBox="0 0 18.737 18.737">
<path id="Path_12" data-name="Path 12" d="M12.172,2.813a9.369,9.369,0,1,0,9.378,9.369A9.365,9.365,0,0,0,12.172,2.813Zm.009,16.863a7.495,7.495,0,1,1,7.495-7.495A7.495,7.495,0,0,1,12.181,19.676Z" transform="translate(-2.813 -2.813)" fill="rgba(15,40,83,0.43)"/>
<path id="Path_13" data-name="Path 13" d="M15.187,8.906H13.781v5.621l4.919,2.95.7-1.153-4.216-2.5Z" transform="translate(-5.35 -4.222)" fill="rgba(15,40,83,0.43)"/>
</svg>
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/Assets/fingerprint-simple-fill-svgrepo-com.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#FFFFFF" width="800px" height="800px" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg">
<path d="M183.98242,128.0094a246.6394,246.6394,0,0,1-18.53418,94.23926,8.00032,8.00032,0,0,1-14.79883-6.084,230.70455,230.70455,0,0,0,17.333-88.15527,8,8,0,1,1,16,0Zm-56-40a40.06442,40.06442,0,0,1,29.81445,13.333,8.00032,8.00032,0,1,0,11.92188-10.67188A56.00093,56.00093,0,0,0,71.98242,128.0094,136.088,136.088,0,0,1,55.00586,193.861a7.99993,7.99993,0,1,0,13.99219,7.75977A152.12935,152.12935,0,0,0,87.98242,128.0094,40.04583,40.04583,0,0,1,127.98242,88.0094Zm-58.665-25.59473A7.99966,7.99966,0,1,0,58.64746,50.4928a104.15766,104.15766,0,0,0-34.665,77.5166,87.28655,87.28655,0,0,1-7.97558,36.66308,7.9997,7.9997,0,1,0,14.541,6.67383,103.15936,103.15936,0,0,0,9.43457-43.33691A88.1429,88.1429,0,0,1,69.31738,62.41467Zm58.665-38.40527a103.7636,103.7636,0,0,0-34.667,5.91992,8.00025,8.00025,0,0,0,5.332,15.08594,88.06652,88.06652,0,0,1,117.335,82.99414,281.58357,281.58357,0,0,1-6.93847,62.22851,8.00013,8.00013,0,1,0,15.60351,3.541,297.64323,297.64323,0,0,0,7.335-65.76953A104.11791,104.11791,0,0,0,127.98242,24.0094Zm-14.084,176.72949a8.00188,8.00188,0,0,0-10.60742,3.93359c-1.92676,4.19727-4.044,8.38086-6.291,12.43555a7.99945,7.99945,0,1,0,13.99219,7.75781c2.44336-4.40625,4.74511-8.95507,6.83984-13.51953A7.999,7.999,0,0,0,113.89844,200.73889Zm14.07226-80.73047a8.00039,8.00039,0,0,0-8,8,184.6862,184.6862,0,0,1-5.79687,46.00586,8.00008,8.00008,0,1,0,15.49512,3.98828,200.70138,200.70138,0,0,0,6.30175-49.99414A8.00039,8.00039,0,0,0,127.9707,120.00842Z"/>
</svg>
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/DataInputWidget/DBLookup/DBLookup.js
......@@ -4,11 +4,13 @@ import { DB_URL } from "../config.js";
export const fetchOptionsDB = async (requestBody) => {
try {
const authToken = sessionStorage.getItem('token');
const response = await fetch(DB_URL, {
method: 'POST',
body: JSON.stringify(requestBody),
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
}
});
const data = await response.json();
......
WebGde/WebContent/WebGde-Widgets/DataInputWidget/DataInputWidget.css 0 → 100644
@font-face {
font-family: 'Open Sans';
src: url('https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWJ0bbck.woff2') format('woff2');
/* Add additional sources or font formats for better compatibility */
font-weight: normal;
font-style: normal;
}
html, body {
min-height: 100vh;
height: 100%;
margin: 0;
background-color: #C7DFEB;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
overflow-y: hidden;
}
* {
-webkit-font-smoothing: auto;
font-size: 14px;
/* letter-spacing: 0.1em; */
text-rendering: optimizeLegibility;
font-weight: normal;
font-family: Open Sans, sans-serif;
font-style: normal;
}
h1 {
display: none;
}
h2 {
display: none;
}
h3 {
display: none;
}
.web-gde-container {
width: 100vw;
height: 100vh;
}
#imageViewerContainer {
display: none;
}
.sidebar {
position: absolute;
right: 0;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background-color: #C7DFEB;
}
.remove-button {
display: inline-block;
padding: 2px 6px;
background-color: red;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 50%;
margin-left: 5px;
}
#input-field-container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
overflow: auto;
background-color: #C7DFEB;
justify-content: space-between;
}
.dash {
display: unset;
align-self: center;
padding: 6px;
}
.fieldContainer {
/* layout config */
display: flex;
flex-direction: column;
border: none;
outline: none;
padding: 0px 4px 0px 4px;
flex-wrap: nowrap;
}
#fields *:not([type=submit]):focus {
background-color: yellow;
}
.image-capture, .fingerprint-capture, .file-upload {
width: 100%;
border-style: none;
cursor: pointer;
align-items: center;
height: auto;
}
#fields {
/* margin-left: 17px;
margin-right: 17px; */
padding: 18px;
/* border-radius: 15px; */
background-color: #C7DFEB;
overflow-y: auto;
display: flex;
flex-direction: column;
flex: unset;
max-height: 100vh;
border-style: none;
}
#fields>div {
background-color: #C7DFEB;
border: none;
}
.submitButtons {
font-weight: 600;
display: block;
margin: auto;
font-size: 13px;
width: 93px;
margin-top: 10px;
margin-bottom: 15px;
cursor: pointer;
background-color: white;
padding: 10px;
width: 100%;
border-radius: 5px;
outline: none;
border: none;
font-size: 16px;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
}
@media only screen and (max-width: 530px) {
.date-range {
display: flex;
flex-direction: column;
justify-content: space-between;
/* padding: 20px 0px 20px 0px; */
/* border-style: solid;
border-width: thin;
border-color: gray;
background-color:#e7e7e7;
*/
}
}
.dash {
display: unset;
align-self: center;
padding: 6px;
}
.date-range {
display: flex;
justify-content: space-between;
}
.dateContainer {
width: 100%;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
input[type="date"] {
background-image: url('Assets/Icon-ionic-ios-calendar.svg');
background-position: left center;
background-repeat: no-repeat;
background-size: 18px;
background-position: 13px;
padding-left: 44px !important;
}
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-calendar-picker-indicator {
display: none;
}
input[type="time"]{
background-image: url('Assets/Icon-ionic-md-time.svg');
background-position: left center;
background-repeat: no-repeat;
background-size: 18px;
background-position: 13px;
padding-left: 44px !important;
}
label {
font-size: 16px;
font-weight: 700;
}
.asterisk {
color: #ff3333;
}
.captureButtons {
display: inline-block;
width: 100%;
overflow-x: clip;
flex-wrap: nowrap;
flex-grow: 1;
border-radius: 8px;
background-color: white;
border-style: solid;
border-width: 0.1cm;
border-color: #d4d2d2;
}
.labelContainer {
width: 100%;
padding: 2px;
margin-top: 5px;
margin-left: 10px;
}
.inputContainer {
display: inline-block;
width: 100%;
overflow-x: clip;
flex-wrap: nowrap;
flex-grow: 1;
border-radius: 8px;
padding: 1px;
}
input:focus, textarea:focus {
background-color: yellow;
border: 0px;
border-radius: 8px;
}
input[type=text], input[type=date], input[type=time], textarea {
width: 100%;
/* height: 25px; */
padding: 11px 16px;
border-style: none;
border-radius: 8px;
}
input[type=checkbox], input[type=radio] {
width: 23px;
height: 23px;
border: none !important;
margin-right: 15px;
margin-top: 1px;
}
.radio-like-checkbox {
display: flex;
padding: 3px;
}
.checkbox {
display: flex;
padding: 3px;
}
input[type=file]::file-selector-button {
padding: 5px 10px 5px 10px;
border-radius: 2px;
border: none;
outline: none;
background-color: #00a8c0;
color: white;
}
input[type=file] {
width: 100%;
padding: 5px;
}
input[type=file]:hover {
background-color: #cecccc;
z-index: 1;
}
.buttonsContainer {
display: flex;
justify-content: center;
align-items: center;
}
.image-capture .icon{
width: 18px; /* Adjust the width of the icon */
height: 18px; /* Adjust the height of the icon */
display: inline-block;
margin-right: 30px;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
background-image: url('Assets/Icon-awesome-camera.svg'); /* Replace with the actual path to your icon */
}
.image-capture button {
width: 100%;
border-radius: 8px;
display: flex;
justify-content: center;
background-color: #006BA6;
border-style: none;
color: white;
padding: 10px 50px;
font-size: 14px;
font-weight: bold;
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: 100%;
border-radius: 8px;
display: flex;
justify-content: center;
background-color: #006BA6;
border-style: none;
color: white;
padding: 10px 50px;
font-size: 14px;
font-weight: bold;
overflow: hidden;
}
.fingerprint-capture .icon{
width: 18px; /* Adjust the width of the icon */
height: 18px; /* Adjust the height of the icon */
display: inline-block;
margin-right: 30px;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
background-image: url('Assets/fingerprint-simple-fill-svgrepo-com.svg')
}
.dropdown-content {
/* padding: 10px; */
border-style: none;
}
select {
width: 100%;
border-style: none;
border-radius: 8px;
background-color: white;
padding: 11px 16px;
color: #444;
}
select::-ms-expand {
display: none;
}
.select2-selection--single {
border-style: none !important;
border-radius: 8px !important;
height: auto !important;
padding: 11px 16px !important;
}
.select2-selection__rendered{
line-height: normal !important;
padding: 0px !important;
}
.select2-selection__arrow{
top: 50% !important;
right: 10px !important;
transform: translateY(-50%) !important;
}
.select2-selection__arrow b {
border-left: 5.175px solid transparent !important;
border-right: 5.175px solid transparent !important;
border-top: 6px solid #000 !important;
}
textarea {
resize: none;
padding: 20px;
}
#text-area {
width: 91%;
font-size: 11px;
padding: 9px 9px;
margin-left: 15px;
margin-top: 5px;
margin-bottom: 5px;
height: 103px;
}
.input-invalid {
border-color: #ff3333 !important;
border-style: solid !important;
border-width: thin;
border-radius: 8px;
}
.field-error{
color: #ff3333;
padding-left: 20px;
font-size: 14px;
font-style: italic;
}
.input-valid {
/* border-color: #000000 !important; */
border-style: none;
border-radius: 8px;
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/DataInputWidget/ImageCapture/ImageCapture.css 0 → 100644
.image-viewer-overlay {
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0,0,0, .5);
}
.image-viewer-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100vw;
height: 100vw; /* Height set to match the width */
max-width: 100vh; /* Max height to prevent overflow */
max-height: 100vh;
background: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.image-viewer-inner {
position: relative;
height: auto;
}
#zoomed-image {
max-width: 100%;
max-height: 100%;
transition: transform 0.3s ease;
overflow: auto;
}
#close-btn {
z-index: 20;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
color: #fff;
font-size: 40px;
}
WebGde/WebContent/WebGde-Widgets/DataInputWidget/ImageCapture/captureImage.js
export function processCapture(key, imgFilename) {
import { createConfirmationModal } from "../../genericPopup/genericPopup.js";
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);
// Add event listener to the thumbnail
thumbnail.addEventListener('click', function () {
openImageViewer(img.src);
});
// 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.id = `${key}_fname`;
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 +68,27 @@ 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}_x`).addEventListener('click', () => {
img.style.display = 'none';
document.getElementById(`${key}_container`).style.display = 'none';
function deleteImage(){
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();
}
document.getElementById(`${key}_x`).addEventListener('click', ()=> {
createConfirmationModal(deleteImage, "Delete Image?")
});
}
......@@ -80,4 +118,49 @@ export function insertBlobIntoInput(blob, filename, key) {
dataTransfer.items.add(file);
input.files = dataTransfer.files;
}
function openImageViewer(imageSrc) {
const overlay = document.createElement('div');
overlay.classList.add('image-viewer-overlay');
const container = document.createElement('div');
container.classList.add('image-viewer-container');
const closeBtn = document.createElement('div');
closeBtn.id = 'close-btn';
closeBtn.innerHTML = '&times;';
closeBtn.addEventListener('click', () => {
document.body.removeChild(overlay);
});
const image = document.createElement('img');
image.id = 'zoomed-image';
image.src = imageSrc;
container.appendChild(closeBtn);
container.appendChild(image);
overlay.appendChild(container);
document.body.appendChild(overlay);
let scale = 1;
let lastScale = 1;
const hammer = new Hammer(container);
hammer.get('pinch').set({ enable: true });
hammer.on('pinchstart pinchmove pinchend', function (e) {
if (e.type === 'pinchstart') {
lastScale = scale;
}
scale = Math.max(0.1, Math.min(lastScale * e.scale, 3));
updateTransform();
});
function updateTransform() {
const transformValue = `scale(${scale})`;
image.style.transform = transformValue;
}
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/DataInputWidget/config.js
//Data Input Field Config
export var SCHEMA_FILE_PATH = "./WebGde-Widgets/sample_schema/Navotas 2.json";
export var SCHEMA_FILE_PATH = "./WebGde-Widgets/sample_schema/REG-INP.json";
//DBLookup Webservice URL
export var DB_URL = "http://localhost:8080/WebGde/svc/gfs-rest/db-lookup"
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/DataInputWidget/fetchSchema.js
import { createErrorModal } from "../genericPopup/genericPopup.js";
import {SCHEMA_FILE_PATH} from "./config.js";
import {showError} from "./showError.js";
......@@ -7,7 +8,7 @@ export const fetchSchema = async() => {
const response = await fetch(SCHEMA_FILE_PATH);
if (response.status !== 200) {
showError(`Fetching schema has encountered HTTP error: ${response.status}`);
createErrorModal(null, "Close", "Error while loading Schema File");
return null;
}
......@@ -15,7 +16,7 @@ export const fetchSchema = async() => {
const responseBody = await response.json();
if (!responseBody) {
showError('Empty Schema File');
createErrorModal(null, "Close", "Error while loading Schema File");
return null;
}
......
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/DataInputWidget/validateInput.js
......@@ -40,10 +40,10 @@ export const validateInput = (fieldID, value) => {
return validateNumeric(validation, value)
case 'timepicker':
return validateTime(validation, value)
case 'date':
case 'daterange':
return validateDateRange(validation, value)
case 'datepicker':
case 'date':
// console.log('date')
return validateDate(validation, value)
case 'image-capture':
......@@ -73,10 +73,10 @@ const validateEmail = (validation, value) => {
const PATTERN_EMAIL = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
let errors = []
const { mandatory, fieldLength } = validation
if(!mandatory && value.length===0) return { valid: true, errors: ['Field is empty'] }
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is empty'] }
if(fieldLength && value.length>fieldLength) errors = [...errors, 'Input exceed maximum characters']
if(!value.match(PATTERN_EMAIL)) errors = [...errors, 'Contain invalid character/s']
if(!mandatory && value.length===0) return { valid: true, errors: ['Field is required'] }
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is required.'] }
if(fieldLength && value.length>fieldLength) errors = [...errors, 'Input exceed maximum characters.']
if(!value.match(PATTERN_EMAIL)) errors = [...errors, 'Please input valid email address.']
return {
valid: errors.length===0,
......@@ -120,7 +120,7 @@ const validateAlphanumeric = (validation, value) => {
const { mandatory, fieldLength, invalidchar } = validation
try {
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is empty'] }
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is required.'] }
if(fieldLength && value.length>fieldLength) errors = [...errors, 'Input exceed maximum characters']
if(invalidchar) {
// method for escaping characters
......@@ -128,7 +128,7 @@ const validateAlphanumeric = (validation, value) => {
const escaped_pattern = invalidchar.replace(/[-[\]{}()*+!<=:?.\/\\^$|#\s,]/g, '\\$&')
const pattern = new RegExp(`[${escaped_pattern}]`)
if(pattern.test(value)) errors = [...errors, 'Contain invalid character/s']
if(pattern.test(value)) errors = [...errors, 'Has invalid character(s).']
}
return {
......@@ -155,9 +155,9 @@ const validateAlphabet = (validation, value) => {
const PATTERN_ALPHABET = /[^A-Za-z\s]/g
let errors = []
const { mandatory, fieldLength } = validation
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is empty'] }
if(fieldLength && value.length>fieldLength) errors = [...errors, 'Input exceed maximum characters']
if(PATTERN_ALPHABET.test(value)) errors = [...errors, 'Contain invalid character/s']
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is required.'] }
if(fieldLength && value.length>fieldLength) errors = [...errors, 'Input exceed maximum characters.']
if(PATTERN_ALPHABET.test(value)) errors = [...errors, 'Has invalid character(s).']
return {
valid: errors.length===0,
......@@ -182,9 +182,9 @@ const validateNumeric = (validation, value) => {
const { mandatory, fieldLength } = validation
try {
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is empty'] }
if(fieldLength && value.length>fieldLength) errors = [...errors, 'Input exceed maximum characters']
if(PATTERN_NUMERIC.test(value)) errors = [...errors, 'Contain invalid character/s']
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is required.'] }
if(fieldLength && value.length>fieldLength) errors = [...errors, 'Input exceed maximum characters.']
if(PATTERN_NUMERIC.test(value)) errors = [...errors, 'Has invalid character(s).']
return {
valid: errors.length===0,
......@@ -210,7 +210,7 @@ const validateDateRange = (validation, value) => {
const { mandatory, regexformat } = validation
try{
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is empty'] }
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is required.'] }
return { valid: true }
} catch(err) {
......@@ -233,7 +233,7 @@ const validateDate = (validation, value) => {
const { mandatory, regexformat, validdate } = validation
try{
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is empty'] }
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is required.'] }
if(validdate === "past"){
if (value.length === 0) {
......@@ -241,7 +241,7 @@ const validateDate = (validation, value) => {
}
const enteredDateParts = value.split('-');
if (enteredDateParts.length !== 3) {
return { valid: false, errors: ['Invalid date format'] };
return { valid: false, errors: ['Invalid date format.'] };
}
const enteredYear = parseInt(enteredDateParts[0]);
......@@ -256,7 +256,7 @@ const validateDate = (validation, value) => {
if (enteredDate < currentDate) {
return { valid: true }; // The date is in the past
} else {
return { valid: false, errors: ['Date is not in the past'] };
return { valid: false, errors: ['Future date not allowed.'] };
}
}
......@@ -282,7 +282,7 @@ const validateTime = (validation, value) => {
const { mandatory, regexformat } = validation
try{
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is empty'] }
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is required.'] }
return { valid: true }
} catch(err) {
......@@ -307,12 +307,12 @@ const validateSpecific = (validation, value) => {
const { mandatory, validchars, options } = validation
try {
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is empty'] }
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is required'] }
if(validchars && validchars.includes(value)) return { valid: true }
if(options && options.includes(value)) return {valid: true }
if(!mandatory) return { valid: true }
return { valid: false, errors: ['Not an option'] }
return { valid: false, errors: ['No option selected.'] }
} catch(err) {
throw err
}
......@@ -333,10 +333,19 @@ const validateMedia = (validation, fieldID) => {
let errors = [];
const { mandatory } = validation
const inputElement = document.getElementById(`${fieldID}_attachedMedia`);
const inputElement = document.getElementById(`${fieldID}_thumbnail`);
const inputFilename = document.getElementById(`${fieldID}_fname`);
if (mandatory && inputElement.files.length === 0 && inputFilename.textContent.trim() === '') {
errors = [...errors, 'No File Attached!']
// Check if both inputElement and inputFilename are null
if (mandatory && (!inputElement || !inputFilename)) {
return {
valid: false,
errors: ['No file attached.']
};
}
if (mandatory && !inputElement.src && inputElement.src.trim() === '' && inputFilename.textContent.trim() === '') {
errors = [...errors, 'No File Attached.']
}
return {
valid: errors.length===0,
......@@ -368,7 +377,7 @@ const validateRadio = (validation, fieldID) => {
}
});
if (!isChecked) {
errors = [...errors, 'No option selected'];
errors = [...errors, 'No option selected.'];
}
}
......@@ -402,7 +411,7 @@ const validateChecklist = (validation, fieldID) => {
}
});
if (!isChecked) {
errors = [...errors, 'No option selected'];
errors = [...errors, 'No option selected.'];
}
}
......
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
......@@ -3,7 +3,7 @@
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
/* font-family: 'Arial', sans-serif; */
}
html,
......@@ -11,7 +11,7 @@ body {
min-height: 100vh;
height: 100%;
margin: 0;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
background-color: #C7DFEB;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
......@@ -20,23 +20,20 @@ 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;
border-bottom: 1px solid #e0e0e0;
}
......@@ -44,32 +41,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: 15px;
margin-bottom: 15px;
margin-left: 32px;
font-size: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.element-item span{
font-size: 18px;
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 +86,52 @@ body {
color: #7d7d7d;
}
.details-container {
padding: 22px 42px ;
background-color: #E7EAF1;
}
.bold {
font-weight: bold;
}
/* 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-encode {
margin-top: 12px;
margin-bottom: 12px;
margin-left: 50px;
margin-right: 40px;
white-space: normal;
overflow-wrap: break-word;
}
.detail-key {
font-size: 18px;
}
.detail-value {
font-size: 18px;
text-indent: 30px;
}
/* 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 +150,7 @@ body {
/* Style for disabled encode button */
#encode-btn.disabled {
background-color: #9fb3c8;
background-color: #94c1da;
/* Grayed out color */
cursor: not-allowed;
}
......@@ -143,6 +181,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,16 +192,119 @@ 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-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: 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;
}
/* Media Queries */
@media (max-width: 768px) {
#containerId {
padding: 1rem;
}
.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;
}
.details-container-encode {
display: none;
max-height: 70vh;
overflow-y: auto;
}
.extra-detail {
font-size: 16px;
margin-top: 12px;
margin-bottom: 12px;
margin-left: 50px;
margin-right: 40px;
white-space: normal;
overflow-wrap: break-word;
}
.element-container,
button {
padding: 1rem;
}
.logout-box{
font-size: 16px;
font-weight: bold;
background-color: white;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 50px;
padding-right: 50px;
border-style: solid;
border-width: thin;
border-color: #E5E8EC;
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/FileUpload/fileUpload.js
......@@ -13,10 +13,12 @@ export const uploadFile = async (file, fileName, directory) => {
directory: directory
};
const authToken = sessionStorage.getItem('token');
fetch(urlFileUpload, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(requestData)
})
......
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/config.js deleted 100644 → 0
export const FOLDER_PATH = "/WebGde-Widgets/ImageViewerWidget/modules/imageViewer";
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/index.html deleted 100644 → 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello, world!</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="" />
<link rel="icon" href="favicon.png">
<link rel="stylesheet" href="./modules/imageViewer/imageViewer.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
</head>
<body>
<style>
#imageViewerContainer{
width: 70vh;
height: 80vh;
}
</style>
<div id="imageViewerContainer"></div>
</body>
<script type="module" src="./script.js"></script>
</html>
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/highlight/highlightUtil.js deleted 100644 → 0
import { HIGHLIGHT_OBJECT } from "../../../globalVariable.js";
export function hightlightEventListeners(){
$(document).on('keyup', '.select2.select2-container', function (e) {
if (e.which == 9) {
//gets the id of the focused select element by using Tab key
const idArr = e.target.childNodes[0].id.split(/-container|select2-/);
//array created ALWAYS has empty characters on its first and last chars ["", "Civil Status", ""],
//so index 1 is used to get select element ID
HIGHLIGHT_OBJECT.highlight(idArr[1]);
HIGHLIGHT_OBJECT.currIdVal = idArr[1];
}
});
window.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.shiftKey && e.key === "H") {
HIGHLIGHT_OBJECT.flipXHighlightCanvas(HIGHLIGHT_OBJECT.currIdVal);
HIGHLIGHT_OBJECT.isInitialPositioning = false;
}
})
window.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.shiftKey && e.key === "V") {
HIGHLIGHT_OBJECT.flipYHighlightCanvas(HIGHLIGHT_OBJECT.currIdVal);
}
})
//waits for flip buttons to be created before adding event listeners for adjusting highlights
const flipBtnObserver = new MutationObserver(function (mutations, mutationInstance){
const flipBtnX = document.getElementById("TiffViewer_FlipX");
const flipBtnY = document.getElementById("TiffViewer_FlipY");
if(flipBtnX){
flipBtnX.addEventListener("click", function(){
HIGHLIGHT_OBJECT.flipXHighlightCanvas(HIGHLIGHT_OBJECT.currIdVal);
});
flipBtnY.addEventListener("click", function(){
HIGHLIGHT_OBJECT.flipYHighlightCanvas(HIGHLIGHT_OBJECT.currIdVal);
});
mutationInstance.disconnect();
}
});
flipBtnObserver.observe(document, {
childList: true,
subtree: true
});
//waits for fields to be created before adding event listeners
const fieldObserver = new MutationObserver(function (mutations, mutationInstance) {
//find input elements inside div element with id='fields'
const fields = document.getElementById('fields').querySelectorAll('input, textarea');
if (fields.length>0) {
fields.forEach((field) => {
//event listener when a field is focused
field.addEventListener('focus', (e) =>{
// flippedH = false;
HIGHLIGHT_OBJECT.highlight(e.target.id);
HIGHLIGHT_OBJECT.currIdVal = e.target.id;
})
field.addEventListener('mouseover', (e) =>{
// flippedH = false;
HIGHLIGHT_OBJECT.highlight(e.target.id);
HIGHLIGHT_OBJECT.currIdVal = e.target.id;
})
});
//open dropdown list event listener
//find select elements in div with id='fields'
$('#fields').find('select').each(function() {
$(this).on('select2:open', function (e) {
HIGHLIGHT_OBJECT.highlight($(this)[0].id);
HIGHLIGHT_OBJECT.currIdVal = $(this)[0].id;
});
});
mutationInstance.disconnect();
}
});
fieldObserver.observe(document, {
childList: true,
subtree: true
});
// //waits until image is loaded, since its size is based on the displayed image
// const observer = new MutationObserver(function (mutations, mutationInstance) {
// var TIFFimg = document.getElementById(sessionStorage.getItem("TiffViewer_current"));
// var parentDivPDF;
// var canvasPDF;
// if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){
// parentDivPDF = document.getElementById("pdf-container");
// canvasPDF = parentDivPDF.getElementsByTagName('canvas')[0];
// TIFFimg = canvasPDF;
// }
// var parentDivIMG;
// var canvasIMG;
// if(sessionStorage.getItem("file_Name").endsWith(JPG_EXTENSION) || sessionStorage.getItem("file_Name").endsWith(PNG_EXTENSION) ){
// var parentDivIMG = document.getElementById("img-container");
// var canvasIMG = parentDivIMG.getElementsByTagName('canvas')[0];
// TIFFimg = canvasIMG;
// }
// if (TIFFimg != null) {
// //waits until width and height has been assigned
// var sizeObserver = new window.ResizeObserver(entries => {
// if(sessionStorage.getItem("file_Name").endsWith(PDF_EXTENSION)){
// if(isCanvasNotCreated){
// HIGHLIGHT_OBJECT.rect = canvasPDF.getBoundingClientRect();
// HIGHLIGHT_OBJECT.createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
// HIGHLIGHT_OBJECT.isCanvasNotCreated = false;
// HIGHLIGHT_OBJECT.ctx.clearRect(0, 0, canvasPDF.width, canvasPDF.height);
// }
// else{
// HIGHLIGHT_OBJECT.rect = canvasPDF.getBoundingClientRect();
// if(HIGHLIGHT_OBJECT.isInitialPositioning){
// HIGHLIGHT_OBJECT.resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left-263));
// }
// else{
// HIGHLIGHT_OBJECT.resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left));
// HIGHLIGHT_OBJECT.isInitialPositioning = true;
// }
// }
// }
// else if(sessionStorage.getItem("file_Name").endsWith(JPG_EXTENSION) || sessionStorage.getItem("file_Name").endsWith(PNG_EXTENSION)){
// if(isCanvasNotCreated){
// rect = canvasIMG.getBoundingClientRect();
// createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
// isCanvasNotCreated = false;
// ctx.clearRect(0, 0, canvasIMG.width, canvasIMG.height);
// }
// else{
// rect = canvasIMG.getBoundingClientRect();
// if(isInitialPositioning){
// resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left-263));
// }
// else{
// resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left));
// isInitialPositioning = true;
// }
// }
// }
// else{
// if(isCanvasNotCreated){
// rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect();
// // createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
// createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
// isCanvasNotCreated = false;
// ctx.clearRect(0, 0, highlightCanvas.width, highlightCanvas.height);
// }
// else{
// rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect();
// if(isInitialPositioning){
// resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left-263));
// }
// else{
// resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left));
// isInitialPositioning = true;
// }
// }
// }
// $(document).ready(function () {
// $('form:first *:input[type!=hidden]:first').focus(); // Run code
// });
// });
// sizeObserver.observe(TIFFimg);
// mutationInstance.disconnect();
// }
// });
// observer.observe(document, {
// childList: true,
// subtree: true
// });
// }
}
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/assets/pdf.worker.js deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageDocument.js deleted 100644 → 0
import { FOLDER_PATH } from "../../config.js";
export class ImageDocument {
imageFile = null;
imageID = null;
imageType = null;
imageStatus = null;
imageFileName = null;
/*@param
imageFile --- image Blob
id --- element id
fileFormat --- attribute for the element
imageStatus --- 200 to display image, 415 for unsupported file , 500 for unable to display image
*/
constructor(imageFile, id, fileName, fileFormat, imageStatus) {
this.imageFile = imageFile;
this.imageID = id;
this.imageType = fileFormat;
this.imageStatus = imageStatus;
this.imageFileName = fileName;
}
async init() {
switch (this.imageStatus){
case 200:
let imageContainer = document.createElement("div");
imageContainer.setAttribute("class", "row");
imageContainer.setAttribute("id", this.imageID);
imageContainer.setAttribute("num-of-pages", "1");
imageContainer.setAttribute("file-type", this.imageType);
imageContainer.setAttribute("file-name", this.imageFileName);
let imageElement = document.createElement("img");
imageElement.setAttribute("class", "image");
imageElement.src = this.imageFile;
imageContainer.appendChild(imageElement);
// let canvas = document.getElementById('canvas');
// let ctx = imageContainer.getContext('2d');
// imageContainer.width = imageElement.width;
// imageContainer.height = imageElement.height;
// ctx.drawImage(imageElement, 200, 200);
return imageContainer;
case 415: // unsupported file
return this.createUnsupportedFileDisplay(this.imageID, this.imageType);
case 500: // unable to display image
return this.createErrorImageDisplay(this.imageID);
}
}
createUnsupportedFileDisplay(id, format) {
let container = document.createElement("div");
container.setAttribute("class", "row unsupported-file");
container.setAttribute("id", id);
container.setAttribute("num-of-pages", "1");
container.setAttribute("file-type", format);
container.setAttribute("file-name", this.imageFileName);
let imageElement = document.createElement("img");
imageElement.setAttribute("class", "image unsupported-file");
imageElement.src = "."+ FOLDER_PATH +"/resources/question_mark.png";
let p = document.createElement("p");
p.textContent = format.toUpperCase()+" file is not supported.";
container.appendChild(imageElement);
container.appendChild(p);
return container;
}
createErrorImageDisplay(id) {
let container = document.createElement("div");
container.setAttribute("class", "row error-image");
container.setAttribute("id", id);
container.setAttribute("num-of-pages", "1");
container.setAttribute("file-type", "");
container.setAttribute("file-name", this.imageFileName);
let imageElement = document.createElement("img");
imageElement.setAttribute("class", "image error-image");
imageElement.src = "."+ FOLDER_PATH + "/resources/error_icon.png";
let p = document.createElement("p");
p.textContent = "Ooops! Sorry unable to display image."
container.appendChild(imageElement);
//container.appendChild(h3);
container.appendChild(p);
return container;
}
}
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css deleted 100644 → 0
*{
box-sizing: border-box;
padding: 0%;
margin: 0%;
font-family: 'Varela Round', sans-serif;
}
body {
margin: 0;
}
.image-viewer-container{
background-color: #BFBFBF;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.image-container{
height: 90%;
width: 100%;
overflow: auto;
margin: auto;
background-color: #BFBFBF;
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: center;
position: relative;
}
.image{
height: 100%;
width: 100%;
border: 1px solid #000;
}
.unsupported-file, .error-image{
height: 40%;
width: 40%;
margin: auto;
border: 0px !important;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.image.unsupported-file{
height: 50% !important;
width: 40% !important;
border: 0px !important;
margin: auto;
}
.unsupported-file p{
font-size: 14px;
color: #000;
margin: auto;
word-wrap: break-word;
width: 100%;
text-align: center;
}
.image.error-image{
height: 70% !important;
width: 70% !important;
border: 0px !important;
margin: auto;
}
.error-image p{
font-size: 14px;
color: #000;
margin: auto;
word-wrap: break-word;
width: 100%;
text-align: center;
}
.image-controls{
/* position: sticky;
bottom:1vh;
left: 0%; */
width: 100%;
height: fit-content;
padding: 2px;
background-color: #000000a1;
display: flex;
justify-content: space-between;
}
.image-controls .row{
display: flex;
justify-content: center;
flex-wrap: nowrap;
position: sticky;
z-index: 15;
}
.image-controls .row .button{
margin: 3px;
}
.image-btn-control{
width: fit-content;
border: 0px solid #fff;
color: white;
height: 5vh;
width: 5vh;
border-radius: 5px;
}
div.fit-content{
width: auto;
height: inherit;
object-fit: cover;
margin: auto;
}
canvas.fit-content{
max-height: 100%;
max-width: 100%;
object-fit: cover;
margin: auto;
}
#fitContentBtn{
background: no-repeat center/90% url("./resources/fullscreen_icon.png");
}
#flipVerticalBtn{
background: no-repeat center/90% url("./resources/flip_vertical_icon.png");
}
#flipHorizontalBtn{
background: no-repeat center/90% url("./resources/flip_horizontal_icon.png");
}
#leftRotateBtn{
background: no-repeat center/90% url("./resources/rotate_left_icon.png");
}
#rightRotateBtn{
background: no-repeat center/90% url("./resources/rotate_right_icon.png");
}
#zoomInBtn{
background: no-repeat center/90% url("./resources/zoom_in_icon.png");
}
#zoomOutBtn{
background: no-repeat center/90% url("./resources/zoom_out_icon.png");
}
#previousRecordImage{
background: no-repeat center/90% url("./resources/previous_rec.png");
margin-left: 1px;
}
#nextRecordImage{
background: no-repeat center/90% url("./resources/next_rec.png");
margin-right: 2px;
}
#imageViewerHeader{
width: 100%;
height: fit-content;
display: flex;
background-color: #000000a1;
padding: 5px;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
#previousPageBtn{
background: no-repeat center/90% url("./resources/previous_icon.png");
}
#nextPageBtn{
background: no-repeat center/90% url("./resources/next_icon.png");
}
#refreshCurrentImage{
background: no-repeat center/90% url("./resources/refresh_icon.png") ;
}
#imageViewerHeader .row{
display: flex;
align-items: center;
max-height: 6vh;
}
#imageViewerHeader .row .label{
font-size: 2vh;
color: #fff;
}
#imageViewerHeader .button{
height: 3vh;
width: 3vh;
}
#nextImage #previousImageID{
display: none;
}
/* .progress-bar__container {
width: 80%;
height: 2rem;
border-radius: 2rem;
position: relative;
overflow: hidden;
transition: all 0.5s;
will-change: transform;
box-shadow: 0 0 5px #e76f51;
}
.progress-bar {
position: absolute;
height: 100%;
width: 100%;
content: "";
background-color: #e76f51;
top:0;
bottom: 0;
left: -100%;
border-radius: inherit;
display: flex;
justify-content: center;
align-items:center;
color: white;
font-family: sans-serif;
}
.progress-bar__text {
display: none;
} */
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/pdfDocument.js deleted 100644 → 0
import { FOLDER_PATH } from "../../config.js";
export class PDFDocument {
pdfDoc = null;
pageNum = 1;
pageRendering = false;
pageNumPending = null;
scale = 1.5;
canvas = null;
ctx = null;
imageURL=null;
pdfContainerID = null;
fileName=null;
constructor(url, id, fileName){
this.imageURL = url;
this.pdfContainerID = id;
this.fileName = fileName;
}
async init() {
let _this = this;
let pdfCanvas = document.createElement("canvas");
var imageContainer = document.getElementById("imageContainer");
imageContainer.classList.add("pdf-canvas");
this.canvas = pdfCanvas;
this.ctx = this.canvas.getContext('2d');
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
pdfjsLib.GlobalWorkerOptions.workerSrc = '.'+ FOLDER_PATH +'/assets/pdf.worker.js';
pdfCanvas.setAttribute("id", this.pdfContainerID);
/**
* Asynchronously downloads PDF.
*/
await pdfjsLib.getDocument(this.imageURL).promise.then(function (pdfDoc_) {
_this.pdfDoc = pdfDoc_;
// Initial/first page rendering
_this.renderPage(1);
pdfCanvas.setAttribute("num-of-pages", _this.pdfDoc.numPages);
pdfCanvas.setAttribute("file-type", "pdf");
_this.setPDFDoc(_this.pdfDoc);
pdfCanvas.setAttribute("file-name", _this.fileName);
// sessionStorage.setItem("current_page", 1);
// sessionStorage.setItem("total_pages", _this.pdfDoc.numPages);
});
return pdfCanvas;
}
setPDFDoc(pdfDoc){
this.pdfDoc = pdfDoc;
}
/**
* Get page info from document, resize canvas accordingly, and render page.
* @param num Page number.
*/
async renderPage(num) {
let _this = this;
_this.pageRendering = true;
// Using promise to fetch the page
var page = await _this.pdfDoc.getPage(num);
var viewport = page.getViewport({ scale: _this.scale });
_this.canvas.height = viewport.height;
_this.canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext: _this.ctx,
viewport: viewport
};
await page.render(renderContext);
// Wait for rendering to finish
_this.pageRendering = false;
if (_this.pageNumPending !== null && !isNaN(_this.pageNumPending) && num !== _this.pageNumPending) {
// New page rendering is pending
_this.renderPage(_this.pageNumPending);
_this.pageNumPending = null;
}
}
/**
* If another page rendering in progress, waits until the rendering is
* finised. Otherwise, executes rendering immediately.
*/
queueRenderPage(num) {
if (this.pageRendering) {
this.pageNumPending = num;
} else {
this.renderPage(num);
}
}
}
// /**
// * Displays previous page.
// */
// export function onPrevPage(PDFDocument) {
// //const _this = this;
// }
// /**
// * Displays next page.
// */
// export function onNextPage(PDFDocument) {
// const _this = this;
// let pageNum = parseInt(sessionStorage.getItem("current_page"));
// let numPages = parseInt(sessionStorage.getItem("total_pages"));
// if (pageNum != numPages) {
// pageNum++;
// document.getElementById("nextPageBtn").style.visibility = "visible";
// document.getElementById("previousPageBtn").style.visibility = "visible";
// sessionStorage.setItem("current_page", pageNum);
// PDFDocument.queueRenderPage(pageNum);
// }
// if (pageNum === numPages) {
// document.getElementById("nextPageBtn").style.visibility = "hidden";
// }
// }
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/tiffDocument.js deleted 100644 → 0
export class TiffDocument{
filenameWithoutExt;
blob;
tiffImageName;
tiffID;
constructor(blob, url, filename, id){
this.tiffImageName = filename;
this.tiffID = id;
this.blob = blob;
//this.init(blob.arrayBuffer(), filename, id);
}
async init() {
Tiff.initialize({
TOTAL_MEMORY: 16777216 * 10
});
var arraybuffer;
var fileReader = new FileReader();
fileReader.onload = function (event) {
arraybuffer = event.target.result;
};
fileReader.readAsArrayBuffer(this.blob);
var buffer = await this.blob.arrayBuffer();
var TiffViewerImageName = this.tiffImageName;
const parts = TiffViewerImageName.split(".");
parts.pop();
this.filenameWithoutExt = parts.join(".");
let TiffViewer_pages = 0; //page count
let TiffViewer_current = 1; // TiffViewer_current page number
var tiff = new Tiff({
buffer: buffer
}); //get TIFF data via buffer
TiffViewer_pages = tiff.countDirectory(); //count TIFF image TiffViewer_pages
let tiffContainer = document.createElement("div");
tiffContainer.setAttribute("class", "tiff-container");
tiffContainer.setAttribute("id", this.tiffID);
tiffContainer.setAttribute("num-of-pages", TiffViewer_pages);
tiffContainer.setAttribute("file-type", "tiff");
tiffContainer.setAttribute("file-name", this.tiffImageName);
//creating blank image containers for each page and setting TIFF data as image source
for (var i = 1; i <= TiffViewer_pages; i++) {
var img = document.createElement('img');
img.id = this.filenameWithoutExt + i;
if (i != 1) {
img.setAttribute("class", "image tiff-images");
tiff.setDirectory(i - 1);
img.src = tiff.toCanvas().toDataURL();
img.style.display = "none";
tiffContainer.append(img);
} else {
let firstImage = document.createElement("img");
firstImage.src = tiff.toCanvas().toDataURL();
firstImage.setAttribute("class", "image");
firstImage.id = this.filenameWithoutExt + i;
tiffContainer.prepend(firstImage);
}
}
return tiffContainer;
}
}
// export function onPrevPage() {
// let TiffViewer_current = parseInt(sessionStorage.getItem("current_page"));
// if (TiffViewer_current != 1) {
// document.getElementById(_this.filenameWithoutExt + `${TiffViewer_current}`).style.display = "none";
// TiffViewer_current--;
// document.getElementById(_this.filenameWithoutExt + `${TiffViewer_current}`).style.display = "block";
// sessionStorage.setItem("current_page", TiffViewer_current);
// //CURRENT_PAGE_ELEMENT.textContent = TiffViewer_current;
// document.getElementById("nextPageBtn").style.visibility = "visible";
// //document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages;
// }
// if (TiffViewer_current === 1) {
// document.getElementById("previousPageBtn").style.visibility = "hidden";
// }
// }
// export function nextPage() {
// let TiffViewer_current = parseInt(sessionStorage.getItem("current_page"));
// let TiffViewer_pages = parseInt(sessionStorage.getItem("total_pages"));
// if (TiffViewer_current != TiffViewer_pages) {
// document.getElementById(_this.filenameWithoutExt + `${TiffViewer_current}`).style = "display: none";
// TiffViewer_current++;
// sessionStorage.setItem("current_page", TiffViewer_current);
// //CURRENT_PAGE_ELEMENT.textContent = TiffViewer_current;
// document.getElementById(_this.filenameWithoutExt + `${TiffViewer_current}`).style.display = "block";
// document.getElementById("previousPageBtn").style.visibility = "visible";
// // document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages;
// }
// if (TiffViewer_current === TiffViewer_pages) {
// document.getElementById("nextPageBtn").style.visibility = "hidden";
// }
// }
export const displayTiff = async (blob, url, filename, id) => {
Tiff.initialize({
TOTAL_MEMORY: 16777216 * 10
});
var startIndex = (url.indexOf('\\') >= 0 ? url.lastIndexOf('\\') : url.lastIndexOf('/'));
var TiffViewerImageName = url.substring(startIndex);
if (TiffViewerImageName.indexOf('\\') === 0 || TiffViewerImageName.indexOf('/') === 0) {
if (TiffViewerImageName.length > 40) {
TiffViewerImageName = decodeURI(TiffViewerImageName); /* ADDED: replaces the %20 that replaces the spaces when file name is displayed */
TiffViewerImageName = TiffViewerImageName.substring(1, 40);
TiffViewerImageName = TiffViewerImageName.concat("...");
} else {
TiffViewerImageName = TiffViewerImageName.substring(1);
}
}
var arraybuffer;
var fileReader = new FileReader();
fileReader.onload = function (event) {
arraybuffer = event.target.result;
};
fileReader.readAsArrayBuffer(blob);
TIFFViewer(await blob.arrayBuffer(), filename, id);
// await makeRequest(url, filename, id);
}
let Current_page = 0;
let filenameWithoutExt;
async function makeRequest(url, filename, id) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('get', url, true);
xhr.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
var startIndex = (xhr.responseURL.indexOf('\\') >= 0 ? xhr.responseURL.lastIndexOf('\\') : xhr.responseURL.lastIndexOf('/'));
var TiffViewerImageName = xhr.responseURL.substring(startIndex);
if (TiffViewerImageName.indexOf('\\') === 0 || TiffViewerImageName.indexOf('/') === 0) {
if (TiffViewerImageName.length > 40) {
TiffViewerImageName = decodeURI(TiffViewerImageName); /* ADDED: replaces the %20 that replaces the spaces when file name is displayed */
TiffViewerImageName = TiffViewerImageName.substring(1, 40);
TiffViewerImageName = TiffViewerImageName.concat("...");
} else {
TiffViewerImageName = TiffViewerImageName.substring(1);
}
}
TIFFViewer(xhr.response, filename, id);
}
};
xhr.send();
});
}
//Main Widget
function TIFFViewer(xhr, TiffViewerImageName, id) {
var buffer = xhr;
var TiffViewerImageName = TiffViewerImageName;
const parts = TiffViewerImageName.split(".");
parts.pop();
filenameWithoutExt = parts.join(".");
let TiffViewer_pages = 0; //page count
let TiffViewer_current = 1; // TiffViewer_current page number
//sessionStorage.setItem("TiffViewer_current", filenameWithoutExt + TiffViewer_current);
if (localStorage.getItem("prev") == 1) {
Current_page = Current_page - 1;
} else {
if (localStorage.getItem("submit") == 1 || Current_page == 0) {
Current_page = Current_page + 1;
}
}
var tiff = new Tiff({
buffer: buffer
}); //get TIFF data via buffer
TiffViewer_pages = tiff.countDirectory(); //count TIFF image TiffViewer_pages
let tiffContainer = document.createElement("div");
tiffContainer.setAttribute("class", "tiff-container");
tiffContainer.setAttribute("id", id);
tiffContainer.setAttribute("num-of-pages", TiffViewer_pages);
tiffContainer.setAttribute("file-type", "tiff");
//creating blank image containers for each page and setting TIFF data as image source
for (var i = 1; i <= TiffViewer_pages; i++) {
var img = document.createElement('img');
img.id = filenameWithoutExt + i;
if (i != 1) {
img.setAttribute("class", "image tiff-images");
tiff.setDirectory(i - 1);
img.src = tiff.toCanvas().toDataURL();
img.style.display = "none";
tiffContainer.append(img);
} else {
let firstImage = document.createElement("img");
firstImage.src = tiff.toCanvas().toDataURL();
firstImage.setAttribute("class", "image");
firstImage.id = filenameWithoutExt + i;
tiffContainer.prepend(firstImage);
}
}
DISPLAY_CONTAINER.appendChild(tiffContainer);
DISPLAY_CONTAINER.classList.add("pdf-canvas");
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/storage/indexedDBStorage.js deleted 100644 → 0
import { GDE_URL } from "../../../config.js";
export class IndexedDBStorage{
defaultGetStoreFunc;
dbName;
storeName;
constructor(dbName, tblName){
this.dbName = dbName;
this.storeName = tblName;
this.defaultGetStore();
}
promisifyRequest(request) {
return new Promise((resolve, reject) => {
request.oncomplete = request.onsuccess = () => resolve(request.result);
request.onabort = request.onerror = () => reject(request.error);
});
}
createStore() {
const request = indexedDB.open(this.dbName);
request.onupgradeneeded = () => request.result.createObjectStore(this.storeName);
const dbp = this.promisifyRequest(request);
return (txMode, callback) =>
dbp.then((db) =>
callback(db.transaction(this.storeName, txMode).objectStore(this.storeName)),
);
}
async storeImageFile(url, key){
const blob = await this.createBlob(url);
if (blob) {
await this.set(key, blob);
}
}
set(key, value, customStore = this.defaultGetStore()) {
return customStore('readwrite', (store) => {
store.put(value, key);
return this.promisifyRequest(store.transaction);
});
}
getStoreFile(key, customStore =this.defaultGetStore()){
return customStore('readonly', (store) => this.promisifyRequest(store.get(key)));
}
removeFile(key, customStore = this.defaultGetStore()){
if (this.getStoreFile("record" + key)) {
return customStore('readwrite', (store) => this.promisifyRequest(store.delete("record" + key)));
}
}
getAllBlobs(customStore = this.defaultGetStore()) {
return customStore('readonly', (store) => this.promisifyRequest(store.getAll()));
}
clear(customStore = this.defaultGetStore()) {
return customStore('readwrite', (store) => this.promisifyRequest(store.clear()));
}
defaultGetStore() {
if (!this.defaultGetStoreFunc) {
this.defaultGetStoreFunc = this.createStore(this.dbName, this.storeName);
}
return this.defaultGetStoreFunc;
}
async createBlob(url) {
try {
let data = {"dir": url};
if(url.startsWith("file")){
let response = await fetch(GDE_URL +"/fetch-local",{
// mode: 'no-cors',
method: "POST",
headers: {
'Content-Type': 'application/json',
//'Access-Control-Allow-Origin':'*'
},
body: JSON.stringify(data),
}
)
if(response && response.status === 200){
const data = await response.blob();
return data;
}
}
if(url.startsWith("http")){
let response = await fetch(url);
if (response && response.status === 200) {
const data = await response.blob();
return data;
}
}
return null;
} catch (error) {
return null;
}
}
}
// export const getFiles = async () => {
// let current_record = CURRENT_RECORD_INDEX;
// let total_record = parseInt(sessionStorage.getItem("total_records"));
// total_record = isNaN(total_record) ? 0 : total_record;
// if (current_record === 0) {
// await clear();
// let max_rec = (total_record - 1) >= 3 ? 3 : total_record - 1;
// while (current_record <= max_rec) {
// let url = ELEMENT.records[current_record].imagename;
// let recNo = ELEMENT.records[current_record].recNo;
// const blob = await createBlob(url);
// if (blob) {
// await set("record" + recNo, blob);
// }
// current_record++;
// }
// } else {
// let max = current_record + 2 < total_record ?max:total_record;
// let min = current_record - 2 < 0 ? 0: current_record - 2;
// let recNos =[];
// for (let index = min; index < max; index++) {
// recNos.push(ELEMENT.records[index].recNo);
// }
// for (const blobs in getAllBlobs()) {
// if(!recNos.includes(blobs.key)){
// removeFile(blobs.key);
// }
// }
// if (max < total_record) {
// let recNo = ELEMENT.records[max].recNo;
// const maxBlob = await getStoreFile("record" + recNo );
// if (!maxBlob) {
// let url = ELEMENT.records[max].imagename;
// const blob = await createBlob(url);
// if (blob) {
// await set("record" + recNo, blob);
// }
// }
// }
// if (min >= 0 && min < total_record) {
// let recNo = ELEMENT.records[min].recNo;
// const minBlob = await getStoreFile("record" + recNo);
// if (!minBlob) {
// let url = ELEMENT.records[min].imagename;
// const blob = await createBlob(url);
// if (blob) {
// await set("record" + recNo, blob);
// }
// }
// }
// }
// };
WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/script.js deleted 100644 → 0
import { ImageViewer } from "./modules/imageViewer/imageViewer.js";
import { IndexedDBStorage } from "./modules/storage/indexedDBStorage.js";
document.addEventListener("DOMContentLoaded", async ()=>{
let indexedDB = new IndexedDBStorage("ImageDB", "images");
let urls = ["https://svicomph-my.sharepoint.com/:i:/g/personal/llizardo_svi_com_ph/EXfLFZAjzPdJvAfoRTgPKa0BuGSNkTGAtgQ22GCuaNPwag?e=raEKQM",
"https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK",
"https://images.unsplash.com/photo-1631193079266-4af74b218c86?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY4NjY2MjUwNA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080",
"https://images.unsplash.com/source-404?fit=crop&fm=jpg&h=800&q=60&w=1200",
"https://images.unsplash.com/source-404?fit=crop&fm=jpg&h=800&q=60&w=1200"
];
for (let index = 0; index < urls.length; index++) {
const url = urls[index];
indexedDB.storeImageFile(url, 'imageNum'+index);
}
let imageBlob = await indexedDB.getStoreFile("imageNum2");
let imageViewer = new ImageViewer("imageViewerContainer");
const image = await imageViewer.addImage("currentImage", "jpeg", "sampleIImage.jpeg", imageBlob);
});
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/LoadingModal/Assets/Loading.gif 0 → 100644
This image diff could not be displayed because it is too large. You can view the blob instead.
WebGde/WebContent/WebGde-Widgets/LoadingModal/LoadingModal.js 0 → 100644
export const createLoadingModal = (titleTxt, message, type, btnTxt, callBackFunc) => {
let modal = document.getElementById("modal-container");
if(modal){
removeLoadingModal;
}
createPrompt();
modal = document.getElementById("modal-container");
let modalHeader = document.getElementById("modal-header");
modalHeader.classList.add("clear-background");
modalHeader.classList.add("no-border");
modalHeader.style.display= "none";
let title = document.getElementById("modal-title");
title.textContent = "";
let modalBody = document.getElementById("modal-body");
modalBody.innerHTML = "";
let div = document.createElement("div");
div.setAttribute("class", "row prompt-message center-objects");
let iconBox = document.getElementById("iconBox");
if (iconBox) {
iconBox.remove();
}
iconBox = document.createElement("div");
iconBox.setAttribute("id", "iconBox");
iconBox.setAttribute("class", "icon-box")
iconBox.innerHTML = "";
if (!type) {
// let loading = document.createElement("div");
// loading.setAttribute("class", "dot-bricks");
// iconBox.classList.add("primary");
let loaderContainer = document.createElement("div");
loaderContainer.setAttribute("id", "loaderContainer");
let loader1 = document.createElement("div");
loader1.setAttribute("class", "loader");
loader1.setAttribute("id", "loader");
loaderContainer.appendChild(loader1);
div.appendChild(loaderContainer);
//iconBox.appendChild(loader1);
} else {
let icon = document.createElement("p");
icon.setAttribute("class", "prompt-icon");
switch (type) {
case "info":
iconBox.classList.add("primary");
icon.innerHTML = "&#x2139;";
break;
case "warning":
iconBox.classList.add("warning");
icon.innerHTML = "&#x26A0;";
break;
case "error":
iconBox.classList.add("error");
icon.innerHTML = "&#10006;";
break;
case "success":
iconBox.classList.add("success");
icon.innerHTML = '&#x2713';
break;
}
iconBox.appendChild(icon);
div.appendChild(iconBox);
}
///modalHeader.appendChild(iconBox);
let h3 = document.createElement("h3");
h3.textContent = titleTxt;
let p = document.createElement("p");
p.textContent = message;
div.appendChild(h3);
div.appendChild(p);
modalBody.appendChild(div);
let footerModal = document.getElementById("modal-footer");
footerModal.innerHTML = '';
footerModal.classList.add("center-objects");
if (btnTxt && callBackFunc) {
let closeModalBtn = document.createElement("button");
closeModalBtn.setAttribute("class", "button btn-" + type + " btn-md");
closeModalBtn.setAttribute("id", "close-btn-modal");
closeModalBtn.textContent = btnTxt;
closeModalBtn.addEventListener("click", function () {
modal.style.display = 'none';
callBackFunc();
});
footerModal.appendChild(closeModalBtn);
}
modal.style.display = 'block';
}
export const removeLoadingModal = () => {
let modal = document.getElementById("modal-container");
modal.remove();
}
function createPrompt(){
let modalContainer = document.createElement("div");
modalContainer.setAttribute("class", "modal-container");
modalContainer.setAttribute("id", "modal-container");
let modal = document.createElement("div");
modal.setAttribute("class", "modal");
modal.setAttribute("id", "modal");
let modalHeader = document.createElement("div");
modalHeader.setAttribute("class", "modal-header");
modalHeader.setAttribute("id", "modal-header");
let modalTitle = document.createElement("h3");
modalTitle.setAttribute("class", "modal-title");
modalTitle.setAttribute("id", "modal-title");
modalHeader.appendChild(modalTitle);
let modalBody = document.createElement("div");
modalBody.setAttribute("class", "modal-body");
modalBody.setAttribute("id", "modal-body");
let modalFooter = document.createElement("div");
modalFooter.setAttribute("class", "modal-footer");
modalFooter.setAttribute("id", "modal-footer");
let closeButton = document.createElement("button");
closeButton.setAttribute("class","close-btn-modal");
closeButton.setAttribute("id","close-btn-modal");
closeButton.textContent = "Close";
modalFooter.appendChild(closeButton);
modal.appendChild(modalHeader);
modal.appendChild(modalBody);
modal.appendChild(modalFooter);
modalContainer.appendChild(modal);
document.body.appendChild(modalContainer);
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/LoadingModal/LoadingModalStyle.css 0 → 100644
.modal-container{
display: none;
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 50;
background-color: rgba(0,0,0, .5);
}
.modal{
background-color: #fff;
position: absolute;
top:15%;
left:30%;
width: 40%;
height: fit-content;
max-height: 70%;
border-radius: 5px;
/* border: 2px solid #000; */
animation-name: modalTransition;
animation-duration: .4s;
box-shadow: 13px 13px 21px 4px rgba(32,29,29,0.63);
-webkit-box-shadow: 13px 13px 21px 4px rgba(32,29,29,0.63);
-moz-box-shadow: 13px 13px 21px 4px rgba(32,29,29,0.63);
}
@keyframes modalTransition {
from{
top:-300px;
opacity: 0;
}
to{
top:20%;
opacity: 1;
}
}
.modal-header{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #3C4048;
padding: 10px 20px;
background-color: #607EAA;
}
.icon-box {
color: #fff;
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: -50px;
width: 95px;
height: 95px;
border-radius: 50%;
z-index: 51;
background: #fff;
padding: 3px;
text-align: center;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}
.icon-box.success{
background-color: #5BC8B2;
}
.icon-box.primary{
background-color: #1e80c1;
}
.icon-box.error{
background-color: #FF6961;
}
.icon-box.warning{
background-color: yellow;
}
.prompt-icon{
font-size: 50px !important;
}
.prompt-message{
color: #636363;
}
.prompt-message h3{
font-size: 20px;
text-align: center;
margin: 2px;
}
.prompt-message p{
font-size: 14px;
text-align: center;
margin: 2px;
}
.modal-header .icon-box p {
font-size: 56px;
position: relative;
top: 4px;
}
.modal-body{
margin-top: 20px;
display: flex;
align-items: center;
flex-wrap: wrap;
align-content: flex-start;
justify-content: space-between;
padding: 10px 10px;
overflow-y: auto;
height: fit-content;
max-height: 50vh;
}
.modal-footer{
padding: 10px 20px;
display: flex;
align-items: center;
flex-direction: row-reverse;
}
#close-modal{
font-size: 1.5rem;
font-weight: bolder;
padding: 3px;
}
#close-modal:hover{
color: #fff;
cursor: pointer;
}
.close-btn-modal:hover{
background-color:#fff ;
}
.close-btn-modal{
background-color:darkgray ;
}
.modal-footer .button{
border: 1px solid #000;
color: #fff;
width: 15%;
min-width: fit-content;
border-radius: 5px;
}
.modal-footer .button.close-btn-modal:hover{
border: 1px solid gray !important;
background-color: transparent !important;
color: gray !important;
}
.center-objects{
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
width:100%;
}
.btn-sm{
width: 15% !important;
border: 0% !important;
}
.btn-md{
width: 30% !important;
border: 0px !important;
}
.clear-background{
background-color: transparent;
}
.no-border{
border: 0px;
}
#loaderContainer {
height: 15vh;
width: 15vh;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
text-indent: -9999em;
background: url('Assets/Loading.gif') no-repeat center center;
background-size: cover; /* Adjust this property as needed */
}
@keyframes mulShdSpin {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #FFFFFF, 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.5), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.7), 1.8em -1.8em 0 0em #FFFFFF, 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.5), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.7), 2.5em 0em 0 0em #FFFFFF, 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.5), 2.5em 0em 0 0em rgba(20, 52, 164, 0.7), 1.75em 1.75em 0 0em #FFFFFF, 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.5), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.7), 0em 2.5em 0 0em #FFFFFF, -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.2), -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.5), 0em 2.5em 0 0em rgba(20, 52, 164, 0.7), -1.8em 1.8em 0 0em #FFFFFF, -2.6em 0em 0 0em rgba(20, 52, 164, 0.2), -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.5), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.7), -2.6em 0em 0 0em #FFFFFF, -1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(20, 52, 164, 0.2), 1.8em -1.8em 0 0em rgba(20, 52, 164, 0.2), 2.5em 0em 0 0em rgba(20, 52, 164, 0.2), 1.75em 1.75em 0 0em rgba(20, 52, 164, 0.2), 0em 2.5em 0 0em rgba(20, 52, 164, 0.2), -1.8em 1.8em 0 0em rgba(20, 52, 164, 0.5), -2.6em 0em 0 0em rgba(20, 52, 164, 0.7), -1.8em -1.8em 0 0em #FFFFFF;
}
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/LogInWidget/LoginStyle.css
......@@ -174,7 +174,7 @@ body{
.wrapper.invert span{
--color: #00a8c0;
font-family: Impact, 'Anton', Haettenschweiler, 'Arial Narrow Bold', sans-serif;
/* font-family: Impact, 'Anton', Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
font-weight: 700;
font-style: italic;
display: block;
......@@ -405,6 +405,9 @@ body{
#loaderContainer {
height: 15vh;
width: 15vh;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
......@@ -413,8 +416,6 @@ body{
height: 1em;
border-radius: 50%;
position: relative;
left: 34px;
top: 37px;
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
......
WebGde/WebContent/WebGde-Widgets/Logout/Logout.js 0 → 100644
import { createConfirmationModal } from "../genericPopup/genericPopup.js";
export function logoutKeycloak(){
createConfirmationModal(logoutAndroid, "Are you sure you want to Logout?", "Any unsaved progress will be lost.");
}
function logoutAndroid(){
window.MobileGdeLoginInterface.logoutKeycloak();
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/Submit/XMLWriter/XML_Saver.js
......@@ -82,6 +82,8 @@ export async function WriteForm(e,metrics,doctype,section) {
let fieldOrder = extractAkaValues(schema, doctype, section);
console.log(fieldOrder);
fields = removeBlankValues(fields);
let response = await createOutputXml(fields, myArray, doctype, section, fieldOrder);
return response;
}
......@@ -168,15 +170,26 @@ async function createNonBPOXML(fields, metrics, doctype, section, fieldOrder){
"fieldOrder" : fieldOrder
}
let response = await fetch(urlWriteXml, {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(xmlData)
});
try {
let response = await fetch(urlWriteXml, {
method: "POST",
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(xmlData)
});
return response;
if (response.ok) {
return true;
} else {
return false;
}
} catch (error) {
// Handle connection errors or other issues
console.error('Error:', error);
return false;
}
}
async function createBPOXML(fields, metrics, doctype, section, fieldOrder){
......@@ -208,18 +221,38 @@ async function createBPOXML(fields, metrics, doctype, section, fieldOrder){
"fieldOrder" : fieldOrder
}
let response = await fetch(urlWriteXml, {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(xmlData)
});
return response;
const authToken = sessionStorage.getItem('token');
try {
let response = await fetch(urlWriteXml, {
method: "POST",
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(xmlData)
});
if (response.ok) {
return true;
} else {
return false;
}
} catch (error) {
// Handle connection errors or other issues
console.error('Error:', error);
return false;
}
}
function removeBlankValues(fields) {
for (const key in fields) {
if (fields.hasOwnProperty(key)) {
const value = fields[key];
if (value === '' || value === null || value === undefined) {
delete fields[key];
}
}
}
return fields;
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/Submit/config.js
export const PROJECT_CODE = "PROJCODE01";
export const PROJECT_CODE = "DSQC";
export const ENCODING_PASS = "PASS1";
export const GFS_URL = "http://107.20.193.188/gfs-explorer-ws/svc/gfs-rest/";
......
WebGde/WebContent/WebGde-Widgets/Submit/submit.js
import { createLoadingScreen } from "../../script.js";
import { getUrlCompleteToNextNode } from "../BPO/bpoService.js";
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, removeLoadingModal } 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";
......@@ -30,7 +29,8 @@ export const submitForm = async (e) => {
if (element.style.display === 'none' || element.classList.contains('hidden')) {
continue;
}
const { id, value, type, name } = element
const { id, value, type, name } = element
const errorContainer = document.getElementById(`${id}_error`);
// Skip submit, buttons, and files
if (element.classList.contains('radioOther') || element.classList.contains('checkboxOther')) continue;
if (element.classList.contains('geotag') || element.classList.contains('altitude') || element.classList.contains('direction')) {
......@@ -50,7 +50,7 @@ export const submitForm = async (e) => {
continue;
}
const { valid } = validateInput(id, value)
const { valid, errors } = validateInput(id, value)
var { isValidValue, errMsg } = checkValidValues(id, value);
......@@ -66,21 +66,15 @@ export const submitForm = async (e) => {
continue
}
if (type === 'button'){
const fieldMedia = document.getElementById(`${id}_container`);
fieldMedia.classList.remove('input-valid');
fieldMedia.classList.add('input-invalid');
errorContainer.innerHTML = errors;
continue
}
if (type === 'radio'){
const radioContainer = document.getElementById(`dropdownContainer_${id}`)
radioContainer.classList.remove('input-valid');
radioContainer.classList.add('input-invalid');
errorContainer.innerHTML = errors;
continue
}
if (type === 'checkbox'){
const checkboxContainer = document.getElementById(`checklistContainer_${id}`)
checkboxContainer.classList.remove('input-valid');
checkboxContainer.classList.add('input-invalid');
errorContainer.innerHTML = errors;
continue
}
const field = document.getElementById(id)
......@@ -94,6 +88,7 @@ export const submitForm = async (e) => {
const field = document.getElementById(id);
field.classList.remove('input-valid');
field.classList.add('input-invalid');
errorContainer.innerHTML = errors;
field.select();
}
}
......@@ -117,11 +112,11 @@ 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
return
}
else {
......@@ -133,17 +128,19 @@ export const submitForm = async (e) => {
let folderPath = TEMPORARY_FOLDER +"/"+ folderName
let filePath = { "filePath": folderPath + "/" + sessionStorage.getItem("recentlySavedFileName") };
console.log(filePath);
const authToken = sessionStorage.getItem('token');
let getFile = await fetch(urlGetFile, {
method: "POST",
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(filePath)
});
console.log(getFile.text());
// await uploadTOGFS(getFile.text(), sessionStorage.getItem("recentlySavedFileName"));
} else {
createInfoModal(null, 'OK', 'Error while uploading');
createInfoModal(null, 'OK', 'Error while generating output.');
return false
}
}else {
......@@ -154,13 +151,18 @@ export const submitForm = async (e) => {
let folderPath = TEMPORARY_FOLDER +"/"+ folderName
let filePath = { "filePath": sessionStorage.getItem("element_file_loc") };
console.log(filePath);
const authToken = sessionStorage.getItem('token');
let getFile = await fetch(urlGetFile, {
method: "POST",
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(filePath)
});
} else {
createInfoModal(null, 'OK', 'Error while generating output.');
return false
}
}
// saveForm(sessionStorage.getItem("display_counter"));
......@@ -175,36 +177,11 @@ 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();
removeLoadingModal();
DISPLAY_FIELD_OBJECT.clearForm();
if (SHOW_ELEMENT_LIST_VIEWER === "Y") {
console.log("PUMASOK DITO");
......@@ -216,18 +193,11 @@ export async function createSubmitWindow(e){
let response = await completeToNextNode(sessionStorage.getItem("element_id"));
}
} else{
removePrompt();
removeLoadingModal();
}
}
};
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 +218,12 @@ export async function completeToNextNode(elementId) {
}
}
};
const authToken = sessionStorage.getItem('token');
let response = await fetch(getUrlCompleteToNextNode(elementId), {
method: "POST",
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(requestJSON)
});
......
WebGde/WebContent/WebGde-Widgets/captureMetrics/captureMetrics.js
......@@ -183,10 +183,12 @@ export const saveMetrics = async (metrics, eoe_ts) => {
"eoe_ts" : eoe_ts
};
const authToken = sessionStorage.getItem('token');
await fetch(urlWriteMetrics, {
method: 'POST',
headers: {
'Content-Type':'application/json'
'Content-Type':'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(myObject)
});
......@@ -458,10 +460,12 @@ const saveMetrics = async (metrics, eoe_ts) => {
"eoe_ts" : eoe_ts
};
const authToken = sessionStorage.getItem('token');
fetch(urlWriteMetrics, {
method: 'POST',
headers: {
'Content-Type':'application/json'
'Content-Type':'application/json',
'Authorization': `Bearer ${authToken}`
},
body: JSON.stringify(myObject)
});
......
WebGde/WebContent/WebGde-Widgets/config.js
......@@ -21,7 +21,7 @@ export const IS_RETRIEVE_FROM_GFS = "N"
export const INVALID_KEYS = "F1,F2,F3,F4,F5,F6,F7,F8,F9,F10,F11,F12,PrintScreen,ScrollLock,Pause,PageUp,PageDown,Insert,Delete,Control"
//BPO CONFIG
export const IS_RETRIEVE_FROM_BPO = "N"
export const IS_RETRIEVE_FROM_BPO = "Y"
// export const BPO_URL = "http://35.171.20.94:8080/bpo-sqa/"
// export const CURRENT_NODE = "Web GDE"
export let BPO_URL = DOMAIN + "bpo/";
......@@ -30,9 +30,9 @@ export let CURRENT_NODE = ""
export const ENCODING_PASS = "PASS1"
export const NEXT_NODE = "Complete"
export const EXCEPTION_NODE = "Exception"
export const SHOW_ELEMENT_LIST_VIEWER = "N"
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" //pipe-delimited
export const PDF_EXTENSION = ".pdf"
export const JPG_EXTENSION = ".jpg"
......
WebGde/WebContent/WebGde-Widgets/documentControlWidget/DocumentControl.css 0 → 100644
.ctrl-buttons-container {
display: flex;
justify-content: center;
height: 70px;
background-color: white;
margin-top: auto;
}
.document-control-button {
width: 100%;
padding: 0px;
border-style: none;
border-radius: 8px;
height: 40px;
margin-top: 15px;
margin-bottom: 15px;
color: white;
}
#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;
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/documentControlWidget/documentControlWidget.js
import { createLoadingScreen, removeLoadingScreen } from '../../script.js';
import { createRejectWindow } from '../BPO/rejectElement.js';
import { createReturnWindow } from '../BPO/returnElement.js';
import { goBackToElementListViewer } from '../ElementListWidget/ElementListWidget.js';
......@@ -22,59 +21,60 @@ export class DocumentControlWidget {
init() {
this.global.container = document.createElement("div");
this.global.container.id = "TiffButtonRight";
this.global.container.classList.add("ctrl-buttons")
this.global.submitBtn = document.createElement("div");
this.global.container.id = "DocumentcontrolButtonsContainer";
this.global.container.classList.add("ctrl-buttons-container");
this.global.submitBtn = document.createElement("button");
this.global.submitBtn.id = "submitButton";
this.global.submitBtn.title = "Submit";
this.global.submitBtn.classList.add("buttonRightClass");
const submitIcon = document.createElement("img");
submitIcon.classList.add("tiffViewerIcons");
submitIcon.src = "." + ROOT_FOLDER + "/documentControlWidget/assets/submit.png";
submitIcon.alt = "Submit";
submitIcon.height = "32";
submitIcon.width = "32";
this.global.returnBtn = document.createElement("div");
this.global.submitBtn.classList.add("document-control-button");
this.global.submitBtn.textContent = "Submit";
this.global.returnBtn = document.createElement("button");
this.global.returnBtn.id = "returnButton";
this.global.returnBtn.title = "Return";
this.global.returnBtn.classList.add("buttonRightClass");
const returnIcon = document.createElement("img");
returnIcon.classList.add("tiffViewerIcons");
returnIcon.src = "." + ROOT_FOLDER + "/documentControlWidget/assets/return_icon.png";
returnIcon.alt = "Return";
returnIcon.height = "32";
returnIcon.width = "32";
this.global.rejectBtn = document.createElement("div");
this.global.returnBtn.classList.add("document-control-button");
this.global.returnBtn.textContent = "Return";
this.global.rejectBtn = document.createElement("button");
this.global.rejectBtn.id = "rejectButton";
this.global.rejectBtn.title = "Reject";
this.global.rejectBtn.classList.add("buttonRightClass");
const rejectIcon = document.createElement("img");
rejectIcon.classList.add("tiffViewerIcons");
rejectIcon.src = "." + ROOT_FOLDER + "/documentControlWidget/assets/reject_icon.png";
rejectIcon.alt = "Reject";
rejectIcon.height = "32";
rejectIcon.width = "32";
this.global.submitBtn.append(submitIcon);
this.global.returnBtn.append(returnIcon);
this.global.rejectBtn.append(rejectIcon);
this.global.rejectBtn.classList.add("document-control-button");
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);
}
this.addEvenListeners();
}
addEvenListeners() {
// Get the initial window height and store it in session storage
const initialWindowHeight = window.innerHeight;
sessionStorage.setItem('initialWindowHeight', initialWindowHeight);
// Add an event listener for the resize event
window.addEventListener("resize", (e) => {
const container = this.global.container;
// Get the stored initial window height from session storage
const storedHeight = sessionStorage.getItem('initialWindowHeight');
// Check if the current window height matches the stored height
if (window.innerHeight !== parseInt(storedHeight)) {
container.style.display = "none"; // Hide container when heights don't match
} else {
container.style.display = "flex"; // Show container when heights match
}
});
this.global.submitBtn.onclick = async (e) => {
createSubmitWindow(e);
}
......
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
.backdrop-container {
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;
}
.warning-message {
font-style: italic;
font-size: 16px;
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/sample_schema/08-30-test.json deleted 100644 → 0
{
"SAMPLE FIELDS": {
"Doctype 1": {
"Image1":{
"fieldLabel": "Image1",
"aka": "field5",
"validation": {
"collection": "image-capture",
"mandatory": false
}
},
"Checkbox_List": {
"fieldLabel": "Checkbox List",
"aka": "field16",
"source": "s",
"validation": {
"collection": "checklist",
"items": [
"sample-item1",
"sample-item2",
"sample-item3",
"sample-item4",
"sample-item5"
],
"mandatory": false
}
},
"Radio_List": {
"fieldLabel": "Radio List",
"aka": "field4",
"source": "s",
"validation": {
"collection": "radiolist",
"items": [
"sample-item1",
"sample-item2",
"sample-item3",
"sample-item4",
"sample-item5"
],
"mandatory": false
}
},
"Time": {
"fieldLabel": "Time",
"aka": "field5",
"validation": {
"collection": "timepicker",
"mandatory": false
}
},
"Geo_Tag": {
"fieldLabel": "Geo Tag",
"aka": "field40",
"validation": {
"fieldLength": 100,
"collection": "geotag"
},
"hidden":"y"
},
"Altitude": {
"fieldLabel": "Altitude",
"aka": "field6",
"validation": {
"fieldLength": 100,
"collection": "altitude"
},
"hidden":"y"
},
"Direction": {
"fieldLabel": "Direction",
"aka": "field70",
"validation": {
"fieldLength": 100,
"collection": "direction"
},
"hidden":"y"
}
}
}
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/sample_schema/dev_schema.json 0 → 100644
{
"SAMPLE FIELDS": {
"Doctype 1": {
"First Name": {
"fieldLabel": "First Name",
"aka": "field7",
"validation": {
"fieldLength": 50,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": true
}
},
"Middle Name": {
"fieldLabel": "Middle Name",
"aka": "field8",
"validation": {
"fieldLength": 50,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": false
}
},
"Civil_Status": {
"fieldLabel": "Civil Status",
"aka": "field9",
"source": "s",
"validation": {
"fieldLength": 15,
"collection": "dropdown",
"options": [
"Single",
"Married",
"Widowed"
],
"mandatory": false
}
},
"Checkbox_List": {
"fieldLabel": "Checkbox List",
"aka": "field10",
"source": "s",
"validation": {
"collection": "checklist",
"items": [
"sample-item1",
"sample-item2",
"sample-item3",
"sample-item4",
"sample-item5",
"other"
],
"mandatory": false
}
},
"Radio_List": {
"fieldLabel": "Radio List",
"aka": "field11",
"source": "s",
"validation": {
"collection": "radiolist",
"items": [
"sample-item1",
"sample-item2",
"sample-item3",
"sample-item4",
"sample-item5"
],
"mandatory": false
}
},
"Time": {
"fieldLabel": "Time",
"aka": "field12",
"validation": {
"collection": "timepicker",
"mandatory": false
}
},
"Date": {
"fieldLabel": "Date",
"aka": "field13",
"validation": {
"fieldLength": 20,
"collection": "datepicker",
"validdate": "past",
"mandatory": false
}
},
"Image1":{
"fieldLabel": "Image1",
"aka": "field14",
"validation": {
"collection": "image-capture",
"mandatory": false
}
},
"Test": {
"fieldLabel": "Test",
"aka": "field15",
"validation": {
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": false
}
}
}
},"SAMPLE FIELDS 2": {
"Doctype 1": {
"First Name": {
"fieldLabel": "First Name",
"aka": "field16",
"validation": {
"fieldLength": 50,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": true
}
},
"Middle Name": {
"fieldLabel": "Middle Name",
"aka": "field17",
"validation": {
"fieldLength": 50,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": true
}
},
"Civil_Status": {
"fieldLabel": "Civil Status",
"aka": "field18",
"source": "s",
"validation": {
"fieldLength": 15,
"collection": "dropdown",
"options": [
"Single",
"Married",
"Widowed"
],
"mandatory": true
}
},
"Checkbox_List": {
"fieldLabel": "Checkbox List",
"aka": "field19",
"source": "s",
"validation": {
"collection": "checklist",
"items": [
"sample-item1",
"sample-item2",
"sample-item3",
"sample-item4",
"sample-item5",
"other"
],
"mandatory": true
}
},
"Radio_List": {
"fieldLabel": "Radio List",
"aka": "field20",
"source": "s",
"validation": {
"collection": "radiolist",
"items": [
"sample-item1",
"sample-item2",
"sample-item3",
"sample-item4",
"sample-item5"
],
"mandatory": true
}
},
"Time": {
"fieldLabel": "Time",
"aka": "field21",
"validation": {
"collection": "timepicker",
"mandatory": true
}
},
"Date": {
"fieldLabel": "Date",
"aka": "field22",
"validation": {
"fieldLength": 20,
"collection": "datepicker",
"validdate": "past",
"mandatory": true
}
},
"Image1":{
"fieldLabel": "Image1",
"aka": "field5",
"validation": {
"collection": "image-capture",
"mandatory": true
}
},
"Test": {
"fieldLabel": "Test",
"aka": "field23",
"validation": {
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": true
}
}
}
}
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/sample_schema/dev_schema_childof.json 0 → 100644
{
"MEDICAL RECORD" : {
"PATIENT INFORMATION" : {
"name" : {
"fieldLabel" : "Full Name (Last, First, M.I)",
"aka" : "field1",
"validation" : {
"fieldLength" : 50.0,
"collection" : "alphabet",
"invalidchar" : "`~!@#&$%^*_={}[]:;/\"|\\<>0123456789",
"mandatory" : true
}
},
"address" : {
"fieldLabel" : "Address",
"aka" : "field2",
"validation" : {
"fieldLength" : 50.0,
"collection" : "alphanumeric",
"invalidchar" : "`~!@#&$%^*_={}[]:;/\"|\\<>0123456789",
"mandatory" : false
}
},
"symptoms" : {
"fieldLabel" : "Symptoms Experienced",
"aka" : "field3",
"validation" : {
"fieldLength" : 51.0,
"collection" : "checklist",
"items" : [ "Cough", "Fever", "Sore Throat", "Other" ],
"mandatory" : false
}
},
"birthdate" : {
"fieldLabel" : "Birth Date",
"aka" : "field4",
"validation" : {
"fieldLength" : 52.0,
"collection" : "datepicker",
"mandatory" : false
}
},
"illness_date" : {
"fieldLabel" : "Start of Symptoms",
"aka" : "field5",
"validation" : {
"fieldLength" : 53.0,
"collection" : "date",
"mandatory" : false
},
"childof" : "symptoms",
"parentvalue" : [ "Cough", "Fever", "Sore Throat", "Other" ]
},
"direction" : {
"fieldLabel" : "Current Direction",
"aka" : "field6",
"validation" : {
"fieldLength" : 54.0,
"collection" : "direction",
"mandatory" : false
}
},
"payment_method" : {
"fieldLabel" : "Payment Method",
"aka" : "field7",
"validation" : {
"fieldLength" : 55.0,
"collection" : "dropdown",
"options" : [ "Cash", "Bank", "Gcash" ],
"mandatory" : false
}
},
"email" : {
"fieldLabel" : "Email Address",
"aka" : "field8",
"validation" : {
"fieldLength" : 56.0,
"collection" : "email",
"mandatory" : false
},
"childof" : "payment_method",
"parentvalue" : [ "Bank", "Gcash" ]
},
"payment_method2" : {
"fieldLabel" : "Payment Method",
"aka" : "field7",
"validation" : {
"fieldLength" : 55.0,
"collection" : "dropdown",
"options" : [ "Cash", "Bank", "Gcash" ],
"mandatory" : false
}
},
"email2" : {
"fieldLabel" : "Email Address2",
"aka" : "field8",
"validation" : {
"fieldLength" : 56.0,
"collection" : "email",
"mandatory" : false
},
"childof" : "payment_method2",
"parentvalue" : [ "Bank", "Gcash" ]
},
"fingerprint" : {
"fieldLabel" : "Fingerprint",
"aka" : "field9",
"validation" : {
"fieldLength" : 57.0,
"collection" : "fingerprint",
"mandatory" : false
}
},
"geotag" : {
"fieldLabel" : "Geotag",
"aka" : "field10",
"validation" : {
"fieldLength" : 58.0,
"collection" : "geotag",
"mandatory" : false
},
"hidden" : true
},
"patient_image" : {
"fieldLabel" : "Patient Image",
"aka" : "field11",
"validation" : {
"fieldLength" : 59.0,
"collection" : "image-capture",
"mandatory" : false
}
},
"phone_number" : {
"fieldLabel" : "Phone Number",
"aka" : "field12",
"validation" : {
"fieldLength" : 60.0,
"collection" : "numeric",
"mandatory" : false
}
},
"gender" : {
"fieldLabel" : "Gender",
"aka" : "field13",
"validation" : {
"fieldLength" : 61.0,
"collection" : "radiolist",
"items" : [ "M", "F", "Other" ],
"mandatory" : false
}
},
"time" : {
"fieldLabel" : "Time",
"aka" : "field16",
"validation" : {
"fieldLength" : 64.0,
"collection" : "timepicker",
"mandatory" : false
}
}
}
}
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/script.js deleted 100644 → 0
import { fetchSchema } from "./WebGde-Widgets/DataInputWidget/fetchSchema.js";
import { displayField } from "./WebGde-Widgets/DataInputWidget/displayFieldClass.js";
import { ImageViewer } from "./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.js";
import { IndexedDBStorage } from "./WebGde-Widgets/ImageViewerWidget/modules/storage/indexedDBStorage.js";
import { createModal } from "./WebGde-Widgets/genericPopup/genericPopup.js";
import { hightlightEventListeners } from "./WebGde-Widgets/ImageViewerWidget/modules/highlight/highlightUtil.js";
import { HIGH_LIGHT_SCHEMA } from "./WebGde-Widgets/config.js";
import { Highlight } from "./WebGde-Widgets/ImageViewerWidget/modules/highlight/highlightClass.js";
import { BPO } from "./WebGde-Widgets/BPO/getElement.js";
import { DocumentControlWidget } from "./WebGde-Widgets/documentControlWidget/documentControlWidget.js";
import { INDEXED_DB_STORAGE , HIGHLIGHT_OBJECT, IMAGE_VIEWER_OBJECT } from "./WebGde-Widgets/globalVariable.js";
document.addEventListener("DOMContentLoaded", async ()=>{
await initializeWebGDE();
});
async function initializeWebGDE(){
sessionStorage.setItem("user_id", "worker1");
const BPOObject = new BPO();
let isElement = await BPOObject.getRandomElement();
if (isElement){
INDEXED_DB_STORAGE = new IndexedDBStorage("ImageDB", "images");
let urls = JSON.parse(sessionStorage.getItem("dir_files"));
// let urls = ["https://svicomph-my.sharepoint.com/:i:/g/personal/llizardo_svi_com_ph/EXfLFZAjzPdJvAfoRTgPKa0BuGSNkTGAtgQ22GCuaNPwag?e=raEKQM",
// "https://cdn.filestackcontent.com/wcrjf9qPTCKXV3hMXDwK",
// "https://images.unsplash.com/photo-1631193079266-4af74b218c86?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY4NjY2MjUwNA&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080",
// "https://images.unsplash.com/source-404?fit=crop&fm=jpg&h=800&q=60&w=1200",
// "https://images.unsplash.com/source-404?fit=crop&fm=jpg&h=800&q=60&w=1200"
// ];
let maxImagesToStore =urls.length<=3 ? urls.length : 3;
for (let index = 0; index < maxImagesToStore; index++) {
const url = urls[index];
await INDEXED_DB_STORAGE.storeImageFile(url, 'imageNum_' + index);
}
await createWebGdeInterface(null);
if(maxImagesToStore>1){
const url = urls[0];
let filename = url.split('/').pop();
let imageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_0");
await IMAGE_VIEWER_OBJECT.createCurrentImage(filename.split(".").pop(), filename, imageBlob);
sessionStorage.setItem("current_page", 1);
const nextUrl = urls[1];
let nextFilename = nextUrl.split('/').pop();
let nextImageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_1");
await IMAGE_VIEWER_OBJECT.createNextImage(nextFilename.split(".").pop(), nextFilename, nextImageBlob);
}else{
const url = urls[0];
let filename = url.split('/').pop();
let imageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_0");
await IMAGE_VIEWER_OBJECT.addImage("currentImage", filename.split(".").pop(), filename, imageBlob);
sessionStorage.setItem("current_page", 1);
}
HIGHLIGHT_OBJECT = new Highlight("imageContainer", "currentImage", HIGH_LIGHT_SCHEMA)
HIGHLIGHT_OBJECT.createHighlight();
hightlightEventListeners();
let controls = new DocumentControlWidget();
document.getElementById("input-field-container").appendChild(controls.getWidget());
}
}
async function createWebGdeInterface(GDEContainer) {
let gdeContainer = document.createElement("div");
gdeContainer.setAttribute("class", "container web-gde-container");
let imageViewerContainer = document.createElement("div");
imageViewerContainer.setAttribute("id", "imageViewerContainer");
let dataInputContainer = document.createElement("div");
dataInputContainer.setAttribute("id", "input-field-container");
// dataInputContainer.setAttribute("class", "sidebar");
gdeContainer.appendChild(imageViewerContainer);
gdeContainer.appendChild(dataInputContainer);
if (GDEContainer) {
document.getElementById("GDEContainer").appendChild(gdeContainer);
} else {
document.body.appendChild(gdeContainer);
}
await createImageViewer();
await createInputForm();
}
async function createInputForm(){
const schema = await fetchSchema();
const containerId = 'input-field-container';
// Instantiate widget and assign it to a container
const displayFieldClass = new displayField(schema, containerId);
// Call Function to generate fields with given schema to provided container
await displayFieldClass.generateFields();
// displayFieldClass.editHeader(element-id)
displayFieldClass.updateHeaderText(0, "User: " + sessionStorage.getItem("user_id"));
displayFieldClass.updateHeaderText(1, "Element ID: " + sessionStorage.getItem("element_id"));
displayFieldClass.updateHeaderText(2, "");
}
async function createImageViewer() {
IMAGE_VIEWER_OBJECT = new ImageViewer("imageViewerContainer");
await IMAGE_VIEWER_OBJECT.init();
};
WebGde/WebContent/WebGde-Widgets/style.css deleted 100644 → 0
*{
-webkit-font-smoothing: auto;
font-size: 11px;
letter-spacing: 0.1em;
text-rendering: optimizeLegibility;
font-weight: normal;
font-family: OpenSans, sans-serif;
font-style: normal;
}
.field-header {
color: white;
text-align: center;
}
h1{
margin: 20px;
}
h2{
margin-top: 20px;
margin-bottom: 20px;
}
h3{
margin-bottom: 20px;
}
/* #imageViewerContainer{
width: 70vh;
height: 80vh;
} */
#imageViewerContainer{
width: 70%;
height: 99%;
}
.sidebar {
position: absolute;
right: 0;
display: flex;
flex-direction: column;
height: 100%;
width: 30%;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
#input-field-container{
/* height : 600px;
width : 400px; */
height : 100%;
width : 30%;
display: flex;
flex-direction: column;
overflow: auto;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
#input-field-container::-webkit-scrollbar {
width: 10px;
}
#input-field-container::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
#input-field-container::-webkit-scrollbar-thumb {
background-color: #888;
}
#input-field-container::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
#inputs {
display: flex;
flex-direction: column;
min-width: 500px;
}
input[type=text] {
width: 100%;
}
/* .SECTION1.inputField {
width: 100%;
height: 100%;
}
.SECTION2.inputField {
width: 100%;
height: 100%;
} */
.inputField {
width: 100%;
height: 100%;
}
.select2 {
width: 100% !important;
}
.fieldContainer {
/* layout config */
display: flex;
flex-direction: row;
/* border config */
border-style: solid;
border-width: thin;
border-color:#446397;
padding: 0px 0px 0px 4px;
flex-wrap: nowrap;
}
#fields *:not([type=submit]):focus {
background-color: yellow;
}
#fields {
width: auto;
display: flex;
flex: 1;
max-height: 100vh;
display: inline-block;
overflow-y: auto;
}
#fields>div {
background-color:white;
}
.submitButtons {
font-weight: 600;
display: block;
margin: auto;
font-size: 13px;
width: 93px;
margin-top: 10px;
cursor: pointer;
}
.labelContainer {
display: flex;
flex-direction: row;
width: 98px;
padding: 3px;
margin-top: 4px;
}
.inputContainer {
display: inline-block;
width: 100%;
padding-left: 3px;
overflow-x: clip;
flex-wrap: nowrap;
}
.input-invalid {
border-color: #ff3333 !important;
border-style: solid;
}
.input-valid {
/* border-color: #000000 !important; */
border-style: solid;
}
input:focus, textarea:focus{
/* background-color: yellow; */
border: 0px;
}
input[type=text] {
width: 100%;
}
select {
width: 100%;
height: 28px;
color: #444;
}
.select2 {
width: 100% !important;
}
.select2-container--default .select2-selection--single{
border-radius:0px !important;
}
textarea{
resize: none;
}
#text-area{width: 91%;font-size: 11px;padding: 9px 9px;margin-left: 15px;margin-top: 5px;margin-bottom: 5px;height: 103px;}
.ctrl-buttons {
background-color: transparent !important;
display: flex !important;
justify-content: space-evenly !important;
}
.ctrl-buttons .buttonRightClass {
margin: 1vh;
padding: 1vh;
}
.web-gde-container{
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
#counter {
height: 11px;
/* font-size: 22px;
padding: 10px;
position: absolute;
z-index: 1;
right: 199px;
bottom: -6px;
text-shadow:
-1px -1px 0 #000,
0 -1px 0 #000,
1px -1px 0 #000,
1px 0 0 #000,
1px 1px 0 #000,
0 1px 0 #000,
-1px 1px 0 #000,
-1px 0 0 #000; */
}
.green{
color: green;
}
.red{
color: red;
}
\ No newline at end of file
WebGde/WebContent/index.html
......@@ -6,23 +6,26 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css">
<!-- <link rel="stylesheet" href="./style.css"> -->
<link rel="stylesheet" href="./WebGde-Widgets/ElementListWidget/ElementListWidget.css">
<link id="loginStylesheet" rel="stylesheet" href="./WebGde-Widgets/LogInWidget/LoginStyle.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/documentControlWidget/DocumentControl.css">
<link rel="stylesheet" href="./WebGde-Widgets/genericPopup/genericPopup.css">
<link rel="stylesheet" href="./WebGde-Widgets/DataInputWidget/ImageCapture/ImageCapture.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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"
type="text/javascript"></script>
<link rel="stylesheet" href="./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<!-- <script src="https://auth.svi.cloud/auth/js/keycloak.js"></script>
<script type="text/javascript" src="./keycloak-login.js"></script> -->
</head>
......
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