Skip to content

W
web-ui
Commit aec6a2f3 by Jorem Magcawas
Options

integration of features

parent afacb68a
Showing with 1231 additions and 776 deletions
WebGde/WebContent/config.js
......@@ -24,7 +24,7 @@
/*var SCHEMA_FILE = "./src/sample_schema/SC Schema.json"*/
var SCHEMA_FILE = "./src/sample_schema/HR Speed Test schema.json"
var SCHEMA_FILE = "./src/sample_schema/Speed Test Application Form schema.json"
//const INPUT_FILES = ["./input/Ong, Mae Janica - Application Form.TIFF","./input/Magalona, Rowell James - Application Form.TIFF","./input/Felizardo, Brylle Theodure - Application Form.TIFF","./input/Laxamana, Conrad John - Application Form.TIFF"] // list of URLs
......
WebGde/WebContent/src/BPO/rejectElement.js
......@@ -130,7 +130,9 @@ function createRejectWindow(){
var fileName = sessionStorage.getItem("file_Name");
if(fileName !== null && fileName !== undefined){
document.getElementById("controlsContainer").style.display = "none";
}
}else{
document.getElementById("TiffViewer_ButtonContainer").style.display = "none";
}
}
cancelButton.onclick = function () {
......
WebGde/WebContent/src/BPO/returnElement.js
......@@ -69,24 +69,26 @@ async function returnElementLogout(elementId) {
var returnButton = document.getElementById('return');
returnButton.addEventListener("click", function () {
returnElementBPO(sessionStorage.getItem("element_id"));
// const fieldForm = document.getElementById("fields");
// fieldForm.querySelector('input[type="submit"]').click();
var fileName = sessionStorage.getItem("file_Name");
if(fileName !== null && fileName !== undefined){
document.getElementById("controlsContainer").style.display = "none";
}
});
returnElementBPO(sessionStorage.getItem("element_id"));
var fileName = sessionStorage.getItem("file_Name");
if(fileName !== null && fileName !== undefined){
document.getElementById("controlsContainer").style.display = "none";
}else{
document.getElementById("TiffViewer_ButtonContainer").style.display = "none";
}
});
window.addEventListener('keydown', function(e) {
if (e.altKey == true && e.keyCode == 85){
returnElementBPO(sessionStorage.getItem("element_id"));
// const fieldForm = document.getElementById("fields");
// fieldForm.querySelector('input[type="submit"]').click();
returnElementBPO(sessionStorage.getItem("element_id"));
var fileName = sessionStorage.getItem("file_Name");
if(fileName !== null && fileName !== undefined){
document.getElementById("controlsContainer").style.display = "none";
}else{
document.getElementById("TiffViewer_ButtonContainer").style.display = "none";
}
}
});
......
WebGde/WebContent/src/XMLWriter/XML_Saver.js
......@@ -11,7 +11,7 @@ async function WriteForm(e,metrics,doctype,section) {
for (var i=0;i<Nodes.length;i++) {
if (Nodes[i].style.display === 'none') continue
let fid = Nodes[i].id;
if (fid == 'DocType' || fid == 'Section' || fid == '') continue
if (fid == 'DocType' || fid == 'Section' || fid == '' || fid == "submitButton") continue
fields[Object.keys(lookup[fid]).includes('aka') ? lookup[fid].aka.replace("field", "") : fid] = Nodes[i].value;
}
......
WebGde/WebContent/src/accessFile/accessFile.js
......@@ -67,7 +67,7 @@ async function accessFile() {
idQuery.onsuccess = function() {
url = URL.createObjectURL(idQuery.result.address);
if (filename.endsWith(PDF_EXTENSION)) {
if (idQuery.result.name.endsWith(PDF_EXTENSION)) {
sessionStorage.setItem("file_Name", idQuery.result.name);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
......@@ -75,23 +75,18 @@ async function accessFile() {
TiffViewer_filedetail.style.textAlign = "center";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail);
displayPdf(img);
displayPdf(idQuery.result.path);
} else {
console.log("This is not a pdf file");
window.addEventListener("load", loadDoc(url, TIFFViewer, idQuery.result.name), false);
}
// File_Name = idQuery.result.name;
// File_Path = idQuery.result.path;
// store.delete(parseInt(localStorage.getItem("display_counter")) - 1);
// localStorage.setItem("submit", "0");
};
} else if (count.result >= 2 && (localStorage.length) >= 2 && localStorage.getItem("submit") == 1) {
const idQuery = store.get(parseInt(localStorage.getItem("display_counter")));
idQuery.onsuccess = function() {
url = URL.createObjectURL(idQuery.result.address);
if (filename.endsWith(PDF_EXTENSION)) {
if (idQuery.result.name.endsWith(PDF_EXTENSION)) {
sessionStorage.setItem("file_Name", idQuery.result.name);
const TiffViewer_Header = document.getElementById("TiffModalHeader");
const TiffViewer_filedetail = document.createElement("div");
......@@ -99,19 +94,11 @@ async function accessFile() {
TiffViewer_filedetail.style.textAlign = "center";
TiffViewer_filedetail.textContent = "Filename: " + idQuery.result.name;
TiffViewer_Header.append(TiffViewer_filedetail);
displayPdf(img);
displayPdf(idQuery.result.path);
} else {
console.log("This is not a pdf file");
window.addEventListener("load", loadDoc(url, TIFFViewer, idQuery.result.name), false);
}
// File_Name = idQuery.result.name;
// File_Path = idQuery.result.path;
// store.delete(parseInt(localStorage.getItem("display_counter")) - 1);
// store.put({ id: parseInt(localStorage.getItem("display_counter")) + 1, address: blob , name:filename, path:img});
// localStorage.setItem("submit", "0");
// localStorage.setItem("display_counter", parseInt(localStorage.getItem("display_counter")) + 1); //update how many have been fetched
// var file = new File([blob], filename + ".TIFF", {type: "img"}); //uplaod to uploadimgfolder //scanned images
};
}
}
......@@ -205,7 +192,6 @@ async function accessFile() {
}
localStorage.setItem("display_counter", 1);
sessionStorage.setItem('isLoadedFirstImg', "true");
size = size + total;
File_Name = filename;
File_Path = img;
......@@ -215,17 +201,10 @@ async function accessFile() {
document.getElementById('prev').setAttribute('disabled','true');
document.getElementById('next').removeAttribute('disabled');
store.put({ id: count.result + 1, address: blob , name:filename, path:img});
//start
url = URL.createObjectURL(blob);
window.addEventListener("load", loadDoc(url, TIFFViewer,filename), false);
//end
localStorage.setItem("submit", "0");
localStorage.setItem("display_counter", 2);
localStorage.setItem("sfIndex", 1);
size = size + total;
File_Name = filename;
File_Path = img;
/*populateFields();*/
} else if(totalImages != (parseInt(localStorage.getItem("sfIndex"))) && img == null && count.result >= 2 && (localStorage.length) >= 2 && localStorage.getItem("submit") == 1){ //if only one file left
const idQuery = store.get(parseInt(localStorage.getItem("display_counter")));
......@@ -312,7 +291,9 @@ async function accessFile() {
else {
// console.log(count.result);
// console.log(localStorage.length);
}
}
}
......@@ -329,7 +310,7 @@ async function accessFile() {
if(IS_RETRIEVE_FROM_GFS == "Y"){
const modal = document.getElementById("TiffViewerModal");
modal.style.display = 'none';//hide local modal\
getFolder(FOLDER_URL+sessionStorage.getItem('user_id')+'/element5');
getFolder(FOLDER_URL+sessionStorage.getItem('user_id')+'/element7');
}else{
if((localStorage.length)==0){
if(updated_input_files.length==0){
......@@ -631,3 +612,4 @@ function promptNoFilesLeft(){
function getGfsFileName(contentDisposition) {
return contentDisposition.split("filename=")[1].replaceAll('"', '');
}
WebGde/WebContent/src/getFields/getFields.js
......@@ -16,14 +16,13 @@
* ID of the element that will contain the input fields
* @returns
*/
let getDocType;
const displayFields = async (parentID) => {
try {
document.getElementById("userNameValue").innerHTML = `User: ${sessionStorage.getItem("user_id")}`;
document.getElementById("elemIDValue").innerHTML = `Element ID: ${sessionStorage.getItem("element_id")}`;
let logOutDiv = document.getElementById("popupLogout");
logOutDiv.title = "Logout";
logOutDiv.classList.add("logOutButton")
......@@ -31,171 +30,178 @@ const displayFields = async (parentID) => {
logoutIcon.classList.add("normalIcon");
logoutIcon.classList.add("logOutIcon")
logoutIcon.src = "/WebGde/assets/logout_icon.png";
let logoutClass = document.getElementsByClassName("logOutIcon");
if(logoutClass.length === 0){
logOutDiv.append(logoutIcon);
}
if (logoutClass.length === 0) {
logOutDiv.append(logoutIcon);
}
let div = document.getElementById(parentID)
if(!div) return { valid: false, error: `Element with ID '${parentID}' not found` }
if (!div) return {
valid: false,
error: `Element with ID '${parentID}' not found`
}
clearFields(parentID) // make sure input fields are clear
clearFields(parentID) // make sure input fields are clear
await fetchSchema();
let doctype = sessionStorage.getItem('doctype');
let section = sessionStorage.getItem('section');
if (doctype == null && section == null) {
Object.keys(schema).every(function(key) {
let doctypes = schema[key];
let underscoredKey = key.replaceAll(" ", "_");
sessionStorage.setItem("currentDoctype", underscoredKey);
const {
valid,
error
} = validateSchema()
if (!valid) {
div.textContent = error
div.style.color = '#ff3333'
}
for (let sec in doctypes) {
let underscoredSec = sec.replaceAll(" ", "_");
sessionStorage.setItem("currentSection", underscoredSec);
createDocTypeDropdown('DocType', div, schema);
createSection('Section', div, doctypes, underscoredKey);
div = deconstruct(doctypes[sec], div, underscoredSec)
const submit = document.createElement('input')
submit.setAttribute('id', 'submitButton');
submit.classList.add("submitButtons");
submit.classList.add(underscoredSec);
submit.type = 'submit'
div.appendChild(submit)
return false;
}
});
} else {
let doctypes = schema[doctype];
let underscoredDoctype = doctype.replaceAll(" ", "_");
sessionStorage.setItem("currentDoctype", underscoredDoctype);
const {
valid,
error
} = validateSchema()
if (!valid) {
div.textContent = error
div.style.color = '#ff3333'
}
let underscoredSection = section.replaceAll(" ", "_");
sessionStorage.setItem("currentSection", underscoredSection);
createDocTypeDropdown('DocType', div, schema, doctype);
createSection('Section', div, doctypes, underscoredDoctype, section);
div = deconstruct(doctypes[section], div, underscoredSection)
const submit = document.createElement('input')
submit.classList.add("submitButtons");
submit.classList.add(underscoredSection);
submit.type = 'submit'
div.appendChild(submit)
for (let [k,v] of Object.entries(JSON.parse(sessionStorage.getItem("fields")))) {
for(let key of Object.keys(schema[doctype][section])) {
if(schema[doctype][section][key].aka == k) {
var fieldId = schema[doctype][section][key].fieldLabel;
var currId = fieldId.replace(" ", "_")
document.getElementById(currId).value = v;
}
}
}
}
$(document.body).on("change","#DocType",function(){
if (doctype == null && section == null) {
Object.keys(schema).every(function(key) {
let doctypes = schema[key];
let underscoredKey = key.replaceAll(" ", "_");
sessionStorage.setItem("currentDoctype", underscoredKey);
const {
valid,
error
} = validateSchema()
if (!valid) {
div.textContent = error
div.style.color = '#ff3333'
}
for (let sec in doctypes) {
let underscoredSec = sec.replaceAll(" ", "_");
sessionStorage.setItem("currentSection", underscoredSec);
createDocTypeDropdown('DocType', div, schema);
createSection('Section', div, doctypes, underscoredKey);
div = deconstruct(doctypes[sec], div, underscoredSec)
const submit = document.createElement('input')
submit.setAttribute('id', 'submitButton');
submit.classList.add("submitButtons");
submit.classList.add(underscoredSec);
submit.type = 'submit'
div.appendChild(submit)
return false;
}
});
} else {
let doctypes = schema[doctype];
let underscoredDoctype = doctype.replaceAll(" ", "_");
sessionStorage.setItem("currentDoctype", underscoredDoctype);
const {
valid,
error
} = validateSchema()
if (!valid) {
div.textContent = error
div.style.color = '#ff3333'
}
let underscoredSection = section.replaceAll(" ", "_");
sessionStorage.setItem("currentSection", underscoredSection);
createDocTypeDropdown('DocType', div, schema, doctype);
createSection('Section', div, doctypes, underscoredDoctype, section);
div = deconstruct(doctypes[section], div, underscoredSection)
const submit = document.createElement('input')
submit.classList.add("submitButtons");
submit.classList.add(underscoredSection);
submit.type = 'submit'
div.appendChild(submit)
for (let [k, v] of Object.entries(JSON.parse(sessionStorage.getItem("fields")))) {
for (let key of Object.keys(schema[doctype][section])) {
if (schema[doctype][section][key].aka == k) {
var fieldId = schema[doctype][section][key].fieldLabel;
var currId = fieldId.replace(" ", "_")
document.getElementById(currId).value = v;
}
}
}
}
$(document.body).on("change", "#DocType", function() {
const elements = document.getElementsByClassName(sessionStorage.getItem("currentSection"));
while(elements.length > 0){
while (elements.length > 0) {
elements[0].parentNode.removeChild(elements[0]);
}
const secElements = document.getElementsByClassName(sessionStorage.getItem("currentDoctype"));
while(secElements.length > 0){
while (secElements.length > 0) {
secElements[0].parentNode.removeChild(secElements[0]);
}
let doctypes = schema[this.value];
let underscoredValue = this.value.replaceAll(" ","_");
let underscoredValue = this.value.replaceAll(" ", "_");
sessionStorage.setItem("currentDoctype", underscoredValue);
const { valid, error } = validateSchema()
if(!valid){
div.textContent = error
div.style.color = '#ff3333'
}
for (let key in doctypes) {
let underscoredKey = key.replaceAll(" ", "_");
const {
valid,
error
} = validateSchema()
if (!valid) {
div.textContent = error
div.style.color = '#ff3333'
}
for (let key in doctypes) {
let underscoredKey = key.replaceAll(" ", "_");
sessionStorage.setItem("currentSection", underscoredKey);
createSection('Section', div, doctypes, underscoredValue);
div = deconstruct(doctypes[key], div, underscoredKey)
const submit = document.createElement('input')
submit.classList.add("submitButtons");
submit.classList.add(underscoredKey);
submit.classList.add("submitButtons");
submit.classList.add(underscoredKey);
submit.type = 'submit'
div.appendChild(submit)
break;
}
});
$(document.body).on("change","#Section",function(){
$(document.body).on("change", "#Section", function() {
const elements = document.getElementsByClassName(sessionStorage.getItem("currentSection"));
while(elements.length > 0){
while (elements.length > 0) {
elements[0].parentNode.removeChild(elements[0]);
}
let underscoredKey = this.value.replaceAll(" ", "_");
sessionStorage.setItem("currentSection", underscoredKey);
div = deconstruct(schema[sessionStorage.getItem("currentDoctype").replaceAll("_", " ")][this.value], div, underscoredKey)
const submit = document.createElement('input')
submit.classList.add("submitButtons");
submit.classList.add(underscoredKey);
submit.type = 'submit'
div.appendChild(submit)
let underscoredKey = this.value.replaceAll(" ", "_");
sessionStorage.setItem("currentSection", underscoredKey);
div = deconstruct(schema[sessionStorage.getItem("currentDoctype").replaceAll("_", " ")][this.value], div, underscoredKey)
const submit = document.createElement('input')
submit.classList.add("submitButtons");
submit.classList.add(underscoredKey);
submit.type = 'submit'
div.appendChild(submit)
});
/* const { ACCOUNTING_DOCUMENTS } = schema
//getDocType = DOC_TYPE1 ;
const { SECTION1 } = ACCOUNTING_DOCUMENTS
div = deconstruct(SECTION1, div, 'SECTION1')
const { valid, error } = validateSchema()
const { BANK_APPLICATION_FORMS } = schema
const { SECTION2 } = BANK_APPLICATION_FORMS
div = deconstruct(SECTION2, div, 'SECTION2')
const { HR_FILES } = schema
const { SECTION3 } = HR_FILES
div = deconstruct(SECTION3, div, 'SECTION3')
const submit = document.createElement('input')
submit.classList.add("submitButtons");
submit.type = 'submit'
div.appendChild(submit)*/
/* const { ACCOUNTING_DOCUMENTS } = schema
//getDocType = DOC_TYPE1 ;
const { SECTION1 } = ACCOUNTING_DOCUMENTS
div = deconstruct(SECTION1, div, 'SECTION1')
const { valid, error } = validateSchema()
const { BANK_APPLICATION_FORMS } = schema
const { SECTION2 } = BANK_APPLICATION_FORMS
div = deconstruct(SECTION2, div, 'SECTION2')
const { HR_FILES } = schema
const { SECTION3 } = HR_FILES
div = deconstruct(SECTION3, div, 'SECTION3')
const submit = document.createElement('input')
submit.classList.add("submitButtons");
submit.type = 'submit'
div.appendChild(submit)*/
// add handler event handler for dropdown
// separate handler is used to fit with the library used 'select2'
$(document).ready(function() {
const dropdowns = $('.dropdown-input').select2();
dropdowns.splice(0,2);
dropdowns.splice(0, 2);
$('.dropdown-input').select2().on('select2:open', () => {
document.querySelector('.select2-search__field').focus();
document.querySelector('.select2-container--open').firstChild.firstChild.style.backgroundColor = 'yellow';
......@@ -204,19 +210,19 @@ const displayFields = async (parentID) => {
if (document.querySelector('.select2-container--focus') != null) {
document.querySelector('.select2-container--focus').firstChild.firstChild.style.backgroundColor = '';
}
});
dropdowns.on('select2:close', handleDropdown)
});
//
// $(document).ready(function() {
// var dropdown1 = {
// 1 : ['SECTION1'],
// 2 : ['SECTION2'],
// 3 : ['SECTION3']
// }
//
// $(document).ready(function() {
// var dropdown1 = {
// 1 : ['SECTION1'],
// 2 : ['SECTION2'],
// 3 : ['SECTION3']
// }
// let doctype = sessionStorage.getItem('doctype');
// let section = sessionStorage.getItem('section');
......@@ -226,91 +232,94 @@ const displayFields = async (parentID) => {
// $('#Section').html(
// '<option>'+dropdown1[1].join('</option><option>')+'</option>'
// );
// $(".SECTION1").show();
// $(".SECTION2").hide();
// $(".SECTION1").show();
// $(".SECTION2").hide();
// $(".SECTION3").hide();
// [...document.querySelectorAll('.SECTION2 input, .SECTION2 textarea, .SECTION3 input, .SECTION3 textarea')].forEach(el => el.removeAttribute("required"));
// } else if(doctype == "BANK_APPLICATION_FORMS") {
// } else if(doctype == "BANK_APPLICATION_FORMS") {
// $("#DocType").select2("val", "2");
// $('#Section').html(
// '<option>'+dropdown1[2].join('</option><option>')+'</option>'
// );
// $(".SECTION2").show();
// $(".SECTION1").hide();
// $(".SECTION2").show();
// $(".SECTION1").hide();
// $(".SECTION3").hide();
// [...document.querySelectorAll('.SECTION1 input, .SECTION1 textarea, .SECTION3 input, .SECTION3 textarea')].forEach(el => el.removeAttribute("required"));
// } else if(doctype == "HR_FILES") {
// } else if(doctype == "HR_FILES") {
// $("#DocType").select2("val", "3");
// $('#Section').html(
// '<option>'+dropdown1[3].join('</option><option>')+'</option>'
// );
// $(".SECTION3").show();
// $(".SECTION1").hide();
// $(".SECTION3").show();
// $(".SECTION1").hide();
// $(".SECTION2").hide();
// [...document.querySelectorAll('.SECTION1 input, .SECTION1 textarea, .SECTION2 input, .SECTION2 textarea')].forEach(el => el.removeAttribute("required"));
// }
// } else {
// $(".SECTION2").hide();
// $(".SECTION3").hide();
// [...document.querySelectorAll('.SECTION2 input, .SECTION2 textarea, .SECTION3 input, .SECTION3 textarea')].forEach(el => el.removeAttribute("required"));
// $('#Section').html(
// '<option>'+dropdown1[1].join('</option><option>')+'</option>'
// );
// }
// $('#Section').on('change',function() {
// if($(this).val() == "SECTION1") {
// $(".SECTION1").show();
// $(".SECTION2").hide();
// $(".SECTION3").hide();
// } else if($(this).val() == "SECTION2") {
// $(".SECTION2").show();
// $(".SECTION1").hide();
// $(".SECTION3").hide();
// } else if($(this).val() == "SECTION3") {
// $(".SECTION3").show();
// $(".SECTION1").hide();
// $(".SECTION2").hide();
// }
// });
// $('#DocType').on('change',function() {
// if($(this).val() == "1") {
// $(".SECTION1").show();
// $(".SECTION2").hide();
// $('#Section').on('change',function() {
// if($(this).val() == "SECTION1") {
// $(".SECTION1").show();
// $(".SECTION2").hide();
// $(".SECTION3").hide();
// } else if($(this).val() == "SECTION2") {
// $(".SECTION2").show();
// $(".SECTION1").hide();
// $(".SECTION3").hide();
// } else if($(this).val() == "SECTION3") {
// $(".SECTION3").show();
// $(".SECTION1").hide();
// $(".SECTION2").hide();
// }
// });
// $('#DocType').on('change',function() {
// if($(this).val() == "1") {
// $(".SECTION1").show();
// $(".SECTION2").hide();
// $(".SECTION3").hide();
// [...document.querySelectorAll('.SECTION2 input, .SECTION2 textarea, .SECTION3 input, .SECTION3 textarea')].forEach(el => el.removeAttribute("required"));
// } else if($(this).val() == "2") {
// $(".SECTION2").show();
// $(".SECTION1").hide();
// } else if($(this).val() == "2") {
// $(".SECTION2").show();
// $(".SECTION1").hide();
// $(".SECTION3").hide();
// [...document.querySelectorAll('.SECTION1 input, .SECTION1 textarea, .SECTION3 input, .SECTION3 textarea')].forEach(el => el.removeAttribute("required"));
// } else if($(this).val() == "3") {
// $(".SECTION3").show();
// $(".SECTION1").hide();
// } else if($(this).val() == "3") {
// $(".SECTION3").show();
// $(".SECTION1").hide();
// $(".SECTION2").hide();
// [...document.querySelectorAll('.SECTION1 input, .SECTION1 textarea, .SECTION2 input, .SECTION2 textarea')].forEach(el => el.removeAttribute("required"));
// }
// $('#Section').html(
// '<option>'+dropdown1[$(this).val()].join('</option><option>')+'</option>'
// );
// });
// });
$(document).ready(function () {
// $('#Section').html(
// '<option>'+dropdown1[$(this).val()].join('</option><option>')+'</option>'
// );
// });
// });
$(document).ready(function() {
$('form:first *:input[type!=hidden]:first').focus(); // Run code
});
} catch(err) {
} catch (err) {
console.log(err)
return { valid: false, error: err }
return {
valid: false,
error: err
}
}
}
......@@ -328,9 +337,9 @@ const noValidation = (key) => {
input.setAttribute('id', `${key}`)
input.setAttribute('placeholder', 'Invalid field!')
input.setAttribute('disabled', 'true')
return input
} catch(err) {
} catch (err) {
throw err
}
}
......@@ -347,7 +356,10 @@ const noValidation = (key) => {
*/
const inputString = (key, validation) => {
try {
const { mandatory, fieldLength } = validation
const {
mandatory,
fieldLength
} = validation
let input = document.createElement('input')
input.setAttribute('id', `${key}`)
......@@ -356,31 +368,28 @@ const inputString = (key, validation) => {
input.setAttribute('autocomplete', 'off')
input.addEventListener('focusout', handleInput)
if(fieldLength >= 31 && fieldLength <= 60){
if (fieldLength >= 31 && fieldLength <= 60) {
input = document.createElement('TEXTAREA')
input.setAttribute('rows', 2)
input.setAttribute('id', `${key}`)
input.setAttribute('name', `${key}`)
input.setAttribute('cols', 30)
input.addEventListener('focusout', handleInput)
}
else if(fieldLength >= 61 && fieldLength <= 90){
} else if (fieldLength >= 61 && fieldLength <= 90) {
input = document.createElement('TEXTAREA')
input.setAttribute('rows', 3)
input.setAttribute('id', `${key}`)
input.setAttribute('name', `${key}`)
input.setAttribute('cols', 30)
input.addEventListener('focusout', handleInput)
}
else if(fieldLength >= 91 && fieldLength <= 120){
} else if (fieldLength >= 91 && fieldLength <= 120) {
input = document.createElement('TEXTAREA')
input.setAttribute('rows', 4)
input.setAttribute('id', `${key}`)
input.setAttribute('name', `${key}`)
input.setAttribute('cols', 30)
input.addEventListener('focusout', handleInput)
}
else if (fieldLength >= 120) {
} else if (fieldLength >= 120) {
input = document.createElement('TEXTAREA')
input.setAttribute('rows', 5)
input.setAttribute('id', `${key}`)
......@@ -393,7 +402,7 @@ const inputString = (key, validation) => {
mandatory ? input.setAttribute('required', 'true') : null
return input
} catch(err) {
} catch (err) {
throw err
}
}
......@@ -410,8 +419,11 @@ const inputString = (key, validation) => {
*/
const inputNumeric = (key, validation) => {
try {
const { mandatory, fieldLength } = validation
const {
mandatory,
fieldLength
} = validation
const input = document.createElement('input')
input.setAttribute('id', `${key}`)
input.setAttribute('name', `${key}`)
......@@ -424,7 +436,7 @@ const inputNumeric = (key, validation) => {
mandatory ? input.setAttribute('required', 'true') : null
return input
} catch(err) {
} catch (err) {
throw err
}
}
......@@ -441,7 +453,10 @@ const inputNumeric = (key, validation) => {
*/
const inputDate = (key, validation) => {
try {
const { mandatory, fieldLength } = validation
const {
mandatory,
fieldLength
} = validation
const input = document.createElement('input')
input.setAttribute('id', `${key}`)
......@@ -452,7 +467,7 @@ const inputDate = (key, validation) => {
mandatory ? input.setAttribute('required', 'true') : null
return input
} catch(err) {
} catch (err) {
throw err
}
}
......@@ -469,7 +484,10 @@ const inputDate = (key, validation) => {
*/
const inputDropdown = (key, validation) => {
try {
const { mandatory, options } = validation
const {
mandatory,
options
} = validation
const input = document.createElement('select')
input.setAttribute('id', `${key}`)
input.setAttribute('name', `${key}`)
......@@ -478,36 +496,35 @@ const inputDropdown = (key, validation) => {
input.addEventListener('keydown', function(event) {
if (event.keyCode == 9) {
event.preventDefault();
var elem = document.getElementsByClassName('select2-search__field');
elem.focus();
event.preventDefault();
var elem = document.getElementsByClassName('select2-search__field');
elem.focus();
}
});
});
if(options && options.length>0) {
if (options && options.length > 0) {
newOption = document.createElement("option")
newOption.text = 'Choose an option'
newOption.value = null
input.add(newOption)
for(const option of options) {
for (const option of options) {
newOption = document.createElement("option")
newOption.text = option
newOption.value = option
input.add(newOption)
}
}
else {
} else {
newOption = document.createElement("option")
newOption.text = 'No option available'
newOption.value = null
input.add(newOption)
input.setAttribute('disabled', 'false')
}
return input
} catch(err) {
} catch (err) {
throw err
}
}
......@@ -519,18 +536,22 @@ const inputDropdown = (key, validation) => {
* @param {*} event
*/
const handleInput = (event) => {
const { id, value, style} = event.target
const {
id,
value,
style
} = event.target
try {
const validation = validateInput(id, value)
if(!validation.valid) {
if (!validation.valid) {
event.target.classList.remove('input-valid')
event.target.classList.add('input-invalid')
} else {
event.target.classList.remove('input-ivalid')
event.target.classList.add('input-valid')
}
} catch(err) {
} catch (err) {
throw err
}
}
......@@ -558,7 +579,7 @@ const handleDropdown = (event) => {
try {
const validation = validateInput(id, value)
if(!validation.valid) {
if (!validation.valid) {
$(`#${id}`).select2({
selectionCssClass: 'input-invalid'
})
......@@ -567,7 +588,7 @@ const handleDropdown = (event) => {
selectionCssClass: 'input-valid'
})
}
} catch(err) {
} catch (err) {
throw err
}
}
......@@ -578,10 +599,10 @@ const handleDropdown = (event) => {
* id of element containing the input fields
*/
const clearFields = (elementID) => {
try{
try {
const element = document.getElementById(elementID)
element.innerHTML = ''
} catch(err) {
} catch (err) {
throw err
}
}
......@@ -594,32 +615,34 @@ const clearFields = (elementID) => {
* div with the deconsctructed section
*/
const deconstruct = (section, div, classAttribute) => {
try {
for(const key in section) {
const { fieldLabel } = section[key]
try {
for (const key in section) {
const {
fieldLabel
} = section[key]
const validation = getValidation(key)
const newField = document.createElement('div') // will contain input field and label
const newField = document.createElement('div') // will contain input field and label
newField.setAttribute('class', 'fieldContainer ' + classAttribute)
div.appendChild(newField)
const labelContainer = document.createElement('div') // name beside input field
const labelContainer = document.createElement('div') // name beside input field
labelContainer.setAttribute('class', 'labelContainer ' + classAttribute)
newField.appendChild(labelContainer)
const label = document.createElement('label')
const label = document.createElement('label')
label.textContent = fieldLabel ? fieldLabel : `Missing label`
label.style.color = fieldLabel ? '#000000' : '#ff3333'
labelContainer.appendChild(label)
const inputContainer = document.createElement('div') // input field
labelContainer.appendChild(label)
const inputContainer = document.createElement('div') // input field
inputContainer.setAttribute('class', 'inputContainer ' + classAttribute)
newField.appendChild(inputContainer)
let input
switch(fieldLabel && validation && validation.collection) {
switch (fieldLabel && validation && validation.collection) {
case 'alphanumeric':
case 'alphabet':
input = inputString(key, validation)
......@@ -634,18 +657,18 @@ const deconstruct = (section, div, classAttribute) => {
case 'date':
case 'datepicker':
input = inputDate(key, validation)
break
break
default:
input = noValidation()
break
}
input.setAttribute('class', classAttribute)
input.classList.add('inputField')
input.setAttribute('class', classAttribute)
input.classList.add('inputField')
inputContainer.appendChild(input)
}
return div
} catch(err) {
return div
} catch (err) {
throw err
}
}
......@@ -658,45 +681,45 @@ const deconstruct = (section, div, classAttribute) => {
* div with the deconsctructed section
*/
const createDocTypeDropdown = (fieldLabel, div, schema, doc) => {
try {
const newField = document.createElement('div') // will contain input field and label
try {
const newField = document.createElement('div') // will contain input field and label
newField.setAttribute('class', 'fieldContainer')
div.appendChild(newField)
const labelContainer = document.createElement('div') // name beside input field
const labelContainer = document.createElement('div') // name beside input field
labelContainer.setAttribute('class', 'labelContainer')
newField.appendChild(labelContainer)
const label = document.createElement('label')
const label = document.createElement('label')
label.textContent = fieldLabel ? fieldLabel : `Missing label`
label.style.color = fieldLabel ? '#000000' : '#ff3333'
labelContainer.appendChild(label)
const inputContainer = document.createElement('div') // input field
const inputContainer = document.createElement('div') // input field
inputContainer.setAttribute('class', 'inputContainer')
newField.appendChild(inputContainer)
const docTypeDropDown = document.createElement('select')
const docTypeDropDown = document.createElement('select')
docTypeDropDown.setAttribute('id', fieldLabel)
docTypeDropDown.classList.add('dropdown-input')
// docTypeDropDown.addEventListener('focusout', handleInput)
for(const doctype in schema) {
newOption = document.createElement("option")
newOption.text = doctype
newOption.value = doctype
if (doctype == doc) {
newOption.selected = 'selected'
}
docTypeDropDown.add(newOption)
}
docTypeDropDown.classList.add('inputField')
for (const doctype in schema) {
newOption = document.createElement("option")
newOption.text = doctype
newOption.value = doctype
if (doctype == doc) {
newOption.selected = 'selected'
}
docTypeDropDown.add(newOption)
}
docTypeDropDown.classList.add('inputField')
inputContainer.appendChild(docTypeDropDown)
return div
} catch(err) {
return div
} catch (err) {
throw err
}
}
......@@ -709,129 +732,134 @@ const createDocTypeDropdown = (fieldLabel, div, schema, doc) => {
* div with the deconsctructed section
*/
const createSection = (fieldLabel, div, doctype, section, sec) => {
try {
const newField = document.createElement('div') // will contain input field and label
try {
const newField = document.createElement('div') // will contain input field and label
newField.setAttribute('class', 'fieldContainer ' + section)
div.appendChild(newField)
const labelContainer = document.createElement('div') // name beside input field
const labelContainer = document.createElement('div') // name beside input field
labelContainer.setAttribute('class', 'labelContainer ' + section)
newField.appendChild(labelContainer)
const label = document.createElement('label')
const label = document.createElement('label')
label.textContent = fieldLabel ? fieldLabel : `Missing label`
label.style.color = fieldLabel ? '#000000' : '#ff3333'
labelContainer.appendChild(label)
const inputContainer = document.createElement('div') // input field
const inputContainer = document.createElement('div') // input field
inputContainer.setAttribute('class', 'inputContainer ' + section)
newField.appendChild(inputContainer)
const docTypeDropDown = document.createElement('select')
const docTypeDropDown = document.createElement('select')
docTypeDropDown.setAttribute('id', fieldLabel)
docTypeDropDown.classList.add('dropdown-input')
// docTypeDropDown.addEventListener('focusout', handleInput)
for(const section in doctype) {
newOption = document.createElement("option")
newOption.text = section
newOption.value = section
if (section == sec) {
newOption.selected = 'selected'
}
docTypeDropDown.add(newOption)
}
docTypeDropDown.classList.add('inputField')
for (const section in doctype) {
newOption = document.createElement("option")
newOption.text = section
newOption.value = section
if (section == sec) {
newOption.selected = 'selected'
}
docTypeDropDown.add(newOption)
}
docTypeDropDown.classList.add('inputField')
inputContainer.appendChild(docTypeDropDown)
return div
} catch(err) {
return div
} catch (err) {
throw err
}
}
function saveForm(index){
const form = document.querySelector("#fields");
const inputs = form.querySelectorAll("input,textarea");
const values = {};
inputs.forEach(input => {
if(input.value != ''){
values[input.name] = input.value;
}
});
index--;
/* var formArray = JSON.parse(sessionStorage.getItem('formArray'));
//formArray.push(formValues);
if(typeof formArray[index] !== 'undefined') {
formArray.splice(index, 1, values)
} else {
formArray.splice(index, 0, values)
}
sessionStorage.setItem('formArray', JSON.stringify(formArray));*/
function saveForm(index) {
const form = document.querySelector("#fields");
const inputs = form.querySelectorAll("input,textarea");
const values = {};
inputs.forEach(input => {
if (input.value != '') {
values[input.name] = input.value;
}
});
index--;
/* var formArray = JSON.parse(sessionStorage.getItem('formArray'));
//formArray.push(formValues);
if(typeof formArray[index] !== 'undefined') {
formArray.splice(index, 1, values)
} else {
formArray.splice(index, 0, values)
}
sessionStorage.setItem('formArray', JSON.stringify(formArray));*/
}
function populateForm(index){
index--;
if(localStorage.getItem("prev") == 1){
index--;
}
var formArray = JSON.parse(sessionStorage.getItem('formArray'));
if (formArray[index] != null) {
var currForm = formArray[index];
for (let field in currForm) {
document.getElementById(field).value = currForm[field];
}
}
function populateForm(index) {
index--;
if (localStorage.getItem("prev") == 1) {
index--;
}
var formArray = JSON.parse(sessionStorage.getItem('formArray'));
if (formArray[index] != null) {
var currForm = formArray[index];
for (let field in currForm) {
document.getElementById(field).value = currForm[field];
}
}
}
async function populateFields(){
await fetchSchema();
var fields = {};
var resp = [];
async function populateFields() {
await fetchSchema();
var fields = {};
var resp = [];
resp.push(await getFieldData());
if (resp[0] != null) {
var doctype = resp[0].DocType;
var section = resp[0].Section;
sessionStorage.removeItem("doctype");
sessionStorage.removeItem("section");
if (typeof doctype !== 'undefined' && typeof section !== 'undefined') {
sessionStorage.setItem("doctype", doctype);
sessionStorage.setItem("section", section);
}
var currForm = resp[0];
/*document.querySelector('#DocType').value = doctype;
sessionStorage.setItem("doctype", doctype);
for(let i = 0; i < document.getElementById("DocType").options.length; i++) {
if(document.getElementById("DocType").options[i].value == doctype) {
document.getElementById("DocType").options[i].selected = "selected"
}
}
sessionStorage.setItem("section", section);
document.querySelector('#Section').value = section;
for(let i = 0; i < document.getElementById("Section").options.length; i++) {
if(document.getElementById("Section").options[i].value == section) {
document.getElementById("Section").options[i].selected = "selected"
}
}*/
for (let field in currForm) {
//document.getElementById(field).value = currForm[field];
/*if(field == "DocType"){
if (resp.length == 0 || resp == null) {
sessionStorage.setItem('fields', fields);
displayFields("fields");
return;
}
if (resp[0] != null) {
var doctype = resp[0].DocType;
var section = resp[0].Section;
sessionStorage.removeItem("doctype");
sessionStorage.removeItem("section");
if (typeof doctype !== 'undefined' && typeof section !== 'undefined') {
sessionStorage.setItem("doctype", doctype);
sessionStorage.setItem("section", section);
}
var currForm = resp[0];
/*document.querySelector('#DocType').value = doctype;
sessionStorage.setItem("doctype", doctype);
for(let i = 0; i < document.getElementById("DocType").options.length; i++) {
if(document.getElementById("DocType").options[i].value == doctype) {
document.getElementById("DocType").options[i].selected = "selected"
}
}
sessionStorage.setItem("section", section);
document.querySelector('#Section').value = section;
for(let i = 0; i < document.getElementById("Section").options.length; i++) {
if(document.getElementById("Section").options[i].value == section) {
document.getElementById("Section").options[i].selected = "selected"
}
}*/
for (let field in currForm) {
//document.getElementById(field).value = currForm[field];
/*if(field == "DocType"){
document.querySelector('#DocType').value = doctype;
sessionStorage.setItem("doctype", doctype);
for(let i = 0; i < document.getElementById("DocType").options.length; i++) {
......@@ -851,23 +879,22 @@ async function populateFields(){
const selectedOption = mySelect.options[mySelect.selectedIndex];
selectedOption.value = section;
} */
if(field == "fields"){
let fieldsobj = currForm[field];
for (let [k,v] of Object.entries(fieldsobj)) {
for(let key of Object.keys(schema[doctype][section])) {
if(schema[doctype][section][key].aka == "field"+k) {
fields["field"+k] = v;
//var fieldId = schema[doctype][section][key].fieldLabel;
//var currId = fieldId.replace(" ", "_")
//document.getElementById(currId).value = v;
}
}
}
}
}
}
sessionStorage.setItem('fields', JSON.stringify(fields));
displayFields("fields");
}
if (field == "fields") {
let fieldsobj = currForm[field];
for (let [k, v] of Object.entries(fieldsobj)) {
for (let key of Object.keys(schema[doctype][section])) {
if (schema[doctype][section][key].aka == "field" + k) {
fields["field" + k] = v;
//var fieldId = schema[doctype][section][key].fieldLabel;
//var currId = fieldId.replace(" ", "_")
//document.getElementById(currId).value = v;
}
}
}
}
}
}
sessionStorage.setItem('fields', JSON.stringify(fields));
displayFields("fields");
}
\ No newline at end of file
WebGde/WebContent/src/pdfviewer/pdfv.js
let current_pdf = 0;
var displayPdf = function(doc) {
//Create all Elements
const container = document.createElement('div');
container.setAttribute('id', 'pdf-container');
// Get the next and previous buttons
let centerContainer = document.createElement("div");
centerContainer.classList.add("footerCenterContainer");
var fitContentButton = document.createElement("div");
fitContentButton.setAttribute('id', 'fit-content');
fitContentButton.classList.add("TiffViewer_ButtonClass");
const fitContentIcon = addIcon("Fit Content", "full_content_icon.png");
var rotateRightButton = document.createElement('div');
rotateRightButton.setAttribute('id', 'rotate-right');
rotateRightButton.classList.add("TiffViewer_ButtonClass");
const rotateRightIcon = addIcon("Rotate Right", "rotate_right_icon.png");
//Create all Elements
const container = document.createElement('div');
container.setAttribute('id', 'pdf-container');
// Get the next and previous buttons
let centerContainer = document.createElement("div");
centerContainer.classList.add("footerCenterContainer");
var fitContentButton = document.createElement("div");
fitContentButton.setAttribute('id', 'fit-content');
fitContentButton.classList.add("TiffViewer_ButtonClass");
const fitContentIcon = addIcon("Fit Content", "full_content_icon.png");
var rotateRightButton = document.createElement('div');
rotateRightButton.setAttribute('id', 'rotate-right');
rotateRightButton.classList.add("TiffViewer_ButtonClass");
const rotateRightIcon = addIcon("Rotate Right", "rotate_right_icon.png");
var rotateLeftButton = document.createElement('div');
rotateLeftButton.setAttribute('id', 'rotate-left');
rotateLeftButton.classList.add("TiffViewer_ButtonClass");
const rotateLeftIcon = addIcon("Rotate Left", "rotate_left_icon.png");
var zoomInButton = document.createElement('div');
zoomInButton.setAttribute('id', 'zoom-in');
zoomInButton.classList.add("TiffViewer_ButtonClass");
const zoomInIcon = addIcon("Zoom In", "zoom_in_icon.png");
var zoomOutButton = document.createElement('div');
zoomOutButton.setAttribute('id', 'zoom-out');
zoomOutButton.classList.add("TiffViewer_ButtonClass");
const zoomOutIcon = addIcon("Zoom Out", "zoom_out_icon.png");
var rotateLeftButton = document.createElement('div');
rotateLeftButton.setAttribute('id', 'rotate-left');
rotateLeftButton.classList.add("TiffViewer_ButtonClass");
const rotateLeftIcon = addIcon("Rotate Left", "rotate_left_icon.png");
var flipVerticalButton = document.createElement('div');
flipVerticalButton.setAttribute('id', 'flip-vertical');
flipVerticalButton.classList.add("TiffViewer_ButtonClass");
const flipVerticalIcon = addIcon("Flip Vertical", "flip_vertical_icon.png");
var zoomInButton = document.createElement('div');
zoomInButton.setAttribute('id', 'zoom-in');
zoomInButton.classList.add("TiffViewer_ButtonClass");
const zoomInIcon = addIcon("Zoom In", "zoom_in_icon.png");
var zoomOutButton = document.createElement('div');
zoomOutButton.setAttribute('id', 'zoom-out');
zoomOutButton.classList.add("TiffViewer_ButtonClass");
const zoomOutIcon = addIcon("Zoom Out", "zoom_out_icon.png");
var flipVerticalButton = document.createElement('div');
flipVerticalButton.setAttribute('id', 'flip-vertical');
flipVerticalButton.classList.add("TiffViewer_ButtonClass");
const flipVerticalIcon = addIcon("Flip Vertical", "flip_vertical_icon.png");
var flipHorizontalButton = document.createElement('div');
flipHorizontalButton.setAttribute('id', 'flip-horizontal');
flipHorizontalButton.classList.add("TiffViewer_ButtonClass");
const flipHorizontalIcon = addIcon("Flip Horizontal", "flip_horizontal_icon.png");
let pageButtonInfoContainer = document.createElement("div");
pageButtonInfoContainer.classList.add("pageButtonInfoContainer");
var buttonAndPageContainer = document.createElement('div');
buttonAndPageContainer.classList.add("buttonAndPageContainer")
var prevButton = document.createElement('div');
prevButton.setAttribute('id', 'prev-button');
prevButton.classList.add("multiPagePdf_ButtonClass")
prevButton.textContent = '<';
var nextButton = document.createElement('div');
nextButton.setAttribute('id', 'next-button');
nextButton.classList.add("multiPagePdf_ButtonClass")
nextButton.textContent = '>';
let pageZoomInfoContainer = document.createElement("div");
pageZoomInfoContainer.classList.add("pageZoomInfoContainer");
var pageInfo = document.createElement('span');
pageInfo.setAttribute('id', 'page-info');
var zoomInfo = document.createElement('span');
zoomInfo.setAttribute('id', 'page-info');
var Tiffbody = document.getElementById("TiffModalBody");
Tiffbody.appendChild(container);
var footer = document.getElementById("TiffModalFooter");
var controllsContainer = document.createElement("div");
controllsContainer.setAttribute('id', 'controlsContainer');
fitContentButton.append(fitContentIcon);
rotateRightButton.append(rotateRightIcon);
rotateLeftButton.append(rotateLeftIcon);
zoomInButton.append(zoomInIcon);
zoomOutButton.append(zoomOutIcon);
flipVerticalButton.append(flipVerticalIcon);
flipHorizontalButton.append(flipHorizontalIcon);
pageZoomInfoContainer.appendChild(pageInfo);
pageZoomInfoContainer.appendChild(zoomInfo);
pageButtonInfoContainer.append(prevButton);
pageButtonInfoContainer.append(pageZoomInfoContainer);
pageButtonInfoContainer.append(nextButton);
buttonAndPageContainer.append(pageButtonInfoContainer);
footer.appendChild(controllsContainer);
centerContainer.appendChild(fitContentButton);
centerContainer.appendChild(rotateRightButton);
centerContainer.appendChild(rotateLeftButton);
centerContainer.appendChild(zoomInButton);
centerContainer.appendChild(zoomOutButton);
centerContainer.appendChild(flipVerticalButton);
centerContainer.appendChild(flipHorizontalButton);
controllsContainer.appendChild(centerContainer);
controllsContainer.appendChild(buttonAndPageContainer);
//canva's
var canvas = document.createElement('canvas');
// Load the PDF document
pdfjsLib.getDocument(doc).promise.then(function(pdf) {
// Get the first page of the PDF
pdf.getPage(1).then(function(page) {
// Set the viewport scale and size
var scale = 1.3;
var viewport = page.getViewport({scale: scale});
// Create a canvas element to render the page
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
container.appendChild(canvas);
// Render the page on the canvas
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
// Keep track of the current page, rotation, scale, and flip settings
var currentPage = 1;
var currentRotation = 0;
var currentScale = 1.3;
var flipVertical = false;
var flipHorizontal = false;
var fitScale = 2.0;
// Handle the click event for the previous button
prevButton.addEventListener('click', function() {
if (currentPage > 1) {
currentPage--;
renderPage(currentPage);
}
});
document.addEventListener("keydown", (e) => {
if (e.key === 'F11') {
e.preventDefault();
if (currentPage > 1) {
currentPage--;
renderPage(currentPage);
}
}
})
// Handle the click event for the next button
nextButton.addEventListener('click', function() {
if (currentPage < pdf.numPages) {
currentPage++;
renderPage(currentPage);
}
});
var flipHorizontalButton = document.createElement('div');
flipHorizontalButton.setAttribute('id', 'flip-horizontal');
flipHorizontalButton.classList.add("TiffViewer_ButtonClass");
const flipHorizontalIcon = addIcon("Flip Horizontal", "flip_horizontal_icon.png");
var pageButtonInfoContainer = document.createElement("div");
pageButtonInfoContainer.classList.add("pageButtonInfoContainer");
var buttonAndPageContainer = document.createElement('div');
buttonAndPageContainer.classList.add("buttonAndPageContainer")
var prevButton = document.createElement('div');
prevButton.setAttribute('id', 'prev-button');
prevButton.classList.add("multiPagePdf_ButtonClass")
prevButton.textContent = '<';
var nextButton = document.createElement('div');
nextButton.setAttribute('id', 'next-button');
nextButton.classList.add("multiPagePdf_ButtonClass")
nextButton.textContent = '>';
let pageZoomInfoContainer = document.createElement("div");
pageZoomInfoContainer.classList.add("pageZoomInfoContainer");
var pageInfo = document.createElement('span');
pageInfo.setAttribute('id', 'page-info');
var zoomInfo = document.createElement('span');
zoomInfo.setAttribute('id', 'page-info');
var Tiffbody = document.getElementById("TiffModalBody");
Tiffbody.appendChild(container);
var footer = document.getElementById("TiffModalFooter");
var controllsContainer = document.createElement("div");
controllsContainer.setAttribute('id', 'controlsContainer');
fitContentButton.append(fitContentIcon);
rotateRightButton.append(rotateRightIcon);
rotateLeftButton.append(rotateLeftIcon);
zoomInButton.append(zoomInIcon);
zoomOutButton.append(zoomOutIcon);
flipVerticalButton.append(flipVerticalIcon);
flipHorizontalButton.append(flipHorizontalIcon);
pageZoomInfoContainer.appendChild(pageInfo);
pageZoomInfoContainer.appendChild(zoomInfo);
pageButtonInfoContainer.append(prevButton);
pageButtonInfoContainer.append(pageZoomInfoContainer);
pageButtonInfoContainer.append(nextButton);
buttonAndPageContainer.append(pageButtonInfoContainer);
footer.appendChild(controllsContainer);
centerContainer.appendChild(fitContentButton);
centerContainer.appendChild(rotateRightButton);
centerContainer.appendChild(rotateLeftButton);
centerContainer.appendChild(zoomInButton);
centerContainer.appendChild(zoomOutButton);
centerContainer.appendChild(flipVerticalButton);
centerContainer.appendChild(flipHorizontalButton);
controllsContainer.appendChild(centerContainer);
Tiffbody.appendChild(buttonAndPageContainer);
//canva's
var canvas = document.createElement('canvas');
// Load the PDF document
pdfjsLib.getDocument(doc).promise.then(function(pdf) {
// Get the first page of the PDF
pdf.getPage(1).then(function(page) {
// Set the viewport scale and size
var scale = 1.3;
var viewport = page.getViewport({
scale: scale
});
// Create a canvas element to render the page
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
container.appendChild(canvas);
// Render the page on the canvas
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
// Keep track of the current page, rotation, scale, and flip settings
var currentPage = 1;
var currentRotation = 0;
var currentScale = 1.3;
var flipVertical = false;
var flipHorizontal = false;
var fitScale = 2.0;
// Handle the click event for the previous button
prevButton.addEventListener('click', function() {
if (currentPage > 1) {
currentPage--;
renderPage(currentPage);
}
});
document.addEventListener("keydown", (e) => {
if (e.key === 'F11') {
e.preventDefault();
if (currentPage > 1) {
currentPage--;
renderPage(currentPage);
}
}
})
// Handle the click event for the next button
nextButton.addEventListener('click', function() {
if (currentPage < pdf.numPages) {
currentPage++;
renderPage(currentPage);
}
});
document.addEventListener("keydown", (e) => {
if (e.key === 'F12') {
e.preventDefault();
if (currentPage < pdf.numPages) {
currentPage++;
renderPage(currentPage);
}
}
})
fitContentButton.addEventListener('click', function() {
if (currentScale != fitScale) {
currentScale = fitScale;
renderPage(currentPage);
} else {
currentScale = 1.3;
renderPage(currentPage);
}
});
document.addEventListener("keydown", function(e) {
if (e.shiftKey && e.key == 'F') {
if (currentScale != fitScale) {
currentScale = fitScale;
renderPage(currentPage);
} else {
currentScale = 1.3;
renderPage(currentPage);
}
}
});
// Handle the click event for the rotate left button
rotateLeftButton.addEventListener('click', function() {
currentRotation -= 90;
renderPage(currentPage);
});
document.addEventListener("keydown", (e) => {
if (e.shiftKey && e.code === 'ArrowDown') {
e.preventDefault();
currentRotation -= 90;
renderPage(currentPage);
}
})
// Handle the click event for the rotate right button
rotateRightButton.addEventListener('click', function() {
currentRotation += 90;
renderPage(currentPage);
});
document.addEventListener("keydown", (e) => {
if (e.shiftKey && e.code === 'ArrowUp') {
e.preventDefault();
currentRotation += 90;
renderPage(currentPage);
}
})
// Handle the click event for the zoom in button
zoomInButton.addEventListener('click', function() {
currentScale += 0.1;
renderPage(currentPage);
});
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.key === "=") {
currentScale += 0.1;
renderPage(currentPage);
}
})
// Handle the click event for the zoom out button
zoomOutButton.addEventListener('click', function() {
currentScale -= 0.1;
renderPage(currentPage);
});
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.key === "-") {
currentScale -= 0.1;
renderPage(currentPage);
}
})
// Handle the click event for the flip vertical button
flipVerticalButton.addEventListener('click', function() {
container.style.transform = `scaleY(${container.style.transform.includes('scaleY(-1)') ? '1' : '-1'})`;
container.style.float = "left";
});
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.shiftKey && e.key.toUpperCase() === "V") {
e.preventDefault();
container.style.transform = `scaleY(${container.style.transform.includes('scaleY(-1)') ? '1' : '-1'})`;
container.style.float = "left";
}
})
// Handle the click event for the flip horizontal button
flipHorizontalButton.addEventListener('click', function() {
container.style.transform = `scaleX(${container.style.transform.includes('scaleX(-1)') ? '1' : '-1'})`;
container.style.float = "left";
});
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.shiftKey && e.key.toUpperCase() === "H") {
e.preventDefault();
container.style.transform = `scaleX(${container.style.transform.includes('scaleX(-1)') ? '1' : '-1'})`;
container.style.float = "left";
}
})
// Function to render a page
function renderPage(pageNumber) {
pdf.getPage(pageNumber).then(function(page) {
var viewport = page.getViewport({
scale: currentScale,
rotation: currentRotation
});
if (flipVertical || flipHorizontal) {
var transform = [1, 0, 0, 1, 0, 0];
if (flipVertical) {
transform[3] = -1;
transform[5] = viewport.height;
}
if (flipHorizontal) {
transform[0] = -1;
transform[4] = viewport.width;
}
viewport.transform = transform;
}
/*var canvas = document.querySelector('canvas');*/
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
setTimeout(function() {
page.render(renderContext);
}, 100);
// Update the page info element
pageInfo.textContent = 'Page ' + pageNumber + ' of ' + pdf.numPages;
zoomInfo.textContent = 'Zoom ' + currentScale;
});
}
document.addEventListener("keydown", (e) => {
if (e.key === 'F12') {
e.preventDefault();
if (currentPage < pdf.numPages) {
currentPage++;
renderPage(currentPage);
}
}
})
fitContentButton.addEventListener('click', function() {
if(currentScale != fitScale){
currentScale = fitScale;
renderPage(currentPage);
}else{
currentScale = 1.3;
renderPage(currentPage);
}
});
document.addEventListener("keydown", function(e) {
if (e.shiftKey && e.key == 'F') {
if(currentScale != fitScale){
currentScale = fitScale;
renderPage(currentPage);
}else{
currentScale = 1.3;
renderPage(currentPage);
}
}
});
// Handle the click event for the rotate left button
rotateLeftButton.addEventListener('click', function() {
currentRotation -= 90;
renderPage(currentPage);
});
document.addEventListener("keydown", (e) => {
if (e.shiftKey && e.code === 'ArrowDown') {
e.preventDefault();
currentRotation -= 90;
renderPage(currentPage);
}
})
// Handle the click event for the rotate right button
rotateRightButton.addEventListener('click', function() {
currentRotation += 90;
renderPage(currentPage);
});
document.addEventListener("keydown", (e) => {
if (e.shiftKey && e.code === 'ArrowUp') {
e.preventDefault();
currentRotation += 90;
renderPage(currentPage);
}
})
// Handle the click event for the zoom in button
zoomInButton.addEventListener('click', function() {
currentScale += 0.1;
renderPage(currentPage);
});
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.key === "=") {
currentScale += 0.1;
renderPage(currentPage);
}
})
// Handle the click event for the zoom out button
zoomOutButton.addEventListener('click', function() {
currentScale -= 0.1;
renderPage(currentPage);
});
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.key === "-") {
currentScale -= 0.1;
renderPage(currentPage);
}
})
// Handle the click event for the flip vertical button
flipVerticalButton.addEventListener('click', function() {
container.style.transform = `scaleY(${container.style.transform.includes('scaleY(-1)') ? '1' : '-1'})`;
container.style.float = "left";
});
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.shiftKey && e.key.toUpperCase() === "V") {
e.preventDefault();
container.style.transform = `scaleY(${container.style.transform.includes('scaleY(-1)') ? '1' : '-1'})`;
container.style.float = "left";
}
})
// Handle the click event for the flip horizontal button
flipHorizontalButton.addEventListener('click', function() {
container.style.transform = `scaleX(${container.style.transform.includes('scaleX(-1)') ? '1' : '-1'})`;
container.style.float = "left";
});
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.shiftKey && e.key.toUpperCase() === "H") {
e.preventDefault();
container.style.transform = `scaleX(${container.style.transform.includes('scaleX(-1)') ? '1' : '-1'})`;
container.style.float = "left";
}
})
// Function to render a page
function renderPage(pageNumber) {
pdf.getPage(pageNumber).then(function(page) {
var viewport = page.getViewport({scale: currentScale, rotation: currentRotation});
if (flipVertical || flipHorizontal) {
var transform = [1, 0, 0, 1, 0, 0];
if (flipVertical) {
transform[3] = -1;
transform[5] = viewport.height;
}
if (flipHorizontal) {
transform[0] = -1;
transform[4] = viewport.width;
}
viewport.transform = transform;
}
/*var canvas = document.querySelector('canvas');*/
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
setTimeout(function() {
page.render(renderContext);
}, 100);
// Update the page info element
pageInfo.textContent = 'Page ' + pageNumber + ' of ' + pdf.numPages;
zoomInfo.textContent = 'Zoom ' + currentScale;
});
}
// Render the first page
renderPage(currentPage);
// Render highlight on the pdf canvas
initHighlight();
});
let ofTotal = JSON.parse(sessionStorage.getItem("dir_files")).length;
if (localStorage.getItem("prev") == 1) {
current_pdf = current_pdf - 1;
} else {
current_pdf = current_pdf + 1;
}
document.getElementById("totalPageValue").innerHTML = current_pdf + ' of ' + ofTotal;
// Render the first page
renderPage(currentPage);
// Render highlight on the pdf canvas
initHighlight();
});
};
function addIcon(alt, iconDir){
const addIcon = document.createElement("img");
addIcon.classList.add("tiffViewerIcons");
addIcon.src = "/WebGde/assets/" + iconDir;
addIcon.alt = alt;
return addIcon;
}
function addIcon(alt, iconDir) {
const addIcon = document.createElement("img");
addIcon.classList.add("tiffViewerIcons");
addIcon.src = "/WebGde/assets/" + iconDir;
addIcon.alt = alt;
return addIcon;
}
\ No newline at end of file
WebGde/WebContent/src/sample_schema/Speed Test Application Form schema (1).json 0 → 100644
{
"APPLICATION_FORM":
{
"SECTION1":
{
"Date":
{
"fieldLabel": "Date",
"aka": "field2",
"validation":
{
"fieldLength": 20,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Position Applied For":
{
"fieldLabel": "Pos Applied For",
"aka": "field3",
"validation":
{
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Surname":
{
"fieldLabel": "Surname",
"aka": "field4",
"validation":
{
"fieldLength": 50,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"First Name":
{
"fieldLabel": "First Name",
"aka": "field5",
"validation":
{
"fieldLength": 50,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Middle Name":
{
"fieldLabel": "Mid Name",
"aka": "field6",
"validation":
{
"fieldLength": 50,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Mother's Maiden Name":
{
"fieldLabel": "Mother's Maiden Name",
"aka": "field7",
"validation":
{
"fieldLength": 100,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Nickname":
{
"fieldLabel": "Nickname",
"aka": "field8",
"validation":
{
"fieldLength": 20,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Email Address":
{
"fieldLabel": "Email",
"aka": "field9",
"validation":
{
"fieldLength": 50,
"collection": "alphanumeric",
"mandatory": false
}
},
"Mobile Number":
{
"fieldLabel": "Mobile No.",
"aka": "field10",
"validation":
{
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Telephone Number":
{
"fieldLabel": "Tel. No.",
"aka": "field11",
"validation":
{
"fieldLength": 20,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Present Address House No":
{
"fieldLabel": "Pres Add House No",
"aka": "field13",
"validation":
{
"fieldLength": 20,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Present Address Street":
{
"fieldLabel": "Pres Add Street",
"aka": "field14",
"validation":
{
"fieldLength": 30,
"collection": "alphanumeric",
"mandatory": false
}
},
"Present Address Village/Subd":
{
"fieldLabel": "Pres Add Vill/Subd",
"aka": "field15",
"validation":
{
"fieldLength": 50,
"collection": "alphanumeric",
"invalidchar": "`",
"mandatory": false
}
},
"Present Address Municipality/City/Province":
{
"fieldLabel": "Pres Add Mun/City/Prov",
"aka": "field16",
"validation":
{
"fieldLength": 60,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Years of Stay":
{
"fieldLabel": "Yrs of Stay",
"aka": "field17",
"validation":
{
"fieldLength": 3,
"collection": "numeric",
"mandatory": false
}
},
"Provincial Address House No":
{
"fieldLabel": "Prov Add House No",
"aka": "field19",
"validation":
{
"fieldLength": 20,
"collection": "alphanumeric",
"invalidchar": "`",
"mandatory": false
}
},
"Provincial Address Street":
{
"fieldLabel": "Prov Add Street",
"aka": "field20",
"validation":
{
"fieldLength": 30,
"collection": "alphanumeric",
"mandatory": false
}
},
"Provincial Address Village/Subd":
{
"fieldLabel": "Prov Add Vill/Subd",
"aka": "field21",
"validation":
{
"fieldLength": 50,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Provincial Address Municipality/City/Province":
{
"fieldLabel": "Prov Add Mun/City/Prov",
"aka": "field22",
"validation":
{
"fieldLength": 60,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Religion":
{
"fieldLabel": "Religion",
"aka": "field23",
"validation":
{
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Place of Birth":
{
"fieldLabel": "Place of Birth",
"aka": "field24",
"validation":
{
"fieldLength": 50,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Date of Birth":
{
"fieldLabel": "Date of Birth",
"aka": "field25",
"validation":
{
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Age":
{
"fieldLabel": "Age",
"aka": "field26",
"validation":
{
"fieldLength": 3,
"collection": "numeric",
"mandatory": false
}
},
"Gender":
{
"fieldLabel": "Gender",
"aka": "field27",
"validation":
{
"fieldLength": 10,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Civil Status":
{
"fieldLabel": "Civil Status",
"aka": "field28",
"validation":
{
"fieldLength": 10,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Nationality":
{
"fieldLabel": "Nationality",
"aka": "field29",
"validation":
{
"fieldLength": 20,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"SSS Number":
{
"fieldLabel": "SSS No",
"aka": "field30",
"validation":
{
"fieldLength": 20,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"TIN":
{
"fieldLabel": "TIN",
"aka": "field31",
"validation":
{
"fieldLength": 20,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Commmunity Tax Number":
{
"fieldLabel": "Comm Tax No",
"aka": "field32",
"validation":
{
"fieldLength": 20,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Place of Issue":
{
"fieldLabel": "Place of Issue",
"aka": "field33",
"validation":
{
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Date of Issue":
{
"fieldLabel": "Date of Issue",
"aka": "field34",
"validation":
{
"fieldLength": 25,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Height":
{
"fieldLabel": "Height",
"aka": "field35",
"validation":
{
"fieldLength": 10,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Weight":
{
"fieldLabel": "Weight",
"aka": "field36",
"validation":
{
"fieldLength": 10,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Spoken Languages":
{
"fieldLabel": "Spoken Languages",
"aka": "field38",
"validation":
{
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
},
"Written Languages":
{
"fieldLabel": "Written Languages",
"aka": "field39",
"validation":
{
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "",
"mandatory": false
}
}
}
}
}
WebGde/WebContent/src/submit/submit.js
......@@ -78,9 +78,7 @@ const submitForm = (e) => {
});
document.getElementById("counter").innerHTML = "";
clearTimeout(interval);
/*sessionStorage.removeItem("section");
sessionStorage.removeItem("doctype");*/
isCanvasNotCreated = true;
isCanvasNotCreated = true;
if(IS_RETRIEVE_FROM_GFS != "Y"){
init();
......
WebGde/WebContent/src/tiffViewer/tiffViewer.js
......@@ -634,23 +634,24 @@ function TIFFViewer(xhr, TiffViewerImageName) {
//Set Style per button click
function Edited() {
var TiffViewer_imgclass = document.getElementById("TiffViewer_FileContainer");
var TiffViewer_Screen = document.getElementById("TiffViewer_Screen");
const TiffViewer_Screen = document.getElementById("TiffViewer_Screen");
var TiffViewer_ImageContainer = document.getElementById("TiffViewer_ImageContainer");
var image = document.getElementById(filenameWithoutExt+`${TiffViewer_current}`);
image.style.display = "flex";
//if the image is rotated 90 degrees
if (rot[TiffViewer_current - 1] == 90 || rot[TiffViewer_current - 1] == 270 || rot[TiffViewer_current - 1] == -90 || rot[TiffViewer_current - 1] == -270) {
image.style = `display: flex;
image.style = `
width: ${setwidth + wzoom[TiffViewer_current - 1]};
height: ${setheight + hzoom[TiffViewer_current - 1]};
border: 0px groove white;
transform: rotate(${rot[TiffViewer_current - 1]}deg) scaleX(${flippedX[TiffViewer_current - 1]}) scaleY(${flippedY[TiffViewer_current - 1]});`;
image.style = `display: flex;
image.style = `
width: ${setwidth + wzoom[TiffViewer_current - 1]};
height: ${setheight + hzoom[TiffViewer_current - 1]};
border: 0px groove white;
-ms-transform: rotate(${rot[TiffViewer_current - 1]}deg) scaleX(${flippedX[TiffViewer_current - 1]}) scaleY(${flippedY[TiffViewer_current - 1]});`; // IE
image.style = `display: flex;
image.style = `
width: ${setwidth + wzoom[TiffViewer_current - 1]};
height: ${setheight + hzoom[TiffViewer_current - 1]};
border: 0px groove white;
......@@ -676,17 +677,17 @@ function TIFFViewer(xhr, TiffViewerImageName) {
width = TiffViewer_Screen.clientHeight;
height = TiffViewer_Screen.clientWidth;
} else {
image.style = `display: flex;
image.style = `
width: ${setwidth + wzoom[TiffViewer_current - 1]};
height: ${setheight + hzoom[TiffViewer_current - 1]};
border: 0px groove white;
transform: rotate(${rot[TiffViewer_current - 1]}deg) scaleX(${flippedX[TiffViewer_current - 1]}) scaleY(${flippedY[TiffViewer_current - 1]});`;
image.style = `display: flex;
image.style = `
width: ${setwidth + wzoom[TiffViewer_current - 1]};
height: ${setheight + hzoom[TiffViewer_current - 1]};
border: 0px groove white;
-ms-transform: rotate(${rot[TiffViewer_current - 1]}deg) scaleX(${flippedX[TiffViewer_current - 1]}) scaleY(${flippedY[TiffViewer_current - 1]});`; // IE
image.style = `display: flex;
image.style = `
width: ${setwidth + wzoom[TiffViewer_current - 1]};
height: ${setheight + hzoom[TiffViewer_current - 1]};
border: 0px groove white;
......
WebGde/WebContent/style.css
......@@ -756,7 +756,7 @@ vertical-align: middle;
.pageButtonInfoContainer {
position: absolute;
right: 0px;
right: 44px;
margin-right: 8vw;
}
......
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