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

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

+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

+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

+  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

+<!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

+<?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

+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;
       }
     });
+
   }