Skip to content

W
web-ui
Commit 8e6dfb73 by Earvin
Options

Right and left panel + popupDiv

parent 52a09e2d
Showing with 248 additions and 133 deletions
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 -->
......@@ -161,7 +102,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>
......@@ -188,7 +129,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 +147,28 @@
<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>
<div id='nextDiv'>
<button id="prev">prev</button>
<button id="next">next</button>
</div>
</div>
<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 id='TiffButtonRight'>
<button id='refresh'>Ref</button>
<button id='pause'>Pau</button>
<button id='return'>Ret</button>
<button id='reject'>Rej</button>
<div id='nextDiv'>
<div id="next"></div>
</div>
</div>
</div>
<div id="TiffModalFooter">
</div>
</div>
<!-- <img src="" id="tableBanner" />
......
WebGde/WebContent/src/BPO/rejectElement.js
......@@ -19,21 +19,22 @@ 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';
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();
//fieldForm.querySelector('input[type="submit"]').click(); */
};
window.addEventListener('keydown', function(e) {
if (e.ctrlKey == true && e.keyCode == 69){
let screenMain = document.getElementById('parent_Window');
let screenMain = document.getElementById("genericPopup");
screenMain.style.display = 'block';
rejectButton.disabled = true;
}
......@@ -41,27 +42,84 @@ window.addEventListener('keydown', function(e) {
function createRejectWindow(){
let popUpDisplay = document.createElement("div");
popUpDisplay.classList.add("genericPopup")
let screenMain = document.createElement('div');
screenMain.id = 'parent_Window';
screenMain.style.display = 'none';
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)));
}
screenMain.appendChild(checkLabelComponent('Others','','check5'));
screenMain.appendChild(createMessageBox('text-area'));
screenMain.appendChild(okCancelButton());
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(buttonPanel);
//set radio button text area value
let radioMessage = document.getElementById('check5');
let text = document.getElementById('text-area');
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){
......@@ -94,15 +152,27 @@ 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';
let okButton = document.createElement('button');
//okButton.setAttribute('type', 'submit');
okButton.id = 'reject_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 () {
saveExceptionToXml();//save xml
rejectElement();//reject on bpo
......@@ -110,23 +180,27 @@ function okCancelButton(){
rejectButton.disabled = false;
return false;
}
let cancelButton = document.createElement('button');
cancelButton.id = 'reject_Cancel';
cancelButton.innerHTML = 'cancel';
cancelButton.onclick = function () {
screenMain.style.display = 'none';
genericPopup.remove();
rejectButton.disabled = false;
return false;
}
buttonCont.appendChild(okButton);
buttonCont.appendChild(cancelButton);
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(){
......@@ -212,4 +286,5 @@ async function updateXMLException(xmlData){
alert(`Error ${response.status}: Xml Update`);
}
return false;
}
\ No newline at end of file
}
WebGde/WebContent/src/getFields/getFields.js
......@@ -57,6 +57,7 @@ const displayFields = async (parentID) => {
}
const submit = document.createElement('input')
submit.classList.add("submitButtons");
submit.type = 'submit'
div.appendChild(submit)
......
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,68 @@ function TIFFViewer(xhr, TiffViewerImageName) {
TiffViewer_btncont.id = "TiffViewer_ButtonContainer";
TiffViewer_btncont.classList.add("TiffViewercontainer");
const TiffViewer_hflip = document.createElement("button");
TiffViewer_hflip.id = "TiffViewer_FlipX";
TiffViewer_hflip.classList.add("TiffViewer_ButtonClass");
TiffViewer_hflip.innerHTML = "fh";
const TiffViewer_hflip = document.createElement("div");
TiffViewer_hflip.id = "TiffViewer_FlipX";
TiffViewer_hflip.classList.add("TiffViewer_ButtonClass");
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.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.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");
TiffViewer_Lrotate.id = "TiffViewer_RotateL";
TiffViewer_Lrotate.classList.add("TiffViewer_ButtonClass");
TiffViewer_Lrotate.innerHTML = "rl";
const TiffViewer_Lrotate = document.createElement("div");
TiffViewer_Lrotate.id = "TiffViewer_RotateL";
TiffViewer_Lrotate.classList.add("TiffViewer_ButtonClass");
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_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";
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_Pbtn = document.createElement("button");
TiffViewer_Pbtn.id = "TiffViewer_PrevButton";
......@@ -177,26 +210,79 @@ 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";
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.classList.add("TiffViewer_ButtonClass");
TiffViewer_Fit.innerHTML = "fc";
TiffViewer_Fit.style.display = "none";
TiffViewer_Fit.title = "Fullscreen";
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");
zoom.style.position = "absolute";
zoom.style.right = -30;
zoom.style.top = -28;
zoom.classList.add("viewerSizeLabel");
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;
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_Body.append(TiffViewer_filecont);
TiffViewer_Footer.append(zoom, TiffViewer_btncont);
......@@ -205,7 +291,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");
......@@ -706,4 +792,6 @@ function TIFFViewer(xhr, TiffViewerImageName) {
initHighlight();
}
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