Skip to content

W
web-ui
Commit b7d44882 by Jorem Magcawas
Options

WG-145- update ui changes

parent 5ec06f93
Showing with 191 additions and 92 deletions
WebGde/WebContent/index.html
......@@ -69,7 +69,7 @@
z-index: 1;
bottom: -240px;
left: 50%;
margin-left: -333px;
margin-left:0;
}
/* Popup arrow */
......@@ -141,27 +141,38 @@
Scroll Down Image -> CTRL DOWN ARROW<br>
</span>
</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 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 id='nextDiv'>
<!-- <div id='nextDiv'>
<button id="prev">PREV</button>
<button id="next">NEXT</button>
</div>
</div> -->
<form id='fields' autocomplete="off" style="display: flex; flex-direction:column;"
onsubmit="submitForm(event);return false"></form>
<div id='returnDiv'>
<button id='return'>Return</button>
<button id='reject'>Reject</button>
<!-- <button id='return'>Return</button>
<button id='reject'>Reject</button> -->
</div>
<div id='totalPageDiv'>
<!-- <div id='totalPageDiv'>
<span id="totalPageValue"></span>
<span id="userNameValue"></span>
<span id="elemIDValue"></span>
</div>
<div id="counter"></div>
</div> -->
</aside>
<!-- Embed viewer -->
<main id="viewer">
......@@ -185,16 +196,27 @@
<div id="status">&nbsp;</div>
<h3 id="progress">&nbsp;</h3>
</div>
<div id="TiffModalFooter">
</div>
<div id="TiffModalHeader">
<!-- CHANGED: commented out close button, to avoid closing the modal -->
<!-- <span class="TiffModalClose">&times;</span> -->
</div>
<div id="TiffModalBody">
<div id='nextDiv'>
<button id="prev">&lt;</button>
<button id="next">&gt;</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 id="TiffModalFooter">
</div>
</div>
</div>
......@@ -282,6 +304,10 @@ function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
function toggleLogout() {
var popup = document.getElementById("popupLogout");
popup.classList.toggle("show");
}
</script>
<script src="./src/endSession/endSession.js"></script>
<script src="./src/tiffViewer/tiffViewer.js"></script>
......
WebGde/WebContent/src/BPO/getElement.js
......@@ -83,8 +83,8 @@ async function isLSTExisting(element) {
}
async function isXMLExisting(element) {
const response = await fetch('http://35.169.23.0:8080/WebGde/svc/gfs-rest/get-if-existing', {
async function getFieldXml(element) {
const response = await fetch('http://35.169.23.0:8080/WebGde/svc/gfs-rest/get-xml', {
method: "POST",
headers: {
'Content-Type':'application/json'
......
WebGde/WebContent/src/accessFile/accessFile.js
......@@ -248,7 +248,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')+'/element1');
getFolder(FOLDER_URL+sessionStorage.getItem('user_id')+'/element5');
}else{
if((localStorage.length)==0){
if(updated_input_files.length==0){
......
WebGde/WebContent/src/endSession/endSession.js
const form = document.getElementById("fields");
const sidebar = document.getElementById("sidebar");
let closerWindow;
let endButton = document.getElementById("endBtn");
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);
function checkForm(form){
var inputs = form.getElementsByTagName("input");
......
WebGde/WebContent/src/tiffViewer/tiffViewer.js
......@@ -125,49 +125,50 @@ function TIFFViewer(xhr, TiffViewerImageName) {
const TiffViewer_hflip = document.createElement("button");
TiffViewer_hflip.id = "TiffViewer_FlipX";
TiffViewer_hflip.classList.add("TiffViewer_ButtonClass");
TiffViewer_hflip.innerHTML = "Flip Horizontally";
TiffViewer_hflip.innerHTML = "fh";
const TiffViewer_vflip = document.createElement("button");
TiffViewer_vflip.id = "TiffViewer_FlipY";
TiffViewer_vflip.classList.add("TiffViewer_ButtonClass");
TiffViewer_vflip.innerHTML = "Flip Vertically";
TiffViewer_vflip.innerHTML = "fv";
const TiffViewer_Rrotate = document.createElement("button");
TiffViewer_Rrotate.id = "TiffViewer_RotateR";
TiffViewer_Rrotate.classList.add("TiffViewer_ButtonClass");
TiffViewer_Rrotate.innerHTML = "Rotate to right";
TiffViewer_Rrotate.innerHTML = "rr";
const TiffViewer_Lrotate = document.createElement("button");
TiffViewer_Lrotate.id = "TiffViewer_RotateL";
TiffViewer_Lrotate.classList.add("TiffViewer_ButtonClass");
TiffViewer_Lrotate.innerHTML = "Rotate to left";
TiffViewer_Lrotate.innerHTML = "rl";
const TiffViewer_Pzoom = document.createElement("button");
TiffViewer_Pzoom.id = "TiffViewer_ZoomP";
TiffViewer_Pzoom.classList.add("TiffViewer_ButtonClass");
TiffViewer_Pzoom.innerHTML = "Zoom in";
TiffViewer_Pzoom.innerHTML = "+";
const TiffViewer_Mzoom = document.createElement("button");
TiffViewer_Mzoom.id = "TiffViewer_ZoomM";
TiffViewer_Mzoom.classList.add("TiffViewer_ButtonClass");
TiffViewer_Mzoom.innerHTML = "Zoom out";
TiffViewer_Mzoom.innerHTML = "-";
const TiffViewer_Pbtn = document.createElement("button");
TiffViewer_Pbtn.id = "TiffViewer_PrevButton";
TiffViewer_Pbtn.classList.add("TiffViewer_ButtonClass");
TiffViewer_Pbtn.innerHTML = "Previous";
TiffViewer_Pbtn.innerHTML = "<";
TiffViewer_Pbtn.style.display = "none";
const TiffViewer_Nbtn = document.createElement("button");
TiffViewer_Nbtn.id = "TiffViewer_NextButton";
TiffViewer_Nbtn.classList.add("TiffViewer_ButtonClass");
TiffViewer_Nbtn.innerHTML = "Next";
TiffViewer_Nbtn.innerHTML = ">";
TiffViewer_Nbtn.style.display = "none";
const TiffViewer_Fscrn = document.createElement("button");
TiffViewer_Fscrn.id = "TiffViewer_FullscreenButton";
TiffViewer_Fscrn.classList.add("TiffViewer_ButtonClass");
TiffViewer_Fscrn.innerHTML = "Fullscreen";
TiffViewer_Fscrn.innerHTML = "fs";
const TiffViewer_Fit = document.createElement("button");
TiffViewer_Fit.id = "TiffViewer_FitButton";
TiffViewer_Fit.classList.add("TiffViewer_ButtonClass");
TiffViewer_Fit.innerHTML = "Fit Content";
TiffViewer_Fit.innerHTML = "fc";
TiffViewer_Fit.style.display = "none";
const zoom = document.createElement("div");
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;
document.getElementById("totalPageValue").innerHTML = Current_page + ' of ' + ofTotal;
......@@ -254,7 +255,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
if (changed) {
setwidth = parseInt(img.style.width, 10);
setheight = parseInt(img.style.height, 10);
document.getElementById("TiffViewer_FitButton").style.display = "block";
document.getElementById("TiffViewer_FitButton").style.display = "inherit";
}
changedheight = setheight;
changedwidth = setwidth;
......@@ -474,18 +475,18 @@ function TIFFViewer(xhr, TiffViewerImageName) {
function fitResize() {
var FitText = this.textContent || this.innerHTML;
document.getElementById("TiffViewer_ImageContainer").classList.remove("active");
if (FitText === "Fit Content") {
if (FitText === "fc") {
setheight = origheight;
setwidth = origwidth;
wzoom[TiffViewer_current - 1] = origwidth;
hzoom[TiffViewer_current - 1] = origheight;
this.innerHTML = "Resize Content";
this.innerHTML = "rc";
} else {
setheight = changedheight;
setwidth = changedwidth;
wzoom[TiffViewer_current - 1] = changedwidth;
hzoom[TiffViewer_current - 1] = changedheight;
this.innerHTML = "Fit Content";
this.innerHTML = "fc";
}
Edited();
}
......
WebGde/WebContent/style.css
......@@ -28,11 +28,12 @@ html {
display: flex;
position: sticky;
flex-direction: column;
background-color: #FBF0D9;
background-color: #A1C3E2;
max-height: 100vh;
right: 0;
}
/* For the login credentials */
#username {
padding-left: 5px;
......@@ -75,7 +76,6 @@ html {
/* For the fields */
#fields {
padding-left: 5px;
width: auto;
display: flex;
flex: 1;
......@@ -84,6 +84,11 @@ html {
overflow-y: scroll;
}
#fields>div {
background-color:E3E2E2;
}
/* For the viewer */
main#viewer {
grid-area: main;
......@@ -109,12 +114,21 @@ main#viewer {
#TiffViewer_ButtonContainer {
/* CHANGED: changed to make button container scrollable when window is resized */
overflow-x: auto;
text-align: center;
height: auto;
position: relative;
width: 43px;
justify-content: center;
display: flex;
display: inline-block;
align-items: center;
overflow:hidden;
}
.TiffViewer_ButtonClass{
border: 1px solid #446397;
border-radius: 100%;
width: 40px;
height: 40px;
margin-bottom:5px;
}
#endDiv{
......@@ -123,14 +137,33 @@ main#viewer {
}
#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 {
font-size: 22px;
/* font-size: 22px;
padding: 10px;
position: absolute;
z-index: 1;
......@@ -144,7 +177,7 @@ main#viewer {
1px 1px 0 #000,
0 1px 0 #000,
-1px 1px 0 #000,
-1px 0 0 #000;
-1px 0 0 #000; */
}
.green{
......@@ -160,70 +193,86 @@ textarea{
}
#pauseBtn {
background-color: #FBF0D9;
text-align: center;
padding:10px;
color:white;
}
#pause {
width: calc(38% - 40px);
margin: 20px;
padding: 6px;
#TiffButtonRight{
padding: 2px 16px;
color: black;
z-index: 999;
position: absolute;
top: 44px;
right: 21px;
text-align: center;
height: auto;
width: 43px;
}
#refreshBtn {
background-color: #FBF0D9;
background-color: #13B2EB;
padding: 10px;
color:white;
}
#refresh {
padding: 3px;
float:right;
margin-right: 10px;
#TiffButtonRight>button{
border: 1px solid #446397;
border-radius: 100%;
width: 40px;
height: 40px;
margin-bottom: 5px;
}
#help {
padding: 3px;
float:right;
float:left;
margin-right: 10px;
}
#usernameCont{
padding: 3px;
float: right;
}
#nextDiv {
padding: 3px;
background-color: #FBF0D9;
width: 370px;
}
width: 763px;
height: 22px;
position: absolute;
z-index: 999;
left: calc(49%);
transform: translate(-50%, 0);
top: 328px;
}
#prev {
padding: 3px;
display: block;
opacity:.5;
float:left;
display: block;
border: 1px solid #446397;
width: 35px;
height: 35px;
border-radius: 100%;
}
#next {
padding: 3px;
display: block;
opacity:.5;
float:right;
display: block;
border: 1px solid #446397;
width: 35px;
height: 35px;
border-radius: 100%;
}
#returnDiv {
background-color: #FBF0D9;
padding: 10px;
}
#return {
padding: 3px;
float:right;
margin-right: 10px;
}
#reject {
padding: 3px;
float:right;
margin-right: 10px;
}
#totalPageDiv {
background-color: #FBF0D9;
padding: 10px;
}
......@@ -259,9 +308,9 @@ textarea{
align-items: center;
}
#TiffViewer_ButtonContainer>.TiffViewer_ButtonClass:not(:last-child) {
/* #TiffViewer_ButtonContainer>.TiffViewer_ButtonClass:not(:last-child) {
margin-right: 5px;
}
} */
#TiffViewer_Screen {
......@@ -349,7 +398,7 @@ body>div>button {
/* Modal Content */
.TiffModalContent {
position: relative;
background-color: #fefefe;
background-color: #E3E2E2;
margin: auto;
padding: 0 5 5 5;
/* border: 1px solid #888;
......@@ -410,7 +459,6 @@ body>div>button {
#TiffModalHeader {
font-family: Arial, Helvetica, sans-serif;
/* padding: 2px 16px; */
background-color: white;
color: black;
}
......@@ -426,9 +474,18 @@ body>div>button {
#TiffModalFooter {
padding: 2px 16px;
background-color: white;
/* background-color: white; */
color: black;
/* 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 {
min-width: 500px;
}
#Date{
width:100%;
}
.fieldContainer {
/* layout config */
display: flex;
......@@ -453,7 +514,7 @@ body>div>button {
/* border config */
border-style: solid;
border-width: thin;
border-color: black;
border-color:#446397;
padding: 0px;
}
......@@ -461,7 +522,7 @@ body>div>button {
.labelContainer {
display: flex;
flex-direction: row;
/* justify-content: flex-end; */
justify-content: flex-end;
width: 42%;
padding: 3px;
}
......@@ -476,16 +537,12 @@ body>div>button {
.input-invalid {
border-color: #ff3333 !important;
border-radius: 3px;
border-style: solid;
border-width: medium;
}
.input-valid {
border-color: #000000 !important;
border-radius: 3px;
border-style: solid;
border-width: thin;
}
input:focus, textarea:focus{
......@@ -582,3 +639,7 @@ select {
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 {
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
@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