Gerald - Onboarding

classes/get-column-headings.ts

@@ -0,0 +1,17 @@
+/// <reference path="../interfaces/has-format-method.ts" />
+
+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);
+            let interfaceHeading = new HFM.TableHeadingString(headingsStr);		
+            hd.constructTableHeadings(interfaceHeading);	
+        }).catch(err => console.log(err));
+    }
+}

classes/render-table-headings.ts

@@ -0,0 +1,20 @@
+/// <reference path="../interfaces/has-format-method.ts" />
+
+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) {}
+
+        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);
+        }
+    }
+}

classes/render-table-rows.ts

@@ -0,0 +1,56 @@
+/// <reference path="../interfaces/has-format-method.ts" />
+
+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;
+
+        constructor( recordsStr: string ){
+            let records = document.querySelector('#records') as HTMLDivElement;			
+            let navigation = document.querySelector('#navigation') as HTMLDivElement;	
+            let myArr = JSON.parse(recordsStr);											
+
+            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)+"%";
+
+            for(let i=0;i<myArr.length;i++) {
+                for(let j=0;j<myArr[i].length;j++) {
+                    this.arrLength = myArr[i].length;
+                    this.returnStr += 
+                        "<div><p>"+myArr[i][j]+"</p></div>";
+                }
+
+                let div = document.createElement('div');
+                div.innerHTML = this.returnStr;
+                div.className = "tablecell";
+                div.style.gridTemplateColumns = "repeat("+this.arrLength+", 1fr)";
+                records.append(div);
+                this.returnStr = "";
+            }
+        }
+
+        arrayLength() {
+            return this.arrLength;
+        }
+
+        internalFormat() {
+            return this.returnStr;
+        }
+    }
+}

classes/table-heading-string.ts

@@ -0,0 +1,34 @@
+/// <reference path="../interfaces/has-format-method.ts" />
+
+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;
+
+        constructor( headingsStr: string){
+            let myArr = JSON.parse(headingsStr);
+            this.arrLength = myArr.length;
+
+            for(let i=0;i<myArr.length;i++){
+                this.returnStr += 
+                "<div><p><b>"+myArr[i]+"</b></p></div>";
+            }
+        }
+
+        arrayLength() {
+            return this.arrLength;
+        }
+
+        internalFormat() {
+            return this.returnStr;
+        }
+    }
+}

index.html

@@ -1,13 +1,54 @@
 <!DOCTYPE html>
 <html>
-<head>
-	<title>JS Onboard Project</title>
-	<script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
-</head>
+	<head>
+		<title>JS Onboard Project</title>
+		<script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
+		<script type="module" src="app.js" defer></script>
+		<script type="text/javascript" src="interfaces/has-format-method.js"></script>
+		<script type="text/javascript" src="classes/render-table-headings.js"></script>
+		<script type="text/javascript" src="classes/table-heading-string.js"></script>
+		<script type="text/javascript" src="classes/get-column-headings.js"></script>
+		<script type="text/javascript" src="classes/render-table-rows.js"></script>
+		<link rel="stylesheet" href="main.css">
+	</head>
+	<body>
+		<!-- This section contains all the navigation tools of the grid -->
+		<div id="navigation" class="navigation">
+
+			<!-- This div contains the buttons to navigate directly to the beginning or the end of the entire data-set  -->
+			<div class="filters">
+				<button class="button" id="gotostart">Go to Start</button>
+				<button class="button" id="gotoend">Go to End</button>
+			</div>
 
-<body>
-	<p>Hello</p>
-</body>
+			<!-- This div contains the form for navigating to the specified ID in the form as the start ID of the records showing -->
+			<div id="form" class="form">
+				<label>Start from ID: </label>
+				<input type="number" pattern="^[0-9]$" class="startfrom" id="startfrom" name="startfrom" placeholder="0" autofocus />
+				<input type="submit" class="submit" id="submit" value="Submit" />
+			</div>
 
+			<!-- This div contains the section for navigating left and right pages through the data -->
+			<div class="pagination">
+				<svg id="leftarrow" class="arrow" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm3 5.753l-6.44 5.247 6.44 5.263-.678.737-7.322-6 7.335-6 .665.753z"/></svg>
+				<div id="values" class="values">
+					<p id="fromID" name="fromID"></p>
+					<p>-</p>
+					<p id="toID" name="toID"></p>
+					<p>of</p>
+					<p id="numofrecords" name="numofrecords"></p>
+				</div>
+				<svg id="rightarrow" class="arrow" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M12 0c6.623 0 12 5.377 12 12s-5.377 12-12 12-12-5.377-12-12 5.377-12 12-12zm0 1c6.071 0 11 4.929 11 11s-4.929 11-11 11-11-4.929-11-11 4.929-11 11-11zm-3 5.753l6.44 5.247-6.44 5.263.678.737 7.322-6-7.335-6-.665.753z"/></svg>
+			</div>
+		</div>
+
+		<!-- This div contains the table with the column headings and the records  -->
+		<div id="app">
+			<div id="table" class="table">
+				<div id="headings" class="headings"></div>
+				<div id="records" class="records"></div>
+			</div>
+		</div>
+	</body>
 </html>