From 0c88e81fe495524e5a989baa7165cb7751c0e6cc Mon Sep 17 00:00:00 2001 From: JeanNicholson Date: Tue, 9 Mar 2021 13:50:51 +0200 Subject: [PATCH 1/7] First commit --- app.css | 122 ++++++++++++++++++++++++++++++++++ app.ts | 183 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 25 +++++-- package.json | 26 ++++++++ 4 files changed, 351 insertions(+), 5 deletions(-) create mode 100644 app.css create mode 100644 app.ts create mode 100644 package.json diff --git a/app.css b/app.css new file mode 100644 index 00000000..61efefd3 --- /dev/null +++ b/app.css @@ -0,0 +1,122 @@ +.maindiv +{ + height: 100%; + width: 100%; + background-color: #f8f8f8; + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + overflow: hidden; +} + +#captiondiv +{ + position: absolute; + top: 0%; + right: 0; + bottom: 0; + left: 0; + height: 5%; + width: 100%; + text-align: center; + font-family: sans-serif; + font-weight: bold; + color: #FFFFFF; + background-color: #282C34; +} + +#tablediv +{ + display: inline; + position: absolute; + top: 5%; + right: 0; + bottom: 0; + left: 0; + height: 90%; + width: 100%; +} + +table +{ + position: absolute; + top: 0%; + right: 0; + bottom: 0; + left: 0; + height: 100%; + width: 100%; + color: #000000; + font-family: Courier, monospace; + font-weight: bold; + background-color: #FFFFFF; + border-collapse: collapse; + border-spacing: 0; +} + +#buttondiv +{ + display: block; + position: absolute; + top: 95%; + right: 0; + bottom: 0; + left: 0; + height: 5%; + width: 100%; + text-align: center; + color: #FFFFFF; + background-color: #282C34; +} + +td +{ + border: 1px solid #000000; + font-family: sans-serif; + font-size: small; + color: #202020; + text-align: center; +} + +th +{ + border: 1px solid #000000; + font-family: sans-serif; + color: #FFFFFF; + font-weight: bold; + background-color: #282C34; +} + +.tableCell +{ + width: 9%; + height: 9%; +} + +button +{ + width:10%; + height:100%; + text-align:center; +} + +@media screen and (max-height:400px) { + #captiondiv + { + display: none !important; + } + #buttondiv + { + top:90%; + height:10%; + + } + #tablediv + { + top:0%; + } +} + + diff --git a/app.ts b/app.ts new file mode 100644 index 00000000..cca2c06e --- /dev/null +++ b/app.ts @@ -0,0 +1,183 @@ +var from:number, to:number, totalRecords:number; + +window.onload = function() +{ + from = 0 + to = 9 + totalRecords = getTotalRecords(); + buttonPropertySet(); + createTable(from,to); + populateTableData(from,to); + fontResize(); +} + +$(window).on('ready resize', function() +{ + fontResize(); +}); + +function fontResize() +{ + $('td').css('font-size', $('td').width() + '%'); + $('td').css('font-size', $('td').height() + '%'); + $('th').css('font-size', $('th').width() + '%'); + $('th').css('font-size', $('th').height() + '%'); + $('button').css('font-size', $('button').width() + '%'); +} + +function buttonPropertySet() +{ + var previous = document.getElementById("previous"); + var previous5 = document.getElementById("previous5"); + var previous10 = document.getElementById("previous10"); + var previous100 = document.getElementById("previous100"); + var next = document.getElementById("next"); + var next5 = document.getElementById("next5"); + var next10 = document.getElementById("next10"); + var next100 = document.getElementById("next100"); + + // disable previous buttons when out of range + if(from < 9) + previous.disabled=true; + else + previous.disabled=false; + + if(from < 49) + previous5.disabled=true; + else + previous5.disabled=false; + + if(from < 99) + previous10.disabled=true; + else + previous10.disabled=false; + + if(from < 999) + previous100.disabled=true; + else + previous100.disabled=false; + + // disable next buttons when out of range + if(from >= (totalRecords - 10)) + next.disabled=true; + else + next.disabled=false; + + if(from >= (totalRecords - 50)) + next5.disabled=true; + else + next5.disabled=false; + + if(from >= (totalRecords - 100)) + next10.disabled=true; + else + next10.disabled=false; + + if(from >= (totalRecords - 1000)) + next100.disabled=true; + else + next100.disabled=false; +} + +function getColumnHeaders() +{ + const HttpRequest = new XMLHttpRequest(); + const url='http://localhost:2050/columns'; + HttpRequest.open("GET", url, false); + HttpRequest.send(); + + const responseText = HttpRequest.responseText + const JSONObject = JSON.parse(responseText); + + return JSONObject; +} + +function getColumnData(from:number,to:number) +{ + const HttpRequest = new XMLHttpRequest(); + const url=`http://localhost:2050/records?from=${from}&to=${to}`; + HttpRequest.open("GET", url, false); + HttpRequest.send(); + + const responseText = HttpRequest.responseText + const JSONObject = JSON.parse(responseText); + + return JSONObject; +} + +function getTotalRecords() +{ + const HttpRequest = new XMLHttpRequest(); + const url='http://localhost:2050//recordCount'; + HttpRequest.open("GET", url, false); + HttpRequest.send(); + + const responseText = HttpRequest.responseText + + return parseInt(responseText); +} + +function populateTableData(from:number,to:number) +{ + var dataJSONObject = getColumnData(from,to); + + for (let index = 0; index < Object.keys(dataJSONObject).length; index++) + { + for (let index2 = 0; index2 < Object.keys(dataJSONObject[index]).length; index2++) + { + document.getElementById("row_" + index + "_cell_" + index2)!.innerHTML = dataJSONObject[index][index2] + } + + } +} + +function createTable(from:number, to:number) +{ + + var headerJSONObject = getColumnHeaders(); + var dataJSONObject = getColumnData(0,9); + + const table = document.createElement("table"); + + // insert a row and add headings to it + const hrow = table.insertRow(); + for (let index = 0; index < Object.keys(headerJSONObject).length; index++) + { + var newCell = hrow.insertCell(-1); + newCell.outerHTML = `${headerJSONObject[index]}`; + newCell.className = "tableCell"; + } + + for (let index = 0; index < Object.keys(dataJSONObject).length; index++) + { + const drow = table.insertRow(-1); + + for (let index2 = 0; index2 < Object.keys(dataJSONObject[index]).length; index2++) + { + var newCell = drow.insertCell(-1); + newCell.className = "tableCell"; + newCell.id = "row_" + index + "_cell_" + index2; + } + } + + // add table to div + document.getElementById("tablediv")!.appendChild(table); // ** Check die code die ! suppress 'n "possibly null" + +} + +function previousButton(multiplier:number) +{ + from -= (10 * multiplier); + to -= (10 * multiplier); + buttonPropertySet(); + populateTableData(from,to); +} + +function nextButton(multiplier:number) +{ + from += (10 * multiplier); + to += (10 * multiplier); + buttonPropertySet(); + populateTableData(from,to); +} + diff --git a/index.html b/index.html index add5e736..45b5c7b0 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,27 @@ - - JS Onboard Project - - + + + + + + -

Hello

+
+
Data Grid
+
+
+ + + + + + + + +
+
diff --git a/package.json b/package.json new file mode 100644 index 00000000..51e68214 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "onboard-javascript", + "version": "1.0.0", + "description": "This is a JavaScript project for all new developers to complete before venturing into our web frontend codebase.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/JeanNicholson/onboard-javascript.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/JeanNicholson/onboard-javascript/issues" + }, + "homepage": "https://github.com/JeanNicholson/onboard-javascript#readme", + "devDependencies": { + "@types/jquery": "^3.5.5", + "typescript": "^4.2.2" + }, + "scripts": { + "build": "tsc -w" + } +} From d003544dc615e565c0ae95eea059ba50aa2299ad Mon Sep 17 00:00:00 2001 From: JeanNicholson Date: Mon, 15 Mar 2021 14:51:47 +0200 Subject: [PATCH 2/7] Second commit --- app.css | 117 ++++++++++++------ app.ts | 350 +++++++++++++++++++++++++++++++++-------------------- index.html | 7 +- 3 files changed, 303 insertions(+), 171 deletions(-) diff --git a/app.css b/app.css index 61efefd3..97712cc8 100644 --- a/app.css +++ b/app.css @@ -14,11 +14,11 @@ #captiondiv { position: absolute; - top: 0%; + top: 0; right: 0; bottom: 0; left: 0; - height: 5%; + height: 25px; width: 100%; text-align: center; font-family: sans-serif; @@ -28,21 +28,34 @@ } #tablediv -{ - display: inline; +{ + position: absolute; + top: 25px; + right: 0; + bottom: 0; + left: 0; + height: calc(100% - 50px); + width: 100%; +} + +#buttondiv +{ position: absolute; - top: 5%; + top: auto; right: 0; bottom: 0; left: 0; - height: 90%; + height: 25px; width: 100%; + text-align: center; + color: #FFFFFF; + background-color: #282C34; } table { position: absolute; - top: 0%; + top: 0; right: 0; bottom: 0; left: 0; @@ -56,50 +69,36 @@ table border-spacing: 0; } -#buttondiv -{ - display: block; - position: absolute; - top: 95%; - right: 0; - bottom: 0; - left: 0; - height: 5%; - width: 100%; - text-align: center; - color: #FFFFFF; - background-color: #282C34; -} - td { border: 1px solid #000000; font-family: sans-serif; - font-size: small; + font-size: 8%; color: #202020; text-align: center; + padding: 0; + /*white-space:nowrap;*/ } th { border: 1px solid #000000; font-family: sans-serif; + font-size: 8%; color: #FFFFFF; font-weight: bold; background-color: #282C34; -} - -.tableCell -{ - width: 9%; - height: 9%; + max-height: 25px; + padding: 0; + /*white-space: nowrap;*/ } button { - width:10%; - height:100%; - text-align:center; + width: 8%; + height: 25px; + font-size: xx-small; + text-align: center; } @media screen and (max-height:400px) { @@ -107,16 +106,58 @@ button { display: none !important; } - #buttondiv + #tablediv { - top:90%; - height:10%; - + top:0; + height: calc(100% - 25px); } - #tablediv +} + +@media screen and (max-width:800px) { + #next10 + { + display: none !important; + } + #previous10 + { + display: none !important; + } +} + +@media screen and (max-width:500px) { + #next5 + { + display: none !important; + } + #previous5 + { + display: none !important; + } +} + +@media screen and (max-width:300px) { + #next + { + display: none !important; + } + #previous { - top:0%; + display: none !important; } } +#jumpToButton +{ + width: 13%; + min-width: 50px; + font-size: 6px; + white-space: nowrap; +} + +#jumpToValue +{ + width: 13%; + min-width: 30px; +} + diff --git a/app.ts b/app.ts index cca2c06e..b4711201 100644 --- a/app.ts +++ b/app.ts @@ -1,183 +1,273 @@ -var from:number, to:number, totalRecords:number; +class table +{ -window.onload = function() + constructor() + { + this.from = 0; + this._to = this.to; + } + + private _from:number = 0; + private _to:number; + + get from() + { + return this._from; + } + + set from(from:number) + { + let totalRecordsIndex:number = getTotalRecords() - 1; + + if((from + this.getNumberOfRows()) > totalRecordsIndex) + this._from = (totalRecordsIndex - this.getNumberOfRows()); + else if(from < 0 ) + this._from = 0; + else + this._from = from; + + this._to = this.to; + + } + + get to():number + { + let to:number; + + to = this._from + this.getNumberOfRows() + + if (to > getTotalRecords()) + return getTotalRecords() - 1; + else + return to; + } + + + //determine the amount of rows to add to the table based on the size on the window + getNumberOfRows() + { + let height = (parseInt(((window.innerHeight-75)/20).toFixed(0)) - 1); + let width = (parseInt(((window.innerWidth-75)/20).toFixed(0)) - 1); + + if (height < width) + return height; + else + return width; + + } + + getTotalRecords() + { + const HttpRequest = new XMLHttpRequest(); + const url='http://localhost:2050//recordCount'; + HttpRequest.open("GET", url, false); + HttpRequest.send(); + + const responseText = HttpRequest.responseText + + return parseInt(responseText); + } + + buildTable(from:number,to:number) + { + $("#dataTableBody").find("tr").remove(); + + let tableBody = document.getElementById("dataTableBody"); + + //make the ajax call to retrieve the records and build the table + $.ajax({ + url: `http://localhost:2050/records?from=${from}&to=${to}`, + dataType:'json', + success:function(data) { + + $.each(data, function(row) + { + const dataRow = tableBody.insertRow(-1); + $.each(data[row], function(cell) + { + const newCell = dataRow.insertCell(-1); + newCell.innerHTML = data[row][cell]; + } + ) + } + ) + } + }); + + tableBody = document.getElementById("dataTableBody"); + + const dataRow = tableBody.insertRow(0); + + //make the ajax call to retrieve the records and build the table header + $.ajax({ + url: `http://localhost:2050/columns`, + dataType:'json', + async:false, + success:function(data) { + + //const dataRow = tableBody.insertRow(0); + $.each(data, function(cell) + { + const newCell = dataRow.insertCell(-1); + newCell.outerHTML = `${data[cell]}`; + + } + ) + } + }); + + //call the button property set fucntion to set disable/enably buttons appropriately + buttonPropertySet(); + + } + +} + +class utility { - from = 0 - to = 9 - totalRecords = getTotalRecords(); - buttonPropertySet(); - createTable(from,to); - populateTableData(from,to); - fontResize(); + timeout:number = 0; + + debounce(func: Function, wait:number){ + //let timeout:number; + + return (...args:any[]) => { + const later = () => { + clearTimeout(this.timeout); + func(...args); + }; + + clearTimeout(this.timeout); + this.timeout = setTimeout(later, wait); + }; + }; } -$(window).on('ready resize', function() +const myTable = new table(); +const myUtility = new utility(); + +window.onload = function() { - fontResize(); -}); -function fontResize() + const request = myUtility.debounce(myTable.buildTable,250); + + request(myTable.from,myTable.to); + +} + +//on resize funtionalty to rebuild the table +$(window).on('resize', function() { - $('td').css('font-size', $('td').width() + '%'); - $('td').css('font-size', $('td').height() + '%'); - $('th').css('font-size', $('th').width() + '%'); - $('th').css('font-size', $('th').height() + '%'); - $('button').css('font-size', $('button').width() + '%'); + const request = myUtility.debounce(myTable.buildTable,250); + + request(myTable.from,myTable.to); } +); function buttonPropertySet() { - var previous = document.getElementById("previous"); - var previous5 = document.getElementById("previous5"); - var previous10 = document.getElementById("previous10"); - var previous100 = document.getElementById("previous100"); - var next = document.getElementById("next"); - var next5 = document.getElementById("next5"); - var next10 = document.getElementById("next10"); - var next100 = document.getElementById("next100"); - + let previous = document.getElementById("previous"); + let previous5 = document.getElementById("previous5"); + let previous10 = document.getElementById("previous10"); + let next = document.getElementById("next"); + let next5 = document.getElementById("next5"); + let next10 = document.getElementById("next10"); + + let from = myTable.from; + let totalRecords = getTotalRecords(); + // disable previous buttons when out of range - if(from < 9) + if(from === 0) + { previous.disabled=true; + previous5.disabled = true; + previous10.disabled = true; + } else + { previous.disabled=false; - - if(from < 49) - previous5.disabled=true; - else previous5.disabled=false; - - if(from < 99) - previous10.disabled=true; - else previous10.disabled=false; - - if(from < 999) - previous100.disabled=true; - else - previous100.disabled=false; + } // disable next buttons when out of range - if(from >= (totalRecords - 10)) + if(from + myTable.getNumberOfRows() === (totalRecords -1)) + { next.disabled=true; - else - next.disabled=false; - - if(from >= (totalRecords - 50)) next5.disabled=true; - else - next5.disabled=false; - - if(from >= (totalRecords - 100)) next10.disabled=true; + } else + { + next.disabled=false; + next5.disabled=false; next10.disabled=false; - - if(from >= (totalRecords - 1000)) - next100.disabled=true; - else - next100.disabled=false; + } } -function getColumnHeaders() +//function to retrieve the total record count used when building the table +function getTotalRecords() { const HttpRequest = new XMLHttpRequest(); - const url='http://localhost:2050/columns'; + const url='http://localhost:2050//recordCount'; HttpRequest.open("GET", url, false); HttpRequest.send(); const responseText = HttpRequest.responseText - const JSONObject = JSON.parse(responseText); - return JSONObject; + return parseInt(responseText); } -function getColumnData(from:number,to:number) +//previous button function that takes a multiplier indicating the amount of pages to page at a time +function previousButton(multiplier:number) { - const HttpRequest = new XMLHttpRequest(); - const url=`http://localhost:2050/records?from=${from}&to=${to}`; - HttpRequest.open("GET", url, false); - HttpRequest.send(); + // wrap the logic within a debounce funtion to prevent unnecesary calls. + let request = myUtility.debounce(function(){ + + myTable.from = myTable.from - ((myTable.getNumberOfRows() + 1) * multiplier); - const responseText = HttpRequest.responseText - const JSONObject = JSON.parse(responseText); - - return JSONObject; -} + myTable.buildTable(myTable.from,myTable.to); -function getTotalRecords() -{ - const HttpRequest = new XMLHttpRequest(); - const url='http://localhost:2050//recordCount'; - HttpRequest.open("GET", url, false); - HttpRequest.send(); + },250); - const responseText = HttpRequest.responseText - - return parseInt(responseText); + request(); + } -function populateTableData(from:number,to:number) +//next button function that takes a multiplier indicating the amount of pages to page at a time +function nextButton(multiplier:number) { - var dataJSONObject = getColumnData(from,to); - - for (let index = 0; index < Object.keys(dataJSONObject).length; index++) - { - for (let index2 = 0; index2 < Object.keys(dataJSONObject[index]).length; index2++) - { - document.getElementById("row_" + index + "_cell_" + index2)!.innerHTML = dataJSONObject[index][index2] - } - - } -} + // wrap the logic within a debounce funtion to prevent unnecesary calls. + let request = myUtility.debounce(function(){ + + myTable.from = myTable.from + ((myTable.getNumberOfRows() + 1) * multiplier); -function createTable(from:number, to:number) -{ + myTable.buildTable(myTable.from,myTable.to); - var headerJSONObject = getColumnHeaders(); - var dataJSONObject = getColumnData(0,9); + },250); - const table = document.createElement("table"); + request(); - // insert a row and add headings to it - const hrow = table.insertRow(); - for (let index = 0; index < Object.keys(headerJSONObject).length; index++) - { - var newCell = hrow.insertCell(-1); - newCell.outerHTML = `${headerJSONObject[index]}`; - newCell.className = "tableCell"; - } +} - for (let index = 0; index < Object.keys(dataJSONObject).length; index++) - { - const drow = table.insertRow(-1); +function jumpToButton() +{ + let inputElement = document.getElementById("jumpToValue"); + let from:number; - for (let index2 = 0; index2 < Object.keys(dataJSONObject[index]).length; index2++) - { - var newCell = drow.insertCell(-1); - newCell.className = "tableCell"; - newCell.id = "row_" + index + "_cell_" + index2; - } - } + // wrap the logic within a debounce funtion to prevent unnecesary calls. + let request = myUtility.debounce(function(){ - // add table to div - document.getElementById("tablediv")!.appendChild(table); // ** Check die code die ! suppress 'n "possibly null" + if (inputElement.value === "") + from = 0; + else + from = parseInt(inputElement.value); -} + myTable.from = from; -function previousButton(multiplier:number) -{ - from -= (10 * multiplier); - to -= (10 * multiplier); - buttonPropertySet(); - populateTableData(from,to); -} + myTable.buildTable(myTable.from,myTable.to); -function nextButton(multiplier:number) -{ - from += (10 * multiplier); - to += (10 * multiplier); - buttonPropertySet(); - populateTableData(from,to); -} + },250); + + request(); +} \ No newline at end of file diff --git a/index.html b/index.html index 45b5c7b0..a44a55e3 100644 --- a/index.html +++ b/index.html @@ -10,16 +10,17 @@
Data Grid
-
+
- + - + +
From 360437baf377fa7005449ba689a95d619cfc6209 Mon Sep 17 00:00:00 2001 From: JeanNicholson Date: Mon, 15 Mar 2021 16:07:31 +0200 Subject: [PATCH 3/7] Third Commit --- app.css | 13 ++++++------- app.ts | 34 +++++++++++++++++++++++++++------- 2 files changed, 33 insertions(+), 14 deletions(-) diff --git a/app.css b/app.css index 97712cc8..5b412141 100644 --- a/app.css +++ b/app.css @@ -73,18 +73,17 @@ td { border: 1px solid #000000; font-family: sans-serif; - font-size: 8%; color: #202020; text-align: center; padding: 0; /*white-space:nowrap;*/ + font-size: small; } th { - border: 1px solid #000000; + border: 1px solid #000000; font-family: sans-serif; - font-size: 8%; color: #FFFFFF; font-weight: bold; background-color: #282C34; @@ -97,11 +96,11 @@ button { width: 8%; height: 25px; - font-size: xx-small; + font-size: small; text-align: center; } -@media screen and (max-height:400px) { +/*@media screen and (max-height:400px) { #captiondiv { display: none !important; @@ -111,7 +110,7 @@ button top:0; height: calc(100% - 25px); } -} +}*/ @media screen and (max-width:800px) { #next10 @@ -150,7 +149,7 @@ button { width: 13%; min-width: 50px; - font-size: 6px; + font-size: small; white-space: nowrap; } diff --git a/app.ts b/app.ts index b4711201..ecd96cc9 100644 --- a/app.ts +++ b/app.ts @@ -19,6 +19,11 @@ class table { let totalRecordsIndex:number = getTotalRecords() - 1; + console.log("test"); + console.log(this._from); + console.log(totalRecordsIndex); + console.log(this.getNumberOfRows()); + if((from + this.getNumberOfRows()) > totalRecordsIndex) this._from = (totalRecordsIndex - this.getNumberOfRows()); else if(from < 0 ) @@ -45,14 +50,22 @@ class table //determine the amount of rows to add to the table based on the size on the window getNumberOfRows() - { - let height = (parseInt(((window.innerHeight-75)/20).toFixed(0)) - 1); - let width = (parseInt(((window.innerWidth-75)/20).toFixed(0)) - 1); + { + let rows:number; + + //subtract - 1 to cater for header row. + let height = (parseInt(((window.innerHeight-75)/30).toFixed(0)) - 1); + let width = (parseInt(((window.innerWidth-75)/30).toFixed(0)) - 1); if (height < width) - return height; + rows = height; else - return width; + rows = width; + + if (rows < 0) + return 0; + else + return rows; } @@ -157,9 +170,16 @@ window.onload = function() //on resize funtionalty to rebuild the table $(window).on('resize', function() { - const request = myUtility.debounce(myTable.buildTable,250); + // wrap the logic within a debounce funtion to prevent unnecesary calls. + let request = myUtility.debounce(function(){ - request(myTable.from,myTable.to); + myTable.from = myTable.from; + + myTable.buildTable(myTable.from,myTable.to); + + },250); + + request(); } ); From ea11e948233072702dfced6c78d48e6c9d3342e9 Mon Sep 17 00:00:00 2001 From: JeanNicholson Date: Mon, 15 Mar 2021 16:57:13 +0200 Subject: [PATCH 4/7] Forth Commit --- app.css | 7 ++++--- app.ts | 26 ++++++++++++++++++-------- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/app.css b/app.css index 5b412141..470ae523 100644 --- a/app.css +++ b/app.css @@ -76,8 +76,8 @@ td color: #202020; text-align: center; padding: 0; - /*white-space:nowrap;*/ - font-size: small; + white-space:nowrap; + font-size: x-small; } th @@ -89,7 +89,8 @@ th background-color: #282C34; max-height: 25px; padding: 0; - /*white-space: nowrap;*/ + font-size: x-small; + white-space: nowrap; } button diff --git a/app.ts b/app.ts index ecd96cc9..8ced6c18 100644 --- a/app.ts +++ b/app.ts @@ -5,10 +5,17 @@ class table { this.from = 0; this._to = this.to; + this._totalRecords = getTotalRecords(); } private _from:number = 0; private _to:number; + private _totalRecords:number; + + get totalRecords() + { + return this._totalRecords + } get from() { @@ -17,7 +24,7 @@ class table set from(from:number) { - let totalRecordsIndex:number = getTotalRecords() - 1; + let totalRecordsIndex:number = this._totalRecords - 1; console.log("test"); console.log(this._from); @@ -41,8 +48,8 @@ class table to = this._from + this.getNumberOfRows() - if (to > getTotalRecords()) - return getTotalRecords() - 1; + if (to > this._totalRecords) + return this._totalRecords- 1; else return to; } @@ -65,7 +72,7 @@ class table if (rows < 0) return 0; else - return rows; + return rows; } @@ -85,7 +92,9 @@ class table { $("#dataTableBody").find("tr").remove(); - let tableBody = document.getElementById("dataTableBody"); + let tableBody = document.getElementById("dataTableBody"); + + console.log("test speed 1"); //make the ajax call to retrieve the records and build the table $.ajax({ @@ -107,6 +116,8 @@ class table } }); + console.log("test speed 2"); + tableBody = document.getElementById("dataTableBody"); const dataRow = tableBody.insertRow(0); @@ -130,7 +141,7 @@ class table }); //call the button property set fucntion to set disable/enably buttons appropriately - buttonPropertySet(); + //buttonPropertySet(); } @@ -141,7 +152,6 @@ class utility timeout:number = 0; debounce(func: Function, wait:number){ - //let timeout:number; return (...args:any[]) => { const later = () => { @@ -193,7 +203,7 @@ function buttonPropertySet() let next10 = document.getElementById("next10"); let from = myTable.from; - let totalRecords = getTotalRecords(); + let totalRecords = myTable.totalRecords; // disable previous buttons when out of range if(from === 0) From 5cd3c293e5b174f0b63c8f2a50abfa3a74af1a5a Mon Sep 17 00:00:00 2001 From: JeanNicholson Date: Mon, 15 Mar 2021 16:58:57 +0200 Subject: [PATCH 5/7] Fifth Commit --- app.ts | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/app.ts b/app.ts index 8ced6c18..efcfb1f5 100644 --- a/app.ts +++ b/app.ts @@ -26,11 +26,6 @@ class table { let totalRecordsIndex:number = this._totalRecords - 1; - console.log("test"); - console.log(this._from); - console.log(totalRecordsIndex); - console.log(this.getNumberOfRows()); - if((from + this.getNumberOfRows()) > totalRecordsIndex) this._from = (totalRecordsIndex - this.getNumberOfRows()); else if(from < 0 ) @@ -141,7 +136,7 @@ class table }); //call the button property set fucntion to set disable/enably buttons appropriately - //buttonPropertySet(); + buttonPropertySet(); } From 2a8bf548ff5a422876c8c5d1e55c9c0d5b1db987 Mon Sep 17 00:00:00 2001 From: JeanNicholson Date: Tue, 16 Mar 2021 17:42:15 +0200 Subject: [PATCH 6/7] Sixth Commit --- app.css | 253 +++++++++++++++++------------------ app.ts | 379 ++++++++++++++++++----------------------------------- index.html | 1 + table.ts | 138 +++++++++++++++++++ 4 files changed, 381 insertions(+), 390 deletions(-) create mode 100644 table.ts diff --git a/app.css b/app.css index 470ae523..94e85f93 100644 --- a/app.css +++ b/app.css @@ -1,163 +1,146 @@ -.maindiv -{ - height: 100%; - width: 100%; - background-color: #f8f8f8; - position: absolute; - left: 0px; - right: 0px; - top: 0px; - bottom: 0px; - overflow: hidden; +.maindiv { + height: 100%; + width: 100%; + background-color: #f8f8f8; + position: absolute; + left: 0px; + right: 0px; + top: 0px; + bottom: 0px; + overflow: hidden; } -#captiondiv -{ - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - height: 25px; - width: 100%; - text-align: center; - font-family: sans-serif; - font-weight: bold; - color: #FFFFFF; - background-color: #282C34; +#captiondiv { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + height: 25px; + width: 100%; + text-align: center; + font-family: sans-serif; + font-weight: bold; + color: #ffffff; + background-color: #282c34; } -#tablediv -{ - position: absolute; - top: 25px; - right: 0; - bottom: 0; - left: 0; - height: calc(100% - 50px); - width: 100%; +#tablediv { + position: absolute; + top: 25px; + right: 0; + bottom: 0; + left: 0; + height: calc(100% - 50px); + /*height: 100%;*/ + width: 100%; } -#buttondiv -{ - position: absolute; - top: auto; - right: 0; - bottom: 0; - left: 0; - height: 25px; - width: 100%; - text-align: center; - color: #FFFFFF; - background-color: #282C34; +#buttondiv { + position: absolute; + top: auto; + right: 0; + bottom: 0; + left: 0; + height: 25px; + width: 100%; + text-align: center; + color: #ffffff; + background-color: #282c34; } -table -{ - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - height: 100%; - width: 100%; - color: #000000; - font-family: Courier, monospace; - font-weight: bold; - background-color: #FFFFFF; - border-collapse: collapse; - border-spacing: 0; +table { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + height: 100%; + width: 100%; + color: #000000; + font-family: Courier, monospace; + font-weight: bold; + background-color: #ffffff; + border-collapse: collapse; + border-spacing: 0; } -td -{ - border: 1px solid #000000; - font-family: sans-serif; - color: #202020; - text-align: center; - padding: 0; - white-space:nowrap; - font-size: x-small; +td { + border: 1px solid #000000; + font-family: sans-serif; + color: #202020; + text-align: center; + padding: 0; + white-space: nowrap; + font-size: x-small; } -th -{ - border: 1px solid #000000; - font-family: sans-serif; - color: #FFFFFF; - font-weight: bold; - background-color: #282C34; - max-height: 25px; - padding: 0; - font-size: x-small; - white-space: nowrap; +th { + border: 1px solid #000000; + font-family: sans-serif; + color: #ffffff; + font-weight: bold; + background-color: #282c34; + max-height: 25px; + padding: 0; + font-size: x-small; + white-space: nowrap; } -button -{ - width: 8%; - height: 25px; - font-size: small; - text-align: center; +button { + width: 8%; + height: 25px; + font-size: small; + text-align: center; } /*@media screen and (max-height:400px) { - #captiondiv - { - display: none !important; - } - #tablediv - { - top:0; - height: calc(100% - 25px); - } + #captiondiv + { + display: none !important; + } + #tablediv + { + top:0; + height: calc(100% - 25px); + } }*/ -@media screen and (max-width:800px) { - #next10 - { - display: none !important; - } - #previous10 - { - display: none !important; - } +@media screen and (max-width: 800px) { + #next10 { + display: none !important; + } + #previous10 { + display: none !important; + } } -@media screen and (max-width:500px) { - #next5 - { - display: none !important; - } - #previous5 - { - display: none !important; - } +@media screen and (max-width: 500px) { + #next5 { + display: none !important; + } + #previous5 { + display: none !important; + } } -@media screen and (max-width:300px) { - #next - { - display: none !important; - } - #previous - { - display: none !important; - } +@media screen and (max-width: 300px) { + #next { + display: none !important; + } + #previous { + display: none !important; + } } -#jumpToButton -{ - width: 13%; - min-width: 50px; - font-size: small; - white-space: nowrap; +#jumpToButton { + width: 13%; + min-width: 50px; + font-size: small; + white-space: nowrap; } -#jumpToValue -{ - width: 13%; - min-width: 30px; +#jumpToValue { + width: 13%; + min-width: 30px; } - - diff --git a/app.ts b/app.ts index efcfb1f5..892c0ba6 100644 --- a/app.ts +++ b/app.ts @@ -1,298 +1,167 @@ -class table -{ - - constructor() - { - this.from = 0; - this._to = this.to; - this._totalRecords = getTotalRecords(); - } - - private _from:number = 0; - private _to:number; - private _totalRecords:number; - - get totalRecords() - { - return this._totalRecords - } - - get from() - { - return this._from; - } - - set from(from:number) - { - let totalRecordsIndex:number = this._totalRecords - 1; - - if((from + this.getNumberOfRows()) > totalRecordsIndex) - this._from = (totalRecordsIndex - this.getNumberOfRows()); - else if(from < 0 ) - this._from = 0; - else - this._from = from; - - this._to = this.to; - - } - - get to():number - { - let to:number; - - to = this._from + this.getNumberOfRows() - - if (to > this._totalRecords) - return this._totalRecords- 1; - else - return to; - } - - - //determine the amount of rows to add to the table based on the size on the window - getNumberOfRows() - { - let rows:number; - - //subtract - 1 to cater for header row. - let height = (parseInt(((window.innerHeight-75)/30).toFixed(0)) - 1); - let width = (parseInt(((window.innerWidth-75)/30).toFixed(0)) - 1); - - if (height < width) - rows = height; - else - rows = width; - - if (rows < 0) - return 0; - else - return rows; - - } - - getTotalRecords() - { - const HttpRequest = new XMLHttpRequest(); - const url='http://localhost:2050//recordCount'; - HttpRequest.open("GET", url, false); - HttpRequest.send(); - - const responseText = HttpRequest.responseText - - return parseInt(responseText); - } - - buildTable(from:number,to:number) - { - $("#dataTableBody").find("tr").remove(); - - let tableBody = document.getElementById("dataTableBody"); - - console.log("test speed 1"); - - //make the ajax call to retrieve the records and build the table - $.ajax({ - url: `http://localhost:2050/records?from=${from}&to=${to}`, - dataType:'json', - success:function(data) { - - $.each(data, function(row) - { - const dataRow = tableBody.insertRow(-1); - $.each(data[row], function(cell) - { - const newCell = dataRow.insertCell(-1); - newCell.innerHTML = data[row][cell]; - } - ) - } - ) - } - }); - - console.log("test speed 2"); - - tableBody = document.getElementById("dataTableBody"); - - const dataRow = tableBody.insertRow(0); - - //make the ajax call to retrieve the records and build the table header - $.ajax({ - url: `http://localhost:2050/columns`, - dataType:'json', - async:false, - success:function(data) { - - //const dataRow = tableBody.insertRow(0); - $.each(data, function(cell) - { - const newCell = dataRow.insertCell(-1); - newCell.outerHTML = `${data[cell]}`; - - } - ) - } - }); - - //call the button property set fucntion to set disable/enably buttons appropriately - buttonPropertySet(); - - } +function getColumnData(): string[] { + let headerArray: string[]; + headerArray = []; + + $.ajax({ + url: 'http://localhost:2050/columns', + dataType: 'json', + async: false, + success: function (data) { + + for (let index = 0; index < data.length; index++) { + headerArray[index] = data[index]; + } + } + }); + + return headerArray; } -class utility -{ - timeout:number = 0; - - debounce(func: Function, wait:number){ - - return (...args:any[]) => { - const later = () => { - clearTimeout(this.timeout); - func(...args); - }; - - clearTimeout(this.timeout); - this.timeout = setTimeout(later, wait); - }; - }; +class Utility { + timeout: number = 0; + + debounce(func: Function, wait: number) { + + return (...args: any[]) => { + const later = () => { + clearTimeout(this.timeout); + func(...args); + }; + + clearTimeout(this.timeout); + this.timeout = setTimeout(later, wait); + }; + }; } -const myTable = new table(); -const myUtility = new utility(); +const myTable = new Table(); +const myUtility = new Utility(); -window.onload = function() -{ +window.onload = function () { - const request = myUtility.debounce(myTable.buildTable,250); + const request = myUtility.debounce(myTable.buildTable, 250); - request(myTable.from,myTable.to); + request(); } //on resize funtionalty to rebuild the table -$(window).on('resize', function() -{ - // wrap the logic within a debounce funtion to prevent unnecesary calls. - let request = myUtility.debounce(function(){ +$(window).on('resize', function () { + // wrap the logic within a debounce funtion to prevent unnecesary calls. + let request = myUtility.debounce(function () { - myTable.from = myTable.from; + myTable.from = myTable.from; - myTable.buildTable(myTable.from,myTable.to); + myTable.buildTable(); - },250); + }, 250); - request(); + request(); } ); -function buttonPropertySet() -{ - let previous = document.getElementById("previous"); - let previous5 = document.getElementById("previous5"); - let previous10 = document.getElementById("previous10"); - let next = document.getElementById("next"); - let next5 = document.getElementById("next5"); - let next10 = document.getElementById("next10"); - - let from = myTable.from; - let totalRecords = myTable.totalRecords; - - // disable previous buttons when out of range - if(from === 0) - { - previous.disabled=true; - previous5.disabled = true; - previous10.disabled = true; - } - else - { - previous.disabled=false; - previous5.disabled=false; - previous10.disabled=false; - } - - // disable next buttons when out of range - if(from + myTable.getNumberOfRows() === (totalRecords -1)) - { - next.disabled=true; - next5.disabled=true; - next10.disabled=true; - } - else - { - next.disabled=false; - next5.disabled=false; - next10.disabled=false; - } +function buttonPropertySet() { + let previous = document.getElementById("previous"); + let previous5 = document.getElementById("previous5"); + let previous10 = document.getElementById("previous10"); + let next = document.getElementById("next"); + let next5 = document.getElementById("next5"); + let next10 = document.getElementById("next10"); + + let from = myTable.from; + let totalRecords = myTable.totalRecords; + + // disable previous buttons when out of range + if (from === 0) { + previous.disabled = true; + previous5.disabled = true; + previous10.disabled = true; + } + else { + previous.disabled = false; + previous5.disabled = false; + previous10.disabled = false; + } + + // disable next buttons when out of range + if (from + myTable.getNumberOfRows() === (totalRecords - 1)) { + next.disabled = true; + next5.disabled = true; + next10.disabled = true; + } + else { + next.disabled = false; + next5.disabled = false; + next10.disabled = false; + } } //function to retrieve the total record count used when building the table -function getTotalRecords() -{ - const HttpRequest = new XMLHttpRequest(); - const url='http://localhost:2050//recordCount'; - HttpRequest.open("GET", url, false); - HttpRequest.send(); - - const responseText = HttpRequest.responseText - - return parseInt(responseText); +function getTotalRecords() { + const HttpRequest = new XMLHttpRequest(); + const url = 'http://localhost:2050//recordCount'; + HttpRequest.open("GET", url, true); + HttpRequest.send(); + + const responseText = HttpRequest.responseText + + return parseInt(responseText); } -//previous button function that takes a multiplier indicating the amount of pages to page at a time -function previousButton(multiplier:number) -{ - // wrap the logic within a debounce funtion to prevent unnecesary calls. - let request = myUtility.debounce(function(){ - - myTable.from = myTable.from - ((myTable.getNumberOfRows() + 1) * multiplier); +// previous button function that takes a multiplier indicating the amount of pages to page at a time +function previousButton(multiplier: number) { + // wrap the logic within a debounce funtion to prevent unnecesary calls. + let request = myUtility.debounce(function () { - myTable.buildTable(myTable.from,myTable.to); + myTable.from = myTable.from - ((myTable.getNumberOfRows() + 1) * multiplier); - },250); + myTable.buildTable(); + + }, 250); + + request(); - request(); - } //next button function that takes a multiplier indicating the amount of pages to page at a time -function nextButton(multiplier:number) -{ - // wrap the logic within a debounce funtion to prevent unnecesary calls. - let request = myUtility.debounce(function(){ - - myTable.from = myTable.from + ((myTable.getNumberOfRows() + 1) * multiplier); +function nextButton(multiplier: number) { + // wrap the logic within a debounce funtion to prevent unnecesary calls. + let request = myUtility.debounce(function () { - myTable.buildTable(myTable.from,myTable.to); + myTable.from = myTable.from + ((myTable.getNumberOfRows() + 1) * multiplier); - },250); + myTable.buildTable(); - request(); + }, 250); + + request(); } -function jumpToButton() -{ - let inputElement = document.getElementById("jumpToValue"); - let from:number; +function jumpToButton() { + let inputElement = document.getElementById("jumpToValue"); + let from: number; + + // wrap the logic within a debounce funtion to prevent unnecesary calls. + let request = myUtility.debounce(function () { - // wrap the logic within a debounce funtion to prevent unnecesary calls. - let request = myUtility.debounce(function(){ + if (inputElement.value === "") + from = 0; + else + from = parseInt(inputElement.value); - if (inputElement.value === "") - from = 0; - else - from = parseInt(inputElement.value); + myTable.from = from; - myTable.from = from; + myTable.buildTable(); - myTable.buildTable(myTable.from,myTable.to); + }, 250); - },250); + request(); - request(); +} + +function test() { + +} -} \ No newline at end of file diff --git a/index.html b/index.html index a44a55e3..fad3bcfc 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + diff --git a/table.ts b/table.ts new file mode 100644 index 00000000..8e58acf4 --- /dev/null +++ b/table.ts @@ -0,0 +1,138 @@ +class Table { + + private _from: number = 0; + //private _to: number; + private _totalRecords: number; + private _columns: string[]; + + constructor() { + this.from = 0; + //this._to = this.to; + this._totalRecords = getTotalRecords(); + this._columns = this.getColumnData(); + } + + get totalRecords(): number { + return this._totalRecords + } + + get columns(): string[] { + return this._columns; + } + + get from(): number { + return this._from; + } + + set from(from: number) { + let totalRecordsIndex: number = this._totalRecords - 1; + + if ((from + this.getNumberOfRows()) > totalRecordsIndex) + this._from = (totalRecordsIndex - this.getNumberOfRows()); + else if (from < 0) + this._from = 0; + else + this._from = from; + + //this._to = this.to; + + } + + get to(): number { + let to = this._from + this.getNumberOfRows() + + if (to > this._totalRecords) + return this._totalRecords - 1; + else + return to; + } + + getColumnData(): string[] { + let headerArray: string[]; + + headerArray = []; + + $.ajax({ + url: 'http://localhost:2050/columns', + dataType: 'json', + async: false, + success: (data: string[]) => { + + for (let index = 0; index < data.length; index++) { + headerArray[index] = data[index]; + } + } + }); + + return headerArray; + } + + + /** determine the amount of rows to add to the table based on the size on the window */ + getNumberOfRows(): number { + let rows: number; + + // subtract - 1 to cater for header row. + let height = (parseInt(((window.innerHeight - 75) / 30).toFixed(0)) - 1); + let width = (parseInt(((window.innerWidth - 75) / 30).toFixed(0)) - 1); + + if (height < width) + rows = height; + else + rows = width; + + if (rows < 0) + return 0; + else + return rows; + + } + + getTotalRecords(): number { + const HttpRequest = new XMLHttpRequest(); + const url = 'http://localhost:2050/recordCount'; + HttpRequest.open("GET", url, false); + HttpRequest.send(); + + const responseText = HttpRequest.responseText + + return parseInt(responseText); + } + + buildTable = (): void => { + $("#dataTableBody").find("tr").remove(); + + let tableBody = document.getElementById("dataTableBody"); + + // make the ajax call to retrieve the records and build the table + $.ajax({ + url: `http://localhost:2050/records?from=${this.from}&to=${this.to}`, + dataType: 'json', + async: true, + success: (data: string[]): void => { + + for (let row of data) { + const dataRow = tableBody.insertRow(-1); + for (let cell of row) { + const newCell = dataRow.insertCell(-1); + newCell.innerHTML = cell + } + } + } + }); + + tableBody = document.getElementById("dataTableBody"); + + const dataRow = tableBody.insertRow(0); + + for (let i = 0; i < myTable.columns.length; i++) { + const newCell = dataRow.insertCell(-1); + newCell.outerHTML = `${myTable.columns[i]}`; + } + + // call the button property set fucntion to set disable/enable buttons appropriately + buttonPropertySet(); + + } + +} From 121a2568db4aad1ab5e39fa7051c6591224d65ac Mon Sep 17 00:00:00 2001 From: JeanNicholson Date: Wed, 17 Mar 2021 15:21:17 +0200 Subject: [PATCH 7/7] Seventh Commit --- app.css | 15 +---- app.ts | 174 +++++++++++++++++++++++------------------------------ index.html | 31 +++------- table.ts | 118 ++++++++++++++++++------------------ 4 files changed, 145 insertions(+), 193 deletions(-) diff --git a/app.css b/app.css index 94e85f93..e4cfa71a 100644 --- a/app.css +++ b/app.css @@ -32,7 +32,6 @@ bottom: 0; left: 0; height: calc(100% - 50px); - /*height: 100%;*/ width: 100%; } @@ -94,18 +93,6 @@ button { text-align: center; } -/*@media screen and (max-height:400px) { - #captiondiv - { - display: none !important; - } - #tablediv - { - top:0; - height: calc(100% - 25px); - } -}*/ - @media screen and (max-width: 800px) { #next10 { display: none !important; @@ -136,7 +123,7 @@ button { #jumpToButton { width: 13%; min-width: 50px; - font-size: small; + font-size: x-small; white-space: nowrap; } diff --git a/app.ts b/app.ts index 892c0ba6..ae7fcf7d 100644 --- a/app.ts +++ b/app.ts @@ -1,63 +1,15 @@ -function getColumnData(): string[] { - let headerArray: string[]; - - headerArray = []; - - $.ajax({ - url: 'http://localhost:2050/columns', - dataType: 'json', - async: false, - success: function (data) { - - for (let index = 0; index < data.length; index++) { - headerArray[index] = data[index]; - } - } - }); - - return headerArray; -} - -class Utility { - timeout: number = 0; - - debounce(func: Function, wait: number) { - - return (...args: any[]) => { - const later = () => { - clearTimeout(this.timeout); - func(...args); - }; - - clearTimeout(this.timeout); - this.timeout = setTimeout(later, wait); - }; - }; -} const myTable = new Table(); -const myUtility = new Utility(); - -window.onload = function () { - const request = myUtility.debounce(myTable.buildTable, 250); - - request(); +window.onload = function () { + addButtons(); + myTable.initialTableBuild(); } -//on resize funtionalty to rebuild the table $(window).on('resize', function () { - // wrap the logic within a debounce funtion to prevent unnecesary calls. - let request = myUtility.debounce(function () { - - myTable.from = myTable.from; - - myTable.buildTable(); - }, 250); - - request(); + myTable.buildTable(); } ); @@ -68,6 +20,7 @@ function buttonPropertySet() { let next = document.getElementById("next"); let next5 = document.getElementById("next5"); let next10 = document.getElementById("next10"); + let jumpToButton = document.getElementById("jumpToButton"); let from = myTable.from; let totalRecords = myTable.totalRecords; @@ -95,73 +48,96 @@ function buttonPropertySet() { next5.disabled = false; next10.disabled = false; } -} - -//function to retrieve the total record count used when building the table -function getTotalRecords() { - const HttpRequest = new XMLHttpRequest(); - const url = 'http://localhost:2050//recordCount'; - HttpRequest.open("GET", url, true); - HttpRequest.send(); - - const responseText = HttpRequest.responseText - return parseInt(responseText); + jumpToButton.disabled = false; } // previous button function that takes a multiplier indicating the amount of pages to page at a time function previousButton(multiplier: number) { - // wrap the logic within a debounce funtion to prevent unnecesary calls. - let request = myUtility.debounce(function () { - - myTable.from = myTable.from - ((myTable.getNumberOfRows() + 1) * multiplier); - - myTable.buildTable(); - - }, 250); - - request(); + myTable.from = myTable.from - ((myTable.getNumberOfRows() + 1) * multiplier); + myTable.buildTable(); } -//next button function that takes a multiplier indicating the amount of pages to page at a time +// next button function that takes a multiplier indicating the amount of pages to page at a time function nextButton(multiplier: number) { - // wrap the logic within a debounce funtion to prevent unnecesary calls. - let request = myUtility.debounce(function () { - - myTable.from = myTable.from + ((myTable.getNumberOfRows() + 1) * multiplier); - - myTable.buildTable(); - - }, 250); - - request(); + myTable.from = myTable.from + ((myTable.getNumberOfRows() + 1) * multiplier); + myTable.buildTable(); } function jumpToButton() { let inputElement = document.getElementById("jumpToValue"); let from: number; - // wrap the logic within a debounce funtion to prevent unnecesary calls. - let request = myUtility.debounce(function () { + if (inputElement.value === "") + from = 0; + else + from = parseInt(inputElement.value); - if (inputElement.value === "") - from = 0; - else - from = parseInt(inputElement.value); + myTable.from = from; - myTable.from = from; - - myTable.buildTable(); - - }, 250); - - request(); + myTable.buildTable(); } -function test() { +function addButtons() { + + let button: HTMLButtonElement; + let buttonDiv = document.getElementById("buttondiv"); + + button = document.createElement("button"); + button.innerHTML = "<<< 10"; + button.id = "previous10"; + button.setAttribute("disabled", "true"); + button.onclick = () => { previousButton(10) }; + buttonDiv.appendChild(button); + + button = document.createElement("button"); + button.innerHTML = "<< 5"; + button.id = "previous5"; + button.setAttribute("disabled", "true"); + button.onclick = () => { previousButton(5) }; + buttonDiv.appendChild(button); + + button = document.createElement("button"); + button.innerHTML = "<"; + button.id = "previous"; + button.setAttribute("disabled", "true"); + button.onclick = () => { previousButton(1) }; + buttonDiv.appendChild(button); + + button = document.createElement("button"); + button.innerHTML = ">"; + button.id = "next"; + button.setAttribute("disabled", "true"); + button.onclick = () => { nextButton(1) }; + buttonDiv.appendChild(button); + + button = document.createElement("button"); + button.innerHTML = "5 >> "; + button.id = "next5"; + button.setAttribute("disabled", "true"); + button.onclick = () => { nextButton(5) }; + buttonDiv.appendChild(button); + + button = document.createElement("button"); + button.innerHTML = "10 >>>"; + button.id = "next10"; + button.setAttribute("disabled", "true"); + button.onclick = () => { nextButton(10) }; + buttonDiv.appendChild(button); + + button = document.createElement("button"); + button.innerHTML = "Jump To:"; + button.id = "jumpToButton"; + button.setAttribute("disabled", "true"); + button.onclick = () => { jumpToButton() }; + buttonDiv.appendChild(button); + + let input = document.createElement("INPUT"); + input.id = "jumpToValue"; + input.setAttribute("type", "number"); + buttonDiv.appendChild(input); } - diff --git a/index.html b/index.html index fad3bcfc..bb17e78d 100644 --- a/index.html +++ b/index.html @@ -2,29 +2,18 @@ - + - + - - -
-
Data Grid
-
-
- - - - - - - - - -
-
- - + +
+
Data Grid
+
+
+
+ + diff --git a/table.ts b/table.ts index 8e58acf4..ad4c65f7 100644 --- a/table.ts +++ b/table.ts @@ -1,15 +1,13 @@ class Table { private _from: number = 0; - //private _to: number; - private _totalRecords: number; - private _columns: string[]; + private _totalRecords: number = 0; + private _columns: string[] = []; + private timeout = 0; + private rows = 0; constructor() { this.from = 0; - //this._to = this.to; - this._totalRecords = getTotalRecords(); - this._columns = this.getColumnData(); } get totalRecords(): number { @@ -25,17 +23,18 @@ class Table { } set from(from: number) { - let totalRecordsIndex: number = this._totalRecords - 1; + let totalRecordsIndex = this._totalRecords - 1; - if ((from + this.getNumberOfRows()) > totalRecordsIndex) - this._from = (totalRecordsIndex - this.getNumberOfRows()); + if (totalRecordsIndex < 0) + totalRecordsIndex = 0; + + if ((from + this.rows) > totalRecordsIndex) + this._from = (totalRecordsIndex - this.rows); else if (from < 0) this._from = 0; else this._from = from; - //this._to = this.to; - } get to(): number { @@ -47,7 +46,7 @@ class Table { return to; } - getColumnData(): string[] { + getColumnData(): void { let headerArray: string[]; headerArray = []; @@ -55,31 +54,29 @@ class Table { $.ajax({ url: 'http://localhost:2050/columns', dataType: 'json', - async: false, success: (data: string[]) => { - for (let index = 0; index < data.length; index++) { - headerArray[index] = data[index]; + let tableBody = document.getElementById("dataTableBody"); + + const dataRow = tableBody.insertRow(0); + + for (let i = 0; i < data.length; i++) { + const newCell = dataRow.insertCell(-1); + newCell.outerHTML = `${data[i]}`; } + + this.buildTable(); + } }); - - return headerArray; } /** determine the amount of rows to add to the table based on the size on the window */ getNumberOfRows(): number { - let rows: number; // subtract - 1 to cater for header row. - let height = (parseInt(((window.innerHeight - 75) / 30).toFixed(0)) - 1); - let width = (parseInt(((window.innerWidth - 75) / 30).toFixed(0)) - 1); - - if (height < width) - rows = height; - else - rows = width; + let rows = (parseInt(((window.innerHeight - 75) / 30).toFixed(0)) - 1); if (rows < 0) return 0; @@ -88,51 +85,54 @@ class Table { } - getTotalRecords(): number { - const HttpRequest = new XMLHttpRequest(); - const url = 'http://localhost:2050/recordCount'; - HttpRequest.open("GET", url, false); - HttpRequest.send(); + getTotalRecords(): void { - const responseText = HttpRequest.responseText + $.ajax({ + url: 'http://localhost:2050/recordCount', + dataType: 'json', + success: (data: string): void => { + this._totalRecords = parseInt(data); + this.getColumnData(); + } + }); + } - return parseInt(responseText); + initialTableBuild() { + this.getTotalRecords(); } - buildTable = (): void => { - $("#dataTableBody").find("tr").remove(); + buildTable(): void { - let tableBody = document.getElementById("dataTableBody"); + clearTimeout(this.timeout); + this.timeout = setTimeout(() => { - // make the ajax call to retrieve the records and build the table - $.ajax({ - url: `http://localhost:2050/records?from=${this.from}&to=${this.to}`, - dataType: 'json', - async: true, - success: (data: string[]): void => { - - for (let row of data) { - const dataRow = tableBody.insertRow(-1); - for (let cell of row) { - const newCell = dataRow.insertCell(-1); - newCell.innerHTML = cell - } - } - } - }); + let html: string; + + // make the ajax call to retrieve the records and build the table + $.ajax({ + url: `http://localhost:2050/records?from=${this.from}&to=${this.to}`, + dataType: 'json', + success: (data: string[]): void => { + + for (let row of data) { - tableBody = document.getElementById("dataTableBody"); + html = html + "" - const dataRow = tableBody.insertRow(0); + for (let cell of row) { + html = html + "" + cell + ""; + } - for (let i = 0; i < myTable.columns.length; i++) { - const newCell = dataRow.insertCell(-1); - newCell.outerHTML = `${myTable.columns[i]}`; - } + html = html + "" + } + + $("#dataTableBody").find("tr:gt(0)").remove(); + $("#dataTableBody > tr").eq(0).after(html); - // call the button property set fucntion to set disable/enable buttons appropriately - buttonPropertySet(); + } + }); + buttonPropertySet(); + }, 250); } }