Updated Project #47
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| /node_modules | ||
| app.js | ||
| app.js.map | ||
| dataManager.js | ||
| dataManager.js.map |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,220 @@ | ||
| class RecordManager { | ||
| firstNumber: number; | ||
| lastNumber: number; | ||
| recordCount: number; | ||
| data: dataManager; | ||
|
|
||
| constructor() { | ||
| this.data = new dataManager(); | ||
| this.firstNumber = 0; | ||
| this.lastNumber = 0; | ||
| this.recordCount = 0; | ||
| } | ||
|
|
||
| initialize() { | ||
| let promiseArray: Promise<void>[] = []; | ||
| promiseArray.push(this.createTableHeader()); | ||
| let recordCountPromise = this.data.fetchRecordCount() | ||
| .then(count => { | ||
| this.recordCount = count - 1; | ||
| this.updateAndDisplayRecords(); | ||
| this.recordEventHandlers(); | ||
| this.handleResize(); | ||
| }) | ||
| .catch(err => { | ||
| throw new Error('Error fetching and displaying the table records, reload the page' + err); | ||
| }); | ||
| promiseArray.push(recordCountPromise); | ||
| return Promise.all(promiseArray); | ||
| } | ||
|
|
||
| /** Initializes the table head */ | ||
| createTableHeader(): Promise<void> { | ||
| return this.data.fetchColumns() | ||
| .then(columns => { | ||
| for (const col of columns) { | ||
| $(".head").append(`<th>${col}</th>`); | ||
| } | ||
| }) | ||
|
|
||
| .catch(err => { | ||
| alert('Error creating table heading' + err); | ||
| }); | ||
| } | ||
|
|
||
| /** calculates the number of rows that can fit the screen */ | ||
| getNumberOfCalculatingRows(): number { | ||
| const screenHeight = window.innerHeight; | ||
| const availableHeight = screenHeight - 110; | ||
| const rowHeight = 35; | ||
| if (availableHeight <= 0) { | ||
| return 0; | ||
| } else { | ||
| let maxRows = Math.floor(availableHeight / rowHeight); | ||
| return maxRows; | ||
| } | ||
| } | ||
|
|
||
| /** fetching records that fit the screen */ | ||
| updateAndDisplayRecords(): Promise<void> { | ||
| $('#loader').show(); | ||
| this.calculateFirstAndLastNumbers(); | ||
| this.updateArrowVisibility(); | ||
| return this.fetchAndDisplayRecords() | ||
| .then(() => { | ||
| $('#loader').hide(); | ||
| }) | ||
| .catch(err => { | ||
| alert('Error to fetch and display records, reload the page' + err); | ||
| }); | ||
| } | ||
|
|
||
FritzOnFire marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| /** Calculates the firstNumber and lastNumber */ | ||
| calculateFirstAndLastNumbers() { | ||
| let rowsPerPage = this.getNumberOfCalculatingRows(); | ||
| if (this.firstNumber < 0) { | ||
| this.firstNumber = 0; | ||
| } | ||
| this.lastNumber = this.firstNumber + (rowsPerPage - 1); | ||
| if (this.lastNumber >= this.recordCount) { | ||
| this.firstNumber = this.recordCount - (rowsPerPage - 1); | ||
| this.lastNumber = this.recordCount; | ||
| } | ||
| } | ||
|
|
||
| updateArrowVisibility() { | ||
| if (this.firstNumber === 0) { | ||
| $('.arrow-left').hide(); | ||
| } else { | ||
| $('.arrow-left').show(); | ||
| } | ||
| if (this.lastNumber >= this.recordCount) { | ||
| $('.arrow-right').hide(); | ||
| } else { | ||
| $('.arrow-right').show(); | ||
| } | ||
| } | ||
|
|
||
| fetchAndDisplayRecords(): Promise<void> { | ||
| return this.data.fetchRecords(this.firstNumber, this.lastNumber) | ||
| .then(records => { | ||
| const inputValue = <string>($('#searchInput').val()); | ||
| $("#tableBody").empty(); | ||
| for (const record of records) { | ||
| // creates row for each record | ||
| $("tbody").append(`<tr class="row"></tr>`); | ||
| const lastRow = $(".row:last"); | ||
| for (const value of record) { | ||
| // assign each record to their column in a specified row | ||
| lastRow.append(`<td>${value}</td>`); | ||
| if (value === inputValue) { | ||
| // highlights the searched row | ||
| lastRow.css('background-color', '#DDC0B4'); | ||
| } | ||
| } | ||
| $("tbody").append(lastRow); | ||
| } | ||
| $('#page').empty().append(`Showing record: ${this.firstNumber} - ${this.lastNumber}`); | ||
| $('#loader').hide(); | ||
| }) | ||
| .catch(err => { | ||
| alert('Error while displaying records, reload the page' + err); | ||
| }); | ||
| } | ||
|
|
||
FritzOnFire marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| /** recalculates the record range that includes inputValue fromm user */ | ||
| searchRecordsAndResize() { | ||
| let inputValue = <number>($('#searchInput').val()); | ||
| if (inputValue >= 0 && inputValue <= this.recordCount) { | ||
| let calculatedRows = this.getNumberOfCalculatingRows(); | ||
| // divides the calculated max rows in half | ||
| const halfRange = Math.floor(calculatedRows / 2); | ||
| this.firstNumber = Math.max(0, inputValue - halfRange); | ||
| this.lastNumber = Math.min(this.recordCount, this.firstNumber + (calculatedRows - 1)); | ||
| } else { | ||
| alert(`Input value must be between 0 and ${this.recordCount}`); | ||
| } | ||
| } | ||
|
|
||
| /** Navigates to the next set of records */ | ||
| navigateToNextPage() { | ||
| $('#searchInput').val(''); | ||
| if (0 <= this.lastNumber && this.lastNumber <= this.recordCount) { | ||
| // calculates the first number of the page | ||
| this.firstNumber = this.lastNumber + 1; | ||
| const calculatedRows = this.getNumberOfCalculatingRows(); | ||
| // calculates the last number of the page | ||
| this.lastNumber = this.firstNumber + (calculatedRows - 1); | ||
| } | ||
| return this.updateAndDisplayRecords() | ||
| .catch(err => { | ||
| alert('Error to fetch and display records, reload the page' + err); | ||
| }); | ||
| } | ||
|
|
||
| navigateToPreviousPage() { | ||
| $('#searchInput').val(''); | ||
| if (0 <= this.firstNumber && this.firstNumber <= this.recordCount) { | ||
| const calculatedRows = this.getNumberOfCalculatingRows(); | ||
| this.lastNumber = this.firstNumber - 1; | ||
| this.firstNumber = this.lastNumber - (calculatedRows - 1); | ||
| } | ||
| return this.updateAndDisplayRecords() | ||
| .catch(err => { | ||
| alert('Error to fetch and display records, reload the page' + err); | ||
| }); | ||
| } | ||
|
|
||
| /** calls to re-display records when screen is adjusted */ | ||
| handleResize() { | ||
| let resizeTimeout: number; | ||
| $(window).on('resize', () => { | ||
| clearTimeout(resizeTimeout); | ||
| resizeTimeout = setTimeout(() => { | ||
| $('#loader').show(); | ||
| if ($('#searchInput').val() !== '') { | ||
| this.searchRecordsAndResize(); | ||
| } | ||
| this.updateAndDisplayRecords() | ||
| .then(() => { | ||
| $('#loader').hide(); | ||
| }) | ||
| .catch(err => { | ||
| alert('Error occurred while resizing, reload the page' + err); | ||
| $('#loader').hide(); | ||
| }); | ||
| }, 250); | ||
| }); | ||
| } | ||
|
|
||
| recordEventHandlers() { | ||
| $('#btnSearch').on('click', (event) => { | ||
| event.preventDefault(); | ||
| this.searchRecordsAndResize(); | ||
| return this.updateAndDisplayRecords() | ||
| .catch(err => { | ||
| alert('Error to fetch and display records, reload the page' + err); | ||
| }); | ||
| }); | ||
|
|
||
| $('.arrow-right').on('click', () => { | ||
| this.navigateToNextPage(); | ||
| }); | ||
|
|
||
| $('.arrow-left').on('click', () => { | ||
| this.navigateToPreviousPage(); | ||
| }); | ||
|
|
||
| $('#searchInput').on('input', () => { | ||
| const inputValue = <string>$('#searchInput').val(); | ||
| if (inputValue !== undefined) { | ||
| let correctValue = inputValue.replace(/[^0-9]/g, ''); | ||
| $('#searchInput').val(correctValue); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| window.onload = () => { | ||
| const record = new RecordManager(); | ||
| record.initialize(); | ||
| } | ||
|
Contributor
There was a problem hiding this comment. This is a very creative way to hide the fact that you are using a global variable called This is basically as bad as turning off asynchronous requests in javascript for this project (I have only seen it once, and I am unable to find out how to do it, but I know it exists). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| class dataManager { | ||
| backend: string = "http://localhost:2050"; | ||
|
|
||
| /** fetches the number of records from backend */ | ||
| fetchRecordCount(): Promise<number> { | ||
| return fetch(`${this.backend}/recordCount`) | ||
| .then(res => { | ||
| if (!res.ok) { | ||
| throw 'Failed to fetch record count'; | ||
| } | ||
| return res.text(); | ||
| }) | ||
| .then(totalRecords => { | ||
| const value = parseInt(totalRecords, 10); | ||
| if (isNaN(value)) { | ||
| throw new Error('Invalid response format'); | ||
| } | ||
| return value; | ||
| }) | ||
| .catch(err => { | ||
| throw 'Error fetching the record count: ' + err; | ||
| }); | ||
| } | ||
|
|
||
| /** fetches columns from backend */ | ||
| fetchColumns(): Promise<string[]> { | ||
| return fetch(`${this.backend}/columns`) | ||
| .then(res => { | ||
| if (!res.ok) { | ||
| throw 'Failed to fetch columns'; | ||
| } | ||
| return res.json(); | ||
| }) | ||
| .catch(err => { | ||
| throw 'Error fetching columns' + err; | ||
| }); | ||
| } | ||
|
|
||
| /** fetches records from backend */ | ||
| fetchRecords(from: number, to: number): Promise<string[]> { | ||
| return fetch(`${this.backend}/records?from=${from}&to=${to}`) | ||
| .then(res => { | ||
| if (!res.ok) { | ||
| throw "Sorry, there's a problem with the network"; | ||
| } | ||
| return res.json(); | ||
| }) | ||
| .catch(err => { | ||
| throw 'Error fetching records from server ' + err; | ||
| }); | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,38 @@ | ||
| <!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> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <script src="dataManager.js" ></script> | ||
| <script src="app.js" ></script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="loader"> | ||
| <div class="loader-spinner"></div> | ||
| </div> | ||
| <h1 class="heading">Javascript Project</h1> | ||
| <div class="search-container"> | ||
| <form id="searchForm"> | ||
| <input type="number" id="searchInput" placeholder="Search.." name="search" autocomplete="off"> | ||
| <button id="btnSearch" class="btnSearch" type="submit" >Submit</button> | ||
| </form> | ||
| </div> | ||
| <div class="showRecords"> | ||
| <button class="arrow-right"></button> | ||
| <div id="page"></div> | ||
| <button class="arrow-left"></button> | ||
| </div> | ||
| <table id="recordsTable"> | ||
| <thead> | ||
| <tr class="head"> | ||
| </tr> | ||
| </thead> | ||
| <tbody id="tableBody"> | ||
| </tbody> | ||
| </table> | ||
| </body> | ||
|
|
||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| { | ||
| "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/ThokozaniNqwili/onboard-javascript.git" | ||
| }, | ||
| "author": "", | ||
| "license": "ISC", | ||
| "bugs": { | ||
| "url": "https://github.com/ThokozaniNqwili/onboard-javascript/issues" | ||
| }, | ||
| "homepage": "https://github.com/ThokozaniNqwili/onboard-javascript#readme", | ||
| "devDependencies": { | ||
| "typescript": "^3.8.3" | ||
| }, | ||
| "dependencies": { | ||
| "@types/jquery": "^3.5.16" | ||
| } | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Missing
;