Skip to content

W
web-ui
Commit bfdbcb30 by Daniel Bawag
Options

Added features from users' feedbacks and requests

parent 6294b43e
Showing with 67 additions and 53 deletions
Web-GDE/src/XMLWriter/XML_Saver.js
......@@ -14,6 +14,9 @@ function WriteForm(e,metrics,doctype,section)
XML.Node("Image_Source_Path",File_Path);
XML.Node("No_of_Keystrokes",JSON.stringify(myArray[0]));
XML.Node("Processing_Time_Seconds",JSON.stringify(myArray[1]));
XML.Node("DocType", doctype);
XML.Node("Section", section);
for (var i=0;i<Nodes.length;i++){
if (Nodes[i].style.display === 'none') continue
let fid = Nodes[i].id;
......@@ -23,7 +26,6 @@ function WriteForm(e,metrics,doctype,section)
// console.log(Nodes[i]);
}
XML.EndNode();
XML.Close();
var final_xml=XML.ToString().replace(/</g,"\n<").replace(/&lt;/g,"\<").replace(/&quot;/g,'"').replace(/&gt;/g,">").replace(/\n<\//g,"</").replace(/<\/xml>/g,"\n</xml>");
......
Web-GDE/src/getFields/getFields.js
......@@ -63,9 +63,14 @@ const displayFields = async (parentID) => {
// separate handler is used to fit with the library used 'select2'
$(document).ready(function() {
const dropdowns = $('.dropdown-input').select2();
dropdowns.on('select2:open', () => {
dropdowns.splice(0,2);
$('.dropdown-input').select2().on('select2:open', () => {
document.querySelector('.select2-search__field').focus();
});
document.querySelector('.select2-container--open').firstChild.firstChild.style.backgroundColor = 'yellow';
});
$('.dropdown-input').select2().on('select2:close', () => {
document.querySelector('.select2-container--focus').firstChild.firstChild.style.backgroundColor = '';
});
dropdowns.on('select2:close', handleDropdown)
});
......@@ -80,7 +85,7 @@ const displayFields = async (parentID) => {
$(".SECTION2").hide();
$(".SECTION3").hide();
[...document.querySelectorAll('.SECTION2 input, .SECTION3 input')].forEach(el => el.removeAttribute("required"));
[...document.querySelectorAll('.SECTION2 input, .SECTION2 textarea, .SECTION3 input, .SECTION3 textarea')].forEach(el => el.removeAttribute("required"));
$('#Section').html(
......@@ -109,20 +114,20 @@ const displayFields = async (parentID) => {
$(".SECTION2").hide();
$(".SECTION3").hide();
[...document.querySelectorAll('.SECTION2 input, .SECTION3 input')].forEach(el => el.removeAttribute("required"));
[...document.querySelectorAll('.SECTION2 input, .SECTION2 textarea, .SECTION3 input, .SECTION3 textarea')].forEach(el => el.removeAttribute("required"));
} else if($(this).val() == "2") {
$(".SECTION2").show();
$(".SECTION1").hide();
$(".SECTION3").hide();
[...document.querySelectorAll('.SECTION1 input, .SECTION3 input')].forEach(el => el.removeAttribute("required"));
[...document.querySelectorAll('.SECTION1 input, .SECTION1 textarea, .SECTION3 input, .SECTION3 textarea')].forEach(el => el.removeAttribute("required"));
} else if($(this).val() == "3") {
$(".SECTION3").show();
$(".SECTION1").hide();
$(".SECTION2").hide();
[...document.querySelectorAll('.SECTION1 input, .SECTION2 input')].forEach(el => el.removeAttribute("required"));
}
[...document.querySelectorAll('.SECTION1 input, .SECTION1 textarea, .SECTION2 input, .SECTION2 textarea')].forEach(el => el.removeAttribute("required"));
}
$('#Section').html(
'<option>'+dropdown1[$(this).val()].join('</option><option>')+'</option>'
......@@ -174,7 +179,7 @@ const inputString = (key, validation) => {
try {
const { mandatory, fieldLength } = validation
const input = document.createElement('input')
let input = document.createElement('input')
input.setAttribute('id', `${key}`)
input.setAttribute('type', 'text')
input.setAttribute('autocomplete', 'off')
......@@ -186,6 +191,7 @@ const inputString = (key, validation) => {
input.setAttribute('id', `${key}`)
input.setAttribute('name', `${key}`)
input.setAttribute('cols', 30)
input.addEventListener('focusout', handleInput)
}
else if(fieldLength >= 61 && fieldLength <= 90){
input = document.createElement('TEXTAREA')
......@@ -193,6 +199,7 @@ const inputString = (key, validation) => {
input.setAttribute('id', `${key}`)
input.setAttribute('name', `${key}`)
input.setAttribute('cols', 30)
input.addEventListener('focusout', handleInput)
}
else if(fieldLength >= 91 && fieldLength <= 120){
input = document.createElement('TEXTAREA')
......@@ -200,6 +207,7 @@ const inputString = (key, validation) => {
input.setAttribute('id', `${key}`)
input.setAttribute('name', `${key}`)
input.setAttribute('cols', 30)
input.addEventListener('focusout', handleInput)
}
else if (fieldLength >= 120) {
input = document.createElement('TEXTAREA')
......@@ -207,6 +215,7 @@ const inputString = (key, validation) => {
input.setAttribute('id', `${key}`)
input.setAttribute('name', `${key}`)
input.setAttribute('cols', 30)
input.addEventListener('focusout', handleInput)
}
fieldLength ? input.setAttribute('maxLength', `${fieldLength}`) : null
......
Web-GDE/src/highlight/highlight.js
......@@ -141,9 +141,9 @@ function initHighlight() {
//waits for fields to be created before adding event listeners
const fieldObserver = new MutationObserver(function (mutations, mutationInstance) {
//find input elements inside div element with id='fields'
const fields = document.getElementById('fields').querySelectorAll('input');
const fields = document.getElementById('fields').querySelectorAll('input, textarea');
if (fields.length>0) {
document.getElementById('fields').querySelectorAll('input').forEach((field) => {
fields.forEach((field) => {
//event listener when a field is focused
field.addEventListener('focus', (e) =>{
// flippedH = false;
......
Web-GDE/src/sample_schema/HR Speed Test schema.json
......@@ -11,7 +11,7 @@
{
"fieldLength": 100,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*._={}[]:;/\"|\\<>",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": true
}
},
......@@ -46,7 +46,7 @@
{
"fieldLength": 20,
"collection": "datepicker",
"mandatory": true
"mandatory": false
}
}
......@@ -64,7 +64,7 @@
{
"fieldLength": 100,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*._={}[]:;/\"|\\<>",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": true
}
},
......@@ -88,7 +88,7 @@
{
"fieldLength": 20,
"collection": "datepicker",
"mandatory": true
"mandatory": false
}
}
......@@ -106,7 +106,7 @@
{
"fieldLength": 100,
"collection": "alphanumeric",
"invalidchar": "`~!@#&$%^*._={}[]:;/\"|\\<>",
"invalidchar": "`~!@#&$%^*_={}[]:;/\"|\\<>",
"mandatory": true
}
},
......@@ -141,7 +141,7 @@
{
"fieldLength": 20,
"collection": "datepicker",
"mandatory": true
"mandatory": false
}
}
......
Web-GDE/src/tiffViewer/tiffViewer.js
......@@ -402,9 +402,9 @@ function TIFFViewer(xhr, TiffViewerImageName) {
function zoomOut() {
hzoom[TiffViewer_current - 1] -= hpercent;
wzoom[TiffViewer_current - 1] -= wpercent;
if (wzoom[TiffViewer_current - 1] < wpercent && hzoom[TiffViewer_current - 1] < hpercent) {
hzoom[TiffViewer_current - 1] = hpercent;
wzoom[TiffViewer_current - 1] = wpercent;
if ((setwidth + wzoom[TiffViewer_current - 1]) < wpercent && (setheight + hzoom[TiffViewer_current - 1]) < hpercent) {
hzoom[TiffViewer_current - 1] = hpercent - setheight;
wzoom[TiffViewer_current - 1] = wpercent - setwidth;
}
Edited();
};
......@@ -491,19 +491,19 @@ function TIFFViewer(xhr, TiffViewerImageName) {
if (rot[TiffViewer_current - 1] == 90 || rot[TiffViewer_current - 1] == 270 || rot[TiffViewer_current - 1] == -90 || rot[TiffViewer_current - 1] == -270) {
image.style = `display: flex;
width: ${wzoom[TiffViewer_current] - 1};
height: ${hzoom[TiffViewer_current - 1]};
border: 1px groove white;
width: ${setwidth + wzoom[TiffViewer_current - 1]};
height: ${setheight + hzoom[TiffViewer_current - 1]};
border: 0px groove white;
transform: rotate(${rot[TiffViewer_current - 1]}deg) scaleX(${flippedX[TiffViewer_current - 1]}) scaleY(${flippedY[TiffViewer_current - 1]});`;
image.style = `display: flex;
width: ${wzoom[TiffViewer_current - 1]};
height: ${hzoom[TiffViewer_current - 1]};
border: 1px groove white;
width: ${setwidth + wzoom[TiffViewer_current - 1]};
height: ${setheight + hzoom[TiffViewer_current - 1]};
border: 0px groove white;
-ms-transform: rotate(${rot[TiffViewer_current - 1]}deg) scaleX(${flippedX[TiffViewer_current - 1]}) scaleY(${flippedY[TiffViewer_current - 1]});`; // IE
image.style = `display: flex;
width: ${wzoom[TiffViewer_current - 1]};
height: ${hzoom[TiffViewer_current - 1]};
border: 1px groove white;
width: ${setwidth + wzoom[TiffViewer_current - 1]};
height: ${setheight + hzoom[TiffViewer_current - 1]};
border: 0px groove white;
-webkit-transform: rotate(${rot[TiffViewer_current - 1]}deg) scaleX(${flippedX[TiffViewer_current - 1]}) scaleY(${flippedY[TiffViewer_current - 1]});`; //Safari
TiffViewer_ImageContainer.style = `display: flex;
width: ${setheight};
......@@ -518,8 +518,8 @@ function TIFFViewer(xhr, TiffViewerImageName) {
justify-content: center;
align-items: center;`;
TiffViewer_imgclass.style = `display: flex;
width: ${setheight};
height: ${setwidth};
width: ${(setheight + hzoom[TiffViewer_current - 1]) < setheight ? setheight : setheight + hzoom[TiffViewer_current - 1]};
height: ${(setwidth + wzoom[TiffViewer_current - 1]) < setwidth ? setwidth : setwidth + wzoom[TiffViewer_current - 1]};
position: relative;
justify-content: center;
align-items: center;`;
......@@ -527,35 +527,35 @@ function TIFFViewer(xhr, TiffViewerImageName) {
height = TiffViewer_Screen.clientWidth;
} else {
image.style = `display: flex;
width: ${wzoom[TiffViewer_current - 1]};
height: ${hzoom[TiffViewer_current - 1]};
border: 1px groove white;
width: ${setwidth + wzoom[TiffViewer_current - 1]};
height: ${setheight + hzoom[TiffViewer_current - 1]};
border: 0px groove white;
transform: rotate(${rot[TiffViewer_current - 1]}deg) scaleX(${flippedX[TiffViewer_current - 1]}) scaleY(${flippedY[TiffViewer_current - 1]});`;
image.style = `display: flex;
width: ${wzoom[TiffViewer_current - 1]};
height: ${hzoom[TiffViewer_current - 1]};
border: 1px groove white;
width: ${setwidth + wzoom[TiffViewer_current - 1]};
height: ${setheight + hzoom[TiffViewer_current - 1]};
border: 0px groove white;
-ms-transform: rotate(${rot[TiffViewer_current - 1]}deg) scaleX(${flippedX[TiffViewer_current - 1]}) scaleY(${flippedY[TiffViewer_current - 1]});`;// IE
image.style = `display: flex;
width: ${wzoom[TiffViewer_current - 1]};
height: ${hzoom[TiffViewer_current - 1]};
border: 1px groove white;
width: ${setwidth + wzoom[TiffViewer_current - 1]};
height: ${setheight + hzoom[TiffViewer_current - 1]};
border: 0px groove white;
-webkit-transform: rotate(${rot[TiffViewer_current - 1]}deg) scaleX(${flippedX[TiffViewer_current - 1]}) scaleY(${flippedY[TiffViewer_current - 1]});`;//Safari
TiffViewer_ImageContainer.style = `display: flex;
width: ${setwidth};
height: ${setheight};
width: ${setwidth};
height: ${setheight};
position: relative;
justify-content: center;
align-items: center;`;
TiffViewer_Screen.style = `display: flex;
width: ${setwidth};
height: ${setheight};
width: ${setwidth};
height: ${setheight};
position: relative;
justify-content: center;
align-items: center;`;
TiffViewer_imgclass.style = `display: flex;
width: ${setwidth};
height: ${setheight};
width: ${(setwidth + wzoom[TiffViewer_current - 1]) < setwidth ? setwidth : setwidth + wzoom[TiffViewer_current - 1]};
height: ${(setheight + hzoom[TiffViewer_current - 1]) < setheight ? setheight : setheight + hzoom[TiffViewer_current - 1]};
position: relative;
justify-content: center;
align-items: center;`;
......
Web-GDE/src/validateInput/validateInput.js
......@@ -22,7 +22,7 @@
* errors - list of errors found during validation
*/
// const validateInput = (fieldName, value, schema) => {
const validateInput = (fieldID, value, section) => {
const validateInput = (fieldID, value) => {
try {
const { valid, error } = validateSchema()
......
Web-GDE/style.css
......@@ -99,12 +99,12 @@ main#viewer {
}
.TiffViewercontainer {
margin-top: 10;
/* margin-top: 10; */
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
padding: 1px;
/* padding: 1px; */
}
#TiffViewer_ButtonContainer {
......@@ -279,7 +279,7 @@ body>div>button {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 5;
padding: 0 5 5 5;
/* border: 1px solid #888;
width: 90%;
*/
......@@ -337,7 +337,7 @@ body>div>button {
#TiffModalHeader {
font-family: Arial, Helvetica, sans-serif;
padding: 2px 16px;
/* padding: 2px 16px; */
background-color: white;
color: black;
}
......@@ -382,7 +382,6 @@ body>div>button {
border-style: solid;
border-width: thin;
border-color: black;
padding: 0px;
}
......@@ -422,7 +421,11 @@ input[type=text] {
}
select {
width: 90%;
width: 100%;
}
#fields *:not([type=submit]):focus {
background-color: yellow;
}
#prompt{
......
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