Devin Fledermaus

app.ts

@@ -0,0 +1,285 @@
+let fromParameter = 0;
+let timer: number;
+let recordCount: number;
+
+//// On Window Load
+window.onload = function () {
+    getRecordCount()
+        .then(() => {
+            return getHeadings();
+        })
+        .then(() => {
+            return getTable();
+        });
+    console.log("CALL HECTOR!!!");
+};
+
+function getParameters(fromParameter: number) {
+    let toParameter: number;
+    let noOfRows = getNoOfRows();
+
+    toParameter = fromParameter + noOfRows;
+    return toParameter;
+}
+
+function getNoOfRows(): number {
+    const height = window.innerHeight;
+    let noOfRows = Math.floor(height / 40);
+    return noOfRows;
+}
+
+//// Functions To Create/Clear The HTML
+// Heading Row
+function createHeadingRow(headingData: string) {
+    const heading: HTMLElement | null = document.getElementById("heading");
+
+    let headings = `<div class="headings" id="headings">${headingData}</div>`;
+    if (heading !== null) {
+        heading.innerHTML += headings;
+    }
+}
+
+// Table Content
+function createTableContent(contentData: string) {
+    const content: HTMLElement | null = document.getElementById("content");
+
+    let table = `<div id="row-${contentData[0]}" class="rows"></div>`;
+    if (content !== null) {
+        content.innerHTML += table;
+    }
+
+    let rows: HTMLElement | null = document.getElementById("row-" + contentData[0]);
+    for (let x = 0; x < contentData.length; x++) {
+        let rowCols = `<div class="row_cols">${contentData[x]}</div>`;
+        if (rows !== null) {
+            rows.innerHTML += rowCols;
+        }
+    }
+}
+
+//// Fetch Requests
+// Response Error Handling
+function handleErrors(response: Response) {
+    if (!response.ok) {
+        throw Error(response.statusText);
+    }
+    return response;
+}
+
+// Heading Row (Getting the columns data)
+function getHeadings() {
+    return fetch("http://localhost:2050/columns", {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+    })
+        .then(handleErrors)
+        .then((response) => response.text())
+        .then((data) => {
+            let headingData = JSON.parse(data);
+            for (let i = 0; i < headingData.length; i++) {
+                createHeadingRow(headingData[i]);
+            }
+            getParameters(0);
+        })
+        .catch((error: Error) => {
+            console.log(error);
+        });
+}
+
+// Table Content (Getting the table's data)
+function getTable() {
+    const content: HTMLElement | null = document.getElementById("content");
+    let toParameter = getParameters(fromParameter);
+    const pageStats: HTMLElement | null = document.getElementById("pageStats");
+
+    // Clears Table
+    if (content !== null) {
+        content.innerHTML = "";
+    }
+
+    // Displays The Current Results Being Shown
+    let currentStats = `Showing results from ${fromParameter} to ${toParameter} out of ${recordCount} results.`;
+    if (pageStats !== null) {
+        pageStats.innerHTML = currentStats;
+    }
+
+    return fetch(`http://localhost:2050/records?from=${fromParameter}&to=${toParameter}`, {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+    })
+        .then(handleErrors)
+        .then((res: Response) => res.text())
+        .then((data) => {
+            let contentData = JSON.parse(data);
+            for (let i = 0; i < contentData.length; i++) {
+                createTableContent(contentData[i]);
+            }
+        })
+        .catch((error: Error) => {
+            console.log(error);
+        });
+}
+
+// Gets Total Of All Records
+function getRecordCount() {
+    return fetch("http://localhost:2050/recordCount", {
+        method: "GET",
+        headers: { "Content-Type": "application/json" },
+    })
+        .then(handleErrors)
+        .then((res: Response) => res.text())
+        .then((data) => {
+            recordCount = JSON.parse(data);
+        })
+        .catch((error: Error) => {
+            console.log(error);
+        });
+}
+
+//// Debounce
+function debounce(fn: any, delay: number) {
+    return function () {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            fn();
+        }, delay);
+    };
+}
+
+//// Sizing And Resizing
+function resizing() {
+    let end = fromParameter + getNoOfRows();
+    let toParameter: number;
+    let maxRecordsID = recordCount - 1;
+
+    if (end > maxRecordsID) {
+        toParameter = maxRecordsID;
+        fromParameter = toParameter - getNoOfRows();
+    } else {
+        toParameter = fromParameter + getNoOfRows();
+    }
+    getTable();
+}
+
+window.addEventListener("resize", debounce(resizing, 500));
+
+//// Navigation
+// Next
+{
+    let nextCount = 0;
+    const nextButton: HTMLElement | null = document.getElementById("next");
+
+    const nextDebounce = (fn: any, delay: number) => {
+        return function () {
+            nextCount++;
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                fn();
+            }, delay);
+        };
+    };
+
+    let next = () => {
+        let toParameter = getParameters(fromParameter);
+        let maxRecordsID = recordCount - 1;
+
+        if (toParameter === maxRecordsID) {
+            alert("You have reached the final page");
+        }
+
+        let nextAmount = toParameter - fromParameter + 1;
+        let nextCountAmount = nextAmount * nextCount;
+        fromParameter = fromParameter + nextCountAmount;
+        toParameter = fromParameter + getNoOfRows();
+
+        let end = fromParameter + getNoOfRows();
+
+        if (end > maxRecordsID) {
+            toParameter = maxRecordsID;
+            fromParameter = toParameter - getNoOfRows();
+        }
+
+        nextCount = 0;
+
+        getTable();
+    };
+
+    if (nextButton !== null) {
+        nextButton.addEventListener("click", nextDebounce(next, 500));
+    }
+}
+
+// Previous
+{
+    let prevCount = 0;
+    const prevButton: HTMLElement | null = document.getElementById("prev");
+
+    const prevDebounce = (fn: any, delay: number) => {
+        return function () {
+            prevCount++;
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                fn();
+            }, delay);
+        };
+    };
+
+    let prev = () => {
+        let toParameter = getParameters(fromParameter);
+
+        if (fromParameter === 0) {
+            alert("You Are On The First Page");
+        } else {
+            let prevAmount = toParameter - fromParameter + 1;
+            let prevCountAmount = prevAmount * prevCount;
+
+            let intOne = fromParameter - prevCountAmount;
+
+            if (intOne < 0) {
+                fromParameter = 0;
+            } else {
+                fromParameter = intOne;
+            }
+
+            prevCount = 0;
+
+            getTable();
+        }
+    };
+
+    if (prevButton !== null) {
+        prevButton.addEventListener("click", prevDebounce(prev, 500));
+    }
+}
+
+// ID Jump
+{
+    const input: any = document.querySelector("input");
+
+    let idJump = () => {
+        let toParameter = getParameters(fromParameter);
+        let currentID = fromParameter;
+        let search = input.value;
+        let end = parseInt(search) + getNoOfRows();
+        let maxRecordsID = recordCount - 1;
+
+        if (search !== NaN && search !== "" && search <= maxRecordsID && search >= 0) {
+            if (end > maxRecordsID) {
+                toParameter = maxRecordsID;
+                fromParameter = toParameter - getNoOfRows();
+            } else {
+                fromParameter = parseInt(search);
+                toParameter = fromParameter + getNoOfRows();
+            }
+        } else if (search !== "") {
+            alert("Make Sure Your Desired ID Is Not A Negative Number Or Doesn't Exceed 999999");
+            fromParameter = currentID;
+            toParameter = fromParameter + getNoOfRows();
+            input.value = "";
+        }
+
+        getTable();
+    };
+
+    window.addEventListener("input", debounce(idJump, 500));
+}

