Skip to content

W
web-ui
Commit 85819f59 by Lynette Lizardo
Options

redesign of loading screen

parent ff716e00
Showing with 136 additions and 29 deletions
WebGde/WebContent/WebGde-Widgets/config.js
......@@ -38,9 +38,9 @@ export const HIGH_LIGHT_SCHEMA = "./WebGde-Widgets/sample_schema/dbSchema_anno.
export const ROOT_FOLDER = "/WebGde-Widgets";
//this determines if the images will be retrieved from the gfs
export const DOMAIN = "http://184.73.93.160:8080"
export const DOMAIN = "http://54.173.201.199:8080"
export const CONTEXTROOT = "gfs-explorer-ws"
export const GFS_URL = "http://184.73.93.160:8080" + "/WebGde/svc/gfs-rest"
export const GFS_URL = "http://54.173.201.199:8080" + "/WebGde/svc/gfs-rest"
export const FOLDER_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-folder?parentPath=/Users/"
export const DOWNLOAD_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-download-link"
export const IS_RETRIEVE_FROM_GFS = "N"
......@@ -51,7 +51,7 @@ export const INVALID_KEYS = "F1,F2,F3,F4,F5,F6,F7,F8,F9,F10,F11,F12,PrintScreen
export const IS_RETRIEVE_FROM_BPO = "Y"
// export const BPO_URL = "http://35.171.20.94:8080/bpo-sqa/"
// export const CURRENT_NODE = "Web GDE"
export const BPO_URL = "http://184.73.93.160:8080/bpo/"
export const BPO_URL = "http://54.173.201.199:8080/bpo/"
export const CURRENT_NODE = "Web_GDE_DEV"
export const ENCODING_PASS = "PASS1"
export const NEXT_NODE = "Complete"
......
WebGde/WebContent/script.js
......@@ -49,14 +49,14 @@ async function initializeWebGDE(){
const url = urls[0];
let filename = url.split('/').pop();
let imageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_1");
// await IMAGE_VIEWER_OBJECT.createCurrentImage(filename.split(".").pop(), filename, imageBlob);
await IMAGE_VIEWER_OBJECT.createCurrentImage("pdf", filename, imageBlob);
await IMAGE_VIEWER_OBJECT.createCurrentImage(filename.split(".").pop(), filename, imageBlob);
//await IMAGE_VIEWER_OBJECT.createCurrentImage("pdf", filename, imageBlob);
const nextUrl = urls[1];
let nextFilename = nextUrl.split('/').pop();
let nextImageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_2");
// await IMAGE_VIEWER_OBJECT.createNextImage(nextFilename.split(".").pop(), nextFilename, nextImageBlob);
await IMAGE_VIEWER_OBJECT.createNextImage("jpeg", nextFilename, nextImageBlob);
await IMAGE_VIEWER_OBJECT.createNextImage(nextFilename.split(".").pop(), nextFilename, nextImageBlob);
//await IMAGE_VIEWER_OBJECT.createNextImage("jpeg", nextFilename, nextImageBlob);
sessionStorage.setItem("display_counter", 1);
document.getElementById("nextRecordImage").style.visibility = "visible";
......@@ -312,30 +312,15 @@ export function createLoadingScreen(){
}
let loader1 = document.createElement("div");
loader1.setAttribute("class","loader");
loader1.setAttribute("id","loader1");
let loader2 = document.createElement("div");
loader2.setAttribute("class","loader");
loader2.setAttribute("id","loader2");
let loader3 = document.createElement("div");
loader3.setAttribute("class","loader");
loader3.setAttribute("id","loader3");
loader1.setAttribute("class","loading");
loader1.setAttribute("id","loader");
let loader4 = document.createElement("div");
loader4.setAttribute("class","loader");
loader4.setAttribute("id","loader4");
let span = document.createElement("span");
span.textContent = "LOADING...";
span.id = "loaderTxt"
// let span = document.createElement("span");
// span.textContent = "LOADING...";
// span.id = "loaderTxt"
loaderContainer.appendChild(loader1);
loaderContainer.appendChild(loader2);
loaderContainer.appendChild(loader3);
loaderContainer.appendChild(loader4);
loaderContainer.appendChild(span);
centerContainer.appendChild(loaderContainer);
modalContainer.appendChild(centerContainer);
......
WebGde/WebContent/style.css
......@@ -314,7 +314,129 @@ textarea{
margin-top: 15%;
}
.loader{
.loading {
position: fixed;
/* z-index: 999; */
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Transparent Overlay */
.loading:before {
content: 'LOADING...';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));
background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8)); */
}
/* :not(:required) hides these rules from IE9 and below */
.loading:not(:required) {
/* hide "loading..." text */
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
.loading:not(:required):after {
content: '';
display: block;
font-size: 10px;
width: 1em;
height: 1em;
margin-top: -0.5em;
-webkit-animation: spinner 150ms infinite linear;
-moz-animation: spinner 150ms infinite linear;
-ms-animation: spinner 150ms infinite linear;
-o-animation: spinner 150ms infinite linear;
animation: spinner 150ms infinite linear;
border-radius: 0.5em;
-webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
}
/* Animation */
@-webkit-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* .loader{
border:3px solid #fff;
width:200px;
height:200px;
......@@ -361,7 +483,7 @@ textarea{
@keyframes rotate2{
0%{transform:rotateZ(360deg)}
100%{transform:rotateZ(0deg)}
}
} */
#loaderTxt{ color:#000000a1;
font-family:Arial;
......
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