Onboarding submission

README.md

@@ -72,14 +72,13 @@ Once you are done and happy with your solution, submit your code for code review
 ## Pre-requisites  
 
 1. You need to have set up your development environment [as described here](https://imqssoftware.atlassian.net/wiki/display/AR/Dev+Environment).  
-1. You can use either Microsoft Visual Studio Pro or Microsoft Visual Studio Express for Web as IDE.  
+1. We suggest using VSCode, but you can use your IDE of choice.   
 
 ## Getting Started  
 These steps include just enough detail to guide you. Each step will require some additional research on your part:
 1. Fork this GIT repository under your own GIT account  
 1. Start up the backend server:
     - Open console and change directory to `server` directory  
-    - Run `env.bat`  
     - Run `go run main.go`  
     - Open up your browser and point it to [http://localhost:2050](http://localhost:2050). You should see "Hello"  
 1. Create the frontend project:  

app.ts

@@ -0,0 +1,216 @@
+window.onload = () => {
+
+    let numColumns: number;
+    let columns: any;
+    let recordCount: number;
+    let startIndex = 0; // Default value = 0;
+    let tableRecordCount = 20; // Default value = 20;
+    let timer: number;
+
+    // Canvas:
+    let canvas = document.createElement("div");
+    canvas.id = "canvas";
+    $("body").append(canvas);
+
+    // Buttons and fields:
+    let searchbtn = document.createElement("button");
+    searchbtn.innerText = "Search";
+
+    let nextbtn = document.createElement("button");
+    nextbtn.innerText = "Next Page";
+
+    let prevbtn = document.createElement("button");
+    prevbtn.innerText = "Previous Page";
+
+    let fromField = document.createElement("input");
+    fromField.placeholder = "from";
+
+    // Window resizing (using a debouncing method):
+    window.onresize = () => {
+        let time = 100;
+        clearInterval(timer);
+        timer = setInterval(function () {
+            clearInterval(timer);
+            adjustTableRecordCount();
+            let end = tableRecordCount - 1;
+            if (recordCount < startIndex + tableRecordCount) {
+                startIndex = recordCount - tableRecordCount;
+            }
+            getRecords(startIndex, startIndex + end);
+        }, time);
+    }
+
+    // on clicks:
+    searchbtn.onclick = function() {
+        let from = parseInt(fromField.value, 10);
+        // validate field:
+        if (validate(from)) {
+            let end = tableRecordCount - 1;
+            startIndex = from;
+            if (recordCount < startIndex + tableRecordCount) {
+                startIndex = recordCount - tableRecordCount;
+            }
+            getRecords(startIndex, startIndex + end);
+        }
+    };
+
+    nextbtn.onclick = function() {
+        let end = tableRecordCount - 1;
+        if (recordCount > startIndex + tableRecordCount) {
+            startIndex += tableRecordCount;
+            if (recordCount < startIndex + tableRecordCount) {
+                startIndex = recordCount - tableRecordCount;
+            }
+            getRecords(startIndex, startIndex + end);
+        }
+    };
+
+    prevbtn.onclick = function() {
+        if (startIndex >= tableRecordCount) {
+            startIndex -= tableRecordCount;
+        } else if (startIndex < tableRecordCount) {
+            startIndex = 0;
+        }
+        getRecords(startIndex, startIndex + tableRecordCount - 1);
+    };
+
+    $("#canvas").append(fromField,searchbtn, prevbtn, nextbtn);
+
+    initiate();
+
+    /**
+     * Initiates the HTTP requests to obtain the records and column values necessary for the table.
+     */
+    function initiate() {
+        // get number of records:
+        $.ajax({
+            url: "http://localhost:2050/recordCount",
+            success: function (result) {
+                recordCount = parseInt(JSON.parse(result), 10);
+                // get columns:
+                $.ajax({
+                    url: "http://localhost:2050/columns",
+                    success: function (result) {
+                        columns = JSON.parse(result);
+                        numColumns = getSize(columns);
+                        // get first page of records and display them:
+                        adjustTableRecordCount();
+                        getRecords(0, tableRecordCount - 1);
+                    },
+                    error: function (err) {
+                        $("body").text("Error: " + err.status + " " + err.statusText);
+                    }
+                });
+            },
+            error: function (err) {
+                $("body").text("Error: " + err.status + " " + err.statusText);
+            }
+        });
+    }
+
+    /**
+     * Generates a table populated with data, distrubuted evenly.
+     * @param data The data records retrieved from the server, structured as a 2D object array.
+     * @param columns An object array containing the column heading values.
+     */
+    function generateTable(data: any, columns: any) {
+        $("table").remove(); // Remove previous table
+        let dataSize = getSize(data);
+        let table = document.createElement("table");
+        let tbdy = document.createElement("tbody");
+        table.appendChild(generateHeadings(columns));
+        for (let i = 0; i < tableRecordCount; i++){
+            let tr = document.createElement("tr");
+            for (let j = 0; j < numColumns; j++){
+                let td = document.createElement("td");
+                if (dataSize > i)
+                    td.appendChild(document.createTextNode(data[i][j]));
+                tr.appendChild(td);
+            }
+            tbdy.appendChild(tr);
+        }
+        table.appendChild(tbdy);
+        canvas.appendChild(table);
+    }
+
+    /**
+     * Finds the number of entries within a data set.
+     * @param data An array of data, type is unknown (any).
+     */
+    function getSize(data: any) {
+        let i = 0;
+        let entry;
+        for (entry in data) {
+            i++;
+        }
+        return i;
+    }
+
+    /**
+     * Sends out an HTTP request to retrieve data records, coupled with generating a table to display the records.
+     * @param from The ID value from which to start searching.
+     * @param to The ID value from which to stop searching.
+     */
+    function getRecords(from: number, to: number) {
+        $.ajax({
+            url: "http://localhost:2050/records",
+            data: {from: from, to: to},
+            success: function (result) {
+                let data = JSON.parse(result);
+                generateTable(data, columns);
+            },
+            error: function (err) {
+                $("body").text("Error: " + err.status + " " + err.statusText);
+            }
+        });
+    }
+
+    /**
+     * Generates and returns a "thead" object containing column headings.
+     * @param columns An object array containing the column heading values.
+     */
+    function generateHeadings(columns: any) {
+        let thead = document.createElement("thead");
+        let tr = document.createElement("tr");
+        for (let j = 0; j < numColumns; j++) {
+            let td = document.createElement("td");
+            td.appendChild(document.createTextNode(columns[j]));
+            tr.appendChild(td);
+        }
+        thead.appendChild(tr);
+        return thead;
+    }
+
+    /**
+     * Validates that the field value is a number.
+     * @param from The ID value from which to start searching.
+     */
+    function validate(from: number) {
+        if (isNaN(from)) {
+            alert("\"From\" field does not have a number value.");
+            return false;
+        } else if (from < 0) {
+            alert("\"From\" value cannot be negative.");
+            return false;
+        }  else if (from > recordCount-1) {
+            alert("\"From\" value exceeds the record count.");
+            return false;
+        }
+        return true;
+    }
+
+    /**
+     * Adjust the number of records shown in the table according to the window size.
+     */
+    function adjustTableRecordCount() {
+        let height = window.innerHeight;
+        let fontSize = getComputedStyle(document.documentElement).fontSize + "";
+        let rowHeight = parseFloat(fontSize)*2.5;
+        if (rowHeight !== undefined){
+            tableRecordCount = Math.trunc(height/rowHeight)-2;
+            if (tableRecordCount < 1)
+                tableRecordCount = 1;
+        }
+    }
+
+}

app_styles.css

@@ -0,0 +1,37 @@
+input, button {
+    display: inline;
+    padding: 0.5rem;
+}
+
+#canvas {
+    width: 100vw;
+    height: 100vh;
+}
+
+table {
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+    overflow: hidden;
+    font-size: 0.8rem;
+}
+
+td {
+    width: 9%;
+    height: 2rem;
+    padding: 0.2rem;
+    border-left: 1px darkgrey solid;
+}
+
+tr:hover {
+    background-color: lightgrey;
+}
+
+tr {
+    border: 1px darkgrey solid;
+}
+
+html {
+    overflow: hidden;
+}
+

index.html

@@ -3,10 +3,12 @@
 <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="text/javascript" charset="utf-8" src="app.js"></script>
+	<link rel="stylesheet" type="text/css" href="app_styles.css">
 </head>
 
 <body>
-	<p>Hello</p>
+
 </body>
 
 </html>

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "onboard-javascript",
+  "version": "1.0.0",
+  "description": "Onboarding",
+  "main": "index.js",
+  "dependencies": {
+    "jquery": "^3.4.1"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pierrehenrinortje/onboard-javascript.git"
+  },
+  "author": "pierre",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/pierrehenrinortje/onboard-javascript/issues"
+  },
+  "homepage": "https://github.com/pierrehenrinortje/onboard-javascript#readme"
+}