index.html

@@ -1,13 +1,27 @@
 <!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>
-
-<body>
-	<p>Hello</p>
-</body>
-
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Onboarding JavaScript Task</title>
+        <script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
+        <link rel="stylesheet" href="style.css" />
+        <script src="app.js" defer></script>
+    </head>
+    <body>
+        <div id="nav">
+            <label id="pageStats"></label>
+            <div id="jumpID">
+                <input type="number" id="idJump" placeholder="Input A Starting ID" />
+                <!-- <button>Jump to ID</button> -->
+            </div>
+            <div id="btns">
+                <button class="prev" id="prev">Prev</button>
+                <button class="next" id="next">Next</button>
+            </div>
+        </div>
+        <div id="heading"></div>
+        <div id="content"></div>
+    </body>
 </html>
-

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "onboard-javascript",
+  "version": "1.0.0",
+  "description": "This is a JavaScript project for all new developers to complete before venturing into our web frontend codebase.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc --build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Koumori97/onboard-javascript.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Koumori97/onboard-javascript/issues"
+  },
+  "homepage": "https://github.com/Koumori97/onboard-javascript#readme",
+  "dependencies": {
+    "typescript": "^4.6.3"
+  },
+  "devDependencies": {
+    "@types/jquery": "^3.5.14"
+  }
+}