From 6e0a6ef4af71e08d7ffd210f58b097da592bc41e Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Thu, 3 Jun 2021 17:20:20 +0200 Subject: [PATCH 01/47] Create basic table with dummy data. Create main.css Create get httprequest. --- app.ts | 97 +++++++++++++++++++++++++++++++++++++++++++++++ index.html | 20 +++++----- main.css | 15 ++++++++ package-lock.json | 26 +++++++++++++ package.json | 24 ++++++++++++ req.js | 21 ++++++++++ 6 files changed, 194 insertions(+), 9 deletions(-) create mode 100644 app.ts create mode 100644 main.css create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 req.js diff --git a/app.ts b/app.ts new file mode 100644 index 00000000..e82214b4 --- /dev/null +++ b/app.ts @@ -0,0 +1,97 @@ +const app = document.getElementById("app"); +const div = document.createElement("div") + div.innerHTML = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IDABCDEFGHIJ
1A1-FqM=B1-W5U=C1-q4Y=D1-M6E=E1-IiQ=F1-3q4=G1-e3c=H1-i/c=I1-woE=J1-ST0=
2A1-FqM=B1-W5U=C1-q4Y=D1-M6E=E1-IiQ=F1-3q4=G1-e3c=H1-i/c=I1-woE=J1-ST0=
3A1-FqM=B1-W5U=C1-q4Y=D1-M6E=E1-IiQ=F1-3q4=G1-e3c=H1-i/c=I1-woE=J1-ST0=
4A1-FqM=B1-W5U=C1-q4Y=D1-M6E=E1-IiQ=F1-3q4=G1-e3c=H1-i/c=I1-woE=J1-ST0=
5A1-FqM=B1-W5U=C1-q4Y=D1-M6E=E1-IiQ=F1-3q4=G1-e3c=H1-i/c=I1-woE=J1-ST0=
6A1-FqM=B1-W5U=C1-q4Y=D1-M6E=E1-IiQ=F1-3q4=G1-e3c=H1-i/c=I1-woE=J1-ST0=
` +app?.appendChild(div); diff --git a/index.html b/index.html index add5e736..329878e8 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,15 @@ - - JS Onboard Project - - - - -

Hello

- - + + JS Onboard Project + + + + + +

Onboarding Table

+
+ + diff --git a/main.css b/main.css new file mode 100644 index 00000000..675dc257 --- /dev/null +++ b/main.css @@ -0,0 +1,15 @@ +table { + font-family: arial, sans-serif; + border-collapse: collapse; + width: 100%; + } + + td, th { + border: 1px solid #dddddd; + text-align: left; + padding: 8px; + } + + tr:nth-child(even) { + background-color: #dddddd; + } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..9a5d191c --- /dev/null +++ b/package-lock.json @@ -0,0 +1,26 @@ +{ + "name": "onboard-javascript", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@types/jquery": { + "version": "3.5.5", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz", + "integrity": "sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w==", + "requires": { + "@types/sizzle": "*" + } + }, + "@types/sizzle": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", + "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==" + }, + "typescript": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz", + "integrity": "sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..3ebfa7a5 --- /dev/null +++ b/package.json @@ -0,0 +1,24 @@ +{ + "name": "onboard-javascript", + "version": "1.0.0", + "description": "onboarding", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "build": "tsc" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/geraldtivatyi/onboard-javascript.git" + }, + "author": "Gerald", + "license": "ISC", + "bugs": { + "url": "https://github.com/geraldtivatyi/onboard-javascript/issues" + }, + "homepage": "https://github.com/geraldtivatyi/onboard-javascript#readme", + "dependencies": { + "@types/jquery": "^3.5.5", + "typescript": "^4.3.2" + } +} diff --git a/req.js b/req.js new file mode 100644 index 00000000..cc760a09 --- /dev/null +++ b/req.js @@ -0,0 +1,21 @@ +function request(action, method, params, callback) { + let x = {}; + if (window.XMLHttpRequest) x = new XMLHttpRequest(); + else x = new ActiveXObject('Microsoft.XMLHTTP'); + x.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + callback(this.responseText); + } + }; + + let paramString = ""; + let dataPairs = []; + let name; + for(name in params) + dataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(params[name])); + paramString = dataPairs.join('&').replace(/%20/g, '+'); + + action += "?" + paramString; + x.open(method, action, true); + x.send(); return; +} \ No newline at end of file From 7349923dd901b7556967630cf5dc80bdb9668329 Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Fri, 4 Jun 2021 12:18:19 +0200 Subject: [PATCH 02/47] create basis for interfaces and classes to handle and structure data for grid headings and records. --- app.ts | 131 ++++++++---------------------- classes/record_struct.js | 21 +++++ classes/record_struct.js.map | 1 + classes/record_struct.ts | 33 ++++++++ classes/table_headings.js | 21 +++++ classes/table_headings.js.map | 1 + classes/table_headings.ts | 33 ++++++++ index.html | 14 +++- interfaces/hasformatmethod.js | 2 + interfaces/hasformatmethod.js.map | 1 + interfaces/hasformatmethod.ts | 3 + main.css | 5 ++ 12 files changed, 167 insertions(+), 99 deletions(-) create mode 100644 classes/record_struct.js create mode 100644 classes/record_struct.js.map create mode 100644 classes/record_struct.ts create mode 100644 classes/table_headings.js create mode 100644 classes/table_headings.js.map create mode 100644 classes/table_headings.ts create mode 100644 interfaces/hasformatmethod.js create mode 100644 interfaces/hasformatmethod.js.map create mode 100644 interfaces/hasformatmethod.ts diff --git a/app.ts b/app.ts index e82214b4..78967a8e 100644 --- a/app.ts +++ b/app.ts @@ -1,97 +1,34 @@ -const app = document.getElementById("app"); -const div = document.createElement("div") - div.innerHTML = ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
IDABCDEFGHIJ
1A1-FqM=B1-W5U=C1-q4Y=D1-M6E=E1-IiQ=F1-3q4=G1-e3c=H1-i/c=I1-woE=J1-ST0=
2A1-FqM=B1-W5U=C1-q4Y=D1-M6E=E1-IiQ=F1-3q4=G1-e3c=H1-i/c=I1-woE=J1-ST0=
3A1-FqM=B1-W5U=C1-q4Y=D1-M6E=E1-IiQ=F1-3q4=G1-e3c=H1-i/c=I1-woE=J1-ST0=
4A1-FqM=B1-W5U=C1-q4Y=D1-M6E=E1-IiQ=F1-3q4=G1-e3c=H1-i/c=I1-woE=J1-ST0=
5A1-FqM=B1-W5U=C1-q4Y=D1-M6E=E1-IiQ=F1-3q4=G1-e3c=H1-i/c=I1-woE=J1-ST0=
6A1-FqM=B1-W5U=C1-q4Y=D1-M6E=E1-IiQ=F1-3q4=G1-e3c=H1-i/c=I1-woE=J1-ST0=
` -app?.appendChild(div); +import { tableHeadings } from "./classes/table_headings.js"; +import { recordStruct } from "./classes/record_struct.js"; +import { HasFormatMethod } from "./interfaces/hasformatmethod.js"; + + +//Accessing Form Data +const form = document.querySelector('.navigation') as HTMLFormElement; + +const fromID = document.querySelector('#fromID') as HTMLInputElement; +const toID = document.querySelector('#toID') as HTMLInputElement; + +form.addEventListener('submit', (e: Event) => { + e.preventDefault(); + + let interfaceHeading: HasFormatMethod; + let interfaceRecords: HasFormatMethod; + + // Dummy data + const recHeadingsFromServer: string[] = [ "ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J" ]; + + // Instantiate class tableHeadings + interfaceHeading = new tableHeadings(recHeadingsFromServer[0], recHeadingsFromServer[1], recHeadingsFromServer[2], recHeadingsFromServer[3], recHeadingsFromServer[4], recHeadingsFromServer[5], recHeadingsFromServer[6], recHeadingsFromServer[7], recHeadingsFromServer[8], recHeadingsFromServer[9], recHeadingsFromServer[10]); + console.log(interfaceHeading.format()); + + // Dummy data + const recFromServer: string[][] = [ [ "1", "A1-FqM=", "B1-W5U=", "C1-q4Y=", "D1-M6E=", "E1-IiQ=", "F1-3q4=", "G1-e3c=", "H1-i/c=", "I1-woE=", "J1-ST0=" ], [ "2", "A2-yDY=", "B2-q9s=", "C2-loU=", "D2-ImU=", "E2-cTo=", "F2-ji0=", "G2-SMY=", "H2-rho=", "I2-Ym0=", "J2-RUc=" ], [ "3", "A3-E5g=", "B3-DNI=", "C3-iiE=", "D3-vtc=", "E3-GDQ=", "F3-fJY=", "G3-DfA=", "H3-sUw=", "I3-Cas=", "J3-gE8=" ], [ "4", "A4-ToA=", "B4-I58=", "C4-CNE=", "D4-CA8=", "E4-3nk=", "F4-AVs=", "G4-l4Q=", "H4-Qm4=", "I4-c58=", "J4-6gI=" ], [ "5", "A5-6mQ=", "B5-W6I=", "C5-HZY=", "D5-Eqc=", "E5-7wk=", "F5-bNI=", "G5-RBg=", "H5-Jm4=", "I5-T7s=", "J5-CFo=" ] ]; + for(let i=0;i<5;i++) { + interfaceRecords = new recordStruct(recFromServer[i][0], recFromServer[i][1], recFromServer[i][2], recFromServer[i][3], recFromServer[i][4], recFromServer[i][5], recFromServer[i][6], recFromServer[i][7], recFromServer[i][8], recFromServer[i][9], recFromServer[i][10]); + console.log("Test 2 Interface: ",interfaceRecords.format()); + } + + console.log(fromID.value,toID.value); +}) + diff --git a/classes/record_struct.js b/classes/record_struct.js new file mode 100644 index 00000000..9cd85511 --- /dev/null +++ b/classes/record_struct.js @@ -0,0 +1,21 @@ +var recordStruct = /** @class */ (function () { + function recordStruct(id, a, b, c, d, e, f, g, h, i, j) { + this.id = id; + this.A = a; + this.B = b; + this.C = c; + this.D = d; + this.E = e; + this.F = f; + this.G = g; + this.H = h; + this.I = i; + this.J = j; + } + recordStruct.prototype.format = function () { + return "" + this.id + " " + this.A + " " + this.B + " " + this.C + " " + this.D + " " + this.E + " " + this.F + " " + this.G + " " + this.H + " " + this.I + " " + this.J + ""; + }; + return recordStruct; +}()); +export { recordStruct }; +//# sourceMappingURL=record_struct.js.map \ No newline at end of file diff --git a/classes/record_struct.js.map b/classes/record_struct.js.map new file mode 100644 index 00000000..9d641236 --- /dev/null +++ b/classes/record_struct.js.map @@ -0,0 +1 @@ +{"version":3,"file":"record_struct.js","sourceRoot":"","sources":["record_struct.ts"],"names":[],"mappings":"AAEA;IAaC,sBAAa,EAAU,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS;QACpI,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IACZ,CAAC;IAED,6BAAM,GAAN;QACC,OAAO,SAAO,IAAI,CAAC,EAAE,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,UAAO,CAAA;IAC3N,CAAC;IACF,mBAAC;AAAD,CAAC,AA9BD,IA8BC"} \ No newline at end of file diff --git a/classes/record_struct.ts b/classes/record_struct.ts new file mode 100644 index 00000000..605f36ca --- /dev/null +++ b/classes/record_struct.ts @@ -0,0 +1,33 @@ +import { HasFormatMethod } from "../interfaces/hasformatmethod.js"; + +export class recordStruct implements HasFormatMethod { + private id: string; + private A: string; + private B: string; + private C: string; + private D: string; + private E: string; + private F: string; + private G: string; + private H: string; + private I: string; + private J: string; + + constructor( id: string, a: string, b: string, c: string, d: string, e: string, f: string, g: string, h: string, i: string, j: string ){ + this.id = id; + this.A = a; + this.B = b; + this.C = c; + this.D = d; + this.E = e; + this.F = f; + this.G = g; + this.H = h; + this.I = i; + this.J = j; + } + + format() { + return `${this.id} ${this.A} ${this.B} ${this.C} ${this.D} ${this.E} ${this.F} ${this.G} ${this.H} ${this.I} ${this.J}` + } +} \ No newline at end of file diff --git a/classes/table_headings.js b/classes/table_headings.js new file mode 100644 index 00000000..d69a50bb --- /dev/null +++ b/classes/table_headings.js @@ -0,0 +1,21 @@ +var tableHeadings = /** @class */ (function () { + function tableHeadings(id, a, b, c, d, e, f, g, h, i, j) { + this.id = id; + this.A = a; + this.B = b; + this.C = c; + this.D = d; + this.E = e; + this.F = f; + this.G = g; + this.H = h; + this.I = i; + this.J = j; + } + tableHeadings.prototype.format = function () { + return "" + this.id + " " + this.A + " " + this.B + " " + this.C + " " + this.D + " " + this.E + " " + this.F + " " + this.G + " " + this.H + " " + this.I + " " + this.J + ""; + }; + return tableHeadings; +}()); +export { tableHeadings }; +//# sourceMappingURL=table_headings.js.map \ No newline at end of file diff --git a/classes/table_headings.js.map b/classes/table_headings.js.map new file mode 100644 index 00000000..efe87eba --- /dev/null +++ b/classes/table_headings.js.map @@ -0,0 +1 @@ +{"version":3,"file":"table_headings.js","sourceRoot":"","sources":["table_headings.ts"],"names":[],"mappings":"AAEA;IAaC,uBAAa,EAAU,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS;QACpI,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IACZ,CAAC;IAED,8BAAM,GAAN;QACC,OAAO,SAAO,IAAI,CAAC,EAAE,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,UAAO,CAAA;IAC3N,CAAC;IACF,oBAAC;AAAD,CAAC,AA9BD,IA8BC"} \ No newline at end of file diff --git a/classes/table_headings.ts b/classes/table_headings.ts new file mode 100644 index 00000000..30124a5f --- /dev/null +++ b/classes/table_headings.ts @@ -0,0 +1,33 @@ +import { HasFormatMethod } from "../interfaces/hasformatmethod.js"; + +export class tableHeadings implements HasFormatMethod { + private id: string; + private A: string; + private B: string; + private C: string; + private D: string; + private E: string; + private F: string; + private G: string; + private H: string; + private I: string; + private J: string; + + constructor( id: string, a: string, b: string, c: string, d: string, e: string, f: string, g: string, h: string, i: string, j: string ){ + this.id = id; + this.A = a; + this.B = b; + this.C = c; + this.D = d; + this.E = e; + this.F = f; + this.G = g; + this.H = h; + this.I = i; + this.J = j; + } + + format() { + return `${this.id} ${this.A} ${this.B} ${this.C} ${this.D} ${this.E} ${this.F} ${this.G} ${this.H} ${this.I} ${this.J}` + } +} \ No newline at end of file diff --git a/index.html b/index.html index 329878e8..6ea6121a 100644 --- a/index.html +++ b/index.html @@ -8,8 +8,18 @@

Onboarding Table

-
- +
+

Table Navigation

+
+
+
+
+

+ +
+
+
+ diff --git a/interfaces/hasformatmethod.js b/interfaces/hasformatmethod.js new file mode 100644 index 00000000..d7f37037 --- /dev/null +++ b/interfaces/hasformatmethod.js @@ -0,0 +1,2 @@ +export {}; +//# sourceMappingURL=hasformatmethod.js.map \ No newline at end of file diff --git a/interfaces/hasformatmethod.js.map b/interfaces/hasformatmethod.js.map new file mode 100644 index 00000000..59c975af --- /dev/null +++ b/interfaces/hasformatmethod.js.map @@ -0,0 +1 @@ +{"version":3,"file":"hasformatmethod.js","sourceRoot":"","sources":["hasformatmethod.ts"],"names":[],"mappings":""} \ No newline at end of file diff --git a/interfaces/hasformatmethod.ts b/interfaces/hasformatmethod.ts new file mode 100644 index 00000000..847239b5 --- /dev/null +++ b/interfaces/hasformatmethod.ts @@ -0,0 +1,3 @@ +export interface HasFormatMethod { + format(): string; +} \ No newline at end of file diff --git a/main.css b/main.css index 675dc257..533088ba 100644 --- a/main.css +++ b/main.css @@ -1,3 +1,8 @@ +#app .navigation { + display: flex; + align-items: center; + justify-content: center; +} table { font-family: arial, sans-serif; border-collapse: collapse; From 1b69e979616330f42bcfd3990d3491c1ba8612b0 Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Fri, 4 Jun 2021 16:37:49 +0200 Subject: [PATCH 03/47] render table records and headings to html --- app.ts | 19 ++++++++++++------- classes/create_table.js | 18 ++++++++++++++++++ classes/create_table.js.map | 1 + classes/create_table.ts | 21 +++++++++++++++++++++ index.html | 4 ++-- insomnia.json | 1 + 6 files changed, 55 insertions(+), 9 deletions(-) create mode 100644 classes/create_table.js create mode 100644 classes/create_table.js.map create mode 100644 classes/create_table.ts create mode 100644 insomnia.json diff --git a/app.ts b/app.ts index 78967a8e..25d80876 100644 --- a/app.ts +++ b/app.ts @@ -1,5 +1,6 @@ import { tableHeadings } from "./classes/table_headings.js"; import { recordStruct } from "./classes/record_struct.js"; +import { createTable } from "./classes/create_table.js"; import { HasFormatMethod } from "./interfaces/hasformatmethod.js"; @@ -9,7 +10,13 @@ const form = document.querySelector('.navigation') as HTMLFormElement; const fromID = document.querySelector('#fromID') as HTMLInputElement; const toID = document.querySelector('#toID') as HTMLInputElement; + +// Instantiate grid div +const table = document.querySelector('table')!; +const tble = new createTable(table); + form.addEventListener('submit', (e: Event) => { + document.getElementById("table")!.innerHTML = ""; e.preventDefault(); let interfaceHeading: HasFormatMethod; @@ -20,15 +27,13 @@ form.addEventListener('submit', (e: Event) => { // Instantiate class tableHeadings interfaceHeading = new tableHeadings(recHeadingsFromServer[0], recHeadingsFromServer[1], recHeadingsFromServer[2], recHeadingsFromServer[3], recHeadingsFromServer[4], recHeadingsFromServer[5], recHeadingsFromServer[6], recHeadingsFromServer[7], recHeadingsFromServer[8], recHeadingsFromServer[9], recHeadingsFromServer[10]); - console.log(interfaceHeading.format()); // Dummy data const recFromServer: string[][] = [ [ "1", "A1-FqM=", "B1-W5U=", "C1-q4Y=", "D1-M6E=", "E1-IiQ=", "F1-3q4=", "G1-e3c=", "H1-i/c=", "I1-woE=", "J1-ST0=" ], [ "2", "A2-yDY=", "B2-q9s=", "C2-loU=", "D2-ImU=", "E2-cTo=", "F2-ji0=", "G2-SMY=", "H2-rho=", "I2-Ym0=", "J2-RUc=" ], [ "3", "A3-E5g=", "B3-DNI=", "C3-iiE=", "D3-vtc=", "E3-GDQ=", "F3-fJY=", "G3-DfA=", "H3-sUw=", "I3-Cas=", "J3-gE8=" ], [ "4", "A4-ToA=", "B4-I58=", "C4-CNE=", "D4-CA8=", "E4-3nk=", "F4-AVs=", "G4-l4Q=", "H4-Qm4=", "I4-c58=", "J4-6gI=" ], [ "5", "A5-6mQ=", "B5-W6I=", "C5-HZY=", "D5-Eqc=", "E5-7wk=", "F5-bNI=", "G5-RBg=", "H5-Jm4=", "I5-T7s=", "J5-CFo=" ] ]; - for(let i=0;i<5;i++) { + tble.renderHeading(interfaceHeading); + for(let i=fromID.valueAsNumber-1;i { + this.container.append(th); + }); + } + + renderRecords(records: HasFormatMethod){ + const tr = document.createElement('tr'); + tr.innerHTML = records.format(); + + this.container.append(tr); + } +} diff --git a/index.html b/index.html index 6ea6121a..130a31b7 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,6 @@

Onboarding Table

-

Table Navigation



@@ -17,7 +16,8 @@

Table Navigation



-
+
+
diff --git a/insomnia.json b/insomnia.json new file mode 100644 index 00000000..a788b1ba --- /dev/null +++ b/insomnia.json @@ -0,0 +1 @@ +{"_type":"export","__export_format":4,"__export_date":"2021-06-04T14:32:35.741Z","__export_source":"insomnia.desktop.app:v2021.3.0","resources":[{"_id":"req_793626d03d9a4855a0e43789b99dedce","parentId":"wrk_ccf6793ecca64fc8a01a2dfd948c750f","modified":1622726392537,"created":1622724938157,"url":"http://localhost:2050/recordCount","name":"Get total number of records","description":"","method":"GET","body":{},"parameters":[],"headers":[],"authentication":{},"metaSortKey":-1622724938157,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"wrk_ccf6793ecca64fc8a01a2dfd948c750f","parentId":null,"modified":1622724911220,"created":1622724911220,"name":"Insomnia","description":"","scope":"collection","_type":"workspace"},{"_id":"req_d2a590d8909a4c8cb4a33bbbe8cc1fb9","parentId":"wrk_ccf6793ecca64fc8a01a2dfd948c750f","modified":1622725188186,"created":1622725175632,"url":"http://localhost:2050/columns","name":"Get column names","description":"","method":"GET","body":{},"parameters":[],"headers":[],"authentication":{},"metaSortKey":-1622725175632,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_7a3c0dd6ef5a4d07979903682033220d","parentId":"wrk_ccf6793ecca64fc8a01a2dfd948c750f","modified":1622726356062,"created":1622725214424,"url":"http://localhost:2050/records?from=1&to=5","name":"Get records","description":"","method":"GET","body":{},"parameters":[],"headers":[],"authentication":{},"metaSortKey":-1622725214424,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_aa92d9a7c25b49f78db09c5c9c2b24ea","parentId":"fld_df4ebe53e5744811b044c162781f7e14","modified":1617131691128,"created":1612883491096,"url":"http://localhost:8080/api/v1/profiles/","name":"Profile","description":"","method":"GET","body":{},"parameters":[],"headers":[{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_8873d172580d401eb8c63fb01669423c"}],"authentication":{},"metaSortKey":-1613153032280.5,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"fld_df4ebe53e5744811b044c162781f7e14","parentId":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","modified":1617132156400,"created":1617131675575,"name":"profile","description":"","environment":{},"environmentPropertyOrder":null,"metaSortKey":-1617132110767,"_type":"request_group"},{"_id":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","parentId":null,"modified":1612883376390,"created":1612883376390,"name":"TallyClerk","description":"","scope":"collection","_type":"workspace"},{"_id":"req_7af60eca965d49e980ae84080f98b2ed","parentId":"fld_df4ebe53e5744811b044c162781f7e14","modified":1617131682096,"created":1612883620409,"url":"{{ _.base_url }}/profiles","name":"Profile","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"firstname","value":"John","type":"text","id":"pair_ee13f6de52cf45ccb8e8fe4e41e7425f"},{"name":"lastname","value":"Penrose","type":"text","id":"pair_c1bc59a752f242d38ae960223c0134d4"},{"name":"email","value":"johnpenrose@gmail.com","type":"text","id":"pair_a65954cc612041d5b1f3d7dcc18efa3b"},{"name":"mobile","value":"072 123 4567","type":"text","id":"pair_eb07b9faa96f4a6aafa7e0bfc0ab1ca7"},{"name":"address","value":"Klein Welgemoed II, Protea Valley, Cape Town, 7530","type":"text","id":"pair_cde454fcef734e5f836e5e77567e2458"},{"name":"password","value":"asdfASDF1234!@#$","type":"text","id":"pair_7488a2f8c72d4087917e4ba15d0c6cd5"}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_7c09ab1743464104b30523dec9e98ddb"},{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613153032293,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_35f8f6596bbe4793966c3cc2ac845ef9","parentId":"fld_df4ebe53e5744811b044c162781f7e14","modified":1617131686764,"created":1615985345425,"url":"{{ _.base_url }}/sessions","name":"sessions","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"email","value":"johnpenrose@gmail.com","type":"text","id":"pair_a65954cc612041d5b1f3d7dcc18efa3b"},{"name":"password","value":"asdfASDF1234!@#$","type":"text","id":"pair_7488a2f8c72d4087917e4ba15d0c6cd5"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_e6ff682203a549dd82eb97192a60a9f6"}],"authentication":{},"metaSortKey":-1613153032268,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_894143e66e294d0d82cc96397a9947de","parentId":"fld_df4ebe53e5744811b044c162781f7e14","modified":1617131688755,"created":1615985528266,"url":"{{ _.base_url }}/sessions","name":"sessions","description":"","method":"DELETE","body":{},"parameters":[],"headers":[{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613153032255.5,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_c342846e1fc34004b62751a3de24e333","parentId":"fld_73187212bf01472d86f006e8e0e92024","modified":1620136595180,"created":1612892982121,"url":"{{ _.base_url }}/companies","name":"company","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"email","value":"anderson@abc.co.za","description":"","id":"pair_02cacba1c6ea4790b3d896805286e9ba"},{"name":"companyname","value":"Ghi Roofing","description":"","id":"pair_e8673b879ccc4e4a85bd624939326bc6"},{"name":"companyadd","value":"Louwtjie Rothman St, Goodwood, Cape Town, 7463","description":"","id":"pair_ff0ad8df6216425cb976e7c2cc4bd5d8"},{"name":"enterprisenumber","value":"1234/123456/12","description":"","id":"pair_cc83928534ee43ed9de4ed1d44941ce3"},{"name":"phonenumber","value":"0123456789","description":"","id":"pair_ae8b5eac585549768f3da304905ecb38"},{"name":"category","value":"roofing","description":"","id":"pair_5ce3448980db4b11804b21997e483f65"},{"name":"description","value":"We do roofing","description":"","id":"pair_79f1edaf94bf4a7aacae422f775618d7"}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_7c09ab1743464104b30523dec9e98ddb"},{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613152788604,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"fld_73187212bf01472d86f006e8e0e92024","parentId":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","modified":1617131742142,"created":1617131737419,"name":"company","description":"","environment":{},"environmentPropertyOrder":null,"metaSortKey":-1612972408111.5,"_type":"request_group"},{"_id":"req_dcc36b4ed987467aa51f24571ee0fd0b","parentId":"fld_73187212bf01472d86f006e8e0e92024","modified":1620145367073,"created":1613155044093,"url":"{{ _.base_url }}/companies/{% response 'body', 'req_c342846e1fc34004b62751a3de24e333', 'b64::JC51Yw==::46b', 'never', 60 %}/items","name":"costing 1","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"item_uc","value":"{% response 'body', 'req_ffc87b2c8015437cb7c56902be791211', 'b64::JC51Yw==::46b', 'never', 60 %}","description":"","id":"pair_86a270a176a94703a51ea95794d18978"},{"name":"cost","value":"100","description":"","id":"pair_a991e7bfc4394e85b6d15510c578ef6c"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_575fec52d20b4b2fa555f914a14e2f18"}],"authentication":{},"metaSortKey":-1613152788504,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_d7c3e22fc1d042cdb2d1397856fc178e","parentId":"fld_73187212bf01472d86f006e8e0e92024","modified":1617131748432,"created":1615974394919,"url":"{{ _.base_url }}/companies","name":"company","description":"","method":"GET","body":{"mimeType":"application/x-www-form-urlencoded","params":[]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_7c09ab1743464104b30523dec9e98ddb"},{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613152788554,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_ee8894df86604108aea3c054ace8e15d","parentId":"fld_73187212bf01472d86f006e8e0e92024","modified":1617133205212,"created":1617132847696,"url":"{{ _.base_url }}/companies/{% response 'body', 'req_c342846e1fc34004b62751a3de24e333', 'b64::JC51Yw==::46b', 'never', 60 %}/items","name":"costing 2","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"item_uc","value":"{% response 'body', 'req_273cc72968c8460cbdd1e4b071f5c873', 'b64::JC51Yw==::46b', 'never', 60 %}","description":"","id":"pair_86a270a176a94703a51ea95794d18978"},{"name":"cost","value":"200","description":"","id":"pair_a991e7bfc4394e85b6d15510c578ef6c"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_575fec52d20b4b2fa555f914a14e2f18"}],"authentication":{},"metaSortKey":-1606447390003,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_8836b44527294aec868eb0b18be6f56b","parentId":"fld_73187212bf01472d86f006e8e0e92024","modified":1620145394476,"created":1620145375196,"url":"{{ _.base_url }}/companies/{% response 'body', 'req_c342846e1fc34004b62751a3de24e333', 'b64::JC51Yw==::46b', 'never', 60 %}/items","name":"costing 3","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"item_uc","value":"{% response 'body', 'req_16d6ba6286604a96bf85e5da8a195a9e', 'b64::JC51Yw==::46b', 'never', 60 %}","description":"","id":"pair_86a270a176a94703a51ea95794d18978"},{"name":"cost","value":"200","description":"","id":"pair_a991e7bfc4394e85b6d15510c578ef6c"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_575fec52d20b4b2fa555f914a14e2f18"}],"authentication":{},"metaSortKey":-1603094690752.5,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_868e4c1a40564853ac3c97decb1f74f3","parentId":"fld_73187212bf01472d86f006e8e0e92024","modified":1621364008426,"created":1621363766523,"url":"{{ _.base_url }}/blockouts","name":"blockouts","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"startdate","value":"2021-01-05","description":"","id":"pair_02cacba1c6ea4790b3d896805286e9ba"},{"name":"enddate","value":"2021-01-06","description":"","id":"pair_e8673b879ccc4e4a85bd624939326bc6"}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_7c09ab1743464104b30523dec9e98ddb"},{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613152788579,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_4678b0ffe73443b1a2252ede31f73142","parentId":"fld_64a801672d1c42109d6f085c510c2337","modified":1617131804738,"created":1617088716700,"url":"{{ _.base_url }}/companies/{% response 'body', 'req_c342846e1fc34004b62751a3de24e333', 'b64::JC51Yw==::46b', 'never', 60 %}/items","name":"list items","description":"","method":"GET","body":{"mimeType":"application/x-www-form-urlencoded","params":[]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_575fec52d20b4b2fa555f914a14e2f18"}],"authentication":{},"metaSortKey":-1613153032143,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"fld_64a801672d1c42109d6f085c510c2337","parentId":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","modified":1617131824934,"created":1617131767451,"name":"internal","description":"","environment":{},"environmentPropertyOrder":null,"metaSortKey":-1612972408061.5,"_type":"request_group"},{"_id":"req_37035a2bbf4a4a66a490c1e34420237d","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1617132125698,"created":1613151845982,"url":"{{ _.base_url }}/projects","name":"Project","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"name","value":"Renovation","description":"","id":"pair_d7290485aac1477287e6e75c709b7734"}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_be8e5220b9ed40aa98c55cce0cd179e4"},{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"}],"authentication":{},"metaSortKey":-1613153032311.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"fld_4c1d8c280ab74805921ee31d51358cbf","parentId":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","modified":1617132110717,"created":1617132110717,"name":"project","description":"","environment":{},"environmentPropertyOrder":null,"metaSortKey":-1617132110717,"_type":"request_group"},{"_id":"req_011fe5e03a574c7bbe6465817ca03d19","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1620145758014,"created":1613153391987,"url":"{{ _.base_url }}/projects/{% response 'body', 'req_37035a2bbf4a4a66a490c1e34420237d', 'b64::JC51Yw==::46b', 'never', 60 %}/companies","name":"service","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"company_uc","value":"{% response 'body', 'req_c342846e1fc34004b62751a3de24e333', 'b64::JC51Yw==::46b', 'never', 60 %}","description":"","id":"pair_c733d6ba6233422ea98faf25e2c60f77"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_05ff60a17e0b4e1a96713d98e373d528"}],"authentication":{},"metaSortKey":-1613153032286.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_bc8d4f6d7dac4aeda705b57ab72f20e1","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1617132963008,"created":1613154912252,"url":"{{ _.base_url }}/services/{% response 'body', 'req_011fe5e03a574c7bbe6465817ca03d19', 'b64::JC51Yw==::46b', 'never', 60 %}/costings","name":"quantity 1","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"costing_uc","value":"{% response 'body', 'req_dcc36b4ed987467aa51f24571ee0fd0b', 'b64::JC51Yw==::46b', 'never', 60 %}","description":"","id":"pair_444f797c4cfe4a87bd08a0c05e6de65d"},{"name":"quantity","value":"100","description":"","id":"pair_5ec0c437a1a4429aa853a9237bf40002"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_76059dd6643d4e52acdbd888a455e162"}],"authentication":{},"metaSortKey":-1613153032111.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_4fcfe457293a4cbb95540da0d7e1380c","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1617132138132,"created":1613913012178,"url":"{{ _.base_url }}/services/{% response 'body', 'req_011fe5e03a574c7bbe6465817ca03d19', 'b64::JC51Yw==::46b', 'never', 60 %}","name":"service","description":"","method":"DELETE","body":{"mimeType":"application/x-www-form-urlencoded","params":[]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_05ff60a17e0b4e1a96713d98e373d528"}],"authentication":{},"metaSortKey":-1613153032161.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_e6d0e44f08c541dfbb2a49d44c2ba097","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1617132144499,"created":1614714515100,"url":"{{ _.base_url }}/quantities","name":"quantities","description":"","method":"PUT","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"quantity","value":"200","description":"","id":"pair_5ec0c437a1a4429aa853a9237bf40002"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_76059dd6643d4e52acdbd888a455e162"}],"authentication":{},"metaSortKey":-1613153032061.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_9ff82e9640814ad88573130f053506cb","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1619635081866,"created":1615307983285,"url":"{{ _.base_url }}/projects/{% response 'body', 'req_37035a2bbf4a4a66a490c1e34420237d', 'b64::JC51Yw==::46b', 'never', 60 %}/services","name":"services","description":"","method":"GET","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"","value":"","description":"","id":"pair_03ef03c3c6404be29f1f772202b322f1"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_05ff60a17e0b4e1a96713d98e373d528"}],"authentication":{},"metaSortKey":-1613153032211.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_ee63e195680d4baabf1af4255ef8e827","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1617132123912,"created":1615973596300,"url":"{{ _.base_url }}/projects","name":"Project","description":"","method":"GET","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"name","value":"Renovation","description":"","id":"pair_d7290485aac1477287e6e75c709b7734","disabled":true}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_be8e5220b9ed40aa98c55cce0cd179e4"},{"name":"User-Agent","value":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Set-Cooki","value":"","description":"","id":"pair_6490ab7a4337402ea0ffc1cac87ef49c","disabled":true}],"authentication":{},"metaSortKey":-1613153032261.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_90054ae39119457c9eef69fcfbef9b65","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1617132149667,"created":1617088738145,"url":"{{ _.base_url }}/companies/{% response 'body', 'req_c342846e1fc34004b62751a3de24e333', 'b64::JC51Yw==::46b', 'never', 60 %}/selecteditems","name":"list selected items","description":"","method":"GET","body":{"mimeType":"application/x-www-form-urlencoded","params":[]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_575fec52d20b4b2fa555f914a14e2f18"}],"authentication":{},"metaSortKey":-1613153032011.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_0108b1fd915241f989e4ef49865b93f7","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1617132985186,"created":1617132970826,"url":"{{ _.base_url }}/services/{% response 'body', 'req_011fe5e03a574c7bbe6465817ca03d19', 'b64::JC51Yw==::46b', 'never', 60 %}/costings","name":"quantity 2","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"costing_uc","value":"{% response 'body', 'req_ee8894df86604108aea3c054ace8e15d', 'b64::JC51Yw==::46b', 'never', 60 %}","description":"","id":"pair_444f797c4cfe4a87bd08a0c05e6de65d"},{"name":"quantity","value":"100","description":"","id":"pair_5ec0c437a1a4429aa853a9237bf40002"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_76059dd6643d4e52acdbd888a455e162"}],"authentication":{},"metaSortKey":-1613153032086.75,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_39a96c75bba34428bf1c5fb27cb32511","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1621361106208,"created":1619634158996,"url":"{{ _.base_url }}/services/{% response 'body', 'req_011fe5e03a574c7bbe6465817ca03d19', 'b64::JC51Yw==::46b', 'never', 60 %}?data=availability&month=Jan2021","name":"availability","description":"","method":"GET","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"","value":"","description":"","id":"pair_03ef03c3c6404be29f1f772202b322f1"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_05ff60a17e0b4e1a96713d98e373d528"}],"authentication":{},"metaSortKey":-1613153032202.375,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_26e1945464594235a0cbf82a43822259","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1619635097582,"created":1619635067769,"url":"{{ _.base_url }}/services/{% response 'body', 'req_011fe5e03a574c7bbe6465817ca03d19', 'b64::JC51Yw==::46b', 'never', 60 %}","name":"service","description":"","method":"GET","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"","value":"","description":"","id":"pair_03ef03c3c6404be29f1f772202b322f1"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_05ff60a17e0b4e1a96713d98e373d528"}],"authentication":{},"metaSortKey":-1613153032207.0625,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_e0270f2f3758469c9f7724cdabc7c99a","parentId":"fld_4c1d8c280ab74805921ee31d51358cbf","modified":1620145423013,"created":1620145411974,"url":"{{ _.base_url }}/services/{% response 'body', 'req_011fe5e03a574c7bbe6465817ca03d19', 'b64::JC51Yw==::46b', 'never', 60 %}/costings","name":"quantity 3","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"costing_uc","value":"{% response 'body', 'req_8836b44527294aec868eb0b18be6f56b', 'b64::JC51Yw==::46b', 'never', 60 %}","description":"","id":"pair_444f797c4cfe4a87bd08a0c05e6de65d"},{"name":"quantity","value":"100","description":"","id":"pair_5ec0c437a1a4429aa853a9237bf40002"}]},"parameters":[],"headers":[{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_9c1bcd6e393a4840804790d4cd815132"},{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_76059dd6643d4e52acdbd888a455e162"}],"authentication":{},"metaSortKey":-1613153032074.25,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_ffc87b2c8015437cb7c56902be791211","parentId":"fld_fc89480973234853990b3954b2979fb0","modified":1617132639811,"created":1613153080089,"url":"{{ _.base_url }}/items","name":"paint ext wls gnd","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"description","value":"painting, exterior walls, ground floor","description":"","id":"pair_02cacba1c6ea4790b3d896805286e9ba"},{"name":"unit","value":"m^2","description":"","id":"pair_e8673b879ccc4e4a85bd624939326bc6"}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_7c09ab1743464104b30523dec9e98ddb"},{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613153032193,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"fld_fc89480973234853990b3954b2979fb0","parentId":"fld_64a801672d1c42109d6f085c510c2337","modified":1617132591387,"created":1617132582454,"name":"items","description":"","environment":{},"environmentPropertyOrder":null,"metaSortKey":-1613153032243,"_type":"request_group"},{"_id":"req_273cc72968c8460cbdd1e4b071f5c873","parentId":"fld_fc89480973234853990b3954b2979fb0","modified":1617132667717,"created":1617132656220,"url":"{{ _.base_url }}/items","name":"paint ext wls 1st","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"description","value":"painting, exterior walls, first floor","description":"","id":"pair_02cacba1c6ea4790b3d896805286e9ba"},{"name":"unit","value":"m^2","description":"","id":"pair_e8673b879ccc4e4a85bd624939326bc6"}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_7c09ab1743464104b30523dec9e98ddb"},{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613153032177.375,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"req_16d6ba6286604a96bf85e5da8a195a9e","parentId":"fld_fc89480973234853990b3954b2979fb0","modified":1620145291684,"created":1620145274828,"url":"{{ _.base_url }}/items","name":"roof tiling","description":"","method":"POST","body":{"mimeType":"application/x-www-form-urlencoded","params":[{"name":"description","value":"roof tiling","description":"","id":"pair_02cacba1c6ea4790b3d896805286e9ba"},{"name":"unit","value":"m^2","description":"","id":"pair_e8673b879ccc4e4a85bd624939326bc6"}]},"parameters":[],"headers":[{"name":"Content-Type","value":"application/x-www-form-urlencoded","id":"pair_7c09ab1743464104b30523dec9e98ddb"},{"name":"User-Agent","value":"{{ _.user_agent }}","description":"","id":"pair_0734e9a658e24a849e097bb7b5e1cb9c"}],"authentication":{},"metaSortKey":-1613153032169.5625,"isPrivate":false,"settingStoreCookies":true,"settingSendCookies":true,"settingDisableRenderRequestBody":false,"settingEncodeUrl":true,"settingRebuildPath":true,"settingFollowRedirects":"global","_type":"request"},{"_id":"env_895e4edd2e2ad1bb8147f8ec5902b0ec78234c9d","parentId":"wrk_ccf6793ecca64fc8a01a2dfd948c750f","modified":1622724911255,"created":1622724911255,"name":"Base Environment","data":{},"dataPropertyOrder":null,"color":null,"isPrivate":false,"metaSortKey":1622724911255,"_type":"environment"},{"_id":"jar_895e4edd2e2ad1bb8147f8ec5902b0ec78234c9d","parentId":"wrk_ccf6793ecca64fc8a01a2dfd948c750f","modified":1622724911256,"created":1622724911256,"name":"Default Jar","cookies":[],"_type":"cookie_jar"},{"_id":"spc_60cc33b633cb4510b9b9e42345bcb9eb","parentId":"wrk_ccf6793ecca64fc8a01a2dfd948c750f","modified":1622724911220,"created":1622724911220,"fileName":"Insomnia","contents":"","contentType":"yaml","_type":"api_spec"},{"_id":"env_425a01f1334a4980820823391def5843","parentId":"env_895e4edd2e2ad1bb8147f8ec5902b0ec78234c9d","modified":1622817097884,"created":1622817097884,"name":"New Environment","data":{},"dataPropertyOrder":null,"color":null,"isPrivate":false,"metaSortKey":1622817097885,"_type":"environment"},{"_id":"env_1f93f4fd57afa96edc0dbcf41ebc64b0ddea7d13","parentId":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","modified":1612883376434,"created":1612883376434,"name":"Base Environment","data":{},"dataPropertyOrder":null,"color":null,"isPrivate":false,"metaSortKey":1612883376435,"_type":"environment"},{"_id":"jar_1f93f4fd57afa96edc0dbcf41ebc64b0ddea7d13","parentId":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","modified":1621364024569,"created":1612883376437,"name":"Default Jar","cookies":[{"key":"session","value":"210a826efaa0513a9fe9afacf58e6ea5cb3ce943","expires":"2021-12-04T18:53:44.000Z","domain":"localhost","path":"/","httpOnly":true,"extensions":["SameSite=Strict"],"hostOnly":true,"creation":"2021-05-04T13:30:17.172Z","lastAccessed":"2021-05-18T18:53:44.568Z","id":"4934613451701435"}],"_type":"cookie_jar"},{"_id":"spc_82f5e6a762f148fab4f6eeb08dbaa239","parentId":"wrk_b95d1a8b6f0e49e894b411a45ccb5e01","modified":1612883376394,"created":1612883376394,"fileName":"TallyClerk","contents":"","contentType":"yaml","_type":"api_spec"},{"_id":"env_2a8d522be1294fb0b749e1ccd4c4b226","parentId":"env_1f93f4fd57afa96edc0dbcf41ebc64b0ddea7d13","modified":1613912264701,"created":1612883856562,"name":"Development","data":{"base_url":"{{ _.protocol }}://{{ _.domain }}:{{ _.port }}{{ _.path }}","protocol":"http","domain":"localhost","port":"8080","path":"/api/v1","user_agent":"Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1","project_uc":"er","service_uc":"yt","item_uc":"bg"},"dataPropertyOrder":{"&":["base_url","protocol","domain","port","path","user_agent","project_uc","service_uc","item_uc"]},"color":"#ff0000","isPrivate":false,"metaSortKey":1612883856562,"_type":"environment"}]} \ No newline at end of file From 7f89a052f762fbb2defad4e0267cad50c88dc7a1 Mon Sep 17 00:00:00 2001 From: geraldtivatyi Date: Mon, 7 Jun 2021 09:36:39 +0200 Subject: [PATCH 04/47] Some code refactoring. Create http request in typescript. Update css, and data table. --- app.ts | 7 +++++ classes/create_table.js | 6 ++-- classes/create_table.js.map | 2 +- classes/create_table.ts | 10 +++--- classes/http.js | 33 ++++++++++++++++++++ classes/http.js.map | 1 + classes/http.ts | 37 ++++++++++++++++++++++ index.html | 15 +++++---- main.css | 62 ++++++++++++++++++++++++++++--------- package-lock.json | 48 +++++++++++++++++++++++++++- package.json | 1 + req.js | 21 ------------- 12 files changed, 189 insertions(+), 54 deletions(-) create mode 100644 classes/http.js create mode 100644 classes/http.js.map create mode 100644 classes/http.ts delete mode 100644 req.js diff --git a/app.ts b/app.ts index 25d80876..e85b3d56 100644 --- a/app.ts +++ b/app.ts @@ -2,7 +2,14 @@ import { tableHeadings } from "./classes/table_headings.js"; import { recordStruct } from "./classes/record_struct.js"; import { createTable } from "./classes/create_table.js"; import { HasFormatMethod } from "./interfaces/hasformatmethod.js"; +import { httpReq } from './classes/http'; +const request = new httpReq('www.google.com','/','get'); +// request.addArg('num', '1'); + +// request.get((res: string): void => { +// console.log('Response received: ' + res); +// }); //Accessing Form Data const form = document.querySelector('.navigation') as HTMLFormElement; diff --git a/classes/create_table.js b/classes/create_table.js index afb1b0ab..0d120224 100644 --- a/classes/create_table.js +++ b/classes/create_table.js @@ -3,9 +3,9 @@ var createTable = /** @class */ (function () { this.container = container; } createTable.prototype.renderHeading = function (headings) { - var th = document.createElement('th'); - th.innerHTML = headings.format(); - this.container.append(th); + var tr = document.createElement('tr'); + tr.innerHTML = headings.format(); + this.container.append(tr); }; createTable.prototype.renderRecords = function (records) { var tr = document.createElement('tr'); diff --git a/classes/create_table.js.map b/classes/create_table.js.map index fc51bbc0..6d40b1fc 100644 --- a/classes/create_table.js.map +++ b/classes/create_table.js.map @@ -1 +1 @@ -{"version":3,"file":"create_table.js","sourceRoot":"","sources":["create_table.ts"],"names":[],"mappings":"AAEA;IACI,qBAAoB,SAA2B;QAA3B,cAAS,GAAT,SAAS,CAAkB;IAAG,CAAC;IAEnD,mCAAa,GAAb,UAAc,QAAyB;QACnC,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACxC,EAAE,CAAC,SAAS,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;QAEjC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IAED,mCAAa,GAAb,UAAc,OAAwB;QAClC,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACxC,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;QAEhC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IACL,kBAAC;AAAD,CAAC,AAhBD,IAgBC"} \ No newline at end of file +{"version":3,"file":"create_table.js","sourceRoot":"","sources":["create_table.ts"],"names":[],"mappings":"AAEA;IACI,qBAAoB,SAA2B;QAA3B,cAAS,GAAT,SAAS,CAAkB;IAAG,CAAC;IAEnD,mCAAa,GAAb,UAAc,QAAyB;QACnC,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAExC,EAAE,CAAC,SAAS,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;QACjC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IAED,mCAAa,GAAb,UAAc,OAAwB;QAClC,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACxC,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;QAEhC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IACL,kBAAC;AAAD,CAAC,AAhBD,IAgBC"} \ No newline at end of file diff --git a/classes/create_table.ts b/classes/create_table.ts index 8550ef86..69b4671f 100644 --- a/classes/create_table.ts +++ b/classes/create_table.ts @@ -4,12 +4,10 @@ export class createTable { constructor(private container: HTMLTableElement) {} renderHeading(headings: HasFormatMethod){ - const th = document.createElement('th'); - th.innerHTML = headings.format(); + const tr = document.createElement('tr'); - array.forEach(element => { - this.container.append(th); - }); + tr.innerHTML = headings.format(); + this.container.append(tr); } renderRecords(records: HasFormatMethod){ @@ -18,4 +16,4 @@ export class createTable { this.container.append(tr); } -} +} \ No newline at end of file diff --git a/classes/http.js b/classes/http.js new file mode 100644 index 00000000..51d3d0d7 --- /dev/null +++ b/classes/http.js @@ -0,0 +1,33 @@ +import * as http from 'http'; +var httpReq = /** @class */ (function () { + function httpReq(url, path, method) { + this.url = url; + this.path = path; + this.method = method; + } + httpReq.prototype.get = function (cb) { + var opts = { + 'host': 'google.com', + 'path': "/" + }; + http.request(opts, function (r) { + var data = ''; + r.on('data', function (chunk) { + console.log('Got chunk: ' + chunk); + data += chunk; + }); + r.on('end', function () { + console.log('Response has ended'); + console.log(data); + cb(data); + }); + r.on('error', function (err) { + console.log('Following error occured during request:\n'); + console.log(err); + }); + }).end(); + }; + return httpReq; +}()); +export { httpReq }; +//# sourceMappingURL=http.js.map \ No newline at end of file diff --git a/classes/http.js.map b/classes/http.js.map new file mode 100644 index 00000000..2d43f69f --- /dev/null +++ b/classes/http.js.map @@ -0,0 +1 @@ +{"version":3,"file":"http.js","sourceRoot":"","sources":["http.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,MAAM,CAAC;AAE7B;IAKE,iBAAY,GAAW,EAAE,IAAY,EAAE,MAAc;QACjD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACzB,CAAC;IAEM,qBAAG,GAAV,UAAW,EAAqB;QAC5B,IAAI,IAAI,GAAG;YACP,MAAM,EAAE,YAAY;YACpB,MAAM,EAAE,GAAG;SACd,CAAC;QACF,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,UAAC,CAAuB;YACvC,IAAI,IAAI,GAAG,EAAE,CAAC;YAEd,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAC,KAAa;gBACvB,OAAO,CAAC,GAAG,CAAC,aAAa,GAAG,KAAK,CAAC,CAAC;gBACnC,IAAI,IAAI,KAAK,CAAC;YAClB,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE;gBACR,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;gBAClC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAClB,EAAE,CAAC,IAAI,CAAC,CAAC;YACb,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,UAAC,GAAG;gBACd,OAAO,CAAC,GAAG,CAAC,2CAA2C,CAAC,CAAC;gBACzD,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YACrB,CAAC,CAAC,CAAA;QACN,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;IACb,CAAC;IACH,cAAC;AAAD,CAAC,AAlCD,IAkCC"} \ No newline at end of file diff --git a/classes/http.ts b/classes/http.ts new file mode 100644 index 00000000..6cff4806 --- /dev/null +++ b/classes/http.ts @@ -0,0 +1,37 @@ +import * as http from 'http'; + +export class httpReq { + url: string; + path: string; + method: string; + + constructor(url: string, path: string, method: string){ + this.url = url; + this.path = path; + this.method = method; + } + + public get(cb: (res: any) => any): void { + let opts = { + 'host': 'google.com', + 'path': `/` + }; + http.request(opts, (r: http.IncomingMessage): void => { + let data = ''; + + r.on('data', (chunk: string): void => { + console.log('Got chunk: ' + chunk); + data += chunk; + }); + r.on('end', (): void =>{ + console.log('Response has ended'); + console.log(data); + cb(data); + }); + r.on('error', (err): void => { + console.log('Following error occured during request:\n'); + console.log(err); + }) + }).end(); + } +} \ No newline at end of file diff --git a/index.html b/index.html index 130a31b7..eef4ac10 100644 --- a/index.html +++ b/index.html @@ -3,19 +3,18 @@ JS Onboard Project - -

Onboarding Table

+

JS Onboard Project

-
-
-
-

- -
+
+
+
+

+ +
diff --git a/main.css b/main.css index 533088ba..c925baa4 100644 --- a/main.css +++ b/main.css @@ -1,20 +1,54 @@ +#app { + font-family: Arial, Helvetica, sans-serif; +} + #app .navigation { display: flex; align-items: center; justify-content: center; + height: 30px; + font-size: 25px; +} + +#app .navigation .input { + text-align: center; + font-size: 25px; + width: 150px; + height: 30px; +} + +#app .navigation .padding { + margin-left: 20px; +} + +#app .navigation label { + margin-right: 10px; } + +#app .navigation #submit { + font-size: 25px; + font-weight: bold; + color: white; + background-color: #00b77a; + border-style: none; + border-radius: 6px; + width: fit-content; + height: 40px; + margin-left: 50px; +} + table { - font-family: arial, sans-serif; - border-collapse: collapse; - width: 100%; - } - - td, th { - border: 1px solid #dddddd; - text-align: left; - padding: 8px; - } - - tr:nth-child(even) { - background-color: #dddddd; - } \ No newline at end of file + font-family: arial, sans-serif; + border-collapse: collapse; + width: 100%; +} + +td, th { + border: 1px solid #dddddd; + text-align: left; + padding: 8px; +} + +tr:nth-child(even) { + background-color: #dddddd; +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 9a5d191c..7294fb72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,8 +1,49 @@ { "name": "onboard-javascript", "version": "1.0.0", - "lockfileVersion": 1, + "lockfileVersion": 2, "requires": true, + "packages": { + "": { + "version": "1.0.0", + "license": "ISC", + "dependencies": { + "@types/jquery": "^3.5.5", + "@types/node": "^15.12.1", + "typescript": "^4.3.2" + } + }, + "node_modules/@types/jquery": { + "version": "3.5.5", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.5.tgz", + "integrity": "sha512-6RXU9Xzpc6vxNrS6FPPapN1SxSHgQ336WC6Jj/N8q30OiaBZ00l1GBgeP7usjVZPivSkGUfL1z/WW6TX989M+w==", + "dependencies": { + "@types/sizzle": "*" + } + }, + "node_modules/@types/node": { + "version": "15.12.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-15.12.1.tgz", + "integrity": "sha512-zyxJM8I1c9q5sRMtVF+zdd13Jt6RU4r4qfhTd7lQubyThvLfx6yYekWSQjGCGV2Tkecgxnlpl/DNlb6Hg+dmEw==" + }, + "node_modules/@types/sizzle": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", + "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==" + }, + "node_modules/typescript": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz", + "integrity": "sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + } + }, "dependencies": { "@types/jquery": { "version": "3.5.5", @@ -12,6 +53,11 @@ "@types/sizzle": "*" } }, + "@types/node": { + "version": "15.12.1", + "resolved": "https://registry.npmjs.org/@types/node/-/node-15.12.1.tgz", + "integrity": "sha512-zyxJM8I1c9q5sRMtVF+zdd13Jt6RU4r4qfhTd7lQubyThvLfx6yYekWSQjGCGV2Tkecgxnlpl/DNlb6Hg+dmEw==" + }, "@types/sizzle": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", diff --git a/package.json b/package.json index 3ebfa7a5..401265d5 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "homepage": "https://github.com/geraldtivatyi/onboard-javascript#readme", "dependencies": { "@types/jquery": "^3.5.5", + "@types/node": "^15.12.1", "typescript": "^4.3.2" } } diff --git a/req.js b/req.js deleted file mode 100644 index cc760a09..00000000 --- a/req.js +++ /dev/null @@ -1,21 +0,0 @@ -function request(action, method, params, callback) { - let x = {}; - if (window.XMLHttpRequest) x = new XMLHttpRequest(); - else x = new ActiveXObject('Microsoft.XMLHTTP'); - x.onreadystatechange = function () { - if (this.readyState == 4 && this.status == 200) { - callback(this.responseText); - } - }; - - let paramString = ""; - let dataPairs = []; - let name; - for(name in params) - dataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(params[name])); - paramString = dataPairs.join('&').replace(/%20/g, '+'); - - action += "?" + paramString; - x.open(method, action, true); - x.send(); return; -} \ No newline at end of file From a70d63420e016e875b260ea8a46989c7eaf144d7 Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Mon, 7 Jun 2021 16:44:07 +0200 Subject: [PATCH 05/47] Make http request to get data from server. Convert data to be usable for functions. --- app.ts | 53 +++++++++++++++++++++++++++++++++++---------- classes/http.js | 33 ---------------------------- classes/http.js.map | 1 - classes/http.ts | 37 ------------------------------- httpreq.js | 14 ++++++++++++ httpreq.js.map | 1 + httpreq.ts | 13 +++++++++++ package-lock.json | 21 +++++++++++++++--- package.json | 5 ++++- tsconfig.json | 2 +- 10 files changed, 92 insertions(+), 88 deletions(-) delete mode 100644 classes/http.js delete mode 100644 classes/http.js.map delete mode 100644 classes/http.ts create mode 100644 httpreq.js create mode 100644 httpreq.js.map create mode 100644 httpreq.ts diff --git a/app.ts b/app.ts index e85b3d56..c5d1a090 100644 --- a/app.ts +++ b/app.ts @@ -2,14 +2,8 @@ import { tableHeadings } from "./classes/table_headings.js"; import { recordStruct } from "./classes/record_struct.js"; import { createTable } from "./classes/create_table.js"; import { HasFormatMethod } from "./interfaces/hasformatmethod.js"; -import { httpReq } from './classes/http'; +import { request } from './httpreq.js'; -const request = new httpReq('www.google.com','/','get'); -// request.addArg('num', '1'); - -// request.get((res: string): void => { -// console.log('Response received: ' + res); -// }); //Accessing Form Data const form = document.querySelector('.navigation') as HTMLFormElement; @@ -17,11 +11,47 @@ const form = document.querySelector('.navigation') as HTMLFormElement; const fromID = document.querySelector('#fromID') as HTMLInputElement; const toID = document.querySelector('#toID') as HTMLInputElement; - // Instantiate grid div const table = document.querySelector('table')!; const tble = new createTable(table); +// Fetch headings from server +let getHeadings: string[]; +request( + "/columns", "get", + function(r: any) { + let d: string; + let e: string[]; + try { + const myArr = JSON.parse(r); + getHeadings = myArr; + } catch(err) { + console.log(err); + return; + } + } +); + +// Fetch records from server +let getRecords: string[][]; +request( + "/records?from=1&to=5", "get", + function(r: any) { + let d = {}; + try { + if (r === []) { + d = r; + } else { + getRecords = r; + console.log(typeof getRecords); + } + } catch(err) { + console.log(err); + return; + } + } +); + form.addEventListener('submit', (e: Event) => { document.getElementById("table")!.innerHTML = ""; e.preventDefault(); @@ -29,12 +59,11 @@ form.addEventListener('submit', (e: Event) => { let interfaceHeading: HasFormatMethod; let interfaceRecords: HasFormatMethod; - // Dummy data - const recHeadingsFromServer: string[] = [ "ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J" ]; - - // Instantiate class tableHeadings + let recHeadingsFromServer: string[] = getHeadings; interfaceHeading = new tableHeadings(recHeadingsFromServer[0], recHeadingsFromServer[1], recHeadingsFromServer[2], recHeadingsFromServer[3], recHeadingsFromServer[4], recHeadingsFromServer[5], recHeadingsFromServer[6], recHeadingsFromServer[7], recHeadingsFromServer[8], recHeadingsFromServer[9], recHeadingsFromServer[10]); + // const recFromServer: string[][] = getRecords; + // Dummy data const recFromServer: string[][] = [ [ "1", "A1-FqM=", "B1-W5U=", "C1-q4Y=", "D1-M6E=", "E1-IiQ=", "F1-3q4=", "G1-e3c=", "H1-i/c=", "I1-woE=", "J1-ST0=" ], [ "2", "A2-yDY=", "B2-q9s=", "C2-loU=", "D2-ImU=", "E2-cTo=", "F2-ji0=", "G2-SMY=", "H2-rho=", "I2-Ym0=", "J2-RUc=" ], [ "3", "A3-E5g=", "B3-DNI=", "C3-iiE=", "D3-vtc=", "E3-GDQ=", "F3-fJY=", "G3-DfA=", "H3-sUw=", "I3-Cas=", "J3-gE8=" ], [ "4", "A4-ToA=", "B4-I58=", "C4-CNE=", "D4-CA8=", "E4-3nk=", "F4-AVs=", "G4-l4Q=", "H4-Qm4=", "I4-c58=", "J4-6gI=" ], [ "5", "A5-6mQ=", "B5-W6I=", "C5-HZY=", "D5-Eqc=", "E5-7wk=", "F5-bNI=", "G5-RBg=", "H5-Jm4=", "I5-T7s=", "J5-CFo=" ] ]; tble.renderHeading(interfaceHeading); diff --git a/classes/http.js b/classes/http.js deleted file mode 100644 index 51d3d0d7..00000000 --- a/classes/http.js +++ /dev/null @@ -1,33 +0,0 @@ -import * as http from 'http'; -var httpReq = /** @class */ (function () { - function httpReq(url, path, method) { - this.url = url; - this.path = path; - this.method = method; - } - httpReq.prototype.get = function (cb) { - var opts = { - 'host': 'google.com', - 'path': "/" - }; - http.request(opts, function (r) { - var data = ''; - r.on('data', function (chunk) { - console.log('Got chunk: ' + chunk); - data += chunk; - }); - r.on('end', function () { - console.log('Response has ended'); - console.log(data); - cb(data); - }); - r.on('error', function (err) { - console.log('Following error occured during request:\n'); - console.log(err); - }); - }).end(); - }; - return httpReq; -}()); -export { httpReq }; -//# sourceMappingURL=http.js.map \ No newline at end of file diff --git a/classes/http.js.map b/classes/http.js.map deleted file mode 100644 index 2d43f69f..00000000 --- a/classes/http.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"http.js","sourceRoot":"","sources":["http.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,IAAI,MAAM,MAAM,CAAC;AAE7B;IAKE,iBAAY,GAAW,EAAE,IAAY,EAAE,MAAc;QACjD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACzB,CAAC;IAEM,qBAAG,GAAV,UAAW,EAAqB;QAC5B,IAAI,IAAI,GAAG;YACP,MAAM,EAAE,YAAY;YACpB,MAAM,EAAE,GAAG;SACd,CAAC;QACF,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,UAAC,CAAuB;YACvC,IAAI,IAAI,GAAG,EAAE,CAAC;YAEd,CAAC,CAAC,EAAE,CAAC,MAAM,EAAE,UAAC,KAAa;gBACvB,OAAO,CAAC,GAAG,CAAC,aAAa,GAAG,KAAK,CAAC,CAAC;gBACnC,IAAI,IAAI,KAAK,CAAC;YAClB,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE;gBACR,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;gBAClC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;gBAClB,EAAE,CAAC,IAAI,CAAC,CAAC;YACb,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,UAAC,GAAG;gBACd,OAAO,CAAC,GAAG,CAAC,2CAA2C,CAAC,CAAC;gBACzD,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YACrB,CAAC,CAAC,CAAA;QACN,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;IACb,CAAC;IACH,cAAC;AAAD,CAAC,AAlCD,IAkCC"} \ No newline at end of file diff --git a/classes/http.ts b/classes/http.ts deleted file mode 100644 index 6cff4806..00000000 --- a/classes/http.ts +++ /dev/null @@ -1,37 +0,0 @@ -import * as http from 'http'; - -export class httpReq { - url: string; - path: string; - method: string; - - constructor(url: string, path: string, method: string){ - this.url = url; - this.path = path; - this.method = method; - } - - public get(cb: (res: any) => any): void { - let opts = { - 'host': 'google.com', - 'path': `/` - }; - http.request(opts, (r: http.IncomingMessage): void => { - let data = ''; - - r.on('data', (chunk: string): void => { - console.log('Got chunk: ' + chunk); - data += chunk; - }); - r.on('end', (): void =>{ - console.log('Response has ended'); - console.log(data); - cb(data); - }); - r.on('error', (err): void => { - console.log('Following error occured during request:\n'); - console.log(err); - }) - }).end(); - } -} \ No newline at end of file diff --git a/httpreq.js b/httpreq.js new file mode 100644 index 00000000..bfb631cc --- /dev/null +++ b/httpreq.js @@ -0,0 +1,14 @@ +export function request(action, method, callback) { + var x = {}; + if (window.XMLHttpRequest) + x = new XMLHttpRequest(); + // else x = new ActiveXObject('Microsoft.XMLHTTP'); + x.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + callback(this.responseText); + } + }; + x.open(method, action, true); + x.send(); +} +//# sourceMappingURL=httpreq.js.map \ No newline at end of file diff --git a/httpreq.js.map b/httpreq.js.map new file mode 100644 index 00000000..63374d8d --- /dev/null +++ b/httpreq.js.map @@ -0,0 +1 @@ +{"version":3,"file":"httpreq.js","sourceRoot":"","sources":["httpreq.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,OAAO,CAAC,MAAc,EAAE,MAAc,EAAE,QAAa;IACnE,IAAI,CAAC,GAAQ,EAAE,CAAC;IAChB,IAAI,MAAM,CAAC,cAAc;QAAE,CAAC,GAAG,IAAI,cAAc,EAAE,CAAC;IACpD,mDAAmD;IACnD,CAAC,CAAC,kBAAkB,GAAG;QACnB,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,GAAG,EAAE;YAC5C,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;IACL,CAAC,CAAC;IAEF,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC,IAAI,EAAE,CAAC;AACX,CAAC"} \ No newline at end of file diff --git a/httpreq.ts b/httpreq.ts new file mode 100644 index 00000000..1f3ecf1a --- /dev/null +++ b/httpreq.ts @@ -0,0 +1,13 @@ +export function request(action: string, method: string, callback: any) { + var x: any = {}; + if (window.XMLHttpRequest) x = new XMLHttpRequest(); + // else x = new ActiveXObject('Microsoft.XMLHTTP'); + x.onreadystatechange = function () { + if (this.readyState == 4 && this.status == 200) { + callback(this.responseText); + } + }; + + x.open(method, action, true); + x.send(); +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7294fb72..6b745399 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,11 @@ "license": "ISC", "dependencies": { "@types/jquery": "^3.5.5", - "@types/node": "^15.12.1", + "http": "^0.0.1-security", "typescript": "^4.3.2" + }, + "devDependencies": { + "@types/node": "^15.12.1" } }, "node_modules/@types/jquery": { @@ -24,13 +27,19 @@ "node_modules/@types/node": { "version": "15.12.1", "resolved": "https://registry.npmjs.org/@types/node/-/node-15.12.1.tgz", - "integrity": "sha512-zyxJM8I1c9q5sRMtVF+zdd13Jt6RU4r4qfhTd7lQubyThvLfx6yYekWSQjGCGV2Tkecgxnlpl/DNlb6Hg+dmEw==" + "integrity": "sha512-zyxJM8I1c9q5sRMtVF+zdd13Jt6RU4r4qfhTd7lQubyThvLfx6yYekWSQjGCGV2Tkecgxnlpl/DNlb6Hg+dmEw==", + "dev": true }, "node_modules/@types/sizzle": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==" }, + "node_modules/http": { + "version": "0.0.1-security", + "resolved": "https://registry.npmjs.org/http/-/http-0.0.1-security.tgz", + "integrity": "sha512-RnDvP10Ty9FxqOtPZuxtebw1j4L/WiqNMDtuc1YMH1XQm5TgDRaR1G9u8upL6KD1bXHSp9eSXo/ED+8Q7FAr+g==" + }, "node_modules/typescript": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz", @@ -56,13 +65,19 @@ "@types/node": { "version": "15.12.1", "resolved": "https://registry.npmjs.org/@types/node/-/node-15.12.1.tgz", - "integrity": "sha512-zyxJM8I1c9q5sRMtVF+zdd13Jt6RU4r4qfhTd7lQubyThvLfx6yYekWSQjGCGV2Tkecgxnlpl/DNlb6Hg+dmEw==" + "integrity": "sha512-zyxJM8I1c9q5sRMtVF+zdd13Jt6RU4r4qfhTd7lQubyThvLfx6yYekWSQjGCGV2Tkecgxnlpl/DNlb6Hg+dmEw==", + "dev": true }, "@types/sizzle": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==" }, + "http": { + "version": "0.0.1-security", + "resolved": "https://registry.npmjs.org/http/-/http-0.0.1-security.tgz", + "integrity": "sha512-RnDvP10Ty9FxqOtPZuxtebw1j4L/WiqNMDtuc1YMH1XQm5TgDRaR1G9u8upL6KD1bXHSp9eSXo/ED+8Q7FAr+g==" + }, "typescript": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.2.tgz", diff --git a/package.json b/package.json index 401265d5..8146ba13 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,10 @@ "homepage": "https://github.com/geraldtivatyi/onboard-javascript#readme", "dependencies": { "@types/jquery": "^3.5.5", - "@types/node": "^15.12.1", + "http": "^0.0.1-security", "typescript": "^4.3.2" + }, + "devDependencies": { + "@types/node": "^15.12.1" } } diff --git a/tsconfig.json b/tsconfig.json index dbf43618..08486fac 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,7 +14,7 @@ "lib": [ "dom", "es2016" - ], + ] }, "include": [ "./**/*.ts" From 888df86213813d7dda9f53def7401b8bd5299028 Mon Sep 17 00:00:00 2001 From: geraldtivatyi Date: Tue, 8 Jun 2021 00:25:20 +0200 Subject: [PATCH 06/47] Update fetching data from server --- app.ts | 95 ++++++++++++++++++++++++++++-------------------------- index.html | 14 ++++---- main.css | 36 +++++++++++++++++---- 3 files changed, 88 insertions(+), 57 deletions(-) diff --git a/app.ts b/app.ts index c5d1a090..0b6a7245 100644 --- a/app.ts +++ b/app.ts @@ -15,61 +15,66 @@ const toID = document.querySelector('#toID') as HTMLInputElement; const table = document.querySelector('table')!; const tble = new createTable(table); -// Fetch headings from server let getHeadings: string[]; -request( - "/columns", "get", - function(r: any) { - let d: string; - let e: string[]; - try { - const myArr = JSON.parse(r); - getHeadings = myArr; - } catch(err) { - console.log(err); - return; - } - } -); - -// Fetch records from server -let getRecords: string[][]; -request( - "/records?from=1&to=5", "get", - function(r: any) { - let d = {}; - try { - if (r === []) { - d = r; - } else { - getRecords = r; - console.log(typeof getRecords); - } - } catch(err) { - console.log(err); - return; - } - } -); - -form.addEventListener('submit', (e: Event) => { - document.getElementById("table")!.innerHTML = ""; - e.preventDefault(); +let recFromServer: string[][]; +function generateTable(){ + console.log(fromID.valueAsNumber); + console.log(toID.valueAsNumber); + console.log(recFromServer); + console.log(recFromServer[0][1]); let interfaceHeading: HasFormatMethod; let interfaceRecords: HasFormatMethod; - let recHeadingsFromServer: string[] = getHeadings; interfaceHeading = new tableHeadings(recHeadingsFromServer[0], recHeadingsFromServer[1], recHeadingsFromServer[2], recHeadingsFromServer[3], recHeadingsFromServer[4], recHeadingsFromServer[5], recHeadingsFromServer[6], recHeadingsFromServer[7], recHeadingsFromServer[8], recHeadingsFromServer[9], recHeadingsFromServer[10]); - - // const recFromServer: string[][] = getRecords; - - // Dummy data - const recFromServer: string[][] = [ [ "1", "A1-FqM=", "B1-W5U=", "C1-q4Y=", "D1-M6E=", "E1-IiQ=", "F1-3q4=", "G1-e3c=", "H1-i/c=", "I1-woE=", "J1-ST0=" ], [ "2", "A2-yDY=", "B2-q9s=", "C2-loU=", "D2-ImU=", "E2-cTo=", "F2-ji0=", "G2-SMY=", "H2-rho=", "I2-Ym0=", "J2-RUc=" ], [ "3", "A3-E5g=", "B3-DNI=", "C3-iiE=", "D3-vtc=", "E3-GDQ=", "F3-fJY=", "G3-DfA=", "H3-sUw=", "I3-Cas=", "J3-gE8=" ], [ "4", "A4-ToA=", "B4-I58=", "C4-CNE=", "D4-CA8=", "E4-3nk=", "F4-AVs=", "G4-l4Q=", "H4-Qm4=", "I4-c58=", "J4-6gI=" ], [ "5", "A5-6mQ=", "B5-W6I=", "C5-HZY=", "D5-Eqc=", "E5-7wk=", "F5-bNI=", "G5-RBg=", "H5-Jm4=", "I5-T7s=", "J5-CFo=" ] ]; tble.renderHeading(interfaceHeading); for(let i=fromID.valueAsNumber-1;i { + document.getElementById("table")!.innerHTML = ""; + e.preventDefault(); + + // Fetch headings from server + request( + "/columns", "get", + function(r: any) { + let d: string; + let e: string[]; + try { + const myArr = JSON.parse(r); + getHeadings = myArr; + } catch(err) { + console.log(err); + return; + } + } + ); + + // Fetch records from server + let url: string; + url = "/records?from="+fromID.valueAsNumber+"&to="+toID.valueAsNumber; + request( + url, "get", + function(r: any) { + let d = {}; + try { + if (r === []) { + d = r; + } else { + const myArr = JSON.parse(r); + recFromServer = myArr; + console.log(recFromServer); + generateTable(); + } + } catch(err) { + console.log(err); + return; + } + } + ); }); diff --git a/index.html b/index.html index eef4ac10..0d550d52 100644 --- a/index.html +++ b/index.html @@ -6,17 +6,19 @@ -

JS Onboard Project

-
-
+
+

JS Onboard Project

+




- -
-
+ +
+
+
+
diff --git a/main.css b/main.css index c925baa4..269b663e 100644 --- a/main.css +++ b/main.css @@ -1,8 +1,32 @@ -#app { +body { font-family: Arial, Helvetica, sans-serif; + overflow-y: scroll; +} + +/* Hide scrollbar for Chrome, Safari and Opera */ +body::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +body { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +#app { + margin-top: 150px; +} + +.navigation { + background-color: #ffffff; + overflow: hidden; + position: fixed; + top: 0; + width: 100%; } -#app .navigation { +.navigation .form { display: flex; align-items: center; justify-content: center; @@ -10,22 +34,22 @@ font-size: 25px; } -#app .navigation .input { +.navigation .form .input { text-align: center; font-size: 25px; width: 150px; height: 30px; } -#app .navigation .padding { +.navigation .form .padding { margin-left: 20px; } -#app .navigation label { +.navigation .form label { margin-right: 10px; } -#app .navigation #submit { +.navigation .form #submit { font-size: 25px; font-weight: bold; color: white; From 59f3d00c0c539fe61ed76a0c9f1c0bb7000cb447 Mon Sep 17 00:00:00 2001 From: geraldtivatyi Date: Tue, 8 Jun 2021 12:11:09 +0200 Subject: [PATCH 07/47] Add styling and fix bug --- app.ts | 7 +------ main.css | 21 +++++++++++++++++---- 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/app.ts b/app.ts index 0b6a7245..0414f5a2 100644 --- a/app.ts +++ b/app.ts @@ -19,16 +19,12 @@ let getHeadings: string[]; let recFromServer: string[][]; function generateTable(){ - console.log(fromID.valueAsNumber); - console.log(toID.valueAsNumber); - console.log(recFromServer); - console.log(recFromServer[0][1]); let interfaceHeading: HasFormatMethod; let interfaceRecords: HasFormatMethod; let recHeadingsFromServer: string[] = getHeadings; interfaceHeading = new tableHeadings(recHeadingsFromServer[0], recHeadingsFromServer[1], recHeadingsFromServer[2], recHeadingsFromServer[3], recHeadingsFromServer[4], recHeadingsFromServer[5], recHeadingsFromServer[6], recHeadingsFromServer[7], recHeadingsFromServer[8], recHeadingsFromServer[9], recHeadingsFromServer[10]); tble.renderHeading(interfaceHeading); - for(let i=fromID.valueAsNumber-1;i { } else { const myArr = JSON.parse(r); recFromServer = myArr; - console.log(recFromServer); generateTable(); } } catch(err) { diff --git a/main.css b/main.css index 269b663e..085133e4 100644 --- a/main.css +++ b/main.css @@ -1,6 +1,7 @@ body { font-family: Arial, Helvetica, sans-serif; overflow-y: scroll; + margin: 0px; } /* Hide scrollbar for Chrome, Safari and Opera */ @@ -24,6 +25,8 @@ body { position: fixed; top: 0; width: 100%; + padding: 5px; + z-index: 1; } .navigation .form { @@ -39,6 +42,7 @@ body { font-size: 25px; width: 150px; height: 30px; + border-radius: 6px; } .navigation .form .padding { @@ -65,14 +69,23 @@ table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; + table-layout: fixed; + position: relative; +} + +th { + position: sticky; + top: 130px; + background-color: #ffffff; +} + +tr:nth-child(even) { + background-color: #dddddd60; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; + text-align: center; } - -tr:nth-child(even) { - background-color: #dddddd; -} \ No newline at end of file From 31961b578d85297879bd7a90ac0d8b1ef6679b40 Mon Sep 17 00:00:00 2001 From: geraldtivatyi Date: Tue, 8 Jun 2021 20:05:06 +0200 Subject: [PATCH 08/47] Refactor code and add comments --- app.ts | 64 +++++++++++++------------------- classes/create_table.js | 9 +---- classes/create_table.js.map | 2 +- classes/create_table.ts | 12 ++---- httpreq.js => classes/httpreq.js | 3 +- classes/httpreq.js.map | 1 + httpreq.ts => classes/httpreq.ts | 4 +- classes/record_struct.js | 27 +++++++------- classes/record_struct.js.map | 2 +- classes/record_struct.ts | 42 +++++++++------------ classes/table_headings.js | 20 ++++------ classes/table_headings.js.map | 2 +- classes/table_headings.ts | 33 +++++----------- httpreq.js.map | 1 - index.html | 2 +- interfaces/hasformatmethod.ts | 1 + 16 files changed, 89 insertions(+), 136 deletions(-) rename httpreq.js => classes/httpreq.js (86%) create mode 100644 classes/httpreq.js.map rename httpreq.ts => classes/httpreq.ts (71%) delete mode 100644 httpreq.js.map diff --git a/app.ts b/app.ts index 0414f5a2..cc1377f8 100644 --- a/app.ts +++ b/app.ts @@ -2,47 +2,32 @@ import { tableHeadings } from "./classes/table_headings.js"; import { recordStruct } from "./classes/record_struct.js"; import { createTable } from "./classes/create_table.js"; import { HasFormatMethod } from "./interfaces/hasformatmethod.js"; -import { request } from './httpreq.js'; +import { request } from './classes/httpreq.js'; -//Accessing Form Data -const form = document.querySelector('.navigation') as HTMLFormElement; - +//Accessing form data +const form = document.querySelector('#form') as HTMLFormElement; const fromID = document.querySelector('#fromID') as HTMLInputElement; const toID = document.querySelector('#toID') as HTMLInputElement; -// Instantiate grid div -const table = document.querySelector('table')!; -const tble = new createTable(table); - -let getHeadings: string[]; -let recFromServer: string[][]; +// Instantiate grid table to append innerHTML +let tble = new createTable(document.querySelector('#table') as HTMLTableElement); -function generateTable(){ - let interfaceHeading: HasFormatMethod; - let interfaceRecords: HasFormatMethod; - let recHeadingsFromServer: string[] = getHeadings; - interfaceHeading = new tableHeadings(recHeadingsFromServer[0], recHeadingsFromServer[1], recHeadingsFromServer[2], recHeadingsFromServer[3], recHeadingsFromServer[4], recHeadingsFromServer[5], recHeadingsFromServer[6], recHeadingsFromServer[7], recHeadingsFromServer[8], recHeadingsFromServer[9], recHeadingsFromServer[10]); - tble.renderHeading(interfaceHeading); - for(let i=0;i { document.getElementById("table")!.innerHTML = ""; e.preventDefault(); - // Fetch headings from server + // Fetch table headings from server request( - "/columns", "get", + "/columns", "GET", function(r: any) { - let d: string; - let e: string[]; try { - const myArr = JSON.parse(r); - getHeadings = myArr; + headingsStr = r; // set response from server } catch(err) { console.log(err); return; @@ -51,20 +36,14 @@ form.addEventListener('submit', (e: Event) => { ); // Fetch records from server - let url: string; - url = "/records?from="+fromID.valueAsNumber+"&to="+toID.valueAsNumber; + let url: string = "/records?from="+fromID.valueAsNumber+"&to="+toID.valueAsNumber; request( - url, "get", + url, "GET", function(r: any) { - let d = {}; try { - if (r === []) { - d = r; - } else { - const myArr = JSON.parse(r); - recFromServer = myArr; - generateTable(); - } + recordsStr = r; // set response from server + generateTable(); // call function to render table in browser + } catch(err) { console.log(err); return; @@ -73,3 +52,12 @@ form.addEventListener('submit', (e: Event) => { ); }); +// Create table and render in browser +function generateTable(){ + let interfaceHeading: HasFormatMethod; // variable of type interface used in creating table headings + let interfaceRecords: HasFormatMethod; // variable of type interface used in creating table rows + interfaceHeading = new tableHeadings(headingsStr); // call method to generate string containing table heading element + tble.constructTableHeadings(interfaceHeading); // call method to render table headings element in browser + interfaceRecords = new recordStruct(recordsStr); // call method to generate string containing table row elements +} + diff --git a/classes/create_table.js b/classes/create_table.js index 0d120224..42b3ed86 100644 --- a/classes/create_table.js +++ b/classes/create_table.js @@ -2,14 +2,9 @@ var createTable = /** @class */ (function () { function createTable(container) { this.container = container; } - createTable.prototype.renderHeading = function (headings) { + createTable.prototype.constructTableHeadings = function (element) { var tr = document.createElement('tr'); - tr.innerHTML = headings.format(); - this.container.append(tr); - }; - createTable.prototype.renderRecords = function (records) { - var tr = document.createElement('tr'); - tr.innerHTML = records.format(); + tr.innerHTML = element.format(); this.container.append(tr); }; return createTable; diff --git a/classes/create_table.js.map b/classes/create_table.js.map index 6d40b1fc..c54f0d3a 100644 --- a/classes/create_table.js.map +++ b/classes/create_table.js.map @@ -1 +1 @@ -{"version":3,"file":"create_table.js","sourceRoot":"","sources":["create_table.ts"],"names":[],"mappings":"AAEA;IACI,qBAAoB,SAA2B;QAA3B,cAAS,GAAT,SAAS,CAAkB;IAAG,CAAC;IAEnD,mCAAa,GAAb,UAAc,QAAyB;QACnC,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAExC,EAAE,CAAC,SAAS,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC;QACjC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IAED,mCAAa,GAAb,UAAc,OAAwB;QAClC,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACxC,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;QAEhC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IACL,kBAAC;AAAD,CAAC,AAhBD,IAgBC"} \ No newline at end of file +{"version":3,"file":"create_table.js","sourceRoot":"","sources":["create_table.ts"],"names":[],"mappings":"AAEA;IACI,qBAAoB,SAA2B;QAA3B,cAAS,GAAT,SAAS,CAAkB;IAAG,CAAC;IAEnD,4CAAsB,GAAtB,UAAuB,OAAwB;QAC3C,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACxC,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;QAEhC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IACL,kBAAC;AAAD,CAAC,AATD,IASC"} \ No newline at end of file diff --git a/classes/create_table.ts b/classes/create_table.ts index 69b4671f..5a938603 100644 --- a/classes/create_table.ts +++ b/classes/create_table.ts @@ -1,18 +1,12 @@ import { HasFormatMethod } from "../interfaces/hasformatmethod.js"; +// create table elements and render in browser export class createTable { constructor(private container: HTMLTableElement) {} - renderHeading(headings: HasFormatMethod){ + constructTableHeadings(element: HasFormatMethod){ const tr = document.createElement('tr'); - - tr.innerHTML = headings.format(); - this.container.append(tr); - } - - renderRecords(records: HasFormatMethod){ - const tr = document.createElement('tr'); - tr.innerHTML = records.format(); + tr.innerHTML = element.format(); this.container.append(tr); } diff --git a/httpreq.js b/classes/httpreq.js similarity index 86% rename from httpreq.js rename to classes/httpreq.js index bfb631cc..b0cb6cf5 100644 --- a/httpreq.js +++ b/classes/httpreq.js @@ -2,7 +2,8 @@ export function request(action, method, callback) { var x = {}; if (window.XMLHttpRequest) x = new XMLHttpRequest(); - // else x = new ActiveXObject('Microsoft.XMLHTTP'); + else + x = ActiveXObject('Microsoft.XMLHTTP'); x.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { callback(this.responseText); diff --git a/classes/httpreq.js.map b/classes/httpreq.js.map new file mode 100644 index 00000000..26cba81a --- /dev/null +++ b/classes/httpreq.js.map @@ -0,0 +1 @@ +{"version":3,"file":"httpreq.js","sourceRoot":"","sources":["httpreq.ts"],"names":[],"mappings":"AACA,MAAM,UAAU,OAAO,CAAC,MAAc,EAAE,MAAc,EAAE,QAAa;IACnE,IAAI,CAAC,GAAQ,EAAE,CAAC;IAChB,IAAI,MAAM,CAAC,cAAc;QAAE,CAAC,GAAG,IAAI,cAAc,EAAE,CAAC;;QAC/C,CAAC,GAAG,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC5C,CAAC,CAAC,kBAAkB,GAAG;QACnB,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,GAAG,EAAE;YAC5C,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;IACL,CAAC,CAAC;IAEF,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC,IAAI,EAAE,CAAC;AACX,CAAC"} \ No newline at end of file diff --git a/httpreq.ts b/classes/httpreq.ts similarity index 71% rename from httpreq.ts rename to classes/httpreq.ts index 1f3ecf1a..58b638f3 100644 --- a/httpreq.ts +++ b/classes/httpreq.ts @@ -1,7 +1,9 @@ +// http request and response handling +declare var ActiveXObject: (type: string) => void; export function request(action: string, method: string, callback: any) { var x: any = {}; if (window.XMLHttpRequest) x = new XMLHttpRequest(); - // else x = new ActiveXObject('Microsoft.XMLHTTP'); + else x = ActiveXObject('Microsoft.XMLHTTP'); x.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { callback(this.responseText); diff --git a/classes/record_struct.js b/classes/record_struct.js index 9cd85511..e3b38d4a 100644 --- a/classes/record_struct.js +++ b/classes/record_struct.js @@ -1,19 +1,20 @@ var recordStruct = /** @class */ (function () { - function recordStruct(id, a, b, c, d, e, f, g, h, i, j) { - this.id = id; - this.A = a; - this.B = b; - this.C = c; - this.D = d; - this.E = e; - this.F = f; - this.G = g; - this.H = h; - this.I = i; - this.J = j; + function recordStruct(recordsStr) { + this.returnStr = ""; + var table = document.querySelector('table'); + var myArr = JSON.parse(recordsStr); + for (var i = 0; i < myArr.length; i++) { + for (var j = 0; j < myArr[i].length; j++) { + this.returnStr = this.returnStr + "" + myArr[i][j] + ""; + } + var tr = document.createElement('tr'); + tr.innerHTML = this.returnStr; + table.append(tr); + this.returnStr = ""; + } } recordStruct.prototype.format = function () { - return "" + this.id + " " + this.A + " " + this.B + " " + this.C + " " + this.D + " " + this.E + " " + this.F + " " + this.G + " " + this.H + " " + this.I + " " + this.J + ""; + return this.returnStr; }; return recordStruct; }()); diff --git a/classes/record_struct.js.map b/classes/record_struct.js.map index 9d641236..d999eb20 100644 --- a/classes/record_struct.js.map +++ b/classes/record_struct.js.map @@ -1 +1 @@ -{"version":3,"file":"record_struct.js","sourceRoot":"","sources":["record_struct.ts"],"names":[],"mappings":"AAEA;IAaC,sBAAa,EAAU,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS;QACpI,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IACZ,CAAC;IAED,6BAAM,GAAN;QACC,OAAO,SAAO,IAAI,CAAC,EAAE,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,UAAO,CAAA;IAC3N,CAAC;IACF,mBAAC;AAAD,CAAC,AA9BD,IA8BC"} \ No newline at end of file +{"version":3,"file":"record_struct.js","sourceRoot":"","sources":["record_struct.ts"],"names":[],"mappings":"AAEA;IAGC,sBAAa,UAAkB;QAFvB,cAAS,GAAW,EAAE,CAAC;QAG9B,IAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QAC/C,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAErC,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;YAC/B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,MAAM,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,OAAO,CAAC;aAC7D;YACD,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACxC,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAC9B,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACjB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACpB;IACF,CAAC;IAED,6BAAM,GAAN;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,mBAAC;AAAD,CAAC,AArBD,IAqBC"} \ No newline at end of file diff --git a/classes/record_struct.ts b/classes/record_struct.ts index 605f36ca..bef93d8c 100644 --- a/classes/record_struct.ts +++ b/classes/record_struct.ts @@ -1,33 +1,25 @@ import { HasFormatMethod } from "../interfaces/hasformatmethod.js"; +// generate html string for table rows data and render in browser export class recordStruct implements HasFormatMethod { - private id: string; - private A: string; - private B: string; - private C: string; - private D: string; - private E: string; - private F: string; - private G: string; - private H: string; - private I: string; - private J: string; - - constructor( id: string, a: string, b: string, c: string, d: string, e: string, f: string, g: string, h: string, i: string, j: string ){ - this.id = id; - this.A = a; - this.B = b; - this.C = c; - this.D = d; - this.E = e; - this.F = f; - this.G = g; - this.H = h; - this.I = i; - this.J = j; + private returnStr: string = ""; + + constructor( recordsStr: string ){ + const table = document.querySelector('table')!; + const myArr = JSON.parse(recordsStr); + + for(let i=0;i"+myArr[i][j]+""; + } + const tr = document.createElement('tr'); + tr.innerHTML = this.returnStr; + table.append(tr); + this.returnStr = ""; + } } format() { - return `${this.id} ${this.A} ${this.B} ${this.C} ${this.D} ${this.E} ${this.F} ${this.G} ${this.H} ${this.I} ${this.J}` + return this.returnStr; } } \ No newline at end of file diff --git a/classes/table_headings.js b/classes/table_headings.js index d69a50bb..ee8060a9 100644 --- a/classes/table_headings.js +++ b/classes/table_headings.js @@ -1,19 +1,13 @@ var tableHeadings = /** @class */ (function () { - function tableHeadings(id, a, b, c, d, e, f, g, h, i, j) { - this.id = id; - this.A = a; - this.B = b; - this.C = c; - this.D = d; - this.E = e; - this.F = f; - this.G = g; - this.H = h; - this.I = i; - this.J = j; + function tableHeadings(headingsStr) { + this.returnStr = ""; + var myArr = JSON.parse(headingsStr); + for (var i = 0; i < myArr.length; i++) { + this.returnStr = this.returnStr + "" + myArr[i] + ""; + } } tableHeadings.prototype.format = function () { - return "" + this.id + " " + this.A + " " + this.B + " " + this.C + " " + this.D + " " + this.E + " " + this.F + " " + this.G + " " + this.H + " " + this.I + " " + this.J + ""; + return this.returnStr; }; return tableHeadings; }()); diff --git a/classes/table_headings.js.map b/classes/table_headings.js.map index efe87eba..8f8af037 100644 --- a/classes/table_headings.js.map +++ b/classes/table_headings.js.map @@ -1 +1 @@ -{"version":3,"file":"table_headings.js","sourceRoot":"","sources":["table_headings.ts"],"names":[],"mappings":"AAEA;IAaC,uBAAa,EAAU,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,CAAS;QACpI,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACX,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IACZ,CAAC;IAED,8BAAM,GAAN;QACC,OAAO,SAAO,IAAI,CAAC,EAAE,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,kBAAa,IAAI,CAAC,CAAC,UAAO,CAAA;IAC3N,CAAC;IACF,oBAAC;AAAD,CAAC,AA9BD,IA8BC"} \ No newline at end of file +{"version":3,"file":"table_headings.js","sourceRoot":"","sources":["table_headings.ts"],"names":[],"mappings":"AAEA;IAGC,uBAAa,WAAmB;QAFxB,cAAS,GAAW,EAAE,CAAC;QAI9B,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACtC,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;YAC9B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,MAAM,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,OAAO,CAAC;SAC1D;IACF,CAAC;IAED,8BAAM,GAAN;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,oBAAC;AAAD,CAAC,AAdD,IAcC"} \ No newline at end of file diff --git a/classes/table_headings.ts b/classes/table_headings.ts index 30124a5f..3344e571 100644 --- a/classes/table_headings.ts +++ b/classes/table_headings.ts @@ -1,33 +1,18 @@ import { HasFormatMethod } from "../interfaces/hasformatmethod.js"; +// generate html string for table headings data and render export class tableHeadings implements HasFormatMethod { - private id: string; - private A: string; - private B: string; - private C: string; - private D: string; - private E: string; - private F: string; - private G: string; - private H: string; - private I: string; - private J: string; + private returnStr: string = ""; - constructor( id: string, a: string, b: string, c: string, d: string, e: string, f: string, g: string, h: string, i: string, j: string ){ - this.id = id; - this.A = a; - this.B = b; - this.C = c; - this.D = d; - this.E = e; - this.F = f; - this.G = g; - this.H = h; - this.I = i; - this.J = j; + constructor( headingsStr: string){ + + const myArr = JSON.parse(headingsStr); + for(let i=0;i"+myArr[i]+""; + } } format() { - return `${this.id} ${this.A} ${this.B} ${this.C} ${this.D} ${this.E} ${this.F} ${this.G} ${this.H} ${this.I} ${this.J}` + return this.returnStr; } } \ No newline at end of file diff --git a/httpreq.js.map b/httpreq.js.map deleted file mode 100644 index 63374d8d..00000000 --- a/httpreq.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"httpreq.js","sourceRoot":"","sources":["httpreq.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,OAAO,CAAC,MAAc,EAAE,MAAc,EAAE,QAAa;IACnE,IAAI,CAAC,GAAQ,EAAE,CAAC;IAChB,IAAI,MAAM,CAAC,cAAc;QAAE,CAAC,GAAG,IAAI,cAAc,EAAE,CAAC;IACpD,mDAAmD;IACnD,CAAC,CAAC,kBAAkB,GAAG;QACnB,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,GAAG,EAAE;YAC5C,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;IACL,CAAC,CAAC;IAEF,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC,IAAI,EAAE,CAAC;AACX,CAAC"} \ No newline at end of file diff --git a/index.html b/index.html index 0d550d52..311991d2 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@

JS Onboard Project

-
+


diff --git a/interfaces/hasformatmethod.ts b/interfaces/hasformatmethod.ts index 847239b5..ac80dd56 100644 --- a/interfaces/hasformatmethod.ts +++ b/interfaces/hasformatmethod.ts @@ -1,3 +1,4 @@ +// interface to ensure methods implementing this interface contain a format method that returns a string (the string generated for the elements inside the table) export interface HasFormatMethod { format(): string; } \ No newline at end of file From 2cd6d76c0d9670f5ac0fa247b0ed9d0f4f424ac4 Mon Sep 17 00:00:00 2001 From: geraldtivatyi Date: Tue, 8 Jun 2021 23:34:46 +0200 Subject: [PATCH 09/47] Edit code to meet code style requirements --- app.ts | 33 +++++++++++-------- classes/create_table.js | 13 -------- classes/create_table.js.map | 1 - classes/httpreq.js.map | 1 - classes/record_struct.js | 22 ------------- classes/record_struct.js.map | 1 - classes/render_headings.js | 14 ++++++++ classes/render_headings.js.map | 1 + .../{create_table.ts => render_headings.ts} | 6 ++-- classes/render_rows.js | 24 ++++++++++++++ classes/render_rows.js.map | 1 + classes/{record_struct.ts => render_rows.ts} | 15 +++++---- classes/table_headings.js | 14 ++++---- classes/table_headings.js.map | 2 +- classes/table_headings.ts | 14 ++++---- {classes => httprequests}/httpreq.js | 2 +- httprequests/httpreq.js.map | 1 + {classes => httprequests}/httpreq.ts | 4 +-- index.html | 2 +- interfaces/hasformatmethod.ts | 4 +-- 20 files changed, 93 insertions(+), 82 deletions(-) delete mode 100644 classes/create_table.js delete mode 100644 classes/create_table.js.map delete mode 100644 classes/httpreq.js.map delete mode 100644 classes/record_struct.js delete mode 100644 classes/record_struct.js.map create mode 100644 classes/render_headings.js create mode 100644 classes/render_headings.js.map rename classes/{create_table.ts => render_headings.ts} (67%) create mode 100644 classes/render_rows.js create mode 100644 classes/render_rows.js.map rename classes/{record_struct.ts => render_rows.ts} (54%) rename {classes => httprequests}/httpreq.js (96%) create mode 100644 httprequests/httpreq.js.map rename {classes => httprequests}/httpreq.ts (85%) diff --git a/app.ts b/app.ts index cc1377f8..b8713cfd 100644 --- a/app.ts +++ b/app.ts @@ -1,17 +1,17 @@ -import { tableHeadings } from "./classes/table_headings.js"; -import { recordStruct } from "./classes/record_struct.js"; -import { createTable } from "./classes/create_table.js"; +import { TableHeadingString } from "./classes/table_headings.js"; +import { RenderTableRows } from "./classes/render_rows.js"; +import { RenderTableHeading } from "./classes/render_headings.js"; import { HasFormatMethod } from "./interfaces/hasformatmethod.js"; -import { request } from './classes/httpreq.js'; +import { request } from './httprequests/httpreq.js'; //Accessing form data -const form = document.querySelector('#form') as HTMLFormElement; -const fromID = document.querySelector('#fromID') as HTMLInputElement; -const toID = document.querySelector('#toID') as HTMLInputElement; +let form = document.querySelector('#form') as HTMLFormElement; +let fromID = document.querySelector('#fromID') as HTMLInputElement; +let toID = document.querySelector('#toID') as HTMLInputElement; // Instantiate grid table to append innerHTML -let tble = new createTable(document.querySelector('#table') as HTMLTableElement); +let tble = new RenderTableHeading(document.querySelector('#table') as HTMLTableElement); // Strings holding heading and records data requested from server let headingsStr: string; @@ -19,13 +19,14 @@ let recordsStr: string; // Listen for submission in form and use inputs to request data from backend form.addEventListener('submit', (e: Event) => { - document.getElementById("table")!.innerHTML = ""; + let t = el("table") as HTMLTableElement; + t.innerHTML = ""; // empty table every time a new submission is made e.preventDefault(); // Fetch table headings from server request( "/columns", "GET", - function(r: any) { + function(r: string) { try { headingsStr = r; // set response from server } catch(err) { @@ -36,10 +37,10 @@ form.addEventListener('submit', (e: Event) => { ); // Fetch records from server - let url: string = "/records?from="+fromID.valueAsNumber+"&to="+toID.valueAsNumber; + let url = "/records?from="+fromID.valueAsNumber+"&to="+toID.valueAsNumber; request( url, "GET", - function(r: any) { + function(r: string) { try { recordsStr = r; // set response from server generateTable(); // call function to render table in browser @@ -56,8 +57,12 @@ form.addEventListener('submit', (e: Event) => { function generateTable(){ let interfaceHeading: HasFormatMethod; // variable of type interface used in creating table headings let interfaceRecords: HasFormatMethod; // variable of type interface used in creating table rows - interfaceHeading = new tableHeadings(headingsStr); // call method to generate string containing table heading element + interfaceHeading = new TableHeadingString(headingsStr); // call method to generate string containing table heading element tble.constructTableHeadings(interfaceHeading); // call method to render table headings element in browser - interfaceRecords = new recordStruct(recordsStr); // call method to generate string containing table row elements + interfaceRecords = new RenderTableRows(recordsStr); // call method to generate string containing table row elements +} + +function el(s: string) { + return document.getElementById(s); } diff --git a/classes/create_table.js b/classes/create_table.js deleted file mode 100644 index 42b3ed86..00000000 --- a/classes/create_table.js +++ /dev/null @@ -1,13 +0,0 @@ -var createTable = /** @class */ (function () { - function createTable(container) { - this.container = container; - } - createTable.prototype.constructTableHeadings = function (element) { - var tr = document.createElement('tr'); - tr.innerHTML = element.format(); - this.container.append(tr); - }; - return createTable; -}()); -export { createTable }; -//# sourceMappingURL=create_table.js.map \ No newline at end of file diff --git a/classes/create_table.js.map b/classes/create_table.js.map deleted file mode 100644 index c54f0d3a..00000000 --- a/classes/create_table.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"create_table.js","sourceRoot":"","sources":["create_table.ts"],"names":[],"mappings":"AAEA;IACI,qBAAoB,SAA2B;QAA3B,cAAS,GAAT,SAAS,CAAkB;IAAG,CAAC;IAEnD,4CAAsB,GAAtB,UAAuB,OAAwB;QAC3C,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACxC,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;QAEhC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IACL,kBAAC;AAAD,CAAC,AATD,IASC"} \ No newline at end of file diff --git a/classes/httpreq.js.map b/classes/httpreq.js.map deleted file mode 100644 index 26cba81a..00000000 --- a/classes/httpreq.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"httpreq.js","sourceRoot":"","sources":["httpreq.ts"],"names":[],"mappings":"AACA,MAAM,UAAU,OAAO,CAAC,MAAc,EAAE,MAAc,EAAE,QAAa;IACnE,IAAI,CAAC,GAAQ,EAAE,CAAC;IAChB,IAAI,MAAM,CAAC,cAAc;QAAE,CAAC,GAAG,IAAI,cAAc,EAAE,CAAC;;QAC/C,CAAC,GAAG,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC5C,CAAC,CAAC,kBAAkB,GAAG;QACnB,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,GAAG,EAAE;YAC5C,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;IACL,CAAC,CAAC;IAEF,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC,IAAI,EAAE,CAAC;AACX,CAAC"} \ No newline at end of file diff --git a/classes/record_struct.js b/classes/record_struct.js deleted file mode 100644 index e3b38d4a..00000000 --- a/classes/record_struct.js +++ /dev/null @@ -1,22 +0,0 @@ -var recordStruct = /** @class */ (function () { - function recordStruct(recordsStr) { - this.returnStr = ""; - var table = document.querySelector('table'); - var myArr = JSON.parse(recordsStr); - for (var i = 0; i < myArr.length; i++) { - for (var j = 0; j < myArr[i].length; j++) { - this.returnStr = this.returnStr + "" + myArr[i][j] + ""; - } - var tr = document.createElement('tr'); - tr.innerHTML = this.returnStr; - table.append(tr); - this.returnStr = ""; - } - } - recordStruct.prototype.format = function () { - return this.returnStr; - }; - return recordStruct; -}()); -export { recordStruct }; -//# sourceMappingURL=record_struct.js.map \ No newline at end of file diff --git a/classes/record_struct.js.map b/classes/record_struct.js.map deleted file mode 100644 index d999eb20..00000000 --- a/classes/record_struct.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"record_struct.js","sourceRoot":"","sources":["record_struct.ts"],"names":[],"mappings":"AAEA;IAGC,sBAAa,UAAkB;QAFvB,cAAS,GAAW,EAAE,CAAC;QAG9B,IAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QAC/C,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAErC,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;YAC/B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAClC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,MAAM,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,OAAO,CAAC;aAC7D;YACD,IAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACxC,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAC9B,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACjB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACpB;IACF,CAAC;IAED,6BAAM,GAAN;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,mBAAC;AAAD,CAAC,AArBD,IAqBC"} \ No newline at end of file diff --git a/classes/render_headings.js b/classes/render_headings.js new file mode 100644 index 00000000..1246c1c2 --- /dev/null +++ b/classes/render_headings.js @@ -0,0 +1,14 @@ +// create table elements and render in browser +var RenderTableHeading = /** @class */ (function () { + function RenderTableHeading(container) { + this.container = container; + } + RenderTableHeading.prototype.constructTableHeadings = function (element) { + var tr = document.createElement('tr'); + tr.innerHTML = element.internalFormat(); + this.container.append(tr); + }; + return RenderTableHeading; +}()); +export { RenderTableHeading }; +//# sourceMappingURL=render_headings.js.map \ No newline at end of file diff --git a/classes/render_headings.js.map b/classes/render_headings.js.map new file mode 100644 index 00000000..947cb6c6 --- /dev/null +++ b/classes/render_headings.js.map @@ -0,0 +1 @@ +{"version":3,"file":"render_headings.js","sourceRoot":"","sources":["render_headings.ts"],"names":[],"mappings":"AAEA,8CAA8C;AAC9C;IACI,4BAAoB,SAA2B;QAA3B,cAAS,GAAT,SAAS,CAAkB;IAAG,CAAC;IAEnD,mDAAsB,GAAtB,UAAuB,OAAwB;QAC3C,IAAI,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACtC,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC;QAExC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IACL,yBAAC;AAAD,CAAC,AATD,IASC"} \ No newline at end of file diff --git a/classes/create_table.ts b/classes/render_headings.ts similarity index 67% rename from classes/create_table.ts rename to classes/render_headings.ts index 5a938603..6274895e 100644 --- a/classes/create_table.ts +++ b/classes/render_headings.ts @@ -1,12 +1,12 @@ import { HasFormatMethod } from "../interfaces/hasformatmethod.js"; // create table elements and render in browser -export class createTable { +export class RenderTableHeading { constructor(private container: HTMLTableElement) {} constructTableHeadings(element: HasFormatMethod){ - const tr = document.createElement('tr'); - tr.innerHTML = element.format(); + let tr = document.createElement('tr'); + tr.innerHTML = element.internalFormat(); this.container.append(tr); } diff --git a/classes/render_rows.js b/classes/render_rows.js new file mode 100644 index 00000000..c19d0c1f --- /dev/null +++ b/classes/render_rows.js @@ -0,0 +1,24 @@ +// generate html string for table rows data and render in browser +var RenderTableRows = /** @class */ (function () { + function RenderTableRows(recordsStr) { + this.returnStr = ""; + var table = document.querySelector('#table'); + var myArr = JSON.parse(recordsStr); + for (var i = 0; i < myArr.length; i++) { + for (var j = 0; j < myArr[i].length; j++) { + this.returnStr += + "" + myArr[i][j] + ""; + } + var tr = document.createElement('tr'); + tr.innerHTML = this.returnStr; + table.append(tr); + this.returnStr = ""; + } + } + RenderTableRows.prototype.internalFormat = function () { + return this.returnStr; + }; + return RenderTableRows; +}()); +export { RenderTableRows }; +//# sourceMappingURL=render_rows.js.map \ No newline at end of file diff --git a/classes/render_rows.js.map b/classes/render_rows.js.map new file mode 100644 index 00000000..a3f75a4f --- /dev/null +++ b/classes/render_rows.js.map @@ -0,0 +1 @@ +{"version":3,"file":"render_rows.js","sourceRoot":"","sources":["render_rows.ts"],"names":[],"mappings":"AAEA,iEAAiE;AACjE;IAGC,yBAAa,UAAkB;QAFvB,cAAS,GAAG,EAAE,CAAC;QAGtB,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAqB,CAAC;QACjE,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAEnC,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;YAC/B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAClC,IAAI,CAAC,SAAS;oBACd,MAAM,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,OAAO,CAAC;aAC3B;YACD,IAAI,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACtC,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAC9B,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACjB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACpB;IACF,CAAC;IAED,wCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,sBAAC;AAAD,CAAC,AAtBD,IAsBC"} \ No newline at end of file diff --git a/classes/record_struct.ts b/classes/render_rows.ts similarity index 54% rename from classes/record_struct.ts rename to classes/render_rows.ts index bef93d8c..3d2bf170 100644 --- a/classes/record_struct.ts +++ b/classes/render_rows.ts @@ -1,25 +1,26 @@ import { HasFormatMethod } from "../interfaces/hasformatmethod.js"; // generate html string for table rows data and render in browser -export class recordStruct implements HasFormatMethod { - private returnStr: string = ""; +export class RenderTableRows implements HasFormatMethod { + private returnStr = ""; constructor( recordsStr: string ){ - const table = document.querySelector('table')!; - const myArr = JSON.parse(recordsStr); + let table = document.querySelector('#table') as HTMLTableElement; + let myArr = JSON.parse(recordsStr); for(let i=0;i"+myArr[i][j]+""; + this.returnStr += + ""+myArr[i][j]+""; } - const tr = document.createElement('tr'); + let tr = document.createElement('tr'); tr.innerHTML = this.returnStr; table.append(tr); this.returnStr = ""; } } - format() { + internalFormat() { return this.returnStr; } } \ No newline at end of file diff --git a/classes/table_headings.js b/classes/table_headings.js index ee8060a9..6bf3b282 100644 --- a/classes/table_headings.js +++ b/classes/table_headings.js @@ -1,15 +1,17 @@ -var tableHeadings = /** @class */ (function () { - function tableHeadings(headingsStr) { +// generate html string for table headings data +var TableHeadingString = /** @class */ (function () { + function TableHeadingString(headingsStr) { this.returnStr = ""; var myArr = JSON.parse(headingsStr); for (var i = 0; i < myArr.length; i++) { - this.returnStr = this.returnStr + "" + myArr[i] + ""; + this.returnStr += + "" + myArr[i] + ""; } } - tableHeadings.prototype.format = function () { + TableHeadingString.prototype.internalFormat = function () { return this.returnStr; }; - return tableHeadings; + return TableHeadingString; }()); -export { tableHeadings }; +export { TableHeadingString }; //# sourceMappingURL=table_headings.js.map \ No newline at end of file diff --git a/classes/table_headings.js.map b/classes/table_headings.js.map index 8f8af037..0f0d3a67 100644 --- a/classes/table_headings.js.map +++ b/classes/table_headings.js.map @@ -1 +1 @@ -{"version":3,"file":"table_headings.js","sourceRoot":"","sources":["table_headings.ts"],"names":[],"mappings":"AAEA;IAGC,uBAAa,WAAmB;QAFxB,cAAS,GAAW,EAAE,CAAC;QAI9B,IAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACtC,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;YAC9B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,MAAM,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,OAAO,CAAC;SAC1D;IACF,CAAC;IAED,8BAAM,GAAN;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,oBAAC;AAAD,CAAC,AAdD,IAcC"} \ No newline at end of file +{"version":3,"file":"table_headings.js","sourceRoot":"","sources":["table_headings.ts"],"names":[],"mappings":"AAEA,+CAA+C;AAC/C;IAGC,4BAAa,WAAmB;QAFxB,cAAS,GAAG,EAAE,CAAC;QAGtB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACpC,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;YAC9B,IAAI,CAAC,SAAS;gBACd,MAAM,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,OAAO,CAAC;SACxB;IACF,CAAC;IAED,2CAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,yBAAC;AAAD,CAAC,AAdD,IAcC"} \ No newline at end of file diff --git a/classes/table_headings.ts b/classes/table_headings.ts index 3344e571..8601a73d 100644 --- a/classes/table_headings.ts +++ b/classes/table_headings.ts @@ -1,18 +1,18 @@ import { HasFormatMethod } from "../interfaces/hasformatmethod.js"; -// generate html string for table headings data and render -export class tableHeadings implements HasFormatMethod { - private returnStr: string = ""; +// generate html string for table headings data +export class TableHeadingString implements HasFormatMethod { + private returnStr = ""; constructor( headingsStr: string){ - - const myArr = JSON.parse(headingsStr); + let myArr = JSON.parse(headingsStr); for(let i=0;i"+myArr[i]+""; + this.returnStr += + ""+myArr[i]+""; } } - format() { + internalFormat() { return this.returnStr; } } \ No newline at end of file diff --git a/classes/httpreq.js b/httprequests/httpreq.js similarity index 96% rename from classes/httpreq.js rename to httprequests/httpreq.js index b0cb6cf5..74255b85 100644 --- a/classes/httpreq.js +++ b/httprequests/httpreq.js @@ -1,5 +1,5 @@ export function request(action, method, callback) { - var x = {}; + var x; if (window.XMLHttpRequest) x = new XMLHttpRequest(); else diff --git a/httprequests/httpreq.js.map b/httprequests/httpreq.js.map new file mode 100644 index 00000000..d1dea866 --- /dev/null +++ b/httprequests/httpreq.js.map @@ -0,0 +1 @@ +{"version":3,"file":"httpreq.js","sourceRoot":"","sources":["httpreq.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,OAAO,CAAC,MAAc,EAAE,MAAc,EAAE,QAAa;IACnE,IAAI,CAAM,CAAC;IACX,IAAI,MAAM,CAAC,cAAc;QAAE,CAAC,GAAG,IAAI,cAAc,EAAE,CAAC;;QAC/C,CAAC,GAAG,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC5C,CAAC,CAAC,kBAAkB,GAAG;QACnB,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,GAAG,EAAE;YAC5C,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;IACL,CAAC,CAAC;IAEF,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC,IAAI,EAAE,CAAC;AACX,CAAC"} \ No newline at end of file diff --git a/classes/httpreq.ts b/httprequests/httpreq.ts similarity index 85% rename from classes/httpreq.ts rename to httprequests/httpreq.ts index 58b638f3..be89a52c 100644 --- a/classes/httpreq.ts +++ b/httprequests/httpreq.ts @@ -1,7 +1,7 @@ // http request and response handling -declare var ActiveXObject: (type: string) => void; +declare let ActiveXObject: (type: string) => void; export function request(action: string, method: string, callback: any) { - var x: any = {}; + let x: any; if (window.XMLHttpRequest) x = new XMLHttpRequest(); else x = ActiveXObject('Microsoft.XMLHTTP'); x.onreadystatechange = function () { diff --git a/index.html b/index.html index 311991d2..8e413245 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,7 @@

JS Onboard Project

-
+
diff --git a/interfaces/hasformatmethod.ts b/interfaces/hasformatmethod.ts index ac80dd56..7990a4c5 100644 --- a/interfaces/hasformatmethod.ts +++ b/interfaces/hasformatmethod.ts @@ -1,4 +1,4 @@ -// interface to ensure methods implementing this interface contain a format method that returns a string (the string generated for the elements inside the table) +// interface to ensure methods implementing this interface contain a internalFormat method that returns a string (the string generated for the elements inside the table) export interface HasFormatMethod { - format(): string; + internalFormat(): string; } \ No newline at end of file From 0a3474b0860e7f488c56890b6778a054b3d33ede Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Wed, 9 Jun 2021 16:04:50 +0200 Subject: [PATCH 10/47] fix navigation --- app.ts | 4 +-- classes/render_headings.js | 7 ++-- classes/render_headings.js.map | 2 +- classes/render_headings.ts | 9 ++--- classes/render_rows.js | 9 ++--- classes/render_rows.js.map | 2 +- classes/render_rows.ts | 11 +++--- classes/table_headings.js | 2 +- classes/table_headings.js.map | 2 +- classes/table_headings.ts | 2 +- index.html | 10 +++--- main.css | 65 ++++++++++++++++++++++++---------- 12 files changed, 78 insertions(+), 47 deletions(-) diff --git a/app.ts b/app.ts index b8713cfd..f9248a8f 100644 --- a/app.ts +++ b/app.ts @@ -11,7 +11,7 @@ let fromID = document.querySelector('#fromID') as HTMLInputElement; let toID = document.querySelector('#toID') as HTMLInputElement; // Instantiate grid table to append innerHTML -let tble = new RenderTableHeading(document.querySelector('#table') as HTMLTableElement); +let tble = new RenderTableHeading(document.querySelector('#table') as HTMLDivElement); // Strings holding heading and records data requested from server let headingsStr: string; @@ -19,7 +19,7 @@ let recordsStr: string; // Listen for submission in form and use inputs to request data from backend form.addEventListener('submit', (e: Event) => { - let t = el("table") as HTMLTableElement; + let t = document.querySelector('#table') as HTMLDivElement; t.innerHTML = ""; // empty table every time a new submission is made e.preventDefault(); diff --git a/classes/render_headings.js b/classes/render_headings.js index 1246c1c2..3fabc663 100644 --- a/classes/render_headings.js +++ b/classes/render_headings.js @@ -4,9 +4,10 @@ var RenderTableHeading = /** @class */ (function () { this.container = container; } RenderTableHeading.prototype.constructTableHeadings = function (element) { - var tr = document.createElement('tr'); - tr.innerHTML = element.internalFormat(); - this.container.append(tr); + var div = document.createElement('div'); + div.innerHTML = element.internalFormat(); + div.className = "tablecell"; + this.container.append(div); }; return RenderTableHeading; }()); diff --git a/classes/render_headings.js.map b/classes/render_headings.js.map index 947cb6c6..40dc5bc4 100644 --- a/classes/render_headings.js.map +++ b/classes/render_headings.js.map @@ -1 +1 @@ -{"version":3,"file":"render_headings.js","sourceRoot":"","sources":["render_headings.ts"],"names":[],"mappings":"AAEA,8CAA8C;AAC9C;IACI,4BAAoB,SAA2B;QAA3B,cAAS,GAAT,SAAS,CAAkB;IAAG,CAAC;IAEnD,mDAAsB,GAAtB,UAAuB,OAAwB;QAC3C,IAAI,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACtC,EAAE,CAAC,SAAS,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC;QAExC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;IACL,yBAAC;AAAD,CAAC,AATD,IASC"} \ No newline at end of file +{"version":3,"file":"render_headings.js","sourceRoot":"","sources":["render_headings.ts"],"names":[],"mappings":"AAEA,8CAA8C;AAC9C;IACI,4BAAoB,SAAyB;QAAzB,cAAS,GAAT,SAAS,CAAgB;IAAG,CAAC;IAEjD,mDAAsB,GAAtB,UAAuB,OAAwB;QAC3C,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACxC,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC;QACzC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;QAE5B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC/B,CAAC;IACL,yBAAC;AAAD,CAAC,AAVD,IAUC"} \ No newline at end of file diff --git a/classes/render_headings.ts b/classes/render_headings.ts index 6274895e..51cc8044 100644 --- a/classes/render_headings.ts +++ b/classes/render_headings.ts @@ -2,12 +2,13 @@ import { HasFormatMethod } from "../interfaces/hasformatmethod.js"; // create table elements and render in browser export class RenderTableHeading { - constructor(private container: HTMLTableElement) {} + constructor(private container: HTMLDivElement) {} constructTableHeadings(element: HasFormatMethod){ - let tr = document.createElement('tr'); - tr.innerHTML = element.internalFormat(); + let div = document.createElement('div'); + div.innerHTML = element.internalFormat(); + div.className = "tablecell"; - this.container.append(tr); + this.container.append(div); } } \ No newline at end of file diff --git a/classes/render_rows.js b/classes/render_rows.js index c19d0c1f..e8ae6b51 100644 --- a/classes/render_rows.js +++ b/classes/render_rows.js @@ -7,11 +7,12 @@ var RenderTableRows = /** @class */ (function () { for (var i = 0; i < myArr.length; i++) { for (var j = 0; j < myArr[i].length; j++) { this.returnStr += - "" + myArr[i][j] + ""; + "

" + myArr[i][j] + "

"; } - var tr = document.createElement('tr'); - tr.innerHTML = this.returnStr; - table.append(tr); + var div = document.createElement('div'); + div.innerHTML = this.returnStr; + div.className = "tablecell"; + table.append(div); this.returnStr = ""; } } diff --git a/classes/render_rows.js.map b/classes/render_rows.js.map index a3f75a4f..0bc177d9 100644 --- a/classes/render_rows.js.map +++ b/classes/render_rows.js.map @@ -1 +1 @@ -{"version":3,"file":"render_rows.js","sourceRoot":"","sources":["render_rows.ts"],"names":[],"mappings":"AAEA,iEAAiE;AACjE;IAGC,yBAAa,UAAkB;QAFvB,cAAS,GAAG,EAAE,CAAC;QAGtB,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAqB,CAAC;QACjE,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAEnC,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;YAC/B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAClC,IAAI,CAAC,SAAS;oBACd,MAAM,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,OAAO,CAAC;aAC3B;YACD,IAAI,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACtC,EAAE,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAC9B,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACjB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACpB;IACF,CAAC;IAED,wCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,sBAAC;AAAD,CAAC,AAtBD,IAsBC"} \ No newline at end of file +{"version":3,"file":"render_rows.js","sourceRoot":"","sources":["render_rows.ts"],"names":[],"mappings":"AAEA,iEAAiE;AACjE;IAGC,yBAAa,UAAkB;QAFvB,cAAS,GAAG,EAAE,CAAC;QAGtB,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAmB,CAAC;QAC/D,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAEnC,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;YAC/B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAClC,IAAI,CAAC,SAAS;oBACd,UAAU,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,YAAY,CAAC;aACpC;YACD,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAC/B,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5B,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAClB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACpB;IACF,CAAC;IAED,wCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,sBAAC;AAAD,CAAC,AAvBD,IAuBC"} \ No newline at end of file diff --git a/classes/render_rows.ts b/classes/render_rows.ts index 3d2bf170..f6f058d3 100644 --- a/classes/render_rows.ts +++ b/classes/render_rows.ts @@ -5,17 +5,18 @@ export class RenderTableRows implements HasFormatMethod { private returnStr = ""; constructor( recordsStr: string ){ - let table = document.querySelector('#table') as HTMLTableElement; + let table = document.querySelector('#table') as HTMLDivElement; let myArr = JSON.parse(recordsStr); for(let i=0;i"+myArr[i][j]+""; + "

"+myArr[i][j]+"

"; } - let tr = document.createElement('tr'); - tr.innerHTML = this.returnStr; - table.append(tr); + let div = document.createElement('div'); + div.innerHTML = this.returnStr; + div.className = "tablecell"; + table.append(div); this.returnStr = ""; } } diff --git a/classes/table_headings.js b/classes/table_headings.js index 6bf3b282..c53b7701 100644 --- a/classes/table_headings.js +++ b/classes/table_headings.js @@ -5,7 +5,7 @@ var TableHeadingString = /** @class */ (function () { var myArr = JSON.parse(headingsStr); for (var i = 0; i < myArr.length; i++) { this.returnStr += - "" + myArr[i] + ""; + "

" + myArr[i] + "

"; } } TableHeadingString.prototype.internalFormat = function () { diff --git a/classes/table_headings.js.map b/classes/table_headings.js.map index 0f0d3a67..3c7fcee8 100644 --- a/classes/table_headings.js.map +++ b/classes/table_headings.js.map @@ -1 +1 @@ -{"version":3,"file":"table_headings.js","sourceRoot":"","sources":["table_headings.ts"],"names":[],"mappings":"AAEA,+CAA+C;AAC/C;IAGC,4BAAa,WAAmB;QAFxB,cAAS,GAAG,EAAE,CAAC;QAGtB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACpC,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;YAC9B,IAAI,CAAC,SAAS;gBACd,MAAM,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,OAAO,CAAC;SACxB;IACF,CAAC;IAED,2CAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,yBAAC;AAAD,CAAC,AAdD,IAcC"} \ No newline at end of file +{"version":3,"file":"table_headings.js","sourceRoot":"","sources":["table_headings.ts"],"names":[],"mappings":"AAEA,+CAA+C;AAC/C;IAGC,4BAAa,WAAmB;QAFxB,cAAS,GAAG,EAAE,CAAC;QAGtB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACpC,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;YAC9B,IAAI,CAAC,SAAS;gBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;SACxC;IACF,CAAC;IAED,2CAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,yBAAC;AAAD,CAAC,AAdD,IAcC"} \ No newline at end of file diff --git a/classes/table_headings.ts b/classes/table_headings.ts index 8601a73d..213f8188 100644 --- a/classes/table_headings.ts +++ b/classes/table_headings.ts @@ -8,7 +8,7 @@ export class TableHeadingString implements HasFormatMethod { let myArr = JSON.parse(headingsStr); for(let i=0;i"+myArr[i]+""; + "

"+myArr[i]+"

"; } } diff --git a/index.html b/index.html index 8e413245..61e0f89f 100644 --- a/index.html +++ b/index.html @@ -7,18 +7,18 @@
-

JS Onboard Project

+
-
+

-

+

-
+
-
+
diff --git a/main.css b/main.css index 085133e4..688bab14 100644 --- a/main.css +++ b/main.css @@ -1,6 +1,10 @@ +html,body { + height: 100%; +} + body { font-family: Arial, Helvetica, sans-serif; - overflow-y: scroll; + overflow: hidden; margin: 0px; } @@ -15,17 +19,17 @@ body { scrollbar-width: none; /* Firefox */ } -#app { - margin-top: 150px; -} - .navigation { + display: flex; + align-items: center; + justify-content: space-around; background-color: #ffffff; overflow: hidden; - position: fixed; - top: 0; width: 100%; - padding: 5px; + height: 4%; + padding: 10px; + border-style: solid; + border-width: 0px 0px 2px 0px; z-index: 1; } @@ -65,27 +69,50 @@ body { margin-left: 50px; } -table { - font-family: arial, sans-serif; - border-collapse: collapse; +.navigation .arrow { + cursor: pointer; +} + +#app { + width: 100%; + height: 100%; +} + +#app .table { + width: 100%; + height: 100%; +} + +#app .table .tablecell { + display: grid; + grid-template-columns: repeat(11, 1fr); + width: 100%; + height: 4%; + text-align: center; + border-width: 0px 0 thin 0; +} + +#app .table .tablecell > div p{ + margin: 0px; + padding-bottom: 0px; + height: 100%; width: 100%; - table-layout: fixed; - position: relative; } -th { - position: sticky; - top: 130px; +#app .table tr { + min-height:4%; +} + +#app .table th { background-color: #ffffff; } -tr:nth-child(even) { +#app .table tr:nth-child(even) { background-color: #dddddd60; } -td, th { +#app .table td, th { border: 1px solid #dddddd; - text-align: left; padding: 8px; text-align: center; } From d232ff5443e40f2467d0ef378d06e008ec3de7c1 Mon Sep 17 00:00:00 2001 From: geraldtivatyi Date: Thu, 10 Jun 2021 00:05:50 +0200 Subject: [PATCH 11/47] fix navigation --- app.ts | 181 ++++++++++++++++++++++++++++++++++++++++++----------- index.html | 18 +++--- main.css | 51 ++++++++------- 3 files changed, 183 insertions(+), 67 deletions(-) diff --git a/app.ts b/app.ts index f9248a8f..16e102b3 100644 --- a/app.ts +++ b/app.ts @@ -4,53 +4,162 @@ import { RenderTableHeading } from "./classes/render_headings.js"; import { HasFormatMethod } from "./interfaces/hasformatmethod.js"; import { request } from './httprequests/httpreq.js'; +// Strings holding heading and records data requested from server +let headingsStr: string; +let recordsStr: string; +let numberOfRecordsStr: string; //Accessing form data -let form = document.querySelector('#form') as HTMLFormElement; -let fromID = document.querySelector('#fromID') as HTMLInputElement; -let toID = document.querySelector('#toID') as HTMLInputElement; +let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; +let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; +let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + +let fromID = 1; +fromIDElement.innerHTML = fromID.toString(); +let toID = 23; +toIDElement.innerHTML = toID.toString(); + +// Fetch number of records +request( + "/recordCount", "GET", + function(r: string) { + try { + numofrecords.innerHTML = r; + } catch(err) { + console.log(err); + return; + } + } +); + +// Fetch table headings from server +request( + "/columns", "GET", + function(r: string) { + try { + headingsStr = r; // set response from server + } catch(err) { + console.log(err); + return; + } + } +); + +// Fetch records from server +let url = "/records?from=1&to=23"; +request( + url, "GET", + function(r: string) { + try { + recordsStr = r; // set response from server + generateTable(); // call function to render table in browser + + } catch(err) { + console.log(err); + return; + } + } +); + // Instantiate grid table to append innerHTML let tble = new RenderTableHeading(document.querySelector('#table') as HTMLDivElement); -// Strings holding heading and records data requested from server -let headingsStr: string; -let recordsStr: string; -// Listen for submission in form and use inputs to request data from backend -form.addEventListener('submit', (e: Event) => { - let t = document.querySelector('#table') as HTMLDivElement; - t.innerHTML = ""; // empty table every time a new submission is made - e.preventDefault(); +// Listen for click on left and use inputs to request data from backend +let leftarrow = document.querySelector("#leftarrow") as SVGElement; +leftarrow.addEventListener("click", (e:Event) => { + if (fromID < 23) { + fromID = fromID; + fromIDElement.innerHTML = fromID.toString(); + toID = 23; + toIDElement.innerHTML = toID.toString(); + } else { + fromID = fromID - 23; + toID = toID - 23; + fromIDElement.innerHTML = fromID.toString(); + toIDElement.innerHTML = toID.toString(); + let t = document.querySelector('#table') as HTMLDivElement; + t.innerHTML = ""; // empty table every time a new submission is made + e.preventDefault(); + + // Fetch table headings from server + request( + "/columns", "GET", + function(r: string) { + try { + headingsStr = r; // set response from server + } catch(err) { + console.log(err); + return; + } + } + ); - // Fetch table headings from server - request( - "/columns", "GET", - function(r: string) { - try { - headingsStr = r; // set response from server - } catch(err) { - console.log(err); - return; + // Fetch records from server + let url = "/records?from="+fromID+"&to="+toID; + request( + url, "GET", + function(r: string) { + try { + recordsStr = r; // set response from server + generateTable(); // call function to render table in browser + + } catch(err) { + console.log(err); + return; + } } - } - ); + ); + } +}); - // Fetch records from server - let url = "/records?from="+fromID.valueAsNumber+"&to="+toID.valueAsNumber; - request( - url, "GET", - function(r: string) { - try { - recordsStr = r; // set response from server - generateTable(); // call function to render table in browser - - } catch(err) { - console.log(err); - return; +// Listen for submission in form and use inputs to request data from backend +let rightarrow = document.querySelector("#rightarrow") as SVGElement; +rightarrow.addEventListener("click", (e:Event) => { + if (toID > (1000000-23)) { + fromID = (1000000-23); + fromIDElement.innerHTML = fromID.toString(); + toID = 1000000; + toIDElement.innerHTML = toID.toString(); + } else { + fromID = fromID + 23; + fromIDElement.innerHTML = fromID.toString(); + toID = toID + 23; + toIDElement.innerHTML = toID.toString(); + let t = document.querySelector('#table') as HTMLDivElement; + t.innerHTML = ""; // empty table every time a new submission is made + e.preventDefault(); + + // Fetch table headings from server + request( + "/columns", "GET", + function(r: string) { + try { + headingsStr = r; // set response from server + } catch(err) { + console.log(err); + return; + } } - } - ); + ); + + // Fetch records from server + let url = "/records?from="+fromID+"&to="+toID; + request( + url, "GET", + function(r: string) { + try { + recordsStr = r; // set response from server + generateTable(); // call function to render table in browser + + } catch(err) { + console.log(err); + return; + } + } + ); + } }); // Create table and render in browser diff --git a/index.html b/index.html index 61e0f89f..81db2434 100644 --- a/index.html +++ b/index.html @@ -7,15 +7,15 @@
- -
-
-
-
-

- -
- + +
+

+

-

+

+

of

+

+
+
diff --git a/main.css b/main.css index 688bab14..74f60448 100644 --- a/main.css +++ b/main.css @@ -27,45 +27,43 @@ body { overflow: hidden; width: 100%; height: 4%; - padding: 10px; - border-style: solid; - border-width: 0px 0px 2px 0px; z-index: 1; } -.navigation .form { +.navigation .values { display: flex; align-items: center; justify-content: center; - height: 30px; - font-size: 25px; + height: 100%; } -.navigation .form .input { +.navigation .values .input { + outline: none; + border-style: none; text-align: center; - font-size: 25px; - width: 150px; - height: 30px; - border-radius: 6px; + font-size: 20px; +} + +.navigation .values p { + font-size: 20px; + padding-left: 5px; } -.navigation .form .padding { +.navigation .values .padding { margin-left: 20px; } -.navigation .form label { +.navigation .values label { margin-right: 10px; } -.navigation .form #submit { - font-size: 25px; +.navigation .values #submit { + font-size: 20px; font-weight: bold; color: white; background-color: #00b77a; - border-style: none; border-radius: 6px; width: fit-content; - height: 40px; margin-left: 50px; } @@ -79,24 +77,33 @@ body { } #app .table { + border-style: solid; + border-width: thin; width: 100%; height: 100%; + display: grid; + grid-template-rows: repeat(auto-fill, 4%); } #app .table .tablecell { display: grid; grid-template-columns: repeat(11, 1fr); width: 100%; - height: 4%; + height: 100%; text-align: center; - border-width: 0px 0 thin 0; + border-style: solid; + border-width: thin 0px 0px 0px; +} + +#app .table .tablecell > div { + display: flex; + justify-content: center; + align-items: center; } #app .table .tablecell > div p{ margin: 0px; - padding-bottom: 0px; - height: 100%; - width: 100%; + padding: 0px; } #app .table tr { From 8403aae2930d4ae9cd12514f5d538e5ca05ed89b Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Thu, 10 Jun 2021 12:14:03 +0200 Subject: [PATCH 12/47] add filters --- app.ts | 94 +++++++++++++++++++++++++++--------------------------- index.html | 27 +++++++++++----- main.css | 86 ++++++++++++++++++++++++++++++++++--------------- 3 files changed, 127 insertions(+), 80 deletions(-) diff --git a/app.ts b/app.ts index 16e102b3..5b1ef965 100644 --- a/app.ts +++ b/app.ts @@ -38,22 +38,22 @@ request( function(r: string) { try { headingsStr = r; // set response from server - } catch(err) { - console.log(err); - return; - } - } -); -// Fetch records from server -let url = "/records?from=1&to=23"; -request( - url, "GET", - function(r: string) { - try { - recordsStr = r; // set response from server - generateTable(); // call function to render table in browser - + // Fetch records from server + let url = "/records?from=1&to=23"; + request( + url, "GET", + function(r: string) { + try { + recordsStr = r; // set response from server + generateTable(); // call function to render table in browser + + } catch(err) { + console.log(err); + return; + } + } + ); } catch(err) { console.log(err); return; @@ -62,6 +62,7 @@ request( ); + // Instantiate grid table to append innerHTML let tble = new RenderTableHeading(document.querySelector('#table') as HTMLDivElement); @@ -84,11 +85,26 @@ leftarrow.addEventListener("click", (e:Event) => { e.preventDefault(); // Fetch table headings from server - request( + request ( "/columns", "GET", function(r: string) { try { headingsStr = r; // set response from server + // Fetch records from server + let url = "/records?from="+fromID+"&to="+toID; + request( + url, "GET", + function(r: string) { + try { + recordsStr = r; // set response from server + generateTable(); // call function to render table in browser + + } catch(err) { + console.log(err); + return; + } + } + ); } catch(err) { console.log(err); return; @@ -96,21 +112,6 @@ leftarrow.addEventListener("click", (e:Event) => { } ); - // Fetch records from server - let url = "/records?from="+fromID+"&to="+toID; - request( - url, "GET", - function(r: string) { - try { - recordsStr = r; // set response from server - generateTable(); // call function to render table in browser - - } catch(err) { - console.log(err); - return; - } - } - ); } }); @@ -137,22 +138,21 @@ rightarrow.addEventListener("click", (e:Event) => { function(r: string) { try { headingsStr = r; // set response from server - } catch(err) { - console.log(err); - return; - } - } - ); - - // Fetch records from server - let url = "/records?from="+fromID+"&to="+toID; - request( - url, "GET", - function(r: string) { - try { - recordsStr = r; // set response from server - generateTable(); // call function to render table in browser - + // Fetch records from server + let url = "/records?from="+fromID+"&to="+toID; + request( + url, "GET", + function(r: string) { + try { + recordsStr = r; // set response from server + generateTable(); // call function to render table in browser + + } catch(err) { + console.log(err); + return; + } + } + ); } catch(err) { console.log(err); return; diff --git a/index.html b/index.html index 81db2434..7c96ea4e 100644 --- a/index.html +++ b/index.html @@ -7,15 +7,26 @@
- -
-

-

-

-

-

of

-

+
+ + +
+
+ + + +
+ -
diff --git a/main.css b/main.css index 74f60448..620ef591 100644 --- a/main.css +++ b/main.css @@ -22,52 +22,86 @@ body { .navigation { display: flex; align-items: center; - justify-content: space-around; - background-color: #ffffff; - overflow: hidden; - width: 100%; + justify-content: space-between; height: 4%; - z-index: 1; } -.navigation .values { +.filters { display: flex; align-items: center; - justify-content: center; + width: 100%; height: 100%; } -.navigation .values .input { - outline: none; - border-style: none; - text-align: center; - font-size: 20px; +.filters .button { + font-size: 14px; + color: white; + background-color: #00b77a; + border-radius: 6px; + border-color: #00b77a; + padding: 5px; + margin-left: 5px; } -.navigation .values p { - font-size: 20px; - padding-left: 5px; +.form { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; } -.navigation .values .padding { - margin-left: 20px; +.form label { + font-size: 14px; } -.navigation .values label { - margin-right: 10px; +.form .input { + text-align: center; + width: 70px; + padding: 5px; + margin-left: 5px; + border-width: 0 0 thin 0; + outline: none; } -.navigation .values #submit { - font-size: 20px; - font-weight: bold; +.form .submit { + font-size: 14px; color: white; background-color: #00b77a; border-radius: 6px; - width: fit-content; - margin-left: 50px; + border-color: #00b77a; + padding: 5px; + margin-left: 5px; +} + +.pagination { + display: flex; + align-items: center; + justify-content: flex-end; + background-color: #ffffff; + overflow: hidden; + width: 100%; + height: 100%; } -.navigation .arrow { +.pagination svg { + padding-left: 10px; + padding-right: 10px; +} + +.pagination .values { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} + +.pagination .values p { + font-size: 14px; + padding-left: 5px; +} + +.pagination .arrow { cursor: pointer; } @@ -99,6 +133,8 @@ body { display: flex; justify-content: center; align-items: center; + border-style: solid; + border-width: 0 thin 0 thin; } #app .table .tablecell > div p{ From 4c637627655dfbce0c626531c54324953b571967 Mon Sep 17 00:00:00 2001 From: geraldtivatyi Date: Fri, 11 Jun 2021 09:23:05 +0200 Subject: [PATCH 13/47] fix filter bugs --- app.ts | 180 +++++++++++++++++++++++++++++++++++++++++++++++------ index.html | 6 +- main.css | 8 ++- 3 files changed, 169 insertions(+), 25 deletions(-) diff --git a/app.ts b/app.ts index 5b1ef965..d8b573fd 100644 --- a/app.ts +++ b/app.ts @@ -31,14 +31,14 @@ request( } } ); - + // Fetch table headings from server request( "/columns", "GET", function(r: string) { try { headingsStr = r; // set response from server - + // Fetch records from server let url = "/records?from=1&to=23"; request( @@ -60,24 +60,24 @@ request( } } ); - - - + + + // Instantiate grid table to append innerHTML let tble = new RenderTableHeading(document.querySelector('#table') as HTMLDivElement); - - + + // Listen for click on left and use inputs to request data from backend let leftarrow = document.querySelector("#leftarrow") as SVGElement; leftarrow.addEventListener("click", (e:Event) => { - if (fromID < 23) { + if (fromID < 22) { fromID = fromID; fromIDElement.innerHTML = fromID.toString(); - toID = 23; + toID = 22; toIDElement.innerHTML = toID.toString(); } else { - fromID = fromID - 23; - toID = toID - 23; + fromID = fromID - 22; + toID = toID - 22; fromIDElement.innerHTML = fromID.toString(); toIDElement.innerHTML = toID.toString(); let t = document.querySelector('#table') as HTMLDivElement; @@ -111,27 +111,28 @@ leftarrow.addEventListener("click", (e:Event) => { } } ); - } }); - + // Listen for submission in form and use inputs to request data from backend let rightarrow = document.querySelector("#rightarrow") as SVGElement; rightarrow.addEventListener("click", (e:Event) => { - if (toID > (1000000-23)) { - fromID = (1000000-23); + if (fromID >= (999999-22)) + if (fromID > (999999-22)) { + fromID = (999999-22); fromIDElement.innerHTML = fromID.toString(); - toID = 1000000; + toID = 999999; toIDElement.innerHTML = toID.toString(); + } else if () { } else { - fromID = fromID + 23; + fromID = fromID + 22; fromIDElement.innerHTML = fromID.toString(); - toID = toID + 23; + toID = toID + 22; toIDElement.innerHTML = toID.toString(); let t = document.querySelector('#table') as HTMLDivElement; t.innerHTML = ""; // empty table every time a new submission is made e.preventDefault(); - + // Fetch table headings from server request( "/columns", "GET", @@ -161,6 +162,147 @@ rightarrow.addEventListener("click", (e:Event) => { ); } }); + +// Listen for submission in form and use inputs to request data from backend +let submit = document.querySelector("#submit") as HTMLInputElement; +submit.addEventListener("click", (e:Event) => { + let startFromIDElement = document.querySelector('#startfrom') as HTMLInputElement; + let startFrom = startFromIDElement.valueAsNumber; + + if (startFrom < 1 || startFrom > 999977) { + alert("The acceptable range is between 1 and 999977"); + return; + } + if (startFrom > (999999-22)) { + fromID = (999999-22); + fromIDElement.innerHTML = fromID.toString(); + toID = 999999; + toIDElement.innerHTML = toID.toString(); + } else if (startFrom < 22) { + fromID = fromID; + fromIDElement.innerHTML = fromID.toString(); + toID = 22; + toIDElement.innerHTML = toID.toString(); + } else { + fromID = startFrom; + fromIDElement.innerHTML = fromID.toString(); + toID = fromID + 22; + toIDElement.innerHTML = toID.toString(); + } + let t = document.querySelector('#table') as HTMLDivElement; + t.innerHTML = ""; // empty table every time a new submission is made + e.preventDefault(); + + // Fetch table headings from server + request( + "/columns", "GET", + function(r: string) { + try { + headingsStr = r; // set response from server + // Fetch records from server + let url = "/records?from="+fromID+"&to="+toID; + request( + url, "GET", + function(r: string) { + try { + recordsStr = r; // set response from server + generateTable(); // call function to render table in browser + + } catch(err) { + console.log(err); + return; + } + } + ); + } catch(err) { + console.log(err); + return; + } + } + ); +}); + +// Listen for submission in form and use inputs to request data from backend +let gotostart = document.querySelector("#gotostart") as HTMLInputElement; +gotostart.addEventListener("click", (e:Event) => { + fromID = 1; + fromIDElement.innerHTML = fromID.toString(); + toID = 23; + toIDElement.innerHTML = toID.toString(); + + let t = document.querySelector('#table') as HTMLDivElement; + t.innerHTML = ""; // empty table every time a new submission is made + e.preventDefault(); + + // Fetch table headings from server + request( + "/columns", "GET", + function(r: string) { + try { + headingsStr = r; // set response from server + // Fetch records from server + let url = "/records?from="+fromID+"&to="+toID; + request( + url, "GET", + function(r: string) { + try { + recordsStr = r; // set response from server + generateTable(); // call function to render table in browser + + } catch(err) { + console.log(err); + return; + } + } + ); + } catch(err) { + console.log(err); + return; + } + } + ); +}); + +// Listen for submission in form and use inputs to request data from backend +let gotoend = document.querySelector("#gotoend") as HTMLInputElement; +gotoend.addEventListener("click", (e:Event) => { + fromID = 999977; + fromIDElement.innerHTML = fromID.toString(); + toID = 999999; + toIDElement.innerHTML = toID.toString(); + + let t = document.querySelector('#table') as HTMLDivElement; + t.innerHTML = ""; // empty table every time a new submission is made + e.preventDefault(); + + // Fetch table headings from server + request( + "/columns", "GET", + function(r: string) { + try { + headingsStr = r; // set response from server + // Fetch records from server + let url = "/records?from="+fromID+"&to="+toID; + request( + url, "GET", + function(r: string) { + try { + recordsStr = r; // set response from server + generateTable(); // call function to render table in browser + + } catch(err) { + console.log(err); + return; + } + } + ); + } catch(err) { + console.log(err); + return; + } + } + ); +}); // Create table and render in browser function generateTable(){ diff --git a/index.html b/index.html index 7c96ea4e..2448df34 100644 --- a/index.html +++ b/index.html @@ -11,10 +11,10 @@
-
+
- - + +
"; } let div = document.createElement('div'); div.innerHTML = this.returnStr; div.className = "tablecell"; + div.style.gridTemplateColumns = "repeat("+this.arrLength+", 1fr)"; table.append(div); this.returnStr = ""; } } + arrayLength() { + return this.arrLength; + } + internalFormat() { return this.returnStr; } diff --git a/classes/table_headings.js b/classes/table_headings.js index c53b7701..c0062ac4 100644 --- a/classes/table_headings.js +++ b/classes/table_headings.js @@ -2,12 +2,17 @@ var TableHeadingString = /** @class */ (function () { function TableHeadingString(headingsStr) { this.returnStr = ""; + this.arrLength = 0; var myArr = JSON.parse(headingsStr); + this.arrLength = myArr.length; for (var i = 0; i < myArr.length; i++) { this.returnStr += "

" + myArr[i] + "

"; } } + TableHeadingString.prototype.arrayLength = function () { + return this.arrLength; + }; TableHeadingString.prototype.internalFormat = function () { return this.returnStr; }; diff --git a/classes/table_headings.js.map b/classes/table_headings.js.map index 3c7fcee8..67ef7d31 100644 --- a/classes/table_headings.js.map +++ b/classes/table_headings.js.map @@ -1 +1 @@ -{"version":3,"file":"table_headings.js","sourceRoot":"","sources":["table_headings.ts"],"names":[],"mappings":"AAEA,+CAA+C;AAC/C;IAGC,4BAAa,WAAmB;QAFxB,cAAS,GAAG,EAAE,CAAC;QAGtB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACpC,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;YAC9B,IAAI,CAAC,SAAS;gBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;SACxC;IACF,CAAC;IAED,2CAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,yBAAC;AAAD,CAAC,AAdD,IAcC"} \ No newline at end of file +{"version":3,"file":"table_headings.js","sourceRoot":"","sources":["table_headings.ts"],"names":[],"mappings":"AAEA,+CAA+C;AAC/C;IAIC,4BAAa,WAAmB;QAHxB,cAAS,GAAG,EAAE,CAAC;QACf,cAAS,GAAG,CAAC,CAAC;QAGrB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;QAC9B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;YAC9B,IAAI,CAAC,SAAS;gBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;SACxC;IACF,CAAC;IAED,wCAAW,GAAX;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,2CAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,yBAAC;AAAD,CAAC,AApBD,IAoBC"} \ No newline at end of file diff --git a/classes/table_headings.ts b/classes/table_headings.ts index 213f8188..539773da 100644 --- a/classes/table_headings.ts +++ b/classes/table_headings.ts @@ -3,15 +3,21 @@ import { HasFormatMethod } from "../interfaces/hasformatmethod.js"; // generate html string for table headings data export class TableHeadingString implements HasFormatMethod { private returnStr = ""; + private arrLength = 0; constructor( headingsStr: string){ let myArr = JSON.parse(headingsStr); + this.arrLength = myArr.length; for(let i=0;i

"; } } + arrayLength() { + return this.arrLength; + } + internalFormat() { return this.returnStr; } diff --git a/index.html b/index.html index 2448df34..b84f4c83 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
- +
"; + "

"+myArr[i][j]+"

"; } let div = document.createElement('div'); div.innerHTML = this.returnStr; diff --git a/main.css b/main.css index 76cb343a..d9a7a462 100644 --- a/main.css +++ b/main.css @@ -1,5 +1,7 @@ html,body { height: 100%; + background-color: black; + color: white; } body { @@ -57,12 +59,14 @@ body { } .form .startfrom { + color: white; text-align: center; width: 70px; padding: 5px; margin-left: 5px; border-width: 0 0 thin 0; outline: none; + background-color: black; } .form .submit { @@ -80,7 +84,6 @@ body { display: flex; align-items: center; justify-content: flex-end; - background-color: #ffffff; overflow: hidden; width: 100%; height: 100%; @@ -89,6 +92,7 @@ body { .pagination svg { padding-left: 10px; padding-right: 10px; + fill: white; } .pagination .values { From c9bb2dd5111a1d4397777c8c2f1f100cc5e2a779 Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Tue, 15 Jun 2021 14:07:41 +0200 Subject: [PATCH 19/47] fix unnecessary calls and rapid firing calls --- app.ts | 166 +++++++++++++++++++++---------------- classes/render-rows.js | 4 + classes/render-rows.js.map | 2 +- classes/render-rows.ts | 4 + index.html | 2 +- main.css | 22 +---- 6 files changed, 105 insertions(+), 95 deletions(-) diff --git a/app.ts b/app.ts index 4585af24..a1fc9e63 100644 --- a/app.ts +++ b/app.ts @@ -7,29 +7,15 @@ import { request } from './httprequests/httpreq.js'; // Variable for tracking click events let clicked = false; +// Instantiate grid table to append innerHTML +let tble = new RenderTableHeading(document.querySelector('#table') as HTMLDivElement); + // Screen Size let screenWidth = screen.width; let screenHeight = screen.height; -console.log("screen width: ", screenWidth); -console.log("screen height: ", screenHeight); - -window.addEventListener('resize', function(event){ - screenWidth = window.innerWidth; - screenHeight = window.innerHeight; - console.log("screen width: ", screenWidth); - console.log("screen height: ", screenHeight); -}); - -// Number of rows on page -// @media (min-width: 1281px) { -// @media (min-width: 1025px) and (max-width: 1280px) { -// @media (min-width: 768px) and (max-width: 1024px) { -// @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { -// @media (min-width: 481px) and (max-width: 767px) { -// @media (min-width: 320px) and (max-width: 480px) { - -let numOfRows = 23; +// let numOfRows = 23; +let numOfRows = getNumOfRows(); let totalNumofRecords: number; //Accessing form data from front end @@ -43,65 +29,63 @@ let toID = numOfRows; fromIDElement.innerHTML = fromID.toString(); toIDElement.innerHTML = toID.toString(); -// Instantiate grid table to append innerHTML -let tble = new RenderTableHeading(document.querySelector('#table') as HTMLDivElement); +createInitialPage(numOfRows); -//Request for total number of records -request( "/recordCount", "GET", function(r: string) { - try { - numofrecords.innerHTML = r; - totalNumofRecords = Number(r)-1; - } catch(err) { - console.log(err); - return; - } +window.addEventListener('resize', function(event) { + screenWidth = window.innerWidth; + screenHeight = window.innerHeight; + + if (screenHeight >= 750) { + numOfRows = 23; + } else if ((screenHeight < 750) && (screenHeight >= 550)) { + numOfRows = 18; + } else if ((screenHeight < 550) && (screenHeight >= 265)) { + numOfRows = 8; + } else if (screenHeight < 265) { + numOfRows = 3; } -); -// Render Initial Page of Data -createTable(fromID, toID); // create table and render to browser - -// Listen for click on left arrow -// let leftarrow = document.querySelector("#leftarrow") as SVGElement; + createInitialPage(numOfRows); +}); + +// When clicking on left arrow $( "#leftarrow" ).on( "click", function() { - if (!clicked) { - clicked = true; - let startfrom = document.querySelector("#startfrom") as HTMLInputElement; - startfrom.value = ""; - if (fromID < (numOfRows-1)) { - fromID = 1; - toID = numOfRows; - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - } else { - fromID = fromID - (numOfRows-1); - toID = toID - (numOfRows-1); - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - } - + let startfrom = document.querySelector("#startfrom") as HTMLInputElement; + startfrom.value = ""; + if ((fromID < (numOfRows-1)) && (fromID > 1)) { + fromID = 1; + toID = numOfRows; + fromIDElement.innerHTML = fromID.toString(); + toIDElement.innerHTML = toID.toString(); + createTable(fromID, toID); + } else if (fromID === 1) { + // do nothing + } else { + fromID = fromID - (numOfRows-1); + toID = toID - (numOfRows-1); + fromIDElement.innerHTML = fromID.toString(); + toIDElement.innerHTML = toID.toString(); createTable(fromID, toID); } }); // Listen for click on right arrow $( "#rightarrow" ).on( "click", function() { - if (!clicked) { - clicked = true; - let startfrom = document.querySelector("#startfrom") as HTMLInputElement; - startfrom.value = ""; - if (fromID > (totalNumofRecords-((numOfRows-1)*2 ))) { - fromID = (totalNumofRecords-(numOfRows-1)); - toID = totalNumofRecords; - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - } else { - fromID = fromID + (numOfRows-1); - fromIDElement.innerHTML = fromID.toString(); - toID = toID + (numOfRows-1); - toIDElement.innerHTML = toID.toString(); - } - + let startfrom = document.querySelector("#startfrom") as HTMLInputElement; + startfrom.value = ""; + if ((fromID > (totalNumofRecords-((numOfRows-1)*2)) ) && (fromID < totalNumofRecords) ) { + fromID = (totalNumofRecords-(numOfRows-1)); + toID = totalNumofRecords; + fromIDElement.innerHTML = fromID.toString(); + toIDElement.innerHTML = toID.toString(); + createTable(fromID, toID); + } else if (toID === totalNumofRecords) { + // do nothing + } else { + fromID = fromID + (numOfRows-1); + fromIDElement.innerHTML = fromID.toString(); + toID = toID + (numOfRows-1); + toIDElement.innerHTML = toID.toString(); createTable(fromID, toID); } }); @@ -111,8 +95,8 @@ $( "#submit" ).on( "click", function() { let startFromIDElement = document.querySelector('#startfrom') as HTMLInputElement; let startFrom = startFromIDElement.valueAsNumber; - if (startFrom < 1 || startFrom > 999977) { - alert("The acceptable range is between 1 and 999977"); + if (startFrom < 1 || startFrom > (totalNumofRecords-((numOfRows-1)*2))) { + alert("The acceptable range is between 1 and "+(totalNumofRecords-((numOfRows-1)))); return; } else { @@ -150,9 +134,6 @@ $( "#gotoend" ).on( "click", function() { }); function createTable(fromID: number, toID: number) { - let t = document.querySelector('#table') as HTMLDivElement; - t.innerHTML = ""; // empty table every time a new submission is made - // Fetch table headings from server request ("/columns", "GET", function(r: string) { let headingsStr: string; @@ -181,6 +162,8 @@ function createTable(fromID: number, toID: number) { // Create table and render in browser function generateTable(headingsStr: string, recordsStr: string) { + let t = document.querySelector('#table') as HTMLDivElement; + t.innerHTML = ""; let interfaceHeading: HasFormatMethod; // variable of type interface used in creating table headings let interfaceRecords: HasFormatMethod; // variable of type interface used in creating table rows interfaceHeading = new TableHeadingString(headingsStr); // call method to generate string containing table heading element @@ -192,3 +175,40 @@ function el(s: string) { return document.getElementById(s); } +function createInitialPage(numOfRows: number) { + fromID = 1; + toID = numOfRows; + fromIDElement.innerHTML = fromID.toString(); + toIDElement.innerHTML = toID.toString(); + + //Request for total number of records + request( "/recordCount", "GET", function(r: string) { + try { + numofrecords.innerHTML = r; + totalNumofRecords = Number(r)-1; + } catch(err) { + console.log(err); + return; + } + }); + + // Render Initial Page of Data + createTable(fromID, toID); // create table and render to browser. +} + +function getNumOfRows() { + screenWidth = window.innerWidth; + screenHeight = window.innerHeight; + + if (screenHeight >= 750) { + return 23; + } else if ((screenHeight < 750) && (screenHeight >= 550)) { + return 18; + } else if ((screenHeight < 550) && (screenHeight >= 265)) { + return 8; + } else if (screenHeight < 265) { + return 3; + } else { + return 23; + } +} \ No newline at end of file diff --git a/classes/render-rows.js b/classes/render-rows.js index 5d00f96b..ac6f63c1 100644 --- a/classes/render-rows.js +++ b/classes/render-rows.js @@ -4,7 +4,11 @@ var RenderTableRows = /** @class */ (function () { this.returnStr = ""; this.arrLength = 0; var table = document.querySelector('#table'); + var navigation = document.querySelector('#navigation'); var myArr = JSON.parse(recordsStr); + table.style.display = "grid"; + table.style.gridTemplateRows = "repeat(auto-fill, " + (100 / (myArr.length + 2)) + "%)"; + navigation.style.height = (100 / (myArr.length + 2)) + "%"; for (var i = 0; i < myArr.length; i++) { for (var j = 0; j < myArr[i].length; j++) { this.arrLength = myArr[i].length; diff --git a/classes/render-rows.js.map b/classes/render-rows.js.map index 1b20b3a6..b7725fb2 100644 --- a/classes/render-rows.js.map +++ b/classes/render-rows.js.map @@ -1 +1 @@ -{"version":3,"file":"render-rows.js","sourceRoot":"","sources":["render-rows.ts"],"names":[],"mappings":"AAEA,iEAAiE;AACjE;IAIC,yBAAa,UAAkB;QAHvB,cAAS,GAAG,EAAE,CAAC;QACf,cAAS,GAAG,CAAC,CAAC;QAGrB,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAmB,CAAC;QAC/D,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAEnC,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;YAC/B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAClC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;gBACjC,IAAI,CAAC,SAAS;oBACb,UAAU,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,YAAY,CAAC;aACrC;YACD,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAC/B,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,IAAI,CAAC,SAAS,GAAC,QAAQ,CAAC;YAClE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAClB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACpB;IACF,CAAC;IAED,qCAAW,GAAX;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,wCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,sBAAC;AAAD,CAAC,AA9BD,IA8BC"} \ No newline at end of file +{"version":3,"file":"render-rows.js","sourceRoot":"","sources":["render-rows.ts"],"names":[],"mappings":"AAEA,iEAAiE;AACjE;IAIC,yBAAa,UAAkB;QAHvB,cAAS,GAAG,EAAE,CAAC;QACf,cAAS,GAAG,CAAC,CAAC;QAGrB,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAmB,CAAC;QAC/D,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;QACzE,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACnC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC7B,KAAK,CAAC,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,GAAC,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,IAAI,CAAC;QAChF,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,GAAG,CAAC;QAErD,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;YAC/B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAClC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;gBACjC,IAAI,CAAC,SAAS;oBACb,UAAU,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,YAAY,CAAC;aACrC;YACD,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAC/B,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,IAAI,CAAC,SAAS,GAAC,QAAQ,CAAC;YAClE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAClB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACpB;IACF,CAAC;IAED,qCAAW,GAAX;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,wCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,sBAAC;AAAD,CAAC,AAlCD,IAkCC"} \ No newline at end of file diff --git a/classes/render-rows.ts b/classes/render-rows.ts index 4147290a..37ba6e3a 100644 --- a/classes/render-rows.ts +++ b/classes/render-rows.ts @@ -7,7 +7,11 @@ export class RenderTableRows implements HasFormatMethod { constructor( recordsStr: string ){ let table = document.querySelector('#table') as HTMLDivElement; + let navigation = document.querySelector('#navigation') as HTMLDivElement; let myArr = JSON.parse(recordsStr); + table.style.display = "grid"; + table.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+2))+"%)"; + navigation.style.height = (100/(myArr.length+2))+"%"; for(let i=0;i -
+ "; } } + // Returns length of array of headings to get number of columns necessary to render arrayLength() { return this.arrLength; } + // Returns formatted string to be placed in html internalFormat() { return this.returnStr; } diff --git a/httprequests/httpreq.js b/httprequests/httpreq.js deleted file mode 100644 index 74255b85..00000000 --- a/httprequests/httpreq.js +++ /dev/null @@ -1,15 +0,0 @@ -export function request(action, method, callback) { - var x; - if (window.XMLHttpRequest) - x = new XMLHttpRequest(); - else - x = ActiveXObject('Microsoft.XMLHTTP'); - x.onreadystatechange = function () { - if (this.readyState == 4 && this.status == 200) { - callback(this.responseText); - } - }; - x.open(method, action, true); - x.send(); -} -//# sourceMappingURL=httpreq.js.map \ No newline at end of file diff --git a/httprequests/httpreq.js.map b/httprequests/httpreq.js.map deleted file mode 100644 index d1dea866..00000000 --- a/httprequests/httpreq.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"httpreq.js","sourceRoot":"","sources":["httpreq.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,OAAO,CAAC,MAAc,EAAE,MAAc,EAAE,QAAa;IACnE,IAAI,CAAM,CAAC;IACX,IAAI,MAAM,CAAC,cAAc;QAAE,CAAC,GAAG,IAAI,cAAc,EAAE,CAAC;;QAC/C,CAAC,GAAG,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC5C,CAAC,CAAC,kBAAkB,GAAG;QACnB,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,GAAG,EAAE;YAC5C,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;IACL,CAAC,CAAC;IAEF,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC,IAAI,EAAE,CAAC;AACX,CAAC"} \ No newline at end of file diff --git a/httprequests/httpreq.ts b/httprequests/httpreq.ts deleted file mode 100644 index be89a52c..00000000 --- a/httprequests/httpreq.ts +++ /dev/null @@ -1,15 +0,0 @@ -// http request and response handling -declare let ActiveXObject: (type: string) => void; -export function request(action: string, method: string, callback: any) { - let x: any; - if (window.XMLHttpRequest) x = new XMLHttpRequest(); - else x = ActiveXObject('Microsoft.XMLHTTP'); - x.onreadystatechange = function () { - if (this.readyState == 4 && this.status == 200) { - callback(this.responseText); - } - }; - - x.open(method, action, true); - x.send(); -} \ No newline at end of file From 8d910b0bccac8670fc5cc501c2f2a9f995c8de7f Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Mon, 21 Jun 2021 15:54:32 +0200 Subject: [PATCH 31/47] Updates to js files --- classes/render-headings.js | 2 +- classes/render-rows.js | 11 ++++++++--- classes/render-rows.js.map | 2 +- classes/table-headings.js | 3 +++ classes/table-headings.js.map | 2 +- 5 files changed, 14 insertions(+), 6 deletions(-) diff --git a/classes/render-headings.js b/classes/render-headings.js index 05c9e53b..d981d5e8 100644 --- a/classes/render-headings.js +++ b/classes/render-headings.js @@ -1,4 +1,4 @@ -// create table elements and render in browser +// Create table headings and render in browser var RenderTableHeading = /** @class */ (function () { function RenderTableHeading(container) { this.container = container; diff --git a/classes/render-rows.js b/classes/render-rows.js index ac6f63c1..9d6700e9 100644 --- a/classes/render-rows.js +++ b/classes/render-rows.js @@ -3,18 +3,21 @@ var RenderTableRows = /** @class */ (function () { function RenderTableRows(recordsStr) { this.returnStr = ""; this.arrLength = 0; - var table = document.querySelector('#table'); - var navigation = document.querySelector('#navigation'); - var myArr = JSON.parse(recordsStr); + var table = document.querySelector('#table'); // Target div element with ID table + var navigation = document.querySelector('#navigation'); // Target div element with ID navigation + var myArr = JSON.parse(recordsStr); // Parse the string to create array of the data + // Edit styling of the table and navigation bar table.style.display = "grid"; table.style.gridTemplateRows = "repeat(auto-fill, " + (100 / (myArr.length + 2)) + "%)"; navigation.style.height = (100 / (myArr.length + 2)) + "%"; + // Create innerHTML text to be rendered to front-end in the table div for (var i = 0; i < myArr.length; i++) { for (var j = 0; j < myArr[i].length; j++) { this.arrLength = myArr[i].length; this.returnStr += "

" + myArr[i][j] + "

"; } + // Append innerHTML text to div element in front-end var div = document.createElement('div'); div.innerHTML = this.returnStr; div.className = "tablecell"; @@ -23,9 +26,11 @@ var RenderTableRows = /** @class */ (function () { this.returnStr = ""; } } + // Returns length of array of headings to get number of columns necessary to render RenderTableRows.prototype.arrayLength = function () { return this.arrLength; }; + // Returns formatted string to be placed in html RenderTableRows.prototype.internalFormat = function () { return this.returnStr; }; diff --git a/classes/render-rows.js.map b/classes/render-rows.js.map index b7725fb2..9cb1aeaf 100644 --- a/classes/render-rows.js.map +++ b/classes/render-rows.js.map @@ -1 +1 @@ -{"version":3,"file":"render-rows.js","sourceRoot":"","sources":["render-rows.ts"],"names":[],"mappings":"AAEA,iEAAiE;AACjE;IAIC,yBAAa,UAAkB;QAHvB,cAAS,GAAG,EAAE,CAAC;QACf,cAAS,GAAG,CAAC,CAAC;QAGrB,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAmB,CAAC;QAC/D,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;QACzE,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACnC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC7B,KAAK,CAAC,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,GAAC,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,IAAI,CAAC;QAChF,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,GAAG,CAAC;QAErD,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;YAC/B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAClC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;gBACjC,IAAI,CAAC,SAAS;oBACb,UAAU,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,YAAY,CAAC;aACrC;YACD,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAC/B,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,IAAI,CAAC,SAAS,GAAC,QAAQ,CAAC;YAClE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAClB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACpB;IACF,CAAC;IAED,qCAAW,GAAX;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,wCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,sBAAC;AAAD,CAAC,AAlCD,IAkCC"} \ No newline at end of file +{"version":3,"file":"render-rows.js","sourceRoot":"","sources":["render-rows.ts"],"names":[],"mappings":"AAEA,iEAAiE;AACjE;IAIC,yBAAa,UAAkB;QAHvB,cAAS,GAAG,EAAE,CAAC;QACf,cAAS,GAAG,CAAC,CAAC;QAGrB,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAmB,CAAC,CAAI,mCAAmC;QACtG,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC,CAAC,wCAAwC;QAClH,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAW,+CAA+C;QAE7F,+CAA+C;QAC/C,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC7B,KAAK,CAAC,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,GAAC,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,IAAI,CAAC;QAChF,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,GAAG,CAAC;QAErD,qEAAqE;QACrE,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;YAC/B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAClC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;gBACjC,IAAI,CAAC,SAAS;oBACb,UAAU,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,YAAY,CAAC;aACrC;YAED,oDAAoD;YACpD,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAC/B,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,IAAI,CAAC,SAAS,GAAC,QAAQ,CAAC;YAClE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAClB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACpB;IACF,CAAC;IAED,mFAAmF;IACnF,qCAAW,GAAX;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,gDAAgD;IAChD,wCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,sBAAC;AAAD,CAAC,AAzCD,IAyCC"} \ No newline at end of file diff --git a/classes/table-headings.js b/classes/table-headings.js index 99328417..bad67e15 100644 --- a/classes/table-headings.js +++ b/classes/table-headings.js @@ -5,14 +5,17 @@ var TableHeadingString = /** @class */ (function () { this.arrLength = 0; var myArr = JSON.parse(headingsStr); this.arrLength = myArr.length; + // Create innerHTML text to be rendered to front-end in the table div for (var i = 0; i < myArr.length; i++) { this.returnStr += "

" + myArr[i] + "

"; } } + // Returns length of array of headings to get number of columns necessary to render TableHeadingString.prototype.arrayLength = function () { return this.arrLength; }; + // Returns formatted string to be placed in html TableHeadingString.prototype.internalFormat = function () { return this.returnStr; }; diff --git a/classes/table-headings.js.map b/classes/table-headings.js.map index b6ddef84..4d86fe75 100644 --- a/classes/table-headings.js.map +++ b/classes/table-headings.js.map @@ -1 +1 @@ -{"version":3,"file":"table-headings.js","sourceRoot":"","sources":["table-headings.ts"],"names":[],"mappings":"AAEA,+CAA+C;AAC/C;IAIC,4BAAa,WAAmB;QAHxB,cAAS,GAAG,EAAE,CAAC;QACf,cAAS,GAAG,CAAC,CAAC;QAGrB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;QAC9B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;YAC9B,IAAI,CAAC,SAAS;gBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;SACxC;IACF,CAAC;IAED,wCAAW,GAAX;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,2CAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,yBAAC;AAAD,CAAC,AApBD,IAoBC"} \ No newline at end of file +{"version":3,"file":"table-headings.js","sourceRoot":"","sources":["table-headings.ts"],"names":[],"mappings":"AAEA,+CAA+C;AAC/C;IAIC,4BAAa,WAAmB;QAHxB,cAAS,GAAG,EAAE,CAAC;QACf,cAAS,GAAG,CAAC,CAAC;QAGrB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;QAE9B,qEAAqE;QACrE,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;YAC9B,IAAI,CAAC,SAAS;gBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;SACxC;IACF,CAAC;IAED,mFAAmF;IACnF,wCAAW,GAAX;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,gDAAgD;IAChD,2CAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,yBAAC;AAAD,CAAC,AAxBD,IAwBC"} \ No newline at end of file From 89169761940f855fccb983c7f9e67cadb0b83e41 Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Mon, 21 Jun 2021 16:46:06 +0200 Subject: [PATCH 32/47] Remove .js and .js.map files --- .gitignore | 4 +++ classes/create-table.ts | 0 classes/render-headings.js | 16 ------------ classes/render-headings.js.map | 1 - classes/render-rows.js | 40 ----------------------------- classes/render-rows.js.map | 1 - classes/table-headings.js | 25 ------------------ classes/table-headings.js.map | 1 - interfaces/has-format-method.js | 2 -- interfaces/has-format-method.js.map | 1 - 10 files changed, 4 insertions(+), 87 deletions(-) create mode 100644 classes/create-table.ts delete mode 100644 classes/render-headings.js delete mode 100644 classes/render-headings.js.map delete mode 100644 classes/render-rows.js delete mode 100644 classes/render-rows.js.map delete mode 100644 classes/table-headings.js delete mode 100644 classes/table-headings.js.map delete mode 100644 interfaces/has-format-method.js delete mode 100644 interfaces/has-format-method.js.map diff --git a/.gitignore b/.gitignore index 0872c36c..39ff1602 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,7 @@ /node_modules +/classes/*.js +/classes/*.js.map +/interfaces/*.js +/interfaces/*.js.map app.js app.js.map diff --git a/classes/create-table.ts b/classes/create-table.ts new file mode 100644 index 00000000..e69de29b diff --git a/classes/render-headings.js b/classes/render-headings.js deleted file mode 100644 index d981d5e8..00000000 --- a/classes/render-headings.js +++ /dev/null @@ -1,16 +0,0 @@ -// Create table headings and render in browser -var RenderTableHeading = /** @class */ (function () { - function RenderTableHeading(container) { - this.container = container; - } - RenderTableHeading.prototype.constructTableHeadings = function (element) { - var div = document.createElement('div'); - div.innerHTML = element.internalFormat(); - div.className = "tablecell"; - div.style.gridTemplateColumns = "repeat(" + element.arrayLength() + ", 1fr)"; - this.container.append(div); - }; - return RenderTableHeading; -}()); -export { RenderTableHeading }; -//# sourceMappingURL=render-headings.js.map \ No newline at end of file diff --git a/classes/render-headings.js.map b/classes/render-headings.js.map deleted file mode 100644 index 8979edd0..00000000 --- a/classes/render-headings.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"render-headings.js","sourceRoot":"","sources":["render-headings.ts"],"names":[],"mappings":"AAEA,8CAA8C;AAC9C;IACI,4BAAoB,SAAyB;QAAzB,cAAS,GAAT,SAAS,CAAgB;IAAG,CAAC;IAEjD,mDAAsB,GAAtB,UAAuB,OAAwB;QAC3C,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACxC,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC;QACzC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;QAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,OAAO,CAAC,WAAW,EAAE,GAAC,QAAQ,CAAC;QAEzE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IAC/B,CAAC;IACL,yBAAC;AAAD,CAAC,AAXD,IAWC"} \ No newline at end of file diff --git a/classes/render-rows.js b/classes/render-rows.js deleted file mode 100644 index 9d6700e9..00000000 --- a/classes/render-rows.js +++ /dev/null @@ -1,40 +0,0 @@ -// generate html string for table rows data and render in browser -var RenderTableRows = /** @class */ (function () { - function RenderTableRows(recordsStr) { - this.returnStr = ""; - this.arrLength = 0; - var table = document.querySelector('#table'); // Target div element with ID table - var navigation = document.querySelector('#navigation'); // Target div element with ID navigation - var myArr = JSON.parse(recordsStr); // Parse the string to create array of the data - // Edit styling of the table and navigation bar - table.style.display = "grid"; - table.style.gridTemplateRows = "repeat(auto-fill, " + (100 / (myArr.length + 2)) + "%)"; - navigation.style.height = (100 / (myArr.length + 2)) + "%"; - // Create innerHTML text to be rendered to front-end in the table div - for (var i = 0; i < myArr.length; i++) { - for (var j = 0; j < myArr[i].length; j++) { - this.arrLength = myArr[i].length; - this.returnStr += - "

" + myArr[i][j] + "

"; - } - // Append innerHTML text to div element in front-end - var div = document.createElement('div'); - div.innerHTML = this.returnStr; - div.className = "tablecell"; - div.style.gridTemplateColumns = "repeat(" + this.arrLength + ", 1fr)"; - table.append(div); - this.returnStr = ""; - } - } - // Returns length of array of headings to get number of columns necessary to render - RenderTableRows.prototype.arrayLength = function () { - return this.arrLength; - }; - // Returns formatted string to be placed in html - RenderTableRows.prototype.internalFormat = function () { - return this.returnStr; - }; - return RenderTableRows; -}()); -export { RenderTableRows }; -//# sourceMappingURL=render-rows.js.map \ No newline at end of file diff --git a/classes/render-rows.js.map b/classes/render-rows.js.map deleted file mode 100644 index 9cb1aeaf..00000000 --- a/classes/render-rows.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"render-rows.js","sourceRoot":"","sources":["render-rows.ts"],"names":[],"mappings":"AAEA,iEAAiE;AACjE;IAIC,yBAAa,UAAkB;QAHvB,cAAS,GAAG,EAAE,CAAC;QACf,cAAS,GAAG,CAAC,CAAC;QAGrB,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAmB,CAAC,CAAI,mCAAmC;QACtG,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC,CAAC,wCAAwC;QAClH,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAW,+CAA+C;QAE7F,+CAA+C;QAC/C,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAC7B,KAAK,CAAC,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,GAAC,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,IAAI,CAAC;QAChF,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,GAAG,CAAC;QAErD,qEAAqE;QACrE,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;YAC/B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAClC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;gBACjC,IAAI,CAAC,SAAS;oBACb,UAAU,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,YAAY,CAAC;aACrC;YAED,oDAAoD;YACpD,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YAC/B,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,IAAI,CAAC,SAAS,GAAC,QAAQ,CAAC;YAClE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAClB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;SACpB;IACF,CAAC;IAED,mFAAmF;IACnF,qCAAW,GAAX;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,gDAAgD;IAChD,wCAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,sBAAC;AAAD,CAAC,AAzCD,IAyCC"} \ No newline at end of file diff --git a/classes/table-headings.js b/classes/table-headings.js deleted file mode 100644 index bad67e15..00000000 --- a/classes/table-headings.js +++ /dev/null @@ -1,25 +0,0 @@ -// generate html string for table headings data -var TableHeadingString = /** @class */ (function () { - function TableHeadingString(headingsStr) { - this.returnStr = ""; - this.arrLength = 0; - var myArr = JSON.parse(headingsStr); - this.arrLength = myArr.length; - // Create innerHTML text to be rendered to front-end in the table div - for (var i = 0; i < myArr.length; i++) { - this.returnStr += - "

" + myArr[i] + "

"; - } - } - // Returns length of array of headings to get number of columns necessary to render - TableHeadingString.prototype.arrayLength = function () { - return this.arrLength; - }; - // Returns formatted string to be placed in html - TableHeadingString.prototype.internalFormat = function () { - return this.returnStr; - }; - return TableHeadingString; -}()); -export { TableHeadingString }; -//# sourceMappingURL=table-headings.js.map \ No newline at end of file diff --git a/classes/table-headings.js.map b/classes/table-headings.js.map deleted file mode 100644 index 4d86fe75..00000000 --- a/classes/table-headings.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"table-headings.js","sourceRoot":"","sources":["table-headings.ts"],"names":[],"mappings":"AAEA,+CAA+C;AAC/C;IAIC,4BAAa,WAAmB;QAHxB,cAAS,GAAG,EAAE,CAAC;QACf,cAAS,GAAG,CAAC,CAAC;QAGrB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;QAE9B,qEAAqE;QACrE,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;YAC9B,IAAI,CAAC,SAAS;gBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;SACxC;IACF,CAAC;IAED,mFAAmF;IACnF,wCAAW,GAAX;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,gDAAgD;IAChD,2CAAc,GAAd;QACC,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IACF,yBAAC;AAAD,CAAC,AAxBD,IAwBC"} \ No newline at end of file diff --git a/interfaces/has-format-method.js b/interfaces/has-format-method.js deleted file mode 100644 index 2759a963..00000000 --- a/interfaces/has-format-method.js +++ /dev/null @@ -1,2 +0,0 @@ -export {}; -//# sourceMappingURL=has-format-method.js.map \ No newline at end of file diff --git a/interfaces/has-format-method.js.map b/interfaces/has-format-method.js.map deleted file mode 100644 index 95529066..00000000 --- a/interfaces/has-format-method.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"has-format-method.js","sourceRoot":"","sources":["has-format-method.ts"],"names":[],"mappings":""} \ No newline at end of file From 5526bd28b5cf623ee7d31d8259d8b33df3b5297b Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Mon, 21 Jun 2021 16:47:54 +0200 Subject: [PATCH 33/47] Remove empty file --- classes/create-table.ts | 0 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 classes/create-table.ts diff --git a/classes/create-table.ts b/classes/create-table.ts deleted file mode 100644 index e69de29b..00000000 From 4060dcecb7d46287b059922780721a45192025d0 Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Tue, 22 Jun 2021 20:49:09 +0200 Subject: [PATCH 34/47] Fixing code - comments --- app.ts | 82 ++++++++++++++++++++-------------------------------------- 1 file changed, 28 insertions(+), 54 deletions(-) diff --git a/app.ts b/app.ts index 91c0492a..0bea1ca7 100644 --- a/app.ts +++ b/app.ts @@ -22,21 +22,9 @@ createInitialPage(numOfRows); // Listen for change in window size let screenHeight = screen.height; -window.addEventListener('resize', function(event) { +window.addEventListener('resize', () => { screenHeight = window.innerHeight; - - // Change number of rows based on window size - if (screenHeight >= 750) { - numOfRows = 23; - } else if ((screenHeight < 750) && (screenHeight >= 550)) { - numOfRows = 18; - } else if ((screenHeight < 550) && (screenHeight >= 265)) { - numOfRows = 8; - } else if ((screenHeight < 265) && (screenHeight >= 95)) { - numOfRows = 3; - } else if (screenHeight < 95) { - numOfRows = 2; - } + numOfRows = Math.round(screenHeight / 33); // Recreate grid with new set number of rows createInitialPage(numOfRows); @@ -46,7 +34,7 @@ window.addEventListener('resize', function(event) { let clickTimeout: ReturnType; // When clicking on left arrow -$( "#leftarrow" ).on( "click", function() { +$( "#leftarrow" ).on( "click", () => { // Clear the timeout every time if you navigate and you're not at the start ID of all the data if (fromID != 1) { clearTimeout(clickTimeout); @@ -56,22 +44,22 @@ $( "#leftarrow" ).on( "click", function() { let startfrom = document.querySelector("#startfrom") as HTMLInputElement; startfrom.value = ""; - if ((fromID < (numOfRows-1)) && (fromID > 1)) { // If the "from" ID is within the IDs at the beginning of the dataset + if (fromID < (numOfRows-1) && fromID > 1) { // If the "from" ID is within the IDs at the beginning of the dataset fromID = 1; toID = numOfRows; fromIDElement.innerHTML = fromID.toString(); toIDElement.innerHTML = toID.toString(); // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout(function(){ + clickTimeout = setTimeout( () => { // Use resolved promises to fetch data from backend - let headings = Promise.resolve(fetch("/columns").then(res => res.text())); - let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); + let headings = Promise.resolve(fetch("/columns").then(res => res.json())); + let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.json())); // Promise.all([headings, records]).then((values) => { Promise.all([headings, records]).then((values) => { generateTable(values[0], values[1]); }).catch(err => console.log(err)); - }, 500); + }, 200); } else if (fromID === 1) { // If the "from" ID is 1 then set the values and do not make any backend calls fromID = 1; toID = numOfRows; @@ -84,19 +72,19 @@ $( "#leftarrow" ).on( "click", function() { toIDElement.innerHTML = toID.toString(); // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout(function(){ + clickTimeout = setTimeout( () => { // Use resolved promises to fetch data from backend let headings = Promise.resolve(fetch("/columns").then(res => res.text())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); Promise.all([headings, records]).then((values) => { generateTable(values[0], values[1]); }).catch(err => console.log(err)); - }, 500); + }, 200); } }); // Listen for click on right arrow -$( "#rightarrow" ).on( "click", function() { +$( "#rightarrow" ).on( "click", () => { // Clear the timeout every time if you navigate and you're not at the end ID of all the data if (toID != totalNumofRecords) { clearTimeout(clickTimeout); @@ -106,21 +94,21 @@ $( "#rightarrow" ).on( "click", function() { let startfrom = document.querySelector("#startfrom") as HTMLInputElement; startfrom.value = ""; - if ((fromID > (totalNumofRecords-((numOfRows-1)*2)) ) && (fromID < totalNumofRecords) ) { // If the "from" ID is within the IDs at the ending of the dataset + if (fromID > (totalNumofRecords-((numOfRows-1)*2)) && fromID < totalNumofRecords ) { // If the "from" ID is within the IDs at the ending of the dataset fromID = (totalNumofRecords-(numOfRows-1)); toID = totalNumofRecords; fromIDElement.innerHTML = fromID.toString(); toIDElement.innerHTML = toID.toString(); // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout(function(){ + clickTimeout = setTimeout( () => { // Use resolved promises to fetch data from backend let headings = Promise.resolve(fetch("/columns").then(res => res.text())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); Promise.all([headings, records]).then((values) => { generateTable(values[0], values[1]); }).catch(err => console.log(err)); - }, 500); + }, 200); } else if (toID === totalNumofRecords) { // If the "to" ID is the ending ID, then set the values and do not make any backend calls fromID = (totalNumofRecords-(numOfRows-1)); toID = totalNumofRecords; @@ -133,19 +121,19 @@ $( "#rightarrow" ).on( "click", function() { toIDElement.innerHTML = toID.toString(); // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout(function(){ + clickTimeout = setTimeout( () => { // Use resolved promises to fetch data from backend let headings = Promise.resolve(fetch("/columns").then(res => res.text())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); Promise.all([headings, records]).then((values) => { generateTable(values[0], values[1]); }).catch(err => console.log(err)); - }, 500); + }, 200); } }); // Listen for submission in form and use inputs to request data from backend -$( "#submit" ).on( "click", function() { +$( "#submit" ).on( "click", () => { // Clear the timeout every time if you submit on the form clearTimeout(clickTimeout); @@ -167,18 +155,18 @@ $( "#submit" ).on( "click", function() { } // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout(function(){ + clickTimeout = setTimeout( () => { // Use resolved promises to fetch data from backend let headings = Promise.resolve(fetch("/columns").then(res => res.text())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); Promise.all([headings, records]).then((values) => { generateTable(values[0], values[1]); }).catch(err => console.log(err)); - }, 500); + }, 200); }); // Listen for submission in form and use inputs to request data from backend -$( "#gotostart" ).on( "click", function() { +$( "#gotostart" ).on( "click", () => { // Clear the timeout every time if you click to go to start of dataset clearTimeout(clickTimeout); @@ -193,18 +181,18 @@ $( "#gotostart" ).on( "click", function() { toIDElement.innerHTML = toID.toString(); // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout(function(){ + clickTimeout = setTimeout( () => { // Use resolved promises to fetch data from backend let headings = Promise.resolve(fetch("/columns").then(res => res.text())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); Promise.all([headings, records]).then((values) => { generateTable(values[0], values[1]); }).catch(err => console.log(err)); - }, 500); + }, 200); }); -$( "#gotoend" ).on( "click", function() { +$( "#gotoend" ).on( "click", () => { // Clear the timeout every time if you click to go to end of dataset clearTimeout(clickTimeout); @@ -219,14 +207,14 @@ $( "#gotoend" ).on( "click", function() { toIDElement.innerHTML = toID.toString(); // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout(function() { + clickTimeout = setTimeout(() => { // Use resolved promises to fetch data from backend let headings = Promise.resolve(fetch("/columns").then(res => res.text())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); Promise.all([headings, records]).then((values) => { generateTable(values[0], values[1]); }).catch(err => console.log(err)); - }, 500); + }, 200); }); @@ -277,33 +265,19 @@ function createInitialPage(numOfRows: number) { }).catch(err => console.log(err)) // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout(function(){ + clickTimeout = setTimeout(() => { // Use resolved promises to fetch data from backend let headings = Promise.resolve(fetch("/columns").then(res => res.text())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); Promise.all([headings, records]).then((values) => { generateTable(values[0], values[1]); }).catch(err => console.log(err)); - }, 500); + }, 200); } // Function returning number of rows based on window size function getNumOfRows() { // Get height of screen screenHeight = window.innerHeight; - - // Checks to return correct value for number of rows - if (screenHeight >= 750) { - return 23; - } else if ((screenHeight < 750) && (screenHeight >= 550)) { - return 18; - } else if ((screenHeight < 550) && (screenHeight >= 265)) { - return 8; - } else if ((screenHeight < 265) && (screenHeight >= 95)) { - return 3; - } else if (screenHeight < 95) { - return 2; - } else { - return 23; - } + return Math.round(screenHeight/33); } \ No newline at end of file From bf30acf462be4d939f83ecb9797889e23541ddc4 Mon Sep 17 00:00:00 2001 From: geraldtivatyi Date: Wed, 23 Jun 2021 08:35:34 +0200 Subject: [PATCH 35/47] Fixing code - comments from code review --- app.ts | 29 +++++++++++++++++++++++------ classes/render-headings.ts | 6 ++++++ classes/render-rows.ts | 11 ++++++----- index.html | 5 ++++- main.css | 32 ++++++++++++++++++++++++++------ 5 files changed, 65 insertions(+), 18 deletions(-) diff --git a/app.ts b/app.ts index 0bea1ca7..7ec5bd13 100644 --- a/app.ts +++ b/app.ts @@ -18,6 +18,7 @@ fromIDElement.innerHTML = fromID.toString(); toIDElement.innerHTML = toID.toString(); // Create initial page with initial data +createHeadings(numOfRows); createInitialPage(numOfRows); // Listen for change in window size @@ -53,7 +54,7 @@ $( "#leftarrow" ).on( "click", () => { // Create table using the new set IDs inside a set timeout clickTimeout = setTimeout( () => { // Use resolved promises to fetch data from backend - let headings = Promise.resolve(fetch("/columns").then(res => res.json())); + let headings = Promise.resolve(fetch("/columns").then(res => res.json())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.json())); // Promise.all([headings, records]).then((values) => { Promise.all([headings, records]).then((values) => { @@ -219,19 +220,25 @@ $( "#gotoend" ).on( "click", () => { // Function to create table and render in browser +function generateHeadings(headingsStr: string) { + // Instantiate grid table to append innerHTML + let hd = new RenderTableHeading(document.querySelector('#headings') as HTMLDivElement); + + let interfaceHeading: HasFormatMethod; // variable of type interface used in creating table headings + interfaceHeading = new TableHeadingString(headingsStr); // call method to generate string containing table heading element + hd.constructTableHeadings(interfaceHeading); // call method to render table headings element in browser +} + function generateTable(headingsStr: string, recordsStr: string) { // Instantiate grid table to append innerHTML - let tble = new RenderTableHeading(document.querySelector('#table') as HTMLDivElement); + let tble = new RenderTableHeading(document.querySelector('#records') as HTMLDivElement); // Empty the table in the html - let emptyTable = document.querySelector('#table') as HTMLDivElement; + let emptyTable = document.querySelector('#records') as HTMLDivElement; emptyTable.innerHTML = ""; // clear table to empty html // Recreate table with new headings and records data - let interfaceHeading: HasFormatMethod; // variable of type interface used in creating table headings let interfaceRecords: HasFormatMethod; // variable of type interface used in creating table rows - interfaceHeading = new TableHeadingString(headingsStr); // call method to generate string containing table heading element - tble.constructTableHeadings(interfaceHeading); // call method to render table headings element in browser interfaceRecords = new RenderTableRows(recordsStr); // call method to generate string containing table row elements } @@ -240,6 +247,16 @@ function el(s: string) { return document.getElementById(s); } +// Function to create the initial table when loading the page for the first time or when the window size changes +function createHeadings(numOfRows: number) { + //Request for and set the total number of records + fetch("/columns").then(res => res.text()).then((value) => { + generateHeadings(value); + numofrecords.innerHTML = value; + totalNumofRecords = Number(value) - 1; + }).catch(err => console.log(err)) +} + // Function to create the initial table when loading the page for the first time or when the window size changes function createInitialPage(numOfRows: number) { // Clear the timeout every time this function is called diff --git a/classes/render-headings.ts b/classes/render-headings.ts index 1399a393..eef20d71 100644 --- a/classes/render-headings.ts +++ b/classes/render-headings.ts @@ -5,6 +5,12 @@ export class RenderTableHeading { constructor(private container: HTMLDivElement) {} constructTableHeadings(element: HasFormatMethod) { + // let myArr = JSON.parse(recordsStr); + // // CSS + // let headings = document.querySelector('#headings') as HTMLDivElement; // Target div element with ID table + // headings.style.display = "grid"; + // headings.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+3))+"%)"; + let div = document.createElement('div'); div.innerHTML = element.internalFormat(); div.className = "tablecell"; diff --git a/classes/render-rows.ts b/classes/render-rows.ts index 75349551..73da6096 100644 --- a/classes/render-rows.ts +++ b/classes/render-rows.ts @@ -6,14 +6,15 @@ export class RenderTableRows implements HasFormatMethod { private arrLength = 0; constructor( recordsStr: string ){ - let table = document.querySelector('#table') as HTMLDivElement; // Target div element with ID table + // let table = document.querySelector('#table') as HTMLDivElement; // Target div element with ID table + let records = document.querySelector('#records') as HTMLDivElement; // Target div element with ID table let navigation = document.querySelector('#navigation') as HTMLDivElement; // Target div element with ID navigation let myArr = JSON.parse(recordsStr); // Parse the string to create array of the data // Edit styling of the table and navigation bar - table.style.display = "grid"; - table.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+2))+"%)"; - navigation.style.height = (100/(myArr.length+2))+"%"; + records.style.display = "grid"; + records.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+3))+"%)"; + navigation.style.height = (100/(myArr.length+3))+"%"; // Create innerHTML text to be rendered to front-end in the table div for(let i=0;i
-
+
+
+
+
diff --git a/main.css b/main.css index 4ad3375f..ba842641 100644 --- a/main.css +++ b/main.css @@ -121,13 +121,10 @@ body { border-width: thin; width: 100%; height: 100%; - /* display: grid; */ - /* grid-template-rows: repeat(auto-fill, 4%); */ } -#app .table .tablecell { +#app .table .headings .tablecell { display: grid; - /* grid-template-columns: repeat(11, 1fr); */ width: 100%; height: 100%; text-align: center; @@ -135,7 +132,24 @@ body { border-width: thin 0px 0px 0px; } -#app .table .tablecell > div { +#app .table .records .tablecell { + display: grid; + width: 100%; + height: 100%; + text-align: center; + border-style: solid; + border-width: thin 0px 0px 0px; +} + +#app .table .headings .tablecell > div { + display: flex; + justify-content: center; + align-items: center; + border-style: solid; + border-width: 0 thin 0 thin; +} + +#app .table .records .tablecell > div { display: flex; justify-content: center; align-items: center; @@ -143,7 +157,13 @@ body { border-width: 0 thin 0 thin; } -#app .table .tablecell > div p{ +#app .table .headings .tablecell > div p{ + font-size: 10px; + margin: 0px; + padding: 0px; +} + +#app .table .records .tablecell > div p{ font-size: 10px; margin: 0px; padding: 0px; From f63224e1c21d41441d227dc6948ef93f47db1ee8 Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Wed, 23 Jun 2021 09:28:34 +0200 Subject: [PATCH 36/47] Update code --- app.ts | 50 ++++++++++++++++---------------------- classes/render-headings.ts | 7 ++---- classes/render-rows.ts | 5 ++-- 3 files changed, 26 insertions(+), 36 deletions(-) diff --git a/app.ts b/app.ts index 7ec5bd13..d3077261 100644 --- a/app.ts +++ b/app.ts @@ -54,11 +54,10 @@ $( "#leftarrow" ).on( "click", () => { // Create table using the new set IDs inside a set timeout clickTimeout = setTimeout( () => { // Use resolved promises to fetch data from backend - let headings = Promise.resolve(fetch("/columns").then(res => res.json())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.json())); - // Promise.all([headings, records]).then((values) => { - Promise.all([headings, records]).then((values) => { - generateTable(values[0], values[1]); + // Promise.all([records]).then((values) => { + Promise.all([records]).then((values) => { + generateTable(values[0]); }).catch(err => console.log(err)); }, 200); } else if (fromID === 1) { // If the "from" ID is 1 then set the values and do not make any backend calls @@ -75,10 +74,9 @@ $( "#leftarrow" ).on( "click", () => { // Create table using the new set IDs inside a set timeout clickTimeout = setTimeout( () => { // Use resolved promises to fetch data from backend - let headings = Promise.resolve(fetch("/columns").then(res => res.text())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); - Promise.all([headings, records]).then((values) => { - generateTable(values[0], values[1]); + Promise.all([records]).then((values) => { + generateTable(values[0]); }).catch(err => console.log(err)); }, 200); } @@ -104,10 +102,9 @@ $( "#rightarrow" ).on( "click", () => { // Create table using the new set IDs inside a set timeout clickTimeout = setTimeout( () => { // Use resolved promises to fetch data from backend - let headings = Promise.resolve(fetch("/columns").then(res => res.text())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); - Promise.all([headings, records]).then((values) => { - generateTable(values[0], values[1]); + Promise.all([records]).then((values) => { + generateTable(values[0]); }).catch(err => console.log(err)); }, 200); } else if (toID === totalNumofRecords) { // If the "to" ID is the ending ID, then set the values and do not make any backend calls @@ -124,10 +121,9 @@ $( "#rightarrow" ).on( "click", () => { // Create table using the new set IDs inside a set timeout clickTimeout = setTimeout( () => { // Use resolved promises to fetch data from backend - let headings = Promise.resolve(fetch("/columns").then(res => res.text())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); - Promise.all([headings, records]).then((values) => { - generateTable(values[0], values[1]); + Promise.all([records]).then((values) => { + generateTable(values[0]); }).catch(err => console.log(err)); }, 200); } @@ -148,6 +144,7 @@ $( "#submit" ).on( "click", () => { return; } else if (isNaN(startFrom)) { alert("You have not set a value to submit."); + return; } else { fromID = startFrom; toID = fromID + (numOfRows-1); @@ -158,10 +155,9 @@ $( "#submit" ).on( "click", () => { // Create table using the new set IDs inside a set timeout clickTimeout = setTimeout( () => { // Use resolved promises to fetch data from backend - let headings = Promise.resolve(fetch("/columns").then(res => res.text())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); - Promise.all([headings, records]).then((values) => { - generateTable(values[0], values[1]); + Promise.all([records]).then((values) => { + generateTable(values[0]); }).catch(err => console.log(err)); }, 200); }); @@ -184,10 +180,9 @@ $( "#gotostart" ).on( "click", () => { // Create table using the new set IDs inside a set timeout clickTimeout = setTimeout( () => { // Use resolved promises to fetch data from backend - let headings = Promise.resolve(fetch("/columns").then(res => res.text())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); - Promise.all([headings, records]).then((values) => { - generateTable(values[0], values[1]); + Promise.all([records]).then((values) => { + generateTable(values[0]); }).catch(err => console.log(err)); }, 200); }); @@ -210,15 +205,13 @@ $( "#gotoend" ).on( "click", () => { // Create table using the new set IDs inside a set timeout clickTimeout = setTimeout(() => { // Use resolved promises to fetch data from backend - let headings = Promise.resolve(fetch("/columns").then(res => res.text())); let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); - Promise.all([headings, records]).then((values) => { - generateTable(values[0], values[1]); + Promise.all([records]).then((values) => { + generateTable(values[0]); }).catch(err => console.log(err)); }, 200); }); - // Function to create table and render in browser function generateHeadings(headingsStr: string) { // Instantiate grid table to append innerHTML @@ -229,7 +222,7 @@ function generateHeadings(headingsStr: string) { hd.constructTableHeadings(interfaceHeading); // call method to render table headings element in browser } -function generateTable(headingsStr: string, recordsStr: string) { +function generateTable(recordsStr: string) { // Instantiate grid table to append innerHTML let tble = new RenderTableHeading(document.querySelector('#records') as HTMLDivElement); @@ -250,7 +243,7 @@ function el(s: string) { // Function to create the initial table when loading the page for the first time or when the window size changes function createHeadings(numOfRows: number) { //Request for and set the total number of records - fetch("/columns").then(res => res.text()).then((value) => { + fetch("/columns").then(res => res.json()).then((value) => { generateHeadings(value); numofrecords.innerHTML = value; totalNumofRecords = Number(value) - 1; @@ -283,11 +276,10 @@ function createInitialPage(numOfRows: number) { // Create table using the new set IDs inside a set timeout clickTimeout = setTimeout(() => { - // Use resolved promises to fetch data from backend - let headings = Promise.resolve(fetch("/columns").then(res => res.text())); + // Use resolved promises to fetch data from backend let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); - Promise.all([headings, records]).then((values) => { - generateTable(values[0], values[1]); + Promise.all([records]).then((values) => { + generateTable(values[0]); }).catch(err => console.log(err)); }, 200); } diff --git a/classes/render-headings.ts b/classes/render-headings.ts index eef20d71..a4d87bf8 100644 --- a/classes/render-headings.ts +++ b/classes/render-headings.ts @@ -5,11 +5,8 @@ export class RenderTableHeading { constructor(private container: HTMLDivElement) {} constructTableHeadings(element: HasFormatMethod) { - // let myArr = JSON.parse(recordsStr); - // // CSS - // let headings = document.querySelector('#headings') as HTMLDivElement; // Target div element with ID table - // headings.style.display = "grid"; - // headings.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+3))+"%)"; + let headings = document.querySelector('#headings') as HTMLDivElement; // Target div element with ID table + headings.style.height = "3.5%"; let div = document.createElement('div'); div.innerHTML = element.internalFormat(); diff --git a/classes/render-rows.ts b/classes/render-rows.ts index 73da6096..c3b831cc 100644 --- a/classes/render-rows.ts +++ b/classes/render-rows.ts @@ -13,8 +13,9 @@ export class RenderTableRows implements HasFormatMethod { // Edit styling of the table and navigation bar records.style.display = "grid"; - records.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+3))+"%)"; - navigation.style.height = (100/(myArr.length+3))+"%"; + records.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+1))+"%)"; + records.style.height = "96.5%"; + navigation.style.height = (100/(myArr.length+1))+"%"; // Create innerHTML text to be rendered to front-end in the table div for(let i=0;i Date: Wed, 23 Jun 2021 12:52:40 +0200 Subject: [PATCH 37/47] Reworked left and right arrow functions. Reworked global variables --- app.ts | 203 ++++++++++--------------------------- classes/get-records.ts | 36 +++++++ classes/render-headings.ts | 11 +- classes/render-rows.ts | 8 +- 4 files changed, 100 insertions(+), 158 deletions(-) create mode 100644 classes/get-records.ts diff --git a/app.ts b/app.ts index d3077261..dc221bd2 100644 --- a/app.ts +++ b/app.ts @@ -3,22 +3,16 @@ import { RenderTableRows } from "./classes/render-rows.js"; import { RenderTableHeading } from "./classes/render-headings.js"; import { HasFormatMethod } from "./interfaces/has-format-method.js"; -let numOfRows = getNumOfRows(); // Call function to get number of rows to render based on current screen size -let totalNumofRecords: number; // Declare public variable to store total number of records from the server +// Global Variables +let numOfRows = getNumOfRows(); // Call function to get number of rows to render based on current screen size +let totalNumofRecords: number; // Declare public variable to store total number of records from the server +let clickTimeout: ReturnType; // Set a timeout to use for promises when navigating through data -// Accessing form data from front end -let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; -let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; -let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - -// Initializing variables for first page of data let fromID = 1; let toID = numOfRows; -fromIDElement.innerHTML = fromID.toString(); -toIDElement.innerHTML = toID.toString(); // Create initial page with initial data -createHeadings(numOfRows); +createHeadings(); createInitialPage(numOfRows); // Listen for change in window size @@ -31,102 +25,37 @@ window.addEventListener('resize', () => { createInitialPage(numOfRows); }); -// Set a timeout to use for promises when navigating through data -let clickTimeout: ReturnType; - // When clicking on left arrow -$( "#leftarrow" ).on( "click", () => { - // Clear the timeout every time if you navigate and you're not at the start ID of all the data - if (fromID != 1) { - clearTimeout(clickTimeout); - } - - // Clear form value in front-end when navigating data using the arrows - let startfrom = document.querySelector("#startfrom") as HTMLInputElement; - startfrom.value = ""; - +$( "#leftarrow" ).on( "click", () => { if (fromID < (numOfRows-1) && fromID > 1) { // If the "from" ID is within the IDs at the beginning of the dataset fromID = 1; toID = numOfRows; - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - - // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout( () => { - // Use resolved promises to fetch data from backend - let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.json())); - // Promise.all([records]).then((values) => { - Promise.all([records]).then((values) => { - generateTable(values[0]); - }).catch(err => console.log(err)); - }, 200); - } else if (fromID === 1) { // If the "from" ID is 1 then set the values and do not make any backend calls + } else if (fromID === 1) { // If the "from" ID is 1 then set the values and do not make any backend calls fromID = 1; toID = numOfRows; - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - } else { // Else, continue creating table with the set IDs + } else { fromID = fromID - (numOfRows-1); toID = toID - (numOfRows-1); - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - - // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout( () => { - // Use resolved promises to fetch data from backend - let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); - Promise.all([records]).then((values) => { - generateTable(values[0]); - }).catch(err => console.log(err)); - }, 200); } + + getRecords(fromID, toID); + }); // Listen for click on right arrow $( "#rightarrow" ).on( "click", () => { - // Clear the timeout every time if you navigate and you're not at the end ID of all the data - if (toID != totalNumofRecords) { - clearTimeout(clickTimeout); - } - - // Clear form value in front-end when navigating data using the arrows - let startfrom = document.querySelector("#startfrom") as HTMLInputElement; - startfrom.value = ""; - if (fromID > (totalNumofRecords-((numOfRows-1)*2)) && fromID < totalNumofRecords ) { // If the "from" ID is within the IDs at the ending of the dataset fromID = (totalNumofRecords-(numOfRows-1)); toID = totalNumofRecords; - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - - // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout( () => { - // Use resolved promises to fetch data from backend - let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); - Promise.all([records]).then((values) => { - generateTable(values[0]); - }).catch(err => console.log(err)); - }, 200); } else if (toID === totalNumofRecords) { // If the "to" ID is the ending ID, then set the values and do not make any backend calls fromID = (totalNumofRecords-(numOfRows-1)); toID = totalNumofRecords; - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - } else { // Else, continue creating table with the set IDs + } else { fromID = fromID + (numOfRows-1); - fromIDElement.innerHTML = fromID.toString(); toID = toID + (numOfRows-1); - toIDElement.innerHTML = toID.toString(); - - // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout( () => { - // Use resolved promises to fetch data from backend - let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); - Promise.all([records]).then((values) => { - generateTable(values[0]); - }).catch(err => console.log(err)); - }, 200); } + + getRecords(fromID, toID); }); // Listen for submission in form and use inputs to request data from backend @@ -145,21 +74,12 @@ $( "#submit" ).on( "click", () => { } else if (isNaN(startFrom)) { alert("You have not set a value to submit."); return; - } else { - fromID = startFrom; - toID = fromID + (numOfRows-1); - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); } + + fromID = startFrom; + toID = fromID + (numOfRows-1); - // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout( () => { - // Use resolved promises to fetch data from backend - let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); - Promise.all([records]).then((values) => { - generateTable(values[0]); - }).catch(err => console.log(err)); - }, 200); + getRecords(fromID, toID); }); // Listen for submission in form and use inputs to request data from backend @@ -167,49 +87,22 @@ $( "#gotostart" ).on( "click", () => { // Clear the timeout every time if you click to go to start of dataset clearTimeout(clickTimeout); - // Clear form value in front-end when navigating data using the arrows - let startfrom = document.querySelector("#startfrom") as HTMLInputElement; - startfrom.value = ""; - // Set ID values to the start of the dataset fromID = 1; toID = numOfRows; - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout( () => { - // Use resolved promises to fetch data from backend - let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); - Promise.all([records]).then((values) => { - generateTable(values[0]); - }).catch(err => console.log(err)); - }, 200); + getRecords(fromID, toID); }); - $( "#gotoend" ).on( "click", () => { // Clear the timeout every time if you click to go to end of dataset clearTimeout(clickTimeout); - // Clear form value in front-end when navigating data using the arrows - let startfrom = document.querySelector("#startfrom") as HTMLInputElement; - startfrom.value = ""; - // Set ID values to the end of the dataset fromID = totalNumofRecords-(numOfRows-1); toID = totalNumofRecords; - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout(() => { - // Use resolved promises to fetch data from backend - let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); - Promise.all([records]).then((values) => { - generateTable(values[0]); - }).catch(err => console.log(err)); - }, 200); + getRecords(fromID, toID); }); // Function to create table and render in browser @@ -223,9 +116,6 @@ function generateHeadings(headingsStr: string) { } function generateTable(recordsStr: string) { - // Instantiate grid table to append innerHTML - let tble = new RenderTableHeading(document.querySelector('#records') as HTMLDivElement); - // Empty the table in the html let emptyTable = document.querySelector('#records') as HTMLDivElement; emptyTable.innerHTML = ""; // clear table to empty html @@ -235,23 +125,20 @@ function generateTable(recordsStr: string) { interfaceRecords = new RenderTableRows(recordsStr); // call method to generate string containing table row elements } -// Function to target an element in html by its id -function el(s: string) { - return document.getElementById(s); -} - // Function to create the initial table when loading the page for the first time or when the window size changes -function createHeadings(numOfRows: number) { +function createHeadings() { //Request for and set the total number of records - fetch("/columns").then(res => res.json()).then((value) => { + fetch("/columns").then(res => res.text()).then((value) => { generateHeadings(value); - numofrecords.innerHTML = value; - totalNumofRecords = Number(value) - 1; - }).catch(err => console.log(err)) + }).catch(err => console.log(err)); } // Function to create the initial table when loading the page for the first time or when the window size changes function createInitialPage(numOfRows: number) { + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; // Accessing form data from front end + let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; // Accessing form data from front end + let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; // Accessing form data from front end + // Clear the timeout every time this function is called clearTimeout(clickTimeout); @@ -274,14 +161,7 @@ function createInitialPage(numOfRows: number) { totalNumofRecords = Number(value) - 1; }).catch(err => console.log(err)) - // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout(() => { - // Use resolved promises to fetch data from backend - let records = Promise.resolve(fetch("/records?from="+fromID+"&to="+toID).then(res => res.text())); - Promise.all([records]).then((values) => { - generateTable(values[0]); - }).catch(err => console.log(err)); - }, 200); + getRecords(fromID, toID); } // Function returning number of rows based on window size @@ -289,4 +169,31 @@ function getNumOfRows() { // Get height of screen screenHeight = window.innerHeight; return Math.round(screenHeight/33); +} + +// Function returning number of rows based on window size +function getRecords(fromID: number, toID: number) { + let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; // Accessing form data from front end + let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; // Accessing form data from front end + + // Clear the timeout every time if you navigate and you're not at the start ID of all the data + if (fromID != 1) { + clearTimeout(clickTimeout); + } else if (toID != totalNumofRecords) { + clearTimeout(clickTimeout); + } + + // Clear form value in front-end when navigating data using the arrows + let startfrom = document.querySelector("#startfrom") as HTMLInputElement; + startfrom.value = ""; + + fromIDElement.innerHTML = fromID.toString(); + toIDElement.innerHTML = toID.toString(); + + // Create table using the new set IDs inside a set timeout + clickTimeout = setTimeout( () => { + fetch("/records?from="+fromID+"&to="+toID).then(res => res.text()).then((value) => { + generateTable(value); + }).catch(err => console.log(err)) + }, 200); } \ No newline at end of file diff --git a/classes/get-records.ts b/classes/get-records.ts new file mode 100644 index 00000000..1de7b9c0 --- /dev/null +++ b/classes/get-records.ts @@ -0,0 +1,36 @@ +// import { HasFormatMethod } from "../interfaces/has-format-method.js"; + +// generate html string for table rows data and render in browser +export class GetRecords { + + constructor(fromID: number, toID: number, clickTimeout: ReturnType){ + let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; // Accessing form data from front end + let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; // Accessing form data from front end + + // Clear the timeout every time if you navigate and you're not at the start ID of all the data + if (fromID != 1) { + clearTimeout(clickTimeout); + } else if (toID != totalNumofRecords) { + clearTimeout(clickTimeout); + } + + // Clear form value in front-end when navigating data using the arrows + let startfrom = document.querySelector("#startfrom") as HTMLInputElement; + startfrom.value = ""; + + fromIDElement.innerHTML = fromID.toString(); + toIDElement.innerHTML = toID.toString(); + + // Create table using the new set IDs inside a set timeout + clickTimeout = setTimeout( () => { + fetch("/records?from="+fromID+"&to="+toID).then(res => res.text()).then((value) => { + generateTable(value); + }).catch(err => console.log(err)) + }, 200); + } + + // Returns formatted string to be placed in html + internalFormat() { + // return this.returnStr; + } +} \ No newline at end of file diff --git a/classes/render-headings.ts b/classes/render-headings.ts index a4d87bf8..04d449a4 100644 --- a/classes/render-headings.ts +++ b/classes/render-headings.ts @@ -4,14 +4,11 @@ import { HasFormatMethod } from "../interfaces/has-format-method.js"; export class RenderTableHeading { constructor(private container: HTMLDivElement) {} - constructTableHeadings(element: HasFormatMethod) { - let headings = document.querySelector('#headings') as HTMLDivElement; // Target div element with ID table - headings.style.height = "3.5%"; - - let div = document.createElement('div'); - div.innerHTML = element.internalFormat(); + constructTableHeadings(hd: HasFormatMethod) { + let div = document.createElement('div'); + div.innerHTML = hd.internalFormat(); div.className = "tablecell"; - div.style.gridTemplateColumns = "repeat("+element.arrayLength()+", 1fr)"; + div.style.gridTemplateColumns = "repeat("+hd.arrayLength()+", 1fr)"; this.container.append(div); } diff --git a/classes/render-rows.ts b/classes/render-rows.ts index c3b831cc..41d30c34 100644 --- a/classes/render-rows.ts +++ b/classes/render-rows.ts @@ -13,9 +13,11 @@ export class RenderTableRows implements HasFormatMethod { // Edit styling of the table and navigation bar records.style.display = "grid"; - records.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+1))+"%)"; - records.style.height = "96.5%"; - navigation.style.height = (100/(myArr.length+1))+"%"; + records.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+2))+"%)"; + records.style.height = "100%"; + navigation.style.height = (100/(myArr.length+2))+"%"; + let headings = document.querySelector('#headings') as HTMLDivElement; + headings.style.height = 100/(myArr.length+2)+"%"; // Create innerHTML text to be rendered to front-end in the table div for(let i=0;i Date: Mon, 28 Jun 2021 23:38:18 +0200 Subject: [PATCH 38/47] Remove js import statements and combine code in app.ts script --- app.ts | 239 +++++++++++++++++++++----------- classes/get-records.ts | 36 ----- classes/render-headings.ts | 15 -- classes/render-rows.ts | 49 ------- classes/table-headings.ts | 28 ---- index.html | 2 +- interfaces/has-format-method.ts | 5 - package.json | 2 +- 8 files changed, 160 insertions(+), 216 deletions(-) delete mode 100644 classes/get-records.ts delete mode 100644 classes/render-headings.ts delete mode 100644 classes/render-rows.ts delete mode 100644 classes/table-headings.ts delete mode 100644 interfaces/has-format-method.ts diff --git a/app.ts b/app.ts index dc221bd2..017aca2f 100644 --- a/app.ts +++ b/app.ts @@ -1,36 +1,35 @@ -import { TableHeadingString } from "./classes/table-headings.js"; -import { RenderTableRows } from "./classes/render-rows.js"; -import { RenderTableHeading } from "./classes/render-headings.js"; -import { HasFormatMethod } from "./interfaces/has-format-method.js"; - // Global Variables -let numOfRows = getNumOfRows(); // Call function to get number of rows to render based on current screen size -let totalNumofRecords: number; // Declare public variable to store total number of records from the server -let clickTimeout: ReturnType; // Set a timeout to use for promises when navigating through data +let screenHeight = screen.height; +let numOfRows = getNumOfRows(); // Call function to get number of rows to render based on current screen size +let totalNumofRecords: number; +let clickTimeout: ReturnType; +let fromID = 1; +let toID = numOfRows; -let fromID = 1; -let toID = numOfRows; +// Get list of headings +fetch("/columns").then(res => res.text()).then((headingsStr) => { + // Instantiate grid table to append innerHTML + let hd = new RenderTableHeading(document.querySelector('#headings') as HTMLDivElement); + let interfaceHeading: HasFormatMethod; // Variable of type interface used in creating table headings + interfaceHeading = new TableHeadingString(headingsStr); // Call method to generate string containing table heading element + hd.constructTableHeadings(interfaceHeading); // Call method to render table headings element in browser +}).catch(err => console.log(err)); -// Create initial page with initial data -createHeadings(); +// Create initial page createInitialPage(numOfRows); // Listen for change in window size -let screenHeight = screen.height; window.addEventListener('resize', () => { screenHeight = window.innerHeight; - numOfRows = Math.round(screenHeight / 33); + numOfRows = getNumOfRows(); - // Recreate grid with new set number of rows - createInitialPage(numOfRows); + // Get records from backend + getRecords(fromID, toID); }); -// When clicking on left arrow -$( "#leftarrow" ).on( "click", () => { - if (fromID < (numOfRows-1) && fromID > 1) { // If the "from" ID is within the IDs at the beginning of the dataset - fromID = 1; - toID = numOfRows; - } else if (fromID === 1) { // If the "from" ID is 1 then set the values and do not make any backend calls +// Listen for clicks on left arrow +$( "#leftarrow" ).on( "click", () => { + if (fromID < (numOfRows-1) && fromID > 1 || fromID === 1) { fromID = 1; toID = numOfRows; } else { @@ -38,16 +37,13 @@ $( "#leftarrow" ).on( "click", () => { toID = toID - (numOfRows-1); } + // Get records from backend getRecords(fromID, toID); - }); -// Listen for click on right arrow +// Listen for clicks on right arrow $( "#rightarrow" ).on( "click", () => { - if (fromID > (totalNumofRecords-((numOfRows-1)*2)) && fromID < totalNumofRecords ) { // If the "from" ID is within the IDs at the ending of the dataset - fromID = (totalNumofRecords-(numOfRows-1)); - toID = totalNumofRecords; - } else if (toID === totalNumofRecords) { // If the "to" ID is the ending ID, then set the values and do not make any backend calls + if (fromID > (totalNumofRecords-((numOfRows-1)*2)) && fromID < totalNumofRecords || toID === totalNumofRecords) { fromID = (totalNumofRecords-(numOfRows-1)); toID = totalNumofRecords; } else { @@ -55,6 +51,7 @@ $( "#rightarrow" ).on( "click", () => { toID = toID + (numOfRows-1); } + // Get records from backend getRecords(fromID, toID); }); @@ -79,10 +76,11 @@ $( "#submit" ).on( "click", () => { fromID = startFrom; toID = fromID + (numOfRows-1); + // Get records from backend getRecords(fromID, toID); }); -// Listen for submission in form and use inputs to request data from backend +// Listen for click to go to start of data $( "#gotostart" ).on( "click", () => { // Clear the timeout every time if you click to go to start of dataset clearTimeout(clickTimeout); @@ -91,9 +89,11 @@ $( "#gotostart" ).on( "click", () => { fromID = 1; toID = numOfRows; + // Get records from backend getRecords(fromID, toID); }); +// Listen for sclick to go to end of data $( "#gotoend" ).on( "click", () => { // Clear the timeout every time if you click to go to end of dataset clearTimeout(clickTimeout); @@ -102,42 +102,15 @@ $( "#gotoend" ).on( "click", () => { fromID = totalNumofRecords-(numOfRows-1); toID = totalNumofRecords; + // Get records from backend getRecords(fromID, toID); }); -// Function to create table and render in browser -function generateHeadings(headingsStr: string) { - // Instantiate grid table to append innerHTML - let hd = new RenderTableHeading(document.querySelector('#headings') as HTMLDivElement); - - let interfaceHeading: HasFormatMethod; // variable of type interface used in creating table headings - interfaceHeading = new TableHeadingString(headingsStr); // call method to generate string containing table heading element - hd.constructTableHeadings(interfaceHeading); // call method to render table headings element in browser -} - -function generateTable(recordsStr: string) { - // Empty the table in the html - let emptyTable = document.querySelector('#records') as HTMLDivElement; - emptyTable.innerHTML = ""; // clear table to empty html - - // Recreate table with new headings and records data - let interfaceRecords: HasFormatMethod; // variable of type interface used in creating table rows - interfaceRecords = new RenderTableRows(recordsStr); // call method to generate string containing table row elements -} - -// Function to create the initial table when loading the page for the first time or when the window size changes -function createHeadings() { - //Request for and set the total number of records - fetch("/columns").then(res => res.text()).then((value) => { - generateHeadings(value); - }).catch(err => console.log(err)); -} - // Function to create the initial table when loading the page for the first time or when the window size changes function createInitialPage(numOfRows: number) { - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; // Accessing form data from front end - let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; // Accessing form data from front end - let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; // Accessing form data from front end + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; + let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; // Clear the timeout every time this function is called clearTimeout(clickTimeout); @@ -145,22 +118,21 @@ function createInitialPage(numOfRows: number) { // Check if you're at the start or end of the data set, and reset IDs for change in window size if (fromID > (totalNumofRecords-(numOfRows-1))) { fromID = totalNumofRecords-(numOfRows-1); - toID = fromID + (numOfRows-1); - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); } else { fromID = fromID; - toID = fromID + (numOfRows-1); - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); } + + toID = fromID + (numOfRows-1); + fromIDElement.innerHTML = fromID.toString(); + toIDElement.innerHTML = toID.toString(); //Request for and set the total number of records fetch("/recordCount").then(res => res.text()).then((value) => { numofrecords.innerHTML = value; totalNumofRecords = Number(value) - 1; - }).catch(err => console.log(err)) + }).catch(err => console.log(err)); + // Get records from backend getRecords(fromID, toID); } @@ -173,27 +145,132 @@ function getNumOfRows() { // Function returning number of rows based on window size function getRecords(fromID: number, toID: number) { - let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; // Accessing form data from front end - let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; // Accessing form data from front end + let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; + let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; - // Clear the timeout every time if you navigate and you're not at the start ID of all the data - if (fromID != 1) { - clearTimeout(clickTimeout); - } else if (toID != totalNumofRecords) { - clearTimeout(clickTimeout); + // Change fromID and toID according to changes in numOfRows + if (fromID > (totalNumofRecords-(numOfRows-1))) { + fromID = totalNumofRecords-(numOfRows-1); + } else { + fromID = fromID; } + toID = fromID + (numOfRows-1); - // Clear form value in front-end when navigating data using the arrows - let startfrom = document.querySelector("#startfrom") as HTMLInputElement; - startfrom.value = ""; - + // Change innerHTML for fromID and toID fromIDElement.innerHTML = fromID.toString(); toIDElement.innerHTML = toID.toString(); + // Clear the timeout every time if you navigate and you're not at the start ID of all the data + if (fromID != 1 || toID != totalNumofRecords) { + clearTimeout(clickTimeout); + } + // Create table using the new set IDs inside a set timeout clickTimeout = setTimeout( () => { - fetch("/records?from="+fromID+"&to="+toID).then(res => res.text()).then((value) => { - generateTable(value); - }).catch(err => console.log(err)) + let startfrom = document.querySelector("#startfrom") as HTMLInputElement; + startfrom.value = ""; + + fetch("/records?from="+fromID+"&to="+toID).then(res => res.text()).then((recordsStr) => { + // Empty the table in the html + let emptyTable = document.querySelector('#records') as HTMLDivElement; + emptyTable.innerHTML = ""; // Clear table to empty html + + // Recreate table with new headings and records data + let interfaceRecords: HasFormatMethod; // Variable of type interface used in creating table rows + interfaceRecords = new RenderTableRows(recordsStr); // Call method to generate string containing table row elements + }).catch(err => console.log(err)); }, 200); +} + +class RenderTableRows implements HasFormatMethod { + private returnStr = ""; + private arrLength = 0; + + constructor( recordsStr: string ){ + let records = document.querySelector('#records') as HTMLDivElement; + let navigation = document.querySelector('#navigation') as HTMLDivElement; + let myArr = JSON.parse(recordsStr); + + // Edit styling of the table and navigation bar + records.style.display = "grid"; + records.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+2))+"%)"; + records.style.height = "100%"; + navigation.style.height = (100/(myArr.length+2))+"%"; + let headings = document.querySelector('#headings') as HTMLDivElement; + headings.style.height = 100/(myArr.length+2)+"%"; + + // Create innerHTML text to be rendered to front-end in the table div + for(let i=0;i

"+myArr[i][j]+"

"; + } + + // Append innerHTML text to div element in front-end + let div = document.createElement('div'); + div.innerHTML = this.returnStr; + div.className = "tablecell"; + div.style.gridTemplateColumns = "repeat("+this.arrLength+", 1fr)"; + records.append(div); + this.returnStr = ""; + } + } + + // Returns length of array of headings to get number of columns necessary to render + arrayLength() { + return this.arrLength; + } + + // Returns formatted string to be placed in html + internalFormat() { + return this.returnStr; + } +} + +class RenderTableHeading { + constructor(private container: HTMLDivElement) {} + + constructTableHeadings(hd: HasFormatMethod) { + let div = document.createElement('div'); + div.innerHTML = hd.internalFormat(); + div.className = "tablecell"; + div.style.gridTemplateColumns = "repeat("+hd.arrayLength()+", 1fr)"; + + this.container.append(div); + } +} + +class TableHeadingString implements HasFormatMethod { + private returnStr = ""; + private arrLength = 0; + + constructor( headingsStr: string){ + let myArr = JSON.parse(headingsStr); + this.arrLength = myArr.length; + + // Create innerHTML text to be rendered to front-end in the table div + for(let i=0;i

"+myArr[i]+"

"; + } + } + + // Returns length of array of headings to get number of columns necessary to render + arrayLength() { + return this.arrLength; + } + + // Returns formatted string to be placed in html + internalFormat() { + return this.returnStr; + } +} + + + +// Interface with internal format method +interface HasFormatMethod { + arrayLength(): number; + internalFormat(): string; } \ No newline at end of file diff --git a/classes/get-records.ts b/classes/get-records.ts deleted file mode 100644 index 1de7b9c0..00000000 --- a/classes/get-records.ts +++ /dev/null @@ -1,36 +0,0 @@ -// import { HasFormatMethod } from "../interfaces/has-format-method.js"; - -// generate html string for table rows data and render in browser -export class GetRecords { - - constructor(fromID: number, toID: number, clickTimeout: ReturnType){ - let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; // Accessing form data from front end - let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; // Accessing form data from front end - - // Clear the timeout every time if you navigate and you're not at the start ID of all the data - if (fromID != 1) { - clearTimeout(clickTimeout); - } else if (toID != totalNumofRecords) { - clearTimeout(clickTimeout); - } - - // Clear form value in front-end when navigating data using the arrows - let startfrom = document.querySelector("#startfrom") as HTMLInputElement; - startfrom.value = ""; - - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - - // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout( () => { - fetch("/records?from="+fromID+"&to="+toID).then(res => res.text()).then((value) => { - generateTable(value); - }).catch(err => console.log(err)) - }, 200); - } - - // Returns formatted string to be placed in html - internalFormat() { - // return this.returnStr; - } -} \ No newline at end of file diff --git a/classes/render-headings.ts b/classes/render-headings.ts deleted file mode 100644 index 04d449a4..00000000 --- a/classes/render-headings.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { HasFormatMethod } from "../interfaces/has-format-method.js"; - -// Create table headings and render in browser -export class RenderTableHeading { - constructor(private container: HTMLDivElement) {} - - constructTableHeadings(hd: HasFormatMethod) { - let div = document.createElement('div'); - div.innerHTML = hd.internalFormat(); - div.className = "tablecell"; - div.style.gridTemplateColumns = "repeat("+hd.arrayLength()+", 1fr)"; - - this.container.append(div); - } -} \ No newline at end of file diff --git a/classes/render-rows.ts b/classes/render-rows.ts deleted file mode 100644 index 41d30c34..00000000 --- a/classes/render-rows.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { HasFormatMethod } from "../interfaces/has-format-method.js"; - -// generate html string for table rows data and render in browser -export class RenderTableRows implements HasFormatMethod { - private returnStr = ""; - private arrLength = 0; - - constructor( recordsStr: string ){ - // let table = document.querySelector('#table') as HTMLDivElement; // Target div element with ID table - let records = document.querySelector('#records') as HTMLDivElement; // Target div element with ID table - let navigation = document.querySelector('#navigation') as HTMLDivElement; // Target div element with ID navigation - let myArr = JSON.parse(recordsStr); // Parse the string to create array of the data - - // Edit styling of the table and navigation bar - records.style.display = "grid"; - records.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+2))+"%)"; - records.style.height = "100%"; - navigation.style.height = (100/(myArr.length+2))+"%"; - let headings = document.querySelector('#headings') as HTMLDivElement; - headings.style.height = 100/(myArr.length+2)+"%"; - - // Create innerHTML text to be rendered to front-end in the table div - for(let i=0;i

"+myArr[i][j]+"

"; - } - - // Append innerHTML text to div element in front-end - let div = document.createElement('div'); - div.innerHTML = this.returnStr; - div.className = "tablecell"; - div.style.gridTemplateColumns = "repeat("+this.arrLength+", 1fr)"; - records.append(div); - this.returnStr = ""; - } - } - - // Returns length of array of headings to get number of columns necessary to render - arrayLength() { - return this.arrLength; - } - - // Returns formatted string to be placed in html - internalFormat() { - return this.returnStr; - } -} \ No newline at end of file diff --git a/classes/table-headings.ts b/classes/table-headings.ts deleted file mode 100644 index 7554b53a..00000000 --- a/classes/table-headings.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { HasFormatMethod } from "../interfaces/has-format-method.js"; - -// generate html string for table headings data -export class TableHeadingString implements HasFormatMethod { - private returnStr = ""; - private arrLength = 0; - - constructor( headingsStr: string){ - let myArr = JSON.parse(headingsStr); - this.arrLength = myArr.length; - - // Create innerHTML text to be rendered to front-end in the table div - for(let i=0;i

"+myArr[i]+"

"; - } - } - - // Returns length of array of headings to get number of columns necessary to render - arrayLength() { - return this.arrLength; - } - - // Returns formatted string to be placed in html - internalFormat() { - return this.returnStr; - } -} \ No newline at end of file diff --git a/index.html b/index.html index 899821c8..a4f24f19 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ JS Onboard Project + @@ -34,7 +35,6 @@
- diff --git a/interfaces/has-format-method.ts b/interfaces/has-format-method.ts deleted file mode 100644 index 3066c06a..00000000 --- a/interfaces/has-format-method.ts +++ /dev/null @@ -1,5 +0,0 @@ -// interface to ensure methods implementing this interface contain a internalFormat method that returns a string (the string generated for the elements inside the table) -export interface HasFormatMethod { - arrayLength(): number; - internalFormat(): string; -} \ No newline at end of file diff --git a/package.json b/package.json index 0224e7ea..61d763fe 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "onboard-javascript", "version": "1.0.0", "description": "onboarding", - "main": "index.js", + "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "tsc" From 8883bc6f0160373d5bdcfb3be440c61b36be2cb7 Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Mon, 28 Jun 2021 23:39:53 +0200 Subject: [PATCH 39/47] Fix gitignore file --- .gitignore | 4 ---- 1 file changed, 4 deletions(-) diff --git a/.gitignore b/.gitignore index 39ff1602..0872c36c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,3 @@ /node_modules -/classes/*.js -/classes/*.js.map -/interfaces/*.js -/interfaces/*.js.map app.js app.js.map From 2ca2f32117703fbadbe29f124fa41a18eca94583 Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Tue, 29 Jun 2021 18:45:50 +0200 Subject: [PATCH 40/47] Updates --- app.ts | 113 ++++++++++++++++++++++++++++++++++++--------------------- 1 file changed, 72 insertions(+), 41 deletions(-) diff --git a/app.ts b/app.ts index 017aca2f..775c21c7 100644 --- a/app.ts +++ b/app.ts @@ -1,10 +1,6 @@ -// Global Variables -let screenHeight = screen.height; -let numOfRows = getNumOfRows(); // Call function to get number of rows to render based on current screen size -let totalNumofRecords: number; -let clickTimeout: ReturnType; +// let totalNumofRecords: number; let fromID = 1; -let toID = numOfRows; +let toID = getNumOfRows(); // Get list of headings fetch("/columns").then(res => res.text()).then((headingsStr) => { @@ -15,20 +11,30 @@ fetch("/columns").then(res => res.text()).then((headingsStr) => { hd.constructTableHeadings(interfaceHeading); // Call method to render table headings element in browser }).catch(err => console.log(err)); -// Create initial page -createInitialPage(numOfRows); + +fetch("/recordCount").then(res => res.text()).then( + (value) => { + let t = Number(value) - 1; + // Create initial page + createInitialPage(getNumOfRows(), t); + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + numofrecords.innerHTML = value; + } +).catch(err => console.log(err)); // Listen for change in window size window.addEventListener('resize', () => { - screenHeight = window.innerHeight; - numOfRows = getNumOfRows(); - - // Get records from backend - getRecords(fromID, toID); + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML); + console.log(totalNumofRecords); + getRecords(fromID, toID, totalNumofRecords); }); // Listen for clicks on left arrow $( "#leftarrow" ).on( "click", () => { + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.nodeValue); + let numOfRows = getNumOfRows(); if (fromID < (numOfRows-1) && fromID > 1 || fromID === 1) { fromID = 1; toID = numOfRows; @@ -38,11 +44,14 @@ $( "#leftarrow" ).on( "click", () => { } // Get records from backend - getRecords(fromID, toID); + getRecords(fromID, toID, totalNumofRecords); }); // Listen for clicks on right arrow $( "#rightarrow" ).on( "click", () => { + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.nodeValue); + let numOfRows = getNumOfRows(); if (fromID > (totalNumofRecords-((numOfRows-1)*2)) && fromID < totalNumofRecords || toID === totalNumofRecords) { fromID = (totalNumofRecords-(numOfRows-1)); toID = totalNumofRecords; @@ -52,13 +61,16 @@ $( "#rightarrow" ).on( "click", () => { } // Get records from backend - getRecords(fromID, toID); + getRecords(fromID, toID, totalNumofRecords); }); // Listen for submission in form and use inputs to request data from backend $( "#submit" ).on( "click", () => { + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.nodeValue); + let numOfRows = getNumOfRows(); // Clear the timeout every time if you submit on the form - clearTimeout(clickTimeout); + clearTimeout(clickTimeout(fromID, toID)); // Clear form value in from end when navigating data using the arrows let startFromIDElement = document.querySelector('#startfrom') as HTMLInputElement; @@ -77,43 +89,48 @@ $( "#submit" ).on( "click", () => { toID = fromID + (numOfRows-1); // Get records from backend - getRecords(fromID, toID); + getRecords(fromID, toID, totalNumofRecords); }); // Listen for click to go to start of data $( "#gotostart" ).on( "click", () => { + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.nodeValue); + let numOfRows = getNumOfRows(); // Clear the timeout every time if you click to go to start of dataset - clearTimeout(clickTimeout); + clearTimeout(clickTimeout(fromID, toID)); // Set ID values to the start of the dataset fromID = 1; toID = numOfRows; // Get records from backend - getRecords(fromID, toID); + getRecords(fromID, toID, totalNumofRecords); }); // Listen for sclick to go to end of data $( "#gotoend" ).on( "click", () => { + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.nodeValue); + let numOfRows = getNumOfRows(); // Clear the timeout every time if you click to go to end of dataset - clearTimeout(clickTimeout); + clearTimeout(clickTimeout(fromID, toID)); // Set ID values to the end of the dataset fromID = totalNumofRecords-(numOfRows-1); toID = totalNumofRecords; // Get records from backend - getRecords(fromID, toID); + getRecords(fromID, toID, totalNumofRecords); }); // Function to create the initial table when loading the page for the first time or when the window size changes -function createInitialPage(numOfRows: number) { - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; +function createInitialPage(numOfRows: number, totalNumofRecords: number) { let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; // Clear the timeout every time this function is called - clearTimeout(clickTimeout); + clearTimeout(clickTimeout(fromID, toID)); // Check if you're at the start or end of the data set, and reset IDs for change in window size if (fromID > (totalNumofRecords-(numOfRows-1))) { @@ -126,25 +143,18 @@ function createInitialPage(numOfRows: number) { fromIDElement.innerHTML = fromID.toString(); toIDElement.innerHTML = toID.toString(); - //Request for and set the total number of records - fetch("/recordCount").then(res => res.text()).then((value) => { - numofrecords.innerHTML = value; - totalNumofRecords = Number(value) - 1; - }).catch(err => console.log(err)); - // Get records from backend - getRecords(fromID, toID); + getRecords(fromID, toID, totalNumofRecords); } // Function returning number of rows based on window size function getNumOfRows() { - // Get height of screen - screenHeight = window.innerHeight; - return Math.round(screenHeight/33); + return Math.round(window.innerHeight/33); } // Function returning number of rows based on window size -function getRecords(fromID: number, toID: number) { +function getRecords(fromID: number, toID: number, totalNumofRecords: number) { + let numOfRows = getNumOfRows(); let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; @@ -162,15 +172,35 @@ function getRecords(fromID: number, toID: number) { // Clear the timeout every time if you navigate and you're not at the start ID of all the data if (fromID != 1 || toID != totalNumofRecords) { - clearTimeout(clickTimeout); + clearTimeout(clickTimeout(fromID, toID)); } // Create table using the new set IDs inside a set timeout - clickTimeout = setTimeout( () => { + clickTimeout(fromID, toID); + // clickTimeout = setTimeout( () => { + // let startfrom = document.querySelector("#startfrom") as HTMLInputElement; + // startfrom.value = ""; + + // fetch("/records?from="+fromID+"&to="+toID).then(res => res.text()).then((recordsStr) => { + // // Empty the table in the html + // let emptyTable = document.querySelector('#records') as HTMLDivElement; + // emptyTable.innerHTML = ""; // Clear table to empty html + + // // Recreate table with new headings and records data + // let interfaceRecords: HasFormatMethod; // Variable of type interface used in creating table rows + // interfaceRecords = new RenderTableRows(recordsStr); // Call method to generate string containing table row elements + // }).catch(err => console.log(err)); + // }, 200); + + +} + +function clickTimeout(fromID: number, toID: number) { + let timeOut = setTimeout( () => { let startfrom = document.querySelector("#startfrom") as HTMLInputElement; - startfrom.value = ""; + startfrom.value = ""; - fetch("/records?from="+fromID+"&to="+toID).then(res => res.text()).then((recordsStr) => { + fetch("/records?from="+fromID+"&to="+toID).then(res => res.text()).then((recordsStr) => { // Empty the table in the html let emptyTable = document.querySelector('#records') as HTMLDivElement; emptyTable.innerHTML = ""; // Clear table to empty html @@ -178,8 +208,9 @@ function getRecords(fromID: number, toID: number) { // Recreate table with new headings and records data let interfaceRecords: HasFormatMethod; // Variable of type interface used in creating table rows interfaceRecords = new RenderTableRows(recordsStr); // Call method to generate string containing table row elements - }).catch(err => console.log(err)); + }).catch(err => console.log(err)); }, 200); + return timeOut; } class RenderTableRows implements HasFormatMethod { @@ -273,4 +304,4 @@ class TableHeadingString implements HasFormatMethod { interface HasFormatMethod { arrayLength(): number; internalFormat(): string; -} \ No newline at end of file +} From 2115eb424769ab9b3a8f0df0094592798ed1c90c Mon Sep 17 00:00:00 2001 From: geraldtivatyi Date: Tue, 29 Jun 2021 23:56:59 +0200 Subject: [PATCH 41/47] Updates --- app.ts | 97 +++++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 65 insertions(+), 32 deletions(-) diff --git a/app.ts b/app.ts index 775c21c7..a54b1684 100644 --- a/app.ts +++ b/app.ts @@ -1,6 +1,4 @@ -// let totalNumofRecords: number; -let fromID = 1; -let toID = getNumOfRows(); +let timeOut: ReturnType; // Get list of headings fetch("/columns").then(res => res.text()).then((headingsStr) => { @@ -14,30 +12,44 @@ fetch("/columns").then(res => res.text()).then((headingsStr) => { fetch("/recordCount").then(res => res.text()).then( (value) => { + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + numofrecords.innerHTML = value; let t = Number(value) - 1; // Create initial page createInitialPage(getNumOfRows(), t); - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - numofrecords.innerHTML = value; } ).catch(err => console.log(err)); // Listen for change in window size window.addEventListener('resize', () => { + // Clear the timeout every time if you submit on the form + clearTimeout(timeOut); + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML); - console.log(totalNumofRecords); - getRecords(fromID, toID, totalNumofRecords); + let totalNumofRecords = Number(numofrecords.innerHTML)-1; + + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + getRecords(Number(fID.innerHTML), Number(tID.innerHTML), totalNumofRecords); }); // Listen for clicks on left arrow $( "#leftarrow" ).on( "click", () => { + // // Clear the timeout every time if you submit on the form + clearTimeout(timeOut); + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.nodeValue); + let totalNumofRecords = Number(numofrecords.innerHTML)-1; let numOfRows = getNumOfRows(); - if (fromID < (numOfRows-1) && fromID > 1 || fromID === 1) { - fromID = 1; - toID = numOfRows; + + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + + if ((fromID < numOfRows && fromID > 0) || fromID === 0) { + fromID = 0; + toID = numOfRows-1; } else { fromID = fromID - (numOfRows-1); toID = toID - (numOfRows-1); @@ -49,9 +61,18 @@ $( "#leftarrow" ).on( "click", () => { // Listen for clicks on right arrow $( "#rightarrow" ).on( "click", () => { + // Clear the timeout every time if you submit on the form + clearTimeout(timeOut); + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.nodeValue); + let totalNumofRecords = Number(numofrecords.innerHTML)-1; let numOfRows = getNumOfRows(); + + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + if (fromID > (totalNumofRecords-((numOfRows-1)*2)) && fromID < totalNumofRecords || toID === totalNumofRecords) { fromID = (totalNumofRecords-(numOfRows-1)); toID = totalNumofRecords; @@ -66,19 +87,25 @@ $( "#rightarrow" ).on( "click", () => { // Listen for submission in form and use inputs to request data from backend $( "#submit" ).on( "click", () => { + // Clear the timeout every time if you submit on the form + clearTimeout(timeOut); + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.nodeValue); + let totalNumofRecords = Number(numofrecords.innerHTML)-1; let numOfRows = getNumOfRows(); - // Clear the timeout every time if you submit on the form - clearTimeout(clickTimeout(fromID, toID)); + + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); // Clear form value in from end when navigating data using the arrows let startFromIDElement = document.querySelector('#startfrom') as HTMLInputElement; let startFrom = startFromIDElement.valueAsNumber; // Checks to see if you request invalid values in the form - if (startFrom < 1 || startFrom > (totalNumofRecords-(numOfRows-1))) { - alert("The acceptable range is between 1 and "+(totalNumofRecords-(numOfRows-1))); + if (startFrom < 0 || startFrom > (totalNumofRecords-(numOfRows-1))) { + alert("The acceptable range is between 0 and "+(totalNumofRecords-(numOfRows-1))); return; } else if (isNaN(startFrom)) { alert("You have not set a value to submit."); @@ -94,15 +121,16 @@ $( "#submit" ).on( "click", () => { // Listen for click to go to start of data $( "#gotostart" ).on( "click", () => { + // Clear the timeout every time if you click to go to start of dataset + clearTimeout(timeOut); + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.nodeValue); + let totalNumofRecords = Number(numofrecords.innerHTML)-1; let numOfRows = getNumOfRows(); - // Clear the timeout every time if you click to go to start of dataset - clearTimeout(clickTimeout(fromID, toID)); // Set ID values to the start of the dataset - fromID = 1; - toID = numOfRows; + let fromID = 0; + let toID = numOfRows; // Get records from backend getRecords(fromID, toID, totalNumofRecords); @@ -111,14 +139,14 @@ $( "#gotostart" ).on( "click", () => { // Listen for sclick to go to end of data $( "#gotoend" ).on( "click", () => { let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.nodeValue); + let totalNumofRecords = Number(numofrecords.innerHTML)-1; let numOfRows = getNumOfRows(); // Clear the timeout every time if you click to go to end of dataset - clearTimeout(clickTimeout(fromID, toID)); + clearTimeout(timeOut); // Set ID values to the end of the dataset - fromID = totalNumofRecords-(numOfRows-1); - toID = totalNumofRecords; + let fromID = totalNumofRecords-(numOfRows-1); + let toID = totalNumofRecords; // Get records from backend getRecords(fromID, toID, totalNumofRecords); @@ -126,12 +154,17 @@ $( "#gotoend" ).on( "click", () => { // Function to create the initial table when loading the page for the first time or when the window size changes function createInitialPage(numOfRows: number, totalNumofRecords: number) { + // Clear the timeout every time this function is called + clearTimeout(timeOut); + let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; - // Clear the timeout every time this function is called - clearTimeout(clickTimeout(fromID, toID)); - + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + // Check if you're at the start or end of the data set, and reset IDs for change in window size if (fromID > (totalNumofRecords-(numOfRows-1))) { fromID = totalNumofRecords-(numOfRows-1); @@ -172,7 +205,7 @@ function getRecords(fromID: number, toID: number, totalNumofRecords: number) { // Clear the timeout every time if you navigate and you're not at the start ID of all the data if (fromID != 1 || toID != totalNumofRecords) { - clearTimeout(clickTimeout(fromID, toID)); + clearTimeout(timeOut); } // Create table using the new set IDs inside a set timeout @@ -196,7 +229,7 @@ function getRecords(fromID: number, toID: number, totalNumofRecords: number) { } function clickTimeout(fromID: number, toID: number) { - let timeOut = setTimeout( () => { + timeOut = setTimeout( () => { let startfrom = document.querySelector("#startfrom") as HTMLInputElement; startfrom.value = ""; From 329ab1a500b80f2f527925dc3a83af7b7dd8e349 Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Thu, 1 Jul 2021 00:03:50 +0200 Subject: [PATCH 42/47] Updates --- app.ts | 578 +++++++++++++++------------------ has-format-method.js | 2 + has-format-method.js.map | 1 + has-format-method.ts | 6 + index.html | 2 + js-files/table-headings.js | 43 +++ js-files/table-headings.js.map | 1 + js-files/table-headings.ts | 43 +++ 8 files changed, 364 insertions(+), 312 deletions(-) create mode 100644 has-format-method.js create mode 100644 has-format-method.js.map create mode 100644 has-format-method.ts create mode 100644 js-files/table-headings.js create mode 100644 js-files/table-headings.js.map create mode 100644 js-files/table-headings.ts diff --git a/app.ts b/app.ts index a54b1684..fd54fbe8 100644 --- a/app.ts +++ b/app.ts @@ -1,340 +1,294 @@ -let timeOut: ReturnType; +/// -// Get list of headings -fetch("/columns").then(res => res.text()).then((headingsStr) => { - // Instantiate grid table to append innerHTML - let hd = new RenderTableHeading(document.querySelector('#headings') as HTMLDivElement); - let interfaceHeading: HasFormatMethod; // Variable of type interface used in creating table headings - interfaceHeading = new TableHeadingString(headingsStr); // Call method to generate string containing table heading element - hd.constructTableHeadings(interfaceHeading); // Call method to render table headings element in browser -}).catch(err => console.log(err)); +namespace HasFormatMethod { + // Global variable + let timeOut: ReturnType; + // Run functions when window loads + window.onload = () => { + getColumnsHeadings(); + getRecordCount(); + }; + + // Listen for change in window size + window.addEventListener('resize', () => { + // Clear the timeout every time if you submit on the form + clearTimeout(timeOut); -fetch("/recordCount").then(res => res.text()).then( - (value) => { let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - numofrecords.innerHTML = value; - let t = Number(value) - 1; - // Create initial page - createInitialPage(getNumOfRows(), t); - } -).catch(err => console.log(err)); - -// Listen for change in window size -window.addEventListener('resize', () => { - // Clear the timeout every time if you submit on the form - clearTimeout(timeOut); - - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - getRecords(Number(fID.innerHTML), Number(tID.innerHTML), totalNumofRecords); -}); - -// Listen for clicks on left arrow -$( "#leftarrow" ).on( "click", () => { - // // Clear the timeout every time if you submit on the form - clearTimeout(timeOut); - - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); - - if ((fromID < numOfRows && fromID > 0) || fromID === 0) { - fromID = 0; - toID = numOfRows-1; - } else { - fromID = fromID - (numOfRows-1); - toID = toID - (numOfRows-1); - } + let totalNumofRecords = Number(numofrecords.innerHTML)-1; + + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + getRecords(Number(fID.innerHTML), Number(tID.innerHTML), totalNumofRecords); + }); + + // Listen for clicks on left arrow + $( "#leftarrow" ).on( "click", () => { + // // Clear the timeout every time if you submit on the form + clearTimeout(timeOut); + + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML)-1; + let numOfRows = getNumOfRows(); + + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + + if ((fromID < numOfRows && fromID > 0) || fromID === 0) { + fromID = 0; + toID = numOfRows-1; + } else { + fromID = fromID - (numOfRows-1); + toID = toID - (numOfRows-1); + } - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); -}); - -// Listen for clicks on right arrow -$( "#rightarrow" ).on( "click", () => { - // Clear the timeout every time if you submit on the form - clearTimeout(timeOut); - - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); - - if (fromID > (totalNumofRecords-((numOfRows-1)*2)) && fromID < totalNumofRecords || toID === totalNumofRecords) { - fromID = (totalNumofRecords-(numOfRows-1)); - toID = totalNumofRecords; - } else { - fromID = fromID + (numOfRows-1); - toID = toID + (numOfRows-1); - } - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); -}); - -// Listen for submission in form and use inputs to request data from backend -$( "#submit" ).on( "click", () => { - // Clear the timeout every time if you submit on the form - clearTimeout(timeOut); - - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); - - // Clear form value in from end when navigating data using the arrows - let startFromIDElement = document.querySelector('#startfrom') as HTMLInputElement; - let startFrom = startFromIDElement.valueAsNumber; - - // Checks to see if you request invalid values in the form - if (startFrom < 0 || startFrom > (totalNumofRecords-(numOfRows-1))) { - alert("The acceptable range is between 0 and "+(totalNumofRecords-(numOfRows-1))); - return; - } else if (isNaN(startFrom)) { - alert("You have not set a value to submit."); - return; - } - - fromID = startFrom; - toID = fromID + (numOfRows-1); - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); -}); - -// Listen for click to go to start of data -$( "#gotostart" ).on( "click", () => { - // Clear the timeout every time if you click to go to start of dataset - clearTimeout(timeOut); - - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); - - // Set ID values to the start of the dataset - let fromID = 0; - let toID = numOfRows; - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); -}); - -// Listen for sclick to go to end of data -$( "#gotoend" ).on( "click", () => { - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); - // Clear the timeout every time if you click to go to end of dataset - clearTimeout(timeOut); - - // Set ID values to the end of the dataset - let fromID = totalNumofRecords-(numOfRows-1); - let toID = totalNumofRecords; - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); -}); - -// Function to create the initial table when loading the page for the first time or when the window size changes -function createInitialPage(numOfRows: number, totalNumofRecords: number) { - // Clear the timeout every time this function is called - clearTimeout(timeOut); - - let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; - let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); - - // Check if you're at the start or end of the data set, and reset IDs for change in window size - if (fromID > (totalNumofRecords-(numOfRows-1))) { - fromID = totalNumofRecords-(numOfRows-1); - } else { - fromID = fromID; - } - - toID = fromID + (numOfRows-1); - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); -} - -// Function returning number of rows based on window size -function getNumOfRows() { - return Math.round(window.innerHeight/33); -} - -// Function returning number of rows based on window size -function getRecords(fromID: number, toID: number, totalNumofRecords: number) { - let numOfRows = getNumOfRows(); - let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; - let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; - - // Change fromID and toID according to changes in numOfRows - if (fromID > (totalNumofRecords-(numOfRows-1))) { - fromID = totalNumofRecords-(numOfRows-1); - } else { - fromID = fromID; - } - toID = fromID + (numOfRows-1); + // Get records from backend + getRecords(fromID, toID, totalNumofRecords); + }); + + // Listen for clicks on right arrow + $( "#rightarrow" ).on( "click", () => { + console.log("I made it here"); + // Clear the timeout every time if you submit on the form + clearTimeout(timeOut); - // Change innerHTML for fromID and toID - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML)-1; + let numOfRows = getNumOfRows(); - // Clear the timeout every time if you navigate and you're not at the start ID of all the data - if (fromID != 1 || toID != totalNumofRecords) { + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + + if (fromID > (totalNumofRecords-((numOfRows-1)*2)) && fromID < totalNumofRecords || toID === totalNumofRecords) { + fromID = (totalNumofRecords-(numOfRows-1)); + toID = totalNumofRecords; + } else { + fromID = fromID + (numOfRows-1); + toID = toID + (numOfRows-1); + } + + + // Get records from backend + getRecords(fromID, toID, totalNumofRecords); + }); + + // Listen for submission in form and use inputs to request data from backend + $( "#submit" ).on( "click", () => { + // Clear the timeout every time if you submit on the form clearTimeout(timeOut); - } - // Create table using the new set IDs inside a set timeout - clickTimeout(fromID, toID); - // clickTimeout = setTimeout( () => { - // let startfrom = document.querySelector("#startfrom") as HTMLInputElement; - // startfrom.value = ""; - - // fetch("/records?from="+fromID+"&to="+toID).then(res => res.text()).then((recordsStr) => { - // // Empty the table in the html - // let emptyTable = document.querySelector('#records') as HTMLDivElement; - // emptyTable.innerHTML = ""; // Clear table to empty html - - // // Recreate table with new headings and records data - // let interfaceRecords: HasFormatMethod; // Variable of type interface used in creating table rows - // interfaceRecords = new RenderTableRows(recordsStr); // Call method to generate string containing table row elements - // }).catch(err => console.log(err)); - // }, 200); - - -} - -function clickTimeout(fromID: number, toID: number) { - timeOut = setTimeout( () => { - let startfrom = document.querySelector("#startfrom") as HTMLInputElement; - startfrom.value = ""; - - fetch("/records?from="+fromID+"&to="+toID).then(res => res.text()).then((recordsStr) => { - // Empty the table in the html - let emptyTable = document.querySelector('#records') as HTMLDivElement; - emptyTable.innerHTML = ""; // Clear table to empty html - - // Recreate table with new headings and records data - let interfaceRecords: HasFormatMethod; // Variable of type interface used in creating table rows - interfaceRecords = new RenderTableRows(recordsStr); // Call method to generate string containing table row elements - }).catch(err => console.log(err)); - }, 200); - return timeOut; -} - -class RenderTableRows implements HasFormatMethod { - private returnStr = ""; - private arrLength = 0; - - constructor( recordsStr: string ){ - let records = document.querySelector('#records') as HTMLDivElement; - let navigation = document.querySelector('#navigation') as HTMLDivElement; - let myArr = JSON.parse(recordsStr); - - // Edit styling of the table and navigation bar - records.style.display = "grid"; - records.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+2))+"%)"; - records.style.height = "100%"; - navigation.style.height = (100/(myArr.length+2))+"%"; - let headings = document.querySelector('#headings') as HTMLDivElement; - headings.style.height = 100/(myArr.length+2)+"%"; + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML)-1; + let numOfRows = getNumOfRows(); + + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + + // Clear form value in from end when navigating data using the arrows + let startFromIDElement = document.querySelector('#startfrom') as HTMLInputElement; + let startFrom = startFromIDElement.valueAsNumber; + + // Checks to see if you request invalid values in the form + if (startFrom < 0 || startFrom > (totalNumofRecords-(numOfRows-1))) { + alert("The acceptable range is between 0 and "+(totalNumofRecords-(numOfRows-1))); + return; + } else if (isNaN(startFrom)) { + alert("You have not set a value to submit."); + return; + } - // Create innerHTML text to be rendered to front-end in the table div - for(let i=0;i

"+myArr[i][j]+"

"; - } + fromID = startFrom; + toID = fromID + (numOfRows-1); + + // Get records from backend + getRecords(fromID, toID, totalNumofRecords); + }); + + // Listen for click to go to start of data + $( "#gotostart" ).on( "click", () => { + // Clear the timeout every time if you click to go to start of dataset + clearTimeout(timeOut); - // Append innerHTML text to div element in front-end - let div = document.createElement('div'); - div.innerHTML = this.returnStr; - div.className = "tablecell"; - div.style.gridTemplateColumns = "repeat("+this.arrLength+", 1fr)"; - records.append(div); - this.returnStr = ""; + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML)-1; + let numOfRows = getNumOfRows(); + + // Set ID values to the start of the dataset + let fromID = 0; + let toID = numOfRows; + + // Get records from backend + getRecords(fromID, toID, totalNumofRecords); + }); + + // Listen for sclick to go to end of data + $( "#gotoend" ).on( "click", () => { + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML)-1; + let numOfRows = getNumOfRows(); + // Clear the timeout every time if you click to go to end of dataset + clearTimeout(timeOut); + + // Set ID values to the end of the dataset + let fromID = totalNumofRecords-(numOfRows-1); + let toID = totalNumofRecords; + + // Get records from backend + getRecords(fromID, toID, totalNumofRecords); + }); + + // Function to create the initial table when loading the page for the first time or when the window size changes + function createInitialPage(numOfRows: number, totalNumofRecords: number) { + // Clear the timeout every time this function is called + clearTimeout(timeOut); + + let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; + let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; + + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + + // Check if you're at the start or end of the data set, and reset IDs for change in window size + if (fromID > (totalNumofRecords-(numOfRows-1))) { + fromID = totalNumofRecords-(numOfRows-1); + } else { + fromID = fromID; } - } + + toID = fromID + (numOfRows-1); + fromIDElement.innerHTML = fromID.toString(); + toIDElement.innerHTML = toID.toString(); - // Returns length of array of headings to get number of columns necessary to render - arrayLength() { - return this.arrLength; + // Get records from backend + getRecords(fromID, toID, totalNumofRecords); } - // Returns formatted string to be placed in html - internalFormat() { - return this.returnStr; + // Function returning number of rows based on window size + function getNumOfRows() { + return Math.round(window.innerHeight/33); } -} -class RenderTableHeading { - constructor(private container: HTMLDivElement) {} - - constructTableHeadings(hd: HasFormatMethod) { - let div = document.createElement('div'); - div.innerHTML = hd.internalFormat(); - div.className = "tablecell"; - div.style.gridTemplateColumns = "repeat("+hd.arrayLength()+", 1fr)"; + // Function returning number of rows based on window size + function getRecords(fromID: number, toID: number, totalNumofRecords: number) { + let numOfRows = getNumOfRows(); + let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; + let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; + + // Change fromID and toID according to changes in numOfRows + if (fromID > (totalNumofRecords-(numOfRows-1))) { + fromID = totalNumofRecords-(numOfRows-1); + } else { + fromID = fromID; + } + toID = fromID + (numOfRows-1); - this.container.append(div); - } -} + // Change innerHTML for fromID and toID + fromIDElement.innerHTML = fromID.toString(); + toIDElement.innerHTML = toID.toString(); -class TableHeadingString implements HasFormatMethod { - private returnStr = ""; - private arrLength = 0; + // Clear the timeout every time if you navigate and you're not at the start ID of all the data + if (fromID != 1 || toID != totalNumofRecords) { + clearTimeout(timeOut); + } - constructor( headingsStr: string){ - let myArr = JSON.parse(headingsStr); - this.arrLength = myArr.length; + // Create table using the new set IDs inside a set timeout + clickTimeout(fromID, toID); + } - // Create innerHTML text to be rendered to front-end in the table div - for(let i=0;i

"+myArr[i]+"

"; - } + function clickTimeout(fromID: number, toID: number) { + timeOut = setTimeout( () => { + let startfrom = document.querySelector("#startfrom") as HTMLInputElement; + startfrom.value = ""; + + fetch("/records?from="+fromID+"&to="+toID).then(res => res.text()).then((recordsStr) => { + // Empty the table in the html + let emptyTable = document.querySelector('#records') as HTMLDivElement; + emptyTable.innerHTML = ""; // Clear table to empty html + + // Recreate table with new headings and records data + let interfaceRecords: HasFormatMethod; // Variable of type interface used in creating table rows + interfaceRecords = new RenderTableRows(recordsStr); // Call method to generate string containing table row elements + }).catch(err => console.log(err)); + }, 200); + return timeOut; } - // Returns length of array of headings to get number of columns necessary to render - arrayLength() { - return this.arrLength; + function getColumnsHeadings() { + // Get list of headings + fetch("/columns").then(res => res.text()).then((headingsStr) => { + // Instantiate grid table to append innerHTML + let hd = new RenderTableHeading(document.querySelector('#headings') as HTMLDivElement); + let interfaceHeading: HasFormatMethod; // Variable of type interface used in creating table headings + interfaceHeading = new TableHeadingString(headingsStr); // Call method to generate string containing table heading element + hd.constructTableHeadings(interfaceHeading); // Call method to render table headings element in browser + }).catch(err => console.log(err)); } - - // Returns formatted string to be placed in html - internalFormat() { - return this.returnStr; + + function getRecordCount() { + // Get total number of records + fetch("/recordCount").then(res => res.text()).then( + (value) => { + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + numofrecords.innerHTML = value; + let t = Number(value) - 1; + // Create initial page + createInitialPage(getNumOfRows(), t); + } + ).catch(err => console.log(err)); } -} + class RenderTableRows implements HasFormatMethod { + private returnStr = ""; + private arrLength = 0; + + constructor( recordsStr: string ){ + let records = document.querySelector('#records') as HTMLDivElement; + let navigation = document.querySelector('#navigation') as HTMLDivElement; + let myArr = JSON.parse(recordsStr); + + // Edit styling of the table and navigation bar + records.style.display = "grid"; + records.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+2))+"%)"; + records.style.height = "100%"; + navigation.style.height = (100/(myArr.length+2))+"%"; + let headings = document.querySelector('#headings') as HTMLDivElement; + headings.style.height = 100/(myArr.length+2)+"%"; + + // Create innerHTML text to be rendered to front-end in the table div + for(let i=0;i

"+myArr[i][j]+"

"; + } + + // Append innerHTML text to div element in front-end + let div = document.createElement('div'); + div.innerHTML = this.returnStr; + div.className = "tablecell"; + div.style.gridTemplateColumns = "repeat("+this.arrLength+", 1fr)"; + records.append(div); + this.returnStr = ""; + } + } + // Returns length of array of headings to get number of columns necessary to render + arrayLength() { + return this.arrLength; + } -// Interface with internal format method -interface HasFormatMethod { - arrayLength(): number; - internalFormat(): string; -} + // Returns formatted string to be placed in html + internalFormat() { + return this.returnStr; + } + } +} \ No newline at end of file diff --git a/has-format-method.js b/has-format-method.js new file mode 100644 index 00000000..8112ba8d --- /dev/null +++ b/has-format-method.js @@ -0,0 +1,2 @@ +"use strict"; +//# sourceMappingURL=has-format-method.js.map \ No newline at end of file diff --git a/has-format-method.js.map b/has-format-method.js.map new file mode 100644 index 00000000..95529066 --- /dev/null +++ b/has-format-method.js.map @@ -0,0 +1 @@ +{"version":3,"file":"has-format-method.js","sourceRoot":"","sources":["has-format-method.ts"],"names":[],"mappings":""} \ No newline at end of file diff --git a/has-format-method.ts b/has-format-method.ts new file mode 100644 index 00000000..1288e9ea --- /dev/null +++ b/has-format-method.ts @@ -0,0 +1,6 @@ +namespace HasFormatMethod { + export interface HasFormatMethod { + arrayLength(): number; + internalFormat(): string; + } +} \ No newline at end of file diff --git a/index.html b/index.html index a4f24f19..e1d22a39 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,8 @@ JS Onboard Project + + diff --git a/js-files/table-headings.js b/js-files/table-headings.js new file mode 100644 index 00000000..6c5ed7e6 --- /dev/null +++ b/js-files/table-headings.js @@ -0,0 +1,43 @@ +"use strict"; +/// +var HasFormatMethod; +(function (HasFormatMethod) { + var RenderTableHeading = /** @class */ (function () { + function RenderTableHeading(container) { + this.container = container; + } + RenderTableHeading.prototype.constructTableHeadings = function (hd) { + var div = document.createElement('div'); + div.innerHTML = hd.internalFormat(); + div.className = "tablecell"; + div.style.gridTemplateColumns = "repeat(" + hd.arrayLength() + ", 1fr)"; + this.container.append(div); + }; + return RenderTableHeading; + }()); + HasFormatMethod.RenderTableHeading = RenderTableHeading; + var TableHeadingString = /** @class */ (function () { + function TableHeadingString(headingsStr) { + this.returnStr = ""; + this.arrLength = 0; + var myArr = JSON.parse(headingsStr); + this.arrLength = myArr.length; + // Create innerHTML text to be rendered to front-end in the table div + for (var i = 0; i < myArr.length; i++) { + this.returnStr += + "

" + myArr[i] + "

"; + } + } + // Returns length of array of headings to get number of columns necessary to render + TableHeadingString.prototype.arrayLength = function () { + return this.arrLength; + }; + // Returns formatted string to be placed in html + TableHeadingString.prototype.internalFormat = function () { + return this.returnStr; + }; + return TableHeadingString; + }()); + HasFormatMethod.TableHeadingString = TableHeadingString; +})(HasFormatMethod || (HasFormatMethod = {})); +//# sourceMappingURL=table-headings.js.map \ No newline at end of file diff --git a/js-files/table-headings.js.map b/js-files/table-headings.js.map new file mode 100644 index 00000000..6d441f4f --- /dev/null +++ b/js-files/table-headings.js.map @@ -0,0 +1 @@ +{"version":3,"file":"table-headings.js","sourceRoot":"","sources":["table-headings.ts"],"names":[],"mappings":";AAAA,gDAAgD;AAEhD,IAAU,eAAe,CAwCxB;AAxCD,WAAU,eAAe;IACrB;QACI,4BAAoB,SAAyB;YAAzB,cAAS,GAAT,SAAS,CAAgB;QAAG,CAAC;QAGjD,mDAAsB,GAAtB,UAAuB,EAAmB;YACtC,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC;YACpC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,EAAE,CAAC,WAAW,EAAE,GAAC,QAAQ,CAAC;YAEpE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC/B,CAAC;QACL,yBAAC;IAAD,CAAC,AAZD,IAYC;IAZY,kCAAkB,qBAY9B,CAAA;IAED;QAII,4BAAa,WAAmB;YAHxB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;YAE9B,qEAAqE;YACrE,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;gBAC3B,IAAI,CAAC,SAAS;oBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;aAC3C;QACL,CAAC;QAED,mFAAmF;QACnF,wCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,gDAAgD;QAChD,2CAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,yBAAC;IAAD,CAAC,AAxBD,IAwBC;IAxBY,kCAAkB,qBAwB9B,CAAA;AACL,CAAC,EAxCS,eAAe,KAAf,eAAe,QAwCxB"} \ No newline at end of file diff --git a/js-files/table-headings.ts b/js-files/table-headings.ts new file mode 100644 index 00000000..b371157e --- /dev/null +++ b/js-files/table-headings.ts @@ -0,0 +1,43 @@ +/// + +namespace HasFormatMethod { + export class RenderTableHeading { + constructor(private container: HTMLDivElement) {} + + + constructTableHeadings(hd: HasFormatMethod) { + let div = document.createElement('div'); + div.innerHTML = hd.internalFormat(); + div.className = "tablecell"; + div.style.gridTemplateColumns = "repeat("+hd.arrayLength()+", 1fr)"; + + this.container.append(div); + } + } + + export class TableHeadingString implements HasFormatMethod { + private returnStr = ""; + private arrLength = 0; + + constructor( headingsStr: string){ + let myArr = JSON.parse(headingsStr); + this.arrLength = myArr.length; + + // Create innerHTML text to be rendered to front-end in the table div + for(let i=0;i

"+myArr[i]+"

"; + } + } + + // Returns length of array of headings to get number of columns necessary to render + arrayLength() { + return this.arrLength; + } + + // Returns formatted string to be placed in html + internalFormat() { + return this.returnStr; + } + } +} \ No newline at end of file From 1ab3ae16bf4a555c3cb32b672576b37475c2b803 Mon Sep 17 00:00:00 2001 From: geraldtivatyi Date: Thu, 1 Jul 2021 12:56:35 +0200 Subject: [PATCH 43/47] Updates --- app.ts | 16 ++++++++++++++-- index.html | 5 +++-- js-files/render-table-heading.js | 2 ++ js-files/render-table-heading.js.map | 1 + js-files/render-table-heading.ts | 0 js-files/table-headings.js | 15 +-------------- js-files/table-headings.js.map | 2 +- js-files/table-headings.ts | 15 +-------------- 8 files changed, 23 insertions(+), 33 deletions(-) create mode 100644 js-files/render-table-heading.js create mode 100644 js-files/render-table-heading.js.map create mode 100644 js-files/render-table-heading.ts diff --git a/app.ts b/app.ts index fd54fbe8..5888785d 100644 --- a/app.ts +++ b/app.ts @@ -51,7 +51,6 @@ namespace HasFormatMethod { // Listen for clicks on right arrow $( "#rightarrow" ).on( "click", () => { - console.log("I made it here"); // Clear the timeout every time if you submit on the form clearTimeout(timeOut); @@ -227,7 +226,7 @@ namespace HasFormatMethod { fetch("/columns").then(res => res.text()).then((headingsStr) => { // Instantiate grid table to append innerHTML let hd = new RenderTableHeading(document.querySelector('#headings') as HTMLDivElement); - let interfaceHeading: HasFormatMethod; // Variable of type interface used in creating table headings + let interfaceHeading: HasFormatMethod; // Variable of type interface used in creating table headings interfaceHeading = new TableHeadingString(headingsStr); // Call method to generate string containing table heading element hd.constructTableHeadings(interfaceHeading); // Call method to render table headings element in browser }).catch(err => console.log(err)); @@ -291,4 +290,17 @@ namespace HasFormatMethod { return this.returnStr; } } + + class RenderTableHeading { + constructor( private container: HTMLDivElement) {} + + constructTableHeadings(hd: HasFormatMethod) { + let div = document.createElement('div'); + div.innerHTML = hd.internalFormat(); + div.className = "tablecell"; + div.style.gridTemplateColumns = "repeat("+hd.arrayLength()+", 1fr)"; + + this.container.append(div); + } + } } \ No newline at end of file diff --git a/index.html b/index.html index e1d22a39..f20a0b57 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,10 @@ JS Onboard Project - - + + + diff --git a/js-files/render-table-heading.js b/js-files/render-table-heading.js new file mode 100644 index 00000000..a72d6bc1 --- /dev/null +++ b/js-files/render-table-heading.js @@ -0,0 +1,2 @@ +"use strict"; +//# sourceMappingURL=render-table-heading.js.map \ No newline at end of file diff --git a/js-files/render-table-heading.js.map b/js-files/render-table-heading.js.map new file mode 100644 index 00000000..927c854d --- /dev/null +++ b/js-files/render-table-heading.js.map @@ -0,0 +1 @@ +{"version":3,"file":"render-table-heading.js","sourceRoot":"","sources":["render-table-heading.ts"],"names":[],"mappings":""} \ No newline at end of file diff --git a/js-files/render-table-heading.ts b/js-files/render-table-heading.ts new file mode 100644 index 00000000..e69de29b diff --git a/js-files/table-headings.js b/js-files/table-headings.js index 6c5ed7e6..76c0d480 100644 --- a/js-files/table-headings.js +++ b/js-files/table-headings.js @@ -1,21 +1,8 @@ "use strict"; +/// /// var HasFormatMethod; (function (HasFormatMethod) { - var RenderTableHeading = /** @class */ (function () { - function RenderTableHeading(container) { - this.container = container; - } - RenderTableHeading.prototype.constructTableHeadings = function (hd) { - var div = document.createElement('div'); - div.innerHTML = hd.internalFormat(); - div.className = "tablecell"; - div.style.gridTemplateColumns = "repeat(" + hd.arrayLength() + ", 1fr)"; - this.container.append(div); - }; - return RenderTableHeading; - }()); - HasFormatMethod.RenderTableHeading = RenderTableHeading; var TableHeadingString = /** @class */ (function () { function TableHeadingString(headingsStr) { this.returnStr = ""; diff --git a/js-files/table-headings.js.map b/js-files/table-headings.js.map index 6d441f4f..42db73ac 100644 --- a/js-files/table-headings.js.map +++ b/js-files/table-headings.js.map @@ -1 +1 @@ -{"version":3,"file":"table-headings.js","sourceRoot":"","sources":["table-headings.ts"],"names":[],"mappings":";AAAA,gDAAgD;AAEhD,IAAU,eAAe,CAwCxB;AAxCD,WAAU,eAAe;IACrB;QACI,4BAAoB,SAAyB;YAAzB,cAAS,GAAT,SAAS,CAAgB;QAAG,CAAC;QAGjD,mDAAsB,GAAtB,UAAuB,EAAmB;YACtC,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC;YACpC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,EAAE,CAAC,WAAW,EAAE,GAAC,QAAQ,CAAC;YAEpE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC/B,CAAC;QACL,yBAAC;IAAD,CAAC,AAZD,IAYC;IAZY,kCAAkB,qBAY9B,CAAA;IAED;QAII,4BAAa,WAAmB;YAHxB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;YAE9B,qEAAqE;YACrE,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;gBAC3B,IAAI,CAAC,SAAS;oBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;aAC3C;QACL,CAAC;QAED,mFAAmF;QACnF,wCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,gDAAgD;QAChD,2CAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,yBAAC;IAAD,CAAC,AAxBD,IAwBC;IAxBY,kCAAkB,qBAwB9B,CAAA;AACL,CAAC,EAxCS,eAAe,KAAf,eAAe,QAwCxB"} \ No newline at end of file +{"version":3,"file":"table-headings.js","sourceRoot":"","sources":["table-headings.ts"],"names":[],"mappings":";AAAA,kCAAkC;AAClC,gDAAgD;AAEhD,IAAU,eAAe,CA0BxB;AA1BD,WAAU,eAAe;IACrB;QAII,4BAAa,WAAmB;YAHxB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;YAE9B,qEAAqE;YACrE,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;gBAC3B,IAAI,CAAC,SAAS;oBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;aAC3C;QACL,CAAC;QAED,mFAAmF;QACnF,wCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,gDAAgD;QAChD,2CAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,yBAAC;IAAD,CAAC,AAxBD,IAwBC;IAxBY,kCAAkB,qBAwB9B,CAAA;AACL,CAAC,EA1BS,eAAe,KAAf,eAAe,QA0BxB"} \ No newline at end of file diff --git a/js-files/table-headings.ts b/js-files/table-headings.ts index b371157e..851a4ef0 100644 --- a/js-files/table-headings.ts +++ b/js-files/table-headings.ts @@ -1,20 +1,7 @@ +/// /// namespace HasFormatMethod { - export class RenderTableHeading { - constructor(private container: HTMLDivElement) {} - - - constructTableHeadings(hd: HasFormatMethod) { - let div = document.createElement('div'); - div.innerHTML = hd.internalFormat(); - div.className = "tablecell"; - div.style.gridTemplateColumns = "repeat("+hd.arrayLength()+", 1fr)"; - - this.container.append(div); - } - } - export class TableHeadingString implements HasFormatMethod { private returnStr = ""; private arrLength = 0; From 7378b6b3390b7193ef599e8ccec99f02867a8b13 Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Thu, 1 Jul 2021 19:07:17 +0200 Subject: [PATCH 44/47] Updates --- app.ts | 521 ++++++++---------- classes/get-column-headings.js | 14 + classes/get-column-headings.js.map | 1 + classes/get-column-headings.ts | 11 + classes/render-table-headings.js | 20 + classes/render-table-headings.js.map | 1 + classes/render-table-headings.ts | 16 + classes/render-table-rows.js | 47 ++ classes/render-table-rows.js.map | 1 + classes/render-table-rows.ts | 49 ++ .../table-heading-string.js | 11 +- classes/table-heading-string.js.map | 1 + .../table-heading-string.ts | 3 +- has-format-method.ts | 2 +- index.html | 8 +- js-files/render-table-heading.js | 2 - js-files/render-table-heading.js.map | 1 - js-files/render-table-heading.ts | 0 js-files/table-headings.js.map | 1 - 19 files changed, 400 insertions(+), 310 deletions(-) create mode 100644 classes/get-column-headings.js create mode 100644 classes/get-column-headings.js.map create mode 100644 classes/get-column-headings.ts create mode 100644 classes/render-table-headings.js create mode 100644 classes/render-table-headings.js.map create mode 100644 classes/render-table-headings.ts create mode 100644 classes/render-table-rows.js create mode 100644 classes/render-table-rows.js.map create mode 100644 classes/render-table-rows.ts rename js-files/table-headings.js => classes/table-heading-string.js (80%) create mode 100644 classes/table-heading-string.js.map rename js-files/table-headings.ts => classes/table-heading-string.ts (93%) delete mode 100644 js-files/render-table-heading.js delete mode 100644 js-files/render-table-heading.js.map delete mode 100644 js-files/render-table-heading.ts delete mode 100644 js-files/table-headings.js.map diff --git a/app.ts b/app.ts index 5888785d..0f19cec3 100644 --- a/app.ts +++ b/app.ts @@ -1,306 +1,239 @@ /// - -namespace HasFormatMethod { - // Global variable - let timeOut: ReturnType; - - // Run functions when window loads - window.onload = () => { - getColumnsHeadings(); - getRecordCount(); - }; - - // Listen for change in window size - window.addEventListener('resize', () => { - // Clear the timeout every time if you submit on the form - clearTimeout(timeOut); - - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - getRecords(Number(fID.innerHTML), Number(tID.innerHTML), totalNumofRecords); - }); - - // Listen for clicks on left arrow - $( "#leftarrow" ).on( "click", () => { - // // Clear the timeout every time if you submit on the form - clearTimeout(timeOut); - - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); - - if ((fromID < numOfRows && fromID > 0) || fromID === 0) { - fromID = 0; - toID = numOfRows-1; - } else { - fromID = fromID - (numOfRows-1); - toID = toID - (numOfRows-1); - } - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); - }); - - // Listen for clicks on right arrow - $( "#rightarrow" ).on( "click", () => { - // Clear the timeout every time if you submit on the form - clearTimeout(timeOut); - - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); - - if (fromID > (totalNumofRecords-((numOfRows-1)*2)) && fromID < totalNumofRecords || toID === totalNumofRecords) { - fromID = (totalNumofRecords-(numOfRows-1)); - toID = totalNumofRecords; - } else { - fromID = fromID + (numOfRows-1); - toID = toID + (numOfRows-1); - } - - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); - }); - - // Listen for submission in form and use inputs to request data from backend - $( "#submit" ).on( "click", () => { - // Clear the timeout every time if you submit on the form - clearTimeout(timeOut); - - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); - - // Clear form value in from end when navigating data using the arrows - let startFromIDElement = document.querySelector('#startfrom') as HTMLInputElement; - let startFrom = startFromIDElement.valueAsNumber; - - // Checks to see if you request invalid values in the form - if (startFrom < 0 || startFrom > (totalNumofRecords-(numOfRows-1))) { - alert("The acceptable range is between 0 and "+(totalNumofRecords-(numOfRows-1))); - return; - } else if (isNaN(startFrom)) { - alert("You have not set a value to submit."); - return; - } - - fromID = startFrom; - toID = fromID + (numOfRows-1); - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); - }); - - // Listen for click to go to start of data - $( "#gotostart" ).on( "click", () => { - // Clear the timeout every time if you click to go to start of dataset - clearTimeout(timeOut); - - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); - - // Set ID values to the start of the dataset - let fromID = 0; - let toID = numOfRows; - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); - }); - - // Listen for sclick to go to end of data - $( "#gotoend" ).on( "click", () => { - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); - // Clear the timeout every time if you click to go to end of dataset - clearTimeout(timeOut); - - // Set ID values to the end of the dataset - let fromID = totalNumofRecords-(numOfRows-1); - let toID = totalNumofRecords; - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); - }); - - // Function to create the initial table when loading the page for the first time or when the window size changes - function createInitialPage(numOfRows: number, totalNumofRecords: number) { - // Clear the timeout every time this function is called - clearTimeout(timeOut); - - let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; - let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); - - // Check if you're at the start or end of the data set, and reset IDs for change in window size - if (fromID > (totalNumofRecords-(numOfRows-1))) { - fromID = totalNumofRecords-(numOfRows-1); - } else { - fromID = fromID; - } - - toID = fromID + (numOfRows-1); - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); +/// +/// +/// +/// + +// Global variable +let timeOut: ReturnType; + +// Run functions when window loads +window.onload = () => { + HFM.getColumnsHeadings(); + getRecordCount(); +}; + +// Listen for change in window size +window.addEventListener('resize', () => { + // Clear the timeout every time if you submit on the form + clearTimeout(timeOut); + + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML)-1; + + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + getRecords(Number(fID.innerHTML), Number(tID.innerHTML), totalNumofRecords); +}); + +// Listen for clicks on left arrow +$( "#leftarrow" ).on( "click", () => { + // // Clear the timeout every time if you submit on the form + clearTimeout(timeOut); + + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML)-1; + let numOfRows = getNumOfRows(); + + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + + if ((fromID < numOfRows && fromID > 0) || fromID === 0) { + fromID = 0; + toID = numOfRows-1; + } else { + fromID = fromID - (numOfRows-1); + toID = toID - (numOfRows-1); } - // Function returning number of rows based on window size - function getNumOfRows() { - return Math.round(window.innerHeight/33); - } - - // Function returning number of rows based on window size - function getRecords(fromID: number, toID: number, totalNumofRecords: number) { - let numOfRows = getNumOfRows(); - let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; - let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; - - // Change fromID and toID according to changes in numOfRows - if (fromID > (totalNumofRecords-(numOfRows-1))) { - fromID = totalNumofRecords-(numOfRows-1); - } else { - fromID = fromID; - } - toID = fromID + (numOfRows-1); - - // Change innerHTML for fromID and toID - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - - // Clear the timeout every time if you navigate and you're not at the start ID of all the data - if (fromID != 1 || toID != totalNumofRecords) { - clearTimeout(timeOut); - } - - // Create table using the new set IDs inside a set timeout - clickTimeout(fromID, toID); + // Get records from backend + getRecords(fromID, toID, totalNumofRecords); +}); + +// Listen for clicks on right arrow +$( "#rightarrow" ).on( "click", () => { + // Clear the timeout every time if you submit on the form + clearTimeout(timeOut); + + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML)-1; + let numOfRows = getNumOfRows(); + + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + + if (fromID > (totalNumofRecords-((numOfRows-1)*2)) && fromID < totalNumofRecords || toID === totalNumofRecords) { + fromID = (totalNumofRecords-(numOfRows-1)); + toID = totalNumofRecords; + } else { + fromID = fromID + (numOfRows-1); + toID = toID + (numOfRows-1); } - - function clickTimeout(fromID: number, toID: number) { - timeOut = setTimeout( () => { - let startfrom = document.querySelector("#startfrom") as HTMLInputElement; - startfrom.value = ""; - - fetch("/records?from="+fromID+"&to="+toID).then(res => res.text()).then((recordsStr) => { - // Empty the table in the html - let emptyTable = document.querySelector('#records') as HTMLDivElement; - emptyTable.innerHTML = ""; // Clear table to empty html - - // Recreate table with new headings and records data - let interfaceRecords: HasFormatMethod; // Variable of type interface used in creating table rows - interfaceRecords = new RenderTableRows(recordsStr); // Call method to generate string containing table row elements - }).catch(err => console.log(err)); - }, 200); - return timeOut; + + + // Get records from backend + getRecords(fromID, toID, totalNumofRecords); +}); + +// Listen for submission in form and use inputs to request data from backend +$( "#submit" ).on( "click", () => { + // Clear the timeout every time if you submit on the form + clearTimeout(timeOut); + + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML)-1; + let numOfRows = getNumOfRows(); + + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + + // Clear form value in from end when navigating data using the arrows + let startFromIDElement = document.querySelector('#startfrom') as HTMLInputElement; + let startFrom = startFromIDElement.valueAsNumber; + + // Checks to see if you request invalid values in the form + if (startFrom < 0 || startFrom > (totalNumofRecords-(numOfRows-1))) { + alert("The acceptable range is between 0 and "+(totalNumofRecords-(numOfRows-1))); + return; + } else if (isNaN(startFrom)) { + alert("You have not set a value to submit."); + return; } - - function getColumnsHeadings() { - // Get list of headings - fetch("/columns").then(res => res.text()).then((headingsStr) => { - // Instantiate grid table to append innerHTML - let hd = new RenderTableHeading(document.querySelector('#headings') as HTMLDivElement); - let interfaceHeading: HasFormatMethod; // Variable of type interface used in creating table headings - interfaceHeading = new TableHeadingString(headingsStr); // Call method to generate string containing table heading element - hd.constructTableHeadings(interfaceHeading); // Call method to render table headings element in browser - }).catch(err => console.log(err)); + + fromID = startFrom; + toID = fromID + (numOfRows-1); + + // Get records from backend + getRecords(fromID, toID, totalNumofRecords); +}); + +// Listen for click to go to start of data +$( "#gotostart" ).on( "click", () => { + // Clear the timeout every time if you click to go to start of dataset + clearTimeout(timeOut); + + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML)-1; + let numOfRows = getNumOfRows(); + + // Set ID values to the start of the dataset + let fromID = 0; + let toID = numOfRows; + + // Get records from backend + getRecords(fromID, toID, totalNumofRecords); +}); + +// Listen for sclick to go to end of data +$( "#gotoend" ).on( "click", () => { + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML)-1; + let numOfRows = getNumOfRows(); + // Clear the timeout every time if you click to go to end of dataset + clearTimeout(timeOut); + + // Set ID values to the end of the dataset + let fromID = totalNumofRecords-(numOfRows-1); + let toID = totalNumofRecords; + + // Get records from backend + getRecords(fromID, toID, totalNumofRecords); +}); + +// Function to create the initial table when loading the page for the first time or when the window size changes +function createInitialPage(numOfRows: number, totalNumofRecords: number) { + // Clear the timeout every time this function is called + clearTimeout(timeOut); + + let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; + let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; + + let fID = document.querySelector('#fromID') as HTMLParagraphElement; + let tID = document.querySelector('#toID') as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + + // Check if you're at the start or end of the data set, and reset IDs for change in window size + if (fromID > (totalNumofRecords-(numOfRows-1))) { + fromID = totalNumofRecords-(numOfRows-1); + } else { + fromID = fromID; } - - function getRecordCount() { - // Get total number of records - fetch("/recordCount").then(res => res.text()).then( - (value) => { - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - numofrecords.innerHTML = value; - let t = Number(value) - 1; - // Create initial page - createInitialPage(getNumOfRows(), t); - } - ).catch(err => console.log(err)); + + toID = fromID + (numOfRows-1); + fromIDElement.innerHTML = fromID.toString(); + toIDElement.innerHTML = toID.toString(); + + // Get records from backend + getRecords(fromID, toID, totalNumofRecords); +} + +// Function returning number of rows based on window size +function getNumOfRows() { + return Math.round(window.innerHeight/33); +} + +// Function returning number of rows based on window size +function getRecords(fromID: number, toID: number, totalNumofRecords: number) { + let numOfRows = getNumOfRows(); + let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; + let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; + + // Change fromID and toID according to changes in numOfRows + if (fromID > (totalNumofRecords-(numOfRows-1))) { + fromID = totalNumofRecords-(numOfRows-1); + } else { + fromID = fromID; } + toID = fromID + (numOfRows-1); - class RenderTableRows implements HasFormatMethod { - private returnStr = ""; - private arrLength = 0; - - constructor( recordsStr: string ){ - let records = document.querySelector('#records') as HTMLDivElement; - let navigation = document.querySelector('#navigation') as HTMLDivElement; - let myArr = JSON.parse(recordsStr); - - // Edit styling of the table and navigation bar - records.style.display = "grid"; - records.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+2))+"%)"; - records.style.height = "100%"; - navigation.style.height = (100/(myArr.length+2))+"%"; - let headings = document.querySelector('#headings') as HTMLDivElement; - headings.style.height = 100/(myArr.length+2)+"%"; - - // Create innerHTML text to be rendered to front-end in the table div - for(let i=0;i

"+myArr[i][j]+"

"; - } - - // Append innerHTML text to div element in front-end - let div = document.createElement('div'); - div.innerHTML = this.returnStr; - div.className = "tablecell"; - div.style.gridTemplateColumns = "repeat("+this.arrLength+", 1fr)"; - records.append(div); - this.returnStr = ""; - } - } - - // Returns length of array of headings to get number of columns necessary to render - arrayLength() { - return this.arrLength; - } + // Change innerHTML for fromID and toID + fromIDElement.innerHTML = fromID.toString(); + toIDElement.innerHTML = toID.toString(); - // Returns formatted string to be placed in html - internalFormat() { - return this.returnStr; - } + // Clear the timeout every time if you navigate and you're not at the start ID of all the data + if (fromID != 1 || toID != totalNumofRecords) { + clearTimeout(timeOut); } - class RenderTableHeading { - constructor( private container: HTMLDivElement) {} - - constructTableHeadings(hd: HasFormatMethod) { - let div = document.createElement('div'); - div.innerHTML = hd.internalFormat(); - div.className = "tablecell"; - div.style.gridTemplateColumns = "repeat("+hd.arrayLength()+", 1fr)"; - - this.container.append(div); - } - } + // Create table using the new set IDs inside a set timeout + clickTimeout(fromID, toID); +} + +function getRecordCount() { + // Get total number of records + fetch("/recordCount").then(res => res.text()).then( + (value) => { + let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; + numofrecords.innerHTML = value; + let t = Number(value) - 1; + // Create initial page + createInitialPage(getNumOfRows(), t); + } + ).catch(err => console.log(err)); +} + +function clickTimeout(fromID: number, toID: number) { + timeOut = setTimeout( () => { + let startfrom = document.querySelector("#startfrom") as HTMLInputElement; + startfrom.value = ""; + + fetch("/records?from="+fromID+"&to="+toID).then(res => res.text()).then((recordsStr) => { + // Empty the table in the html + let emptyTable = document.querySelector('#records') as HTMLDivElement; + emptyTable.innerHTML = ""; // Clear table to empty html + + // Recreate table with new headings and records data + let interfaceRecords: HFM.RenderTableRows; // Variable of type interface used in creating table rows + + new HFM.RenderTableRows(recordsStr); // Call method to generate string containing table row elements + }).catch(err => console.log(err)); + }, 200); + return timeOut; } \ No newline at end of file diff --git a/classes/get-column-headings.js b/classes/get-column-headings.js new file mode 100644 index 00000000..52bde0e7 --- /dev/null +++ b/classes/get-column-headings.js @@ -0,0 +1,14 @@ +"use strict"; +/// +var HFM; +(function (HFM) { + function getColumnsHeadings() { + fetch("/columns").then(function (res) { return res.text(); }).then(function (headingsStr) { + var hd = new HFM.RenderTableHeading(document.querySelector('#headings')); + var interfaceHeading = new HFM.TableHeadingString(headingsStr); // Call method to generate string containing table heading element + hd.constructTableHeadings(interfaceHeading); // Call method to render table headings element in browser + }).catch(function (err) { return console.log(err); }); + } + HFM.getColumnsHeadings = getColumnsHeadings; +})(HFM || (HFM = {})); +//# sourceMappingURL=get-column-headings.js.map \ No newline at end of file diff --git a/classes/get-column-headings.js.map b/classes/get-column-headings.js.map new file mode 100644 index 00000000..4d8589cb --- /dev/null +++ b/classes/get-column-headings.js.map @@ -0,0 +1 @@ +{"version":3,"file":"get-column-headings.js","sourceRoot":"","sources":["get-column-headings.ts"],"names":[],"mappings":";AAAA,gDAAgD;AAEhD,IAAU,GAAG,CAQZ;AARD,WAAU,GAAG;IACT,SAAgB,kBAAkB;QAC9B,KAAK,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,IAAI,EAAE,EAAV,CAAU,CAAC,CAAC,IAAI,CAAC,UAAC,WAAW;YACvD,IAAI,EAAE,GAAG,IAAI,GAAG,CAAC,kBAAkB,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAmB,CAAC,CAAC;YAC3F,IAAI,gBAAgB,GAAG,IAAI,GAAG,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAG,kEAAkE;YACpI,EAAE,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC,CAAK,0DAA0D;QAC/G,CAAC,CAAC,CAAC,KAAK,CAAC,UAAA,GAAG,IAAI,OAAA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAhB,CAAgB,CAAC,CAAC;IACtC,CAAC;IANe,sBAAkB,qBAMjC,CAAA;AACL,CAAC,EARS,GAAG,KAAH,GAAG,QAQZ"} \ No newline at end of file diff --git a/classes/get-column-headings.ts b/classes/get-column-headings.ts new file mode 100644 index 00000000..105014f0 --- /dev/null +++ b/classes/get-column-headings.ts @@ -0,0 +1,11 @@ +/// + +namespace HFM { + export function getColumnsHeadings() { + fetch("/columns").then(res => res.text()).then((headingsStr) => { + let hd = new HFM.RenderTableHeading(document.querySelector('#headings') as HTMLDivElement); + let interfaceHeading = new HFM.TableHeadingString(headingsStr); // Call method to generate string containing table heading element + hd.constructTableHeadings(interfaceHeading); // Call method to render table headings element in browser + }).catch(err => console.log(err)); + } +} \ No newline at end of file diff --git a/classes/render-table-headings.js b/classes/render-table-headings.js new file mode 100644 index 00000000..1796ebfa --- /dev/null +++ b/classes/render-table-headings.js @@ -0,0 +1,20 @@ +"use strict"; +/// +var HFM; +(function (HFM) { + var RenderTableHeading = /** @class */ (function () { + function RenderTableHeading(container) { + this.container = container; + } + RenderTableHeading.prototype.constructTableHeadings = function (hd) { + var div = document.createElement('div'); + div.innerHTML = hd.internalFormat(); + div.className = "tablecell"; + div.style.gridTemplateColumns = "repeat(" + hd.arrayLength() + ", 1fr)"; + this.container.append(div); + }; + return RenderTableHeading; + }()); + HFM.RenderTableHeading = RenderTableHeading; +})(HFM || (HFM = {})); +//# sourceMappingURL=render-table-headings.js.map \ No newline at end of file diff --git a/classes/render-table-headings.js.map b/classes/render-table-headings.js.map new file mode 100644 index 00000000..5988a6cc --- /dev/null +++ b/classes/render-table-headings.js.map @@ -0,0 +1 @@ +{"version":3,"file":"render-table-headings.js","sourceRoot":"","sources":["render-table-headings.ts"],"names":[],"mappings":";AAAA,gDAAgD;AAEhD,IAAU,GAAG,CAaZ;AAbD,WAAU,GAAG;IACT;QACI,4BAAsB,SAAyB;YAAzB,cAAS,GAAT,SAAS,CAAgB;QAAG,CAAC;QAEnD,mDAAsB,GAAtB,UAAuB,EAAmB;YACtC,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC;YACpC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,EAAE,CAAC,WAAW,EAAE,GAAC,QAAQ,CAAC;YAEpE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC/B,CAAC;QACL,yBAAC;IAAD,CAAC,AAXD,IAWC;IAXY,sBAAkB,qBAW9B,CAAA;AACL,CAAC,EAbS,GAAG,KAAH,GAAG,QAaZ"} \ No newline at end of file diff --git a/classes/render-table-headings.ts b/classes/render-table-headings.ts new file mode 100644 index 00000000..808b6fd2 --- /dev/null +++ b/classes/render-table-headings.ts @@ -0,0 +1,16 @@ +/// + +namespace HFM { + export class RenderTableHeading { + constructor( private container: HTMLDivElement) {} + + constructTableHeadings(hd: HasFormatMethod) { + let div = document.createElement('div'); + div.innerHTML = hd.internalFormat(); + div.className = "tablecell"; + div.style.gridTemplateColumns = "repeat("+hd.arrayLength()+", 1fr)"; + + this.container.append(div); + } + } +} \ No newline at end of file diff --git a/classes/render-table-rows.js b/classes/render-table-rows.js new file mode 100644 index 00000000..bd5da809 --- /dev/null +++ b/classes/render-table-rows.js @@ -0,0 +1,47 @@ +"use strict"; +/// +var HFM; +(function (HFM) { + var RenderTableRows = /** @class */ (function () { + function RenderTableRows(recordsStr) { + this.returnStr = ""; + this.arrLength = 0; + var records = document.querySelector('#records'); + var navigation = document.querySelector('#navigation'); + var myArr = JSON.parse(recordsStr); + // Edit styling of the table and navigation bar + records.style.display = "grid"; + records.style.gridTemplateRows = "repeat(auto-fill, " + (100 / (myArr.length + 2)) + "%)"; + records.style.height = "100%"; + navigation.style.height = (100 / (myArr.length + 2)) + "%"; + var headings = document.querySelector('#headings'); + headings.style.height = 100 / (myArr.length + 2) + "%"; + // Create innerHTML text to be rendered to front-end in the table div + for (var i = 0; i < myArr.length; i++) { + for (var j = 0; j < myArr[i].length; j++) { + this.arrLength = myArr[i].length; + this.returnStr += + "

" + myArr[i][j] + "

"; + } + // Append innerHTML text to div element in front-end + var div = document.createElement('div'); + div.innerHTML = this.returnStr; + div.className = "tablecell"; + div.style.gridTemplateColumns = "repeat(" + this.arrLength + ", 1fr)"; + records.append(div); + this.returnStr = ""; + } + } + // Returns length of array of headings to get number of columns necessary to render + RenderTableRows.prototype.arrayLength = function () { + return this.arrLength; + }; + // Returns formatted string to be placed in html + RenderTableRows.prototype.internalFormat = function () { + return this.returnStr; + }; + return RenderTableRows; + }()); + HFM.RenderTableRows = RenderTableRows; +})(HFM || (HFM = {})); +//# sourceMappingURL=render-table-rows.js.map \ No newline at end of file diff --git a/classes/render-table-rows.js.map b/classes/render-table-rows.js.map new file mode 100644 index 00000000..85b6969f --- /dev/null +++ b/classes/render-table-rows.js.map @@ -0,0 +1 @@ +{"version":3,"file":"render-table-rows.js","sourceRoot":"","sources":["render-table-rows.ts"],"names":[],"mappings":";AAAA,gDAAgD;AAEhD,IAAU,GAAG,CA8CZ;AA9CD,WAAU,GAAG;IACT;QAII,yBAAa,UAAkB;YAHvB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAmB,CAAC;YACnE,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;YACzE,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAEnC,+CAA+C;YAC/C,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,OAAO,CAAC,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,GAAC,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,IAAI,CAAC;YAClF,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC9B,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,GAAG,CAAC;YACrD,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAmB,CAAC;YACrE,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,GAAC,GAAG,CAAC;YAEjD,qEAAqE;YACrE,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAC5B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;oBAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;oBACjC,IAAI,CAAC,SAAS;wBACV,UAAU,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,YAAY,CAAC;iBAC3C;gBAED,oDAAoD;gBACpD,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACxC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;gBAC/B,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;gBAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,IAAI,CAAC,SAAS,GAAC,QAAQ,CAAC;gBAClE,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBACpB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;aACvB;QACL,CAAC;QAED,mFAAmF;QACnF,qCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,gDAAgD;QAChD,wCAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,sBAAC;IAAD,CAAC,AA5CD,IA4CC;IA5CY,mBAAe,kBA4C3B,CAAA;AACL,CAAC,EA9CS,GAAG,KAAH,GAAG,QA8CZ"} \ No newline at end of file diff --git a/classes/render-table-rows.ts b/classes/render-table-rows.ts new file mode 100644 index 00000000..49836e1f --- /dev/null +++ b/classes/render-table-rows.ts @@ -0,0 +1,49 @@ +/// + +namespace HFM { + export class RenderTableRows implements HasFormatMethod { + private returnStr = ""; + private arrLength = 0; + + constructor( recordsStr: string ){ + let records = document.querySelector('#records') as HTMLDivElement; + let navigation = document.querySelector('#navigation') as HTMLDivElement; + let myArr = JSON.parse(recordsStr); + + // Edit styling of the table and navigation bar + records.style.display = "grid"; + records.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+2))+"%)"; + records.style.height = "100%"; + navigation.style.height = (100/(myArr.length+2))+"%"; + let headings = document.querySelector('#headings') as HTMLDivElement; + headings.style.height = 100/(myArr.length+2)+"%"; + + // Create innerHTML text to be rendered to front-end in the table div + for(let i=0;i

"+myArr[i][j]+"

"; + } + + // Append innerHTML text to div element in front-end + let div = document.createElement('div'); + div.innerHTML = this.returnStr; + div.className = "tablecell"; + div.style.gridTemplateColumns = "repeat("+this.arrLength+", 1fr)"; + records.append(div); + this.returnStr = ""; + } + } + + // Returns length of array of headings to get number of columns necessary to render + arrayLength() { + return this.arrLength; + } + + // Returns formatted string to be placed in html + internalFormat() { + return this.returnStr; + } + } +} \ No newline at end of file diff --git a/js-files/table-headings.js b/classes/table-heading-string.js similarity index 80% rename from js-files/table-headings.js rename to classes/table-heading-string.js index 76c0d480..bc4bc2e6 100644 --- a/js-files/table-headings.js +++ b/classes/table-heading-string.js @@ -1,8 +1,7 @@ "use strict"; -/// /// -var HasFormatMethod; -(function (HasFormatMethod) { +var HFM; +(function (HFM) { var TableHeadingString = /** @class */ (function () { function TableHeadingString(headingsStr) { this.returnStr = ""; @@ -25,6 +24,6 @@ var HasFormatMethod; }; return TableHeadingString; }()); - HasFormatMethod.TableHeadingString = TableHeadingString; -})(HasFormatMethod || (HasFormatMethod = {})); -//# sourceMappingURL=table-headings.js.map \ No newline at end of file + HFM.TableHeadingString = TableHeadingString; +})(HFM || (HFM = {})); +//# sourceMappingURL=table-heading-string.js.map \ No newline at end of file diff --git a/classes/table-heading-string.js.map b/classes/table-heading-string.js.map new file mode 100644 index 00000000..719c7dec --- /dev/null +++ b/classes/table-heading-string.js.map @@ -0,0 +1 @@ +{"version":3,"file":"table-heading-string.js","sourceRoot":"","sources":["table-heading-string.ts"],"names":[],"mappings":";AAAA,gDAAgD;AAEhD,IAAU,GAAG,CA0BZ;AA1BD,WAAU,GAAG;IACT;QAII,4BAAa,WAAmB;YAHxB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;YAE9B,qEAAqE;YACrE,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;gBAC3B,IAAI,CAAC,SAAS;oBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;aAC3C;QACL,CAAC;QAED,mFAAmF;QACnF,wCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,gDAAgD;QAChD,2CAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,yBAAC;IAAD,CAAC,AAxBD,IAwBC;IAxBY,sBAAkB,qBAwB9B,CAAA;AACL,CAAC,EA1BS,GAAG,KAAH,GAAG,QA0BZ"} \ No newline at end of file diff --git a/js-files/table-headings.ts b/classes/table-heading-string.ts similarity index 93% rename from js-files/table-headings.ts rename to classes/table-heading-string.ts index 851a4ef0..9a4d179c 100644 --- a/js-files/table-headings.ts +++ b/classes/table-heading-string.ts @@ -1,7 +1,6 @@ -/// /// -namespace HasFormatMethod { +namespace HFM { export class TableHeadingString implements HasFormatMethod { private returnStr = ""; private arrLength = 0; diff --git a/has-format-method.ts b/has-format-method.ts index 1288e9ea..1f4d8260 100644 --- a/has-format-method.ts +++ b/has-format-method.ts @@ -1,4 +1,4 @@ -namespace HasFormatMethod { +namespace HFM { export interface HasFormatMethod { arrayLength(): number; internalFormat(): string; diff --git a/index.html b/index.html index f20a0b57..e3e5509c 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,12 @@ JS Onboard Project - - - + + + + + diff --git a/js-files/render-table-heading.js b/js-files/render-table-heading.js deleted file mode 100644 index a72d6bc1..00000000 --- a/js-files/render-table-heading.js +++ /dev/null @@ -1,2 +0,0 @@ -"use strict"; -//# sourceMappingURL=render-table-heading.js.map \ No newline at end of file diff --git a/js-files/render-table-heading.js.map b/js-files/render-table-heading.js.map deleted file mode 100644 index 927c854d..00000000 --- a/js-files/render-table-heading.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"render-table-heading.js","sourceRoot":"","sources":["render-table-heading.ts"],"names":[],"mappings":""} \ No newline at end of file diff --git a/js-files/render-table-heading.ts b/js-files/render-table-heading.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/js-files/table-headings.js.map b/js-files/table-headings.js.map deleted file mode 100644 index 42db73ac..00000000 --- a/js-files/table-headings.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"table-headings.js","sourceRoot":"","sources":["table-headings.ts"],"names":[],"mappings":";AAAA,kCAAkC;AAClC,gDAAgD;AAEhD,IAAU,eAAe,CA0BxB;AA1BD,WAAU,eAAe;IACrB;QAII,4BAAa,WAAmB;YAHxB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;YAE9B,qEAAqE;YACrE,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;gBAC3B,IAAI,CAAC,SAAS;oBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;aAC3C;QACL,CAAC;QAED,mFAAmF;QACnF,wCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,gDAAgD;QAChD,2CAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,yBAAC;IAAD,CAAC,AAxBD,IAwBC;IAxBY,kCAAkB,qBAwB9B,CAAA;AACL,CAAC,EA1BS,eAAe,KAAf,eAAe,QA0BxB"} \ No newline at end of file From 59019f05baa66f043650e362f30cf19f9a8809d8 Mon Sep 17 00:00:00 2001 From: geraldtivatyi Date: Fri, 2 Jul 2021 09:10:45 +0200 Subject: [PATCH 45/47] Updates --- app.ts | 45 +++++++++++++++++++++++++++++++-------------- index.html | 2 +- 2 files changed, 32 insertions(+), 15 deletions(-) diff --git a/app.ts b/app.ts index 0f19cec3..1327025d 100644 --- a/app.ts +++ b/app.ts @@ -98,12 +98,17 @@ $( "#submit" ).on( "click", () => { let startFrom = startFromIDElement.valueAsNumber; // Checks to see if you request invalid values in the form - if (startFrom < 0 || startFrom > (totalNumofRecords-(numOfRows-1))) { - alert("The acceptable range is between 0 and "+(totalNumofRecords-(numOfRows-1))); - return; - } else if (isNaN(startFrom)) { - alert("You have not set a value to submit."); - return; + if (totalNumofRecords <= numOfRows) { + alert("This page shows all the records available"); + return; + } else { + if (startFrom < 0 || startFrom > (totalNumofRecords-(numOfRows-1))) { + alert("The acceptable range is between 0 and "+(totalNumofRecords-(numOfRows-1))); + return; + } else if (isNaN(startFrom)) { + alert("You have not set a value to submit."); + return; + } } fromID = startFrom; @@ -160,13 +165,17 @@ function createInitialPage(numOfRows: number, totalNumofRecords: number) { let toID = Number(tID.innerHTML); // Check if you're at the start or end of the data set, and reset IDs for change in window size - if (fromID > (totalNumofRecords-(numOfRows-1))) { + if (totalNumofRecords <= numOfRows) { + fromID = 0; + toID = totalNumofRecords; + } else if (fromID > (totalNumofRecords-(numOfRows-1))) { fromID = totalNumofRecords-(numOfRows-1); + toID = fromID + (numOfRows-1); } else { fromID = fromID; + toID = fromID + (numOfRows-1); } - - toID = fromID + (numOfRows-1); + fromIDElement.innerHTML = fromID.toString(); toIDElement.innerHTML = toID.toString(); @@ -186,12 +195,18 @@ function getRecords(fromID: number, toID: number, totalNumofRecords: number) { let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; // Change fromID and toID according to changes in numOfRows - if (fromID > (totalNumofRecords-(numOfRows-1))) { - fromID = totalNumofRecords-(numOfRows-1); + if (totalNumofRecords <= numOfRows) { + fromID = 0; + toID = totalNumofRecords } else { - fromID = fromID; + if (fromID > (totalNumofRecords-(numOfRows-1))) { + fromID = totalNumofRecords-(numOfRows-1); + toID = fromID + (numOfRows-1); + } else { + fromID = fromID; + toID = fromID + (numOfRows-1); + } } - toID = fromID + (numOfRows-1); // Change innerHTML for fromID and toID fromIDElement.innerHTML = fromID.toString(); @@ -203,7 +218,9 @@ function getRecords(fromID: number, toID: number, totalNumofRecords: number) { } // Create table using the new set IDs inside a set timeout - clickTimeout(fromID, toID); + // if (totalNumofRecords > numOfRows) { + clickTimeout(fromID, toID); + // } } function getRecordCount() { diff --git a/index.html b/index.html index e3e5509c..53f2fed4 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,8 @@ - + From ebf4a49bfc6f3e67c7712320993a822b1a7a03bc Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Fri, 2 Jul 2021 18:35:58 +0200 Subject: [PATCH 46/47] Updates --- app.ts | 421 +++++++++--------- classes/get-column-headings.js | 6 +- classes/get-column-headings.js.map | 2 +- classes/get-column-headings.ts | 6 +- classes/render-table-headings.js | 2 +- classes/render-table-headings.js.map | 2 +- classes/render-table-headings.ts | 2 +- classes/render-table-rows.js | 7 +- classes/render-table-rows.js.map | 2 +- classes/render-table-rows.ts | 7 +- classes/table-heading-string.js | 5 +- classes/table-heading-string.js.map | 2 +- classes/table-heading-string.ts | 5 +- index.html | 4 +- .../has-format-method.js | 0 .../has-format-method.js.map | 0 .../has-format-method.ts | 0 17 files changed, 226 insertions(+), 247 deletions(-) rename has-format-method.js => interfaces/has-format-method.js (100%) rename has-format-method.js.map => interfaces/has-format-method.js.map (100%) rename has-format-method.ts => interfaces/has-format-method.ts (100%) diff --git a/app.ts b/app.ts index 1327025d..6f9fc31a 100644 --- a/app.ts +++ b/app.ts @@ -1,256 +1,251 @@ -/// +/// /// /// /// /// // Global variable -let timeOut: ReturnType; +let timeOut: ReturnType; // Run functions when window loads window.onload = () => { - HFM.getColumnsHeadings(); - getRecordCount(); + HFM.getColumnsHeadings(); + getRecordCount(); }; // Listen for change in window size -window.addEventListener('resize', () => { - // Clear the timeout every time if you submit on the form - clearTimeout(timeOut); - - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - getRecords(Number(fID.innerHTML), Number(tID.innerHTML), totalNumofRecords); +window.addEventListener("resize", () => { + clearTimeout(timeOut); + + let numofrecords = document.querySelector( + "#numofrecords" + ) as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML) - 1; + + let fID = document.querySelector("#fromID") as HTMLParagraphElement; + let tID = document.querySelector("#toID") as HTMLParagraphElement; + getRecords(Number(fID.innerHTML), Number(tID.innerHTML), totalNumofRecords); }); // Listen for clicks on left arrow -$( "#leftarrow" ).on( "click", () => { - // // Clear the timeout every time if you submit on the form - clearTimeout(timeOut); - - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); - - if ((fromID < numOfRows && fromID > 0) || fromID === 0) { - fromID = 0; - toID = numOfRows-1; - } else { - fromID = fromID - (numOfRows-1); - toID = toID - (numOfRows-1); - } - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); +$("#leftarrow").on("click", () => { + clearTimeout(timeOut); + + let numofrecords = document.querySelector( + "#numofrecords" + ) as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML) - 1; + let numOfRows = getNumOfRows(); + + let fID = document.querySelector("#fromID") as HTMLParagraphElement; + let tID = document.querySelector("#toID") as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + + if ((fromID < numOfRows && fromID > 0) || fromID === 0) { + fromID = 0; + toID = numOfRows - 1; + } else { + fromID = fromID - (numOfRows - 1); + toID = toID - (numOfRows - 1); + } + + getRecords(fromID, toID, totalNumofRecords); }); - + // Listen for clicks on right arrow -$( "#rightarrow" ).on( "click", () => { - // Clear the timeout every time if you submit on the form - clearTimeout(timeOut); - - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); - - if (fromID > (totalNumofRecords-((numOfRows-1)*2)) && fromID < totalNumofRecords || toID === totalNumofRecords) { - fromID = (totalNumofRecords-(numOfRows-1)); - toID = totalNumofRecords; - } else { - fromID = fromID + (numOfRows-1); - toID = toID + (numOfRows-1); - } - - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); +$("#rightarrow").on("click", () => { + clearTimeout(timeOut); + + let numofrecords = document.querySelector( + "#numofrecords" + ) as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML) - 1; + let numOfRows = getNumOfRows(); + + let fID = document.querySelector("#fromID") as HTMLParagraphElement; + let tID = document.querySelector("#toID") as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + + if ( + (fromID > totalNumofRecords - (numOfRows - 1) * 2 && + fromID < totalNumofRecords) || + toID === totalNumofRecords + ) { + fromID = totalNumofRecords - (numOfRows - 1); + toID = totalNumofRecords; + } else { + fromID = fromID + (numOfRows - 1); + toID = toID + (numOfRows - 1); + } + + getRecords(fromID, toID, totalNumofRecords); }); - + // Listen for submission in form and use inputs to request data from backend -$( "#submit" ).on( "click", () => { - // Clear the timeout every time if you submit on the form - clearTimeout(timeOut); - - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); - - // Clear form value in from end when navigating data using the arrows - let startFromIDElement = document.querySelector('#startfrom') as HTMLInputElement; - let startFrom = startFromIDElement.valueAsNumber; - - // Checks to see if you request invalid values in the form - if (totalNumofRecords <= numOfRows) { - alert("This page shows all the records available"); - return; - } else { - if (startFrom < 0 || startFrom > (totalNumofRecords-(numOfRows-1))) { - alert("The acceptable range is between 0 and "+(totalNumofRecords-(numOfRows-1))); - return; - } else if (isNaN(startFrom)) { - alert("You have not set a value to submit."); - return; - } - } - - fromID = startFrom; - toID = fromID + (numOfRows-1); - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); +$("#submit").on("click", () => { + clearTimeout(timeOut); + + let numofrecords = document.querySelector( + "#numofrecords" + ) as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML) - 1; + let numOfRows = getNumOfRows(); + + let fID = document.querySelector("#fromID") as HTMLParagraphElement; + let tID = document.querySelector("#toID") as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + + let startFromIDElement = document.querySelector( + "#startfrom" + ) as HTMLInputElement; + let startFrom = startFromIDElement.valueAsNumber; + + if (totalNumofRecords <= numOfRows) { + alert("This page shows all the records available"); + return; + } else { + if (startFrom < 0 || startFrom > totalNumofRecords - (numOfRows - 1)) { + alert( + "The acceptable range is between 0 and " + + (totalNumofRecords - (numOfRows - 1)) + ); + return; + } else if (isNaN(startFrom)) { + alert("You have not set a value to submit."); + return; + } + } + + fromID = startFrom; + toID = fromID + (numOfRows - 1); + + getRecords(fromID, toID, totalNumofRecords); }); // Listen for click to go to start of data -$( "#gotostart" ).on( "click", () => { - // Clear the timeout every time if you click to go to start of dataset - clearTimeout(timeOut); +$("#gotostart").on("click", () => { + clearTimeout(timeOut); - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); + let numofrecords = document.querySelector( + "#numofrecords" + ) as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML) - 1; + let numOfRows = getNumOfRows(); - // Set ID values to the start of the dataset - let fromID = 0; - let toID = numOfRows; + let fromID = 0; + let toID = numOfRows; - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); + getRecords(fromID, toID, totalNumofRecords); }); // Listen for sclick to go to end of data -$( "#gotoend" ).on( "click", () => { - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - let totalNumofRecords = Number(numofrecords.innerHTML)-1; - let numOfRows = getNumOfRows(); - // Clear the timeout every time if you click to go to end of dataset - clearTimeout(timeOut); - - // Set ID values to the end of the dataset - let fromID = totalNumofRecords-(numOfRows-1); - let toID = totalNumofRecords; - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); +$("#gotoend").on("click", () => { + let numofrecords = document.querySelector( + "#numofrecords" + ) as HTMLParagraphElement; + let totalNumofRecords = Number(numofrecords.innerHTML) - 1; + let numOfRows = getNumOfRows(); + clearTimeout(timeOut); + + let fromID = totalNumofRecords - (numOfRows - 1); + let toID = totalNumofRecords; + + getRecords(fromID, toID, totalNumofRecords); }); -// Function to create the initial table when loading the page for the first time or when the window size changes function createInitialPage(numOfRows: number, totalNumofRecords: number) { - // Clear the timeout every time this function is called - clearTimeout(timeOut); - - let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; - let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; - - let fID = document.querySelector('#fromID') as HTMLParagraphElement; - let tID = document.querySelector('#toID') as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); - - // Check if you're at the start or end of the data set, and reset IDs for change in window size - if (totalNumofRecords <= numOfRows) { - fromID = 0; - toID = totalNumofRecords; - } else if (fromID > (totalNumofRecords-(numOfRows-1))) { - fromID = totalNumofRecords-(numOfRows-1); - toID = fromID + (numOfRows-1); - } else { - fromID = fromID; - toID = fromID + (numOfRows-1); - } - - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - - // Get records from backend - getRecords(fromID, toID, totalNumofRecords); + clearTimeout(timeOut); + + let fromIDElement = document.querySelector("#fromID") as HTMLParagraphElement; + let toIDElement = document.querySelector("#toID") as HTMLParagraphElement; + + let fID = document.querySelector("#fromID") as HTMLParagraphElement; + let tID = document.querySelector("#toID") as HTMLParagraphElement; + let fromID = Number(fID.innerHTML); + let toID = Number(tID.innerHTML); + + if (totalNumofRecords <= numOfRows) { + fromID = 0; + toID = totalNumofRecords; + } else if (fromID > totalNumofRecords - (numOfRows - 1)) { + fromID = totalNumofRecords - (numOfRows - 1); + toID = fromID + (numOfRows - 1); + } else { + fromID = fromID; + toID = fromID + (numOfRows - 1); + } + + fromIDElement.innerHTML = fromID.toString(); + toIDElement.innerHTML = toID.toString(); + + getRecords(fromID, toID, totalNumofRecords); } -// Function returning number of rows based on window size function getNumOfRows() { - return Math.round(window.innerHeight/33); + return Math.round(window.innerHeight / 33); } -// Function returning number of rows based on window size function getRecords(fromID: number, toID: number, totalNumofRecords: number) { - let numOfRows = getNumOfRows(); - let fromIDElement = document.querySelector('#fromID') as HTMLParagraphElement; - let toIDElement = document.querySelector('#toID') as HTMLParagraphElement; - - // Change fromID and toID according to changes in numOfRows - if (totalNumofRecords <= numOfRows) { - fromID = 0; - toID = totalNumofRecords - } else { - if (fromID > (totalNumofRecords-(numOfRows-1))) { - fromID = totalNumofRecords-(numOfRows-1); - toID = fromID + (numOfRows-1); - } else { - fromID = fromID; - toID = fromID + (numOfRows-1); - } - } - - // Change innerHTML for fromID and toID - fromIDElement.innerHTML = fromID.toString(); - toIDElement.innerHTML = toID.toString(); - - // Clear the timeout every time if you navigate and you're not at the start ID of all the data - if (fromID != 1 || toID != totalNumofRecords) { - clearTimeout(timeOut); - } - - // Create table using the new set IDs inside a set timeout - // if (totalNumofRecords > numOfRows) { - clickTimeout(fromID, toID); - // } + let numOfRows = getNumOfRows(); + let fromIDElement = document.querySelector("#fromID") as HTMLParagraphElement; + let toIDElement = document.querySelector("#toID") as HTMLParagraphElement; + + if (totalNumofRecords <= numOfRows) { + fromID = 0; + toID = totalNumofRecords; + } else { + if (fromID > totalNumofRecords - (numOfRows - 1)) { + fromID = totalNumofRecords - (numOfRows - 1); + toID = fromID + (numOfRows - 1); + } else { + fromID = fromID; + toID = fromID + (numOfRows - 1); + } + } + + fromIDElement.innerHTML = fromID.toString(); + toIDElement.innerHTML = toID.toString(); + + if (fromID != 1 || toID != totalNumofRecords) { + clearTimeout(timeOut); + } + + clickTimeout(fromID, toID); } function getRecordCount() { - // Get total number of records - fetch("/recordCount").then(res => res.text()).then( - (value) => { - let numofrecords = document.querySelector('#numofrecords') as HTMLParagraphElement; - numofrecords.innerHTML = value; - let t = Number(value) - 1; - // Create initial page - createInitialPage(getNumOfRows(), t); - } - ).catch(err => console.log(err)); + fetch("/recordCount") + .then((res) => res.text()) + .then((value) => { + let numofrecords = document.querySelector( + "#numofrecords" + ) as HTMLParagraphElement; + numofrecords.innerHTML = value; + let t = Number(value) - 1; + createInitialPage(getNumOfRows(), t); + }) + .catch((err) => console.log(err)); } function clickTimeout(fromID: number, toID: number) { - timeOut = setTimeout( () => { - let startfrom = document.querySelector("#startfrom") as HTMLInputElement; - startfrom.value = ""; - - fetch("/records?from="+fromID+"&to="+toID).then(res => res.text()).then((recordsStr) => { - // Empty the table in the html - let emptyTable = document.querySelector('#records') as HTMLDivElement; - emptyTable.innerHTML = ""; // Clear table to empty html - - // Recreate table with new headings and records data - let interfaceRecords: HFM.RenderTableRows; // Variable of type interface used in creating table rows - - new HFM.RenderTableRows(recordsStr); // Call method to generate string containing table row elements - }).catch(err => console.log(err)); - }, 200); - return timeOut; -} \ No newline at end of file + timeOut = setTimeout(() => { + let startfrom = document.querySelector("#startfrom") as HTMLInputElement; + startfrom.value = ""; + + fetch("/records?from=" + fromID + "&to=" + toID) + .then((res) => res.text()) + .then((recordsStr) => { + let emptyTable = document.querySelector("#records") as HTMLDivElement; + emptyTable.innerHTML = ""; + + let interfaceRecords: HFM.RenderTableRows; + + new HFM.RenderTableRows(recordsStr); + }) + .catch((err) => console.log(err)); + }, 200); + return timeOut; +} diff --git a/classes/get-column-headings.js b/classes/get-column-headings.js index 52bde0e7..9ff87b88 100644 --- a/classes/get-column-headings.js +++ b/classes/get-column-headings.js @@ -1,12 +1,12 @@ "use strict"; -/// +/// var HFM; (function (HFM) { function getColumnsHeadings() { fetch("/columns").then(function (res) { return res.text(); }).then(function (headingsStr) { var hd = new HFM.RenderTableHeading(document.querySelector('#headings')); - var interfaceHeading = new HFM.TableHeadingString(headingsStr); // Call method to generate string containing table heading element - hd.constructTableHeadings(interfaceHeading); // Call method to render table headings element in browser + var interfaceHeading = new HFM.TableHeadingString(headingsStr); + hd.constructTableHeadings(interfaceHeading); }).catch(function (err) { return console.log(err); }); } HFM.getColumnsHeadings = getColumnsHeadings; diff --git a/classes/get-column-headings.js.map b/classes/get-column-headings.js.map index 4d8589cb..b530dca5 100644 --- a/classes/get-column-headings.js.map +++ b/classes/get-column-headings.js.map @@ -1 +1 @@ -{"version":3,"file":"get-column-headings.js","sourceRoot":"","sources":["get-column-headings.ts"],"names":[],"mappings":";AAAA,gDAAgD;AAEhD,IAAU,GAAG,CAQZ;AARD,WAAU,GAAG;IACT,SAAgB,kBAAkB;QAC9B,KAAK,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,IAAI,EAAE,EAAV,CAAU,CAAC,CAAC,IAAI,CAAC,UAAC,WAAW;YACvD,IAAI,EAAE,GAAG,IAAI,GAAG,CAAC,kBAAkB,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAmB,CAAC,CAAC;YAC3F,IAAI,gBAAgB,GAAG,IAAI,GAAG,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAG,kEAAkE;YACpI,EAAE,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC,CAAK,0DAA0D;QAC/G,CAAC,CAAC,CAAC,KAAK,CAAC,UAAA,GAAG,IAAI,OAAA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAhB,CAAgB,CAAC,CAAC;IACtC,CAAC;IANe,sBAAkB,qBAMjC,CAAA;AACL,CAAC,EARS,GAAG,KAAH,GAAG,QAQZ"} \ No newline at end of file +{"version":3,"file":"get-column-headings.js","sourceRoot":"","sources":["get-column-headings.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CAQZ;AARD,WAAU,GAAG;IACT,SAAgB,kBAAkB;QAC9B,KAAK,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,IAAI,EAAE,EAAV,CAAU,CAAC,CAAC,IAAI,CAAC,UAAC,WAAW;YACvD,IAAI,EAAE,GAAG,IAAI,GAAG,CAAC,kBAAkB,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAmB,CAAC,CAAC;YAC3F,IAAI,gBAAgB,GAAG,IAAI,GAAG,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;YAC/D,EAAE,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC,KAAK,CAAC,UAAA,GAAG,IAAI,OAAA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAhB,CAAgB,CAAC,CAAC;IACtC,CAAC;IANe,sBAAkB,qBAMjC,CAAA;AACL,CAAC,EARS,GAAG,KAAH,GAAG,QAQZ"} \ No newline at end of file diff --git a/classes/get-column-headings.ts b/classes/get-column-headings.ts index 105014f0..b36da86f 100644 --- a/classes/get-column-headings.ts +++ b/classes/get-column-headings.ts @@ -1,11 +1,11 @@ -/// +/// namespace HFM { export function getColumnsHeadings() { fetch("/columns").then(res => res.text()).then((headingsStr) => { let hd = new HFM.RenderTableHeading(document.querySelector('#headings') as HTMLDivElement); - let interfaceHeading = new HFM.TableHeadingString(headingsStr); // Call method to generate string containing table heading element - hd.constructTableHeadings(interfaceHeading); // Call method to render table headings element in browser + let interfaceHeading = new HFM.TableHeadingString(headingsStr); + hd.constructTableHeadings(interfaceHeading); }).catch(err => console.log(err)); } } \ No newline at end of file diff --git a/classes/render-table-headings.js b/classes/render-table-headings.js index 1796ebfa..d64b2c5b 100644 --- a/classes/render-table-headings.js +++ b/classes/render-table-headings.js @@ -1,5 +1,5 @@ "use strict"; -/// +/// var HFM; (function (HFM) { var RenderTableHeading = /** @class */ (function () { diff --git a/classes/render-table-headings.js.map b/classes/render-table-headings.js.map index 5988a6cc..9ecf6e58 100644 --- a/classes/render-table-headings.js.map +++ b/classes/render-table-headings.js.map @@ -1 +1 @@ -{"version":3,"file":"render-table-headings.js","sourceRoot":"","sources":["render-table-headings.ts"],"names":[],"mappings":";AAAA,gDAAgD;AAEhD,IAAU,GAAG,CAaZ;AAbD,WAAU,GAAG;IACT;QACI,4BAAsB,SAAyB;YAAzB,cAAS,GAAT,SAAS,CAAgB;QAAG,CAAC;QAEnD,mDAAsB,GAAtB,UAAuB,EAAmB;YACtC,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC;YACpC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,EAAE,CAAC,WAAW,EAAE,GAAC,QAAQ,CAAC;YAEpE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC/B,CAAC;QACL,yBAAC;IAAD,CAAC,AAXD,IAWC;IAXY,sBAAkB,qBAW9B,CAAA;AACL,CAAC,EAbS,GAAG,KAAH,GAAG,QAaZ"} \ No newline at end of file +{"version":3,"file":"render-table-headings.js","sourceRoot":"","sources":["render-table-headings.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CAaZ;AAbD,WAAU,GAAG;IACT;QACI,4BAAsB,SAAyB;YAAzB,cAAS,GAAT,SAAS,CAAgB;QAAG,CAAC;QAEnD,mDAAsB,GAAtB,UAAuB,EAAmB;YACtC,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC;YACpC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,EAAE,CAAC,WAAW,EAAE,GAAC,QAAQ,CAAC;YAEpE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC/B,CAAC;QACL,yBAAC;IAAD,CAAC,AAXD,IAWC;IAXY,sBAAkB,qBAW9B,CAAA;AACL,CAAC,EAbS,GAAG,KAAH,GAAG,QAaZ"} \ No newline at end of file diff --git a/classes/render-table-headings.ts b/classes/render-table-headings.ts index 808b6fd2..98e78843 100644 --- a/classes/render-table-headings.ts +++ b/classes/render-table-headings.ts @@ -1,4 +1,4 @@ -/// +/// namespace HFM { export class RenderTableHeading { diff --git a/classes/render-table-rows.js b/classes/render-table-rows.js index bd5da809..66f64012 100644 --- a/classes/render-table-rows.js +++ b/classes/render-table-rows.js @@ -1,5 +1,5 @@ "use strict"; -/// +/// var HFM; (function (HFM) { var RenderTableRows = /** @class */ (function () { @@ -9,21 +9,18 @@ var HFM; var records = document.querySelector('#records'); var navigation = document.querySelector('#navigation'); var myArr = JSON.parse(recordsStr); - // Edit styling of the table and navigation bar records.style.display = "grid"; records.style.gridTemplateRows = "repeat(auto-fill, " + (100 / (myArr.length + 2)) + "%)"; records.style.height = "100%"; navigation.style.height = (100 / (myArr.length + 2)) + "%"; var headings = document.querySelector('#headings'); headings.style.height = 100 / (myArr.length + 2) + "%"; - // Create innerHTML text to be rendered to front-end in the table div for (var i = 0; i < myArr.length; i++) { for (var j = 0; j < myArr[i].length; j++) { this.arrLength = myArr[i].length; this.returnStr += "

" + myArr[i][j] + "

"; } - // Append innerHTML text to div element in front-end var div = document.createElement('div'); div.innerHTML = this.returnStr; div.className = "tablecell"; @@ -32,11 +29,9 @@ var HFM; this.returnStr = ""; } } - // Returns length of array of headings to get number of columns necessary to render RenderTableRows.prototype.arrayLength = function () { return this.arrLength; }; - // Returns formatted string to be placed in html RenderTableRows.prototype.internalFormat = function () { return this.returnStr; }; diff --git a/classes/render-table-rows.js.map b/classes/render-table-rows.js.map index 85b6969f..f2bacb07 100644 --- a/classes/render-table-rows.js.map +++ b/classes/render-table-rows.js.map @@ -1 +1 @@ -{"version":3,"file":"render-table-rows.js","sourceRoot":"","sources":["render-table-rows.ts"],"names":[],"mappings":";AAAA,gDAAgD;AAEhD,IAAU,GAAG,CA8CZ;AA9CD,WAAU,GAAG;IACT;QAII,yBAAa,UAAkB;YAHvB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAmB,CAAC;YACnE,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;YACzE,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAEnC,+CAA+C;YAC/C,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,OAAO,CAAC,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,GAAC,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,IAAI,CAAC;YAClF,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC9B,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,GAAG,CAAC;YACrD,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAmB,CAAC;YACrE,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,GAAC,GAAG,CAAC;YAEjD,qEAAqE;YACrE,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAC5B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;oBAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;oBACjC,IAAI,CAAC,SAAS;wBACV,UAAU,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,YAAY,CAAC;iBAC3C;gBAED,oDAAoD;gBACpD,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACxC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;gBAC/B,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;gBAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,IAAI,CAAC,SAAS,GAAC,QAAQ,CAAC;gBAClE,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBACpB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;aACvB;QACL,CAAC;QAED,mFAAmF;QACnF,qCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,gDAAgD;QAChD,wCAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,sBAAC;IAAD,CAAC,AA5CD,IA4CC;IA5CY,mBAAe,kBA4C3B,CAAA;AACL,CAAC,EA9CS,GAAG,KAAH,GAAG,QA8CZ"} \ No newline at end of file +{"version":3,"file":"render-table-rows.js","sourceRoot":"","sources":["render-table-rows.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CAyCZ;AAzCD,WAAU,GAAG;IACT;QAII,yBAAa,UAAkB;YAHvB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAmB,CAAC;YACnE,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;YACzE,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAEnC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,OAAO,CAAC,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,GAAC,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,IAAI,CAAC;YAClF,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC9B,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,GAAG,CAAC;YACrD,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAmB,CAAC;YACrE,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,GAAC,GAAG,CAAC;YAEjD,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAC5B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;oBAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;oBACjC,IAAI,CAAC,SAAS;wBACV,UAAU,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,YAAY,CAAC;iBAC3C;gBAED,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACxC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;gBAC/B,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;gBAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,IAAI,CAAC,SAAS,GAAC,QAAQ,CAAC;gBAClE,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBACpB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;aACvB;QACL,CAAC;QAED,qCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,wCAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,sBAAC;IAAD,CAAC,AAvCD,IAuCC;IAvCY,mBAAe,kBAuC3B,CAAA;AACL,CAAC,EAzCS,GAAG,KAAH,GAAG,QAyCZ"} \ No newline at end of file diff --git a/classes/render-table-rows.ts b/classes/render-table-rows.ts index 49836e1f..a56b5d75 100644 --- a/classes/render-table-rows.ts +++ b/classes/render-table-rows.ts @@ -1,4 +1,4 @@ -/// +/// namespace HFM { export class RenderTableRows implements HasFormatMethod { @@ -10,7 +10,6 @@ namespace HFM { let navigation = document.querySelector('#navigation') as HTMLDivElement; let myArr = JSON.parse(recordsStr); - // Edit styling of the table and navigation bar records.style.display = "grid"; records.style.gridTemplateRows = "repeat(auto-fill, "+(100/(myArr.length+2))+"%)"; records.style.height = "100%"; @@ -18,7 +17,6 @@ namespace HFM { let headings = document.querySelector('#headings') as HTMLDivElement; headings.style.height = 100/(myArr.length+2)+"%"; - // Create innerHTML text to be rendered to front-end in the table div for(let i=0;i

"+myArr[i][j]+"

"; } - // Append innerHTML text to div element in front-end let div = document.createElement('div'); div.innerHTML = this.returnStr; div.className = "tablecell"; @@ -36,12 +33,10 @@ namespace HFM { } } - // Returns length of array of headings to get number of columns necessary to render arrayLength() { return this.arrLength; } - // Returns formatted string to be placed in html internalFormat() { return this.returnStr; } diff --git a/classes/table-heading-string.js b/classes/table-heading-string.js index bc4bc2e6..51a486ef 100644 --- a/classes/table-heading-string.js +++ b/classes/table-heading-string.js @@ -1,5 +1,5 @@ "use strict"; -/// +/// var HFM; (function (HFM) { var TableHeadingString = /** @class */ (function () { @@ -8,17 +8,14 @@ var HFM; this.arrLength = 0; var myArr = JSON.parse(headingsStr); this.arrLength = myArr.length; - // Create innerHTML text to be rendered to front-end in the table div for (var i = 0; i < myArr.length; i++) { this.returnStr += "

" + myArr[i] + "

"; } } - // Returns length of array of headings to get number of columns necessary to render TableHeadingString.prototype.arrayLength = function () { return this.arrLength; }; - // Returns formatted string to be placed in html TableHeadingString.prototype.internalFormat = function () { return this.returnStr; }; diff --git a/classes/table-heading-string.js.map b/classes/table-heading-string.js.map index 719c7dec..7e0b1b78 100644 --- a/classes/table-heading-string.js.map +++ b/classes/table-heading-string.js.map @@ -1 +1 @@ -{"version":3,"file":"table-heading-string.js","sourceRoot":"","sources":["table-heading-string.ts"],"names":[],"mappings":";AAAA,gDAAgD;AAEhD,IAAU,GAAG,CA0BZ;AA1BD,WAAU,GAAG;IACT;QAII,4BAAa,WAAmB;YAHxB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;YAE9B,qEAAqE;YACrE,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;gBAC3B,IAAI,CAAC,SAAS;oBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;aAC3C;QACL,CAAC;QAED,mFAAmF;QACnF,wCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,gDAAgD;QAChD,2CAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,yBAAC;IAAD,CAAC,AAxBD,IAwBC;IAxBY,sBAAkB,qBAwB9B,CAAA;AACL,CAAC,EA1BS,GAAG,KAAH,GAAG,QA0BZ"} \ No newline at end of file +{"version":3,"file":"table-heading-string.js","sourceRoot":"","sources":["table-heading-string.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CAuBZ;AAvBD,WAAU,GAAG;IACT;QAII,4BAAa,WAAmB;YAHxB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;YAE9B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;gBAC3B,IAAI,CAAC,SAAS;oBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;aAC3C;QACL,CAAC;QAED,wCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,2CAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,yBAAC;IAAD,CAAC,AArBD,IAqBC;IArBY,sBAAkB,qBAqB9B,CAAA;AACL,CAAC,EAvBS,GAAG,KAAH,GAAG,QAuBZ"} \ No newline at end of file diff --git a/classes/table-heading-string.ts b/classes/table-heading-string.ts index 9a4d179c..b67187ba 100644 --- a/classes/table-heading-string.ts +++ b/classes/table-heading-string.ts @@ -1,4 +1,4 @@ -/// +/// namespace HFM { export class TableHeadingString implements HasFormatMethod { @@ -9,19 +9,16 @@ namespace HFM { let myArr = JSON.parse(headingsStr); this.arrLength = myArr.length; - // Create innerHTML text to be rendered to front-end in the table div for(let i=0;i

"; } } - // Returns length of array of headings to get number of columns necessary to render arrayLength() { return this.arrLength; } - // Returns formatted string to be placed in html internalFormat() { return this.returnStr; } diff --git a/index.html b/index.html index 53f2fed4..961c9ffa 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,8 @@ JS Onboard Project - - + + diff --git a/has-format-method.js b/interfaces/has-format-method.js similarity index 100% rename from has-format-method.js rename to interfaces/has-format-method.js diff --git a/has-format-method.js.map b/interfaces/has-format-method.js.map similarity index 100% rename from has-format-method.js.map rename to interfaces/has-format-method.js.map diff --git a/has-format-method.ts b/interfaces/has-format-method.ts similarity index 100% rename from has-format-method.ts rename to interfaces/has-format-method.ts From be7b34ac7100ccb0050209db96c462adf2a7037f Mon Sep 17 00:00:00 2001 From: "gerald.tivatyi" Date: Mon, 5 Jul 2021 13:02:51 +0200 Subject: [PATCH 47/47] Final updates --- app.ts | 171 +++++++++++++++++++++------ classes/get-column-headings.js | 6 + classes/get-column-headings.js.map | 2 +- classes/get-column-headings.ts | 6 + classes/render-table-headings.js | 4 + classes/render-table-headings.js.map | 2 +- classes/render-table-headings.ts | 4 + classes/render-table-rows.js | 12 ++ classes/render-table-rows.js.map | 2 +- classes/render-table-rows.ts | 12 ++ classes/table-heading-string.js | 8 ++ classes/table-heading-string.js.map | 2 +- classes/table-heading-string.ts | 8 ++ index.html | 9 ++ interfaces/has-format-method.ts | 5 + 15 files changed, 215 insertions(+), 38 deletions(-) diff --git a/app.ts b/app.ts index 6f9fc31a..39cf078e 100644 --- a/app.ts +++ b/app.ts @@ -7,13 +7,25 @@ // Global variable let timeOut: ReturnType; -// Run functions when window loads +/** + * This event executes two funtions immediately after the page loads + * @function HFM.getColumnHeadings This is a function that gets the column headings from the back-end + * @function getRecordCount() This is a function that gets the number of records in the back-end then runs a function to create the initial page +*/ window.onload = () => { HFM.getColumnsHeadings(); getRecordCount(); }; -// Listen for change in window size +/** + * This event listens for the resizing of the window + * @function clearTimeout This function clears the setTimeout global variable + * @param numofrecords This parameter holds the HTML paragraph element with ID #numofrecords + * @param totalNumofRecords This parameter holds the value of the innerHTML and converts it to a Number type + * @param fromIDElement This parameter holds the HTML paragraph element with ID #fromID and is used as the first parameter of getRecords function + * @param toIDElement This parameter holds the HTML paragraph element with ID #toID and is used as the second parameter of getRecords function + * @function getRecords This function is used to get all the records withing the ID parameters specified +*/ window.addEventListener("resize", () => { clearTimeout(timeOut); @@ -22,12 +34,23 @@ window.addEventListener("resize", () => { ) as HTMLParagraphElement; let totalNumofRecords = Number(numofrecords.innerHTML) - 1; - let fID = document.querySelector("#fromID") as HTMLParagraphElement; - let tID = document.querySelector("#toID") as HTMLParagraphElement; - getRecords(Number(fID.innerHTML), Number(tID.innerHTML), totalNumofRecords); + let fromIDElement = document.querySelector("#fromID") as HTMLParagraphElement; + let toIDElement = document.querySelector("#toID") as HTMLParagraphElement; + getRecords(Number(fromIDElement.innerHTML), Number(toIDElement.innerHTML), totalNumofRecords); }); -// Listen for clicks on left arrow +/** + * This event listens for a click on the left arrow + * @function clearTimeout This function clears the setTimeout global variable + * @param numofrecords This parameter holds the HTML paragraph element with ID #numofrecords + * @param totalNumofRecords This parameter holds the value of the innerHTML and converts it to a Number type + * @param numOfRows This parameter holds the value of the total number of rows required on a page + * @param fromIDElement This parameter holds the HTML paragraph element with ID #fromID and is used as the first parameter of getRecords function + * @param toIDElement This parameter holds the HTML paragraph element with ID #toID and is used as the second parameter of getRecords function + * @param fromID This parameter holds the value in fromIDElement parameter as a type Number + * @param toID This parameter holds the value in toIDElement parameter as a type Number + * @function getRecords This function is used to get all the records withing the ID parameters specified +*/ $("#leftarrow").on("click", () => { clearTimeout(timeOut); @@ -37,10 +60,10 @@ $("#leftarrow").on("click", () => { let totalNumofRecords = Number(numofrecords.innerHTML) - 1; let numOfRows = getNumOfRows(); - let fID = document.querySelector("#fromID") as HTMLParagraphElement; - let tID = document.querySelector("#toID") as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); + let fromIDElement = document.querySelector("#fromID") as HTMLParagraphElement; + let toIDElement = document.querySelector("#toID") as HTMLParagraphElement; + let fromID = Number(fromIDElement.innerHTML); + let toID = Number(toIDElement.innerHTML); if ((fromID < numOfRows && fromID > 0) || fromID === 0) { fromID = 0; @@ -53,7 +76,18 @@ $("#leftarrow").on("click", () => { getRecords(fromID, toID, totalNumofRecords); }); -// Listen for clicks on right arrow +/** + * This event listens for a click on the right arrow + * @function clearTimeout This function clears the setTimeout global variable + * @param numofrecords This parameter holds the HTML paragraph element with ID #numofrecords + * @param totalNumofRecords This parameter holds the value of the innerHTML and converts it to a Number type + * @param numOfRows This parameter holds the value of the total number of rows required on a page + * @param fromIDElement This parameter holds the HTML paragraph element with ID #fromID and is used as the first parameter of getRecords function + * @param toIDElement This parameter holds the HTML paragraph element with ID #toID and is used as the second parameter of getRecords function + * @param fromID This parameter holds the value in fromIDElement parameter as a type Number + * @param toID This parameter holds the value in toIDElement parameter as a type Number + * @function getRecords This function is used to get all the records withing the ID parameters specified +*/ $("#rightarrow").on("click", () => { clearTimeout(timeOut); @@ -63,10 +97,10 @@ $("#rightarrow").on("click", () => { let totalNumofRecords = Number(numofrecords.innerHTML) - 1; let numOfRows = getNumOfRows(); - let fID = document.querySelector("#fromID") as HTMLParagraphElement; - let tID = document.querySelector("#toID") as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); + let fromIDElement = document.querySelector("#fromID") as HTMLParagraphElement; + let toIDElement = document.querySelector("#toID") as HTMLParagraphElement; + let fromID = Number(fromIDElement.innerHTML); + let toID = Number(toIDElement.innerHTML); if ( (fromID > totalNumofRecords - (numOfRows - 1) * 2 && @@ -83,7 +117,20 @@ $("#rightarrow").on("click", () => { getRecords(fromID, toID, totalNumofRecords); }); -// Listen for submission in form and use inputs to request data from backend +/** + * This event listens for a click on the submit button in the form + * @function clearTimeout This function clears the setTimeout global variable + * @param numofrecords This parameter holds the HTML paragraph element with ID #numofrecords + * @param totalNumofRecords This parameter holds the value of the innerHTML and converts it to a Number type + * @param numOfRows This parameter holds the value of the total number of rows required on a page + * @param fromIDElement This parameter holds the HTML paragraph element with ID #fromID + * @param toIDElement This parameter holds the HTML paragraph element with ID #toID + * @param fromID This parameter holds the value in fromIDElement parameter as a type Number and is used as the first parameter of getRecords function + * @param toID This parameter holds the value in toIDElement parameter as a type Number and is used as the second parameter of getRecords function + * @param startFromIDElement This parameter holds the HTML paragraph element with ID #startFromIDElement + * @param startFrom This parameter holds the value in startFromIDElement parameter as a type Number and used to set the starting ID for getting list of records + * @function getRecords This function is used to get all the records withing the ID parameters specified +*/ $("#submit").on("click", () => { clearTimeout(timeOut); @@ -93,14 +140,13 @@ $("#submit").on("click", () => { let totalNumofRecords = Number(numofrecords.innerHTML) - 1; let numOfRows = getNumOfRows(); - let fID = document.querySelector("#fromID") as HTMLParagraphElement; - let tID = document.querySelector("#toID") as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); + let fromIDElement = document.querySelector("#fromID") as HTMLParagraphElement; + let toIDElement = document.querySelector("#toID") as HTMLParagraphElement; + let fromID = Number(fromIDElement.innerHTML); + let toID = Number(toIDElement.innerHTML); - let startFromIDElement = document.querySelector( - "#startfrom" - ) as HTMLInputElement; + let startFromIDElement = document.querySelector("#startfrom" +) as HTMLInputElement; let startFrom = startFromIDElement.valueAsNumber; if (totalNumofRecords <= numOfRows) { @@ -125,7 +171,16 @@ $("#submit").on("click", () => { getRecords(fromID, toID, totalNumofRecords); }); -// Listen for click to go to start of data +/** + * This event listens for a click on the 'Go to Start' button to go to the beginning of the data-set + * @function clearTimeout This function clears the setTimeout global variable + * @param numofrecords This parameter holds the HTML paragraph element with ID #numofrecords + * @param totalNumofRecords This parameter holds the value of the innerHTML and converts it to a Number type + * @param numOfRows This parameter holds the value of the total number of rows required on a page + * @param fromID This parameter holds the value 0 and is used as the first parameter of getRecords function + * @param toID This parameter holds the value of numOfRows and is used as the second parameter of getRecords function + * @function getRecords This function is used to get all the records withing the ID parameters specified +*/ $("#gotostart").on("click", () => { clearTimeout(timeOut); @@ -141,14 +196,24 @@ $("#gotostart").on("click", () => { getRecords(fromID, toID, totalNumofRecords); }); -// Listen for sclick to go to end of data +/** + * This event listens for a click on the 'Go to End' button to go to the end of the data-set + * @function clearTimeout This function clears the setTimeout global variable + * @param numofrecords This parameter holds the HTML paragraph element with ID #numofrecords + * @param totalNumofRecords This parameter holds the value of the innerHTML and converts it to a Number type + * @param numOfRows This parameter holds the value of the total number of rows required on a page + * @param fromID This parameter holds the value ID that starts the last page of the dataset and is used as the first parameter of getRecords function + * @param toID This parameter holds the value of totalNumofRecords and is used as the second parameter of getRecords function + * @function getRecords This function is used to get all the records withing the ID parameters specified +*/ $("#gotoend").on("click", () => { + clearTimeout(timeOut); + let numofrecords = document.querySelector( "#numofrecords" ) as HTMLParagraphElement; let totalNumofRecords = Number(numofrecords.innerHTML) - 1; let numOfRows = getNumOfRows(); - clearTimeout(timeOut); let fromID = totalNumofRecords - (numOfRows - 1); let toID = totalNumofRecords; @@ -156,16 +221,25 @@ $("#gotoend").on("click", () => { getRecords(fromID, toID, totalNumofRecords); }); +/** + * This function is used to create the initial page of the data + * @function clearTimeout This function clears the setTimeout global variable + * @param fromIDElement This parameter holds the HTML paragraph element with ID #fromID + * @param toIDElement This parameter holds the HTML paragraph element with ID #toID + * @param fromID This parameter holds the value in fromIDElement parameter as a type Number and is used as the first parameter of getRecords function + * @param toID This parameter holds the value in toIDElement parameter as a type Number and is used as the second parameter of getRecords function + * @param numOfRows This parameter holds the value of the total number of rows required on a page and is the first parameter in the createInitialPage function + * @param totalNumofRecords This parameter is the total number of records in the back-end and is the second parameter in the createInitialPage function + * @function getRecords This function is used to get all the records withing the ID parameters specified +*/ function createInitialPage(numOfRows: number, totalNumofRecords: number) { clearTimeout(timeOut); let fromIDElement = document.querySelector("#fromID") as HTMLParagraphElement; let toIDElement = document.querySelector("#toID") as HTMLParagraphElement; - let fID = document.querySelector("#fromID") as HTMLParagraphElement; - let tID = document.querySelector("#toID") as HTMLParagraphElement; - let fromID = Number(fID.innerHTML); - let toID = Number(tID.innerHTML); + let fromID = Number(fromIDElement.innerHTML); + let toID = Number(toIDElement.innerHTML); if (totalNumofRecords <= numOfRows) { fromID = 0; @@ -184,10 +258,24 @@ function createInitialPage(numOfRows: number, totalNumofRecords: number) { getRecords(fromID, toID, totalNumofRecords); } +/** + * This function is used to return the number of rows required to fill the window + * @return This returns the calculated number of rows required on the current window size +*/ function getNumOfRows() { return Math.round(window.innerHeight / 33); } +/** + * This function is used to get the records to fill the window and present them in the browser + * @param numOfRows This parameter holds the value of the total number of rows required on a page and is the first parameter in the getRecords function + * @param fromIDElement This parameter holds the HTML paragraph element with ID #fromID + * @param toIDElement This parameter holds the HTML paragraph element with ID #toID + * @param fromID This parameter holds the value in fromIDElement parameter as a type Number and is used as the first parameter of clickTimeout function + * @param toID This parameter holds the value in toIDElement parameter as a type Number and is used as the second parameter of clickTimeout function + * @param totalNumofRecords This parameter is the total number of records in the back-end and is the second parameter in the getRecords function + * @function clickTimeout This function creates a setTimeout which collects data from the back-end and presents it in the front-end +*/ function getRecords(fromID: number, toID: number, totalNumofRecords: number) { let numOfRows = getNumOfRows(); let fromIDElement = document.querySelector("#fromID") as HTMLParagraphElement; @@ -216,6 +304,13 @@ function getRecords(fromID: number, toID: number, totalNumofRecords: number) { clickTimeout(fromID, toID); } +/** + * This function is used to get the total number of records in the back-end and to create the initial page of the data-set + * @param numofrecords This parameter holds the HTML paragraph element with ID #numofrecords + * @function getNumOfRows This function gets the number of rows required on the current window and is the first parameter in the createInitial Page function + * @param totalNumofRecords This parameter is the total number of records in the back-end and is the second parameter in the createInitialPage function + * @function createInitialPage This function creates a setTimeout which collects data from the back-end and presents it in the front-end +*/ function getRecordCount() { fetch("/recordCount") .then((res) => res.text()) @@ -224,12 +319,22 @@ function getRecordCount() { "#numofrecords" ) as HTMLParagraphElement; numofrecords.innerHTML = value; - let t = Number(value) - 1; - createInitialPage(getNumOfRows(), t); + let totalNumofRecords = Number(value) - 1; + createInitialPage(getNumOfRows(), totalNumofRecords); }) .catch((err) => console.log(err)); } +/** + * This function creates the setTimeout for fetching the records from the back-end and renders the data to the front-end + * @param timeOut This parameter holds the setTimeout to be created and is a global variable + * @param startfrom This parameter holds the HTML input element at ID #startfrom in the form + * @param fromID This parameter is the start ID value of the data to be fetched and is the first parameter of the clickTimeout function + * @param toID This parameter is the end ID value of the data to be fetched and is the second parameter of the clickTimeout function + * @param emptyTable This parameter holds the HTML DIV element with ID #records and is used to clear the records table when fetching new records + * @method HFM.RenderTableRows is a method of type interface that renders the records to the HTML DOM + * @return This returns the timeout with the records to be fetched +*/ function clickTimeout(fromID: number, toID: number) { timeOut = setTimeout(() => { let startfrom = document.querySelector("#startfrom") as HTMLInputElement; @@ -241,8 +346,6 @@ function clickTimeout(fromID: number, toID: number) { let emptyTable = document.querySelector("#records") as HTMLDivElement; emptyTable.innerHTML = ""; - let interfaceRecords: HFM.RenderTableRows; - new HFM.RenderTableRows(recordsStr); }) .catch((err) => console.log(err)); diff --git a/classes/get-column-headings.js b/classes/get-column-headings.js index 9ff87b88..d2790bd7 100644 --- a/classes/get-column-headings.js +++ b/classes/get-column-headings.js @@ -2,6 +2,12 @@ /// var HFM; (function (HFM) { + /** + * This function is used to fetch the column headings from the back-end + * @param hd This parameter holds the HTML DIV element with ID #headings + * @param interfaceHeading This parameter is of type interface and holds the method for rendering the headings to the HTML DOM + * @method HFM.TableHeadingString This method is for rendering the headings to the HTML DOM + */ function getColumnsHeadings() { fetch("/columns").then(function (res) { return res.text(); }).then(function (headingsStr) { var hd = new HFM.RenderTableHeading(document.querySelector('#headings')); diff --git a/classes/get-column-headings.js.map b/classes/get-column-headings.js.map index b530dca5..5cdb22b7 100644 --- a/classes/get-column-headings.js.map +++ b/classes/get-column-headings.js.map @@ -1 +1 @@ -{"version":3,"file":"get-column-headings.js","sourceRoot":"","sources":["get-column-headings.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CAQZ;AARD,WAAU,GAAG;IACT,SAAgB,kBAAkB;QAC9B,KAAK,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,IAAI,EAAE,EAAV,CAAU,CAAC,CAAC,IAAI,CAAC,UAAC,WAAW;YACvD,IAAI,EAAE,GAAG,IAAI,GAAG,CAAC,kBAAkB,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAmB,CAAC,CAAC;YAC3F,IAAI,gBAAgB,GAAG,IAAI,GAAG,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;YAC/D,EAAE,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC,KAAK,CAAC,UAAA,GAAG,IAAI,OAAA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAhB,CAAgB,CAAC,CAAC;IACtC,CAAC;IANe,sBAAkB,qBAMjC,CAAA;AACL,CAAC,EARS,GAAG,KAAH,GAAG,QAQZ"} \ No newline at end of file +{"version":3,"file":"get-column-headings.js","sourceRoot":"","sources":["get-column-headings.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CAcZ;AAdD,WAAU,GAAG;IACT;;;;;MAKE;IACF,SAAgB,kBAAkB;QAC9B,KAAK,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,IAAI,EAAE,EAAV,CAAU,CAAC,CAAC,IAAI,CAAC,UAAC,WAAW;YACvD,IAAI,EAAE,GAAG,IAAI,GAAG,CAAC,kBAAkB,CAAC,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAmB,CAAC,CAAC;YAC3F,IAAI,gBAAgB,GAAG,IAAI,GAAG,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;YAC/D,EAAE,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC,KAAK,CAAC,UAAA,GAAG,IAAI,OAAA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAhB,CAAgB,CAAC,CAAC;IACtC,CAAC;IANe,sBAAkB,qBAMjC,CAAA;AACL,CAAC,EAdS,GAAG,KAAH,GAAG,QAcZ"} \ No newline at end of file diff --git a/classes/get-column-headings.ts b/classes/get-column-headings.ts index b36da86f..60c84bad 100644 --- a/classes/get-column-headings.ts +++ b/classes/get-column-headings.ts @@ -1,6 +1,12 @@ /// namespace HFM { + /** + * This function is used to fetch the column headings from the back-end + * @param hd This parameter holds the HTML DIV element with ID #headings + * @param interfaceHeading This parameter is of type interface and holds the method for rendering the headings to the HTML DOM + * @method HFM.TableHeadingString This method is for rendering the headings to the HTML DOM + */ export function getColumnsHeadings() { fetch("/columns").then(res => res.text()).then((headingsStr) => { let hd = new HFM.RenderTableHeading(document.querySelector('#headings') as HTMLDivElement); diff --git a/classes/render-table-headings.js b/classes/render-table-headings.js index d64b2c5b..1275138d 100644 --- a/classes/render-table-headings.js +++ b/classes/render-table-headings.js @@ -2,6 +2,10 @@ /// var HFM; (function (HFM) { + /** + * This class is used to inject the created html string containing the headings into the DOM + * @param div This parameter holds the created div element which contaings the headings html string to be injected into the HTML DOM + */ var RenderTableHeading = /** @class */ (function () { function RenderTableHeading(container) { this.container = container; diff --git a/classes/render-table-headings.js.map b/classes/render-table-headings.js.map index 9ecf6e58..2e6d1dc0 100644 --- a/classes/render-table-headings.js.map +++ b/classes/render-table-headings.js.map @@ -1 +1 @@ -{"version":3,"file":"render-table-headings.js","sourceRoot":"","sources":["render-table-headings.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CAaZ;AAbD,WAAU,GAAG;IACT;QACI,4BAAsB,SAAyB;YAAzB,cAAS,GAAT,SAAS,CAAgB;QAAG,CAAC;QAEnD,mDAAsB,GAAtB,UAAuB,EAAmB;YACtC,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC;YACpC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,EAAE,CAAC,WAAW,EAAE,GAAC,QAAQ,CAAC;YAEpE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC/B,CAAC;QACL,yBAAC;IAAD,CAAC,AAXD,IAWC;IAXY,sBAAkB,qBAW9B,CAAA;AACL,CAAC,EAbS,GAAG,KAAH,GAAG,QAaZ"} \ No newline at end of file +{"version":3,"file":"render-table-headings.js","sourceRoot":"","sources":["render-table-headings.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CAiBZ;AAjBD,WAAU,GAAG;IACT;;;MAGE;IACF;QACI,4BAAsB,SAAyB;YAAzB,cAAS,GAAT,SAAS,CAAgB;QAAG,CAAC;QAEnD,mDAAsB,GAAtB,UAAuB,EAAmB;YACtC,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACxC,GAAG,CAAC,SAAS,GAAG,EAAE,CAAC,cAAc,EAAE,CAAC;YACpC,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;YAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,EAAE,CAAC,WAAW,EAAE,GAAC,QAAQ,CAAC;YAEpE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAC/B,CAAC;QACL,yBAAC;IAAD,CAAC,AAXD,IAWC;IAXY,sBAAkB,qBAW9B,CAAA;AACL,CAAC,EAjBS,GAAG,KAAH,GAAG,QAiBZ"} \ No newline at end of file diff --git a/classes/render-table-headings.ts b/classes/render-table-headings.ts index 98e78843..61d8edef 100644 --- a/classes/render-table-headings.ts +++ b/classes/render-table-headings.ts @@ -1,6 +1,10 @@ /// namespace HFM { + /** + * This class is used to inject the created html string containing the headings into the DOM + * @param div This parameter holds the created div element which contaings the headings html string to be injected into the HTML DOM + */ export class RenderTableHeading { constructor( private container: HTMLDivElement) {} diff --git a/classes/render-table-rows.js b/classes/render-table-rows.js index 66f64012..643646df 100644 --- a/classes/render-table-rows.js +++ b/classes/render-table-rows.js @@ -2,6 +2,18 @@ /// var HFM; (function (HFM) { + /** + * This class is used to create and render the html string containing the rows of records into the DOM + * @param returnStr This parameter holds formatted html string containing the rows of records to be injected into the DOM + * @param arrLength This parameter holds length of the array containing the rows of the records + * @param records This parameter holds the HTML DIV element with the ID #records + * @param navigation This parameter holds the HTML DIV element with the ID #navigation + * @param myArr This parameter is the array of the parsed string of records fetched from the back-end + * @param headings This parameter holds the HTML DIV element with the ID #headings and is used to edit the style of the headings + * @param div This parameter is the created div holding the html rows to be injected into the HTML DOM + * @function arrayLength This function returns the length of the array of rows to be rendered. This length is used in styling the grid + * @function internalFormat This function returns the formatted html string containing all the rows of records + */ var RenderTableRows = /** @class */ (function () { function RenderTableRows(recordsStr) { this.returnStr = ""; diff --git a/classes/render-table-rows.js.map b/classes/render-table-rows.js.map index f2bacb07..c5c939e9 100644 --- a/classes/render-table-rows.js.map +++ b/classes/render-table-rows.js.map @@ -1 +1 @@ -{"version":3,"file":"render-table-rows.js","sourceRoot":"","sources":["render-table-rows.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CAyCZ;AAzCD,WAAU,GAAG;IACT;QAII,yBAAa,UAAkB;YAHvB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAmB,CAAC;YACnE,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;YACzE,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAEnC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,OAAO,CAAC,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,GAAC,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,IAAI,CAAC;YAClF,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC9B,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,GAAG,CAAC;YACrD,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAmB,CAAC;YACrE,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,GAAC,GAAG,CAAC;YAEjD,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAC5B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;oBAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;oBACjC,IAAI,CAAC,SAAS;wBACV,UAAU,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,YAAY,CAAC;iBAC3C;gBAED,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACxC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;gBAC/B,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;gBAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,IAAI,CAAC,SAAS,GAAC,QAAQ,CAAC;gBAClE,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBACpB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;aACvB;QACL,CAAC;QAED,qCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,wCAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,sBAAC;IAAD,CAAC,AAvCD,IAuCC;IAvCY,mBAAe,kBAuC3B,CAAA;AACL,CAAC,EAzCS,GAAG,KAAH,GAAG,QAyCZ"} \ No newline at end of file +{"version":3,"file":"render-table-rows.js","sourceRoot":"","sources":["render-table-rows.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CAqDZ;AArDD,WAAU,GAAG;IACT;;;;;;;;;;;MAWE;IACF;QAII,yBAAa,UAAkB;YAHvB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAmB,CAAC;YACnE,IAAI,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAmB,CAAC;YACzE,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAEnC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,OAAO,CAAC,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,GAAC,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,IAAI,CAAC;YAClF,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC9B,UAAU,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,CAAC,GAAC,GAAG,CAAC;YACrD,IAAI,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,WAAW,CAAmB,CAAC;YACrE,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,GAAC,CAAC,KAAK,CAAC,MAAM,GAAC,CAAC,CAAC,GAAC,GAAG,CAAC;YAEjD,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;gBAC5B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,EAAC,CAAC,EAAE,EAAE;oBAC/B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;oBACjC,IAAI,CAAC,SAAS;wBACV,UAAU,GAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAC,YAAY,CAAC;iBAC3C;gBAED,IAAI,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACxC,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;gBAC/B,GAAG,CAAC,SAAS,GAAG,WAAW,CAAC;gBAC5B,GAAG,CAAC,KAAK,CAAC,mBAAmB,GAAG,SAAS,GAAC,IAAI,CAAC,SAAS,GAAC,QAAQ,CAAC;gBAClE,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;gBACpB,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;aACvB;QACL,CAAC;QAED,qCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,wCAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,sBAAC;IAAD,CAAC,AAvCD,IAuCC;IAvCY,mBAAe,kBAuC3B,CAAA;AACL,CAAC,EArDS,GAAG,KAAH,GAAG,QAqDZ"} \ No newline at end of file diff --git a/classes/render-table-rows.ts b/classes/render-table-rows.ts index a56b5d75..a8172f1b 100644 --- a/classes/render-table-rows.ts +++ b/classes/render-table-rows.ts @@ -1,6 +1,18 @@ /// namespace HFM { + /** + * This class is used to create and render the html string containing the rows of records into the DOM + * @param returnStr This parameter holds formatted html string containing the rows of records to be injected into the DOM + * @param arrLength This parameter holds length of the array containing the rows of the records + * @param records This parameter holds the HTML DIV element with the ID #records + * @param navigation This parameter holds the HTML DIV element with the ID #navigation + * @param myArr This parameter is the array of the parsed string of records fetched from the back-end + * @param headings This parameter holds the HTML DIV element with the ID #headings and is used to edit the style of the headings + * @param div This parameter is the created div holding the html rows to be injected into the HTML DOM + * @function arrayLength This function returns the length of the array of rows to be rendered. This length is used in styling the grid + * @function internalFormat This function returns the formatted html string containing all the rows of records + */ export class RenderTableRows implements HasFormatMethod { private returnStr = ""; private arrLength = 0; diff --git a/classes/table-heading-string.js b/classes/table-heading-string.js index 51a486ef..7e480585 100644 --- a/classes/table-heading-string.js +++ b/classes/table-heading-string.js @@ -2,6 +2,14 @@ /// var HFM; (function (HFM) { + /** + * This class is used to create the html string containing the column headings of the grid + * @param returnStr This parameter holds formatted html string containing the column headings to be injected into the DOM + * @param arrLength This parameter holds length of the array containing the column headings + * @param myArr This parameter is the array of the parsed string of headings fetched from the back-end + * @function arrayLength This function returns the length of the array of headings to be rendered + * @function internalFormat This function returns the formatted html string containing all the column headings + */ var TableHeadingString = /** @class */ (function () { function TableHeadingString(headingsStr) { this.returnStr = ""; diff --git a/classes/table-heading-string.js.map b/classes/table-heading-string.js.map index 7e0b1b78..b971c57b 100644 --- a/classes/table-heading-string.js.map +++ b/classes/table-heading-string.js.map @@ -1 +1 @@ -{"version":3,"file":"table-heading-string.js","sourceRoot":"","sources":["table-heading-string.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CAuBZ;AAvBD,WAAU,GAAG;IACT;QAII,4BAAa,WAAmB;YAHxB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;YAE9B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;gBAC3B,IAAI,CAAC,SAAS;oBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;aAC3C;QACL,CAAC;QAED,wCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,2CAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,yBAAC;IAAD,CAAC,AArBD,IAqBC;IArBY,sBAAkB,qBAqB9B,CAAA;AACL,CAAC,EAvBS,GAAG,KAAH,GAAG,QAuBZ"} \ No newline at end of file +{"version":3,"file":"table-heading-string.js","sourceRoot":"","sources":["table-heading-string.ts"],"names":[],"mappings":";AAAA,2DAA2D;AAE3D,IAAU,GAAG,CA+BZ;AA/BD,WAAU,GAAG;IACT;;;;;;;MAOE;IACF;QAII,4BAAa,WAAmB;YAHxB,cAAS,GAAG,EAAE,CAAC;YACf,cAAS,GAAG,CAAC,CAAC;YAGlB,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YACpC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;YAE9B,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,CAAC,GAAC,KAAK,CAAC,MAAM,EAAC,CAAC,EAAE,EAAC;gBAC3B,IAAI,CAAC,SAAS;oBACd,aAAa,GAAC,KAAK,CAAC,CAAC,CAAC,GAAC,gBAAgB,CAAC;aAC3C;QACL,CAAC;QAED,wCAAW,GAAX;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QAED,2CAAc,GAAd;YACI,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC;QACL,yBAAC;IAAD,CAAC,AArBD,IAqBC;IArBY,sBAAkB,qBAqB9B,CAAA;AACL,CAAC,EA/BS,GAAG,KAAH,GAAG,QA+BZ"} \ No newline at end of file diff --git a/classes/table-heading-string.ts b/classes/table-heading-string.ts index b67187ba..eb0d4db4 100644 --- a/classes/table-heading-string.ts +++ b/classes/table-heading-string.ts @@ -1,6 +1,14 @@ /// namespace HFM { + /** + * This class is used to create the html string containing the column headings of the grid + * @param returnStr This parameter holds formatted html string containing the column headings to be injected into the DOM + * @param arrLength This parameter holds length of the array containing the column headings + * @param myArr This parameter is the array of the parsed string of headings fetched from the back-end + * @function arrayLength This function returns the length of the array of headings to be rendered + * @function internalFormat This function returns the formatted html string containing all the column headings + */ export class TableHeadingString implements HasFormatMethod { private returnStr = ""; private arrLength = 0; diff --git a/index.html b/index.html index 961c9ffa..c2ff9cb8 100644 --- a/index.html +++ b/index.html @@ -12,16 +12,23 @@ +