From 24da354df155f24269c5620874ed2c3c8fcd3c48 Mon Sep 17 00:00:00 2001 From: MeezaanD Date: Mon, 14 Aug 2023 08:55:57 +0200 Subject: [PATCH 01/43] first push --- app.ts | 207 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 79 +++++++++++++++-- package-lock.json | 27 ++++++ package.json | 28 ++++++ style.css | 211 ++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 543 insertions(+), 9 deletions(-) create mode 100644 app.ts create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 style.css diff --git a/app.ts b/app.ts new file mode 100644 index 00000000..31ed5914 --- /dev/null +++ b/app.ts @@ -0,0 +1,207 @@ +window.onload = function () { + const IMQS: string = "http://localhost:2050"; + let totalRecordCount: number; + + // Displaying the columns and creating the th dynamically as the columns + async function fetchAndDisplayColumns(): Promise { + try { + let columns: string[] = await (await fetch(`${IMQS}/columns`)).json(); + let tableHeaderRow = $("#tableHeaderRow"); + + columns.forEach((columnName: string) => { + let th = document.createElement("th"); + th.textContent = columnName; + tableHeaderRow.append(th); + }); + + await displayPageData(0, totalRecordCount); + } catch (error) { + console.log("ERROR:", error); + } + }; + + async function displayPageData( + recordID: number, + totalRecordCount: number + ): Promise { + try { + let response = await fetch( + `${IMQS}/records?from=${recordID}&to=${totalRecordCount}` + ); + + let data: any[] = await response.json(); + console.log(data); + + let tableData = ""; + data.forEach((record: string[]) => { + tableData += ""; + record.forEach((value: string) => { + tableData += `${value}`; + }); + tableData += ""; + }); + $("#tableBody").html(tableData); + } catch (error) { + console.log("ERROR:", error); + } + }; + + // This displays the actual NUMBER of Total records on the html + async function fetchTotalRecordCount(): Promise { + try { + let recordCount: number = await ( + await fetch(`${IMQS}/recordCount`) + ).json(); + totalRecordCount = recordCount; + $("#totalRecordCount").text(totalRecordCount); + } catch (error) { + console.error("Error fetching total record count:", error); + } + } + + // Displays records from 1 to 999 on the initial page + displayPageData(1, 999); + + fetchTotalRecordCount(); + fetchAndDisplayColumns(); + + // Function to sort the IDS in the first column into ascending order , + // it converts the strings to numbers then filters it + + async function sortTableAsc(): Promise { + try { + let rows = $("#tableBody tr").get(); + rows.sort((a, b) => { + let aValue = parseFloat($(a).children("td:first").text()) || 0; + let bValue = parseFloat($(b).children("td:first").text()) || 0; + return aValue - bValue; + }); + $("#tableBody").append(rows); + } catch (error) { + console.log("Sorting Ascending Error:", error); + } + }; + + $("#sortAscButton").on("click", async () => { + await sortTableAsc(); + }); + + // Function to sort the IDS in the first column into descending order , + // it converts the strings to numbers then filters it + + async function sortTableDesc(): Promise { + try { + let rows = $("#tableBody tr").get(); + rows.sort((a, b) => { + let aValue = parseFloat($(a).children("td:first").text()) || 0; + let bValue = parseFloat($(b).children("td:first").text()) || 0; + return bValue - aValue; + }); + $("#tableBody").append(rows); + } catch (error) { + console.log("Sorting Descending Error:", error); + } + }; + + $("#sortDescButton").on("click", async () => { + await sortTableDesc(); + }); + + // Filter to display range from a certain ID to another ID + $("#rangeForm").submit(async (event) => { + event.preventDefault(); + let fromInput = $("#fromInput"); + let toInput = $("#toInput"); + let from = parseInt((fromInput.val() as string) || "0"); + let to = parseInt((toInput.val() as string) || "0"); + + if (!isNaN(from) && !isNaN(to)) { + await fetchRecords(from, to); + } + }); + + async function fetchRecords(from: number, to: number): Promise { + try { + let response = await fetch(`${IMQS}/records?from=${from}&to=${to}`); + let data: any[] = await response.json(); + + let tableData = ""; + for (let i = 0; i < data.length; i++) { + let record = data[i]; + tableData += ""; + for (let j = 0; j < record.length; j++) { + let value = record[j]; + tableData += `${value}`; + } + tableData += ""; + } + $("#tableBody").html(tableData); + + // Display record range + if (data.length > 0) { + let firstRecordID = data[0][0]; + let lastRecordID = data[data.length - 1][0]; + $("#recordRange").html( + `
  • Displaying from Record ${firstRecordID} to Record ${lastRecordID}
    • ` + ); + $("#recordRange").css({ + border: "5px dotted var(--primary-color)", + padding: "1rem", + }); + } else { + $("#recordRange").html("No records found."); + } + } catch (error) { + console.log("ERROR:", error); + } + }; + + $("#searchForm").submit(function (event) { + event.preventDefault(); + let searchValue = $("#searchInput").val(); + + if (searchValue !== undefined) { + searchValue = searchValue.toString().toUpperCase(); + + // Allows the css to have empty value before the css styling to the search results of the search has been done + $("#tableHeaderRow th").css("background-color", ""); + $("#tableBody td").css({ + "background-color": "", + color: "", + border: "", + }); + $("#searchResultsMessage").text(""); + + // This hides all the th and td that is not corresponding to the search results + $("#tableHeaderRow th").each(function () { + let columnText = $(this).text().toUpperCase(); + if (columnText === searchValue || columnText === "ID") { + $(this).show(); + + // This displays the matching result of the records searched + let columnIndex = $(this).index(); + $("#tableBody tr").each(function () { + let row = $(this); + row.find("td").eq(columnIndex).show(); + row.find("td").eq(columnIndex).css({ + "background-color": "var(--quaternary-color)", + color: "var(--tertiary-color)", + "font-weight": "900", + border: "2px solid var(--secondary-color)", + }); + }); + + // Display search results message + $("#searchResultsMessage").html( + `
  • Results for "${searchValue}"
    • ` + ); + } + $("#searchResultsMessage").css({ + border: "5px dotted var(--primary-color)", + padding: "1rem", + }); + }); + } + }); + }; + \ No newline at end of file diff --git a/index.html b/index.html index add5e736..d5e89196 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,74 @@ - - JS Onboard Project - - - - -

    Hello

    - + + JS Onboard Project + + + + +

    IMQS Onboarding Project

    +
      +
      +
      +
    +
      +
    • + +
      • +
    • + + +
      • +
    • + +
      +
      + +
      +
      + +
      + +
      +
      • +
    • +
      +
      + +
      + +
      +
      • +
    +
    + + + + + + + + + +
    +
    +

    Total Records:

    + + - diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..af2563bc --- /dev/null +++ b/package-lock.json @@ -0,0 +1,27 @@ +{ + "name": "onboard-javascript", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@types/jquery": { + "version": "3.5.16", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.16.tgz", + "integrity": "sha512-bsI7y4ZgeMkmpG9OM710RRzDFp+w4P1RGiIt30C1mSBT+ExCleeh4HObwgArnDFELmRrOpXgSYN9VF1hj+f1lw==", + "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": "3.8.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz", + "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==", + "dev": true + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..8edad3a8 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "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 -p .", + "start" : "npm run build -- -w" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/MeezaanD/onboard-javascript.git" + }, + "keywords": [], + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/MeezaanD/onboard-javascript/issues" + }, + "homepage": "https://github.com/MeezaanD/onboard-javascript#readme", + "devDependencies": { + "typescript": "^3.8.3" + }, + "dependencies": { + "@types/jquery": "^3.5.16" + } +} diff --git a/style.css b/style.css new file mode 100644 index 00000000..11491670 --- /dev/null +++ b/style.css @@ -0,0 +1,211 @@ +/* IMPORTED URLS */ + +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + + +body { + overflow: hidden; +} + +/* Colors */ + +:root { + --primary-color: white; + --secondary-color: #292929; + --tertiary-color: black; + --quaternary-color: orange; +} + +/* Colors */ + +/* TYPOGRAPHY */ + +h1 { + text-align: center; +} + +h3 { + text-align: end; + margin: 0 10px; + text-transform: uppercase; +} + +p { + text-align: center; + margin: 10px; + font-weight: 800; + font-size: 25px; + color: var(--tertiary-color); +} + +span { + /* padding: 10px; */ + font-size: 25px; + font-weight: 900; + color: var(--tertiary-color); + border-radius: 5px; +} + +/* TYPOGRAPHY */ + +/* BUTTON STARTS */ + +button { + cursor: pointer; + padding: 12px; + font-size: 16px; + margin-top: 20px; + color: var(--primary-color); + background-color: var(--secondary-color); + border-radius: 5px; + box-shadow: inset 20px 20px 60px #232323, inset -20px -20px 60px #2f2f2f; +} + +/* BUTTON ENDS */ + +/* LIST STYLING STARTS */ + +ul.navigation { + display: flex; + width: 100%; + gap: 25px; + list-style: none; + justify-content: center; + padding: 3px; +} + +ul.navigation > li { + border: none; +} + +ul.display { + display: flex; + list-style: none; + justify-content: center; + gap: 25px; + width: 100%; +} + +/* LIST STYLING ENDS */ + +/* FORM STARTS */ + +form { + display: flex; + align-items: center; +} + +.form-group { + display: flex; + align-items: flex-start; + margin: 20px 10px 10px 0; +} + +.form-group label { + font-weight: bold; +} + +form > button { + margin-bottom: 10px; +} + +input { + padding: 12px; + font-size: 16px; + color: var(--tertiary-color); + background-color: transparent !important; + border-radius: 0; + box-shadow: inset 20px 20px 60px #c1c1c1, inset -20px -20px 60px #ffffff; + /* border: 2px solid var(--tertiary-color); */ + /* outline: none; */ +} + +input::placeholder { + color: var(--tertiary-color); +} + +/* FORM ENDS */ + +/* TABLE STARTS */ + +.table-container { + height: 80vh; + border: 1px solid var(--tertiary-color); + overflow-y: scroll; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.table-container::-webkit-scrollbar { + display: none; +} + +table { + width: 100%; + /* border: 1px solid var(--tertiary-color); */ + border-collapse: collapse; + table-layout: fixed; + text-align: center; + font-size: 15px; +} + +body, +thead, +tbody { + background: #e3e3e3; + box-shadow: inset 20px 20px 60px #c1c1c1, inset -20px -20px 60px #ffffff; +} + +table, +th { + color: var(--tertiary-color); + font-weight: 800; + background: #e3e3e3; + position: sticky; + top: 0; + box-shadow: inset 20px 20px 60px #c1c1c1, inset -20px -20px 60px #ffffff; +} + +th { + border-right: 2px solid var(--tertiary-color); + border-bottom: 2px solid var(--tertiary-color); + padding: 10px; +} + +th:hover { + color: var(--primary-color); + background: var(--secondary-color); + box-shadow: none !important; + border: none !important; +} + +td { + border-right: 1px solid var(--secondary-color); + font-weight: 300; + color: var(--tertiary-color); +} + +td:nth-child(1) { + font-weight: 500; +} + +/* TABLE ENDS */ + +/* MEDIA QUERY */ + +@media (max-width: 576px) { + .navigation, + form { + display: block; + align-items: center; + } +} + +/* MEDIA QUERY */ From f3ec479d4fdfe691c392936d1181e04a6eb848e6 Mon Sep 17 00:00:00 2001 From: MeezaanD Date: Mon, 14 Aug 2023 16:44:42 +0200 Subject: [PATCH 02/43] update to search --- app.ts | 63 +++++++++++++---------------- index.html | 79 +++++++++++++++--------------------- style.css | 116 +++++++++++++++++++++++++++++++++-------------------- 3 files changed, 132 insertions(+), 126 deletions(-) diff --git a/app.ts b/app.ts index 31ed5914..c3e922d9 100644 --- a/app.ts +++ b/app.ts @@ -30,8 +30,6 @@ window.onload = function () { ); let data: any[] = await response.json(); - console.log(data); - let tableData = ""; data.forEach((record: string[]) => { tableData += ""; @@ -144,10 +142,6 @@ window.onload = function () { $("#recordRange").html( `
  • Displaying from Record ${firstRecordID} to Record ${lastRecordID}
    • ` ); - $("#recordRange").css({ - border: "5px dotted var(--primary-color)", - padding: "1rem", - }); } else { $("#recordRange").html("No records found."); } @@ -159,11 +153,11 @@ window.onload = function () { $("#searchForm").submit(function (event) { event.preventDefault(); let searchValue = $("#searchInput").val(); - + if (searchValue !== undefined) { searchValue = searchValue.toString().toUpperCase(); - - // Allows the css to have empty value before the css styling to the search results of the search has been done + + // Reset previous search styling and messages $("#tableHeaderRow th").css("background-color", ""); $("#tableBody td").css({ "background-color": "", @@ -171,37 +165,34 @@ window.onload = function () { border: "", }); $("#searchResultsMessage").text(""); - - // This hides all the th and td that is not corresponding to the search results - $("#tableHeaderRow th").each(function () { - let columnText = $(this).text().toUpperCase(); - if (columnText === searchValue || columnText === "ID") { - $(this).show(); - - // This displays the matching result of the records searched - let columnIndex = $(this).index(); - $("#tableBody tr").each(function () { - let row = $(this); - row.find("td").eq(columnIndex).show(); - row.find("td").eq(columnIndex).css({ - "background-color": "var(--quaternary-color)", - color: "var(--tertiary-color)", - "font-weight": "900", - border: "2px solid var(--secondary-color)", - }); + + // Loop through each row to find matching rows + $("#tableBody tr").each(function () { + let row = $(this); + let matchingCells = row.find("td").filter(function () { + return $(this).text().toUpperCase().includes(searchValue); + }); + + if (matchingCells.length > 0) { + row.show(); // Show the row if there are matching cells + matchingCells.css({ + "background-color": "var(--quaternary-color)", + color: "var(--tertiary-color)", + "font-weight": "900", + border: "2px solid var(--secondary-color)", }); - - // Display search results message - $("#searchResultsMessage").html( - `
  • Results for "${searchValue}"
    • ` - ); + } else { + row.hide(); // Hide the row if there are no matching cells } - $("#searchResultsMessage").css({ - border: "5px dotted var(--primary-color)", - padding: "1rem", - }); }); + + // Display search results message + $("#searchResultsMessage").html( + `
  • Results for "${searchValue}"
    • ` + ); } }); + + }; \ No newline at end of file diff --git a/index.html b/index.html index d5e89196..f95be49b 100644 --- a/index.html +++ b/index.html @@ -3,59 +3,46 @@ JS Onboard Project - + -

    IMQS Onboarding Project

    +

    IMQS Onboarding Project

    -
      -
    • - -
      • -
    • - - -
      • -
    • - -
      -
      - -
      -
      - -
      - -
      -
      • -
    • -
      -
      - -
      +
      + + + + + + + + +
      + +
      +
      + +
      +
      + +
      + + +
      +
      + +
      +
      - -
      • -
    + + + + +
    @@ -68,7 +55,7 @@

    IMQS Onboarding Project

    -

    Total Records:

    + diff --git a/style.css b/style.css index 11491670..f8173e70 100644 --- a/style.css +++ b/style.css @@ -1,12 +1,8 @@ -/* IMPORTED URLS */ - -@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); - * { padding: 0; margin: 0; box-sizing: border-box; - font-family: "Poppins", sans-serif; + font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif } @@ -20,14 +16,14 @@ body { --primary-color: white; --secondary-color: #292929; --tertiary-color: black; - --quaternary-color: orange; + --quaternary-color: yellow; } /* Colors */ /* TYPOGRAPHY */ -h1 { +h2 { text-align: center; } @@ -46,25 +42,29 @@ p { } span { - /* padding: 10px; */ font-size: 25px; font-weight: 900; color: var(--tertiary-color); border-radius: 5px; } +#recordRange { + text-align: center; +} + /* TYPOGRAPHY */ /* BUTTON STARTS */ button { cursor: pointer; - padding: 12px; - font-size: 16px; + padding: 10px; + height: auto; + min-width: fit-content; margin-top: 20px; color: var(--primary-color); background-color: var(--secondary-color); - border-radius: 5px; + border-radius: 0; box-shadow: inset 20px 20px 60px #232323, inset -20px -20px 60px #2f2f2f; } @@ -72,25 +72,17 @@ button { /* LIST STYLING STARTS */ -ul.navigation { +.navigation { display: flex; - width: 100%; - gap: 25px; - list-style: none; justify-content: center; - padding: 3px; -} - -ul.navigation > li { - border: none; + align-items: center; /* Add this line */ + margin-bottom: 15px; + gap: 10px; + width: 100%; } -ul.display { - display: flex; +li { list-style: none; - justify-content: center; - gap: 25px; - width: 100%; } /* LIST STYLING ENDS */ @@ -98,27 +90,20 @@ ul.display { /* FORM STARTS */ form { - display: flex; - align-items: center; + display: inline-flex; + justify-content: center; + gap: 10px; } .form-group { display: flex; - align-items: flex-start; - margin: 20px 10px 10px 0; -} - -.form-group label { - font-weight: bold; -} - -form > button { - margin-bottom: 10px; } input { - padding: 12px; - font-size: 16px; + padding: 10px; + margin-top: 20px; + height: auto; + width: 100%; color: var(--tertiary-color); background-color: transparent !important; border-radius: 0; @@ -136,7 +121,8 @@ input::placeholder { /* TABLE STARTS */ .table-container { - height: 80vh; + height: 100%; + width: 100%; border: 1px solid var(--tertiary-color); overflow-y: scroll; scrollbar-width: none; @@ -149,6 +135,7 @@ input::placeholder { table { width: 100%; + height: 100%; /* border: 1px solid var(--tertiary-color); */ border-collapse: collapse; table-layout: fixed; @@ -200,12 +187,53 @@ td:nth-child(1) { /* MEDIA QUERY */ +@media (max-width: 992px) { + .table-container { + transform: scale(0.8); /* Adjust the scaling factor as needed */ + transform-origin: center top; + } + + th, + td { + font-size: 0.8rem; /* Adjust font size for smaller screens */ + } +} + +@media (max-width: 768px) { + .table-container { + transform: scale(0.6); /* Adjust the scaling factor as needed */ + transform-origin: center top; + } + + th, + td { + font-size: 0.6rem; /* Adjust font size for smaller screens */ + } +} + @media (max-width: 576px) { - .navigation, - form { - display: block; - align-items: center; + .table-container { + transform: scale(0.4); /* Adjust the scaling factor as needed */ + transform-origin: center top; + } + + th, + td { + font-size: 0.4rem; /* Adjust font size for smaller screens */ } } +@media (max-width: 300px) { + .table-container { + transform: scale(0.2); /* Adjust the scaling factor as needed */ + transform-origin: center top; + } + + th, + td { + font-size: 0.2rem; /* Adjust font size for smaller screens */ + } + +} + /* MEDIA QUERY */ From a1270cefec4a209e96388816895e234d46c34375 Mon Sep 17 00:00:00 2001 From: MeezaanD Date: Tue, 15 Aug 2023 16:42:03 +0200 Subject: [PATCH 03/43] update on how I display records on the load up page --- app.ts | 358 ++++++++++++++++++++++++++--------------------------- index.html | 34 +++-- style.css | 122 ++++++++---------- 3 files changed, 238 insertions(+), 276 deletions(-) diff --git a/app.ts b/app.ts index c3e922d9..7d176155 100644 --- a/app.ts +++ b/app.ts @@ -1,198 +1,190 @@ window.onload = function () { - const IMQS: string = "http://localhost:2050"; - let totalRecordCount: number; - - // Displaying the columns and creating the th dynamically as the columns - async function fetchAndDisplayColumns(): Promise { - try { - let columns: string[] = await (await fetch(`${IMQS}/columns`)).json(); - let tableHeaderRow = $("#tableHeaderRow"); - - columns.forEach((columnName: string) => { - let th = document.createElement("th"); - th.textContent = columnName; - tableHeaderRow.append(th); - }); + // Global variables + const IMQS: string = "http://localhost:2050"; + let totalRecordCount: number; + let currentPage: number = 1; + const recordsPerPage: number = 26; + + // Displaying the columns and creating the th dynamically as the columns + async function fetchAndDisplayColumns(): Promise { + try { + let columns: string[] = await (await fetch(`${IMQS}/columns`)).json(); + let tableHeaderRow = $("#tableHeaderRow"); + + columns.forEach((columnName: string) => { + let th = document.createElement("th"); + th.textContent = columnName; + tableHeaderRow.append(th); + }); + + await fetchTotalRecordCount(); + await displayPageData((currentPage - 1) * recordsPerPage, recordsPerPage); + } catch (error) { + console.log("ERROR:", error); + } + } - await displayPageData(0, totalRecordCount); - } catch (error) { - console.log("ERROR:", error); - } - }; + async function goToPage(pageNumber: number): Promise { + currentPage = pageNumber; + let fromRecord = (currentPage - 1) * recordsPerPage; + await displayPageData(fromRecord, recordsPerPage); + } - async function displayPageData( - recordID: number, - totalRecordCount: number - ): Promise { - try { - let response = await fetch( - `${IMQS}/records?from=${recordID}&to=${totalRecordCount}` - ); + $("#prevPageButton").on("click", async () => { + if (currentPage > 1) { + await goToPage(currentPage - 1); + } + }); - let data: any[] = await response.json(); - let tableData = ""; - data.forEach((record: string[]) => { - tableData += ""; - record.forEach((value: string) => { - tableData += `${value}`; - }); - tableData += ""; + $("#nextPageButton").on("click", async () => { + const nextPage = Math.ceil(totalRecordCount / recordsPerPage); + if (currentPage < nextPage) { + await goToPage(currentPage + 1); + } + }); + + + async function displayPageData( + fromRecord: number, + recordsToDisplay: number + ): Promise { + try { + let response = await fetch( + `${IMQS}/records?from=${fromRecord}&to=${fromRecord + recordsToDisplay - 1}` + ); + + let data: any[] = await response.json(); + let tableData = ""; + data.forEach((record: string[]) => { + tableData += ""; + record.forEach((value: string) => { + tableData += `${value}`; }); - $("#tableBody").html(tableData); - } catch (error) { - console.log("ERROR:", error); + tableData += ""; + }); + $("#tableBody").html(tableData); + } catch (error) { + console.log("ERROR:", error); + } + } + + + // This displays the actual NUMBER of Total records on the html + async function fetchTotalRecordCount(): Promise { + try { + let recordCount: number = await ( + await fetch(`${IMQS}/recordCount`) + ).json(); + totalRecordCount = recordCount; + $("#totalRecordCount").text(totalRecordCount); + } catch (error) { + console.error("Error fetching total record count:", error); + } + } + + // Displays records from 1 to 30 on the initial page + displayPageData(1, 30); + + fetchTotalRecordCount(); + fetchAndDisplayColumns(); + + // Filter to display range from a certain ID to another ID + $("#rangeForm").submit(async (event) => { + event.preventDefault(); + let fromInput = $("#fromInput"); + let toInput = $("#toInput"); + let from = parseInt((fromInput.val() as string) || "0"); + let to = parseInt((toInput.val() as string) || "0"); + + if (!isNaN(from) && !isNaN(to)) { + await fetchRecords(from, to); + } + }); + + async function fetchRecords(from: number, to: number): Promise { + try { + let response = await fetch(`${IMQS}/records?from=${from}&to=${to}`); + let data: any[] = await response.json(); + + let tableData = ""; + for (let i = 0; i < data.length; i++) { + let record = data[i]; + tableData += ""; + for (let j = 0; j < record.length; j++) { + let value = record[j]; + tableData += `${value}`; + } + tableData += ""; } - }; - - // This displays the actual NUMBER of Total records on the html - async function fetchTotalRecordCount(): Promise { - try { - let recordCount: number = await ( - await fetch(`${IMQS}/recordCount`) - ).json(); - totalRecordCount = recordCount; - $("#totalRecordCount").text(totalRecordCount); - } catch (error) { - console.error("Error fetching total record count:", error); + $("#tableBody").html(tableData); + + // Display record range + if (data.length > 0) { + let firstRecordID = data[0][0]; + let lastRecordID = data[data.length - 1][0]; + $("#recordRange").html( + `
    Displaying from Record ${firstRecordID} to Record ${lastRecordID}
    ` + ); + } else { + $("#recordRange").html("No records found."); } + } catch (error) { + console.log("ERROR:", error); } - - // Displays records from 1 to 999 on the initial page - displayPageData(1, 999); - - fetchTotalRecordCount(); - fetchAndDisplayColumns(); - - // Function to sort the IDS in the first column into ascending order , - // it converts the strings to numbers then filters it - - async function sortTableAsc(): Promise { - try { - let rows = $("#tableBody tr").get(); - rows.sort((a, b) => { - let aValue = parseFloat($(a).children("td:first").text()) || 0; - let bValue = parseFloat($(b).children("td:first").text()) || 0; - return aValue - bValue; - }); - $("#tableBody").append(rows); - } catch (error) { - console.log("Sorting Ascending Error:", error); - } - }; - - $("#sortAscButton").on("click", async () => { - await sortTableAsc(); + } + + $("#searchForm").submit(function (e) { + e.preventDefault(); + let searchValue = $("#searchInput").val(); + + if (typeof searchValue === "string") { + searchValue = searchValue.toUpperCase(); + } + + // Reset previous search styling and messages + $("#tableHeaderRow th").css("background-color", ""); + $("#tableBody td").css({ + "background-color": "", + color: "", + border: "", }); - - // Function to sort the IDS in the first column into descending order , - // it converts the strings to numbers then filters it - - async function sortTableDesc(): Promise { - try { - let rows = $("#tableBody tr").get(); - rows.sort((a, b) => { - let aValue = parseFloat($(a).children("td:first").text()) || 0; - let bValue = parseFloat($(b).children("td:first").text()) || 0; - return bValue - aValue; + + $("#searchResultsMessage").text(""); + + // Adjust display and height of search result rows + $("#tableBody tr").each(function () { + let row = $(this); + let matchingCells = row.find("td").filter(function () { + let cellText: any = $(this).text(); + return cellText.toUpperCase().includes(searchValue); + }); + + if (matchingCells.length > 0) { + row.show(); + matchingCells.css({ + "background-color": "var(--quaternary-color)", + color: "var(--tertiary-color)", + "font-weight": "900", + border: "2px solid var(--secondary-color)", }); - $("#tableBody").append(rows); - } catch (error) { - console.log("Sorting Descending Error:", error); - } - }; + + // Set height and display property for search result rows + row.css({ + height: "auto" - $("#sortDescButton").on("click", async () => { - await sortTableDesc(); - }); - - // Filter to display range from a certain ID to another ID - $("#rangeForm").submit(async (event) => { - event.preventDefault(); - let fromInput = $("#fromInput"); - let toInput = $("#toInput"); - let from = parseInt((fromInput.val() as string) || "0"); - let to = parseInt((toInput.val() as string) || "0"); - - if (!isNaN(from) && !isNaN(to)) { - await fetchRecords(from, to); - } - }); - - async function fetchRecords(from: number, to: number): Promise { - try { - let response = await fetch(`${IMQS}/records?from=${from}&to=${to}`); - let data: any[] = await response.json(); - - let tableData = ""; - for (let i = 0; i < data.length; i++) { - let record = data[i]; - tableData += ""; - for (let j = 0; j < record.length; j++) { - let value = record[j]; - tableData += `${value}`; - } - tableData += ""; - } - $("#tableBody").html(tableData); - - // Display record range - if (data.length > 0) { - let firstRecordID = data[0][0]; - let lastRecordID = data[data.length - 1][0]; - $("#recordRange").html( - `
  • Displaying from Record ${firstRecordID} to Record ${lastRecordID}
    • ` - ); - } else { - $("#recordRange").html("No records found."); - } - } catch (error) { - console.log("ERROR:", error); - } - }; - - $("#searchForm").submit(function (event) { - event.preventDefault(); - let searchValue = $("#searchInput").val(); - - if (searchValue !== undefined) { - searchValue = searchValue.toString().toUpperCase(); - - // Reset previous search styling and messages - $("#tableHeaderRow th").css("background-color", ""); - $("#tableBody td").css({ - "background-color": "", - color: "", - border: "", }); - $("#searchResultsMessage").text(""); - - // Loop through each row to find matching rows - $("#tableBody tr").each(function () { - let row = $(this); - let matchingCells = row.find("td").filter(function () { - return $(this).text().toUpperCase().includes(searchValue); - }); - - if (matchingCells.length > 0) { - row.show(); // Show the row if there are matching cells - matchingCells.css({ - "background-color": "var(--quaternary-color)", - color: "var(--tertiary-color)", - "font-weight": "900", - border: "2px solid var(--secondary-color)", - }); - } else { - row.hide(); // Hide the row if there are no matching cells - } - }); - - // Display search results message - $("#searchResultsMessage").html( - `
  • Results for "${searchValue}"
    • ` - ); + } else { + // row.hide(); + console.log("ERROR:"); } }); - - - }; + + // Display search results message + $("#searchResultsMessage").html( + `
    Results for "${searchValue}"
    ` + ); + }); +}; + + \ No newline at end of file diff --git a/index.html b/index.html index f95be49b..66ae2312 100644 --- a/index.html +++ b/index.html @@ -6,41 +6,32 @@ -

    IMQS Onboarding Project

    -
      -
      -
      -
    +

    IMQS Onboarding Project

    +
    - - - - - - - +
    - +
    - +
    - +
    - -
    + +
    @@ -55,7 +46,10 @@

    IMQS Onboarding Project

    - +
    + + +
    diff --git a/style.css b/style.css index f8173e70..bb2e43f1 100644 --- a/style.css +++ b/style.css @@ -23,33 +23,24 @@ body { /* TYPOGRAPHY */ -h2 { +h3 { text-align: center; } -h3 { +h4 { text-align: end; - margin: 0 10px; text-transform: uppercase; } -p { - text-align: center; - margin: 10px; - font-weight: 800; - font-size: 25px; - color: var(--tertiary-color); -} - span { - font-size: 25px; font-weight: 900; color: var(--tertiary-color); + background: var(--quaternary-color); border-radius: 5px; } -#recordRange { - text-align: center; +#recordRange, #searchResultsMessage { + margin-top: 15px; } /* TYPOGRAPHY */ @@ -58,7 +49,7 @@ span { button { cursor: pointer; - padding: 10px; + padding: 15px; height: auto; min-width: fit-content; margin-top: 20px; @@ -75,24 +66,20 @@ button { .navigation { display: flex; justify-content: center; - align-items: center; /* Add this line */ - margin-bottom: 15px; - gap: 10px; + align-items: center; + margin-bottom: 5px; + gap: 5px; width: 100%; } -li { - list-style: none; -} - /* LIST STYLING ENDS */ /* FORM STARTS */ form { - display: inline-flex; + display: flex; justify-content: center; - gap: 10px; + gap: 5px; } .form-group { @@ -100,16 +87,14 @@ form { } input { - padding: 10px; + padding: 15px; margin-top: 20px; height: auto; - width: 100%; + width: auto; color: var(--tertiary-color); background-color: transparent !important; border-radius: 0; box-shadow: inset 20px 20px 60px #c1c1c1, inset -20px -20px 60px #ffffff; - /* border: 2px solid var(--tertiary-color); */ - /* outline: none; */ } input::placeholder { @@ -121,26 +106,18 @@ input::placeholder { /* TABLE STARTS */ .table-container { - height: 100%; width: 100%; + margin-top: 10px; border: 1px solid var(--tertiary-color); - overflow-y: scroll; - scrollbar-width: none; - -ms-overflow-style: none; -} - -.table-container::-webkit-scrollbar { - display: none; } table { width: 100%; - height: 100%; - /* border: 1px solid var(--tertiary-color); */ + height: auto; border-collapse: collapse; table-layout: fixed; text-align: center; - font-size: 15px; + font-size: 17px; } body, @@ -175,8 +152,10 @@ th:hover { td { border-right: 1px solid var(--secondary-color); + border-bottom: 1px solid var(--secondary-color); font-weight: 300; color: var(--tertiary-color); + padding: 3.5px; } td:nth-child(1) { @@ -187,53 +166,50 @@ td:nth-child(1) { /* MEDIA QUERY */ -@media (max-width: 992px) { - .table-container { - transform: scale(0.8); /* Adjust the scaling factor as needed */ - transform-origin: center top; - } - - th, - td { - font-size: 0.8rem; /* Adjust font size for smaller screens */ +@media (max-width: 576px) { + + button, input { + padding: 5px; } -} -@media (max-width: 768px) { - .table-container { - transform: scale(0.6); /* Adjust the scaling factor as needed */ - transform-origin: center top; + .navigation, + form { + display: flex; + /* flex-direction: column; */ + align-items: center; + justify-content: center; } - - th, - td { - font-size: 0.6rem; /* Adjust font size for smaller screens */ + table { + font-size: 11px; } -} -@media (max-width: 576px) { - .table-container { - transform: scale(0.4); /* Adjust the scaling factor as needed */ - transform-origin: center top; - } - th, td { - font-size: 0.4rem; /* Adjust font size for smaller screens */ + padding: 2px; } -} -@media (max-width: 300px) { - .table-container { - transform: scale(0.2); /* Adjust the scaling factor as needed */ - transform-origin: center top; + th { + position: relative; + top: 0; + box-shadow: none; + border: none; + background: #e3e3e3; + border-right: var(--tertiary-color); } - - th, + td { - font-size: 0.2rem; /* Adjust font size for smaller screens */ + border-right: 1px solid var(--secondary-color); + border-bottom: 1px solid var(--secondary-color); } + td:nth-child(1) { + font-weight: 500; + } + + .table-container { + overflow-x: auto; + margin-top: 0; + } } /* MEDIA QUERY */ From 77728c9004ca819238db1a0e711fb5c73fffcf78 Mon Sep 17 00:00:00 2001 From: MeezaanD Date: Wed, 16 Aug 2023 14:41:10 +0200 Subject: [PATCH 04/43] fixed the filtering issues and displaying on the large screen --- app.ts | 172 ++++++++++++++++++++++------------------------------- index.html | 58 ++++++++---------- style.css | 76 +++++++++++++++++++---- 3 files changed, 159 insertions(+), 147 deletions(-) diff --git a/app.ts b/app.ts index 7d176155..64a1f0cb 100644 --- a/app.ts +++ b/app.ts @@ -2,47 +2,50 @@ window.onload = function () { // Global variables const IMQS: string = "http://localhost:2050"; let totalRecordCount: number; - let currentPage: number = 1; - const recordsPerPage: number = 26; + let currentPage: number = 1; + const recordsPerPage: number = 32; // Displaying the columns and creating the th dynamically as the columns async function fetchAndDisplayColumns(): Promise { try { let columns: string[] = await (await fetch(`${IMQS}/columns`)).json(); let tableHeaderRow = $("#tableHeaderRow"); - + columns.forEach((columnName: string) => { let th = document.createElement("th"); th.textContent = columnName; tableHeaderRow.append(th); }); - + await fetchTotalRecordCount(); await displayPageData((currentPage - 1) * recordsPerPage, recordsPerPage); } catch (error) { console.log("ERROR:", error); } } - + async function goToPage(pageNumber: number): Promise { currentPage = pageNumber; let fromRecord = (currentPage - 1) * recordsPerPage; await displayPageData(fromRecord, recordsPerPage); } - + $("#prevPageButton").on("click", async () => { if (currentPage > 1) { - await goToPage(currentPage - 1); + currentPage--; + let fromRecord = (currentPage - 1) * recordsPerPage; + await displayPageData(fromRecord, recordsPerPage); } }); - + $("#nextPageButton").on("click", async () => { const nextPage = Math.ceil(totalRecordCount / recordsPerPage); if (currentPage < nextPage) { - await goToPage(currentPage + 1); + currentPage++; + let fromRecord = (currentPage - 1) * recordsPerPage; + await displayPageData(fromRecord, recordsPerPage); } }); - async function displayPageData( fromRecord: number, @@ -62,13 +65,18 @@ window.onload = function () { }); tableData += ""; }); + + // Adjust recordsToDisplay for the last page + if (currentPage * recordsPerPage > totalRecordCount) { + recordsToDisplay = totalRecordCount % recordsPerPage; + } + $("#tableBody").html(tableData); } catch (error) { console.log("ERROR:", error); } } - // This displays the actual NUMBER of Total records on the html async function fetchTotalRecordCount(): Promise { try { @@ -83,108 +91,68 @@ window.onload = function () { } // Displays records from 1 to 30 on the initial page - displayPageData(1, 30); + displayPageData(1, 26); fetchTotalRecordCount(); fetchAndDisplayColumns(); - // Filter to display range from a certain ID to another ID - $("#rangeForm").submit(async (event) => { - event.preventDefault(); - let fromInput = $("#fromInput"); - let toInput = $("#toInput"); - let from = parseInt((fromInput.val() as string) || "0"); - let to = parseInt((toInput.val() as string) || "0"); - - if (!isNaN(from) && !isNaN(to)) { - await fetchRecords(from, to); - } - }); - - async function fetchRecords(from: number, to: number): Promise { + $("#searchForm").submit(async function (e) { + e.preventDefault(); + let searchValue = parseInt($("#searchInput").val() as string); // Convert to number + + $("#loader").show(); + $("#searchResultsMessage").show(); + $("#tableWrapper").hide(); + try { - let response = await fetch(`${IMQS}/records?from=${from}&to=${to}`); - let data: any[] = await response.json(); - - let tableData = ""; - for (let i = 0; i < data.length; i++) { - let record = data[i]; - tableData += ""; - for (let j = 0; j < record.length; j++) { - let value = record[j]; - tableData += `${value}`; + let response = await fetch(`${IMQS}/records?from=0&to=${totalRecordCount - 1}`); + let allRecords: any[] = await response.json(); + + let searchIndexes = allRecords.reduce((indexes: number[], record: any[], index: number) => { + let idValue = parseInt(record[0]); + if (idValue === searchValue) { + indexes.push(index); } - tableData += ""; - } - $("#tableBody").html(tableData); - - // Display record range - if (data.length > 0) { - let firstRecordID = data[0][0]; - let lastRecordID = data[data.length - 1][0]; - $("#recordRange").html( - `
    Displaying from Record ${firstRecordID} to Record ${lastRecordID}
    ` + return indexes; + }, []); + + if (searchIndexes.length > 0) { + let targetPage = Math.ceil((searchIndexes[0] + 1) / recordsPerPage); + if (targetPage > Math.ceil(totalRecordCount / recordsPerPage)) { + targetPage = Math.ceil(totalRecordCount / recordsPerPage); + } + + + currentPage = targetPage; + let fromValue = (currentPage - 1) * recordsPerPage; + + await displayPageData(fromValue, recordsPerPage); + + // Reset previous row background color + $("#tableBody tr").css("background-color", ""); + + searchIndexes.forEach((searchIndex: any) => { + let rowIndex = searchIndex % recordsPerPage; + let rowElement = $("#tableBody tr").eq(rowIndex); + rowElement.css("background-color", "yellow"); + }); + + $("#searchResultsMessage").html( + `
    Showing search Results for Record number ${searchValue}
    ` ); } else { + $("#tableBody").html(""); $("#recordRange").html("No records found."); + $("#searchResultsMessage").html( + `
    No results found for ID "${searchValue}"
    ` + ); } } catch (error) { console.log("ERROR:", error); + } finally { + $("#loader").hide(); + $("#tableWrapper").show(); } - } - - $("#searchForm").submit(function (e) { - e.preventDefault(); - let searchValue = $("#searchInput").val(); - - if (typeof searchValue === "string") { - searchValue = searchValue.toUpperCase(); - } - - // Reset previous search styling and messages - $("#tableHeaderRow th").css("background-color", ""); - $("#tableBody td").css({ - "background-color": "", - color: "", - border: "", - }); - - $("#searchResultsMessage").text(""); - - // Adjust display and height of search result rows - $("#tableBody tr").each(function () { - let row = $(this); - let matchingCells = row.find("td").filter(function () { - let cellText: any = $(this).text(); - return cellText.toUpperCase().includes(searchValue); - }); - - if (matchingCells.length > 0) { - row.show(); - matchingCells.css({ - "background-color": "var(--quaternary-color)", - color: "var(--tertiary-color)", - "font-weight": "900", - border: "2px solid var(--secondary-color)", - }); - - // Set height and display property for search result rows - row.css({ - height: "auto" - - }); - } else { - // row.hide(); - console.log("ERROR:"); - } - }); - - // Display search results message - $("#searchResultsMessage").html( - `
    Results for "${searchValue}"
    ` - ); - }); + }); + }; - - - \ No newline at end of file diff --git a/index.html b/index.html index 66ae2312..9bacfac4 100644 --- a/index.html +++ b/index.html @@ -6,49 +6,43 @@ -

    IMQS Onboarding Project

    - +

    IMQS Onboarding Project

    - -
    - -
    -
    - -
    -
    - -
    - - - -
    + +
    +

    +
    - - - - - - - - - -
    -
    -
    - - + +
    + + + + + + + + + +
    +
    diff --git a/style.css b/style.css index bb2e43f1..0de2837b 100644 --- a/style.css +++ b/style.css @@ -16,14 +16,15 @@ body { --primary-color: white; --secondary-color: #292929; --tertiary-color: black; - --quaternary-color: yellow; + --results-color: yellow; + --shadow-color: #e3e3e3; } /* Colors */ /* TYPOGRAPHY */ -h3 { +h2 { text-align: center; } @@ -35,12 +36,13 @@ h4 { span { font-weight: 900; color: var(--tertiary-color); - background: var(--quaternary-color); + background: var(--results-color); border-radius: 5px; } -#recordRange, #searchResultsMessage { - margin-top: 15px; +#searchResultsMessage { + margin-top: 10px; + text-align: center; } /* TYPOGRAPHY */ @@ -67,7 +69,7 @@ button { display: flex; justify-content: center; align-items: center; - margin-bottom: 5px; + margin-bottom: 15px; gap: 5px; width: 100%; } @@ -103,6 +105,56 @@ input::placeholder { /* FORM ENDS */ +/* LOADER STARTS */ + +.loader { + /* background-color: blue; */ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 70vh; +} + +.loader-text { + font-size: 45px; + font-weight: 900; + color: var(--tertiary-color); + margin-bottom: 50px; + align-self: center; +} + +.loader-bar { + width: 30%; + height: 10px; + padding: 10px; + border-radius: 150px; + background-image: linear-gradient(to right, var(--secondary-color) , var(--shadow-color)); + /* background-color: var(--shadow-color); */ + border: 1px solid var(--tertiary-color); + animation: loader-bar-animation 2s ease-in-out infinite; +} + +@keyframes loader-bar-animation { + 0% { + /* transform: translateX(-100%) rotate(270deg); */ + transform: translateX(-100%); + } + + 50% { + /* transform: translateX(100%) rotate(-90deg); */ + transform: translateX(100%); + } + + 100% { + /* transform: translateX(-100%) rotate(270deg); */ + transform: translateX(-100%); + } +} + +/* LOADER ENDS */ + + /* TABLE STARTS */ .table-container { @@ -116,14 +168,14 @@ table { height: auto; border-collapse: collapse; table-layout: fixed; - text-align: center; - font-size: 17px; + text-align: left; + font-size: 14px; } body, thead, tbody { - background: #e3e3e3; + background: var(--shadow-color); box-shadow: inset 20px 20px 60px #c1c1c1, inset -20px -20px 60px #ffffff; } @@ -131,9 +183,7 @@ table, th { color: var(--tertiary-color); font-weight: 800; - background: #e3e3e3; - position: sticky; - top: 0; + background: var(--shadow-color); box-shadow: inset 20px 20px 60px #c1c1c1, inset -20px -20px 60px #ffffff; } @@ -208,7 +258,7 @@ td:nth-child(1) { .table-container { overflow-x: auto; - margin-top: 0; + margin-top: 30px; } } From fc0e2d9aec7a1d84fa42db00c6ad29e66d7dbff3 Mon Sep 17 00:00:00 2001 From: MeezaanD Date: Thu, 17 Aug 2023 10:54:04 +0200 Subject: [PATCH 05/43] fixed the issue where I can do the next page on the last page --- app.ts | 314 ++++++++++++++++++++++++++++++----------------------- index.html | 80 +++++++------- style.css | 3 +- 3 files changed, 220 insertions(+), 177 deletions(-) diff --git a/app.ts b/app.ts index 64a1f0cb..3914177b 100644 --- a/app.ts +++ b/app.ts @@ -1,158 +1,204 @@ window.onload = function () { - // Global variables - const IMQS: string = "http://localhost:2050"; - let totalRecordCount: number; - let currentPage: number = 1; - const recordsPerPage: number = 32; - - // Displaying the columns and creating the th dynamically as the columns - async function fetchAndDisplayColumns(): Promise { - try { - let columns: string[] = await (await fetch(`${IMQS}/columns`)).json(); - let tableHeaderRow = $("#tableHeaderRow"); - - columns.forEach((columnName: string) => { - let th = document.createElement("th"); - th.textContent = columnName; - tableHeaderRow.append(th); - }); + // displayPageData(1, 26); + updateRecordsPerPage(); + fetchTotalRecordCount(); + fetchAndDisplayColumns(); + window.addEventListener("resize", updateRecordsPerPage); +}; +// Global variables +const IMQS: string = "http://localhost:2050"; +let totalRecordCount: number; +let currentPage: number = 1; +let recordsPerPage: number = 32; - await fetchTotalRecordCount(); - await displayPageData((currentPage - 1) * recordsPerPage, recordsPerPage); - } catch (error) { - console.log("ERROR:", error); - } +// Displaying the columns and creating the th dynamically as the columns +async function fetchAndDisplayColumns(): Promise { + try { + let columns: string[] = await (await fetch(`${IMQS}/columns`)).json(); + let tableHeaderRow = $("#tableHeaderRow"); + columns.forEach((columnName: string) => { + let th = document.createElement("th"); + th.textContent = columnName; + tableHeaderRow.append(th); + }); + await fetchTotalRecordCount(); + await displayPageData((currentPage - 1) * recordsPerPage, recordsPerPage); + } catch (error) { + console.log("ERROR:", error); } +} - async function goToPage(pageNumber: number): Promise { - currentPage = pageNumber; +async function goToPage(pageNumber: number): Promise { + currentPage = pageNumber; + let fromRecord = (currentPage - 1) * recordsPerPage; + await displayPageData(fromRecord, recordsPerPage); +} + +$("#prevPageButton").on("click", async () => { + if (currentPage > 1) { + currentPage--; let fromRecord = (currentPage - 1) * recordsPerPage; await displayPageData(fromRecord, recordsPerPage); } +}); - $("#prevPageButton").on("click", async () => { - if (currentPage > 1) { - currentPage--; - let fromRecord = (currentPage - 1) * recordsPerPage; - await displayPageData(fromRecord, recordsPerPage); - } - }); - - $("#nextPageButton").on("click", async () => { - const nextPage = Math.ceil(totalRecordCount / recordsPerPage); - if (currentPage < nextPage) { - currentPage++; - let fromRecord = (currentPage - 1) * recordsPerPage; - await displayPageData(fromRecord, recordsPerPage); +$("#nextPageButton").on("click", async () => { + const nextPage = Math.ceil(totalRecordCount / recordsPerPage); + if (currentPage < nextPage) { + let fromValue; + let recordsToDisplay; + + // Check if it's the last page + if (currentPage === nextPage - 1) { + fromValue = currentPage * recordsPerPage; + recordsToDisplay = totalRecordCount - fromValue; + } else { + fromValue = currentPage * recordsPerPage; + recordsToDisplay = recordsPerPage; } - }); - - async function displayPageData( - fromRecord: number, - recordsToDisplay: number - ): Promise { - try { - let response = await fetch( - `${IMQS}/records?from=${fromRecord}&to=${fromRecord + recordsToDisplay - 1}` - ); - - let data: any[] = await response.json(); - let tableData = ""; - data.forEach((record: string[]) => { - tableData += ""; - record.forEach((value: string) => { - tableData += `${value}`; - }); - tableData += ""; + + currentPage++; + + await displayPageData(fromValue, recordsToDisplay); + } +}); + +async function displayPageData( + fromRecord: number, + recordsToDisplay: number +): Promise { + try { + let response = await fetch( + `${IMQS}/records?from=${fromRecord}&to=${ + fromRecord + recordsToDisplay - 1 + }` + ); + let data: any[] = await response.json(); + let tableData = ""; + data.forEach((record: string[]) => { + tableData += ""; + record.forEach((value: string) => { + tableData += `${value}`; }); - - // Adjust recordsToDisplay for the last page - if (currentPage * recordsPerPage > totalRecordCount) { - recordsToDisplay = totalRecordCount % recordsPerPage; - } - - $("#tableBody").html(tableData); - } catch (error) { - console.log("ERROR:", error); + tableData += ""; + }); + // Adjust recordsToDisplay for the last page + if (currentPage * recordsPerPage > totalRecordCount) { + recordsToDisplay = totalRecordCount % recordsPerPage; } + $("#tableBody").html(tableData); + } catch (error) { + console.log("ERROR:", error); } - - // This displays the actual NUMBER of Total records on the html - async function fetchTotalRecordCount(): Promise { - try { - let recordCount: number = await ( - await fetch(`${IMQS}/recordCount`) - ).json(); - totalRecordCount = recordCount; - $("#totalRecordCount").text(totalRecordCount); - } catch (error) { - console.error("Error fetching total record count:", error); - } +} + +// This displays the actual NUMBER of Total records on the html +async function fetchTotalRecordCount(): Promise { + try { + let recordCount: number = await (await fetch(`${IMQS}/recordCount`)).json(); + totalRecordCount = recordCount; + $("#totalRecordCount").text(totalRecordCount); + } catch (error) { + console.error("Error fetching total record count:", error); } +} - // Displays records from 1 to 30 on the initial page - displayPageData(1, 26); +// Function to calculate and update records per page based on screen height +async function updateRecordsPerPage() { + const screenHeight = window.innerHeight; + const estimatedRowHeight = 32; + const oldRecordsPerPage = recordsPerPage; - fetchTotalRecordCount(); - fetchAndDisplayColumns(); + // $("#loader").show(); - $("#searchForm").submit(async function (e) { - e.preventDefault(); - let searchValue = parseInt($("#searchInput").val() as string); // Convert to number - - $("#loader").show(); - $("#searchResultsMessage").show(); - $("#tableWrapper").hide(); - - try { - let response = await fetch(`${IMQS}/records?from=0&to=${totalRecordCount - 1}`); - let allRecords: any[] = await response.json(); - - let searchIndexes = allRecords.reduce((indexes: number[], record: any[], index: number) => { + recordsPerPage = Math.floor(screenHeight / estimatedRowHeight); + recordsPerPage = Math.max(recordsPerPage - 1, 1); + + // console.log(`Calculating...`); + + // Adding a delay + // await new Promise((resolve) => setTimeout(resolve, 3000)); + + if (recordsPerPage !== oldRecordsPerPage) { + // Show a loader while fetching and displaying data + // $("#loader").show(); + + console.log(`Fetching and displaying data...`); + + // Simulate a delay for fetching and displaying data + await new Promise((resolve) => setTimeout(resolve, 1000)); + + console.log(`Records per page: ${recordsPerPage}`); + + // Hide the loader after data is displayed + $("#loader").hide(); + + // Calculate the new fromRecord based on the current page + const fromRecord = (currentPage - 1) * recordsPerPage; + + // Display the new data + await displayPageData(fromRecord, recordsPerPage); + } +} + +$("#searchForm").submit(async function (e) { + e.preventDefault(); + let searchValue = parseInt($("#searchInput").val() as string); // Convert to number + $("#loader").show(); + $("#searchResultsMessage").show(); + $("#tableWrapper").hide(); + try { + let response = await fetch( + `${IMQS}/records?from=0&to=${totalRecordCount - 1}` + ); + let allRecords: any[] = await response.json(); + let searchIndexes = allRecords.reduce( + (indexes: number[], record: any[], index: number) => { let idValue = parseInt(record[0]); if (idValue === searchValue) { indexes.push(index); } return indexes; - }, []); - - if (searchIndexes.length > 0) { - let targetPage = Math.ceil((searchIndexes[0] + 1) / recordsPerPage); - if (targetPage > Math.ceil(totalRecordCount / recordsPerPage)) { - targetPage = Math.ceil(totalRecordCount / recordsPerPage); - } - - - currentPage = targetPage; - let fromValue = (currentPage - 1) * recordsPerPage; - - await displayPageData(fromValue, recordsPerPage); - - // Reset previous row background color - $("#tableBody tr").css("background-color", ""); - - searchIndexes.forEach((searchIndex: any) => { - let rowIndex = searchIndex % recordsPerPage; - let rowElement = $("#tableBody tr").eq(rowIndex); - rowElement.css("background-color", "yellow"); - }); - - $("#searchResultsMessage").html( - `
    Showing search Results for Record number ${searchValue}
    ` - ); + }, + [] + ); + if (searchIndexes.length > 0) { + let targetPage; + let fromValue; + let recordsToDisplay; + if (searchValue >= 999992) { + // Display the last 27 records + targetPage = Math.ceil(totalRecordCount / recordsPerPage); + fromValue = Math.max((targetPage - 1) * recordsPerPage, 0); + recordsToDisplay = totalRecordCount - fromValue; } else { - $("#tableBody").html(""); - $("#recordRange").html("No records found."); - $("#searchResultsMessage").html( - `
    No results found for ID "${searchValue}"
    ` - ); + targetPage = Math.ceil((searchIndexes[0] + 1) / recordsPerPage); + fromValue = (targetPage - 1) * recordsPerPage; + recordsToDisplay = recordsPerPage; } - } catch (error) { - console.log("ERROR:", error); - } finally { - $("#loader").hide(); - $("#tableWrapper").show(); + currentPage = targetPage; + await displayPageData(fromValue, recordsToDisplay); + // Reset previous row background color + $("#tableBody tr").css("background-color", ""); + searchIndexes.forEach((searchIndex: any) => { + let rowIndex = searchIndex % recordsPerPage; + let rowElement = $("#tableBody tr").eq(rowIndex); + rowElement.css("background-color", "yellow"); + }); + $("#searchResultsMessage").html( + `
    Showing search Results for Record number ${searchValue}
    ` + ); + } else { + $("#tableBody").html(""); + $("#recordRange").html("No records found."); + $("#searchResultsMessage").html( + `
    No results found for ID "${searchValue}"
    ` + ); } - }); - -}; + } catch (error) { + console.log("ERROR:", error); + } finally { + $("#loader").hide(); + $("#tableWrapper").show(); + } +}); diff --git a/index.html b/index.html index 9bacfac4..305b6a85 100644 --- a/index.html +++ b/index.html @@ -1,49 +1,47 @@ - - JS Onboard Project - - - - -

    IMQS Onboarding Project

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

    - -
    -