Skip to content

W
web-ui
Commit 2bc04447 by Daniel Bawag
Options

Merge remote-tracking branch 'origin/feature-wg-37' into development

parents d7dfbcbb 338fdef5
Showing with 396 additions and 17 deletions
Web-GDE/closer.html
......@@ -15,7 +15,7 @@
</div>
<h1 style="text-align: center;font-family: sans-serif; font-size: 36px;color: rgb(54,54,54); max-width: 500px; min-width: 100px;">Session has been successfully ended</h1>
<h3 style="text-align: center;font-family: sans-serif;color: rgb(54,54,54); max-width: 500px; min-width: 100px;">Thank you for using GDE Tool</h3>
<h5 style="text-align: center;font-family: sans-serif;color: rgb(54,54,54); max-width: 500px; min-width: 100px;">Please click <a href="./index.html">here</a> to return to the GDE Tool</h5>
<h5 style="text-align: center;font-family: sans-serif;color: rgb(54,54,54); max-width: 500px; min-width: 100px;">Please click <a href="./login.html">here</a> to return to the GDE Login</h5>
</div>
</div>
</div>
......
Web-GDE/config.js
......@@ -2,6 +2,8 @@
* for testing purposes, below are different files to be used showing
* some possible configurations of the file
*/
// schema with no "SECTION" key
// const SCHEMA_FILE = "./src/sample_schema/no_section.json"
......@@ -15,14 +17,26 @@
// const SCHEMA_FILE = "./src/sample_schema/15_field_schema.json"
// schema with 10 fields
const SCHEMA_FILE = "./src/sample_schema/10_field_schema.json"
// const SCHEMA_FILE = "./src/sample_schema/10_field_schema.json"
// schema with 5 fields and all possible collections
// const SCHEMA_FILE = "./src/sample_schema/5_field_schema.json"
const SCHEMA_FILE = "./src/sample_schema/5_field_schema.json"
// const SCHEMA_FILE = "./src/sample_schema/Sample_Schema.json"
const INPUT_FILES = ["./input/Ong, Mae Janica - Application Form.TIFF","./input/Magalona, Rowell James - Application Form.TIFF","./input/Felizardo, Brylle Theodure - Application Form.TIFF","./input/Laxamana, Conrad John - Application Form.TIFF"] // list of URLs
//const INPUT_FILES = ["./input/Ong, Mae Janica - Application Form.TIFF","./input/Magalona, Rowell James - Application Form.TIFF","./input/Felizardo, Brylle Theodure - Application Form.TIFF","./input/Laxamana, Conrad John - Application Form.TIFF"] // list of URLs
const INPUT_FILES = ["./input/Ong, Mae Janica - Application Form.TIFF","./input/Magalona, Rowell James - Application Form.TIFF"] // list of URLs
const INPUT_FOLDER = "./input/"
const OUTPUT_FILES = "../../output/"
const METRIC_FILES = "../../metrics/"
//this determines if the images will be retrieved from the gfs
const DOMAIN = "http://35.169.23.0:8080"
const CONTEXTROOT = "gfs-explorer-ws"
const FOLDER_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-folder?parentPath="
const DOWNLOAD_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-download-link"
const IS_RETRIEVE_FROM_GFS = "Y"
Web-GDE/creds.js 0 → 100644
var credObj =
[
{
"username": "sample1",
"password": "passw0rd"
},
{
"username": "sample2",
"password": "passw0rd"
},
{
"username": "sample3",
"password": "passw0rd"
},
{
"username": "demo",
"password": "passw0rd"
}
];
\ No newline at end of file
Web-GDE/dir.php 0 → 100644
var Dirfiles = <?php $arrFiles = array();
$path = './input';
$iterator = new FilesystemIterator($path);
foreach($iterator as $entry) {
$arrFiles[] = './input/' . $entry-> getFilename();
}
echo json_encode($arrFiles);
?>
Web-GDE/index.html
......@@ -22,8 +22,9 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
<script src="./src/XMLWriter/XML_Saver.js" language="javascript"></script>
<script src="./src/submit/submit.js" language="javascript"></script>
<script src="./src/fetchConfig/fetchConfig.js"></script>
</head>
<script src="./src/fetchConfig/fetchConfig.js"></script>
<script>
fetchConfig();
</script>
......@@ -101,12 +102,14 @@
</body>
<script src="./config.js"></script>
<script src='dir.php'></script>
<script src="./src/captureMetrics/captureMetrics.js"></script>
<script src="./src/fetchSchema/fetchSchema.js"></script><!-- fetch the schema -->
<!-- fetch the schema -->
<script src="./src/fetchSchema/fetchSchema.js"></script>
<script src="./src/validateSchema/validateSchema.js"></script> <!-- validate the schema -->
<script src="./src/validateInput/validateInput.js"></script> <!-- functions for validating inputs -->
<script src="./src/getFields/getFields.js"></script> <!-- display the input fields -->
<!-- <script src="./src/accessFile/accessFile.js"></script> -->
<script src="./src/accessFile/accessFile.js"></script>
<script>
if (!found) { //if config file is not found, change the screen
let withConfig = document.getElementById("with-config");
......@@ -132,5 +135,5 @@
<script src="./src/endSession/endSession.js"></script>
<script src="./src/tiffViewer/tiffViewer.js"></script>
<script src="./src/highlight/highlight.js"></script>
<script src='config.php'></script>
</html>
\ No newline at end of file
Web-GDE/login.css 0 → 100644
Body {
font-family: Calibri, Helvetica, sans-serif;
background-color: rgb(255, 255, 255);
}
.main-div{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
button{
background-color: #EB9B3E;
width: 100%;
color: rgb(0, 0, 0);
padding: 15px;
margin: 10px 0px;
border: none;
cursor: pointer;
}
form {
}
input[type=text], input[type=password] {
width: 100%;
margin: 8px 0;
padding: 12px 20px;
display: inline-block;
border: 2px solid #ff8800;
box-sizing: border-box;
}
button:hover {
background-color: #ff8800;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
margin: 10px 5px;
}
.container {
padding: 25px;
background-color: #0F2853;
max-width: 600px;
border: 3px solid #0F2853;
color:white;
}
.popup{
display:none;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
width: 700px;
background-color: white;
padding: 20px;
border: 1px solid rgb(179, 176, 176);
}
Web-GDE/login.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Login Page </title>
<link rel="stylesheet" href="./login.css">
<script src="./src/fetchConfig/fetchConfig.js"></script>
</head>
<body>
<div class="main-div">
<form name="loginForm">
<div class="container">
<h2><center>Sign in to your account</center></h2>
<label>Username : </label>
<input type="text" placeholder="Enter Username" name="username" id="username" required>
<label>Password : </label>
<input type="password" placeholder="Enter Password" name="password" id="password" required>
<button type="button" onclick="validateForm(); return false; ">Sign in</button>
<input type="checkbox" checked="checked"> Remember me
</div>
</form>
</div>
<div class="popup" id="popup">
<div>
<p>Minimum display must be 1366x768</p>
<p>Use "Chrome" Browser for this app</p>
<p>Additional Req: Use Keyboard with Num Pad</p>
</div>
<div>
<button type="button" onclick="hideNotice(); return false; ">Ok</button>
</div>
</div>
</body>
<script src="./creds.js"></script>
<script src="./script.js"></script>
</html>
\ No newline at end of file
Web-GDE/output/Ong, Mae Janica - Application Form.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<Image_Source_Path>./input/Ong, Mae Janica - Application Form.TIFF</Image_Source_Path>
<No_of_Keystrokes>8</No_of_Keystrokes>
<Processing_Time_Seconds>8.574</Processing_Time_Seconds>
<Surname>daw</Surname>
<Religion>dwa</Religion>
<Birthdate>2022-09-14</Birthdate>
<Age>12</Age>
<Civil_Status>Single</Civil_Status>
\ No newline at end of file
Web-GDE/script.js 0 → 100644
function getWindowWidth(){
return window.innerWidth;
}
function getWindowHeight(){
return window.innerHeight;
}
console.log(getWindowWidth() + "x" + getWindowHeight());
console.log(getBrowserName());
function validateForm() {
const reqWindowWidth = 1366;
const reqWindowHeight = 768;
const reqBrowser = 'Chrome';
var windowWidth = getWindowWidth();
var windowHeight = getWindowHeight();
var browser = getBrowserName();
var un = document.forms['loginForm'].elements['username'].value
var pw = document.forms['loginForm'].elements['password'].value
var isGranted = true;
if(windowWidth <= reqWindowWidth && windowHeight <= reqWindowHeight && browser == reqBrowser){
for (let i = 0; i < credObj.length; i++) {
// console.log(credObj[i].username + " " + credObj[i].password);
if ((un == credObj[i].username) && (pw == credObj[i].password)) {
window.location = "index.html";
return false;
}
else {
isGranted = false;
}
}
console.log(isGranted);
if(isGranted == false){
alert ("Login denied, please check your username and password");
}
}
else{
showNotice();
}
}
function showNotice(){
var popup = document.getElementById('popup');
popup.style.display = 'block';
}
function hideNotice(){
var popup = document.getElementById('popup');
popup.style.display = 'none';
}
function getBrowserName(){
var nVer = navigator.appVersion;
var nAgt = navigator.userAgent;
var browserName = navigator.appName;
var fullVersion = ''+parseFloat(navigator.appVersion);
var majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;
let ieCheck = /Edg/.test(navigator.userAgent);
// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
browserName = "Opera";
}
if ((verOffset=nAgt.indexOf("Version"))!=-1){
}
//In Edge, the true version is after "Edge"
if (ieCheck) {
browserName = "Edge";
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
browserName = "Microsoft Internet Explorer";
}
// In Chrome, the true version is after "Chrome"
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
browserName = "Chrome";
}
// In Safari, the true version is after "Safari" or after "Version"
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
browserName = "Safari";
}
// In Firefox, the true version is after "Firefox"
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
browserName = "Firefox";
}
// In most other browsers, "name/version" is at the end of userAgent
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < (verOffset=nAgt.lastIndexOf('/')) ) {
browserName = nAgt.substring(nameOffset,verOffset);
if (browserName.toLowerCase()==browserName.toUpperCase()) {
browserName = navigator.appName;
}
}
return browserName;
}
\ No newline at end of file
Web-GDE/src/accessFile/accessFile.js
......@@ -119,7 +119,8 @@ function accessFile() {
} else if(img == null && count.result == 0 && (localStorage.length) == 2 && localStorage.getItem("submit") == 1){//no files left
alert("No Files Left");
// alert("No Files Left");
promptNoFilesLeft();
}else if (count.result == 1 && (localStorage.length) == 2 && localStorage.getItem("submit") == 1) {
const idQuery = store.get(1);
......@@ -182,11 +183,39 @@ function accessFile() {
return filename;
}
function promptNoFilesLeft(){
var viewer = document.getElementById('viewer');
var promptMain = document.createElement('div');
promptMain.setAttribute("id", "prompt");
promptMain.style.zIndex = 999;
promptMain.style.textAlign = 'center';
promptMain.style.margin = 0 + ' auto';
promptMain.style.position = 'absolute';
promptMain.style.top = '50%';
promptMain.style.left = '50%';
promptMain.style.transform = 'translate(-50%, -50%)';
promptMain.style.backgroundColor = 'white';
promptMain.style.padding = '10px';
promptMain.style.display = 'block';
var message = document.createElement('p');
message.innerHTML = 'No images left to be fetched, Proceed to end session';
var okButton = document.createElement('button');
okButton.innerHTML = 'ok';
okButton.onclick = function() {
promptMain.style.display = 'none';
};
promptMain.appendChild(message);
promptMain.appendChild(okButton);
viewer.appendChild(promptMain);
}
function Input_files() {
var urls = INPUT_FILES; //from config
//Dirfiles from dir.php
var urls = Dirfiles; //from config
var count;
if((localStorage.length) == 0){
count = 0;
......@@ -203,9 +232,70 @@ function accessFile() {
function uploadFile(file) {
let formData = new FormData();
formData.append("file", file);
fetch('http://localhost/web-ui/Web-GDE/src/accessFile/uploadimg.php',{
fetch('http://localhost/Web-GDE/src/accessFile/uploadimg.php',{
method: "POST",
body: formData
});
}
}
\ No newline at end of file
}
function getFolder(url){
const promise = fetch(url, {
method: 'GET',
headers: {
'Authorization': kc.token
// 'Content-Type': 'application/x-www-form-urlencoded',
}
//body: JSON.stringify(myObject)
})
.then(function (response) {
if(response.status === 200){
response.json().then(function(data) {
//var parseData = JSON.parse(data);
// func(data);
console.log(data);
//displayData(parseData);
});
}else{
console.log("Error");
}
})
.catch(function (error) {
console.log('Request failed', error);
});
return promise;
}
function postServiceText(url, myObject, funcSuccess, funcFail){
const promise = fetch(url, {
method: 'post',
body: JSON.stringify(myObject),
headers: {
'Content-Type': 'application/json',
'Authorization': kc.token
// 'Content-Type': 'application/x-www-form-urlencoded',
}
})
.then(function (response) {
if(response.status === 200){
response.text().then(function(data) {
//var parseData = JSON.parse(data);
// funcSuccess(data);
console.log(data);
//alert(data);
//displayData(parseData);
});
}else{
console.log("Error");
funcFail();
}
})
.catch(function (error) {
console.log('Request failed', error);
});
return promise;
}
Web-GDE/src/accessFile/uploadimg.php
......@@ -4,7 +4,7 @@
$filename = $_FILES['file']['name'];
/* Choose where to save the uploaded file */
$location = "../../uploadimg/".$filename;
$location = "./uploadimg/".$filename;
/* Save the uploaded file to the local filesystem */
if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) {
......
Web-GDE/src/tiffViewer/tiffViewer.js
......@@ -211,9 +211,10 @@ function TIFFViewer(xhr, TiffViewerImageName) {
tiff.setDirectory(i);
var canvas = tiff.toCanvas().toDataURL();
document.getElementById(`IMG${i + 1}`).src = canvas;
}
//setting the style per page
for (var j = 1; j <= TiffViewer_pages; ++j) {
for (var j = 1; j <= TiffViewer_pages; ++j) {
var img = document.getElementById("IMG" + j);
getMeta(canvas, function (width, height) {
wzoom[TiffViewer_current - 1] = changedwidth; /*ADDED: to fit large TIFF files*/
......@@ -222,6 +223,8 @@ function TIFFViewer(xhr, TiffViewerImageName) {
origwidth = width;
setwidth = width;
setheight = height;
//to only display single page
if (setheight > 800 && setwidth > 1000) {
if (setheight > setwidth) {
img.style = "width: 600; height: 800";
......@@ -255,11 +258,13 @@ function TIFFViewer(xhr, TiffViewerImageName) {
flippedX.push(1);
flippedY.push(1);
rot.push(0);
if (j === 1) {
if (j === 1) {
img.style.display = "flex";
}
}
//getting the metadata of each TIFF page
function getMeta(url, callback) {
var img = new Image();
......@@ -440,6 +445,8 @@ function TIFFViewer(xhr, TiffViewerImageName) {
TiffViewer_current++;
document.getElementById("TiffViewer_PageCount").innerHTML = "Page: " + TiffViewer_current + " / " + TiffViewer_pages;
Edited();
}else{
alert("No more image to be fetched");
}
}
};
......@@ -554,6 +561,11 @@ function TIFFViewer(xhr, TiffViewerImageName) {
}
editedwidth = image.clientWidth;
editedheight = image.clientHeight;
// document.getElementById(`IMG${TiffViewer_current + 1}`).style.display = 'none';
// document.getElementById("IMG2").style.display = 'none';
}
/* ADDED:
......@@ -602,5 +614,6 @@ function TIFFViewer(xhr, TiffViewerImageName) {
div.scrollTop += 20;
}
});
}
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