Devin Fledermaus

app.ts

@@ -0,0 +1,274 @@
+let fromParameter = 0;
+let timer: number;
+let recordCount = 0;
+
+//// On Window Load
+
+window.onload = function () {
+  getRecordCount()
+    .then(() => {
+      return getHeadings();
+    })
+    .then(() => {
+      return getTable();
+    });
+  console.log("CALL HECTOR!!!");
+};
+
+const getParameters = (fromParameter: number) => {
+  let toParameter: number;
+  let noOfRows = getNoOfRows();
+
+  toParameter = fromParameter + noOfRows;
+  return toParameter;
+};
+
+const getNoOfRows = () => {
+  const height = window.innerHeight;
+  let noOfRows = Math.floor(height / 40);
+  return noOfRows;
+};
+
+//// Functions To Create/Clear The HTML
+
+// Heading Row
+
+const createHeadingRow = (headingData: string) => {
+  const heading: any = document.querySelector("#heading");
+
+  let headings = `<div class="headings" id="headings">${headingData}</div>`;
+  heading.innerHTML += headings;
+};
+
+// Table Content
+
+const createTableContent = (contentData: string) => {
+  const content: any = document.querySelector("#content");
+
+  let table = `<div id="row-${contentData[0]}" class="rows"></div>`;
+  content.innerHTML += table;
+
+  let rows: any = document.querySelector("#row-" + contentData[0] + ".rows");
+  for (let x = 0; x < contentData.length; x++) {
+    let rowCols = `<div class="row_cols">${contentData[x]}</div>`;
+    rows.innerHTML += rowCols;
+  }
+};
+
+//// Fetch Requests
+
+// Heading Row (Getting the columns data)
+
+const getHeadings = () => {
+  fetch("http://localhost:2050/columns", {
+    method: "GET",
+    headers: { "Content-Type": "application/json" },
+  })
+    .then((res) => res.text())
+    .then((data) => {
+      let headingData = JSON.parse(data);
+      for (let i = 0; i < headingData.length; i++) {
+        createHeadingRow(headingData[i]);
+      }
+      getParameters((fromParameter = 0));
+    })
+    .catch((error) => {
+      console.log("Call Hector", error);
+    });
+};
+
+// Table Content (Getting the table's data)
+
+const getTable = () => {
+  const content: any = document.querySelector("#content");
+  let toParameter = getParameters(fromParameter);
+  const pageStats: any = document.querySelector("#pageStats");
+
+  // Clears Table
+  content.innerHTML = "";
+
+  // Displays The Current Results Being Shown
+  let currentStats = `Showing results from ${fromParameter} to ${toParameter} out of ${recordCount} results.`;
+  pageStats.innerHTML = currentStats;
+
+  fetch(`http://localhost:2050/records?from=${fromParameter}&to=${toParameter}`, {
+    method: "GET",
+    headers: { "Content-Type": "application/json" },
+  })
+    .then((res) => res.text())
+    .then((data) => {
+      let contentData = JSON.parse(data);
+      for (let i = 0; i < contentData.length; i++) {
+        createTableContent(contentData[i]);
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+};
+
+let getRecordCount = () => {
+  return fetch("http://localhost:2050/recordCount", {
+    method: "GET",
+    headers: { "Content-Type": "application/json" },
+  })
+    .then((res) => res.text())
+    .then((data) => {
+      recordCount = JSON.parse(data);
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+};
+
+// getRecordCount();
+// getHeadings();
+// getTable();
+
+//// Debounce
+
+const debounce = (fn: any, delay: number) => {
+  return function () {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fn();
+    }, delay);
+  };
+};
+
+//// Sizing And Resizing
+
+let resizing = () => {
+  let end = fromParameter + getNoOfRows();
+  let toParameter: number;
+
+  if (end > 999999) {
+    toParameter = 999999;
+    fromParameter = toParameter - getNoOfRows();
+  } else {
+    toParameter = fromParameter + getNoOfRows();
+  }
+  getTable();
+};
+
+resizing = debounce(resizing, 500);
+
+window.addEventListener("resize", resizing);
+
+//// Navigation
+
+// Next
+{
+  let nextCount = 0;
+  const nextButton: any = document.querySelector("#next");
+
+  const nextDebounce = (fn: any, delay: number) => {
+    return function () {
+      nextCount++;
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        fn();
+      }, delay);
+    };
+  };
+
+  let next = () => {
+    let toParameter = getParameters(fromParameter);
+
+    if (toParameter === 999999) {
+      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 > 999999) {
+      toParameter = 999999;
+      fromParameter = toParameter - getNoOfRows();
+    }
+
+    nextCount = 0;
+
+    getTable();
+  };
+
+  nextButton.addEventListener("click", nextDebounce(next, 500));
+}
+
+// Previous
+{
+  let prevCount = 0;
+  const prevButton: any = document.querySelector("#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;
+      }
+
+      toParameter = fromParameter + getNoOfRows();
+
+      prevCount = 0;
+
+      getTable();
+    }
+  };
+
+  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();
+
+    if (search !== NaN && search !== "" && search < 1000000 && search >= 0) {
+      if (end > 999999) {
+        toParameter = 999999;
+        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"
+  }
+}