Skip to content

W
web-ui
Commit 8e6dfb73 by Earvin
Options

Right and left panel + popupDiv

parent 52a09e2d
Showing with 231 additions and 115 deletions
WebGde/WebContent/index.html
...@@ -43,66 +43,7 @@ ...@@ -43,66 +43,7 @@
</script> --> </script> -->
<body> <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="no-config" style="display:none"> There is no config file found</div>
<div id="with-config" style="display:grid"> <div id="with-config" style="display:grid">
<!-- Creates the right pane of the window --> <!-- Creates the right pane of the window -->
...@@ -161,7 +102,7 @@ ...@@ -161,7 +102,7 @@
<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"
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>
...@@ -189,6 +130,16 @@ ...@@ -189,6 +130,16 @@
<div id="TiffViewerModal"> <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 --> <!-- Modal content -->
<div class="TiffModalContent"> <div class="TiffModalContent">
<div class="bar"> <div class="bar">
...@@ -196,26 +147,27 @@ ...@@ -196,26 +147,27 @@
<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 id="TiffModalBody">
</div> </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 id='nextDivContainer' title="next">
<div id='TiffButtonRight'>
<div id='refresh'></div>
<div id='pause'></div>
<div id='return'></div>
<div id='reject'></div>
</div> </div>
<div id='nextDiv'> <div id='nextDiv'>
<button id="prev">prev</button> <div id="next"></div>
<button id="next">next</button>
</div> </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> </div>
......
WebGde/WebContent/src/BPO/rejectElement.js
...@@ -19,21 +19,22 @@ async function rejectElement() { ...@@ -19,21 +19,22 @@ async function rejectElement() {
alert(`Error ${response.status}: Rejecting element`); alert(`Error ${response.status}: Rejecting element`);
} }
} }
createRejectWindow(); //window for reason rejecting element //window for reason rejecting element
var rejectButton = document.getElementById('reject'); var rejectButton = document.getElementById('reject');
rejectButton.onclick = function () { rejectButton.onclick = function () {
let screenMain = document.getElementById('parent_Window'); createRejectWindow();
screenMain.style.display = 'block'; /*let screenMain = document.getElementById("reject_window");
/* screenMain.style.display = 'block';*/
rejectButton.disabled = true; rejectButton.disabled = true;
//rejectElement(); //rejectElement();
//const fieldForm = document.getElementById("fields"); //const fieldForm = document.getElementById("fields");
//fieldForm.querySelector('input[type="submit"]').click(); //fieldForm.querySelector('input[type="submit"]').click(); */
}; };
window.addEventListener('keydown', function(e) { window.addEventListener('keydown', function(e) {
if (e.ctrlKey == true && e.keyCode == 69){ if (e.ctrlKey == true && e.keyCode == 69){
let screenMain = document.getElementById('parent_Window'); let screenMain = document.getElementById("genericPopup");
screenMain.style.display = 'block'; screenMain.style.display = 'block';
rejectButton.disabled = true; rejectButton.disabled = true;
} }
...@@ -41,27 +42,84 @@ window.addEventListener('keydown', function(e) { ...@@ -41,27 +42,84 @@ window.addEventListener('keydown', function(e) {
function createRejectWindow(){ function createRejectWindow(){
let popUpDisplay = document.createElement("div");
popUpDisplay.classList.add("genericPopup")
let screenMain = document.createElement('div'); let screenMain = document.createElement('div');
screenMain.id = 'parent_Window'; screenMain.id = 'parent_Window';
screenMain.style.display = 'none';
document.body.appendChild(screenMain); document.body.appendChild(screenMain);
var resList = REASON_LIST.split(","); 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++){ for(let i = 0; i < resList.length; i++){
screenMain.appendChild(checkLabelComponent(resList[i],resList[i],"check" + (i + 1))); 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(checkLabelComponent('Others','','check5'));
screenMain.appendChild(createMessageBox('text-area')); screenMain.appendChild(createMessageBox('text-area'));
screenMain.appendChild(okCancelButton()); screenMain.appendChild(buttonPanel);
//set radio button text area value //set radio button text area value
let radioMessage = document.getElementById('check5'); let radioMessage = document.getElementById('check5');
let text = document.getElementById('text-area'); let text = document.getElementById('text-area');
radioMessage.value = text.value; radioMessage.value = text.value;
okButton.onclick = function () {
saveExceptionToXml();//save xml
rejectElement();//reject on bpo
screenMain.style.display = 'none';
rejectButton.disabled = false;
}
cancelButton.onclick = function () {
popUpDisplay.remove();
rejectButton.disabled = false;
}
popUpDisplay.append(screenMain);
document.body.append(popUpDisplay);
} }
function genericPopupDiv(){
let container = document.createElement("div");
container.id = "genericPopup";
container.classList.add("genericPopup");
return container;
}
function checkLabelComponent(textLabel,inputval,checkboxId){ function checkLabelComponent(textLabel,inputval,checkboxId){
...@@ -94,8 +152,9 @@ function checkLabelComponent(textLabel,inputval,checkboxId){ ...@@ -94,8 +152,9 @@ function checkLabelComponent(textLabel,inputval,checkboxId){
function okCancelButton(){ /*function okCancelButton(){
let screenMain = document.getElementById('parent_Window'); let genericPopup = document.getElementsByClassName("genericPopup")
.getElementById("genericPopup");
let buttonCont = document.createElement('div'); let buttonCont = document.createElement('div');
buttonCont.id = 'okCancelCont'; buttonCont.id = 'okCancelCont';
...@@ -103,6 +162,17 @@ function okCancelButton(){ ...@@ -103,6 +162,17 @@ function okCancelButton(){
//okButton.setAttribute('type', 'submit'); //okButton.setAttribute('type', 'submit');
okButton.id = 'reject_ok'; okButton.id = 'reject_ok';
okButton.innerHTML = 'ok'; okButton.innerHTML = 'ok';
let cancelButton = document.createElement('button');
cancelButton.id = 'reject_Cancel';
cancelButton.innerHTML = 'cancel';
buttonCont.appendChild(okButton);
buttonCont.appendChild(cancelButton);
okButton.onclick = function () { okButton.onclick = function () {
saveExceptionToXml();//save xml saveExceptionToXml();//save xml
rejectElement();//reject on bpo rejectElement();//reject on bpo
...@@ -111,22 +181,26 @@ function okCancelButton(){ ...@@ -111,22 +181,26 @@ function okCancelButton(){
return false; return false;
} }
let cancelButton = document.createElement('button');
cancelButton.id = 'reject_Cancel';
cancelButton.innerHTML = 'cancel';
cancelButton.onclick = function () { cancelButton.onclick = function () {
screenMain.style.display = 'none'; genericPopup.remove();
rejectButton.disabled = false; rejectButton.disabled = false;
return false; return false;
} }
buttonCont.appendChild(okButton);
buttonCont.appendChild(cancelButton);
return buttonCont; 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(){ function saveExceptionToXml(){
...@@ -213,3 +287,4 @@ async function updateXMLException(xmlData){ ...@@ -213,3 +287,4 @@ async function updateXMLException(xmlData){
} }
return false; return false;
} }
WebGde/WebContent/src/getFields/getFields.js
...@@ -57,6 +57,7 @@ const displayFields = async (parentID) => { ...@@ -57,6 +57,7 @@ const displayFields = async (parentID) => {
} }
const submit = document.createElement('input') const submit = document.createElement('input')
submit.classList.add("submitButtons");
submit.type = 'submit' submit.type = 'submit'
div.appendChild(submit) div.appendChild(submit)
......
WebGde/WebContent/src/tiffViewer/tiffViewer.js
...@@ -111,10 +111,10 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -111,10 +111,10 @@ function TIFFViewer(xhr, TiffViewerImageName) {
TiffViewer_detailcont.id = "TiffViewerDetailscontainer"; TiffViewer_detailcont.id = "TiffViewerDetailscontainer";
TiffViewer_detailcont.classList.add("TiffViewercontainer"); TiffViewer_detailcont.classList.add("TiffViewercontainer");
const TiffViewer_filedetail = document.createElement('p'); const TiffViewer_filedetail = document.createElement("div");
TiffViewer_filedetail.id = "TiffViewerImageName"; TiffViewer_filedetail.id = "TiffViewerImageName";
TiffViewer_filedetail.style.display = "none"; TiffViewer_filedetail.style.display = "none";
TiffViewer_filedetail.innerHTML = "Filename: "; TiffViewer_filedetail.textContent = "Filename: ";
const TiffViewer_pagedetail = document.createElement('p'); const TiffViewer_pagedetail = document.createElement('p');
TiffViewer_pagedetail.id = "TiffViewer_PageCount"; TiffViewer_pagedetail.id = "TiffViewer_PageCount";
...@@ -135,35 +135,68 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -135,35 +135,68 @@ function TIFFViewer(xhr, TiffViewerImageName) {
TiffViewer_btncont.id = "TiffViewer_ButtonContainer"; TiffViewer_btncont.id = "TiffViewer_ButtonContainer";
TiffViewer_btncont.classList.add("TiffViewercontainer"); TiffViewer_btncont.classList.add("TiffViewercontainer");
const TiffViewer_hflip = document.createElement("button");
const TiffViewer_hflip = document.createElement("div");
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 = "fh"; TiffViewer_hflip.title = "Horizontal Flip";
let 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.id = "TiffViewer_FlipY";
TiffViewer_vflip.classList.add("TiffViewer_ButtonClass"); TiffViewer_vflip.classList.add("TiffViewer_ButtonClass");
TiffViewer_vflip.innerHTML = "fv"; TiffViewer_vflip.title = "Vertical Flip"
let 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.id = "TiffViewer_RotateR";
TiffViewer_Rrotate.classList.add("TiffViewer_ButtonClass"); TiffViewer_Rrotate.classList.add("TiffViewer_ButtonClass");
TiffViewer_Rrotate.innerHTML = "rr"; TiffViewer_Rrotate.title = "Rotate Right"
let 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.id = "TiffViewer_RotateL";
TiffViewer_Lrotate.classList.add("TiffViewer_ButtonClass"); TiffViewer_Lrotate.classList.add("TiffViewer_ButtonClass");
TiffViewer_Lrotate.innerHTML = "rl"; TiffViewer_Lrotate.title = "Rotate Left"
let LrotateIcon = document.createElement("img");
LrotateIcon.classList.add("tiffViewerIcons");
LrotateIcon.src = "/WebGde/assets/rotate_left_icon.png";
LrotateIcon.alt = "rotate-left";
const TiffViewer_zoomIn = document.createElement("div");
TiffViewer_zoomIn.id = "TiffViewer_ZoomP";
TiffViewer_zoomIn.classList.add("TiffViewer_ButtonClass");
TiffViewer_zoomIn.title = "Zoom In";
let 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";
let zoomOutIcon = document.createElement("img");
zoomOutIcon.classList.add("tiffViewerIcons");
zoomOutIcon.src = "/WebGde/assets/zoom_out_icon.png";
zoomOutIcon.alt = "zoom-out";
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_Pbtn = document.createElement("button"); const TiffViewer_Pbtn = document.createElement("button");
TiffViewer_Pbtn.id = "TiffViewer_PrevButton"; TiffViewer_Pbtn.id = "TiffViewer_PrevButton";
...@@ -177,26 +210,79 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -177,26 +210,79 @@ function TIFFViewer(xhr, TiffViewerImageName) {
TiffViewer_Nbtn.innerHTML = ">"; TiffViewer_Nbtn.innerHTML = ">";
TiffViewer_Nbtn.style.display = "none"; TiffViewer_Nbtn.style.display = "none";
const TiffViewer_Fscrn = document.createElement("button"); const TiffViewer_Fscrn = document.createElement("div");
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 = "fs"; TiffViewer_Fscrn.title = "Fullscreen";
let 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.id = "TiffViewer_FitButton";
TiffViewer_Fit.classList.add("TiffViewer_ButtonClass"); TiffViewer_Fit.classList.add("TiffViewer_ButtonClass");
TiffViewer_Fit.innerHTML = "fc"; TiffViewer_Fit.title = "Fullscreen";
TiffViewer_Fit.style.display = "none"; let 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"); const zoom = document.createElement("div");
zoom.style.position = "absolute"; zoom.classList.add("viewerSizeLabel");
zoom.style.right = -30;
zoom.style.top = -28; const TiffViewer_refresh = document.getElementById("refresh");
TiffViewer_refresh.classList.add("buttonRightClass")
TiffViewer_refresh.title = "refresh";
let refreshIcon = document.createElement("img");
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")
let 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")
let 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.classList.add("buttonRightClass")
TiffViewer_reject.title = "reject";
let rejectIcon = document.createElement("img");
rejectIcon.classList.add("tiffViewerIcons");
rejectIcon.src = "/WebGde/assets/reject_icon.png";
rejectIcon.alt = "refresh";
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;
//append all content declarations to modal //append all content declarations to modal
TiffViewer_refresh.append(refreshIcon)
TiffViewer_pause.append(pauseIcon)
TiffViewer_return.append(returnIcon)
TiffViewer_reject.append(rejectIcon)
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_Header.append(TiffViewer_detailcont);
TiffViewer_Body.append(TiffViewer_filecont); TiffViewer_Body.append(TiffViewer_filecont);
TiffViewer_Footer.append(zoom, TiffViewer_btncont); TiffViewer_Footer.append(zoom, TiffViewer_btncont);
...@@ -205,7 +291,7 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -205,7 +291,7 @@ function TIFFViewer(xhr, TiffViewerImageName) {
TiffViewer_detailcont.append(TiffViewer_filedetail, TiffViewer_pagedetail); TiffViewer_detailcont.append(TiffViewer_filedetail, TiffViewer_pagedetail);
TiffViewer_filecont.appendChild(TiffViewer_scrncont); TiffViewer_filecont.appendChild(TiffViewer_scrncont);
TiffViewer_scrncont.appendChild(TiffViewer_imgcont); 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 //get Content placeholders
const wrapper = document.querySelector("#TiffViewer_Screen"), header = wrapper.querySelector("#TiffViewer_ImageContainer"); const wrapper = document.querySelector("#TiffViewer_Screen"), header = wrapper.querySelector("#TiffViewer_ImageContainer");
...@@ -707,3 +793,5 @@ function TIFFViewer(xhr, TiffViewerImageName) { ...@@ -707,3 +793,5 @@ function TIFFViewer(xhr, TiffViewerImageName) {
} }
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