Skip to content

W
web-ui
Commit 106951f3 by Jorem Magcawas
Options

Merge branch 'development-encoding' into 'feature-java-prev-next'

# Conflicts: # WebGde/WebContent/src/tiffViewer/tiffViewer.js
parents b2d09ebb 0863e6fa
Showing with 331 additions and 323 deletions
WebGde/WebContent/config.js
...@@ -52,4 +52,7 @@ var BPO_URL = "http://35.169.23.0:8080/bpo/" ...@@ -52,4 +52,7 @@ var BPO_URL = "http://35.169.23.0:8080/bpo/"
var CURRENT_NODE = "Web GDE" var CURRENT_NODE = "Web GDE"
var ENCODING_PASS = "PASS1" var ENCODING_PASS = "PASS1"
var NEXT_NODE = "Complete" var NEXT_NODE = "Complete"
var EXCEPTION_NODE = "Exception" var EXCEPTION_NODE = "Exception"
\ No newline at end of file
//KEYCLOAK CONFIG
const REDIRECT_URL = 'http://auth-server/auth/realms/GFS/protocol/openid-connect/logout?redirect_uri=encodedRedirectUri';
WebGde/WebContent/index.html
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
z-index: 1; z-index: 1;
bottom: -240px; bottom: -240px;
left: 50%; left: 50%;
margin-left: -333px; margin-left:0;
} }
/* Popup arrow */ /* Popup arrow */
...@@ -141,27 +141,38 @@ ...@@ -141,27 +141,38 @@
Scroll Down Image -> CTRL DOWN ARROW<br> Scroll Down Image -> CTRL DOWN ARROW<br>
</span> </span>
</div> </div>
<button id='refresh'>Refresh</button> <div id="usernameCont" class="popup" onclick="toggleLogout()">
<span id="userNameValue"></span>
<span id="popupLogout" class="popupLogoutText"><button id='endBtn'>End Session</button></span>
</div>
<!-- <button id='refresh'>Refresh</button> -->
</div> </div>
<div id='pauseBtn'> <div id='pauseBtn'>
<button id='pause'>Pause</button> <!-- <button id='pause'>Pause</button> -->
<div id='totalPageDiv'>
<span id="totalPageValue"></span>
<!-- <span id="userNameValue"></span> -->
<span id="elemIDValue"></span>
</div>
<div id="counter"></div>
</div> </div>
<div id='nextDiv'> <!-- <div id='nextDiv'>
<button id="prev">PREV</button> <button id="prev">PREV</button>
<button id="next">NEXT</button> <button id="next">NEXT</button>
</div> </div> -->
<form id='fields' autocomplete="off" style="display: flex; flex-direction:column;" <form id='fields' autocomplete="off" style="display: flex; flex-direction:column;"
onsubmit="submitForm(event);return false"></form> onsubmit="submitForm(event);return false"></form>
<div id='returnDiv'> <div id='returnDiv'>
<button id='return'>Return</button> <!-- <button id='return'>Return</button>
<button id='reject'>Reject</button> <button id='reject'>Reject</button> -->
</div> </div>
<div id='totalPageDiv'> <!-- <div id='totalPageDiv'>
<span id="totalPageValue"></span> <span id="totalPageValue"></span>
<span id="userNameValue"></span> <span id="userNameValue"></span>
<span id="elemIDValue"></span> <span id="elemIDValue"></span>
</div> </div> -->
<div id="counter"></div>
</aside> </aside>
<!-- Embed viewer --> <!-- Embed viewer -->
<main id="viewer"> <main id="viewer">
...@@ -185,25 +196,36 @@ ...@@ -185,25 +196,36 @@
<div id="status">&nbsp;</div> <div id="status">&nbsp;</div>
<h3 id="progress">&nbsp;</h3> <h3 id="progress">&nbsp;</h3>
</div> </div>
<div id="TiffModalFooter">
</div>
<div id="TiffModalHeader"> <div id="TiffModalHeader">
<!-- CHANGED: commented out close button, to avoid closing the modal --> <!-- CHANGED: commented out close button, to avoid closing the modal -->
<!-- <span class="TiffModalClose">&times;</span> --> <!-- <span class="TiffModalClose">&times;</span> -->
</div> </div>
<div id="TiffModalBody"> <div id="TiffModalBody">
<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="TiffModalFooter">
</div>
</div> </div>
</div> </div>
<img src="" id="tableBanner" /> <!-- <img src="" id="tableBanner" />
<img id="myImage" crossorigin="anonymous" src=""> <img id="myImage" crossorigin="anonymous" src="">
<img id="ImgPrev" crossorigin="anonymous" src=""> <img id="ImgPrev" crossorigin="anonymous" src="">
<img id="my-img" /> <img id="my-img" />
<img id="img" /> <img id="img" /> -->
</main> </main>
</div> </div>
...@@ -281,6 +303,10 @@ function myFunction() { ...@@ -281,6 +303,10 @@ function myFunction() {
var popup = document.getElementById("myPopup"); var popup = document.getElementById("myPopup");
popup.classList.toggle("show"); popup.classList.toggle("show");
} }
function toggleLogout() {
var popup = document.getElementById("popupLogout");
popup.classList.toggle("show");
}
</script> </script>
<script src="./src/endSession/endSession.js"></script> <script src="./src/endSession/endSession.js"></script>
<script src="./src/tiffViewer/tiffViewer.js"></script> <script src="./src/tiffViewer/tiffViewer.js"></script>
......
WebGde/WebContent/keycloak-login.js
...@@ -33,15 +33,11 @@ var appID; ...@@ -33,15 +33,11 @@ var appID;
var app; var app;
// #NODES // #NODES
const REDIRECT_URL = 'http://auth-server/auth/realms/GFS/protocol/openid-connect/logout?redirect_uri=encodedRedirectUri';
const kc = Keycloak(); const kc = Keycloak();
var updateProfile = function () { var updateProfile = function () {
console.log(kc.token); console.log(kc.token);
login_userData.access_token = kc.tokenParsed; login_userData.access_token = kc.tokenParsed;
login_userData.id_token = kc.idTokenParsed; login_userData.id_token = kc.idTokenParsed;
setUser();
setRoles();
setApps();
} }
kc.onAuthRefreshSuccess = function () { kc.onAuthRefreshSuccess = function () {
...@@ -94,9 +90,7 @@ kc.init(initOptions).then(function (authenticated) { ...@@ -94,9 +90,7 @@ kc.init(initOptions).then(function (authenticated) {
if (!authenticated) { if (!authenticated) {
console.warn('Not authenticated'); console.warn('Not authenticated');
} else { } else {
// updateProfile();
// refreshImage();
//set email
} }
}).catch(function () { }).catch(function () {
console.info('Init Error'); console.info('Init Error');
...@@ -160,175 +154,5 @@ function getkcToken() { ...@@ -160,175 +154,5 @@ function getkcToken() {
} }
function setUser() {
console.log('setting up user');
login_userData.username = kc.tokenParsed['preferred_username'];
login_userData.fname = kc.tokenParsed['given_name'];
login_userData.name = kc.tokenParsed['name'];
login_userData.wid = kc.tokenParsed['wid'];
login_userData.jti = kc.tokenParsed['jti']
}
function setRoles() {
console.log('setting up roles');
var myobj = kc.tokenParsed['resource_access'];
console.log(myobj);
$.each(myobj, function (index, object) {
console.log('i: ' + index);
if (appID.length > 0 && appID == index) {
console.log(appID);
for (var property in object) {
if (property == "roles") {
var approles = object[property];
for (var item in approles) {
var roleId = approles[item];
var role = {
'roleId': roleId,
'roleName': roleId
}
login_userData.roles.push(role);
}
}
}
}
});
}
function setApps() {
var clientAttributes = [];
var myobj = kc.tokenParsed['resource_access'];
var realmObj = kc.tokenParsed['realm_access'];
var realmRoles = realmObj['roles'];
//get the apps
$.each(myobj, function (index, object) {
console.log('app: ' + index);
var appIcon = '';
var appUrl = '';
//filter out application 'account' as this is a keycloak application
if (index !== "account") {
//we use keycloak realm roles to store the url and icons of the apps in the apprdrawer
//as keycloak doesnt have attributes for clients/applications to hold these two
$.each(realmRoles, function (i, o) {
if (o.includes(index) && o.includes("url")) {
appUrl = o.split("url-")[1];
}
if (o.includes(index) && o.includes("icon")) {
appIcon = o.split("icon-")[1];
}
})
app = {
'id': index,
'name': index,
'icon': appIcon,
'url': appUrl
}
if (appUrl.length > 0) {
login_userData.apps.push(app);
}
}
});
}
function setUserRoleAndApps(appid) {
appID = appid;
setRoles();
setApps();
}
function createjwt(role) {
const header = {
"alg": ALG
}
var stringifiedHeader = CryptoJS.enc.Utf8.parse(JSON.stringify(header));
var encodedHeader = base64url(stringifiedHeader);
const data = {
"jti": login_userData.jti,
"iss": "sso",
"sub": "authorized",
"usr": login_userData.username.toUpperCase(),
"wid": login_userData.wid,
"rol": [
role
],
"app": [
app.id
],
"iat": timestampIssued(getDate()),
"exp": timestampExpired(getDate(), TIMEOUT)
}
var stringifiedData = CryptoJS.enc.Utf8.parse(JSON.stringify(data));
var encodedData = base64url(stringifiedData);
var token = encodedHeader + "." + encodedData;
var secret = CryptoJS.enc.Base64.parse(SECRET)
var signature = CryptoJS.HmacSHA256(token, secret);
var base64sign = base64url(signature);
var signedToken = token + "." + base64sign;
return signedToken;
}
function base64url(source) {
// Encode in classical base64
encodedSource = CryptoJS.enc.Base64.stringify(source);
// Remove padding equal characters
encodedSource = encodedSource.replace(/=+$/, '');
// Replace characters according to base64url specifications
encodedSource = encodedSource.replace(/\+/g, '-');
encodedSource = encodedSource.replace(/\//g, '_');
return encodedSource;
}
function setCookie(token) {
var cookie = 'access_token=' + token + ';' + 'Path=/;Secure;HttpOnly';
document.cookie = cookie;
}
function encryptedjson(role) {
var jwt = createjwt(role);
return jwt;
}
function getDate() {
const date = new Date();
return date;
}
function timestampIssued(dt) {
const unix = Math.round(+dt / 1000);
return unix;
}
function timestampExpired(dt, seconds) {
dt.setSeconds(dt.getSeconds() + seconds);
const unix = Math.round(+dt / 1000);
return unix;
}
WebGde/WebContent/src/BPO/bpoService.js
...@@ -6,6 +6,7 @@ let urlCompleteToNextNode = BPO_URL + `req/workers/{{USER_ID}}/nodes/${CURRENT_N ...@@ -6,6 +6,7 @@ let urlCompleteToNextNode = BPO_URL + `req/workers/{{USER_ID}}/nodes/${CURRENT_N
let urlGetWorkersCurrentNode = BPO_URL + `req/nodes/${CURRENT_NODE}/workers` let urlGetWorkersCurrentNode = BPO_URL + `req/nodes/${CURRENT_NODE}/workers`
let urlRejectElement = BPO_URL + `req/nodes/${CURRENT_NODE}/elements/{{elementId}}?newNodeId={{newNodeId}}`; let urlRejectElement = BPO_URL + `req/nodes/${CURRENT_NODE}/elements/{{elementId}}?newNodeId={{newNodeId}}`;
function getUrlReturnElement(element_id) { function getUrlReturnElement(element_id) {
let url = urlReturnElement.replace("{{USER_ID}}", sessionStorage.getItem("user_id")); let url = urlReturnElement.replace("{{USER_ID}}", sessionStorage.getItem("user_id"));
url = url.replace("{{ELEMENT_ID}}", element_id); url = url.replace("{{ELEMENT_ID}}", element_id);
......
WebGde/WebContent/src/BPO/getElement.js
...@@ -12,6 +12,8 @@ async function initGetElement() { ...@@ -12,6 +12,8 @@ async function initGetElement() {
if (xml.isExisting) { if (xml.isExisting) {
const xmlString = await [...xml.data].join('').replace('\t',''); const xmlString = await [...xml.data].join('').replace('\t','');
const lastImage = getXmlLastImage(xmlString); const lastImage = getXmlLastImage(xmlString);
console.log('xmlString:' + xmlString);
sessionStorage.setItem('section', getXmlSection(xmlString)); sessionStorage.setItem('section', getXmlSection(xmlString));
sessionStorage.setItem('doctype', getXmlDocType(xmlString)); sessionStorage.setItem('doctype', getXmlDocType(xmlString));
...@@ -81,8 +83,8 @@ async function isLSTExisting(element) { ...@@ -81,8 +83,8 @@ async function isLSTExisting(element) {
} }
async function isXMLExisting(element) { async function getFieldXml(element) {
const response = await fetch('http://35.169.23.0:8080/WebGde/svc/gfs-rest/get-if-existing', { const response = await fetch('http://35.169.23.0:8080/WebGde/svc/gfs-rest/get-xml', {
method: "POST", method: "POST",
headers: { headers: {
'Content-Type':'application/json' 'Content-Type':'application/json'
......
WebGde/WebContent/src/BPO/returnElement.js
...@@ -4,10 +4,25 @@ async function returnElementBPO(elementId) { ...@@ -4,10 +4,25 @@ async function returnElementBPO(elementId) {
if (response.status == 200) { if (response.status == 200) {
await loadWaitingElement(); await loadWaitingElement();
init(); init();
alert("Element Returned"); console.log('Element Returned');
}else{ }else{
alert(`Error ${response.status}: Returning element`); alert(`Error ${response.status}: Returning element`);
} }
return response.status;
}
async function returnElementLogout(elementId) {
let response = await fetch(getUrlReturnElement(elementId), {method: "POST"});
if (response.status == 200) {
console.log('Element Returned');
}else{
alert(`Error ${response.status}: Returning element`);
logoutKeycloak();
}
return response.status;
} }
var returnButton = document.getElementById('return'); var returnButton = document.getElementById('return');
......
WebGde/WebContent/src/accessFile/accessFile.js
...@@ -287,7 +287,7 @@ async function accessFile() { ...@@ -287,7 +287,7 @@ async function accessFile() {
if(IS_RETRIEVE_FROM_GFS == "Y"){ if(IS_RETRIEVE_FROM_GFS == "Y"){
const modal = document.getElementById("TiffViewerModal"); const modal = document.getElementById("TiffViewerModal");
modal.style.display = 'none';//hide local modal\ modal.style.display = 'none';//hide local modal\
getFolder(FOLDER_URL+sessionStorage.getItem('user_id')+'/element5'); getFolder(FOLDER_URL+sessionStorage.getItem('user_id')+'/element6');
}else{ }else{
if((localStorage.length)==0){ if((localStorage.length)==0){
if(updated_input_files.length==0){ if(updated_input_files.length==0){
......
WebGde/WebContent/src/endSession/endSession.js
// var submitted = false;
const form = document.getElementById("fields"); const form = document.getElementById("fields");
const sidebar = document.getElementById("sidebar");
let closerWindow; let closerWindow;
let endButton = document.getElementById("endBtn");
// form.addEventListener('submit', (e)=>{
// submitted = true;
// })
endButton = document.createElement("button");
endButton.id = "endBtn";
endButton.innerHTML = "End Session";
var endDiv = document.createElement("div");
endDiv.id = "endDiv";
endDiv.append(endButton);
sidebar.append(endDiv);
//checks if form is empty
function checkForm(form){ function checkForm(form){
var inputs = form.getElementsByTagName("input"); var inputs = form.getElementsByTagName("input");
var selects = form.getElementsByTagName("select"); var selects = form.getElementsByTagName("select");
...@@ -34,37 +19,78 @@ function checkForm(form){ ...@@ -34,37 +19,78 @@ function checkForm(form){
if(inputsBlankCount==0 && selectsBlankCount==0) return true; if(inputsBlankCount==0 && selectsBlankCount==0) return true;
} }
//deletes the indexedDB if form is submitted or form is empty endButton.addEventListener("click", function(){
endButton.addEventListener("click", function(){ let endWindow = document.getElementById('end_window');
endWindow.style.display = 'block';
//clear localStorage });
localStorage.clear();
sessionStorage.clear();
//if form is submitted or fields are blank, delete database createEndSessionWindow();
if(checkForm(form)){
var DBdeleteRequest = window.indexedDB.deleteDatabase("ImageDatabase");
DBdeleteRequest.addEventListener('blocked', function(e){
console.log("Database cleared.");
//closerWindow = window.open("closer.html", '_self');
});
DBdeleteRequest.addEventListener('upgradeneeded', function(e){
console.log("Upgrade needed in deleting database");
});
DBdeleteRequest.addEventListener('error', function(e){
console.log("Error in deleting database");
});
DBdeleteRequest.addEventListener('success', function(e){
console.log("Database cleared.");
//closerWindow = window.open("closer.html", '_self');
});
logoutKeycloak(); function createEndSessionWindow(){
//resets the the boolean checker if data is submitted let endWindow = document.createElement('div');
submitted = false; endWindow.id = 'end_window';
} endWindow.style.display = 'none';
//if form is not empty but "End Session" button is pressed without submitting the form document.body.appendChild(endWindow);
else{
alert("Fields are not empty. Submit or clear fields first."); let endBodyDiv = document.createElement('div');
} endBodyDiv.id = 'endBodyDiv';
}); let endLabel = document.createElement('p');
\ No newline at end of file endLabel.innerText = "Session will end. Current Element will be Returned.";
let endContinue = document.createElement('p');
endContinue.innerText = "Continue Y/N?";
let endOkCnclDiv = document.createElement('div');
endOkCnclDiv.id = 'endOkCnclCont';
let okEnd = document.createElement('button');
okEnd.innerHTML = 'ok';
okEnd.id = 'okEndButtn';
okEnd.onclick = async function () {
if(checkForm(form)){
var DBdeleteRequest = window.indexedDB.deleteDatabase("ImageDatabase");
DBdeleteRequest.addEventListener('blocked', function(e){
console.log("Database cleared.");
});
DBdeleteRequest.addEventListener('upgradeneeded', function(e){
console.log("Upgrade needed in deleting database");
});
DBdeleteRequest.addEventListener('error', function(e){
console.log("Error in deleting database");
});
DBdeleteRequest.addEventListener('success', function(e){
console.log("Database cleared.");
});
let returnElem = await returnElementLogout(sessionStorage.getItem("element_id"));
if( returnElem == 200){
endWindow.style.display = 'none';
localStorage.clear();
sessionStorage.clear();
logoutKeycloak();
submitted = false;
}
}
else{
alert("Fields are not empty. Submit or clear fields first.");
}
endWindow.style.display = 'none';
}
let cancelEnd = document.createElement('button');
cancelEnd.innerHTML = 'cancel';
cancelEnd.id = 'cnclEndButton';
cancelEnd.onclick = function () {
endWindow.style.display = 'none';
}
endOkCnclDiv.appendChild(okEnd);
endOkCnclDiv.appendChild(cancelEnd);
endBodyDiv.appendChild(endLabel);
endBodyDiv.appendChild(endContinue);
endBodyDiv.appendChild(endOkCnclDiv);
endWindow.appendChild(endBodyDiv);
}
WebGde/WebContent/src/highlight/highlight.js
...@@ -150,6 +150,11 @@ function initHighlight() { ...@@ -150,6 +150,11 @@ function initHighlight() {
highlight(e.target.id); highlight(e.target.id);
currIdVal = e.target.id; currIdVal = e.target.id;
}) })
field.addEventListener('mouseover', (e) =>{
// flippedH = false;
highlight(e.target.id);
currIdVal = e.target.id;
})
}); });
...@@ -177,13 +182,14 @@ function initHighlight() { ...@@ -177,13 +182,14 @@ function initHighlight() {
//waits until TIFF image is loaded, since its size is based on the displayed TIFF image //waits until TIFF image is loaded, since its size is based on the displayed TIFF image
const observer = new MutationObserver(function (mutations, mutationInstance) { const observer = new MutationObserver(function (mutations, mutationInstance) {
const TIFFimg = document.getElementById('IMG1'); console.log(sessionStorage.getItem("TiffViewer_current"));
const TIFFimg = document.getElementById(sessionStorage.getItem("TiffViewer_current"));
if (TIFFimg) { if (TIFFimg) {
//waits until width and height has been assigned //waits until width and height has been assigned
var sizeObserver = new window.ResizeObserver(entries => { var sizeObserver = new window.ResizeObserver(entries => {
if(isCanvasNotCreated){ if(isCanvasNotCreated){
rect = document.getElementById("IMG1").getBoundingClientRect(); rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect();
// createHighlight(entries[0].contentRect.width, entries[0].contentRect.height); // createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
createHighlight(entries[0].contentRect.width, entries[0].contentRect.height); createHighlight(entries[0].contentRect.width, entries[0].contentRect.height);
isCanvasNotCreated = false; isCanvasNotCreated = false;
...@@ -191,7 +197,7 @@ function initHighlight() { ...@@ -191,7 +197,7 @@ function initHighlight() {
} }
else{ else{
rect = document.getElementById("IMG1").getBoundingClientRect(); rect = document.getElementById(sessionStorage.getItem("TiffViewer_current")).getBoundingClientRect();
if(isInitialPositioning){ if(isInitialPositioning){
resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left-263)); resizeHighlightCanvas(entries[0].contentRect.width, entries[0].contentRect.height, (rect.left-263));
} }
......
WebGde/WebContent/src/tiffViewer/tiffViewer.js
...@@ -130,49 +130,50 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -130,49 +130,50 @@ function TIFFViewer(xhr, TiffViewerImageName) {
const TiffViewer_hflip = document.createElement("button"); const TiffViewer_hflip = document.createElement("button");
TiffViewer_hflip.id = "TiffViewer_FlipX"; TiffViewer_hflip.id = "TiffViewer_FlipX";
TiffViewer_hflip.classList.add("TiffViewer_ButtonClass"); TiffViewer_hflip.classList.add("TiffViewer_ButtonClass");
TiffViewer_hflip.innerHTML = "Flip Horizontally"; TiffViewer_hflip.innerHTML = "fh";
const TiffViewer_vflip = document.createElement("button"); const TiffViewer_vflip = document.createElement("button");
TiffViewer_vflip.id = "TiffViewer_FlipY"; TiffViewer_vflip.id = "TiffViewer_FlipY";
TiffViewer_vflip.classList.add("TiffViewer_ButtonClass"); TiffViewer_vflip.classList.add("TiffViewer_ButtonClass");
TiffViewer_vflip.innerHTML = "Flip Vertically"; TiffViewer_vflip.innerHTML = "fv";
const TiffViewer_Rrotate = document.createElement("button"); const TiffViewer_Rrotate = document.createElement("button");
TiffViewer_Rrotate.id = "TiffViewer_RotateR"; TiffViewer_Rrotate.id = "TiffViewer_RotateR";
TiffViewer_Rrotate.classList.add("TiffViewer_ButtonClass"); TiffViewer_Rrotate.classList.add("TiffViewer_ButtonClass");
TiffViewer_Rrotate.innerHTML = "Rotate to right"; TiffViewer_Rrotate.innerHTML = "rr";
const TiffViewer_Lrotate = document.createElement("button"); const TiffViewer_Lrotate = document.createElement("button");
TiffViewer_Lrotate.id = "TiffViewer_RotateL"; TiffViewer_Lrotate.id = "TiffViewer_RotateL";
TiffViewer_Lrotate.classList.add("TiffViewer_ButtonClass"); TiffViewer_Lrotate.classList.add("TiffViewer_ButtonClass");
TiffViewer_Lrotate.innerHTML = "Rotate to left"; TiffViewer_Lrotate.innerHTML = "rl";
const TiffViewer_Pzoom = document.createElement("button"); const TiffViewer_Pzoom = document.createElement("button");
TiffViewer_Pzoom.id = "TiffViewer_ZoomP"; TiffViewer_Pzoom.id = "TiffViewer_ZoomP";
TiffViewer_Pzoom.classList.add("TiffViewer_ButtonClass"); TiffViewer_Pzoom.classList.add("TiffViewer_ButtonClass");
TiffViewer_Pzoom.innerHTML = "Zoom in"; TiffViewer_Pzoom.innerHTML = "+";
const TiffViewer_Mzoom = document.createElement("button"); const TiffViewer_Mzoom = document.createElement("button");
TiffViewer_Mzoom.id = "TiffViewer_ZoomM"; TiffViewer_Mzoom.id = "TiffViewer_ZoomM";
TiffViewer_Mzoom.classList.add("TiffViewer_ButtonClass"); TiffViewer_Mzoom.classList.add("TiffViewer_ButtonClass");
TiffViewer_Mzoom.innerHTML = "Zoom out"; TiffViewer_Mzoom.innerHTML = "-";
const TiffViewer_Pbtn = document.createElement("button"); const TiffViewer_Pbtn = document.createElement("button");
TiffViewer_Pbtn.id = "TiffViewer_PrevButton"; TiffViewer_Pbtn.id = "TiffViewer_PrevButton";
TiffViewer_Pbtn.classList.add("TiffViewer_ButtonClass"); TiffViewer_Pbtn.classList.add("TiffViewer_ButtonClass");
TiffViewer_Pbtn.innerHTML = "Previous"; TiffViewer_Pbtn.innerHTML = "<";
TiffViewer_Pbtn.style.display = "none"; TiffViewer_Pbtn.style.display = "none";
const TiffViewer_Nbtn = document.createElement("button"); const TiffViewer_Nbtn = document.createElement("button");
TiffViewer_Nbtn.id = "TiffViewer_NextButton"; TiffViewer_Nbtn.id = "TiffViewer_NextButton";
TiffViewer_Nbtn.classList.add("TiffViewer_ButtonClass"); TiffViewer_Nbtn.classList.add("TiffViewer_ButtonClass");
TiffViewer_Nbtn.innerHTML = "Next"; TiffViewer_Nbtn.innerHTML = ">";
TiffViewer_Nbtn.style.display = "none"; TiffViewer_Nbtn.style.display = "none";
const TiffViewer_Fscrn = document.createElement("button"); const TiffViewer_Fscrn = document.createElement("button");
TiffViewer_Fscrn.id = "TiffViewer_FullscreenButton"; TiffViewer_Fscrn.id = "TiffViewer_FullscreenButton";
TiffViewer_Fscrn.classList.add("TiffViewer_ButtonClass"); TiffViewer_Fscrn.classList.add("TiffViewer_ButtonClass");
TiffViewer_Fscrn.innerHTML = "Fullscreen"; TiffViewer_Fscrn.innerHTML = "fs";
const TiffViewer_Fit = document.createElement("button"); const TiffViewer_Fit = document.createElement("button");
TiffViewer_Fit.id = "TiffViewer_FitButton"; TiffViewer_Fit.id = "TiffViewer_FitButton";
TiffViewer_Fit.classList.add("TiffViewer_ButtonClass"); TiffViewer_Fit.classList.add("TiffViewer_ButtonClass");
TiffViewer_Fit.innerHTML = "Fit Content"; TiffViewer_Fit.innerHTML = "fc";
TiffViewer_Fit.style.display = "none"; TiffViewer_Fit.style.display = "none";
const zoom = document.createElement("div"); const zoom = document.createElement("div");
zoom.style.position = "absolute"; zoom.style.position = "absolute";
zoom.style.right = 0; zoom.style.right = -30;
zoom.style.top = -28;
let ofTotal = JSON.parse(sessionStorage.getItem("dir_files")).length; let ofTotal = JSON.parse(sessionStorage.getItem("dir_files")).length;
document.getElementById("totalPageValue").innerHTML = Current_page + ' of ' + ofTotal; document.getElementById("totalPageValue").innerHTML = Current_page + ' of ' + ofTotal;
...@@ -259,7 +260,7 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -259,7 +260,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
if (changed) { if (changed) {
setwidth = parseInt(img.style.width, 10); setwidth = parseInt(img.style.width, 10);
setheight = parseInt(img.style.height, 10); setheight = parseInt(img.style.height, 10);
document.getElementById("TiffViewer_FitButton").style.display = "block"; document.getElementById("TiffViewer_FitButton").style.display = "inherit";
} }
changedheight = setheight; changedheight = setheight;
changedwidth = setwidth; changedwidth = setwidth;
...@@ -423,6 +424,7 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -423,6 +424,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
Edited(); Edited();
}; };
//Previous Page //Previous Page
const prevB = document.getElementById("TiffViewer_PrevButton"); const prevB = document.getElementById("TiffViewer_PrevButton");
prevB.addEventListener("click", previousPage); prevB.addEventListener("click", previousPage);
...@@ -430,7 +432,7 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -430,7 +432,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
if (e.key === "F11") { if (e.key === "F11") {
e.preventDefault(); e.preventDefault();
previousPage(); previousPage();
} }
}) })
function previousPage() { function previousPage() {
...@@ -439,8 +441,10 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -439,8 +441,10 @@ function TIFFViewer(xhr, TiffViewerImageName) {
document.getElementById("TiffViewer_ImageContainer").classList.remove("active"); document.getElementById("TiffViewer_ImageContainer").classList.remove("active");
document.getElementById(`IMG${TiffViewer_current}`).style.display = "none"; document.getElementById(`IMG${TiffViewer_current}`).style.display = "none";
TiffViewer_current--; TiffViewer_current--;
sessionStorage.setItem("TiffViewer_current", "IMG" + TiffViewer_current);
document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages; document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages;
Edited(); Edited();
initHighlight();
} }
} }
}; };
...@@ -460,8 +464,10 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -460,8 +464,10 @@ function TIFFViewer(xhr, TiffViewerImageName) {
document.getElementById("TiffViewer_ImageContainer").classList.remove("active"); document.getElementById("TiffViewer_ImageContainer").classList.remove("active");
document.getElementById(`IMG${TiffViewer_current}`).style = "display: none"; document.getElementById(`IMG${TiffViewer_current}`).style = "display: none";
TiffViewer_current++; TiffViewer_current++;
sessionStorage.setItem("TiffViewer_current", "IMG" + TiffViewer_current);
document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages; document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages;
Edited(); Edited();
initHighlight();
}else{ }else{
alert("No more image to be fetched"); alert("No more image to be fetched");
} }
...@@ -479,18 +485,18 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -479,18 +485,18 @@ function TIFFViewer(xhr, TiffViewerImageName) {
function fitResize() { function fitResize() {
var FitText = this.textContent || this.innerHTML; var FitText = this.textContent || this.innerHTML;
document.getElementById("TiffViewer_ImageContainer").classList.remove("active"); document.getElementById("TiffViewer_ImageContainer").classList.remove("active");
if (FitText === "Fit Content") { if (FitText === "fc") {
setheight = origheight; setheight = origheight;
setwidth = origwidth; setwidth = origwidth;
wzoom[TiffViewer_current - 1] = origwidth; wzoom[TiffViewer_current - 1] = origwidth;
hzoom[TiffViewer_current - 1] = origheight; hzoom[TiffViewer_current - 1] = origheight;
this.innerHTML = "Resize Content"; this.innerHTML = "rc";
} else { } else {
setheight = changedheight; setheight = changedheight;
setwidth = changedwidth; setwidth = changedwidth;
wzoom[TiffViewer_current - 1] = changedwidth; wzoom[TiffViewer_current - 1] = changedwidth;
hzoom[TiffViewer_current - 1] = changedheight; hzoom[TiffViewer_current - 1] = changedheight;
this.innerHTML = "Fit Content"; this.innerHTML = "fc";
} }
Edited(); Edited();
} }
...@@ -671,7 +677,8 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -671,7 +677,8 @@ function TIFFViewer(xhr, TiffViewerImageName) {
e.preventDefault(); e.preventDefault();
div.scrollTop += 20; div.scrollTop += 20;
} }
}); });
// initHighlight(); initHighlight();
} }
WebGde/WebContent/style.css
...@@ -28,11 +28,12 @@ html { ...@@ -28,11 +28,12 @@ html {
display: flex; display: flex;
position: sticky; position: sticky;
flex-direction: column; flex-direction: column;
background-color: #FBF0D9; background-color: #A1C3E2;
max-height: 100vh; max-height: 100vh;
right: 0; right: 0;
} }
/* For the login credentials */ /* For the login credentials */
#username { #username {
padding-left: 5px; padding-left: 5px;
...@@ -75,7 +76,6 @@ html { ...@@ -75,7 +76,6 @@ html {
/* For the fields */ /* For the fields */
#fields { #fields {
padding-left: 5px;
width: auto; width: auto;
display: flex; display: flex;
flex: 1; flex: 1;
...@@ -84,6 +84,11 @@ html { ...@@ -84,6 +84,11 @@ html {
overflow-y: scroll; overflow-y: scroll;
} }
#fields>div {
background-color:E3E2E2;
}
/* For the viewer */ /* For the viewer */
main#viewer { main#viewer {
grid-area: main; grid-area: main;
...@@ -109,12 +114,21 @@ main#viewer { ...@@ -109,12 +114,21 @@ main#viewer {
#TiffViewer_ButtonContainer { #TiffViewer_ButtonContainer {
/* CHANGED: changed to make button container scrollable when window is resized */ /* CHANGED: changed to make button container scrollable when window is resized */
overflow-x: auto; text-align: center;
height: auto; height: auto;
position: relative; width: 43px;
justify-content: center; justify-content: center;
display: flex; display: inline-block;
align-items: center; align-items: center;
overflow:hidden;
}
.TiffViewer_ButtonClass{
border: 1px solid #446397;
border-radius: 100%;
width: 40px;
height: 40px;
margin-bottom:5px;
} }
#endDiv{ #endDiv{
...@@ -123,14 +137,33 @@ main#viewer { ...@@ -123,14 +137,33 @@ main#viewer {
} }
#endBtn{ #endBtn{
width: 160px;
height: 28px; }
margin-right: 10px;
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
.popup .popupLogoutText {
visibility: hidden;
width: 100px;
height: 20px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
top: 20px;
right: 0%;
margin-left: 0;
} }
#counter { #counter {
font-size: 22px; /* font-size: 22px;
padding: 10px; padding: 10px;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
...@@ -144,7 +177,7 @@ main#viewer { ...@@ -144,7 +177,7 @@ main#viewer {
1px 1px 0 #000, 1px 1px 0 #000,
0 1px 0 #000, 0 1px 0 #000,
-1px 1px 0 #000, -1px 1px 0 #000,
-1px 0 0 #000; -1px 0 0 #000; */
} }
.green{ .green{
...@@ -160,70 +193,86 @@ textarea{ ...@@ -160,70 +193,86 @@ textarea{
} }
#pauseBtn { #pauseBtn {
background-color: #FBF0D9;
text-align: center; text-align: center;
padding:10px;
color:white;
} }
#pause { #TiffButtonRight{
width: calc(38% - 40px); padding: 2px 16px;
margin: 20px; color: black;
padding: 6px; z-index: 999;
position: absolute;
top: 44px;
right: 21px;
text-align: center;
height: auto;
width: 43px;
} }
#refreshBtn { #refreshBtn {
background-color: #FBF0D9; background-color: #13B2EB;
padding: 10px; padding: 10px;
color:white;
} }
#refresh { #TiffButtonRight>button{
padding: 3px; border: 1px solid #446397;
float:right; border-radius: 100%;
margin-right: 10px; width: 40px;
height: 40px;
margin-bottom: 5px;
} }
#help { #help {
padding: 3px; padding: 3px;
float:right; float:left;
margin-right: 10px; margin-right: 10px;
} }
#usernameCont{
padding: 3px;
float: right;
}
#nextDiv { #nextDiv {
padding: 3px; padding: 3px;
background-color: #FBF0D9; width: 763px;
width: 370px; height: 22px;
} position: absolute;
z-index: 20;
left: calc(49%);
transform: translate(-50%, 0);
top: 328px;
}
#prev { #prev {
padding: 3px; opacity:.5;
display: block;
float:left; float:left;
display: block;
border: 1px solid #446397;
width: 50px;
height: 50px;
border-radius: 100%;
} }
#next { #next {
padding: 3px; opacity:.5;
display: block;
float:right; float:right;
display: block;
border: 1px solid #446397;
width: 50px;
height: 50px;
border-radius: 100%;
} }
#returnDiv { #returnDiv {
background-color: #FBF0D9;
padding: 10px; padding: 10px;
} }
#return {
padding: 3px;
float:right;
margin-right: 10px;
}
#reject {
padding: 3px;
float:right;
margin-right: 10px;
}
#totalPageDiv { #totalPageDiv {
background-color: #FBF0D9;
padding: 10px; padding: 10px;
} }
...@@ -259,9 +308,9 @@ textarea{ ...@@ -259,9 +308,9 @@ textarea{
align-items: center; align-items: center;
} }
#TiffViewer_ButtonContainer>.TiffViewer_ButtonClass:not(:last-child) { /* #TiffViewer_ButtonContainer>.TiffViewer_ButtonClass:not(:last-child) {
margin-right: 5px; margin-right: 5px;
} } */
#TiffViewer_Screen { #TiffViewer_Screen {
...@@ -349,7 +398,7 @@ body>div>button { ...@@ -349,7 +398,7 @@ body>div>button {
/* Modal Content */ /* Modal Content */
.TiffModalContent { .TiffModalContent {
position: relative; position: relative;
background-color: #fefefe; background-color: #E3E2E2;
margin: auto; margin: auto;
padding: 0 5 5 5; padding: 0 5 5 5;
/* border: 1px solid #888; /* border: 1px solid #888;
...@@ -410,7 +459,6 @@ body>div>button { ...@@ -410,7 +459,6 @@ body>div>button {
#TiffModalHeader { #TiffModalHeader {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
/* padding: 2px 16px; */ /* padding: 2px 16px; */
background-color: white;
color: black; color: black;
} }
...@@ -426,9 +474,18 @@ body>div>button { ...@@ -426,9 +474,18 @@ body>div>button {
#TiffModalFooter { #TiffModalFooter {
padding: 2px 16px; padding: 2px 16px;
background-color: white; /* background-color: white; */
color: black; color: black;
/* overflow-x: auto; */ /* overflow-x: auto; */
z-index: 999;
position: absolute;
top: 44px;
left: 4px;
}
#TiffViewer_FileContainer{
border: 1px solid #446397;
overflow: hidden;
} }
...@@ -445,6 +502,10 @@ body>div>button { ...@@ -445,6 +502,10 @@ body>div>button {
min-width: 500px; min-width: 500px;
} }
#Date{
width:100%;
}
.fieldContainer { .fieldContainer {
/* layout config */ /* layout config */
display: flex; display: flex;
...@@ -453,7 +514,7 @@ body>div>button { ...@@ -453,7 +514,7 @@ body>div>button {
/* border config */ /* border config */
border-style: solid; border-style: solid;
border-width: thin; border-width: thin;
border-color: black; border-color:#446397;
padding: 0px; padding: 0px;
} }
...@@ -461,7 +522,7 @@ body>div>button { ...@@ -461,7 +522,7 @@ body>div>button {
.labelContainer { .labelContainer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
/* justify-content: flex-end; */ justify-content: flex-end;
width: 42%; width: 42%;
padding: 3px; padding: 3px;
} }
...@@ -476,16 +537,12 @@ body>div>button { ...@@ -476,16 +537,12 @@ body>div>button {
.input-invalid { .input-invalid {
border-color: #ff3333 !important; border-color: #ff3333 !important;
border-radius: 3px;
border-style: solid; border-style: solid;
border-width: medium;
} }
.input-valid { .input-valid {
border-color: #000000 !important; border-color: #000000 !important;
border-radius: 3px;
border-style: solid; border-style: solid;
border-width: thin;
} }
input:focus, textarea:focus{ input:focus, textarea:focus{
...@@ -527,7 +584,7 @@ select { ...@@ -527,7 +584,7 @@ select {
width: 200px; width: 200px;
border: 1px solid; border: 1px solid;
position: absolute; position: absolute;
top: calc(50% - 83px); top: calc(50% - 122px);
transform: translate(0, -50%); transform: translate(0, -50%);
left: calc(50% - 100px); left: calc(50% - 100px);
transform: translate(-50%, 0); transform: translate(-50%, 0);
...@@ -562,4 +619,28 @@ select { ...@@ -562,4 +619,28 @@ select {
#text-area{ #text-area{
margin-left: 3px; margin-left: 3px;
margin-bottom: 3px; margin-bottom: 3px;
} }
\ No newline at end of file
#end_window{
text-align:center;
height: 120px;
width: 400px;
border: 1px solid;
position: absolute;
top: calc(50% - 60px);
transform: translate(0, -50%);
left: calc(50% - 200px);
transform: translate(-50%, 0);
padding: 10px;
background-color: white;
z-index:999;
}
#endOkCnclCont>button{
margin:5px;
}
.select2-container--default .select2-selection--single{
border-radius:0px !important;
}
WebGde/src/main/java/com/svi/webgde/restservice/services/GDEWebServices.java
...@@ -98,6 +98,26 @@ public class GDEWebServices { ...@@ -98,6 +98,26 @@ public class GDEWebServices {
return Response.ok(json.toString()).build(); return Response.ok(json.toString()).build();
} }
@POST
@Consumes(MediaType.APPLICATION_JSON)
@Produces(MediaType.APPLICATION_JSON)
@Path("/get-xml-fields")
public Response getXMLData(JsonObject jsonObject) {
File file = new File(jsonObject.getString("filePath").trim());
JSONObject json = new JSONObject();
if (file.exists()) {
try {
json.put("data", Files.readAllLines(file.toPath()));
} catch (IOException e) {
e.printStackTrace();
return Response.status(500).entity("No DTA/XML file found").build();
}
}
return Response.ok(json.toString()).build();
}
@POST @POST
@Consumes(MediaType.APPLICATION_JSON) @Consumes(MediaType.APPLICATION_JSON)
......
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