Skip to content

W
web-ui
Commit 61a2542d by Owen Ryan Ang
Options

Initial commit for mobile gde. Added upload API

parent 3cddc7a7
Showing with 2238 additions and 987 deletions
WebGde/.classpath
......@@ -11,13 +11,6 @@
<attribute name="maven.pomderived" value="true"/>
</attributes>
</classpathentry>
<classpathentry kind="src" output="target/test-classes" path="src/test/java">
<attributes>
<attribute name="optional" value="true"/>
<attribute name="maven.pomderived" value="true"/>
<attribute name="test" value="true"/>
</attributes>
</classpathentry>
<classpathentry kind="con" path="org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER">
<attributes>
<attribute name="maven.pomderived" value="true"/>
......@@ -29,5 +22,12 @@
<attribute name="owner.project.facets" value="jst.web"/>
</attributes>
</classpathentry>
<classpathentry kind="src" output="target/test-classes" path="src/test/java">
<attributes>
<attribute name="test" value="true"/>
<attribute name="optional" value="true"/>
<attribute name="maven.pomderived" value="true"/>
</attributes>
</classpathentry>
<classpathentry kind="output" path="target/classes"/>
</classpath>
WebGde/.settings/org.eclipse.jdt.core.prefs
eclipse.preferences.version=1
org.eclipse.jdt.core.compiler.codegen.inlineJsrBytecode=enabled
org.eclipse.jdt.core.compiler.codegen.methodParameters=do not generate
org.eclipse.jdt.core.compiler.codegen.targetPlatform=1.8
org.eclipse.jdt.core.compiler.codegen.unusedLocal=preserve
org.eclipse.jdt.core.compiler.compliance=1.8
org.eclipse.jdt.core.compiler.debug.lineNumber=generate
org.eclipse.jdt.core.compiler.debug.localVariable=generate
org.eclipse.jdt.core.compiler.debug.sourceFile=generate
org.eclipse.jdt.core.compiler.problem.assertIdentifier=error
org.eclipse.jdt.core.compiler.problem.enablePreviewFeatures=disabled
org.eclipse.jdt.core.compiler.problem.enumIdentifier=error
......
WebGde/.settings/org.eclipse.wst.common.component
<?xml version="1.0" encoding="UTF-8"?><project-modules id="moduleCoreId" project-version="1.5.0">
<wb-module deploy-name="WebGde-0.0.1-SNAPSHOT">
<wb-resource deploy-path="/" source-path="/target/m2e-wtp/web-resources"/>
<wb-resource deploy-path="/" source-path="/WebContent" tag="defaultRootSource"/>
<wb-resource deploy-path="/WEB-INF/classes" source-path="/src/main/java"/>
<property name="java-output-path" value="/WebGde/build/classes"/>
<property name="context-root" value="WebGde"/>
</wb-module>
</project-modules>
<?xml version="1.0" encoding="UTF-8"?><project-modules id="moduleCoreId" project-version="1.5.0">
<wb-module deploy-name="WebGde-0.0.1-SNAPSHOT">
<wb-resource deploy-path="/" source-path="/target/m2e-wtp/web-resources"/>
<wb-resource deploy-path="/" source-path="/WebContent" tag="defaultRootSource"/>
<wb-resource deploy-path="/WEB-INF/classes" source-path="/src/main/java"/>
<property name="java-output-path" value="/WebGde/build/classes"/>
<property name="context-root" value="WebGde"/>
</wb-module>
</project-modules>
WebGde/WebContent/WEB-INF/web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
id="WebApp_ID" version="3.1">
<display-name>WebGde</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>WEBGDERest</servlet-name>
<servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
<init-param>
<param-name>jersey.config.server.provider.packages</param-name>
<param-value>com.svi.webgde.restservice.services</param-value>
</init-param>
<init-param>
<param-name>jersey.config.server.provider.classnames</param-name>
<param-value>org.glassfish.jersey.media.multipart.MultiPartFeature</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>WEBGDERest</servlet-name>
<url-pattern>/svc/*</url-pattern>
</servlet-mapping>
<context-param>
<param-name>CONFIG_INI_LOCATION</param-name>
<param-value>/WEB-INF/config/config.ini</param-value>
</context-param>
<context-param>
<param-name>AWS_CREDENTIALS_INI_LOCATION</param-name>
<param-value>/WEB-INF/config/credentials.properties</param-value>
</context-param>
<context-param>
<param-name>JWT_LOCATION</param-name>
<param-value>/WEB-INF/assets/secret.key</param-value>
</context-param>
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
id="WebApp_ID" version="3.1">
<display-name>WebGde</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>WEBGDERest</servlet-name>
<servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
<init-param>
<param-name>jersey.config.server.provider.packages</param-name>
<param-value>com.svi.webgde.restservice.services</param-value>
</init-param>
<init-param>
<param-name>jersey.config.server.provider.classnames</param-name>
<param-value>org.glassfish.jersey.media.multipart.MultiPartFeature</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>WEBGDERest</servlet-name>
<url-pattern>/svc/*</url-pattern>
</servlet-mapping>
<context-param>
<param-name>CONFIG_INI_LOCATION</param-name>
<param-value>/WEB-INF/config/config.ini</param-value>
</context-param>
<context-param>
<param-name>AWS_CREDENTIALS_INI_LOCATION</param-name>
<param-value>/WEB-INF/config/credentials.properties</param-value>
</context-param>
<context-param>
<param-name>JWT_LOCATION</param-name>
<param-value>/WEB-INF/assets/secret.key</param-value>
</context-param>
</web-app>
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/DataInputWidget/config.js
//Data Input Field Config
export var SCHEMA_FILE_PATH = "./WebGde-Widgets/sample_schema/HR Speed Test schema.json";
export var SCHEMA_FILE_PATH = "./WebGde-Widgets/sample_schema/newfields.json";
// export var SCHEMA_FILE_PATH = "./WebGde-Widgets/sample_schema/HR Speed Test schema.json";
//DBLookup Webservice URL
export var DB_URL = "http://localhost:8080/WebGde/svc/gfs-rest/db-lookup"
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/DataInputWidget/generateFields.js
......@@ -107,7 +107,7 @@ export async function generateFields(inputSchema, containerId) {
// container.appendChild(submit)
const fields = sessionStorage.getItem("fields");
if(fields) {
if (fields) {
for (let [k, v] of Object.entries(JSON.parse(sessionStorage.getItem("fields")))) {
for (let key of Object.keys(schema[doctype][section])) {
if (schema[doctype][section][key].aka == k) {
......@@ -125,12 +125,12 @@ export async function generateFields(inputSchema, containerId) {
while (elements.length > 0) {
elements[0].parentNode.removeChild(elements[0]);
}
const secElements = document.getElementsByClassName(sessionStorage.getItem("currentDoctype"));
while (secElements.length > 0) {
secElements[0].parentNode.removeChild(secElements[0]);
}
let doctypes = schema[this.value];
let underscoredValue = this.value.replaceAll(" ", "_");
sessionStorage.setItem("currentDoctype", underscoredValue);
......@@ -144,7 +144,7 @@ export async function generateFields(inputSchema, containerId) {
sessionStorage.setItem("currentSection", underscoredKey);
createSection('Section', container, doctypes, underscoredValue);
container = await deconstruct(doctypes[key], container, underscoredKey);
// const submit = document.createElement('input')
// submit.classList.add("submitButtons");
// submit.classList.add(underscoredKey);
......@@ -152,7 +152,7 @@ export async function generateFields(inputSchema, containerId) {
// container.appendChild(submit)
break;
}
});
});
$(document.body).on("change", "#Section", async function () {
const elements = document.getElementsByClassName(sessionStorage.getItem("currentSection"));
......@@ -361,6 +361,328 @@ const inputDate = (key, validation) => {
* @returns
* created input field element
*/
const inputTime = (key, validation) => {
try {
const {
mandatory,
fieldLength
} = validation
const input = document.createElement('input')
input.setAttribute('id', `${key}`)
input.setAttribute('name', `${key}`)
input.setAttribute('type', 'time')
input.addEventListener('focusout', handleInput)
mandatory ? input.setAttribute('required', 'true') : null
return input
} catch (err) {
throw err
}
}
/**
*
* @param {*} key
* will serve as id of input field
* @param {*} validation
* validation of field from schema
* @returns
* created input field element
*/
const inputDateRange = (key, validation) => {
try {
const {
mandatory,
fieldLength
} = validation
const dateRangePicker = document.createElement('div')
const dateRange = document.createElement('div')
dateRangePicker.classList.add('date-rangepicker');
dateRange.classList.add('date-range');
dateRangePicker.appendChild(dateRange);
const input = document.createElement('input')
input.setAttribute('id', `${key}`)
input.setAttribute('name', `${key}`)
input.setAttribute('type', 'date')
input.addEventListener('focusout', handleInput)
const startDate = document.createElement('div')
startDate.setAttribute('class', 'dateContainer')
startDate.appendChild(input);
dateRange.appendChild(startDate);
mandatory ? input.setAttribute('required', 'true') : null
const dash = document.createElement('label')
dash.setAttribute('class', 'dash')
dash.innerHTML = ' to '
dateRange.appendChild(dash)
const input2 = document.createElement('input')
input2.setAttribute('id', `${key}`)
input2.setAttribute('name', `${key}`)
input2.setAttribute('type', 'date')
input2.addEventListener('focusout', handleInput)
const endDate = document.createElement('div')
endDate.setAttribute('class', 'dateContainer')
endDate.appendChild(input2);
dateRange.appendChild(endDate);
mandatory ? input2.setAttribute('required', 'true') : null
return dateRangePicker
} catch (err) {
throw err
}
}
/**
*
* @param {*} key
* will serve as id of input field
* @param {*} validation
* validation of field from schema
* @returns
* created input field element
*/
const inputVideoUpload = (key, validation) => {
try {
const {
mandatory,
fieldLength
} = validation
const container = document.createElement('div');
const container2 = document.createElement('div');
container.appendChild(container2);
container2.classList.add('image-capture');
const input = document.createElement('input');
input.setAttribute('id', `${key}`);
input.setAttribute('name', `${key}`);
input.setAttribute('type', 'file');
// Add an event listener to handle when a file is selected
input.addEventListener('change', (event) => {
const file = event.target.files[0];
if (file) {
const img = document.getElementById('zz');
const thumb = document.getElementById('thumbnail');
if (file.type.startsWith('image/')) {
// If it's an image file, display it directly
const reader = new FileReader();
reader.onload = function (e) {
img.src = e.target.result;
img.style.display = 'inline';
thumb.style.display = 'none';
};
reader.readAsDataURL(file);
} else if (file.type.startsWith('video/')) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
thumbnail.src = e.target.result;
thumbnail.style.display = 'inline';
// Hide the img tag since we're showing the video thumbnail
document.getElementById('zz').style.display = 'none';
}
}
else {
console.log('Unsupported file type');
}
}
});
const dash = document.createElement('label');
dash.setAttribute('class', 'dash');
dash.innerHTML = ' or ';
const input2 = document.createElement('input');
input2.setAttribute('id', `${key}`);
input2.setAttribute('name', `${key}`);
input2.setAttribute('type', 'button');
input2.setAttribute('value', 'Record Video');
const img = document.createElement('img');
const thumbnail = document.createElement('video');
thumbnail.setAttribute('style', 'display: none');
thumbnail.setAttribute('id', 'thumbnail');
img.setAttribute('id', 'zz');
img.setAttribute('style', 'display: none');
// Append all elements to the container
container2.appendChild(input);
container2.appendChild(dash);
container2.appendChild(input2);
container2.appendChild(img);
container2.appendChild(thumbnail);
mandatory ? input.setAttribute('required', 'true') : null
return container
} catch (err) {
throw err
}
}
/**
*
* @param {*} key
* will serve as id of input field
* @param {*} validation
* validation of field from schema
* @returns
* created input field element
*/
const inputAudioUpload = (key, validation) => {
try {
const {
mandatory,
fieldLength
} = validation
const container = document.createElement('div')
const container2 = document.createElement('div')
container2.classList.add('image-capture');
const input = document.createElement('input')
input.setAttribute('id', `${key}`)
input.setAttribute('name', `${key}`)
input.setAttribute('type', 'file')
input.setAttribute('accept', 'audio/*')
const dash = document.createElement('label')
dash.setAttribute('class', 'dash')
dash.innerHTML = ' or '
const input2 = document.createElement('input')
input2.setAttribute('id', `${key}`)
input2.setAttribute('name', `${key}`)
input2.setAttribute('type', 'button')
input2.setAttribute('value', 'Record Audio')
input.addEventListener('change', handleInput)
container.appendChild(container2);
container2.appendChild(input);//file input
container2.appendChild(dash);//or label
container2.appendChild(input2);//record button
mandatory ? input.setAttribute('required', 'true') : null
return container
} catch (err) {
throw err
}
}
/**
*
* @param {*} key
* will serve as id of input field
* @param {*} validation
* validation of field from schema
* @returns
* created input field element
*/
const inputChecklist = (key, validation) => {
try {
const {
mandatory,
items
} = validation
var dropdown1 = document.createElement('div');
dropdown1.classList.add('dropdown');
var dropdownContent = document.createElement('div');
dropdownContent.classList.add('dropdown-content');
dropdown1.appendChild(dropdownContent);
// Create the checkboxes for each item
items.forEach(function (item) {
var div = document.createElement('div');
div.classList.add('checkbox');
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.value = item.toLowerCase().replace(' ', '');
div.appendChild(checkbox);
var label = document.createTextNode(item);
div.appendChild(label);
dropdownContent.appendChild(div)
})
return dropdown1
} catch (err) {
throw err
}
}
/**
*
* @param {*} key
* will serve as id of input field
* @param {*} validation
* validation of field from schema
* @returns
* created input field element
*/
const inputRadiolist = (key, validation) => {
try {
const {
mandatory,
items
} = validation
var dropdown1 = document.createElement('div');
dropdown1.classList.add('dropdown');
var dropdownContent = document.createElement('div');
dropdownContent.classList.add('dropdown-content');
dropdown1.appendChild(dropdownContent);
//create a radio button for each item
items.forEach(function (item) {
var radioDiv = document.createElement('div');
radioDiv.classList.add('radio-like-checkbox');
var radio = document.createElement('input');
radio.type = 'radio';
radio.name = 'radioGroup';
var label = document.createTextNode(item);
radio.appendChild(label);
radioDiv.appendChild(radio);
radioDiv.appendChild(label);
dropdownContent.appendChild(radioDiv);
})
return dropdown1
} catch (err) {
throw err
}
}
/**
*
* @param {*} key
* will serve as id of input field
* @param {*} validation
* validation of field from schema
* @returns
* created input field element
*/
const inputDropdown = (key, validation) => {
try {
const {
......@@ -557,6 +879,7 @@ const deconstruct = async (section, container, classAttribute) => {
let input
switch (fieldLabel && validation && validation.collection) {
case 'textarea':
case 'alphanumeric':
......@@ -577,6 +900,24 @@ const deconstruct = async (section, container, classAttribute) => {
case 'dblookup':
input = await inputDbLookup(key, validation)
break
case 'video-upload':
input = inputVideoUpload(key, validation)
break
case 'audio-upload':
input = inputAudioUpload(key, validation)
break
case 'checklist':
input = inputChecklist(key, validation)
break
case 'radiolist':
input = inputRadiolist(key, validation)
break
case 'timepicker':
input = inputTime(key, validation)
break
case 'daterange':
input = inputDateRange(key, validation)
break
default:
input = noValidation()
break
......@@ -754,7 +1095,7 @@ export function saveForm(index) {
}
});
saveXMLToStorage(index,values);
saveXMLToStorage(index, values);
// var formArray = JSON.parse(sessionStorage.getItem('formArray'));
// //formArray.push(formValues);
// if (formArray) {
......@@ -772,7 +1113,7 @@ export function saveForm(index) {
// sessionStorage.setItem('formArray', JSON.stringify(formArray));
}
function saveXMLToStorage(index, values){
function saveXMLToStorage(index, values) {
var formArray = JSON.parse(sessionStorage.getItem('formArray'));
//formArray.push(formValues);
if (formArray) {
......@@ -831,8 +1172,8 @@ export async function populateFields(imagePath) {
document.querySelector('#DocType').value = doctype;
sessionStorage.setItem("doctype", doctype);
const docType = $("#DocType");
if(docType[0]){
const docType = $("#DocType");
if (docType[0]) {
for (let i = 0; i < docType[0].options.length; i++) {
if (docType[0].options[i].value == doctype) {
docType[0].options[i].selected = "selected"
......@@ -843,11 +1184,11 @@ export async function populateFields(imagePath) {
sessionStorage.setItem("section", section);
document.querySelector('#Section').value = section;
const sectionElem =$("Section");
const sectionElem = $("Section");
for (let i = 0; i < document.getElementById("Section").options.length; i++) {
if (document.getElementById("Section").options[i].value == section) {
document.getElementById("Section").options[i].selected = "selected"
if(sectionElem[0]){
if (sectionElem[0]) {
sectionElem.trigger('change');
}
}
......@@ -896,32 +1237,32 @@ export async function populateFields(imagePath) {
}
export function clearForm() {
// Check if the form element exists
const formElement = document.getElementById("fields");
if (formElement) {
// Retain the selected 'doctype'
const docTypeField = formElement.querySelector('#DocType');
const doctype = docTypeField.value || docTypeField.options[docTypeField.selectedIndex].value;
// Clear the form by resetting its fields
formElement.reset();
// Set the selected 'doctype' back
const options = docTypeField.options;
// Check if the form element exists
const formElement = document.getElementById("fields");
if (formElement) {
// Retain the selected 'doctype'
const docTypeField = formElement.querySelector('#DocType');
const doctype = docTypeField.value || docTypeField.options[docTypeField.selectedIndex].value;
// Clear the form by resetting its fields
formElement.reset();
// Set the selected 'doctype' back
const options = docTypeField.options;
const { elements } = formElement
for (let i = 0; i < options.length; i++) {
if (options[i].value === doctype) {
for (let element of elements) {
for (let i = 0; i < options.length; i++) {
if (options[i].value === doctype) {
for (let element of elements) {
const { id } = element
if (id === 'DocType') {
element.selectedIndex = i
}
}
}
}
} else {
console.log("Form element not found");
}
}
}
} else {
console.log("Form element not found");
}
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/DataInputWidget/style.css
*{
-webkit-font-smoothing: auto;
font-size: 11px;
* {
-webkit-font-smoothing: auto;
font-size: 16px;
letter-spacing: 0.1em;
text-rendering: optimizeLegibility;
font-weight: normal;
font-family: OpenSans, sans-serif;
font-family: Inter;
font-style: normal;
box-sizing: border-box;
}
.text-style {
......@@ -13,28 +14,29 @@
text-align: center;
}
#input-field-container{
height : 600px;
width : 400px;
#input-field-container {
padding: 10px;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
overflow: auto;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
resize: both;
/* resize: both; */
}
#input-field-container::-webkit-scrollbar {
width: 10px;
width: 20px;
}
#input-field-container::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
#input-field-container::-webkit-scrollbar-thumb {
background-color: #888;
}
#input-field-container::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
......@@ -43,21 +45,35 @@
display: flex;
flex-direction: column;
min-width: 500px;
}
input[type=text] {
width: 100%;
}
/* .field-header{
flex-grow: 0.1;
} */
/* .SECTION1.inputField {
width: 100%;
height: 100%;
}
} */
/*
.SECTION2.inputField {
border: none;
outline: none;
width: 100%;
height: 100%;
} */
} */
.field-header {
color: white;
align-self: center;
}
.Section {
width: 100%;
height: 25px !important;
}
.inputField {
width: 100%;
height: 100%;
......@@ -67,16 +83,17 @@ input[type=text] {
width: 100% !important;
}
option {
border: none;
outline: none;
}
.fieldContainer {
/* layout config */
display: flex;
flex-direction: row;
flex-direction: column;
/* border config */
border-style: solid;
border-width: thin;
border-color:#446397;
padding: 0px 0px 0px 4px;
padding: 0px 5px 10px 4px;
flex-wrap: nowrap;
}
......@@ -84,17 +101,35 @@ input[type=text] {
background-color: yellow;
}
.image-capture {
display: flex;
flex-direction: column;
width: 100%;
padding-bottom: 10px;
padding-top: 10px;
}
#fields {
padding: 18px;
border-radius: 25px;
width: auto;
display: flex;
flex: 1;
max-height: 100vh;
display: inline-block;
height: auto;
background-color: white;
overflow-y: auto;
display: flex;
flex-direction: column;
border-style: solid;
border-width: thin;
border-color: #446397;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
}
#fields>div {
background-color:white;
background-color: white;
}
.submitButtons {
......@@ -104,52 +139,159 @@ input[type=text] {
font-size: 13px;
width: 93px;
margin-top: 10px;
margin-bottom: 15px;
cursor: pointer;
background-color: white;
padding: 10px;
width: 100%;
border-radius: 5px;
outline: none;
border: none;
font-size: 16px;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
}
.labelContainer {
@media only screen and (max-width: 412px) {
.date-range {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
.dash {
align-self: center;
padding: 6px;
}
.date-range {
display: flex;
flex-direction: row;
width: 98px;
padding: 3px;
margin-top: 4px;
justify-content: space-between;
}
.dateContainer {
width: 100%;
}
label {
font-size: 14px;
font-weight: 700;
}
.captureButtons {
display: inline-block;
width: 100%;
overflow-x: clip;
flex-wrap: nowrap;
flex-grow: 1;
border-radius: 2px;
background-color: white;
border-style: solid;
border-width: 0.1cm;
border-color: #d4d2d2;
}
.labelContainer {
width: 100%;
padding: 2px;
margin-top: 5px;
}
.inputContainer {
display: inline-block;
width: 100%;
padding-left: 3px;
overflow-x: clip;
flex-wrap: nowrap;
flex-grow: 1;
border-radius: 2px
}
.input-invalid {
border-color: #ff3333 !important;
border-style: solid;
border-radius: inherit;
}
.input-valid {
/* border-color: #000000 !important; */
border-style: solid;
border-radius: inherit;
}
input:focus, textarea:focus{
/* background-color: yellow; */
input:focus,
textarea:focus {
background-color: yellow;
border: 0px;
border-radius: inherit;
}
input[type=text] {
input[type=text],
input[type=date],
input[type=time] {
width: 100%;
height: 25px;
padding: 20px;
}
input[type=checkbox],
input[type=radio] {
width: 16px;
height: 16px;
size: 16px;
}
.radio-like-checkbox {
display: flex;
padding: 5px;
}
.checkbox {
display: flex;
padding: 5px;
}
input[type=file],
input[type=button] {
width: 100%;
padding: 5px;
border-style: solid;
border-width: thin;
border-color: gray;
}
.dropdown-content {
padding: 10px;
border-style: solid;
border-width: thin;
border-color: gray;
}
select {
width: 100%;
height: 28px;
border-style: solid;
border-width: thin;
border-color: gray;
padding: 2px;
color: #444;
}
textarea{
textarea {
resize: none;
padding: 20px;
}
#text-area{width: 91%;font-size: 11px;padding: 9px 9px;margin-left: 15px;margin-top: 5px;margin-bottom: 5px;height: 103px;}
\ No newline at end of file
#text-area {
width: 91%;
font-size: 11px;
padding: 9px 9px;
margin-left: 15px;
margin-top: 5px;
margin-bottom: 5px;
height: 103px;
}
\ No newline at end of file
WebGde/WebContent/WebGde-Widgets/DataInputWidget/validateInput.js
......@@ -32,7 +32,11 @@ export const validateInput = (fieldID, value) => {
return validateSpecific(validation, value)
case 'numeric':
return validateNumeric(validation, value)
case 'timepicker':
return validateTime(validation, value)
case 'date':
case 'daterange':
return validateDateRange(validation, value)
case 'datepicker':
// console.log('date')
return validateDate(validation, value)
......@@ -168,6 +172,29 @@ const validateNumeric = (validation, value) => {
* valid - true if no errors found after validation
* errors - list of errors found during validation
*/
const validateDateRange = (validation, value) => {
const { mandatory, regexformat } = validation
try{
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is empty'] }
return { valid: true }
} catch(err) {
throw err
}
}
/**
*
* @param {*} validation
* object containing rules for validating date inputs
* @param {*} value
* input to be checked
* @returns
* object containg:
* valid - true if no errors found after validation
* errors - list of errors found during validation
*/
const validateDate = (validation, value) => {
const { mandatory, regexformat } = validation
......@@ -180,6 +207,30 @@ const validateDate = (validation, value) => {
}
}
/**
*
* @param {*} validation
* object containing rules for validating date inputs
* @param {*} value
* input to be checked
* @returns
* object containg:
* valid - true if no errors found after validation
* errors - list of errors found during validation
*/
const validateTime = (validation, value) => {
const { mandatory, regexformat } = validation
try{
if(mandatory && (value.length===0 || !value.match(/\S/g))) return { valid: false, errors: ['Field is empty'] }
return { valid: true }
} catch(err) {
throw err
}
}
/**
*
......
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://54.146.187.173:8080"
export const DOMAIN = "http://3.86.35.226:8080"
export const CONTEXTROOT = "gfs-explorer-ws"
export const GFS_URL = "http://54.146.187.173:8080" + "/WebGde/svc/gfs-rest"
export const GFS_URL = "http://3.86.35.226:8080" + "/MobileGde/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,8 +51,8 @@ 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://54.146.187.173:8080/bpo/"
export const CURRENT_NODE = "Web_GDE_DEV"
export const BPO_URL = "http://3.86.35.226:8080/bpo/"
export const CURRENT_NODE = "Mobile_GDE_DEV"
export const ENCODING_PASS = "PASS1"
export const NEXT_NODE = "Complete"
export const EXCEPTION_NODE = "Exception"
......
WebGde/WebContent/WebGde-Widgets/sample_schema/newfields.json 0 → 100644
{
"ACCOUNTING DOCUMENTS": {
"SECTION1": {
"Checkbox_List": {
"fieldLabel": "Checkbox List",
"aka": "field28",
"source": "s",
"validation": {
"fieldLength": 30,
"collection": "checklist",
"items": [
"sample-item1",
"sample-item2",
"sample-item3",
"sample-item4",
"sample-item5"
],
"mandatory": true
}
},
"Radio_List": {
"fieldLabel": "Radio List",
"aka": "field28",
"source": "s",
"validation": {
"fieldLength": 30,
"collection": "radiolist",
"items": [
"sample-item1",
"sample-item2",
"sample-item3",
"sample-item4",
"sample-item5"
],
"mandatory": true
}
},
"Upload_Audio": {
"fieldLabel": "Upload or Record Audio",
"aka": "field7",
"validation": {
"collection": "audio-upload",
"mandatory": true
}
},
"Upload Video": {
"fieldLabel": "Upload or Record Video",
"aka": "field7",
"validation": {
"collection": "video-upload",
"mandatory": true
}
},
"Time": {
"fieldLabel": "Time",
"aka": "field5",
"validation": {
"fieldLength": 20,
"collection": "timepicker",
"mandatory": false
}
},
"Date_Range": {
"fieldLabel": "Date Range",
"aka": "field5",
"validation": {
"fieldLength": 20,
"collection": "daterange",
"mandatory": false
}
}
},
"SECTIONNEXT": {
"Name": {
"fieldLabel": "Name",
"aka": "field7",
"validation": {
"fieldLength": 100,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": true
}
},
"Subject": {
"fieldLabel": "Subject",
"aka": "field8",
"validation": {
"fieldLength": 200,
"collection": "alphanumeric",
"mandatory": true
}
},
"Document_No": {
"fieldLabel": "Document No",
"aka": "field6",
"validation": {
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*={}[]:;/\"|\\<>",
"mandatory": true
}
},
"Date": {
"fieldLabel": "Date",
"aka": "field5",
"validation": {
"fieldLength": 20,
"collection": "datepicker",
"mandatory": false
}
}
}
},
"BANK APPLICATION FORMS": {
"SECTION2": {
"Checkbox_List": {
"fieldLabel": "Checkbox List",
"aka": "field28",
"source": "s",
"validation": {
"fieldLength": 30,
"collection": "checklist",
"items": [
"sample-item1",
"sample-item2",
"sample-item3",
"sample-item4",
"sample-item5"
],
"mandatory": true
}
},
"Radio List": {
"fieldLabel": "Radio List",
"aka": "field28",
"source": "s",
"validation": {
"fieldLength": 30,
"collection": "radiolist",
"items": [
"sample-item1",
"sample-item2",
"sample-item3",
"sample-item4",
"sample-item5"
],
"mandatory": true
}
},
"Upload_Audio": {
"fieldLabel": "Upload or Record Audio",
"aka": "field7",
"validation": {
"collection": "audio-upload",
"mandatory": true
}
},
"Upload_Video": {
"fieldLabel": "Upload or Record Video",
"aka": "field7",
"validation": {
"collection": "video-upload",
"mandatory": true
}
},
"Time": {
"fieldLabel": "Time",
"aka": "field5",
"validation": {
"fieldLength": 20,
"collection": "timepicker",
"mandatory": false
}
},
"Date_Range": {
"fieldLabel": "Date Range",
"aka": "field5",
"validation": {
"fieldLength": 20,
"collection": "daterange",
"mandatory": false
}
}
}
},
"HR FILES": {
"SECTION3": {
"Upload_Audio": {
"fieldLabel": "Upload Audio",
"aka": "field7",
"validation": {
"collection": "audio-upload",
"mandatory": true
}
},
"Upload_Video": {
"fieldLabel": "Upload Video",
"aka": "field7",
"validation": {
"collection": "video-upload",
"mandatory": true
}
},
"Name": {
"fieldLabel": "Name",
"aka": "field10",
"validation": {
"fieldLength": 100,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": true
}
},
"Subject": {
"fieldLabel": "Subject",
"aka": "field12",
"validation": {
"fieldLength": 200,
"collection": "alphanumeric",
"mandatory": true
}
},
"Employee_No": {
"fieldLabel": "Employee No",
"aka": "field11",
"validation": {
"fieldLength": 30,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*={}[]:;/\"|\\<>",
"mandatory": false
}
},
"Date": {
"fieldLabel": "Date",
"aka": "field9",
"validation": {
"fieldLength": 20,
"collection": "datepicker",
"mandatory": false
}
}
}
}
}
\ No newline at end of file
WebGde/WebContent/index.html
......@@ -17,8 +17,8 @@
<script src="https://cdn.rawgit.com/seikichi/tiff.js/master/tiff.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/jszip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.0/xlsx.js"></script>
<script src="https://auth.svi.cloud/auth/js/keycloak.js"></script>
<script type="text/javascript" src="./keycloak-login.js"></script>
<!-- <script src="https://auth.svi.cloud/auth/js/keycloak.js"></script>
<script type="text/javascript" src="./keycloak-login.js"></script> -->
</head>
<body>
......
WebGde/WebContent/script.js
import { fetchSchema } from "./WebGde-Widgets/DataInputWidget/fetchSchema.js";
import { displayField } from "./WebGde-Widgets/DataInputWidget/displayFieldClass.js";
import { ImageViewer } from "./WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.js";
import { IndexedDBStorage } from "./WebGde-Widgets/ImageViewerWidget/modules/storage/indexedDBStorage.js";
import { createInfoModal, createModal } from "./WebGde-Widgets/genericPopup/genericPopup.js";
import { hightlightEventListeners } from "./WebGde-Widgets/ImageViewerWidget/modules/highlight/highlightUtil.js";
import { HIGH_LIGHT_SCHEMA } from "./WebGde-Widgets/config.js";
import { Highlight } from "./WebGde-Widgets/ImageViewerWidget/modules/highlight/highlightClass.js";
import { BPO } from "./WebGde-Widgets/BPO/getElement.js";
import { DocumentControlWidget } from "./WebGde-Widgets/documentControlWidget/documentControlWidget.js";
import { fetchSchema } from "./WebGde-Widgets/DataInputWidget/fetchSchema.js";
// import { DocumentControlWidget } from "./WebGde-Widgets/documentControlWidget/documentControlWidget.js";
import { INDEXED_DB_STORAGE, HIGHLIGHT_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_NAME, INDEXED_DB_TBL_NAME, setIndexedDBStorage, setHighlightObject, setImageViewerObject, setBPOObject, BPO_OBJECT, DISPLAY_FIELD_OBJECT, setDisplayFieldObject, activateGDE, setDocumentControlObject, DOCUMENT_CONTROL_OBJECT, IS_GDE_ACTIVATED } from "./WebGde-Widgets/globalVariable.js";
import { searchStringInArray, startMetricCapture, keyArray, stopMetricCapture, saveMetrics, interval, pauseMetricCapture } from "./WebGde-Widgets/captureMetrics/captureMetrics.js";
import { submitForm } from "./WebGde-Widgets/Submit/submit.js";
import { populateFields, populateForm } from "./WebGde-Widgets/DataInputWidget/generateFields.js";
import { returnElementBPO } from "./WebGde-Widgets/BPO/returnElement.js";
export async function startApplication() {
createLoadingScreen();
if (IS_GDE_ACTIVATED && sessionStorage.getItem("element_id") !== null) {
checkBPODetails();
await initializeWebGDE();
// initializeImageDisplay();
// DISPLAY_FIELD_OBJECT.clearForm();
// populateForm(sessionStorage.getItem("display_counter"));
} else {
await initializeWebGDE();
}
}
async function initializeWebGDE() {
let isElement = false;
if (!BPO_OBJECT) {
setBPOObject(new BPO());
isElement = await BPO_OBJECT.getRandomElement();
} else {
isElement = true;
}
if (isElement) {
activateGDE(); //
setIndexedDBStorage(new IndexedDBStorage(INDEXED_DB_NAME, INDEXED_DB_TBL_NAME));
await createWebGdeInterface(null);
await initializeImageDisplay();
let urls = JSON.parse(sessionStorage.getItem("dir_files"));
let current = (parseInt(sessionStorage.getItem("display_counter")));
await populateFields(urls[current]);
setHighlightObject(new Highlight("imageContainer", "currentImage", HIGH_LIGHT_SCHEMA));
HIGHLIGHT_OBJECT.createHighlight();
hightlightEventListeners();
setDocumentControlObject(new DocumentControlWidget());
document.getElementById("input-field-container").appendChild(DOCUMENT_CONTROL_OBJECT.getWidget());
removeLoadingScreen();
init();
} else {
function exitTool() {
logoutKeycloak();
}
removeLoadingScreen();
createInfoModal(exitTool, 'Log out', "No Element Available");
}
// document.addEventListener("DOMContentLoaded", async (event) => {
// });
}
async function checkBPODetails() {
setBPOObject(new BPO());
let elementId = sessionStorage.getItem("element_id");
const retElement = await BPO_OBJECT.getReturnedElement(elementId);
if (retElement.errorCode == 0) {
sessionStorage.setItem("element_id", retElement.element.elementId);
sessionStorage.setItem("element_file_loc", retElement.element.fileLocation);
const lst = await BPO_OBJECT.isLSTExisting(retElement);
if (lst.isExisting) {
const xml = await BPO_OBJECT.isXMLExisting(retElement);
if (xml.isExisting) {
const xmlString = await xml.data.join('').replace('\t', '');
//const lastImage = getXmlLastImage(xmlString);
sessionStorage.setItem('section', getXmlSection(xmlString));
sessionStorage.setItem('doctype', getXmlDocType(xmlString));
}
let dir = await lst.data;
sessionStorage.setItem("dir_files", JSON.stringify(dir));
return true;
} else {
let dir_files = sessionStorage.getItem("dir_files");
let fileLocation = sessionStorage.getItem("element_file_loc");
if (dir_files && fileLocation) {
return true;
}
await BPO_OBJECT.returnElement(elementId);
function exitTool() {
logoutKeycloak();
}
removeLoadingScreen();
createInfoModal(exitTool,'Log out', "Please log-out and try again.");
sessionStorage.clear();
}
} else {
await BPO_OBJECT.returnElement(elementId);
window.location.reload();
}
document.addEventListener("DOMContentLoaded", function() {
startApplication();
});
export async function startApplication(){
createLoadingScreen();
await initializeWebGDE();
}
async function initializeImageDisplay() {
let urls = JSON.parse(sessionStorage.getItem("dir_files"));
let maxImagesToStore = urls.length <= 3 ? urls.length : 3;
for (let index = 0; index < maxImagesToStore; index++) {
const url = urls[index];
await INDEXED_DB_STORAGE.storeImageFile(url, 'imageNum_' + index);
}
if (maxImagesToStore > 1) {
const url = urls[0];
if(url.startsWith('http')){
let imageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_0");
await IMAGE_VIEWER_OBJECT.createCurrentImage(null, '', imageBlob);
async function initializeWebGDE(){
await createWebGdeInterface(null);
// setDocumentControlObject(new DocumentControlWidget());
// document.getElementById("input-field-container").appendChild(DOCUMENT_CONTROL_OBJECT.getWidget());
removeLoadingScreen();
}else{
let filename = url.split('/').pop();
let imageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_0");
await IMAGE_VIEWER_OBJECT.createCurrentImage(filename.split(".").pop(), filename, imageBlob);
}
const nextUrl = urls[1];
if(nextUrl.startsWith('http')){
let nextImageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_1");
await IMAGE_VIEWER_OBJECT.createNextImage(null, '', nextImageBlob);
}else{
let nextFilename = nextUrl.split('/').pop();
let nextImageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_1");
await IMAGE_VIEWER_OBJECT.createNextImage(nextFilename.split(".").pop(), nextFilename, nextImageBlob);
}
sessionStorage.setItem("current_page", 1);
sessionStorage.setItem("display_counter", 0);
document.getElementById("nextRecordImage").style.visibility = "visible";
document.getElementById("previousRecordImage").style.visibility = "hidden";
} else {
const url = urls[0];
if(url.startsWith('http')){
let imageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_0");
await IMAGE_VIEWER_OBJECT.createCurrentImage(null, '', imageBlob);
}else{
let filename = url.split('/').pop();
let imageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_0");
await IMAGE_VIEWER_OBJECT.createCurrentImage(filename.split(".").pop(), filename, imageBlob);
}
sessionStorage.setItem("current_page", 1);
sessionStorage.setItem("display_counter", 0);
document.getElementById("nextRecordImage").style.visibility = "hidden";
document.getElementById("previousRecordImage").style.visibility = "hidden";
}
}
async function createWebGdeInterface(GDEContainer) {
let gdeContainer = document.createElement("div");
gdeContainer.setAttribute("class", "container web-gde-container");
let imageViewerContainer = document.createElement("div");
imageViewerContainer.setAttribute("id", "imageViewerContainer");
let dataInputContainer = document.createElement("div");
dataInputContainer.setAttribute("id", "input-field-container");
// dataInputContainer.setAttribute("class", "sidebar");
gdeContainer.appendChild(imageViewerContainer);
// gdeContainer.appendChild(imageViewerContainer);
gdeContainer.appendChild(dataInputContainer);
if (GDEContainer) {
......@@ -189,9 +36,9 @@ async function createWebGdeInterface(GDEContainer) {
} else {
document.body.appendChild(gdeContainer);
}
await createImageViewer();
// await createImageViewer();
await createInputForm();
createMenuBar();
// createMenuBar();
}
async function createInputForm() {
......@@ -200,327 +47,16 @@ async function createInputForm() {
// Instantiate widget and assign it to a container
const displayFieldClass = new displayField(schema, containerId);
// Call Function to generate fields with given schema to provided container
setDisplayFieldObject(displayFieldClass);
// setDisplayFieldObject(displayFieldClass);
displayFieldClass.generateFields();
// displayFieldClass.editHeader(element-id)
displayFieldClass.updateHeaderText(0, "User: " + sessionStorage.getItem("user_id"));
displayFieldClass.updateHeaderText(1, "Element ID: " + sessionStorage.getItem("element_id"));
displayFieldClass.updateHeaderText(2, "");
// displayFieldClass.updateHeaderText(0, "User: " + sessionStorage.getItem("user_id"));
// displayFieldClass.updateHeaderText(1, "Element ID: " + sessionStorage.getItem("element_id"));
// displayFieldClass.updateHeaderText(2, "");
//document.getElementById("input-field-container").appendChild(controls.getWidget());
}
function createMenuBar() {
let div = document.createElement("div");
div.setAttribute('class', "row row-bar");
let shortcutDiv = document.createElement("div");
shortcutDiv.setAttribute('class', "row");
let scIcon = document.createElement("span");
//<span id="info-icon" class="icon">&#9432;</span>
scIcon.setAttribute("id", "info-icon");
scIcon.setAttribute("class", "icon");
scIcon.addEventListener("click", () => {
showListOfShortcutKeys();
});
scIcon.innerHTML = '&#9432;';
shortcutDiv.appendChild(scIcon);
let pauseDiv = document.createElement("div");
pauseDiv.setAttribute('class', "row");
let pauseIcon = document.createElement("button");
pauseIcon.setAttribute("id", "pause");
pauseIcon.addEventListener("click", () =>{
pauseMetricCapture();
});
pauseDiv.appendChild(pauseIcon);
let logOutDiv = document.createElement("div");
logOutDiv.setAttribute('class', "row");
let logOutIcon = document.createElement("button");
logOutIcon.setAttribute("id", "logoutBtn");
logOutIcon.addEventListener("click", () => {
///logoutKeycloak();
async function successfulReturn() {
await returnElementBPO(sessionStorage.getItem("element_id"));
sessionStorage.clear();
logoutKeycloak();
}
createModal(successfulReturn, "Current element will be returned. Would you like to proceed?");
});
logOutDiv.appendChild(logOutIcon);
div.appendChild(shortcutDiv);
div.appendChild(pauseDiv);
div.appendChild(logOutDiv);
let dataInputContainer = document.getElementById('input-field-container');
dataInputContainer.insertBefore(div, dataInputContainer.firstChild);
}
async function createImageViewer() {
setImageViewerObject(new ImageViewer("imageViewerContainer"));
await IMAGE_VIEWER_OBJECT.init();
document.getElementById("previousRecordImage").style.visibility = "visible";
let previous = document.getElementById("previousRecordImage");
previous.addEventListener("click", async (e) => {
if (!checkChangesInTheRecord(parseInt(sessionStorage.getItem("display_counter")))) {
let isSuccessful = await submitForm(e);
if (isSuccessful) {
if (sessionStorage.getItem("isElementComplete")) {
createLoadingScreen();
const metrics = stopMetricCapture();
let eoe_ts = new Date().toLocaleString();
await saveMetrics(metrics, eoe_ts);
if (await BPO_OBJECT.getRandomWaitingElement()) {
document.getElementById("counter").innerHTML = "";
clearTimeout(interval);
resetGDE();
};
} else {
displayPreviousRecord(e);
}
} else {
createInfoModal(null, "OK", "Current record was not successfully submitted");
}
} else {
displayPreviousRecord(e);
}
});
let next = document.getElementById("nextRecordImage");
next.addEventListener("click", async (e) => {
if (!checkChangesInTheRecord(parseInt(sessionStorage.getItem("display_counter")))) {
let isSuccessful = await submitForm(e);
if (isSuccessful) {
if (sessionStorage.getItem("isElementComplete")) {
createLoadingScreen();
const metrics = stopMetricCapture();
let eoe_ts = new Date().toLocaleString();
await saveMetrics(metrics, eoe_ts);
if (await BPO_OBJECT.getRandomWaitingElement()) {
document.getElementById("counter").innerHTML = "";
clearTimeout(interval);
resetGDE();
};
} else {
displayNextRecord(e);
}
} else {
createInfoModal(null, "OK", "Current record was not successfully submitted");
}
} else {
displayNextRecord(e);
}
});
let refresh = document.getElementById("refreshCurrentImage");
refresh.addEventListener("click", async () => {
document.getElementById("currentImage").remove();
let urls = JSON.parse(sessionStorage.getItem("dir_files"));
let currentDisplayIndex = parseInt(sessionStorage.getItem("display_counter"));
const url = urls[currentDisplayIndex];
let filename = url.split('/').pop();
let imageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_" + currentDisplayIndex);
await IMAGE_VIEWER_OBJECT.createCurrentImage(filename.split(".").pop(), filename, imageBlob);
});
};
async function displayPreviousRecord(e) {
let urls = JSON.parse(sessionStorage.getItem("dir_files"));
let current = (parseInt(sessionStorage.getItem("display_counter"))) - 1;
if (current >= 0) {
sessionStorage.setItem("display_counter", current);
document.getElementById("nextRecordImage").style.visibility = "visible";
IMAGE_VIEWER_OBJECT.setNextImage();
IMAGE_VIEWER_OBJECT.setCurrentImage("previousImage", IMAGE_VIEWER_OBJECT.getPreviousImage());
HIGHLIGHT_OBJECT.createHighlight();
DISPLAY_FIELD_OBJECT.clearForm();
await populateFields(urls[current]);
if (current === 0) {
e.target.style.visibility = "hidden";
} else {
current--;
const prevUrl = urls[current];
console.log(current);
if (prevUrl) {
let prevFilename = prevUrl.split('/').pop();
let key = current;
if (key >= 0) {
let prevImageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_" + key);
await IMAGE_VIEWER_OBJECT.createPreviousImage(prevFilename.split(".").pop(), prevFilename, prevImageBlob);
}
}
}
getFiles();
}
}
export async function displayNextRecord(e) {
let urls = JSON.parse(sessionStorage.getItem("dir_files"));
let lastIndexOfImage = urls.length - 1;
let current = parseInt(sessionStorage.getItem("display_counter")) + 1;
if (current <= lastIndexOfImage) {
sessionStorage.setItem("display_counter", current);
document.getElementById("previousRecordImage").style.visibility = "visible";
IMAGE_VIEWER_OBJECT.setPreviousImage();
IMAGE_VIEWER_OBJECT.setCurrentImage("nextImage", IMAGE_VIEWER_OBJECT.getNextImage());
HIGHLIGHT_OBJECT.createHighlight();
DISPLAY_FIELD_OBJECT.clearForm();
await populateFields(urls[current]);
if (current === lastIndexOfImage) {
e.target.style.visibility = "hidden";
} else {
current++;
const nextUrl = urls[current];
if (nextUrl) {
let nextFilename = nextUrl.split('/').pop();
let key = current++;
if (key <= lastIndexOfImage) {
let nextImageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_" + key);
await IMAGE_VIEWER_OBJECT.createNextImage(nextFilename.split(".").pop(), nextFilename, nextImageBlob);
}
}
}
}
getFiles();
}
function checkChangesInTheRecord(index) {
const form = document.querySelector("#fields");
const inputs = form.querySelectorAll("input,textarea");
const obj1 = {};
inputs.forEach(input => {
if (input.value != '') {
obj1[input.name] = input.value;
}
});
var formArray = JSON.parse(sessionStorage.getItem('formArray'));
if (formArray) {
const obj2 = formArray.filter((x) => x.index == index)[0];
if(obj2){
if (obj2.value) {
let objEqual = false;
const obj1Keys = Object.keys(obj1).sort();
const obj2Keys = Object.keys(obj2).sort();
if (obj1Keys.length !== obj2Keys.length) {
return objEqual;
} else {
const areEqual = obj1Keys.every((key, index) => {
const objValue1 = obj1[key];
const objValue2 = obj2[obj2Keys[index]];
return objValue1 === objValue2;
});
if (areEqual) {
objEqual = true;
return objEqual;
} else {
return objEqual;
}
}
} else {
return false
}
}else{
return false;
}
} else {
return false;
}
}
export const getFiles = async () => {
let urls = JSON.parse(sessionStorage.getItem("dir_files"));
let current_record = parseInt(sessionStorage.getItem("display_counter"));
let total_record = urls.length;
total_record = isNaN(total_record) ? 0 : total_record;
let max = current_record + 2 < total_record ? current_record + 2 : total_record;
let min = current_record - 2 < 0 ? 0 : current_record - 2;
let recNos = [];
for (let index = min; index < max; index++) {
recNos.push(index);
}
for (const blobs in INDEXED_DB_STORAGE.getAllBlobs()) {
if (!recNos.includes(blobs.key)) {
INDEXED_DB_STORAGE.removeFile(blobs.key);
}
}
if (max < total_record) {
const maxBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_" + max);
if (!maxBlob) {
let url = urls[max];
const blob = await INDEXED_DB_STORAGE.createBlob(url);
if (blob) {
await INDEXED_DB_STORAGE.set("imageNum_" + max, blob);
}
}
}
if (min >= 0 && min < total_record) {
const minBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_" + min);
if (!minBlob) {
let url = urls[min];
const blob = await INDEXED_DB_STORAGE.createBlob(url);
if (blob) {
await INDEXED_DB_STORAGE.set("imageNum_" + min, blob);
}
}
}
};
export async function resetGDE() {
if (INDEXED_DB_STORAGE) {
INDEXED_DB_STORAGE.clear();
}
if (IMAGE_VIEWER_OBJECT) {
IMAGE_VIEWER_OBJECT.clearImageContainer();
}
DISPLAY_FIELD_OBJECT.updateHeaderText(0, "User: " + sessionStorage.getItem("user_id"));
DISPLAY_FIELD_OBJECT.updateHeaderText(1, "Element ID: " + sessionStorage.getItem("element_id"));
DISPLAY_FIELD_OBJECT.updateHeaderText(2, "");
init();
sessionStorage.removeItem("isElementComplete");
let urls = JSON.parse(sessionStorage.getItem("dir_files"));
if (urls) {
await initializeImageDisplay();
sessionStorage.removeItem('formArray');
DISPLAY_FIELD_OBJECT.clearForm();
removeLoadingScreen();
} else {
function modalTest() {
logoutKeycloak();
}
removeLoadingScreen();
createInfoModal(modalTest,'Log out', "No Element Available");
}
}
export function createLoadingScreen() {
const centerContainer = document.createElement("center");
......@@ -563,288 +99,6 @@ export function removeLoadingScreen() {
}
function init() {
let started_flag = false;
window.onkeydown = (e) => {
console.log(e);
if (!started_flag) {
if (searchStringInArray(`${e.key}`, keyArray) == true || e.ctrlKey && e.key) {
console.log('Invalid key cannot Start');
} else {
started_flag = true;
startMetricCapture();
}
}
// e.preventDefault();
if (e.ctrlKey == true && e.keyCode == 69) {
createRejectWindow();
e.target.disabled = true;
}
if (e.shiftKey == true && e.keyCode == 13) {
DOCUMENT_CONTROL_OBJECT.getSubmitBtn().click();
// e.target.disabled = true;
}
if (e.ctrlKey == true && e.keyCode == 190) {
let button = IMAGE_VIEWER_OBJECT.imageControls.nextPageButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.ctrlKey == true && e.keyCode == 188) {
let button = IMAGE_VIEWER_OBJECT.imageControls.previousPageButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.ctrlKey == true && e.shiftKey == true && e.keyCode == 70) {
let button = IMAGE_VIEWER_OBJECT.imageControls.fitContentButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.shiftKey == true && e.keyCode == 72) {
let button = IMAGE_VIEWER_OBJECT.imageControls.flipHorizontalButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.shiftKey == true && e.keyCode == 86) {
let button = IMAGE_VIEWER_OBJECT.imageControls.flipVerticalButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.shiftKey == true && e.keyCode == 33) {
let button = IMAGE_VIEWER_OBJECT.imageControls.rotateRightButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.shiftKey == true && e.keyCode == 34) {
let button = IMAGE_VIEWER_OBJECT.imageControls.rotateLeftButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.shiftKey == true && e.keyCode == 187) {
let button = IMAGE_VIEWER_OBJECT.imageControls.zoomInButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.shiftKey == true && e.keyCode == 109) {
let button = IMAGE_VIEWER_OBJECT.imageControls.zoomOutBtn;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.keyCode == 122) {
let button = IMAGE_VIEWER_OBJECT.imageControls.previousImageButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (e.keyCode == 123) {
let button = IMAGE_VIEWER_OBJECT.imageControls.nextImageButton;
if(button && button.style.visibility !== "hidden"){
button.click();
// e.target.disabled = true;
}
}
if (!window.pauseFlag) {
if (e.key === 'Escape' || e.key === 'Esc') {
pauseMetricCapture();
}
}
// if (e.ctrlKey == true && e.keyCode == 37) {
// let div = document.getElementById("imageContainer");
// if(div && div.style.visibility !== "hidden"){
// div.scrollLeft += 10;
// // e.target.disabled = true;
// if(!isNaN(div.scrollLeft)){
// div.scrollLeft +=10;
// } else{
// div.scrollLeft =10;
// }
// }
// }
// if (e.ctrlKey == true && e.keyCode == 39) {
// let div = document.getElementById("imageContainer");
// if(div && div.style.visibility !== "hidden"){
// // if(!isNaN(div.scrollRight)){
// // div.scrollRight +=10;
// // } else{
// // div.scrollRight = 10;
// // }
// // // e.target.disabled = true;
// div.scrollTo(div.scrollX, div.scrollY + 1);
// }
// }
}
}
function showListOfShortcutKeys() {
let mainDiv = document.getElementById("shortcut-popUp");
if (mainDiv) {
mainDiv.remove();
return;
}
mainDiv = document.createElement("div");
mainDiv.setAttribute("id", "shortcut-popUp");
// let titleDiv = document.createElement("div");
// titleDiv.setAttribute("class", "row");
let title = document.createElement("h3");
title.textContent = "Shortcut Keys";
// titleDiv.appendChild(title);
let tableDiv = document.createElement("div");
tableDiv.setAttribute("class", "row");
let table = document.createElement("table");
for (let index = 0; index < SHORTCUT_KEYS.length; index++) {
const element = SHORTCUT_KEYS[index];
let row = document.createElement("tr");
let functions = document.createElement("td");
functions.innerHTML = "<span>" + element.function + "</span>";
let keys = document.createElement("td");
let i=0;
element.keys.forEach(key => {
if(i > 0 && i != element.keys.length){
let plus = document.createElement("span");
plus.innerHTML ="+";
keys.appendChild(plus);
}
let button = document.createElement("button");
button.innerHTML = key;
keys.appendChild(button);
i++;
});
row.appendChild(functions);
row.appendChild(keys);
table.appendChild(row);
}
tableDiv.appendChild(table);
mainDiv.appendChild(title);
mainDiv.appendChild(tableDiv);
let dataInputContainer = document.getElementById('input-field-container');
dataInputContainer.appendChild(mainDiv);
}
export const SHORTCUT_KEYS = [
// {
// "function": "Pause",
// "keys": ["ESC"]
// },
{
"function": "Submit",
"keys": ["Shift", "Enter"]
},
{
"function": "Next Page",
"keys": ["Ctrl", "&gt;"]
},
{
"function": "Previous Page",
"keys": ["Ctrl", "&lt;"]
},
{
"function": "Fit Content",
"keys": ["Ctrl","Shift", "F"]
},
{
"function": "Flip Horizontally",
"keys": ["Shift", "H"]
},
{
"function": "Flip Vertically",
"keys": ["Shift", "V"]
},
{
"function": "Rotate to Right",
"keys": ["Shift", "Page-Up"]
},
{
"function": "Rotate to Left",
"keys": ["Shift", "Page-Down"]
},
{
"function": "Zoom In",
"keys": ["Ctrl", "="]
},
{
"function": "Zoom out",
"keys": ["Ctrl", "-"]
},
{
"function": "Previous Image",
"keys": ["F11"]
},
{
"function": "Next Image",
"keys": ["F12"]
},
// {
// "function": "Scroll Image to the Left",
// "keys": ["Ctrl", "&larr;"]
// },
// {
// "function": "Scroll Image to the Rigt",
// "keys": ["Ctrl", "&rarr;"]
// },
// {
// "function": "Scroll up Image",
// "keys": ["Ctrl", "&uarr;"]
// },
// {
// "function": "Scroll down Image",
// "keys": ["Ctrl", "&darr;"]
// }
// {
// "function":
// "keys":
// },
// {
// "function":
// "keys":
// },
];
function init(){
console.log("Application Started");
}
\ No newline at end of file
WebGde/WebContent/style.css
*{
-webkit-font-smoothing: auto;
* {
-webkit-font-smoothing: auto;
font-size: 11px;
letter-spacing: 0.1em;
text-rendering: optimizeLegibility;
......@@ -13,20 +13,22 @@
text-align: center;
}
h1{
margin: 20px;
h1 {
margin: 10px;
}
h2{
margin-top: 20px;
margin-bottom: 20px;
h2 {
margin-top: 10px;
margin-bottom: 10px;
}
h3{
margin-bottom: 20px;
h3 {
margin-bottom: 10px;
color: white;
text-align: center;
}
.web-gde-container{
.web-gde-container {
width: 100%;
height: 100vh;
display: flex;
......@@ -40,9 +42,9 @@ h3{
height: 80vh;
} */
#imageViewerContainer{
#imageViewerContainer {
width: 70%;
height: 99%;
height: 98.5%;
}
.sidebar {
......@@ -55,14 +57,17 @@ h3{
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
.row-bar{
.row-bar {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin: 2vh;
}
#pause{
#zz, #thumbnail {
margin-top: 5px;
}
#pause {
background: no-repeat center/75% url("./WebGde-Widgets/resources/pause_icon.png");
height: 3vh;
width: 3vh;
......@@ -73,12 +78,12 @@ h3{
margin-left: 1vh;
}
#info-icon{
#info-icon {
color: #fff;
font-size: 3vh;
}
#logoutBtn{
#logoutBtn {
background: no-repeat center/90% url("./WebGde-Widgets/resources/logout_icon.png");
height: 3vh;
width: 3vh;
......@@ -86,20 +91,20 @@ h3{
}
#input-field-container{
#input-field-container {
/* height : 600px;
width : 400px; */
height : 100%;
width : 30%;
height: 100%;
width: 30%;
display: flex;
flex-direction: column;
overflow: auto;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
#shortcut-popUp{
#shortcut-popUp {
position: absolute;
top:5vh;
top: 5vh;
left: 71%;
max-width: 50vh;
background-color: #000;
......@@ -107,21 +112,21 @@ h3{
padding: 3px;
}
#shortcut-popUp div h3{
#shortcut-popUp div h3 {
color: #fff;
font: 14px;
margin: 5px !important;
}
#shortcut-popUp div table{
#shortcut-popUp div table {
border: 1px solid #fff;
margin: 2px;
}
#shortcut-popUp div table tr td{
#shortcut-popUp div table tr td {
border-bottom: 1px solid #fff !important;
margin-bottom: 2px !important;
color:#fff;
color: #fff;
}
......@@ -129,15 +134,15 @@ h3{
#input-field-container::-webkit-scrollbar {
width: 10px;
}
#input-field-container::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
#input-field-container::-webkit-scrollbar-thumb {
background-color: #888;
}
#input-field-container::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
......@@ -178,7 +183,7 @@ input[type=text] {
/* border config */
border-style: solid;
border-width: thin;
border-color:#446397;
border-color: #446397;
padding: 0px 0px 0px 4px;
flex-wrap: nowrap;
}
......@@ -197,7 +202,7 @@ input[type=text] {
}
#fields>div {
background-color:white;
background-color: white;
}
.submitButtons {
......@@ -236,7 +241,8 @@ input[type=text] {
border-style: solid;
}
input:focus, textarea:focus{
input:focus,
textarea:focus {
/* background-color: yellow; */
border: 0px;
}
......@@ -245,6 +251,108 @@ input[type=text] {
width: 100%;
}
input[type=checkbox],
input[type=radio] {
margin-right: 8px;
}
.dropdown-content {
padding: 3px;
border-style: solid;
border-width: thin;
border-color: gray;
}
.radio-like-checkbox {
display: flex;
padding: 5px;
}
.checkbox {
display: flex;
padding: 5px;
}
.dash {
align-self: center;
padding: 6px;
display: none;
}
.image-capture {
display: flex;
flex-direction: column;
width: 100%;
padding: 4px;
/* padding-bottom: 10px;
padding-top: 20px; */
border: thin solid #555;
}
input[type=file]::file-selector-button {
padding: 5px 10px 5px 10px;
border-radius: 8px;
border: none;
outline: none;
border-radius: 2px;
/* border-style: solid;
border-width: thin;
border-color: gray; */
background-color: #00a8c0;
color: white;
}
input[type=file] {
width: 100%;
padding: 5px 0px 5px 0px;
}
input[type=button] {
width: 100%;
padding: 5px 10px 5px 10px;
border: none;
outline: none;
border-radius: 2px;
background-color: #00a8c0;
color: white;
}
input[type=file]:hover {
background-color: #cecccc;
z-index: 1;
}
.dateContainer {
width: 100%;
height: 100%;
}
.date-range {
display: flex;
justify-content: space-between;
height: 100%;
width: 100%;
/* padding: 20px 0px 20px 0px; */
/* border-style: solid;
border-width: thin;
border-color: gray;
background-color: #e7e7e7; */
}
input[type=text],
input[type=date],
input[type=time] {
width: 100%;
height: 100%;
}
label {
font-size: 11px;
font-weight: 700;
}
select {
width: 100%;
height: 28px;
......@@ -255,20 +363,28 @@ select {
width: 100% !important;
}
.select2-container--default .select2-selection--single{
border-radius:0px !important;
.select2-container--default .select2-selection--single {
border-radius: 0px !important;
}
textarea{
textarea {
resize: none;
}
#text-area{width: 91%;font-size: 11px;padding: 9px 9px;margin-left: 15px;margin-top: 5px;margin-bottom: 5px;height: 103px;}
#text-area {
width: 91%;
font-size: 11px;
padding: 9px 9px;
margin-left: 15px;
margin-top: 5px;
margin-bottom: 5px;
height: 103px;
}
.ctrl-buttons {
background-color: transparent !important;
display: flex !important;
display: flex !important;
justify-content: space-evenly !important;
}
......@@ -278,10 +394,8 @@ textarea{
padding: 1vh;
}
.parent_Window {
box-shadow: var(- -ds-shadow-overlay, 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31));
box-shadow: var(- -ds-shadow-overlay, 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31));
width: 238px;
height: fit-content;
margin: auto;
......@@ -356,18 +470,18 @@ textarea{
/* LOader css */
.modal-container{
.modal-container {
display: block;
position: fixed;
top:0;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0,0,0, .5);
background-color: rgba(0, 0, 0, .5);
}
#loaderContainer{
#loaderContainer {
height: 280px;
width: 280px;
margin-top: 15%;
......@@ -382,38 +496,47 @@ textarea{
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
}
@keyframes mulShdSpin {
}
@keyframes mulShdSpin {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.5), -1.8em -1.8em 0 0em rgba(255,255,255, 0.7);
box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.5);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.5), 1.8em -1.8em 0 0em rgba(255,255,255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.5), 2.5em 0em 0 0em rgba(255,255,255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.5), 1.75em 1.75em 0 0em rgba(255,255,255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255,255,255, 0.2), -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.5), 0em 2.5em 0 0em rgba(255,255,255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255,255,255, 0.2), -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.5), -1.8em 1.8em 0 0em rgba(255,255,255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255,255,255, 0.2);
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255,255,255, 0.2), 1.8em -1.8em 0 0em rgba(255,255,255, 0.2), 2.5em 0em 0 0em rgba(255,255,255, 0.2), 1.75em 1.75em 0 0em rgba(255,255,255, 0.2), 0em 2.5em 0 0em rgba(255,255,255, 0.2), -1.8em 1.8em 0 0em rgba(255,255,255, 0.5), -2.6em 0em 0 0em rgba(255,255,255, 0.7), -1.8em -1.8em 0 0em #ffffff;
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
}
}
}
#counter {
height: 11px;
/* font-size: 22px;
height: 11px;
/* font-size: 22px;
padding: 10px;
position: absolute;
z-index: 1;
......@@ -430,10 +553,333 @@ textarea{
-1px 0 0 #000; */
}
.green{
.green {
color: green;
}
.red{
.red {
color: red;
}
@media only screen and (orientation: portrait) {
* {
-webkit-font-smoothing: auto;
font-size: 16px;
letter-spacing: 0.1em;
text-rendering: optimizeLegibility;
font-weight: normal;
font-family: OpenSans, sans-serif;
font-style: normal;
}
h1 {
margin: 0px;
}
h2 {
margin-top: 10px;
margin-bottom: 10px;
}
h3 {
/* margin-bottom: 20px; */
color: white;
text-align: center;
}
.web-gde-container {
width: 100vw;
height: 100vh;
}
#imageViewerContainer {
display: none;
}
.sidebar {
position: absolute;
right: 0;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
#input-field-container {
/* height : 600px;
width : 400px; */
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
overflow: auto;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
.dash {
display: unset;
align-self: center;
padding: 6px;
}
.fieldContainer {
/* layout config */
display: flex;
flex-direction: column;
border: none;
outline: none;
padding: 0px 5px 10px 4px;
flex-wrap: nowrap;
}
#fields *:not([type=submit]):focus {
background-color: yellow;
}
.image-capture {
display: flex;
flex-direction: column;
width: 100%;
padding: 20px;
/* padding-bottom: 10px;
padding-top: 20px; */
border-radius: 2px;
border: 2px dashed #555;
color: #444;
cursor: pointer;
}
#fields {
/* margin: 17px; */
margin-left: 17px;
margin-right: 17px;
padding: 18px;
border-radius: 25px;
width: auto;
height: auto;
background-color: white;
overflow-y: auto;
display: flex;
flex-direction: column;
border-style: solid;
border-width: thin;
border-color: #446397;
/* box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.75) inset;
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.75) inset;
-moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.75) inset; */
}
#fields>div {
background-color: white;
}
.submitButtons {
font-weight: 600;
display: block;
margin: auto;
font-size: 13px;
width: 93px;
margin-top: 10px;
margin-bottom: 15px;
cursor: pointer;
background-color: white;
padding: 10px;
width: 100%;
border-radius: 5px;
outline: none;
border: none;
font-size: 16px;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
}
@media only screen and (max-width: 430px) {
.date-range {
display: flex;
flex-direction: column;
justify-content: space-between;
/* padding: 20px 0px 20px 0px; */
/* border-style: solid;
border-width: thin;
border-color: gray;
background-color:#e7e7e7;
*/
}
}
.dash {
display: unset;
align-self: center;
padding: 6px;
}
.date-range {
display: flex;
justify-content: space-between;
/* padding: 20px 0px 20px 0px; */
/* border-style: solid;
border-width: thin;
border-color: gray;
background-color: #e7e7e7; */
}
.dateContainer {
width: 100%;
}
label {
font-size: 14px;
font-weight: 700;
}
.captureButtons {
display: inline-block;
width: 100%;
overflow-x: clip;
flex-wrap: nowrap;
flex-grow: 1;
border-radius: 2px;
background-color: white;
border-style: solid;
border-width: 0.1cm;
border-color: #d4d2d2;
}
.labelContainer {
width: 100%;
padding: 2px;
margin-top: 5px;
}
.inputContainer {
display: inline-block;
width: 100%;
overflow-x: clip;
flex-wrap: nowrap;
flex-grow: 1;
border-radius: 2px
}
.input-invalid {
border-color: #ff3333 !important;
border-style: solid;
border-radius: inherit;
}
.input-valid {
/* border-color: #000000 !important; */
border-style: solid;
border-radius: inherit;
}
input:focus,
textarea:focus {
background-color: yellow;
border: 0px;
border-radius: inherit;
}
input[type=text],
input[type=date],
input[type=time] {
width: 100%;
height: 25px;
padding: 20px;
}
input[type=checkbox],
input[type=radio] {
width: 16px;
height: 19px;
margin-right: 15px;
}
.radio-like-checkbox {
display: flex;
padding: 5px;
}
.checkbox {
display: flex;
padding: 5px;
}
input[type=file]::file-selector-button {
padding: 5px 10px 5px 10px;
border-radius: 2px;
border: none;
outline: none;
/* border-style: solid;
border-width: thin;
border-color: gray; */
background-color: #00a8c0;
color: white;
}
input[type=file] {
width: 100%;
padding: 5px;
}
input[type=file]:hover {
background-color: #cecccc;
z-index: 1;
}
input[type=button] {
width: 100%;
padding: 5px;
border: none;
outline: none;
border-radius: 2px;
background-color: #00a8c0;
color: white;
}
.dropdown-content {
padding: 10px;
border-style: solid;
border-width: thin;
border-color: gray;
}
select {
width: 100%;
border-style: solid;
border-width: thin;
border-color: gray;
padding: 2px;
color: #444;
}
textarea {
resize: none;
padding: 20px;
}
#text-area {
width: 91%;
font-size: 11px;
padding: 9px 9px;
margin-left: 15px;
margin-top: 5px;
margin-bottom: 5px;
height: 103px;
}
}
WebGde/WebContent/temp.css 0 → 100644
* {
-webkit-font-smoothing: auto;
font-size: 16px;
letter-spacing: 0.1em;
text-rendering: optimizeLegibility;
font-weight: normal;
font-family: OpenSans, sans-serif;
font-style: normal;
}
.field-header {
color: white;
text-align: center;
}
/* h1{
margin: 20px;
} */
h2 {
margin-top: 20px;
margin-bottom: 20px;
}
h3 {
/* margin-bottom: 20px; */
color: white;
text-align: center;
}
.web-gde-container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
/* #imageViewerContainer{
width: 70vh;
height: 80vh;
} */
#imageViewerContainer {
width: 70%;
height: 99%;
}
.sidebar {
position: absolute;
right: 0;
display: flex;
flex-direction: column;
height: 100%;
width: 30%;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
.row-bar {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
margin: 2vh;
}
#pause {
background: no-repeat center/75% url("./WebGde-Widgets/resources/pause_icon.png");
height: 3vh;
width: 3vh;
border: 0;
}
.pause-button {
margin-left: 1vh;
}
#info-icon {
color: #fff;
font-size: 3vh;
}
#logoutBtn {
background: no-repeat center/90% url("./WebGde-Widgets/resources/logout_icon.png");
height: 3vh;
width: 3vh;
border: 0;
}
#input-field-container {
/* height : 600px;
width : 400px; */
height: 100%;
width: 30%;
display: flex;
flex-direction: column;
overflow: auto;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
#shortcut-popUp {
position: absolute;
top: 5vh;
left: 71%;
max-width: 50vh;
background-color: #000;
z-index: 2;
padding: 3px;
}
#shortcut-popUp div h3 {
color: #fff;
font: 14px;
margin: 5px !important;
}
#shortcut-popUp div table {
border: 1px solid #fff;
margin: 2px;
}
#shortcut-popUp div table tr td {
border-bottom: 1px solid #fff !important;
margin-bottom: 2px !important;
color: #fff;
}
#input-field-container::-webkit-scrollbar {
width: 10px;
}
#input-field-container::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
#input-field-container::-webkit-scrollbar-thumb {
background-color: #888;
}
#input-field-container::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
#inputs {
display: flex;
flex-direction: column;
min-width: 500px;
}
input[type=text] {
width: 100%;
}
/* .SECTION1.inputField {
width: 100%;
height: 100%;
}
.SECTION2.inputField {
width: 100%;
height: 100%;
} */
.inputField {
width: 100%;
height: 100%;
}
.select2 {
width: 100% !important;
}
#fields *:not([type=submit]):focus {
background-color: yellow;
}
.fieldContainer {
/* layout config */
display: flex;
flex-direction: column;
padding: 0px 5px 10px 4px;
flex-wrap: nowrap;
}
#fields *:not([type=submit]):focus {
background-color: yellow;
}
.image-capture {
display: flex;
flex-direction: column;
width: 100%;
padding: 20px;
/* padding-bottom: 10px;
padding-top: 20px; */
border-radius: 2px;
border: 2px dashed #555;
color: #444;
cursor: pointer;
}
#fields {
margin: 17px;
padding: 18px;
border-radius: 25px;
width: auto;
height: auto;
background-color: white;
overflow-y: auto;
display: flex;
flex-direction: column;
border-style: solid;
border-width: thin;
border-color: #446397;
/* box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.75) inset;
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.75) inset;
-moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.75) inset; */
}
#fields>div {
background-color: white;
}
.submitButtons {
font-weight: 600;
display: block;
margin: auto;
font-size: 13px;
width: 93px;
margin-top: 10px;
margin-bottom: 15px;
cursor: pointer;
background-color: white;
padding: 10px;
width: 100%;
border-radius: 5px;
outline: none;
border: none;
font-size: 16px;
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.54);
}
@media only screen and (max-width: 430px) {
.date-range {
display: flex;
flex-direction: column;
justify-content: space-between;
/* padding: 20px 0px 20px 0px; */
/* border-style: solid;
border-width: thin;
border-color: gray;
background-color:#e7e7e7;
*/
}
}
.dash {
align-self: center;
padding: 6px;
}
.date-range {
display: flex;
justify-content: space-between;
/* padding: 20px 0px 20px 0px; */
/* border-style: solid;
border-width: thin;
border-color: gray;
background-color: #e7e7e7; */
}
.dateContainer {
width: 100%;
}
label {
font-size: 14px;
font-weight: 700;
}
.captureButtons {
display: inline-block;
width: 100%;
overflow-x: clip;
flex-wrap: nowrap;
flex-grow: 1;
border-radius: 2px;
background-color: white;
border-style: solid;
border-width: 0.1cm;
border-color: #d4d2d2;
}
.labelContainer {
width: 100%;
padding: 2px;
margin-top: 5px;
}
.inputContainer {
display: inline-block;
width: 100%;
overflow-x: clip;
flex-wrap: nowrap;
flex-grow: 1;
border-radius: 2px
}
.input-invalid {
border-color: #ff3333 !important;
border-style: solid;
border-radius: inherit;
}
.input-valid {
/* border-color: #000000 !important; */
border-style: solid;
border-radius: inherit;
}
input:focus,
textarea:focus {
background-color: yellow;
border: 0px;
border-radius: inherit;
}
input[type=text],
input[type=date],
input[type=time] {
width: 100%;
height: 25px;
padding: 20px;
}
input[type=checkbox],
input[type=radio] {
width: 16px;
height: 19px;
margin-right: 15px;
}
.radio-like-checkbox {
display: flex;
padding: 5px;
}
.checkbox {
display: flex;
padding: 5px;
}
input[type=file]::file-selector-button {
padding: 5px 10px 5px 10px;
border-radius: 8px;
border: none;
outline: none;
/* border-style: solid;
border-width: thin;
border-color: gray; */
background-image: linear-gradient(to right, #23569f, #00a8c0);
color: white;
}
input[type=file] {
width: 100%;
padding: 5px;
}
input[type=file]:hover {
background-color: #cecccc;
z-index: 1;
}
input[type=button] {
width: 100%;
padding: 5px;
border: none;
outline: none;
border-radius: 8px;
background-image: linear-gradient(to right, #23569f, #00a8c0);
color: white;
}
.dropdown-content {
padding: 10px;
border-style: solid;
border-width: thin;
border-color: gray;
}
select {
width: 100%;
border-style: solid;
border-width: thin;
border-color: gray;
padding: 2px;
color: #444;
}
textarea {
resize: none;
padding: 20px;
}
#text-area {
width: 91%;
font-size: 11px;
padding: 9px 9px;
margin-left: 15px;
margin-top: 5px;
margin-bottom: 5px;
height: 103px;
}
.ctrl-buttons {
background-color: transparent !important;
display: flex !important;
justify-content: space-evenly !important;
}
.ctrl-buttons .buttonRightClass {
margin: 1vh;
padding: 1vh;
}
.parent_Window {
box-shadow: var(- -ds-shadow-overlay, 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31));
width: 238px;
height: fit-content;
margin: auto;
position: relative;
background: white;
padding: 17px;
border-radius: 1%;
max-height: 90%;
padding-right: 22px;
text-align: center;
}
.genericPopup {
background-color: #000000a1;
display: -webkit-inline-box;
width: 100%;
height: 100%;
position: absolute;
top: 0;
z-index: 5;
backdrop-filter: blur(4px);
}
.normalButton {
border: solid 1px black;
width: fit-content;
font-size: 14px;
padding: 4.5px;
height: fit-content;
display: inline-block;
vertical-align: middle;
transition: color .6s ease-in-out, box-shadow .6s ease-in-out;
}
.floatingButtonPanel {
width: fit-content;
text-align: right;
margin-top: 9px;
display: inline-block;
vertical-align: middle;
float: right;
width: 150px;
padding: 0px;
}
.emphasizeButton {
border: solid 1px black;
border-radius: 2px;
font-family: OpenSans, sans-serif;
background-color: #0057a4;
font-size: 14px;
vertical-align: middle;
padding: 5px 16px;
margin-right: 6px;
display: inline-block;
margin-left: 10px;
color: white;
cursor: pointer;
transition: color .6s ease-in-out, box-shadow .6s ease-in-out;
}
.headerLabel {
color: #676767;
font-weight: 600;
font-size: 20px;
padding: 4px 0px 5px 8px;
text-align: left;
}
/* LOader css */
.modal-container {
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, .5);
}
#loaderContainer {
height: 280px;
width: 280px;
margin-top: 15%;
}
.loader {
font-size: 10px;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
}
@keyframes mulShdSpin {
0%,
100% {
box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
}
25% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
50% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
75% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
}
}
#counter {
height: 11px;
/* font-size: 22px;
padding: 10px;
position: absolute;
z-index: 1;
right: 199px;
bottom: -6px;
text-shadow:
-1px -1px 0 #000,
0 -1px 0 #000,
1px -1px 0 #000,
1px 0 0 #000,
1px 1px 0 #000,
0 1px 0 #000,
-1px 1px 0 #000,
-1px 0 0 #000; */
}
.green {
color: green;
}
.red {
color: red;
}
@media only screen and (orientation: portrait) {
.web-gde-container {
width: 100%;
height: 100vh;
}
#imageViewerContainer {
display: none;
}
.sidebar {
position: absolute;
right: 0;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
#input-field-container {
/* height : 600px;
width : 400px; */
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
overflow: auto;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
}
@media only screen and (orientation: landscape) {
.date-range {
display: flex;
flex-direction: column;
justify-content: space-between;
/* padding: 20px 0px 20px 0px; */
/* border-style: solid;
border-width: thin;
border-color: gray;
background-color: #e7e7e7; */
}
.web-gde-container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
#imageViewerContainer {
width: 70%;
height: 99%;
}
.sidebar {
position: absolute;
right: 0;
display: flex;
flex-direction: column;
height: 100%;
width: 30%;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
#input-field-container {
/* height : 600px;
width : 400px; */
height: 100%;
width: 30%;
display: flex;
flex-direction: column;
overflow: auto;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
}
@media only screen and (orientation: landscape) and (height < 300px) and (width < 600px) {
.web-gde-container {
width: 100%;
height: 100vh;
}
#imageViewerContainer {
display: none;
}
.sidebar {
position: absolute;
right: 0;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
#input-field-container {
/* height : 600px;
width : 400px; */
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
overflow: auto;
background-image: linear-gradient(to bottom, #23569f, #00a8c0);
}
}
\ No newline at end of file
WebGde/src/main/java/com/svi/webgde/restservice/services/GDEWebServices.java
......@@ -23,6 +23,7 @@ import javax.ws.rs.core.Response;
import javax.ws.rs.core.Response.ResponseBuilder;
import javax.ws.rs.core.StreamingOutput;
import org.glassfish.jersey.media.multipart.FormDataParam;
import org.json.simple.JSONObject;
import com.opencsv.CSVReader;
......@@ -36,7 +37,7 @@ import com.svi.webgde.restservice.utils.XMLUtil;
public class GDEWebServices {
@GET
@Path("/test")
@Path("/test-upload")
public Response testWebservice() {
return Response.ok("test webservice").build();
}
......@@ -289,4 +290,24 @@ public class GDEWebServices {
response.header("content-disposition", String.format("attachment; filename=\"%s\"", file.getName()));
return response.build();
}
@POST
@Path("/upload-file")
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces(MediaType.APPLICATION_JSON)
public Response uploadFile(@FormDataParam("file") InputStream fileInputStream,
@FormDataParam("fileName") String fileName,
@FormDataParam("directory") String directory) {
String filePath = directory + File.separator + fileName;
try {
Files.copy(fileInputStream, new File(filePath).toPath());
JSONObject responseJson = new JSONObject();
responseJson.put("status", 200);
return Response.ok(responseJson.toString()).build();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
return Response.status(Response.Status.INTERNAL_SERVER_ERROR).build();
}
}
}
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