Skip to content

W
web-ui
Commit 071dfd76 by Jorem Magcawas
Options

commit latest merge with ui update

parent 2d0d71a0
Showing with 700 additions and 181 deletions
WebGde/WebContent/config.js
......@@ -22,7 +22,7 @@
// schema with 5 fields and all possible collections
//const SCHEMA_FILE = "./src/sample_schema/5_field_schema.json"
var SCHEMA_FILE = "./src/sample_schema/Speed Test Application Form schema.json"
var SCHEMA_FILE = "./src/sample_schema/HR Speed Test schema.json"
// const SCHEMA_FILE = "./src/sample_schema/Sample_Schema.json"
......
WebGde/WebContent/index.html
......@@ -43,66 +43,7 @@
</script> -->
<body>
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 350px;
height: 230px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: -240px;
left: 50%;
margin-left:0;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 0px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
<div id="no-config" style="display:none"> There is no config file found</div>
<div id="with-config" style="display:grid">
<!-- Creates the right pane of the window -->
......@@ -124,27 +65,28 @@
<!-- Space for the fields -->
<!-- <div class="sidebar" id="fields"> </div> -->
<div id='refreshBtn'>
<div id="help" class="popup" onclick="myFunction()">Help
<span class="popuptext" id="myPopup">
Fit Content -> SHIFT F<br>
Flip Horizontally -> CTRL SHIFT H<br>
Flip Vertically -> CTRL SHIFT V<br>
Rotate to right -> SHIFT PAGE UP<br>
Rotate to left -> SHIFT PAGE DOWN<br>
Zoom in -> CTRL +<br>
Zoom out -> CTRL -<br>
Previous -> F11<br>
Next -> F12<br>
Scroll Image to the Left -> CTRL LEFT ARROW<br>
Scroll Image to the Right -> CTRL RIGHT ARROW<br>
Scroll Up Image -> CTRL UP ARROW<br>
Scroll Down Image -> CTRL DOWN ARROW<br>
</span>
<div id="help" class="popup" onclick="myFunction()">i
<div class="popuptext" id="myPopup">
•Fit Content -> SHIFT F<br>
•Flip Horizontally -> CTRL SHIFT H<br>
•Flip Vertically -> CTRL SHIFT V<br>
•Rotate to right -> SHIFT PAGE UP<br>
•Rotate to left -> SHIFT PAGE DOWN<br>
•Zoom in -> CTRL +<br>
•Zoom out -> CTRL -<br>
•Previous -> F11<br>
•Next -> F12<br>
•Scroll Image to the Left -> CTRL LEFT ARROW<br>
•Scroll Image to the Right -> CTRL RIGHT ARROW<br>
•Scroll Up Image -> CTRL UP ARROW<br>
•Scroll Down Image -> CTRL DOWN ARROW<br>
</div>
</div>
<div id="usernameCont" class="popup" onclick="toggleLogout()">
<span id="userNameValue"></span>
<div id="userNameValue"></div>
<div id="popupLogout" class="popupLogoutText" onclick="createEndSessionWindow()"></div>
<!-- <div id="usernameCont" class="popup" onclick="toggleLogout()">
<span id="popupLogout" class="popupLogoutText"><button id='endBtn'>End Session</button></span>
</div>
</div> -->
<!-- <button id='refresh'>Refresh</button> -->
</div>
<div id='pauseBtn'>
......@@ -161,7 +103,7 @@
<button id="prev">PREV</button>
<button id="next">NEXT</button>
</div> -->
<form id='fields' autocomplete="off" style="display: flex; flex-direction:column;"
<form id='fields' autocomplete="off"
onsubmit="submitForm(event);return false"></form>
<div id='returnDiv'>
<!-- <button id='return'>Return</button>
......@@ -189,6 +131,17 @@
<div id="TiffViewerModal">
<div id="TiffModalHeader">
<!-- CHANGED: commented out close button, to avoid closing the modal -->
<!-- <span class="TiffModalClose">&times;</span> -->
</div>
<div id='prevDivContainer' title="previous">
<div id='prevDiv'>
<div id="prev"></div>
</div>
</div>
<!-- Modal content -->
<div class="TiffModalContent">
<div class="bar">
......@@ -196,27 +149,42 @@
<div id="status">&nbsp;</div>
<h3 id="progress">&nbsp;</h3>
</div>
<div id="TiffModalFooter">
<div id="TiffModalBody">
</div>
<div id="TiffModalHeader">
<!-- CHANGED: commented out close button, to avoid closing the modal -->
<!-- <span class="TiffModalClose">&times;</span> -->
<div >
</div>
<div id="TiffModalBody">
<div >
</div>
<div id='nextDiv'>
<button id="prev">prev</button>
<button id="next">next</button>
</div>
<div id='TiffButtonRight'>
<button id='refresh'>Ref</button>
<button id='pause'>Pau</button>
<button id='return'>Ret</button>
<button id='reject'>Rej</button>
</div>
<div >
</div>
<div id="TiffButtonRight">
<div id="refresh"></div>
<div id="pause"></div>
<div id="return"></div>
<div id="reject"></div>
</div>
<div id="TiffModalFooter">
</div>
</div>
<div id='nextDivContainer' title="next">
<div id='nextDiv'>
<div id="next"></div>
</div>
</div>
</div>
<!-- <img src="" id="tableBanner" />
......@@ -245,14 +213,55 @@
<script src="./src/accessFile/accessFile.js"></script>
<script>
document.getElementById("next").addEventListener('click',
const TiffViewer_refresh = document.getElementById("refresh");
TiffViewer_refresh.title = "refresh";
TiffViewer_refresh.classList.add("buttonRightClass")
const refreshIcon = document.createElement("img");
refreshIcon.classList.add("refresh");
refreshIcon.classList.add("tiffViewerIcons");
refreshIcon.src = "/WebGde/assets/refresh_icon.png";
refreshIcon.alt = "refresh";
const TiffViewer_pause = document.getElementById("pause");
TiffViewer_pause.title = "pause";
TiffViewer_pause.classList.add("buttonRightClass")
const pauseIcon = document.createElement("img");
pauseIcon.classList.add("tiffViewerIcons");
pauseIcon.src = "/WebGde/assets/pause_icon.png";
pauseIcon.alt = "refresh";
const TiffViewer_return = document.getElementById("return");
TiffViewer_return.title = "return";
TiffViewer_return.classList.add("buttonRightClass")
const returnIcon = document.createElement("img");
returnIcon.classList.add("tiffViewerIcons");
returnIcon.src = "/WebGde/assets/return_icon.png";
returnIcon.alt = "refresh";
const TiffViewer_reject = document.getElementById("reject");
TiffViewer_reject.title = "reject";
TiffViewer_reject.classList.add("buttonRightClass")
const rejectIcon = document.createElement("img");
rejectIcon.classList.add("tiffViewerIcons");
rejectIcon.src = "/WebGde/assets/reject_icon.png";
rejectIcon.alt = "refresh";
TiffViewer_refresh.append(refreshIcon)
TiffViewer_pause.append(pauseIcon)
TiffViewer_return.append(returnIcon)
TiffViewer_reject.append(rejectIcon)
document.getElementById("nextDiv").addEventListener('click',
function() {
const fieldForm = document.getElementById("fields");
fieldForm.querySelector('input[type="submit"]').click()
}
);
document.getElementById("prev").addEventListener('click',
document.getElementById("prevDiv").addEventListener('click',
function() {
localStorage.setItem("prev", "1");
const fieldForm = document.getElementById("fields");
......
WebGde/WebContent/src/BPO/rejectElement.js
......@@ -57,51 +57,127 @@ async function rejectElement() {
alert(`Error ${response.status}: Rejecting element`);
}
}
createRejectWindow(); //window for reason rejecting element
//window for reason rejecting element
var rejectButton = document.getElementById('reject');
rejectButton.onclick = function () {
let screenMain = document.getElementById('parent_Window');
screenMain.style.display = 'block';
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){
let screenMain = document.getElementById('parent_Window');
screenMain.style.display = 'block';
createRejectWindow();
rejectButton.disabled = true;
}
});
function createRejectWindow(){
let popUpDisplay = document.createElement("div");
popUpDisplay.classList.add("genericPopup")
let screenMain = document.createElement('div');
screenMain.id = 'parent_Window';
screenMain.style.display = 'none';
screenMain.classList.add('parent_Window');
document.body.appendChild(screenMain);
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)));
}
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('text-area'));
screenMain.appendChild(okCancelButton());
//set radio button text area value
screenMain.appendChild(createMessageBox('MssgBox'));
screenMain.appendChild(buttonPanel);
setRadioHandler('MssgBox');
okButton.onclick = function () {
saveExceptionToXml();//save xml
rejectElement();//reject on bpo
screenMain.style.display = 'none';
rejectButton.disabled = false;
popUpDisplay.remove();
}
cancelButton.onclick = function () {
popUpDisplay.remove();
rejectButton.disabled = false;
}
popUpDisplay.append(screenMain);
document.body.append(popUpDisplay);
}
function setRadioHandler(id){
var addressOther = document.querySelectorAll('input[name="rejectRadio"]');
var addressField = document.getElementById(id);
var tempAddress = "";
for (var i = 0; i < addressOther.length; i++) {
addressOther[i].addEventListener("change", addressHandler);
}
function addressHandler() {
if (this.id == "check5") {
addressField.disabled = false;
addressField.value = tempAddress;
} else {
tempAddress = addressField.value;
addressField.value = "";
addressField.disabled = true;
}
}
//set radio button text area value
let radioMessage = document.getElementById('check5');
let text = document.getElementById('text-area');
let text = document.getElementById('MssgBox');
radioMessage.value = text.value;
}
function checkLabelComponent(textLabel,inputval,checkboxId){
let checkBoxCont = document.createElement('div');
checkBoxCont.id = 'checkBoxCont';
......@@ -132,8 +208,9 @@ function checkLabelComponent(textLabel,inputval,checkboxId){
function okCancelButton(){
let screenMain = document.getElementById('parent_Window');
/*function okCancelButton(){
let genericPopup = document.getElementsByClassName("genericPopup")
.getElementById("genericPopup");
let buttonCont = document.createElement('div');
buttonCont.id = 'okCancelCont';
......@@ -165,6 +242,15 @@ function okCancelButton(){
return buttonCont;
}*/
function createButtonElem(className, buttonName, icon) {
/* let buttonElem = document.createElement("button"); */
let buttonElem;
buttonElem = document.createElement("button");
buttonElem.classList.add(className);
buttonElem.textContent = buttonName;
return buttonElem;
}
function saveExceptionToXml(){
......@@ -222,11 +308,11 @@ function saveExceptionToXml(){
function createMessageBox(id){
var mssgBox = document.createElement('textarea');
mssgBox.id = id;
mssgBox.name = "rejectRadio";
mssgBox.maxLength = "1000";
mssgBox.cols = "20";
mssgBox.rows = "5";
mssgBox.id = id;
mssgBox.rows = "5";
mssgBox.disabled = true;
mssgBox.onkeyup = function () {
let radioFive = document.getElementById('check5');
......@@ -235,25 +321,8 @@ function createMessageBox(id){
return mssgBox;
}
var addressOther = document.querySelectorAll('input[name="rejectRadio"]');
var addressField = document.getElementById('text-area');
var tempAddress = "";
for(var i = 0; i < addressOther.length; i++) {
addressOther[i].addEventListener("change", addressHandler);
}
function addressHandler() {
if(this.id == "check5") {
addressField.disabled = false;
addressField.value = tempAddress;
} else {
tempAddress = addressField.value;
addressField.value = "";
addressField.disabled = true;
}
}
async function updateXMLException(xmlData){
......
WebGde/WebContent/src/BPO/returnElement.js
......@@ -2,7 +2,7 @@ async function returnElementBPO(elementId) {
let response = await fetch(getUrlReturnElement(elementId), {method: "POST"});
if (response.status == 200) {
saveExceptionToXml();
returnSaveXML();
const indexedDB =
window.indexedDB ||
window.mozIndexedDB ||
......@@ -57,7 +57,7 @@ async function returnElementLogout(elementId) {
let response = await fetch(getUrlReturnElement(elementId), {method: "POST"});
if (response.status == 200) {
saveExceptionToXml();//save xml
returnSaveXML();//save xml
alert('Element Returned');
}else{
alert(`Error ${response.status}: Returning element`);
......@@ -68,11 +68,14 @@ async function returnElementLogout(elementId) {
}
var returnButton = document.getElementById('return');
returnButton.onclick = function () {
returnElementBPO(sessionStorage.getItem("element_id"));
returnButton.addEventListener("click", function () {
returnElementBPO(sessionStorage.getItem("element_id"));
// const fieldForm = document.getElementById("fields");
// fieldForm.querySelector('input[type="submit"]').click();
};
});
window.addEventListener('keydown', function(e) {
if (e.altKey == true && e.keyCode == 85){
......@@ -110,4 +113,56 @@ async function loadWaitingElement(){
alert(`Error ${element.errorCode}: Fetching waiting element`);
}
}
}
\ No newline at end of file
}
function returnSaveXML(){
var elementId = sessionStorage.getItem("element_id");
let doctype;
let section;
// Validate all elements again
for(let element of document.getElementById("fields").elements) {
if (element.style.display === 'none') continue
const { id, value,type } = element
const { valid } = validateInput(id, value)
// Skip submit button
if(type==='submit') continue
if(id==='DocType') {
doctype = element.options[element.selectedIndex].text;
continue;
}
if(id==='Section') {
section = element.options[element.selectedIndex].text;
continue;
}
}
let xmlData = {
"projCode": PROJECT_CODE,
"userId": sessionStorage.getItem("user_id"),
"elementId": elementId,
"schema": SCHEMA_FILE,
"totalRec": Dirfiles.length,
"maxRec": "1",
"totalKeystroke": 0,
"procTime": "",
"procDuration": 0,
"eob": "",
"exceptionRemark": "",
"recordNo": "1",
"totalSubRec": "1",
"maxSubRec": "1",
"imageName": File_Path,
"subRecordNo": "1",
"eor": "",
"fields": {},
"outputDir": sessionStorage.getItem("element_file_loc") + "/" + (ENCODING_PASS == "PASS1" ? elementId + ".DTA" : elementId + ".DTB"),
"doctype": doctype,
"section": section
}
updateXMLException(xmlData);
return false;
}
WebGde/WebContent/src/captureMetrics/captureMetrics.js
......@@ -69,6 +69,289 @@ const startMetricCapture = () => {
console.log(`key: ${key.key}; key_strokes: ${key_strokes}; time_spent: ${((Date.now() - time_start) / 1000) - time_pause_spent}`) // for demonstration purposes
}
let pause = document.getElementById("pause");
pause.onclick = (event) => {
console.log("pause");
pauseMetricCapture();
/*disableTiffButtons();*/
}
/*window.onclick = (event) => {
if (event.path[0].id == 'pause') {
pauseMetricCapture();
disableTiffButtons();
}
}*/
showMetricCapture();
}
function searchStringInArray(str, strArray) {
for (var j = 0; j < strArray.length; j++) {
if (strArray[j] == str) return true;
}
return false;
}
const stopMetricCapture = () => {
const time_end = Date.now()
time_spent = (time_end - time_start) / 1000 // time spend in seconds
const rate = (key_strokes / time_spent) * 3600 // key strokes made per hour
return {
key_strokes,
time_spent,
rate
}
}
let interval = null;
const showMetricCapture = () => {
const obj = document.getElementById("counter");
if (key_strokes != 0) {
let time_spent = ((Date.now() - time_start) / 1000) - time_pause_spent;
let rate = ((key_strokes / time_spent) * 3600).toFixed(0);
rate >= ALLOWED_KPH ? obj.className = "green" : obj.className = "red";
obj.innerHTML = (rate < 0 ? 0 : rate) + " kph"; // immediately apply start value
}
interval = setTimeout(showMetricCapture, 1000);
}
const saveMetrics = async (metrics, eoe_ts) => {
try {
eoe_ts = formatDate(eoe_ts);
let rows = new Array();
if (sessionStorage.getItem('csv') === null) {
rows.push(csv_header);
rows.push([1, escapeCSV(File_Path.replace(/^.*[\\\/]/, '')), metrics.rate, eoe_ts, metrics.rate]);
} else {
rows = JSON.parse(sessionStorage.getItem('csv'));
let size = rows.length - 1;
let last = rows[size];
let avg = last[last.length - 1];
let newAvg = ((avg * size) + metrics.rate) / (size + 1);
rows.push([(size + 1), escapeCSV(File_Path.replace(/^.*[\\\/]/, '')), metrics.rate, eoe_ts, newAvg]);
}
var myFile = new File(
[(rows.map(e => e.join(",")).join("\n"))],
sessionStorage.getItem('user_id') + '_Metrics_' + (new Date()).toISOString().slice(0, 10).replace(/-/g, "") + ".csv",
{ type: "text/plain;charset=utf-8" }
);
let formData = new FormData();
formData.append("file", myFile);
let data = {};
data.metrics_dir = METRIC_FILES;
// sessionStorage.getItem('outputMetricsDir') == null ? data.outputDir = null : data.outputDir = sessionStorage.getItem('outputMetricsDir');
// formData.append("data", JSON.stringify(data));
// const outputMetricsDir = await fetch('./src/captureMetrics/saveMetrics.php', {
// method: "POST",
// body: formData
var myObject = {
"metrics_dir": sessionStorage.getItem("element_file_loc"),
"file_name" : sessionStorage.getItem('user_id') + '_Metrics_' + (new Date()).toISOString().slice(0, 10).replace(/-/g, "") + ".csv",
"metrics_rate" : metrics.rate,
"eoe_ts" : eoe_ts
};
fetch(urlWriteMetrics, {
method: 'POST',
headers: {
'Content-Type':'application/json'
},
body: JSON.stringify(myObject)
});
// sessionStorage.setItem('outputMetricsDir', await outputMetricsDir.text());
// sessionStorage.setItem('csv', JSON.stringify(rows));
} catch (Err) {
console.log("Error: " + Err.description);
}
}
const escapeCSV = (filename) => {
return filename.includes(",") ? '"' + filename + '"' : filename;
}
const pauseMetricCapture = () => {
time_pause = Date.now();
hideImage();
disableForm();
promptPaused();
clearTimeout(interval);
temp = key_strokes;
// unpauseMetricCapture();
// alert("PAUSED");
}
const unpauseMetricCapture = () => {
time_pause_spent += (Date.now() - time_pause) / 1000;
time_pause = 0;
unhideImage();
enableForm();
key_strokes = temp;
showMetricCapture();
}
const hideImage = () => {
var tiffbody = document.getElementById("TiffModalBody");
tiffbody.style.opacity = 0;
}
const unhideImage = () => {
var tiffbody = document.getElementById("TiffModalBody");
tiffbody.style.opacity = 1;
}
function promptPaused() {
var promptMain = document.createElement('div');
promptMain.classList.add("genericPopup");
promptMain.setAttribute("id", "prompt");
let pauseDiv = document.createElement('div');
pauseDiv.classList.add("parent_Window");
var pauseLabel = document.createElement('div');
pauseLabel.textContent = 'Session Paused';
var okButton = document.createElement('div');
okButton.id = "continue";
okButton.classList.add("normalButton");
okButton.textContent = 'continue';
pauseDiv.append(pauseLabel);
pauseDiv.append(okButton);
promptMain.appendChild(pauseDiv);
document.body.append(promptMain);
okButton.addEventListener("click", function () {
promptMain.remove();
unpauseMetricCapture();
});
}
function disableForm() {
var pbutton = document.getElementById("pause");
pbutton.disabled = true;
var form = document.getElementById("fields");
var elements = form.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].disabled = true;
// elements[i].style.backgroundColor = "gray";
}
}
function enableForm() {
var pbutton = document.getElementById("pause");
pbutton.disabled = false;
var form = document.getElementById("fields");
var elements = form.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].disabled = false;
// elements[i].style.backgroundColor = "white";
}
}
const formatDate = (date) => {
return date.replace(",", "");
}
function saveTime(json) {
let formData = new FormData();
formData.append("data", JSON.stringify(json));
fetch('./src/captureMetrics/saveGlobalTime.php', {
method: "POST",
body: formData
});
let global_start_time = 0
let global_end_time = 0
let key_strokes = 0
let time_spent = 0
let time_start = 0
let time_pause = 0
let time_pause_spent = 0
let metrics_file_name;
const conflicts = ['F', 'f', 'alphabet', 'alphanumeric']
const shift_shortcuts = ['f', 'F']
const ctrl_shortcuts = ['PageUp', 'PageDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', '-', '=']
const ctrl_shift_shortcuts = ['v', 'h', 'V', 'H']
const shortcut_triggers = ['Shift', 'Control']
let shortcut_flag = false
const csv_header = ['record_no', 'filename', 'speed', 'eoe_timestamp', 'avg_speed'];
let temp;
const keyArray = INVALID_KEYS.split(",");
const startMetricCapture = () => {
// reset key strokes
key_strokes = 0
time_start = Date.now()
if (global_start_time == 0) {
global_start_time = new Date().toLocaleString();
}
time_pause_spent = 0
console.log(`Metric Capture Started
Key strokes: ${key_strokes}
Start of encoding time: ${time_start}
Total time spent encoding: ${time_spent}`) // for demonstration purposes
window.onkeyup = (key) => {
const onfocus = document.activeElement
if (shortcut_flag && shortcut_triggers.includes(key.key)) {
if (!key.ctrlKey && !key.shiftKey) { // will disregard key up event on shift or ctrl right after a short cut key combination
console.log('Shortcut trigger lifted') // for demonstration purposes
shortcut_flag = false
}
return
}
if ((key.shiftKey && shift_shortcuts.includes(key.key)) || // shift shortcut
(key.ctrlKey && ctrl_shortcuts.includes(key.key))) { // ctrl shortcut
if (onfocus.nodeName !== 'INPUT' ||
!conflicts.includes(key.key)) { // ignore shortcuts with conflict if triggered inside input field
console.log('Shortcut Triggered') // for demonstration purposes
shortcut_flag = true
return
}
}
if (key.shiftKey && key.ctrlKey && ctrl_shift_shortcuts.includes(key.key)) {
console.log('Shortcut Triggered') // for demonstration purposes
shortcut_flag = true
return
}
if (searchStringInArray(`${key.key}`, keyArray) == true || key.ctrlKey && key.key) {
console.log('key invalid');
} else {
key_strokes++
}
console.log(`key: ${key.key}; key_strokes: ${key_strokes}; time_spent: ${((Date.now() - time_start) / 1000) - time_pause_spent}`) // for demonstration purposes
}
document.getElementById("pause").addEventListener('click',
function() {
pauseMetricCapture();
......@@ -276,4 +559,5 @@ function saveTime(json) {
method: "POST",
body: formData
});
}
\ No newline at end of file
}
}
WebGde/WebContent/src/endSession/endSession.js
......@@ -19,18 +19,21 @@ function checkForm(form){
if(inputsBlankCount==0 && selectsBlankCount==0) return true;
}
endButton.addEventListener("click", function(){
/*endButton.addEventListener("click", function(){
let endWindow = document.getElementById('end_window');
endWindow.style.display = 'block';
});
createEndSessionWindow();
*/
function createEndSessionWindow(){
let overlay = document.createElement("div");
overlay.classList.add("genericPopup");
let endWindow = document.createElement('div');
endWindow.id = 'end_window';
endWindow.style.display = 'none';
document.body.appendChild(endWindow);
endWindow.classList.add("parent_Window")
let endBodyDiv = document.createElement('div');
endBodyDiv.id = 'endBodyDiv';
......@@ -43,6 +46,7 @@ function createEndSessionWindow(){
endOkCnclDiv.id = 'endOkCnclCont';
let okEnd = document.createElement('button');
okEnd.classList.add("emphasizeButton");
okEnd.innerHTML = 'ok';
okEnd.id = 'okEndButtn';
okEnd.onclick = async function () {
......@@ -63,7 +67,7 @@ function createEndSessionWindow(){
let returnElem = await returnElementLogout(sessionStorage.getItem("element_id"));
if( returnElem == 200){
saveExceptionToXml();
returnSaveXML();
endWindow.style.display = 'none';
localStorage.clear();
sessionStorage.clear();
......@@ -79,11 +83,10 @@ function createEndSessionWindow(){
}
let cancelEnd = document.createElement('button');
cancelEnd.classList.add("normalButton");
cancelEnd.innerHTML = 'cancel';
cancelEnd.id = 'cnclEndButton';
cancelEnd.onclick = function () {
endWindow.style.display = 'none';
}
endOkCnclDiv.appendChild(okEnd);
endOkCnclDiv.appendChild(cancelEnd);
......@@ -95,4 +98,14 @@ function createEndSessionWindow(){
endWindow.appendChild(endBodyDiv);
cancelEnd.addEventListener("click", function () {
overlay.remove();
});
overlay.append(endWindow);
document.body.append(overlay);
}
WebGde/WebContent/src/getFields/getFields.js
......@@ -17,18 +17,35 @@
* @returns
*/
let getDocType;
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")
let logoutIcon = document.createElement("img");
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);
}
let div = document.getElementById(parentID)
if(!div) return { valid: false, error: `Element with ID '${parentID}' not found` }
clearFields(parentID) // make sure input fields are clear
await fetchSchema();
console.log(schema);
let doctype = sessionStorage.getItem('doctype');
let section = sessionStorage.getItem('section');
......@@ -49,10 +66,10 @@ const displayFields = async (parentID) => {
createSection('Section', div, doctypes, key);
div = deconstruct(doctypes[key], div, key)
const submit = document.createElement('input')
/* const submit = document.createElement('input')
submit.className = key;
submit.type = 'submit'
div.appendChild(submit)
div.appendChild(submit)*/
return false;
}
}
......@@ -105,6 +122,11 @@ const displayFields = async (parentID) => {
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'
......
WebGde/WebContent/src/tiffViewer/tiffViewer.js
......@@ -111,10 +111,10 @@ function TIFFViewer(xhr, TiffViewerImageName) {
TiffViewer_detailcont.id = "TiffViewerDetailscontainer";
TiffViewer_detailcont.classList.add("TiffViewercontainer");
const TiffViewer_filedetail = document.createElement('p');
const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.style.display = "none";
TiffViewer_filedetail.innerHTML = "Filename: ";
TiffViewer_filedetail.textContent = "Filename: ";
const TiffViewer_pagedetail = document.createElement('p');
TiffViewer_pagedetail.id = "TiffViewer_PageCount";
......@@ -135,35 +135,72 @@ function TIFFViewer(xhr, TiffViewerImageName) {
TiffViewer_btncont.id = "TiffViewer_ButtonContainer";
TiffViewer_btncont.classList.add("TiffViewercontainer");
const TiffViewer_hflip = document.createElement("button");
const TiffViewer_hflip = document.createElement("div");
TiffViewer_hflip.id = "TiffViewer_FlipX";
TiffViewer_hflip.classList.add("TiffViewer_ButtonClass");
TiffViewer_hflip.innerHTML = "fh";
TiffViewer_hflip.title = "Horizontal Flip";
const hflipIcon = document.createElement("img");
hflipIcon.classList.add("tiffViewerIcons");
hflipIcon.src = "/WebGde/assets/flip_horizontal_icon.png";
hflipIcon.alt = "horizontal-flip";
const TiffViewer_vflip = document.createElement("button");
const TiffViewer_vflip = document.createElement("div");
TiffViewer_vflip.id = "TiffViewer_FlipY";
TiffViewer_vflip.classList.add("TiffViewer_ButtonClass");
TiffViewer_vflip.innerHTML = "fv";
TiffViewer_vflip.title = "Vertical Flip"
const vflipIcon = document.createElement("img");
vflipIcon.classList.add("tiffViewerIcons");
vflipIcon.src = "/WebGde/assets/flip_vertical_icon.png";
vflipIcon.alt = "vertical-flip";
const TiffViewer_Rrotate = document.createElement("button");
const TiffViewer_Rrotate = document.createElement("div");
TiffViewer_Rrotate.id = "TiffViewer_RotateR";
TiffViewer_Rrotate.classList.add("TiffViewer_ButtonClass");
TiffViewer_Rrotate.innerHTML = "rr";
TiffViewer_Rrotate.title = "Rotate Right"
const RrotateIcon = document.createElement("img");
RrotateIcon.classList.add("tiffViewerIcons");
RrotateIcon.src = "/WebGde/assets/rotate_right_icon.png";
RrotateIcon.alt = "rotate-right";
const TiffViewer_Lrotate = document.createElement("button");
const TiffViewer_Lrotate = document.createElement("div");
TiffViewer_Lrotate.id = "TiffViewer_RotateL";
TiffViewer_Lrotate.classList.add("TiffViewer_ButtonClass");
TiffViewer_Lrotate.innerHTML = "rl";
TiffViewer_Lrotate.title = "Rotate Left"
const LrotateIcon = document.createElement("img");
LrotateIcon.classList.add("tiffViewerIcons");
LrotateIcon.src = "/WebGde/assets/rotate_left_icon.png";
LrotateIcon.alt = "rotate-left";
const TiffViewer_Pzoom = document.createElement("button");
TiffViewer_Pzoom.id = "TiffViewer_ZoomP";
TiffViewer_Pzoom.classList.add("TiffViewer_ButtonClass");
TiffViewer_Pzoom.innerHTML = "+";
const TiffViewer_Mzoom = document.createElement("button");
TiffViewer_Mzoom.id = "TiffViewer_ZoomM";
TiffViewer_Mzoom.classList.add("TiffViewer_ButtonClass");
TiffViewer_Mzoom.innerHTML = "-";
const TiffViewer_zoomIn = document.createElement("div");
TiffViewer_zoomIn.id = "TiffViewer_ZoomP";
TiffViewer_zoomIn.classList.add("TiffViewer_ButtonClass");
TiffViewer_zoomIn.title = "Zoom In";
const zoomInIcon = document.createElement("img");
zoomInIcon.classList.add("tiffViewerIcons");
zoomInIcon.src = "/WebGde/assets/zoom_in_icon.png";
zoomInIcon.alt = "zoom-in";
const TiffViewer_zoomOut = document.createElement("div");
TiffViewer_zoomOut.id = "TiffViewer_ZoomM";
TiffViewer_zoomOut.classList.add("TiffViewer_ButtonClass");
TiffViewer_zoomOut.title = "Zoom Out";
const zoomOutIcon = document.createElement("img");
zoomOutIcon.classList.add("tiffViewerIcons");
zoomOutIcon.src = "/WebGde/assets/zoom_out_icon.png";
zoomOutIcon.alt = "zoom-out";
const TiffViewer_Pbtn = document.createElement("button");
TiffViewer_Pbtn.id = "TiffViewer_PrevButton";
......@@ -177,27 +214,59 @@ function TIFFViewer(xhr, TiffViewerImageName) {
TiffViewer_Nbtn.innerHTML = ">";
TiffViewer_Nbtn.style.display = "none";
const TiffViewer_Fscrn = document.createElement("button");
const TiffViewer_Fscrn = document.createElement("div");
TiffViewer_Fscrn.id = "TiffViewer_FullscreenButton";
TiffViewer_Fscrn.classList.add("TiffViewer_ButtonClass");
TiffViewer_Fscrn.innerHTML = "fs";
TiffViewer_Fscrn.title = "Fullscreen";
const FscrnIcon = document.createElement("img");
FscrnIcon.classList.add("tiffViewerIcons");
FscrnIcon.src = "/WebGde/assets/fullscreen_icon.png";
FscrnIcon.alt = "full-screen";
const TiffViewer_Fit = document.createElement("button");
const TiffViewer_Fit = document.createElement("div");
TiffViewer_Fit.id = "TiffViewer_FitButton";
TiffViewer_Fit.classList.add("TiffViewer_ButtonClass");
TiffViewer_Fit.innerHTML = "fc";
TiffViewer_Fit.style.display = "none";
TiffViewer_Fit.title = "FitContent";
const FitIcon = document.createElement("img");
FitIcon.classList.add("tiffViewerIcons");
FitIcon.src = "/WebGde/assets/full_content_icon.png";
FitIcon.alt = "full-screen";
const zoom = document.createElement("div");
zoom.style.position = "absolute";
zoom.style.right = -30;
zoom.style.top = -28;
zoom.classList.add("viewerSizeLabel");
let ofTotal = JSON.parse(sessionStorage.getItem("dir_files")).length;
document.getElementById("totalPageValue").innerHTML = Current_page + ' of ' + ofTotal;
//append all content declarations to modal
TiffViewer_Fit.append(FitIcon)
TiffViewer_Fscrn.append(FscrnIcon)
TiffViewer_zoomOut.append(zoomOutIcon)
TiffViewer_zoomIn.append(zoomInIcon)
TiffViewer_Lrotate.append(LrotateIcon)
TiffViewer_Rrotate.append(RrotateIcon)
TiffViewer_hflip.append(hflipIcon)
TiffViewer_vflip.append(vflipIcon)
TiffViewer_Header.append(TiffViewer_detailcont);
TiffViewer_Body.append(TiffViewer_filecont);
TiffViewer_Footer.append(zoom, TiffViewer_btncont);
......@@ -205,7 +274,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
TiffViewer_detailcont.append(TiffViewer_filedetail, TiffViewer_pagedetail);
TiffViewer_filecont.appendChild(TiffViewer_scrncont);
TiffViewer_scrncont.appendChild(TiffViewer_imgcont);
TiffViewer_btncont.append(TiffViewer_Fscrn, TiffViewer_Fit, TiffViewer_hflip, TiffViewer_vflip, TiffViewer_Rrotate, TiffViewer_Lrotate, TiffViewer_Pzoom, TiffViewer_Mzoom, TiffViewer_Pbtn, TiffViewer_Nbtn);
TiffViewer_btncont.append(TiffViewer_Fscrn, TiffViewer_Fit, TiffViewer_hflip, TiffViewer_vflip, TiffViewer_Rrotate, TiffViewer_Lrotate, TiffViewer_zoomIn, TiffViewer_zoomOut, TiffViewer_Pbtn, TiffViewer_Nbtn);
//get Content placeholders
const wrapper = document.querySelector("#TiffViewer_Screen"), header = wrapper.querySelector("#TiffViewer_ImageContainer");
......@@ -527,13 +596,13 @@ function TIFFViewer(xhr, TiffViewerImageName) {
setwidth = origwidth;
wzoom[TiffViewer_current - 1] = origwidth;
hzoom[TiffViewer_current - 1] = origheight;
this.innerHTML = "rc";
} else {
setheight = changedheight;
setwidth = changedwidth;
wzoom[TiffViewer_current - 1] = changedwidth;
hzoom[TiffViewer_current - 1] = changedheight;
this.innerHTML = "fc";
}
Edited();
}
......@@ -647,7 +716,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
setwidth = changedwidth;
wzoom[TiffViewer_current - 1] = changedwidth;
hzoom[TiffViewer_current - 1] = changedheight;
fitB.innerHTML = "fc";
}
if (flippedX[TiffViewer_current - 1] != 1) {
......
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