<html>
<head>
<title>Retrieve data from file</title>
<style>
table {border: solid black 1px}
table#data {width:100%}
th {width:20px}
tr:nth-child(odd) {background-color:white}
tr:nth-child(even) {background-color:cccccc}
</style>
<script src=util/ajax.js></script>
</head>
<body bgcolor=lightyellow>
<h1><center>Read a File from the Server</center></h1>
<h2>Read file with paging, scrolling and dragging</h2>
<table>
<tr>
<td>
<label for=file title='Examples: /etc/httpd/conf/httpd.conf, /etc/php.ini, /var/log/httpd/error_log-yyyymmdd, /var/log/mariadb/mariadb.log'>Filename</label>
<input type=text id=file size=30 placeholder='Use absolute path'>
<td>
<img src=util/get.jpg id=get height=31 width=31>
<img src=util/up.jpg id=up height=30 width=30>
<img src=util/down.jpg id=down height=30 width=30>
<td>
<td>Lines <input type=text id=lines size=3 value='20'>
</table>
<hr>
<div id=output> </div>
<b><u>Examples:</u></b><br>
<a href=# onclick="document.getElementById('file').value=this.textContent; doRequest();">/etc/php.ini</a><br>
<a href=# onclick="document.getElementById('file').value=this.textContent; doRequest();">/etc/mime.types</a><br>
<a href=# onclick="document.getElementById('file').value=this.textContent; doRequest();">/etc/services</a><br>
<a href=# onclick="document.getElementById('file').value=this.textContent; doRequest();">/var/log/cron</a><br>
<a href=# onclick="document.getElementById('file').value=this.textContent; doRequest();">/etc/httpd/conf/httpd.conf</a><br>
<a href=# onclick="document.getElementById('file').value=this.textContent; doRequest();">/var/log/httpd/</a><br>
<script>
document.getElementById('get').onclick = function() {doRequest() }; //setup even listeners
document.getElementById('up').onclick = function() {doRequest(-1) };
document.getElementById('down').onclick = function() {doRequest(+1) };
elem = document.getElementById('output');
elem.onmousedown = function(evt) {dragDirection(evt,'down')};
elem.onmouseup = function(evt) {dragDirection(evt,'up') };
elem.onmousewheel = wheelDirection;
elem.addEventListener("DOMMouseScroll", wheelDirection, false); //for Firefox
var url = "https://workshop.sps.nyu.edu/~sultans/php/demo/ws/readFile.php" //server process to call
var page; //global variable
var limit; //global variable
var pswd; //global variable
//========================================================================================
// dragDirection: determine mouse drag direction
//========================================================================================
function dragDirection(evt, mouse_action)
{
if (mouse_action == 'down') //if mouseDown
start_cursorY = evt.clientY; //save the mouse position as start position
if (mouse_action == 'up') //if mouseUp
{
end_cursorY = evt.clientY; //save the mouse position as end position
direction = start_cursorY - end_cursorY; //compute the delta
doRequest(direction);
}
evt.preventDefault(); //prevent the default highlighting
}
//========================================================================================
// wheelDirection: determine mouse wheel direction
//========================================================================================
function wheelDirection(evt)
{
direction = -evt.wheelDelta || evt.detail*40; //all browsers || Firefox
doRequest(direction);
}
//========================================================================================
// doRequest: process the ajax request
//========================================================================================
function doRequest(direction)
{
var prev_page = 1;
var next_page = 1;
if (page) //if there is a previous page
{
prev_page = page -1;
next_page = page +1;
}
var file = document.getElementById('file').value; //get name of the file
if (!direction) //only read number of lines if 'get' button
limit = document.getElementById('lines').value || 20; //number of line or 20 if none
var param = 'file=' + file + '&limit=' + limit; //construct the query string
if (!direction) param += '&page=' + 1;
if (direction < 0) param += '&page=' + prev_page;
if (direction > 0) param += '&page=' + next_page;
var callback = doResponse; //setup a callback function
ajaxRequest(url, "GET", param, callback); //call ajax request
} //pass it the callback fucntion
//========================================================================================
// doResponse: receives the ajax response in all the following formats:
// respText - the response as a text format. Also used for HTML
// respXML - the response as an XML DOM object
// respJSON - the response as a JSON object
// respHeaders - All response headers as a single string
//========================================================================================
function doResponse(respText, respXML, respJSON, respHeaders)
{
array = respText.split('\n'); //convert the response to an array
line = array[0]; //first line of array
//could be: error, dirList or page (for files)
var rec_type = line.substring(0, line.indexOf('|')); //record type is from 0 to |
var rec_value = line.substring(line.indexOf('|')+1 ); //record value is from | to end
if (rec_type=='error') lines = rec_value; //output the error
if (rec_type=='page') page = parseInt(rec_value); //get the page number
if (rec_type=='dirList') //if this is a directory listing
{
if (!pswd)
pswd = prompt('Enter password','cube'); //prompt for a password
if (pswd != 'olap')
{
lines = 'Directory listing not allowed'; //output error message
array = ''; //delete the array
}
}
if (array.length > 1)
lines = "<table id=data>";
for (i=1; i < array.length-1; i++) //loop through all lines of array
{
line = array[i]; //each line is string
var num = line.substring(0, line.indexOf('|')); //number is from 0 to |
var rec = line.substring(line.indexOf('|')+1 ); //line is from | to end
lines += '<tr height=20>';
lines += '<th>' + num +' </th>';
lines += '<td><nobr>'+ rec +'</nobr></td>';
lines += "</tr>";
}
lines += "</table>";
outputDiv = document.getElementById("output"); //get reference to the div tag
outputDiv.innerHTML = lines; //output the response
}
</script>
</body>
</html>