From 3d767489702522632fbae84a20ba90104651c0af Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Tue, 12 Apr 2022 12:00:40 +0200 Subject: [PATCH 01/30] first commit --- app.ts | 662 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 26 +- package.json | 23 ++ server/main.go | 4 +- style.css | 135 ++++++++++ 5 files changed, 838 insertions(+), 12 deletions(-) create mode 100644 app.ts create mode 100644 package.json create mode 100644 style.css diff --git a/app.ts b/app.ts new file mode 100644 index 00000000..f2abb4c1 --- /dev/null +++ b/app.ts @@ -0,0 +1,662 @@ +// Column variables created in html that allows the other content to be added to the page. +let recordNav: any = document.querySelector("#record-navigation"); +let headingColumns: any = document.querySelector("#column-headings"); +let infoColumns: any = document.querySelector("#info-columns"); +// + +function createSelect() { + recordNav.innerHTML = ` + + + `; +} + +// Functions that shows the info when the page loads at first. +// Function that creates the columns that contain the headings of the information. +function columnHeading(heading: string) { + let headingColumn = `
${heading}
`; + headingColumns.innerHTML += headingColumn; +} +// Function that creates the columns and rows +// that contain the information. +function columns(info: string) { + let infoColumns: any = document.querySelector("#info-columns"); + let infoRow = ` +
+
${info[0]}
+
${info[1]}
+
${info[2]}
+
${info[3]}
+
${info[4]}
+
${info[5]}
+
${info[6]}
+
${info[7]}
+
${info[8]}
+
${info[9]}
+
${info[10]}
+
`; + infoColumns.innerHTML += infoRow; +} +// + +// Functions that shows the info when a user search for a single record. +// Function that shows only one heading depending on what is being searched. +function singleColumnHeading(heading: string) { + console.log(heading); + + let headingColumn = ` +
ID
+
${heading}
+ `; + headingColumns.innerHTML = ""; + headingColumns.innerHTML += headingColumn; +} +// Function that creates a single column and/or row +// that contain the information. +function singleColumns(info: string, contentColumn: any, heading: any) { + let contentNumber: any; + let headingArrayNumber: any; + + if (contentColumn === "a") { + contentNumber = 1; + headingArrayNumber = 1; + } else if (contentColumn === "b") { + contentNumber = 2; + headingArrayNumber = 2; + } else if (contentColumn === "c") { + contentNumber = 3; + headingArrayNumber = 3; + } else if (contentColumn === "d") { + contentNumber = 4; + headingArrayNumber = 4; + } else if (contentColumn === "e") { + contentNumber = 5; + headingArrayNumber = 5; + } else if (contentColumn === "f") { + contentNumber = 6; + headingArrayNumber = 6; + } else if (contentColumn === "g") { + contentNumber = 7; + headingArrayNumber = 7; + } else if (contentColumn === "h") { + contentNumber = 8; + headingArrayNumber = 8; + } else if (contentColumn === "i") { + contentNumber = 9; + headingArrayNumber = 9; + } else if (contentColumn === "j") { + contentNumber = 10; + headingArrayNumber = 10; + } else { + alert("Sorry the data you have entered is incorrect. Please try again."); + } + + let columnHead = heading[headingArrayNumber]; + singleColumnHeading(columnHead); + + let infoRow = ` +
+
${info[0]}
+
${info[contentNumber]}
+
`; + infoColumns.innerHTML += infoRow; +} +// + +// Fetch request that gets the headings as well as the information and then runs +// the functions that create the rows and columns as well as add the info to them. +// Fetching headings +function fetchData() { + fetch("http://localhost:2050/columns", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((response) => response.text()) + .then((data) => { + let headingDataList = JSON.parse(data); + + for (let i = 0; i < headingDataList.length; i++) { + columnHeading(headingDataList[i]); + } + + // Fetching information + fetch("http://localhost:2050/records?from=0&to=16", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + + for (let i = 0; i < columnDataList.length; i++) { + columns(columnDataList[i]); + } + }); + }); + createSelect(); +} + +fetchData(); +// + +function multipleSingularColumns( + info: string, + columnPostion: string, + idPostion: string +) { + let infoColumns: any = document.querySelector("#info-columns"); + let infoRows = ` +
+
${info[0]}
+
${info[1]}
+
${info[2]}
+
${info[3]}
+
${info[4]}
+
${info[5]}
+
${info[6]}
+
${info[7]}
+
${info[8]}
+
${info[9]}
+
${info[10]}
+
`; + + infoColumns.innerHTML += infoRows; + + if (columnPostion === "a" && info[0] === idPostion) { + let infoColumnTargeted: any = document.querySelector("#one.info-column"); + console.log(infoColumnTargeted); + infoColumnTargeted.style.color = "red"; + } else if (columnPostion === "b" && info[0] === idPostion) { + let infoColumnTargeted: any = document.querySelector("#two.info-column"); + infoColumnTargeted.style.color = "red"; + } else if (columnPostion === "c" && info[0] === idPostion) { + let infoColumnTargeted: any = document.querySelector("#three.info-column"); + infoColumnTargeted.style.color = "red"; + } else if (columnPostion === "d" && info[0] === idPostion) { + let infoColumnTargeted: any = document.querySelector("#four.info-column"); + infoColumnTargeted.style.color = "red"; + } else if (columnPostion === "e" && info[0] === idPostion) { + let infoColumnTargeted: any = document.querySelector("#five.info-column"); + infoColumnTargeted.style.color = "red"; + } else if (columnPostion === "f" && info[0] === idPostion) { + let infoColumnTargeted: any = document.querySelector("#six.info-column"); + infoColumnTargeted.style.color = "red"; + } else if (columnPostion === "g" && info[0] === idPostion) { + let infoColumnTargeted: any = document.querySelector("#seven.info-column"); + infoColumnTargeted.style.color = "red"; + } else if (columnPostion === "h" && info[0] === idPostion) { + let infoColumnTargeted: any = document.querySelector("#eight.info-column"); + infoColumnTargeted.style.color = "red"; + } else if (columnPostion === "i" && info[0] === idPostion) { + let infoColumnTargeted: any = document.querySelector("#nine.info-column"); + infoColumnTargeted.style.color = "red"; + } else if (columnPostion === "j" && info[0] === idPostion) { + let infoColumnTargeted: any = document.querySelector("#ten.info-column"); + infoColumnTargeted.style.color = "red"; + } else { + alert("Error"); + } +} +// Function that allows the user to filter between looking fo a specific record or multiple records +function recordSelection() { + // let confirmationBtn: any = document.querySelector("#select-confirmation-btn") runs the function in the html (onclick); + let selectionArea: any = document.querySelector("#record-navigation"); + let recordSelector: any = document.querySelector("#record-selection"); + let recordSelectionValue: string = recordSelector.value; + let records: any = []; + + if ( + recordSelectionValue === "single" || + recordSelectionValue === "multiple" || + recordSelectionValue === "multiple-single" + ) { + if (recordSelectionValue === "single") { + let singleRecordSelection = ` + +
+
+ + +
+
+ + +
+
+ + `; + selectionArea.innerHTML = ""; + selectionArea.innerHTML = singleRecordSelection; + let returnBtn: any = document.querySelector( + "#single-return-btn.return-btn" + ); + returnBtn.addEventListener("click", () => { + headingColumns.innerHTML = ""; + infoColumns.innerHTML = ""; + fetchData(); + createSelect(); + }); + let singleSubmitBtn: any = document.querySelector( + "#single-submit-btn.submit-btn" + ); + + singleSubmitBtn.addEventListener("click", () => { + let recordId: any = document.querySelector("#record-id"); + let recordIdValue = recordId.value; + + let recordContent: any = document.querySelector("#record-content"); + let recordContentValue = recordContent.value; + + if ( + (recordIdValue !== null && + recordContentValue === null && + recordIdValue !== "" && + recordContentValue === "") || + recordContentValue === "none" + ) { + fetch("http://localhost:2050/columns", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((response) => response.text()) + .then((data) => { + let headingDataList = JSON.parse(data); + headingColumns.innerHTML = ""; + + for (let i = 0; i < headingDataList.length; i++) { + columnHeading(headingDataList[i]); + } + // Fetching information + fetch( + "http://localhost:2050/records?from=" + + recordIdValue + + "&to=" + + recordIdValue, + { + method: "GET", + headers: { "Content-Type": "application/json" }, + } + ) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + + for (let i = 0; i < columnDataList.length; i++) { + let infoColumns: any = + document.querySelector("#info-columns"); + infoColumns.innerHTML = ""; + columns(columnDataList[i]); + } + }); + }); + } else if ( + recordIdValue !== null || + (recordContentValue !== null && recordIdValue !== "") || + recordContentValue !== "" || + recordContentValue !== "none" + ) { + // Fetching headings + let headingsList: any = []; + fetch("http://localhost:2050/columns", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((response) => response.text()) + .then((data) => { + let headingDataList = JSON.parse(data); + + for (let i = 0; i < headingDataList.length; i++) { + headingsList.push(headingDataList[i]); + } + // Fetching information + fetch( + "http://localhost:2050/records?from=" + + recordIdValue + + "&to=" + + recordIdValue, + { + method: "GET", + headers: { "Content-Type": "application/json" }, + } + ) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + + for (let i = 0; i < columnDataList.length; i++) { + let infoColumns: any = + document.querySelector("#info-columns"); + infoColumns.innerHTML = ""; + console.log(headingsList); + + singleColumns( + columnDataList[i], + recordContentValue, + headingsList + ); + } + }); + }); + } else { + alert("Sorry there has been a problem. Can you please try again."); + let confirmation = confirm("Try again?"); + if (confirmation === true) { + recordIdValue.value = ""; + recordContentValue.value = ""; + } else { + window.location.reload(); + } + } + }); + } else if (recordSelectionValue === "multiple") { + let multipleRecordSelection = ` + +
+
+ + +
+
+ + `; + selectionArea.innerHTML = ""; + selectionArea.innerHTML = multipleRecordSelection; + + let returnBtn: any = document.querySelector( + "#multiple-return-btn.return-btn" + ); + returnBtn.addEventListener("click", () => { + records = []; + headingColumns.innerHTML = ""; + infoColumns.innerHTML = ""; + fetchData(); + createSelect(); + createSelect(); + }); + let multipleSubmitBtn: any = document.querySelector( + "#multiple-submit-btn.submit-btn" + ); + multipleSubmitBtn.addEventListener("click", () => { + let fromIdSelection: any = document.querySelector( + "#from-record-id.navigation-input" + ); + let toIdSelection: any = document.querySelector( + "#to-record-id.navigation-input" + ); + + let fromIdValue = fromIdSelection.value; + let toIdValue = toIdSelection.value; + + if ( + (fromIdValue !== null && toIdValue !== null) || + (fromIdValue !== "" && toIdValue !== "") + ) { + const totalRecordsAllowed = 16; + let recordCount: number = Number(toIdValue) - Number(fromIdValue) + 1; + if ( + recordCount > totalRecordsAllowed || + typeof recordCount !== "number" + ) { + let excessRecords = recordCount - totalRecordsAllowed; + toIdValue = toIdValue - excessRecords; + alert( + "The data you entered is incorrect or you trying to access to much records only " + + totalRecordsAllowed + + " records can be accessed at a time. You have " + + excessRecords + + " excess records" + ); + // Fetching information + fetch( + "http://localhost:2050/records?from=" + + fromIdValue + + "&to=" + + toIdValue, + { + method: "GET", + headers: { "Content-Type": "application/json" }, + } + ) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + + infoColumns.innerHTML = ""; + for (let i = 0; i < columnDataList.length; i++) { + columns(columnDataList[i]); + } + }); + } else if (recordCount <= 16 || typeof recordCount === "number") { + // Fetching information + fetch( + "http://localhost:2050/records?from=" + + fromIdValue + + "&to=" + + toIdValue, + { + method: "GET", + headers: { "Content-Type": "application/json" }, + } + ) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + + infoColumns.innerHTML = ""; + for (let i = 0; i < columnDataList.length; i++) { + columns(columnDataList[i]); + } + }); + } + } else { + alert( + "Sorry there has been a problem. Please check your inputs make sure you have both filled." + ); + } + }); + } else if (recordSelectionValue === "multiple-single") { + let multipleSingleRecordSelection = ` + +
+
+ + +
+
+ + `; + selectionArea.innerHTML = ""; + selectionArea.innerHTML = multipleSingleRecordSelection; + let returnBtn: any = document.querySelector( + "#multiple-single-return-btn.return-btn" + ); + returnBtn.addEventListener("click", () => { + alert("Records you have viewed " + records); + headingColumns.innerHTML = ""; + infoColumns.innerHTML = ""; + fetchData(); + createSelect(); + createSelect(); + }); + let addMulitpleSingularRecords: any = document.querySelector( + "#add-records-btn.add-btn" + ); + + addMulitpleSingularRecords.addEventListener("click", () => { + // Inputs and selects + let IdSelection: any = document.querySelector( + "#record-id.navigation-input" + ); + + let letterValueSelection: any = + document.querySelector("#record-content"); + + //Values Needed + let IdValue = IdSelection.value; + let letterValue = letterValueSelection.value; + let numberCheck: number = 12 - Number(IdValue); + const recordAmount: number = 16; + let amountOfRecords = records.length; + console.log(amountOfRecords); + + if (amountOfRecords > recordAmount) { + alert("That is the total amount of records that can be added"); + } else if (amountOfRecords === 0) { + infoColumns.innerHTML = ""; + } else { + //pass + } + + if ( + typeof numberCheck === "number" && + typeof letterValue === "string" + ) { + let record = { + Id: IdValue, + letterId: letterValue, + }; + let arrayRecord = JSON.stringify(record); + let isInArray = records.includes(arrayRecord); + console.log(isInArray); + + if (isInArray === false) { + // Fetching information + fetch( + "http://localhost:2050/records?from=" + + IdValue + + "&to=" + + IdValue, + { + method: "GET", + headers: { "Content-Type": "application/json" }, + } + ) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + + infoColumns.innerHTML += ""; + for (let i = 0; i < columnDataList.length; i++) { + multipleSingularColumns( + columnDataList[i], + letterValue, + IdValue + ); + } + }); + records.push(arrayRecord); + console.log(records); + + for (let i = 0; i < records.length; i++) { + JSON.parse(records[i]); + console.log(records[i]); + } + } else { + alert("The record was already added"); + console.log(records); + } + } else { + alert("Enter apropriate inputs please"); + } + }); + records = records; + } else { + alert( + "Sorry there has been a problem. The page will reload can you please try again." + ); + window.location.reload(); + } + } else { + alert( + "Sorry there has been a problem. The page will reload can you please try again." + ); + window.location.reload(); + } +} +// diff --git a/index.html b/index.html index add5e736..7b16eea4 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,19 @@ - - JS Onboard Project - - - - -

Hello

- - + + JS Onboard Project + + + + +
+
+
+ + + - diff --git a/package.json b/package.json new file mode 100644 index 00000000..99313e35 --- /dev/null +++ b/package.json @@ -0,0 +1,23 @@ +{ + "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/AshtonMar/onboard-javascript.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/AshtonMar/onboard-javascript/issues" + }, + "homepage": "https://github.com/AshtonMar/onboard-javascript#readme", + "dependencies": { + "@types/jquery": "^3.5.14" + } +} diff --git a/server/main.go b/server/main.go index eba62f8c..de0930b4 100644 --- a/server/main.go +++ b/server/main.go @@ -13,11 +13,11 @@ import ( "time" ) +var columns = [11]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"} const recordCount = 1000000 -const columnCount = 11 +const columnCount = len(columns); const delayResponse = 500 * time.Millisecond -var columns = [columnCount]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"} var letters = []rune("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ") func main() { diff --git a/style.css b/style.css new file mode 100644 index 00000000..9d94a604 --- /dev/null +++ b/style.css @@ -0,0 +1,135 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; + overflow-y: hidden; + overflow-x: hidden; +} + +/*Removing Browser scrollbar*/ +::-webkit-scrollbar { + display: none; +} +/* */ + +select, +button, +input { + text-align: center; + width: 250px; + height: 50px; + font-size: 18px; + border: 2px solid black; + border-radius: 5px; + background-color: transparent; + transition: all 0.5s; + transition-timing-function: ease-in-out; +} + +select:hover, +button:hover, +input:hover { + transform: scale(1.1); + color: white; + border-color: white; + background-color: black; +} + +/* Selection tabs */ +#record-navigation { + display: flex; + align-items: center; + justify-content: space-evenly; + flex-direction: row; + padding: 10px; + height: 10vh; +} + +#user-input-data { + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; + height: 100%; +} + +.navigation-input-area { + display: flex; + align-items: center; + flex-direction: row; + padding: 10px; +} + +#from-id, +#to-id, +.navigation-input-area-id { + display: flex; + align-items: center; + flex-direction: row; + margin-left: 20px; + height: 100%; +} + +.record-labels { + padding: 5px 10px 0px 0px; +} + +.navigation-input { + padding: 5px; +} +/* */ + +/*Styling for the column headings*/ +#column-headings { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; + height: 10vh; + width: 100%; + border-block: 2px solid black; + font-size: 30px; +} + +.column-heading { + display: flex; + justify-content: center; + align-items: center; + border-left: 1px solid black; + border-right: 1px solid black; + width: 100%; + height: 100%; +} +/* */ + +/*Styling for the columns*/ +#info-columns { + display: flex; + flex-wrap: wrap; + width: 100%; + height: calc(100vh -15vh); +} + +.info-row { + display: flex; + justify-content: center; + align-items: center; + height: 5vh; + width: 100%; + border-bottom: 2px solid black; + font-size: 20px; + transition: all 0.5s; + transition-timing-function: ease-in-out; +} + +.info-column { + display: flex; + justify-content: center; + align-items: center; + border-left: 1px solid black; + border-right: 1px solid black; + width: 100%; + height: 100%; +} +/* */ From fc17d7670f11bd049d808e58efe03f5989915d18 Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Tue, 12 Apr 2022 14:08:15 +0200 Subject: [PATCH 02/30] multiple-singular-select-functionality --- app.ts | 200 ++++++++++++++++++++++++++++++++------------------------- 1 file changed, 114 insertions(+), 86 deletions(-) diff --git a/app.ts b/app.ts index f2abb4c1..9d12d828 100644 --- a/app.ts +++ b/app.ts @@ -4,6 +4,43 @@ let headingColumns: any = document.querySelector("#column-headings"); let infoColumns: any = document.querySelector("#info-columns"); // +// Fetch request that gets the headings as well as the information and then runs +// the functions that create the rows and columns as well as add the info to them. +function fetchData() { + // Fetches the heading data + fetch("http://localhost:2050/columns", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((response) => response.text()) + .then((data) => { + let headingDataList = JSON.parse(data); + + for (let i = 0; i < headingDataList.length; i++) { + columnHeading(headingDataList[i]); + } + + // Fetching information + fetch("http://localhost:2050/records?from=0&to=16", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + + for (let i = 0; i < columnDataList.length; i++) { + columns(columnDataList[i]); + } + }); + }); + createSelect(); +} +fetchData(); +// + +// Functions that shows the info when the page loads at first. +// Function that creates the select that appears on the page as itloads. function createSelect() { recordNav.innerHTML = ` + + + + + + `; +} + +function createGrid(headingList: any, rowList: string) { + let amountOfHeadingColumns: number = headingList.length; + let amountOfDataColumns: number = rowList.length; + // console.log(rowList[0], amountOfDataColumns); + + for (let i = 0; i < amountOfHeadingColumns; i++) { + let headingColumn: any = `

${headingList[i]}

`; + headingColumns.innerHTML += headingColumn; + } + + for (let i = 0, x = 0; i < 15 && x < amountOfDataColumns; i++ && x++) { + console.log(rowList[i]); + console.log(rowList[i][x]); + let id = rowList[i]; + + console.log(rowList); + + // let infoRow: any = ` + //
+ // ${rowList[i][x]} + //
`; + // infoColumns.innerHTML += infoRow; + break; + } +} -// Fetch request that gets the headings as well as the information and then runs -// the functions that create the rows and columns as well as add the info to them. function fetchData() { - // Fetches the heading data + // Gets headings array fetch("http://localhost:2050/columns", { method: "GET", headers: { "Content-Type": "application/json" }, @@ -16,10 +62,6 @@ function fetchData() { .then((data) => { let headingDataList = JSON.parse(data); - for (let i = 0; i < headingDataList.length; i++) { - columnHeading(headingDataList[i]); - } - // Fetching information fetch("http://localhost:2050/records?from=0&to=16", { method: "GET", @@ -28,693 +70,454 @@ function fetchData() { .then((response) => response.text()) .then((data) => { let columnDataList = JSON.parse(data); - - for (let i = 0; i < columnDataList.length; i++) { - columns(columnDataList[i]); - } + createGrid(headingDataList, columnDataList); }); }); - createSelect(); + createNavigation(); } + fetchData(); -// -// Functions that shows the info when the page loads at first. -// Function that creates the select that appears on the page as itloads. -function createSelect() { - recordNav.innerHTML = ` - - - `; -} -// Function that creates the columns that contain the headings of the information. -function columnHeading(heading: string) { - let headingColumn = `
${heading}
`; - headingColumns.innerHTML += headingColumn; -} -// Function that creates the columns and rows that contain the information. -function columns(info: string) { - let infoColumns: any = document.querySelector("#info-columns"); - let infoRow = ` -
-
${info[0]}
-
${info[1]}
-
${info[2]}
-
${info[3]}
-
${info[4]}
-
${info[5]}
-
${info[6]}
-
${info[7]}
-
${info[8]}
-
${info[9]}
-
${info[10]}
-
`; - infoColumns.innerHTML += infoRow; -} -// +function nextPrevious(firstId: any, finalId: any) { + let nextBtn: any = document.querySelector(".next-records-btn"); + let previousBtn: any = document.querySelector(".previous-records-btn"); + let currentPage: any = document.querySelector(".current-page"); -// Functions that shows the info when a user search for a single record. -// Function that shows only one heading depending on what is being searched. -function singleColumnHeading(heading: string) { - let headingColumn = ` -
ID
-
${heading}
- `; - headingColumns.innerHTML = ""; - headingColumns.innerHTML += headingColumn; -} -// Function that creates a single column and/or row -// that contain the information. -function singleColumns(info: string, contentColumn: any, heading: any) { - let contentNumber: any; - let headingArrayNumber: any; - - if (contentColumn === "a") { - contentNumber = 1; - headingArrayNumber = 1; - } else if (contentColumn === "b") { - contentNumber = 2; - headingArrayNumber = 2; - } else if (contentColumn === "c") { - contentNumber = 3; - headingArrayNumber = 3; - } else if (contentColumn === "d") { - contentNumber = 4; - headingArrayNumber = 4; - } else if (contentColumn === "e") { - contentNumber = 5; - headingArrayNumber = 5; - } else if (contentColumn === "f") { - contentNumber = 6; - headingArrayNumber = 6; - } else if (contentColumn === "g") { - contentNumber = 7; - headingArrayNumber = 7; - } else if (contentColumn === "h") { - contentNumber = 8; - headingArrayNumber = 8; - } else if (contentColumn === "i") { - contentNumber = 9; - headingArrayNumber = 9; - } else if (contentColumn === "j") { - contentNumber = 10; - headingArrayNumber = 10; + let numberOne: number = firstId; + let numberTwo: number = finalId; + + currentPage.innerHTML = numberOne + " -> " + numberTwo; + + if (numberOne === 0 && numberTwo === 15) { + previousBtn.style.display = "none"; } else { - alert("Sorry the data you have entered is incorrect. Please try again."); + //pass } - let columnHead = heading[headingArrayNumber]; - singleColumnHeading(columnHead); + nextBtn.addEventListener("click", () => { + console.log("next"); + const amountRecords: number = 16; + let nextNumberOne: number = numberOne + amountRecords; + let nextNumberTwo: number = numberTwo + amountRecords; + + if (nextNumberOne === 32 && nextNumberTwo === 47) { + nextBtn.style.display = "none"; + currentPage.innerHTML = ""; + currentPage.innerHTML = + nextNumberOne + " -> " + nextNumberTwo + " Final Page"; + numberOne = nextNumberOne; + numberTwo = nextNumberTwo; + } else { + currentPage.innerHTML = ""; + currentPage.innerHTML = nextNumberOne + " -> " + nextNumberTwo; + numberOne = nextNumberOne; + numberTwo = nextNumberTwo; + } + }); - let infoRow = ` -
-
${info[0]}
-
${info[contentNumber]}
-
`; - infoColumns.innerHTML += infoRow; -} -// + previousBtn.addEventListener("click", () => { + console.log("previous"); -// Function that creates the rows and highlights the data you are searching -// for in the multiple single records. -function multipleSingularColumns( - info: string, - columnPostion: string, - idOfData: string -) { - let infoColumns: any = document.querySelector("#info-columns"); - let infoRows = ` -
-
${info[0]}
-
${info[1]}
-
${info[2]}
-
${info[3]}
-
${info[4]}
-
${info[5]}
-
${info[6]}
-
${info[7]}
-
${info[8]}
-
${info[9]}
-
${info[10]}
-
`; - - if (columnPostion === "a") { - infoColumns.innerHTML += infoRows; - let infoColumnTargeted: any = document.querySelector( - "#one.certain-column" + idOfData - ); - infoColumnTargeted.style.color = "red"; - } else if (columnPostion === "b") { - infoColumns.innerHTML += infoRows; - let infoColumnTargeted: any = document.querySelector( - "#two.certain-column" + idOfData - ); - infoColumnTargeted.style.color = "red"; - } else if (columnPostion === "c") { - infoColumns.innerHTML += infoRows; - let infoColumnTargeted: any = document.querySelector( - "#three.certain-column" + idOfData - ); - infoColumnTargeted.style.color = "red"; - } else if (columnPostion === "d") { - infoColumns.innerHTML += infoRows; - let infoColumnTargeted: any = document.querySelector( - "#four.certain-column" + idOfData - ); - infoColumnTargeted.style.color = "red"; - } else if (columnPostion === "e") { - infoColumns.innerHTML += infoRows; - let infoColumnTargeted: any = document.querySelector( - "#five.certain-column" + idOfData - ); - infoColumnTargeted.style.color = "red"; - } else if (columnPostion === "f") { - infoColumns.innerHTML += infoRows; - let infoColumnTargeted: any = document.querySelector( - "#six.certain-column" + idOfData - ); - infoColumnTargeted.style.color = "red"; - } else if (columnPostion === "g") { - infoColumns.innerHTML += infoRows; - let infoColumnTargeted: any = document.querySelector( - "#seven.certain-column" + idOfData - ); - infoColumnTargeted.style.color = "red"; - } else if (columnPostion === "h") { - infoColumns.innerHTML += infoRows; - let infoColumnTargeted: any = document.querySelector( - "#eight.certain-column" + idOfData - ); - infoColumnTargeted.style.color = "red"; - } else if (columnPostion === "i") { - infoColumns.innerHTML += infoRows; - let infoColumnTargeted: any = document.querySelector( - "#nine.certain-column" + idOfData - ); - infoColumnTargeted.style.color = "red"; - } else if (columnPostion === "j") { - infoColumns.innerHTML += infoRows; - let infoColumnTargeted: any = document.querySelector( - "#ten.certain-column" + idOfData - ); - infoColumnTargeted.style.color = "red"; - } else { - alert("Error"); - } -} -// + const amountRecords: number = 15; + let nextNumberOne: number = numberOne - amountRecords; + let nextNumberTwo: number = numberTwo - amountRecords; -// Function that allows the user to filter between looking fo a singular record, multiple records or multiple singular records. -function recordSelection() { - // let confirmationBtn: any = document.querySelector("#select-confirmation-btn") runs the function in the html (onclick); - // Accesses the area on the page where the select is shown. - let selectionArea: any = recordNav; - // Checks how you want filter records. - let recordSelector: any = document.querySelector("#record-selection"); - let recordSelectionValue: string = recordSelector.value; - // - let records: any = []; - - // Checks if the select gives a proper value. - if ( - recordSelectionValue === "single" || - recordSelectionValue === "multiple" || - recordSelectionValue === "multiple-single" - ) { - if (recordSelectionValue === "single") { - // Creates a div that includes all the inputs, selects and buttons needed to filter. - let singleRecordSelection = ` - -
-
- - -
-
- - -
-
- - `; - selectionArea.innerHTML = ""; - selectionArea.innerHTML = singleRecordSelection; - - let returnBtn: any = document.querySelector( - "#single-return-btn.return-btn" - ); - returnBtn.addEventListener("click", () => { - headingColumns.innerHTML = ""; - infoColumns.innerHTML = ""; - fetchData(); - createSelect(); - }); - - let singleSubmitBtn: any = document.querySelector( - "#single-submit-btn.submit-btn" - ); - singleSubmitBtn.addEventListener("click", () => { - let recordId: any = document.querySelector("#record-id"); - let recordIdValue = recordId.value; - console.log(recordIdValue.length); - - let recordContent: any = document.querySelector("#record-content"); - let recordContentValue = recordContent.value; - - if (recordIdValue.length === 0) { - alert( - "You left one of the record id inputs empty or you have entered an incorrect character." - ); - } else { - if ( - (recordIdValue !== null && - recordContentValue === null && - recordIdValue !== "" && - recordContentValue === "") || - recordContentValue === "none" - ) { - fetch("http://localhost:2050/columns", { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((response) => response.text()) - .then((data) => { - let headingDataList = JSON.parse(data); - headingColumns.innerHTML = ""; - - for (let i = 0; i < headingDataList.length; i++) { - columnHeading(headingDataList[i]); - } - // Fetching information - fetch( - "http://localhost:2050/records?from=" + - recordIdValue + - "&to=" + - recordIdValue, - { - method: "GET", - headers: { "Content-Type": "application/json" }, - } - ) - .then((response) => response.text()) - .then((data) => { - let columnDataList = JSON.parse(data); - - for (let i = 0; i < columnDataList.length; i++) { - let infoColumns: any = - document.querySelector("#info-columns"); - infoColumns.innerHTML = ""; - columns(columnDataList[i]); - } - }); - }); - } else if ( - recordIdValue !== null || - (recordContentValue !== null && recordIdValue !== "") || - recordContentValue !== "" || - recordContentValue !== "none" - ) { - // Fetching headings - let headingsList: any = []; - fetch("http://localhost:2050/columns", { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((response) => response.text()) - .then((data) => { - let headingDataList = JSON.parse(data); - - for (let i = 0; i < headingDataList.length; i++) { - headingsList.push(headingDataList[i]); - } - // Fetching information - fetch( - "http://localhost:2050/records?from=" + - recordIdValue + - "&to=" + - recordIdValue, - { - method: "GET", - headers: { "Content-Type": "application/json" }, - } - ) - .then((response) => response.text()) - .then((data) => { - let columnDataList = JSON.parse(data); - - for (let i = 0; i < columnDataList.length; i++) { - let infoColumns: any = - document.querySelector("#info-columns"); - - infoColumns.innerHTML = ""; - - singleColumns( - columnDataList[i], - recordContentValue, - headingsList - ); - } - }); - }); - } else if ( - recordIdValue === "0" || - (recordIdValue === null && recordContentValue === "") || - recordContentValue === "none" - ) { - alert("hello"); - } else { - alert("Sorry there has been a problem. Can you please try again."); - let confirmation = confirm("Try again?"); - if (confirmation === true) { - recordIdValue.value = "0"; - recordContentValue.value = ""; - } else { - window.location.reload(); - } - } - } - }); - } else if (recordSelectionValue === "multiple") { - let multipleRecordSelection = ` - -
-
- - -
-
- - `; - selectionArea.innerHTML = ""; - selectionArea.innerHTML = multipleRecordSelection; - - let returnBtn: any = document.querySelector( - "#multiple-return-btn.return-btn" - ); - returnBtn.addEventListener("click", () => { - records = []; - headingColumns.innerHTML = ""; - infoColumns.innerHTML = ""; - fetchData(); - createSelect(); - createSelect(); - }); - let multipleSubmitBtn: any = document.querySelector( - "#multiple-submit-btn.submit-btn" - ); - multipleSubmitBtn.addEventListener("click", () => { - let fromIdSelection: any = document.querySelector( - "#from-record-id.navigation-input" - ); - let toIdSelection: any = document.querySelector( - "#to-record-id.navigation-input" - ); - - let fromIdValue = fromIdSelection.value; - let toIdValue = toIdSelection.value; - - if (fromIdValue.length === 0 || toIdValue === 0) { - alert( - "You left one of the record id inputs empty or you have entered an incorrect character." - ); - } else { - if ( - (fromIdValue !== null && toIdValue !== null) || - (fromIdValue !== "" && toIdValue !== "") - ) { - const totalRecordsAllowed = 16; - let recordCount: number = - Number(toIdValue) - Number(fromIdValue) + 1; - if ( - recordCount > totalRecordsAllowed || - typeof recordCount !== "number" - ) { - let excessRecords = recordCount - totalRecordsAllowed; - toIdValue = toIdValue - excessRecords; - alert( - "The data you entered is incorrect or you trying to access to much records only " + - totalRecordsAllowed + - " records can be accessed at a time. You have " + - excessRecords + - " excess records" - ); - // Fetching information - fetch( - "http://localhost:2050/records?from=" + - fromIdValue + - "&to=" + - toIdValue, - { - method: "GET", - headers: { "Content-Type": "application/json" }, - } - ) - .then((response) => response.text()) - .then((data) => { - let columnDataList = JSON.parse(data); - - infoColumns.innerHTML = ""; - for (let i = 0; i < columnDataList.length; i++) { - columns(columnDataList[i]); - } - }); - } else if (recordCount <= 16 || typeof recordCount === "number") { - // Fetching information - fetch( - "http://localhost:2050/records?from=" + - fromIdValue + - "&to=" + - toIdValue, - { - method: "GET", - headers: { "Content-Type": "application/json" }, - } - ) - .then((response) => response.text()) - .then((data) => { - let columnDataList = JSON.parse(data); - - infoColumns.innerHTML = ""; - for (let i = 0; i < columnDataList.length; i++) { - columns(columnDataList[i]); - } - }); - } - } else { - alert( - "Sorry there has been a problem. Please check your inputs make sure you have both filled." - ); - } - } - }); - } else if (recordSelectionValue === "multiple-single") { - let multipleSingleRecordSelection = ` - -
-
- - -
-
- - `; - selectionArea.innerHTML = ""; - selectionArea.innerHTML = multipleSingleRecordSelection; - let returnBtn: any = document.querySelector( - "#multiple-single-return-btn.return-btn" - ); - returnBtn.addEventListener("click", () => { - alert("Records you have viewed " + records); - headingColumns.innerHTML = ""; - infoColumns.innerHTML = ""; - fetchData(); - createSelect(); - createSelect(); - }); - let addMulitpleSingularRecords: any = document.querySelector( - "#add-records-btn.add-btn" - ); - - addMulitpleSingularRecords.addEventListener("click", () => { - // Inputs and selects - let IdSelection: any = document.querySelector( - "#record-id.navigation-input" - ); - - let letterValueSelection: any = - document.querySelector("#record-content"); - - //Values Needed - let IdValue = IdSelection.value; - let letterValue = letterValueSelection.value; - let numberCheck: number = 12 - Number(IdValue); - const recordAmount: number = 16; - let amountOfRecords = records.length; - - if (amountOfRecords > recordAmount) { - alert("That is the total amount of records that can be added"); - } else if (amountOfRecords === 0) { - infoColumns.innerHTML = ""; - } else { - //pass - } - - if (IdValue.length === 0 || letterValue === "none") { - alert( - "You left one of the record id inputs empty or you have entered an incorrect character." - ); - } else { - if ( - typeof numberCheck === "number" && - typeof letterValue === "string" - ) { - let record = { - Id: IdValue, - letterId: letterValue, - }; - let arrayRecord = JSON.stringify(record); - let isInArray = records.includes(arrayRecord); - - if (isInArray === false) { - // Fetching information - fetch( - "http://localhost:2050/records?from=" + - IdValue + - "&to=" + - IdValue, - { - method: "GET", - headers: { "Content-Type": "application/json" }, - } - ) - .then((response) => response.text()) - .then((data) => { - let columnDataList = JSON.parse(data); - - infoColumns.innerHTML += ""; - for (let i = 0; i < columnDataList.length; i++) { - multipleSingularColumns( - columnDataList[i], - letterValue, - IdValue - ); - } - }); - records.push(arrayRecord); - - for (let i = 0; i < records.length; i++) { - JSON.parse(records[i]); - } - } else { - alert("The record was already added"); - } - } else { - alert("Enter apropriate inputs please"); - } - } - }); - records = records; + if (numberOne === 0 && numberTwo === 15) { + previousBtn.style.display = "none"; + currentPage.innerHTML = ""; + currentPage.innerHTML = nextNumberOne + " -> " + nextNumberTwo; + numberOne = nextNumberOne; + numberTwo = nextNumberTwo; } else { - alert( - "Sorry there has been a problem. The page will reload can you please try again." - ); - window.location.reload(); + currentPage.innerHTML = ""; + currentPage.innerHTML = nextNumberOne + " -> " + nextNumberTwo; + numberOne = nextNumberOne; + numberTwo = nextNumberTwo; } - } else { - alert( - "Sorry there has been a problem. The page will reload can you please try again." - ); - window.location.reload(); - } + }); } +nextPrevious(0, 15); + // + +// function multipleSingularColumns( +// info: string, +// columnPostion: string, +// idOfData: string +// ) { +// let infoColumns: any = document.querySelector("#info-columns"); +// let infoRows = ` +//
+//
${info[0]}
+//
${info[1]}
+//
${info[2]}
+//
${info[3]}
+//
${info[4]}
+//
${info[5]}
+//
${info[6]}
+//
${info[7]}
+//
${info[8]}
+//
${info[9]}
+//
${info[10]}
+//
`; + +// if (columnPostion === "a") { +// infoColumns.innerHTML += infoRows; +// let infoColumnTargeted: any = document.querySelector( +// "#one.certain-column" + idOfData +// ); +// infoColumnTargeted.style.color = "red"; +// } else if (columnPostion === "b") { +// infoColumns.innerHTML += infoRows; +// let infoColumnTargeted: any = document.querySelector( +// "#two.certain-column" + idOfData +// ); +// infoColumnTargeted.style.color = "red"; +// } else if (columnPostion === "c") { +// infoColumns.innerHTML += infoRows; +// let infoColumnTargeted: any = document.querySelector( +// "#three.certain-column" + idOfData +// ); +// infoColumnTargeted.style.color = "red"; +// } else if (columnPostion === "d") { +// infoColumns.innerHTML += infoRows; +// let infoColumnTargeted: any = document.querySelector( +// "#four.certain-column" + idOfData +// ); +// infoColumnTargeted.style.color = "red"; +// } else if (columnPostion === "e") { +// infoColumns.innerHTML += infoRows; +// let infoColumnTargeted: any = document.querySelector( +// "#five.certain-column" + idOfData +// ); +// infoColumnTargeted.style.color = "red"; +// } else if (columnPostion === "f") { +// infoColumns.innerHTML += infoRows; +// let infoColumnTargeted: any = document.querySelector( +// "#six.certain-column" + idOfData +// ); +// infoColumnTargeted.style.color = "red"; +// } else if (columnPostion === "g") { +// infoColumns.innerHTML += infoRows; +// let infoColumnTargeted: any = document.querySelector( +// "#seven.certain-column" + idOfData +// ); +// infoColumnTargeted.style.color = "red"; +// } else if (columnPostion === "h") { +// infoColumns.innerHTML += infoRows; +// let infoColumnTargeted: any = document.querySelector( +// "#eight.certain-column" + idOfData +// ); +// infoColumnTargeted.style.color = "red"; +// } else if (columnPostion === "i") { +// infoColumns.innerHTML += infoRows; +// let infoColumnTargeted: any = document.querySelector( +// "#nine.certain-column" + idOfData +// ); +// infoColumnTargeted.style.color = "red"; +// } else if (columnPostion === "j") { +// infoColumns.innerHTML += infoRows; +// let infoColumnTargeted: any = document.querySelector( +// "#ten.certain-column" + idOfData +// ); +// infoColumnTargeted.style.color = "red"; +// } else { +// alert("Error"); +// } +// } + +// Function that allows the user to filter between looking fo a singular record, multiple records or multiple singular records. + +// function recordSelection() { +// // let confirmationBtn: any = document.querySelector("#select-confirmation-btn") runs the function in the html (onclick); +// // Accesses the area on the page where the select is shown. +// let selectionArea: any = recordNav; +// // Checks how you want filter records. +// let recordSelector: any = document.querySelector("#record-selection"); +// let recordSelectionValue: string = recordSelector.value; +// // +// let records: any = []; + +// // Checks if the select gives a proper value. +// if ( +// recordSelectionValue === "multiple" || +// recordSelectionValue === "multiple-single" +// ) { +// if (recordSelectionValue === "multiple") { +// let multipleRecordSelection = ` +// +//
+//
+// +// +//
+//
+// +// `; +// selectionArea.innerHTML = ""; +// selectionArea.innerHTML = multipleRecordSelection; + +// let returnBtn: any = document.querySelector( +// "#multiple-return-btn.return-btn" +// ); + +// returnBtn.addEventListener("click", () => { +// records = []; +// headingColumns.innerHTML = ""; +// infoColumns.innerHTML = ""; +// fetchData(); +// createNavigation(); +// }); + +// let multipleSubmitBtn: any = document.querySelector( +// "#multiple-submit-btn.submit-btn" +// ); +// multipleSubmitBtn.addEventListener("click", () => { +// let fromIdSelection: any = document.querySelector( +// "#from-record-id.navigation-input" +// ); +// let toIdSelection: any = document.querySelector( +// "#to-record-id.navigation-input" +// ); + +// let fromIdValue = fromIdSelection.value; +// let toIdValue = toIdSelection.value; + +// if (fromIdValue.length === 0 || toIdValue === 0) { +// alert( +// "You left one of the record id inputs empty or you have entered an incorrect character." +// ); +// } else { +// if ( +// (fromIdValue !== null && toIdValue !== null) || +// (fromIdValue !== "" && toIdValue !== "") +// ) { +// const totalRecordsAllowed = 16; +// let recordCount: number = +// Number(toIdValue) - Number(fromIdValue) + 1; +// if ( +// recordCount > totalRecordsAllowed || +// typeof recordCount !== "number" +// ) { +// let excessRecords = recordCount - totalRecordsAllowed; +// toIdValue = toIdValue - excessRecords; +// alert( +// "The data you entered is incorrect or you trying to access to much records only " + +// totalRecordsAllowed + +// " records can be accessed at a time. You have " + +// excessRecords + +// " excess records" +// ); +// // Fetching information +// fetch( +// "http://localhost:2050/records?from=" + +// fromIdValue + +// "&to=" + +// toIdValue, +// { +// method: "GET", +// headers: { "Content-Type": "application/json" }, +// } +// ) +// .then((response) => response.text()) +// .then((data) => { +// let columnDataList = JSON.parse(data); + +// infoColumns.innerHTML = ""; +// }); +// } else if (recordCount <= 16 || typeof recordCount === "number") { +// // Fetching information +// fetch( +// "http://localhost:2050/records?from=" + +// fromIdValue + +// "&to=" + +// toIdValue, +// { +// method: "GET", +// headers: { "Content-Type": "application/json" }, +// } +// ) +// .then((response) => response.text()) +// .then((data) => { +// let columnDataList = JSON.parse(data); + +// infoColumns.innerHTML = ""; +// for (let i = 0; i < columnDataList.length; i++) { + +// } +// }); +// } +// } else { +// alert( +// "Sorry there has been a problem. Please check your inputs make sure you have both filled." +// ); +// } +// } +// }); +// } else if (recordSelectionValue === "multiple-single") { +// let multipleSingleRecordSelection = ` +// +//
+//
+// +// +//
+//
+// +// `; +// selectionArea.innerHTML = ""; +// selectionArea.innerHTML = multipleSingleRecordSelection; +// let returnBtn: any = document.querySelector( +// "#multiple-single-return-btn.return-btn" +// ); +// returnBtn.addEventListener("click", () => { +// alert("Records you have viewed " + records); +// headingColumns.innerHTML = ""; +// infoColumns.innerHTML = ""; +// fetchData(); +// createNavigation(); +// }); +// let addMulitpleSingularRecords: any = document.querySelector( +// "#add-records-btn.add-btn" +// ); + +// addMulitpleSingularRecords.addEventListener("click", () => { +// // Inputs and selects +// let IdSelection: any = document.querySelector( +// "#record-id.navigation-input" +// ); + +// let letterValueSelection: any = +// document.querySelector("#record-content"); + +// //Values Needed +// let IdValue = IdSelection.value; +// let letterValue = letterValueSelection.value; +// let numberCheck: number = 12 - Number(IdValue); +// const recordAmount: number = 16; +// let amountOfRecords = records.length; + +// if (amountOfRecords > recordAmount) { +// alert("That is the total amount of records that can be added"); +// } else if (amountOfRecords === 0) { +// infoColumns.innerHTML = ""; +// } else { +// //pass +// } + +// if (IdValue.length === 0 || letterValue === "none") { +// alert( +// "You left one of the record id inputs empty or you have entered an incorrect character." +// ); +// } else { +// if ( +// typeof numberCheck === "number" && +// typeof letterValue === "string" +// ) { +// let record = { +// Id: IdValue, +// letterId: letterValue, +// }; +// let arrayRecord = JSON.stringify(record); +// let isInArray = records.includes(arrayRecord); + +// if (isInArray === false) { +// // Fetching information +// fetch( +// "http://localhost:2050/records?from=" + +// IdValue + +// "&to=" + +// IdValue, +// { +// method: "GET", +// headers: { "Content-Type": "application/json" }, +// } +// ) +// .then((response) => response.text()) +// .then((data) => { +// let columnDataList = JSON.parse(data); + +// infoColumns.innerHTML += ""; +// console.log(columnDataList); +// }); +// records.push(arrayRecord); + +// for (let i = 0; i < records.length; i++) { +// JSON.parse(records[i]); +// } +// } else { +// alert("The record was already added"); +// } +// } else { +// alert("Enter apropriate inputs please"); +// } +// } +// }); +// records = records; +// } else { +// alert( +// "Sorry there has been a problem. The page will reload can you please try again." +// ); +// window.location.reload(); +// } +// } else { +// alert("Error"); +// } +// } diff --git a/index.html b/index.html index 7b16eea4..e79d8cd2 100644 --- a/index.html +++ b/index.html @@ -10,10 +10,9 @@ -
-
-
+
+
+
- diff --git a/server/main.go b/server/main.go index de0930b4..f4ce292a 100644 --- a/server/main.go +++ b/server/main.go @@ -13,7 +13,7 @@ import ( "time" ) -var columns = [11]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"} +var columns = [13]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"} const recordCount = 1000000 const columnCount = len(columns); const delayResponse = 500 * time.Millisecond diff --git a/style.css b/style.css index 9d94a604..cdcb3d72 100644 --- a/style.css +++ b/style.css @@ -13,123 +13,111 @@ } /* */ -select, -button, -input { - text-align: center; - width: 250px; - height: 50px; - font-size: 18px; - border: 2px solid black; - border-radius: 5px; - background-color: transparent; - transition: all 0.5s; - transition-timing-function: ease-in-out; +/* Body */ +body { + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; } -select:hover, -button:hover, -input:hover { - transform: scale(1.1); - color: white; - border-color: white; - background-color: black; +/* Buttons, selects and inputs */ +button, +select, +input { + width: 200px; + padding: 10px; } -/* Selection tabs */ -#record-navigation { +/* HTML containers */ +/* Navigation */ +#record-navigation-container { display: flex; align-items: center; - justify-content: space-evenly; + justify-content: space-between; flex-direction: row; - padding: 10px; - height: 10vh; + height: 15vh; + max-width: 100%; + min-width: 50%; + width: 100%; + padding: 20px; + border-bottom: 1px solid black; } -#user-input-data { +.next-previous-navigation { display: flex; align-items: center; justify-content: space-between; flex-direction: row; - height: 100%; + width: 40%; } -.navigation-input-area { +.next-previous-navigation-btns { display: flex; - align-items: center; flex-direction: row; - padding: 10px; + justify-content: space-around; + width: 100%; } -#from-id, -#to-id, -.navigation-input-area-id { +.current-page-container { display: flex; + justify-content: center; align-items: center; - flex-direction: row; - margin-left: 20px; height: 100%; + width: 20%; + border-left: 1px solid black; + border-right: 1px solid black; } -.record-labels { - padding: 5px 10px 0px 0px; +.current-page { + text-align: center; } -.navigation-input { - padding: 5px; +.select-confirm { + display: flex; + align-items: center; + justify-content: space-around; + flex-direction: row; + width: 40%; } /* */ - -/*Styling for the column headings*/ -#column-headings { +/* Headings */ +#column-headings-container { display: flex; - justify-content: space-between; - align-items: center; flex-direction: row; height: 10vh; width: 100%; - border-block: 2px solid black; - font-size: 30px; + border-bottom: 1px solid black; } .column-heading { - display: flex; - justify-content: center; - align-items: center; - border-left: 1px solid black; + padding: 20px; + text-align: center; border-right: 1px solid black; - width: 100%; height: 100%; + width: 100%; } /* */ -/*Styling for the columns*/ -#info-columns { +/* Data */ +#info-columns-container { display: flex; - flex-wrap: wrap; + justify-content: space-between; + flex-direction: column; + height: 75vh; width: 100%; - height: calc(100vh -15vh); } .info-row { display: flex; - justify-content: center; - align-items: center; - height: 5vh; + flex-direction: row; + justify-content: space-between; width: 100%; - border-bottom: 2px solid black; - font-size: 20px; - transition: all 0.5s; - transition-timing-function: ease-in-out; + height: 100%; + border-bottom: 1px solid black; } -.info-column { - display: flex; - justify-content: center; - align-items: center; - border-left: 1px solid black; - border-right: 1px solid black; +.info-data { width: 100%; - height: 100%; + border-right: 1px solid black; } -/* */ From 78d364611711cb26bccb46ff0208e8c5c866d5a2 Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Thu, 14 Apr 2022 15:53:03 +0200 Subject: [PATCH 06/30] Todays changes --- app.ts | 821 ++++++++++++++++++++++++------------------------- server/main.go | 2 +- style.css | 18 +- 3 files changed, 408 insertions(+), 433 deletions(-) diff --git a/app.ts b/app.ts index 7484f019..d274ade8 100644 --- a/app.ts +++ b/app.ts @@ -9,6 +9,8 @@ function createNavigation() {
+ +
@@ -17,7 +19,7 @@ function createNavigation() {
-//
-//
-// -// -//
-//
-// -// `; -// selectionArea.innerHTML = ""; -// selectionArea.innerHTML = multipleRecordSelection; - -// let returnBtn: any = document.querySelector( -// "#multiple-return-btn.return-btn" -// ); - -// returnBtn.addEventListener("click", () => { -// records = []; -// headingColumns.innerHTML = ""; -// infoColumns.innerHTML = ""; -// fetchData(); -// createNavigation(); -// }); - -// let multipleSubmitBtn: any = document.querySelector( -// "#multiple-submit-btn.submit-btn" -// ); -// multipleSubmitBtn.addEventListener("click", () => { -// let fromIdSelection: any = document.querySelector( -// "#from-record-id.navigation-input" -// ); -// let toIdSelection: any = document.querySelector( -// "#to-record-id.navigation-input" -// ); - -// let fromIdValue = fromIdSelection.value; -// let toIdValue = toIdSelection.value; - -// if (fromIdValue.length === 0 || toIdValue === 0) { -// alert( -// "You left one of the record id inputs empty or you have entered an incorrect character." -// ); -// } else { -// if ( -// (fromIdValue !== null && toIdValue !== null) || -// (fromIdValue !== "" && toIdValue !== "") -// ) { -// const totalRecordsAllowed = 16; -// let recordCount: number = -// Number(toIdValue) - Number(fromIdValue) + 1; -// if ( -// recordCount > totalRecordsAllowed || -// typeof recordCount !== "number" -// ) { -// let excessRecords = recordCount - totalRecordsAllowed; -// toIdValue = toIdValue - excessRecords; -// alert( -// "The data you entered is incorrect or you trying to access to much records only " + -// totalRecordsAllowed + -// " records can be accessed at a time. You have " + -// excessRecords + -// " excess records" -// ); -// // Fetching information -// fetch( -// "http://localhost:2050/records?from=" + -// fromIdValue + -// "&to=" + -// toIdValue, -// { -// method: "GET", -// headers: { "Content-Type": "application/json" }, -// } -// ) -// .then((response) => response.text()) -// .then((data) => { -// let columnDataList = JSON.parse(data); - -// infoColumns.innerHTML = ""; -// }); -// } else if (recordCount <= 16 || typeof recordCount === "number") { -// // Fetching information -// fetch( -// "http://localhost:2050/records?from=" + -// fromIdValue + -// "&to=" + -// toIdValue, -// { -// method: "GET", -// headers: { "Content-Type": "application/json" }, -// } -// ) -// .then((response) => response.text()) -// .then((data) => { -// let columnDataList = JSON.parse(data); - -// infoColumns.innerHTML = ""; -// for (let i = 0; i < columnDataList.length; i++) { - -// } -// }); -// } -// } else { -// alert( -// "Sorry there has been a problem. Please check your inputs make sure you have both filled." -// ); -// } -// } -// }); -// } else if (recordSelectionValue === "multiple-single") { -// let multipleSingleRecordSelection = ` -// -//
-//
-// -// -//
-//
-// -// `; -// selectionArea.innerHTML = ""; -// selectionArea.innerHTML = multipleSingleRecordSelection; -// let returnBtn: any = document.querySelector( -// "#multiple-single-return-btn.return-btn" -// ); -// returnBtn.addEventListener("click", () => { -// alert("Records you have viewed " + records); -// headingColumns.innerHTML = ""; -// infoColumns.innerHTML = ""; -// fetchData(); -// createNavigation(); -// }); -// let addMulitpleSingularRecords: any = document.querySelector( -// "#add-records-btn.add-btn" -// ); - -// addMulitpleSingularRecords.addEventListener("click", () => { -// // Inputs and selects -// let IdSelection: any = document.querySelector( -// "#record-id.navigation-input" -// ); - -// let letterValueSelection: any = -// document.querySelector("#record-content"); - -// //Values Needed -// let IdValue = IdSelection.value; -// let letterValue = letterValueSelection.value; -// let numberCheck: number = 12 - Number(IdValue); -// const recordAmount: number = 16; -// let amountOfRecords = records.length; - -// if (amountOfRecords > recordAmount) { -// alert("That is the total amount of records that can be added"); -// } else if (amountOfRecords === 0) { -// infoColumns.innerHTML = ""; -// } else { -// //pass -// } - -// if (IdValue.length === 0 || letterValue === "none") { -// alert( -// "You left one of the record id inputs empty or you have entered an incorrect character." -// ); -// } else { -// if ( -// typeof numberCheck === "number" && -// typeof letterValue === "string" -// ) { -// let record = { -// Id: IdValue, -// letterId: letterValue, -// }; -// let arrayRecord = JSON.stringify(record); -// let isInArray = records.includes(arrayRecord); - -// if (isInArray === false) { -// // Fetching information -// fetch( -// "http://localhost:2050/records?from=" + -// IdValue + -// "&to=" + -// IdValue, -// { -// method: "GET", -// headers: { "Content-Type": "application/json" }, -// } -// ) -// .then((response) => response.text()) -// .then((data) => { -// let columnDataList = JSON.parse(data); - -// infoColumns.innerHTML += ""; -// console.log(columnDataList); -// }); -// records.push(arrayRecord); - -// for (let i = 0; i < records.length; i++) { -// JSON.parse(records[i]); -// } -// } else { -// alert("The record was already added"); -// } -// } else { -// alert("Enter apropriate inputs please"); -// } -// } -// }); -// records = records; -// } else { -// alert( -// "Sorry there has been a problem. The page will reload can you please try again." -// ); -// window.location.reload(); -// } -// } else { -// alert("Error"); -// } -// } +function recordSelection() { + let selectionArea: any = recordNav; + let recordSelector: any = document.querySelector("#record-selection"); + let recordSelectionValue: string = recordSelector.value; + let records: any = []; + + if ( + recordSelectionValue === "multiple" || + recordSelectionValue === "single" + ) { + if (recordSelectionValue === "multiple") { + let multipleRecordSelection = ` + +
+
+ + +
+
+ + `; + selectionArea.innerHTML = ""; + selectionArea.innerHTML = multipleRecordSelection; + + let returnBtn: any = document.querySelector( + "#multiple-return-btn.return-btn" + ); + + returnBtn.addEventListener("click", () => { + records = []; + headingColumns.innerHTML = ""; + infoColumns.innerHTML = ""; + fetchData(); + createNavigation(); + }); + + let multipleSubmitBtn: any = document.querySelector( + "#multiple-submit-btn.submit-btn" + ); + multipleSubmitBtn.addEventListener("click", () => { + let fromIdSelection: any = document.querySelector( + "#from-record-id.navigation-input" + ); + let toIdSelection: any = document.querySelector( + "#to-record-id.navigation-input" + ); + + let fromIdValue = fromIdSelection.value; + let toIdValue = toIdSelection.value; + + if (fromIdValue.length === 0 || toIdValue === 0) { + alert( + "You left one of the record id inputs empty or you have entered an incorrect character." + ); + } else { + if ( + (fromIdValue !== null && toIdValue !== null) || + (fromIdValue !== "" && toIdValue !== "") + ) { + const totalRecordsAllowed = 16; + let recordCount: number = + Number(toIdValue) - Number(fromIdValue) + 1; + if ( + recordCount > totalRecordsAllowed || + typeof recordCount !== "number" + ) { + let excessRecords = recordCount - totalRecordsAllowed; + toIdValue = toIdValue - excessRecords; + alert( + "The data you entered is incorrect or you trying to access to much records only " + + totalRecordsAllowed + + " records can be accessed at a time. You have " + + excessRecords + + " excess records" + ); + // Fetching information + fetch( + "http://localhost:2050/records?from=" + + fromIdValue + + "&to=" + + toIdValue, + { + method: "GET", + headers: { "Content-Type": "application/json" }, + } + ) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + + infoColumns.innerHTML = ""; + }); + } else if (recordCount <= 16 || typeof recordCount === "number") { + // Fetching information + fetch( + "http://localhost:2050/records?from=" + + fromIdValue + + "&to=" + + toIdValue, + { + method: "GET", + headers: { "Content-Type": "application/json" }, + } + ) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + + infoColumns.innerHTML = ""; + for (let i = 0; i < columnDataList.length; i++) {} + }); + } + } else { + alert( + "Sorry there has been a problem. Please check your inputs make sure you have both filled." + ); + } + } + }); + } else if (recordSelectionValue === "single") { + let multipleSingleRecordSelection = ` + +
+
+ + +
+
+ + `; + selectionArea.innerHTML = ""; + selectionArea.innerHTML = multipleSingleRecordSelection; + let returnBtn: any = document.querySelector( + "#multiple-single-return-btn.return-btn" + ); + returnBtn.addEventListener("click", () => { + alert("Records you have viewed " + records); + headingColumns.innerHTML = ""; + infoColumns.innerHTML = ""; + fetchData(); + createNavigation(); + }); + let addMulitpleSingularRecords: any = document.querySelector( + "#add-records-btn.add-btn" + ); + + addMulitpleSingularRecords.addEventListener("click", () => { + // Inputs and selects + let IdSelection: any = document.querySelector( + "#record-id.navigation-input" + ); + + let letterValueSelection: any = + document.querySelector("#record-content"); + + //Values Needed + let IdValue = IdSelection.value; + let letterValue = letterValueSelection.value; + let numberCheck: number = 12 - Number(IdValue); + const recordAmount: number = 16; + let amountOfRecords = records.length; + + if (amountOfRecords > recordAmount) { + alert("That is the total amount of records that can be added"); + } else if (amountOfRecords === 0) { + infoColumns.innerHTML = ""; + } else { + //pass + } + + if (IdValue.length === 0 || letterValue === "none") { + alert( + "You left one of the record id inputs empty or you have entered an incorrect character." + ); + } else { + if ( + typeof numberCheck === "number" && + typeof letterValue === "string" + ) { + let record = { + Id: IdValue, + letterId: letterValue, + }; + let arrayRecord = JSON.stringify(record); + let isInArray = records.includes(arrayRecord); + + if (isInArray === false) { + // Fetching information + fetch( + "http://localhost:2050/records?from=" + + IdValue + + "&to=" + + IdValue, + { + method: "GET", + headers: { "Content-Type": "application/json" }, + } + ) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + + infoColumns.innerHTML += ""; + console.log(columnDataList); + }); + records.push(arrayRecord); + + for (let i = 0; i < records.length; i++) { + JSON.parse(records[i]); + } + } else { + alert("The record was already added"); + } + } else { + alert("Enter apropriate inputs please"); + } + } + }); + records = records; + } else { + alert( + "Sorry there has been a problem. The page will reload can you please try again." + ); + window.location.reload(); + } + } else { + alert("Error"); + } +} diff --git a/server/main.go b/server/main.go index f4ce292a..de0930b4 100644 --- a/server/main.go +++ b/server/main.go @@ -13,7 +13,7 @@ import ( "time" ) -var columns = [13]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"} +var columns = [11]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"} const recordCount = 1000000 const columnCount = len(columns); const delayResponse = 500 * time.Millisecond diff --git a/style.css b/style.css index cdcb3d72..10096a8e 100644 --- a/style.css +++ b/style.css @@ -3,6 +3,7 @@ padding: 0; box-sizing: border-box; font-family: sans-serif; + font-size: 12px; overflow-y: hidden; overflow-x: hidden; } @@ -27,6 +28,7 @@ select, input { width: 200px; padding: 10px; + margin: 5px; } /* HTML containers */ @@ -54,6 +56,7 @@ input { .next-previous-navigation-btns { display: flex; + flex-wrap: wrap; flex-direction: row; justify-content: space-around; width: 100%; @@ -91,6 +94,7 @@ input { } .column-heading { + font-size: 30px; padding: 20px; text-align: center; border-right: 1px solid black; @@ -102,22 +106,26 @@ input { /* Data */ #info-columns-container { display: flex; - justify-content: space-between; flex-direction: column; + justify-content: space-between; height: 75vh; width: 100%; } -.info-row { +.info-data-row { display: flex; flex-direction: row; justify-content: space-between; + height: 10vh; width: 100%; - height: 100%; border-bottom: 1px solid black; } -.info-data { +.info-column { + padding: 15px; + text-align: center; width: 100%; - border-right: 1px solid black; + border-right: 1px solid; } + +/* .info-data-row; */ From 20f8768654f98b6ca6abe1574576129875ca8a24 Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Wed, 20 Apr 2022 12:35:10 +0200 Subject: [PATCH 07/30] Todays changes --- Project Notes | 1 + app.ts | 505 ++++++++++++++++++++++++------------------------- server/main.go | 2 +- style.css | 78 +++----- 4 files changed, 285 insertions(+), 301 deletions(-) create mode 100644 Project Notes diff --git a/Project Notes b/Project Notes new file mode 100644 index 00000000..206518fb --- /dev/null +++ b/Project Notes @@ -0,0 +1 @@ +ID and other columns have the number in common. e.g 0 diff --git a/app.ts b/app.ts index d274ade8..5ffd69b8 100644 --- a/app.ts +++ b/app.ts @@ -3,54 +3,54 @@ let recordNav: any = document.querySelector("#record-navigation-container"); //N let headingColumns: any = document.querySelector("#column-headings-container"); //Headings; let infoColumns: any = document.querySelector("#info-columns-container"); //Information; +// Creates the navigation. function createNavigation() { recordNav.innerHTML = ` -
-
-
-

-
-
+
-
+
+
+

+
+ `; } +// Heading and info grid being created. function createHeadingGrid(headings: any) { let headingsData: any = `

${headings}

`; headingColumns.innerHTML += headingsData; } -function createGrid(columnData: string) { - let infoRowColumns: any = ` -
-

${columnData[0]}

-

${columnData[1]}

-

${columnData[2]}

-

${columnData[3]}

-

${columnData[4]}

-

${columnData[5]}

-

${columnData[6]}

-

${columnData[7]}

-

${columnData[8]}

-

${columnData[9]}

-

${columnData[10]}

-
`; - infoColumns.innerHTML += infoRowColumns; +function dynamicGrid(columnData: any) { + // Creates the row that the info will display and adds it to the infoColumnsArea. + let infoDataRow = `
`; + infoColumns.innerHTML += infoDataRow; + // Gets the created rows. + let finalInfoDataRow: any = document.querySelector( + "#info-row-" + columnData[0] + ".info-rows" + ); + + // Loops through + for (let x = 0; x < columnData.length; x++) { + let Div = `

${columnData[x]}

`; + finalInfoDataRow.innerHTML += Div; + } } +// Adds data in the heading and info grid. function fetchData() { // Gets headings array fetch("http://localhost:2050/columns", { @@ -84,7 +84,8 @@ function fetchData() { .then((data) => { let columnDataList = JSON.parse(data); for (let i = 0; i < columnDataList.length; i++) { - createGrid(columnDataList[i]); + // createGrid(columnDataList[i]); + dynamicGrid(columnDataList[i]); } }); }); @@ -94,37 +95,26 @@ function fetchData() { fetchData(); -function nextPageData(firstNumber: any, secondNumber: any) { - // Fetching information - fetch( - "http://localhost:2050/records?from=" + firstNumber + "&to=" + secondNumber, - { - method: "GET", - headers: { "Content-Type": "application/json" }, - } - ) - .then((response) => response.text()) - .then((data) => { - let columnDataList = JSON.parse(data); - infoColumns.innerHTML = ""; - for (let i = 0; i < columnDataList.length; i++) { - createGrid(columnDataList[i]); - } - }); -} - +// The functionality to move through an amount of records. function nextPrevious(firstId: any, finalId: any) { + // Btn's used to move from page to page. let nextBtn: any = document.querySelector(".next-records-btn"); let previousBtn: any = document.querySelector(".previous-records-btn"); - let resetBtn: any = document.querySelector(".reset-records-btn"); + + // Btn's used to move directly to the last and first page. + let firstPageBtn: any = document.querySelector(".reset-records-btn"); let lastPageBtn: any = document.querySelector(".last-records-btn"); + + // The area where the current page is shown. let currentPage: any = document.querySelector(".current-page"); + // The id's of the records that represent the first and last record of the page. let numberOne: number = firstId; let numberTwo: number = finalId; const amountRecords: number = 15; - currentPage.innerHTML = numberOne + " -> " + numberTwo + " First Page"; + // Dsplays the current page. + currentPage.innerHTML = numberOne + " / " + numberTwo + " First Page"; if (numberOne === 0 && numberTwo === 14) { previousBtn.disabled = true; @@ -132,19 +122,22 @@ function nextPrevious(firstId: any, finalId: any) { //pass } - resetBtn.addEventListener("click", () => { + // The button that takes you to the first page. + firstPageBtn.addEventListener("click", () => { let nextNumberOne: number = 0; let nextNumberTwo: number = 14; previousBtn.disabled = true; nextBtn.disabled = false; currentPage.innerHTML = ""; - currentPage.innerHTML = nextNumberOne + " -> " + nextNumberTwo; + currentPage.innerHTML = + nextNumberOne + " / " + nextNumberTwo + " First Page"; numberOne = nextNumberOne; numberTwo = nextNumberTwo; nextPageData(numberOne, numberTwo); }); + // The button that takes you to the last page. lastPageBtn.addEventListener("click", () => { let nextNumberOne: number = 999985; let nextNumberTwo: number = 999999; @@ -152,12 +145,14 @@ function nextPrevious(firstId: any, finalId: any) { previousBtn.disabled = false; currentPage.innerHTML = ""; - currentPage.innerHTML = nextNumberOne + " -> " + nextNumberTwo; + currentPage.innerHTML = + nextNumberOne + " / " + nextNumberTwo + " Last Page"; numberOne = nextNumberOne; numberTwo = nextNumberTwo; nextPageData(numberOne, numberTwo); }); + // The button that takes you to the next page. nextBtn.addEventListener("click", () => { let nextNumberOne: number = numberOne + amountRecords; let nextNumberTwo: number = numberTwo + amountRecords; @@ -166,20 +161,21 @@ function nextPrevious(firstId: any, finalId: any) { if (nextNumberOne === 999985 && nextNumberTwo === 999999) { currentPage.innerHTML = ""; currentPage.innerHTML = - nextNumberOne + " -> " + nextNumberTwo + " Final Page"; + nextNumberOne + " / " + nextNumberTwo + " Final Page"; numberOne = nextNumberOne; numberTwo = nextNumberTwo; nextPageData(numberOne, numberTwo); nextBtn.disabled = true; } else { currentPage.innerHTML = ""; - currentPage.innerHTML = nextNumberOne + " -> " + nextNumberTwo; + currentPage.innerHTML = nextNumberOne + " / " + nextNumberTwo; numberOne = nextNumberOne; numberTwo = nextNumberTwo; nextPageData(numberOne, numberTwo); } }); + // The button that takes you to the previous page. previousBtn.addEventListener("click", () => { let nextNumberOne: number = numberOne - amountRecords; let nextNumberTwo: number = numberTwo - amountRecords; @@ -188,20 +184,41 @@ function nextPrevious(firstId: any, finalId: any) { if (nextNumberOne === 0 && nextNumberTwo === 14) { currentPage.innerHTML = ""; currentPage.innerHTML = - nextNumberOne + " -> " + nextNumberTwo + " First Page"; + nextNumberOne + " / " + nextNumberTwo + " First Page"; numberOne = nextNumberOne; numberTwo = nextNumberTwo; nextPageData(numberOne, numberTwo); previousBtn.disabled = true; } else { currentPage.innerHTML = ""; - currentPage.innerHTML = nextNumberOne + " -> " + nextNumberTwo; + currentPage.innerHTML = nextNumberOne + " / " + nextNumberTwo; numberOne = nextNumberOne; numberTwo = nextNumberTwo; nextPageData(numberOne, numberTwo); } }); } + +function nextPageData(firstNumber: any, secondNumber: any) { + // Fetching information that will display when you go to the next or previous page. + fetch( + "http://localhost:2050/records?from=" + firstNumber + "&to=" + secondNumber, + { + method: "GET", + headers: { "Content-Type": "application/json" }, + } + ) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + infoColumns.innerHTML = ""; + for (let i = 0; i < columnDataList.length; i++) { + dynamicGrid(columnDataList[i]); + } + }); +} + +// Checks if you looking for a single or multiple records. function recordSelection() { let selectionArea: any = recordNav; let recordSelector: any = document.querySelector("#record-selection"); @@ -212,119 +229,99 @@ function recordSelection() { recordSelectionValue === "multiple" || recordSelectionValue === "single" ) { - if (recordSelectionValue === "multiple") { - let multipleRecordSelection = ` - -
-
- - + if (recordSelectionValue === "single") { + let multipleSingleRecordSelection = ` + +
+
- - `; + + `; selectionArea.innerHTML = ""; - selectionArea.innerHTML = multipleRecordSelection; + selectionArea.innerHTML = multipleSingleRecordSelection; - let returnBtn: any = document.querySelector( - "#multiple-return-btn.return-btn" - ); + let returnBtn: any = document.querySelector("#return-btn"); returnBtn.addEventListener("click", () => { - records = []; + let recordsViewed: any; + let viewedRecords: any = []; + for (let i = 0; i < records.length; i++) { + recordsViewed = JSON.parse(records[i])["ID"]; + viewedRecords.push(recordsViewed); + } + alert("Records you have viewed " + viewedRecords); headingColumns.innerHTML = ""; infoColumns.innerHTML = ""; fetchData(); createNavigation(); }); - let multipleSubmitBtn: any = document.querySelector( - "#multiple-submit-btn.submit-btn" - ); - multipleSubmitBtn.addEventListener("click", () => { - let fromIdSelection: any = document.querySelector( - "#from-record-id.navigation-input" - ); - let toIdSelection: any = document.querySelector( - "#to-record-id.navigation-input" - ); + let getSingleRecord: any = document.querySelector("#get-record-btn"); - let fromIdValue = fromIdSelection.value; - let toIdValue = toIdSelection.value; + getSingleRecord.addEventListener("click", () => { + infoColumns.innerHTML = ""; + // Id input + let IdSelection: any = document.querySelector("#record-id"); - if (fromIdValue.length === 0 || toIdValue === 0) { - alert( - "You left one of the record id inputs empty or you have entered an incorrect character." - ); + //Values Needed + let IdValue = IdSelection.value; + let numberCheck: number = 12 - Number(IdValue); + + // Value checks + if (IdValue.length === 0) { + alert("You have entered an incorrect character."); } else { - if ( - (fromIdValue !== null && toIdValue !== null) || - (fromIdValue !== "" && toIdValue !== "") - ) { - const totalRecordsAllowed = 16; - let recordCount: number = - Number(toIdValue) - Number(fromIdValue) + 1; - if ( - recordCount > totalRecordsAllowed || - typeof recordCount !== "number" - ) { - let excessRecords = recordCount - totalRecordsAllowed; - toIdValue = toIdValue - excessRecords; - alert( - "The data you entered is incorrect or you trying to access to much records only " + - totalRecordsAllowed + - " records can be accessed at a time. You have " + - excessRecords + - " excess records" - ); - // Fetching information - fetch( - "http://localhost:2050/records?from=" + - fromIdValue + - "&to=" + - toIdValue, - { - method: "GET", - headers: { "Content-Type": "application/json" }, - } - ) - .then((response) => response.text()) - .then((data) => { - let columnDataList = JSON.parse(data); + if (IdValue > 999999) { + alert("The record you are looking for does not exist"); + IdValue = 0; + } else { + //pass + } + + if (typeof numberCheck === "number") { + let record = { + ID: IdValue, + }; + + let arrayRecord = JSON.stringify(record); + let isInArray = records.includes(arrayRecord); + let finalSingleId: number; + let properId: any; + + if (IdValue > 999984) { + properId = IdValue; + finalSingleId = 999999; + IdValue = 999984; + } else { + finalSingleId = Number(IdValue) + 15; + } + + if (isInArray === false || isInArray === true) { + if (isInArray === true) { + let removeIndex = records.indexOf(record["ID"]); + records.splice(removeIndex); + } else { + //pass + } - infoColumns.innerHTML = ""; - }); - } else if (recordCount <= 16 || typeof recordCount === "number") { // Fetching information fetch( "http://localhost:2050/records?from=" + - fromIdValue + + IdValue + "&to=" + - toIdValue, + finalSingleId, { method: "GET", headers: { "Content-Type": "application/json" }, @@ -334,157 +331,159 @@ function recordSelection() { .then((data) => { let columnDataList = JSON.parse(data); - infoColumns.innerHTML = ""; - for (let i = 0; i < columnDataList.length; i++) {} + infoColumns.innerHTML += ""; + for (let i = 0; i < columnDataList.length; i++) { + if (IdValue == 999984) { + IdValue = properId; + console.log(properId); + } else { + //pass + } + createGridSingle(columnDataList[i], IdValue); + } }); + + records.push(arrayRecord); + + for (let i = 0; i < records.length; i++) { + JSON.parse(records[i]); + } + } else { + alert("There is a problem accessing the record."); } } else { - alert( - "Sorry there has been a problem. Please check your inputs make sure you have both filled." - ); + alert("Enter apropriate inputs please."); } } }); - } else if (recordSelectionValue === "single") { - let multipleSingleRecordSelection = ` - + + records = records; + } else if (recordSelectionValue === "multiple") { + let multipleRecordSelection = ` +
-
-
- + `; selectionArea.innerHTML = ""; - selectionArea.innerHTML = multipleSingleRecordSelection; - let returnBtn: any = document.querySelector( - "#multiple-single-return-btn.return-btn" - ); + selectionArea.innerHTML = multipleRecordSelection; + + let returnBtn: any = document.querySelector("#return-btn"); returnBtn.addEventListener("click", () => { - alert("Records you have viewed " + records); + records = []; headingColumns.innerHTML = ""; infoColumns.innerHTML = ""; fetchData(); createNavigation(); }); - let addMulitpleSingularRecords: any = document.querySelector( - "#add-records-btn.add-btn" - ); - - addMulitpleSingularRecords.addEventListener("click", () => { - // Inputs and selects - let IdSelection: any = document.querySelector( - "#record-id.navigation-input" - ); - let letterValueSelection: any = - document.querySelector("#record-content"); + let SubmitBtn: any = document.querySelector("#submit-btn"); + SubmitBtn.addEventListener("click", () => { + let fromIdSelection: any = document.querySelector( + "#from-record-id.navigation-input" + ); + let toIdSelection: any = document.querySelector( + "#to-record-id.navigation-input" + ); - //Values Needed - let IdValue = IdSelection.value; - let letterValue = letterValueSelection.value; - let numberCheck: number = 12 - Number(IdValue); - const recordAmount: number = 16; - let amountOfRecords = records.length; + let fromIdValue = fromIdSelection.value; - if (amountOfRecords > recordAmount) { - alert("That is the total amount of records that can be added"); - } else if (amountOfRecords === 0) { - infoColumns.innerHTML = ""; + if (fromIdValue > 999984 && fromIdValue <= 999999) { + fromIdValue = 999984; + alert("You have reached the final page"); } else { //pass } - if (IdValue.length === 0 || letterValue === "none") { - alert( - "You left one of the record id inputs empty or you have entered an incorrect character." - ); - } else { - if ( - typeof numberCheck === "number" && - typeof letterValue === "string" - ) { - let record = { - Id: IdValue, - letterId: letterValue, - }; - let arrayRecord = JSON.stringify(record); - let isInArray = records.includes(arrayRecord); + const totalRecordsAllowed = 15; - if (isInArray === false) { - // Fetching information - fetch( - "http://localhost:2050/records?from=" + - IdValue + - "&to=" + - IdValue, - { - method: "GET", - headers: { "Content-Type": "application/json" }, - } - ) - .then((response) => response.text()) - .then((data) => { - let columnDataList = JSON.parse(data); + let toIdSelectionValue = (toIdSelection.value = + Number(fromIdValue) + 15); + let toIdValue = toIdSelectionValue; - infoColumns.innerHTML += ""; - console.log(columnDataList); - }); - records.push(arrayRecord); + let recordCount: number = Number(toIdValue) - Number(fromIdValue); - for (let i = 0; i < records.length; i++) { - JSON.parse(records[i]); + if (recordCount !== 15 || fromIdValue > 999999) { + fromIdSelection.value = "0"; + toIdSelection.value = "14"; + alert("Your entered ID is not correct or does not exist"); + } else { + if (totalRecordsAllowed === recordCount && fromIdValue <= 999999) { + // Fetching information + fetch( + "http://localhost:2050/records?from=" + + fromIdValue + + "&to=" + + toIdValue, + { + method: "GET", + headers: { "Content-Type": "application/json" }, } - } else { - alert("The record was already added"); - } + ) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + + infoColumns.innerHTML = ""; + for (let i = 0; i < columnDataList.length; i++) { + dynamicGrid(columnDataList[i]); + } + }); } else { - alert("Enter apropriate inputs please"); + alert("Sorry there has been a problem. Please check your inputs."); } } }); - records = records; } else { - alert( - "Sorry there has been a problem. The page will reload can you please try again." - ); + alert("Sorry there has been a problem."); window.location.reload(); } } else { - alert("Error"); + alert("Something went wrong."); + } +} + +// Highlights the record you are searching for. +function createGridSingle(columnData: string, highlightedRecord: any) { + // Creates the row that the info will display and adds it to the infoColumnsArea. + let infoDataRow = `
`; + infoColumns.innerHTML += infoDataRow; + + // Gets the created rows. + let finalInfoDataRow: any = document.querySelector( + "#info-row-" + columnData[0] + ".info-rows" + ); + + // Loops through the data. + for (let x = 0; x < columnData.length; x++) { + let Div = `

${columnData[x]}

`; + finalInfoDataRow.innerHTML += Div; + } + if (highlightedRecord == columnData[0]) { + finalInfoDataRow.style.color = "red"; + } else { + //pass } } diff --git a/server/main.go b/server/main.go index de0930b4..f4ce292a 100644 --- a/server/main.go +++ b/server/main.go @@ -13,7 +13,7 @@ import ( "time" ) -var columns = [11]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"} +var columns = [13]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"} const recordCount = 1000000 const columnCount = len(columns); const delayResponse = 500 * time.Millisecond diff --git a/style.css b/style.css index 10096a8e..b4b02423 100644 --- a/style.css +++ b/style.css @@ -21,111 +21,95 @@ body { align-items: center; height: 100vh; } +/* */ /* Buttons, selects and inputs */ button, select, input { - width: 200px; - padding: 10px; - margin: 5px; + width: 125px; + padding: 5px; } +/* */ -/* HTML containers */ /* Navigation */ #record-navigation-container { display: flex; + justify-content: space-around; align-items: center; - justify-content: space-between; flex-direction: row; height: 15vh; - max-width: 100%; - min-width: 50%; width: 100%; padding: 20px; border-bottom: 1px solid black; } -.next-previous-navigation { - display: flex; - align-items: center; - justify-content: space-between; - flex-direction: row; - width: 40%; -} - +/* Next and previous controls */ .next-previous-navigation-btns { display: flex; - flex-wrap: wrap; - flex-direction: row; justify-content: space-around; - width: 100%; + width: 40%; } .current-page-container { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - width: 20%; - border-left: 1px solid black; - border-right: 1px solid black; -} - -.current-page { text-align: center; + width: 20%; } +/* */ +/* Select filter method */ .select-confirm { display: flex; - align-items: center; justify-content: space-around; - flex-direction: row; - width: 40%; + width: 20%; } /* */ + /* Headings */ #column-headings-container { display: flex; + justify-content: space-between; + align-items: center; flex-direction: row; - height: 10vh; + height: 15vh; width: 100%; border-bottom: 1px solid black; } .column-heading { - font-size: 30px; - padding: 20px; - text-align: center; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; border-right: 1px solid black; height: 100%; width: 100%; } /* */ -/* Data */ +/* Info grid */ #info-columns-container { display: flex; flex-direction: column; - justify-content: space-between; - height: 75vh; + height: calc(100vh - 30vh); width: 100%; } -.info-data-row { +.info-rows { display: flex; - flex-direction: row; justify-content: space-between; - height: 10vh; + align-items: center; + flex-direction: row; + height: 5vh; width: 100%; border-bottom: 1px solid black; } -.info-column { - padding: 15px; - text-align: center; +.info-row-data { + display: flex; + justify-content: center; + align-items: center; width: 100%; - border-right: 1px solid; + height: 100%; + border-right: 1px solid black; } - -/* .info-data-row; */ From 25982e18aeda08c5ac190cae5f19342a645d8d43 Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Wed, 20 Apr 2022 12:36:19 +0200 Subject: [PATCH 08/30] Todays changes --- Project Notes | 1 - 1 file changed, 1 deletion(-) delete mode 100644 Project Notes diff --git a/Project Notes b/Project Notes deleted file mode 100644 index 206518fb..00000000 --- a/Project Notes +++ /dev/null @@ -1 +0,0 @@ -ID and other columns have the number in common. e.g 0 From d5a0150b82306bf1f4af7c3ffa100fe653b05b02 Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Fri, 22 Apr 2022 09:58:13 +0200 Subject: [PATCH 09/30] Coding changes, screen size checks, changed how single records work. --- app.ts | 454 ++++++++++++++++++++++++++++++++++++------------------ style.css | 11 +- 2 files changed, 308 insertions(+), 157 deletions(-) diff --git a/app.ts b/app.ts index 5ffd69b8..20381a75 100644 --- a/app.ts +++ b/app.ts @@ -45,8 +45,8 @@ function dynamicGrid(columnData: any) { // Loops through for (let x = 0; x < columnData.length; x++) { - let Div = `

${columnData[x]}

`; - finalInfoDataRow.innerHTML += Div; + let infoData = `

${columnData[x]}

`; + finalInfoDataRow.innerHTML += infoData; } } @@ -67,8 +67,31 @@ function fetchData() { createHeadingGrid(headings); } - let fromNumber = 0; - let toNumber = 14; + let fromNumber: any = 0; + let toNumber: any = 14; + + window.addEventListener("resize", () => { + if (window.innerHeight <= 500) { + toNumber = fromNumber + 10; + window.location.reload(); + } else if (window.innerHeight > 500) { + toNumber = fromNumber + 14; + window.location.reload(); + } else { + console.log("Nothing"); + } + + nextPrevious(fromNumber, toNumber); + fetchDataScreenSize(fromNumber, toNumber); + }); + + if (window.innerHeight <= 500) { + toNumber = fromNumber + 10; + } else if (window.innerHeight > 500) { + toNumber = fromNumber + 14; + } else { + console.log("Nothing"); + } nextPrevious(fromNumber, toNumber); @@ -83,18 +106,37 @@ function fetchData() { .then((response) => response.text()) .then((data) => { let columnDataList = JSON.parse(data); + infoColumns.innerHTML = ""; for (let i = 0; i < columnDataList.length; i++) { - // createGrid(columnDataList[i]); dynamicGrid(columnDataList[i]); } }); }); - createNavigation(); } fetchData(); +// Adds data in the heading and info grid on a smaller screen. +function fetchDataScreenSize(fromNumber: any, toNumber: any) { + // Fetching information + fetch( + "http://localhost:2050/records?from=" + fromNumber + "&to=" + toNumber, + { + method: "GET", + headers: { "Content-Type": "application/json" }, + } + ) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + infoColumns.innerHTML = ""; + for (let i = 0; i < columnDataList.length; i++) { + dynamicGrid(columnDataList[i]); + } + }); +} + // The functionality to move through an amount of records. function nextPrevious(firstId: any, finalId: any) { // Btn's used to move from page to page. @@ -111,92 +153,111 @@ function nextPrevious(firstId: any, finalId: any) { // The id's of the records that represent the first and last record of the page. let numberOne: number = firstId; let numberTwo: number = finalId; - const amountRecords: number = 15; - // Dsplays the current page. - currentPage.innerHTML = numberOne + " / " + numberTwo + " First Page"; + const amountRecords: number = finalId - firstId; - if (numberOne === 0 && numberTwo === 14) { - previousBtn.disabled = true; - } else { - //pass - } + let navigation = document.querySelector(".next-previous-navigation-btns"); - // The button that takes you to the first page. - firstPageBtn.addEventListener("click", () => { - let nextNumberOne: number = 0; - let nextNumberTwo: number = 14; - previousBtn.disabled = true; - nextBtn.disabled = false; - - currentPage.innerHTML = ""; - currentPage.innerHTML = - nextNumberOne + " / " + nextNumberTwo + " First Page"; - numberOne = nextNumberOne; - numberTwo = nextNumberTwo; - nextPageData(numberOne, numberTwo); - }); - - // The button that takes you to the last page. - lastPageBtn.addEventListener("click", () => { - let nextNumberOne: number = 999985; - let nextNumberTwo: number = 999999; - nextBtn.disabled = true; - previousBtn.disabled = false; - - currentPage.innerHTML = ""; - currentPage.innerHTML = - nextNumberOne + " / " + nextNumberTwo + " Last Page"; - numberOne = nextNumberOne; - numberTwo = nextNumberTwo; - nextPageData(numberOne, numberTwo); - }); - - // The button that takes you to the next page. - nextBtn.addEventListener("click", () => { - let nextNumberOne: number = numberOne + amountRecords; - let nextNumberTwo: number = numberTwo + amountRecords; - previousBtn.disabled = false; - - if (nextNumberOne === 999985 && nextNumberTwo === 999999) { - currentPage.innerHTML = ""; - currentPage.innerHTML = - nextNumberOne + " / " + nextNumberTwo + " Final Page"; - numberOne = nextNumberOne; - numberTwo = nextNumberTwo; - nextPageData(numberOne, numberTwo); - nextBtn.disabled = true; + if (recordNav.contains(navigation) === true) { + // Displays the current page. + currentPage.innerHTML = numberOne + " / " + numberTwo + " First Page"; + + if ((numberOne === 0 && numberTwo === 14) || numberTwo === 10) { + previousBtn.disabled = true; } else { - currentPage.innerHTML = ""; - currentPage.innerHTML = nextNumberOne + " / " + nextNumberTwo; - numberOne = nextNumberOne; - numberTwo = nextNumberTwo; - nextPageData(numberOne, numberTwo); + //pass } - }); - // The button that takes you to the previous page. - previousBtn.addEventListener("click", () => { - let nextNumberOne: number = numberOne - amountRecords; - let nextNumberTwo: number = numberTwo - amountRecords; - nextBtn.disabled = false; + // The button that takes you to the first page. + firstPageBtn.addEventListener("click", () => { + let nextNumberOne: number = 0; + let nextNumberTwo: number = nextNumberOne + amountRecords; + previousBtn.disabled = true; + nextBtn.disabled = false; - if (nextNumberOne === 0 && nextNumberTwo === 14) { currentPage.innerHTML = ""; currentPage.innerHTML = nextNumberOne + " / " + nextNumberTwo + " First Page"; numberOne = nextNumberOne; numberTwo = nextNumberTwo; nextPageData(numberOne, numberTwo); - previousBtn.disabled = true; - } else { + }); + + // The button that takes you to the last page. + lastPageBtn.addEventListener("click", () => { + let nextNumberOne: any; + + if (numberTwo === 10) { + nextNumberOne = 999989; + } else if (numberTwo === 14) { + nextNumberOne = 999984; + } else { + //pass + } + + let nextNumberTwo: number = 999999; + nextBtn.disabled = true; + previousBtn.disabled = false; + currentPage.innerHTML = ""; - currentPage.innerHTML = nextNumberOne + " / " + nextNumberTwo; + currentPage.innerHTML = + nextNumberOne + " / " + nextNumberTwo + " Last Page"; numberOne = nextNumberOne; numberTwo = nextNumberTwo; nextPageData(numberOne, numberTwo); - } - }); + }); + + // The button that takes you to the next page. + nextBtn.addEventListener("click", () => { + let nextNumberOne: number = numberOne + amountRecords; + let nextNumberTwo: number = numberTwo + amountRecords; + previousBtn.disabled = false; + + if ( + nextNumberOne === 999985 || + (nextNumberOne === 999989 && nextNumberTwo === 999999) + ) { + currentPage.innerHTML = ""; + currentPage.innerHTML = + nextNumberOne + " / " + nextNumberTwo + " Final Page"; + numberOne = nextNumberOne; + numberTwo = nextNumberTwo; + nextPageData(numberOne, numberTwo); + nextBtn.disabled = true; + } else { + currentPage.innerHTML = ""; + currentPage.innerHTML = nextNumberOne + " / " + nextNumberTwo; + numberOne = nextNumberOne; + numberTwo = nextNumberTwo; + nextPageData(numberOne, numberTwo); + } + }); + + // The button that takes you to the previous page. + previousBtn.addEventListener("click", () => { + let nextNumberOne: number = numberOne - amountRecords; + let nextNumberTwo: number = numberTwo - amountRecords; + nextBtn.disabled = false; + + if (nextNumberOne === 0 && nextNumberTwo === amountRecords) { + currentPage.innerHTML = ""; + currentPage.innerHTML = + nextNumberOne + " / " + nextNumberTwo + " First Page"; + numberOne = nextNumberOne; + numberTwo = nextNumberTwo; + nextPageData(numberOne, numberTwo); + previousBtn.disabled = true; + } else { + currentPage.innerHTML = ""; + currentPage.innerHTML = nextNumberOne + " / " + nextNumberTwo; + numberOne = nextNumberOne; + numberTwo = nextNumberTwo; + nextPageData(numberOne, numberTwo); + } + }); + } else { + //pass + } } function nextPageData(firstNumber: any, secondNumber: any) { @@ -230,7 +291,7 @@ function recordSelection() { recordSelectionValue === "single" ) { if (recordSelectionValue === "single") { - let multipleSingleRecordSelection = ` + let SingleRecordSelection = `
+

+ + `; selectionArea.innerHTML = ""; - selectionArea.innerHTML = multipleSingleRecordSelection; + selectionArea.innerHTML = SingleRecordSelection; let returnBtn: any = document.querySelector("#return-btn"); @@ -261,27 +325,62 @@ function recordSelection() { recordsViewed = JSON.parse(records[i])["ID"]; viewedRecords.push(recordsViewed); } - alert("Records you have viewed " + viewedRecords); - headingColumns.innerHTML = ""; - infoColumns.innerHTML = ""; - fetchData(); - createNavigation(); + if (viewedRecords.length === 0) { + headingColumns.innerHTML = ""; + infoColumns.innerHTML = ""; + fetchData(); + createNavigation(); + } else { + alert("Records you have viewed " + viewedRecords); + headingColumns.innerHTML = ""; + infoColumns.innerHTML = ""; + fetchData(); + createNavigation(); + } }); + let clearBtn: any = document.querySelector("#clear-record-btn"); + let amountOfRecords: any = document.querySelector(".amount-of-records"); + let addRecord: any = document.querySelector("#add-record-btn"); let getSingleRecord: any = document.querySelector("#get-record-btn"); - getSingleRecord.addEventListener("click", () => { - infoColumns.innerHTML = ""; - // Id input - let IdSelection: any = document.querySelector("#record-id"); + if (records.length === 0) { + getSingleRecord.disabled = true; + clearBtn.disabled = true; + } else { + } + + window.addEventListener("resize", () => { + if (window.innerHeight <= 500) { + amountOfRecords.innerHTML = records.length + " / " + "10"; + window.location.reload(); + } else if (window.innerHeight > 500) { + amountOfRecords.innerHTML = records.length + " / " + "15"; + window.location.reload(); + } else { + console.log("Nothing"); + window.location.reload(); + } + }); + + if (window.innerHeight <= 500) { + amountOfRecords.innerHTML = records.length + " / " + "10"; + } else if (window.innerHeight > 500) { + amountOfRecords.innerHTML = records.length + " / " + "15"; + } else { + console.log("Nothing"); + } - //Values Needed + addRecord.addEventListener("click", () => { + clearBtn.disabled = false; + getSingleRecord.disabled = false; + let IdSelection: any = document.querySelector("#record-id"); let IdValue = IdSelection.value; let numberCheck: number = 12 - Number(IdValue); - // Value checks - if (IdValue.length === 0) { + if (IdValue.length === 0 || IdValue < 0) { alert("You have entered an incorrect character."); + window.location.reload(); } else { if (IdValue > 999999) { alert("The record you are looking for does not exist"); @@ -291,22 +390,51 @@ function recordSelection() { } if (typeof numberCheck === "number") { + addRecord.disabled = false; + IdSelection.readonly = false; + let recordAmount: any; + + window.addEventListener("resize", () => { + if (window.innerHeight <= 500) { + recordAmount = 10; + window.location.reload(); + } else if (window.innerHeight > 500) { + recordAmount = 15; + window.location.reload(); + } else { + console.log("Nothing"); + window.location.reload(); + } + }); + + if (window.innerHeight <= 500) { + recordAmount = 10; + } else if (window.innerHeight > 500) { + recordAmount = 15; + } else { + console.log("Nothing"); + } + + clearBtn.addEventListener("click", () => { + if (records.length === 0) { + clearBtn.disabled = true; + } else { + addRecord.disabled = false; + clearBtn.disabled = true; + getSingleRecord.disabled = true; + records = []; + amountOfRecords.innerHTML = + records.length + " / " + recordAmount; + alert("Records been cleared"); + } + }); + let record = { ID: IdValue, }; let arrayRecord = JSON.stringify(record); let isInArray = records.includes(arrayRecord); - let finalSingleId: number; - let properId: any; - - if (IdValue > 999984) { - properId = IdValue; - finalSingleId = 999999; - IdValue = 999984; - } else { - finalSingleId = Number(IdValue) + 15; - } if (isInArray === false || isInArray === true) { if (isInArray === true) { @@ -316,38 +444,25 @@ function recordSelection() { //pass } - // Fetching information - fetch( - "http://localhost:2050/records?from=" + - IdValue + - "&to=" + - finalSingleId, - { - method: "GET", - headers: { "Content-Type": "application/json" }, - } - ) - .then((response) => response.text()) - .then((data) => { - let columnDataList = JSON.parse(data); - - infoColumns.innerHTML += ""; - for (let i = 0; i < columnDataList.length; i++) { - if (IdValue == 999984) { - IdValue = properId; - console.log(properId); - } else { - //pass - } - createGridSingle(columnDataList[i], IdValue); - } - }); - - records.push(arrayRecord); + console.log(records.length, recordAmount); + + if (records.length === recordAmount) { + addRecord.disabled = true; + IdSelection.readonly = true; + alert( + "Thats the maximun. To view your records click see record button." + ); + } else { + records.push(arrayRecord); + } for (let i = 0; i < records.length; i++) { JSON.parse(records[i]); } + + console.log(records); + records = records; + amountOfRecords.innerHTML = records.length + " / " + recordAmount; } else { alert("There is a problem accessing the record."); } @@ -357,6 +472,38 @@ function recordSelection() { } }); + getSingleRecord.addEventListener("click", () => { + infoColumns.innerHTML = ""; + + let recordIdValue: any; + let lastRecord: any; + + for (let i = 0; i < records.length; i++) { + recordIdValue = Number(JSON.parse(records[i])["ID"]); + lastRecord = Number(JSON.parse(records[records.length - 1])["ID"]); + + fetch( + "http://localhost:2050/records?from=" + + recordIdValue + + "&to=" + + recordIdValue, + { + method: "GET", + headers: { "Content-Type": "application/json" }, + } + ) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + infoColumns.innerHTML += ""; + for (let x = 0; x < columnDataList.length; x++) { + dynamicGrid(columnDataList[x]); + } + }); + } + console.log(lastRecord); + }); + records = records; } else if (recordSelectionValue === "multiple") { let multipleRecordSelection = ` @@ -417,15 +564,39 @@ function recordSelection() { //pass } - const totalRecordsAllowed = 15; + let totalRecordsAllowed: any; + + window.addEventListener("resize", () => { + if (window.innerHeight <= 500) { + totalRecordsAllowed = 10; + window.location.reload(); + } else if (window.innerHeight > 500) { + totalRecordsAllowed = 15; + window.location.reload(); + } else { + console.log("Nothing"); + } + }); + + if (window.innerHeight <= 500) { + totalRecordsAllowed = 10; + } else if (window.innerHeight > 500) { + totalRecordsAllowed = 15; + } else { + console.log("Nothing"); + } let toIdSelectionValue = (toIdSelection.value = - Number(fromIdValue) + 15); + Number(fromIdValue) + totalRecordsAllowed); let toIdValue = toIdSelectionValue; let recordCount: number = Number(toIdValue) - Number(fromIdValue); - if (recordCount !== 15 || fromIdValue > 999999) { + if ( + recordCount !== totalRecordsAllowed || + fromIdValue > 999999 || + fromIdSelection < 0 + ) { fromIdSelection.value = "0"; toIdSelection.value = "14"; alert("Your entered ID is not correct or does not exist"); @@ -464,26 +635,3 @@ function recordSelection() { alert("Something went wrong."); } } - -// Highlights the record you are searching for. -function createGridSingle(columnData: string, highlightedRecord: any) { - // Creates the row that the info will display and adds it to the infoColumnsArea. - let infoDataRow = `
`; - infoColumns.innerHTML += infoDataRow; - - // Gets the created rows. - let finalInfoDataRow: any = document.querySelector( - "#info-row-" + columnData[0] + ".info-rows" - ); - - // Loops through the data. - for (let x = 0; x < columnData.length; x++) { - let Div = `

${columnData[x]}

`; - finalInfoDataRow.innerHTML += Div; - } - if (highlightedRecord == columnData[0]) { - finalInfoDataRow.style.color = "red"; - } else { - //pass - } -} diff --git a/style.css b/style.css index b4b02423..3c08f7a2 100644 --- a/style.css +++ b/style.css @@ -71,7 +71,7 @@ input { justify-content: space-between; align-items: center; flex-direction: row; - height: 15vh; + height: 10vh; width: 100%; border-bottom: 1px solid black; } @@ -80,7 +80,7 @@ input { display: flex; align-items: center; justify-content: center; - font-size: 18px; + font-size: 15px; border-right: 1px solid black; height: 100%; width: 100%; @@ -91,7 +91,7 @@ input { #info-columns-container { display: flex; flex-direction: column; - height: calc(100vh - 30vh); + height: calc(100vh - 20vh); width: 100%; } @@ -100,7 +100,7 @@ input { justify-content: space-between; align-items: center; flex-direction: row; - height: 5vh; + height: 100%; width: 100%; border-bottom: 1px solid black; } @@ -111,5 +111,8 @@ input { align-items: center; width: 100%; height: 100%; + padding: 10px; + font-size: 10px; border-right: 1px solid black; } +/* */ From 27e37aba550b5b7b114de8ba4cba58c28ad2f7f7 Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Mon, 25 Apr 2022 13:49:16 +0200 Subject: [PATCH 10/30] Coding changes, screen size checks, changed how single records work. --- app.ts | 410 +++++++++++++++++++-------------------------------------- text | 4 + 2 files changed, 136 insertions(+), 278 deletions(-) create mode 100644 text diff --git a/app.ts b/app.ts index 20381a75..2d9114e5 100644 --- a/app.ts +++ b/app.ts @@ -2,6 +2,15 @@ let recordNav: any = document.querySelector("#record-navigation-container"); //Navigation area; let headingColumns: any = document.querySelector("#column-headings-container"); //Headings; let infoColumns: any = document.querySelector("#info-columns-container"); //Information; +let debounce = (func: any, delay: any) => { + let timer: any; + return function () { + clearTimeout(timer); + timer = setTimeout(() => { + func(); + }, delay); + }; +}; // Creates the navigation. function createNavigation() { @@ -9,8 +18,6 @@ function createNavigation() {
- -
- - - - + +

@@ -35,6 +33,178 @@ function createNavigation() { `; } +// The functionality to move through an amount of records. +function nextPrevious(firstId: any) { + let navigation = document.querySelector(".navigation-btns"); + + let firstPage: any = document.querySelector(".first-page-btn"); + let lastPage: any = document.querySelector(".last-page-btn"); + let nextBtn: any = document.querySelector(".next-records-btn"); + let previousBtn: any = document.querySelector(".previous-records-btn"); + + let currentPage: any = document.querySelector(".current-page"); + let finalId: any; + + if (recordNav.contains(navigation) === true) { + let resizeScreen = () => { + let amountRecord: any; + + if (finalId >= 999999) { + if (window.innerHeight > 500) { + finalId = 999999; + firstId = finalId - 14; + } else if (window.innerHeight <= 500 && window.innerHeight > 350) { + finalId = 999999; + firstId = finalId - 10; + } else if (window.innerHeight <= 350 && window.innerHeight > 170) { + finalId = 999999; + firstId = finalId - 2; + } else if (window.innerHeight <= 170) { + finalId = 999999; + firstId = finalId - 1; + } else { + //pass + } + } else { + if (window.innerHeight > 500) { + amountRecord = 14; + finalId = firstId + amountRecord; + } else if (window.innerHeight <= 500 && window.innerHeight > 350) { + amountRecord = 10; + finalId = firstId + amountRecord; + } else if (window.innerHeight <= 350 && window.innerHeight > 170) { + amountRecord = 2; + finalId = firstId + amountRecord; + } else if (window.innerHeight <= 170) { + amountRecord = 1; + finalId = firstId + amountRecord; + } else { + //pass + } + } + + if (firstId === 0) { + previousBtn.disabled = true; + nextBtn.disabled = false; + } else if (finalId === 999999) { + nextBtn.disabled = true; + previousBtn.disabled = false; + } else { + //pass + } + + // To change the id so that the page does not cause an error + if (finalId > 999999 === true) { + let recordAmount = finalId - firstId; + nextBtn.disabled = true; + finalId = 999999; + firstId = finalId - recordAmount; + + currentPage.innerHTML = + firstId + + " / " + + finalId + + " " + + (finalId - firstId + 1) + + " records only."; + + console.log(typeof firstId, typeof finalId); + + fetchDataScreenSize(firstId, finalId); + } else { + firstId = firstId; + finalId = finalId; + + console.log(firstId, finalId); + + currentPage.innerHTML = + firstId + + " / " + + finalId + + " " + + (finalId - firstId + 1) + + " records only."; + + fetchDataScreenSize(firstId, finalId); + } + }; + + resizeScreen = debounce(resizeScreen, 700); + window.addEventListener("resize", resizeScreen); + resizeScreen(); + + firstPage.addEventListener("click", () => { + previousBtn.disabled = true; + nextBtn.disabled = false; + firstId = 0; + finalId = finalId + (finalId - firstId); + + resizeScreen = debounce(resizeScreen, 700); + window.addEventListener("resize", resizeScreen); + resizeScreen(); + }); + + lastPage.addEventListener("click", () => { + previousBtn.disabled = false; + nextBtn.disabled = true; + + finalId = 999999; + + if (window.innerHeight > 500) { + firstId = finalId - 14; + } else if (window.innerHeight <= 500 && window.innerHeight > 350) { + firstId = finalId - 10; + } else if (window.innerHeight <= 350 && window.innerHeight > 170) { + firstId = finalId - 2; + } else if (window.innerHeight <= 170) { + firstId = finalId - 1; + } else { + //pass + } + + resizeScreen = debounce(resizeScreen, 700); + window.addEventListener("resize", resizeScreen); + resizeScreen(); + }); + + nextBtn.addEventListener("click", () => { + previousBtn.disabled = false; + + let amount = finalId - firstId; + + firstId = firstId + amount; + finalId = finalId + amount * count; + + resizeScreen = debounce(resizeScreen, 700); + window.addEventListener("resize", resizeScreen); + resizeScreen(); + count = 1; + }); + + previousBtn.addEventListener("click", () => { + nextBtn.disabled = false; + firstId = firstId - (finalId - firstId); + finalId = finalId - (finalId - firstId); + + if (firstId < 0) { + firstId = 0; + previousBtn.disabled = true; + } else { + //pass + } + + if (finalId === 0) { + previousBtn.disabled = true; + } else { + //pass + } + + window.addEventListener("resize", resizeScreen); + resizeScreen(); + }); + } +} + // Heading and info grid being created. function createHeadingGrid(headings: any) { let headingsData: any = `

${headings}

`; @@ -72,8 +242,12 @@ function screenSizeCheck() { let resizeScreen = () => { if (window.innerHeight > 500) { recordDiff = 14; - } else if (window.innerHeight <= 500) { + } else if (window.innerHeight <= 500 && window.innerHeight > 350) { recordDiff = 10; + } else if (window.innerHeight <= 350 && window.innerHeight > 170) { + recordDiff = 2; + } else if (window.innerHeight <= 170) { + recordDiff = 1; } toNumber = fromNumber + recordDiff; @@ -81,7 +255,7 @@ function screenSizeCheck() { fetchDataScreenSize(fromNumber, toNumber); }; - resizeScreen = debounce(resizeScreen, 500); + resizeScreen = debounce(resizeScreen, 700); window.addEventListener("resize", resizeScreen); resizeScreen(); nextPrevious(fromNumber); @@ -110,6 +284,7 @@ function fetchData() { // Adds data in the heading and info grid on a smaller screen. function fetchDataScreenSize(fromNumber: any, toNumber: any) { + console.log(typeof fromNumber, typeof toNumber); // Fetching information fetch( "http://localhost:2050/records?from=" + fromNumber + "&to=" + toNumber, @@ -130,84 +305,10 @@ function fetchDataScreenSize(fromNumber: any, toNumber: any) { fetchData(); -// The functionality to move through an amount of records. -function nextPrevious(firstId: any) { - let navigation = document.querySelector(".next-previous-navigation-btns"); - - let nextBtn: any = document.querySelector(".next-records-btn"); - let previousBtn: any = document.querySelector(".previous-records-btn"); - - let currentPage: any = document.querySelector(".current-page"); - let finalId: any; - - if (recordNav.contains(navigation) === true) { - let resizeScreen = () => { - if (window.innerHeight > 500) { - finalId = firstId + 14; - } else if (window.innerHeight <= 500) { - finalId = firstId + 10; - } - - currentPage.innerHTML = - firstId + - " / " + - finalId + - " " + - (finalId - firstId) + - " records only."; - - console.log(firstId, finalId); - - fetchDataScreenSize(firstId, finalId); - }; - - resizeScreen(); - - if (firstId === 0) { - previousBtn.disabled = true; - nextBtn.disabled = false; - } else if (firstId === 999985 || 999989) { - nextBtn.disabled = true; - previousBtn.disabled = false; - } - - nextBtn.addEventListener("click", () => { - previousBtn.disabled = false; - firstId = firstId + (finalId - firstId); - finalId = finalId + (finalId - firstId); - - resizeScreen = debounce(resizeScreen, 500); - window.addEventListener("resize", resizeScreen); - resizeScreen(); - }); - - previousBtn.addEventListener("click", () => { - nextBtn.disabled = false; - firstId = firstId + (finalId - firstId); - finalId = finalId + (finalId - firstId); - - resizeScreen = debounce(resizeScreen, 500); - window.addEventListener("resize", resizeScreen); - resizeScreen(); - }); - } else { - //pass - } -} - // Checks if you looking for a single or multiple records. function recordSelection() { let selectionArea: any = recordNav; - let recordSelector: any = document.querySelector("#record-selection"); - let recordSelectionValue: string = recordSelector.value; - let records: any = []; - - if ( - recordSelectionValue === "multiple" || - recordSelectionValue === "single" - ) { - if (recordSelectionValue === "single") { - let SingleRecordSelection = ` + let SingleRecordSelection = `
- - `; - selectionArea.innerHTML = ""; - selectionArea.innerHTML = SingleRecordSelection; - - let returnBtn: any = document.querySelector("#return-btn"); - returnBtn.addEventListener("click", () => { - let recordsViewed: any; - let viewedRecords: any = []; - for (let i = 0; i < records.length; i++) { - recordsViewed = JSON.parse(records[i])["ID"]; - viewedRecords.push(recordsViewed); - } - if (viewedRecords.length === 0) { - headingColumns.innerHTML = ""; - infoColumns.innerHTML = ""; - fetchData(); - createNavigation(); - } else { - alert("Records you have viewed " + viewedRecords); - headingColumns.innerHTML = ""; - infoColumns.innerHTML = ""; - fetchData(); - createNavigation(); + selectionArea.innerHTML = ""; + selectionArea.innerHTML = SingleRecordSelection; + + let returnBtn: any = document.querySelector("#return-btn"); + + returnBtn.addEventListener("click", () => { + headingColumns.innerHTML = ""; + infoColumns.innerHTML = ""; + fetchData(); + createNavigation(); + }); + + let getSingleRecord: any = document.querySelector("#get-record-btn"); + + getSingleRecord.addEventListener("click", () => { + let recordIdValue: any = document.querySelector( + "#record-id.navigation-input" + ); + console.log(recordIdValue.value); + + let fromNumber: number = Number(recordIdValue.value); + let toNumber: any; + let recordDiff: any; + + console.log(typeof fromNumber === "string"); + + let check = ["undefined", "string", ""]; + + if (check.includes(typeof fromNumber) || fromNumber < 0) { + alert("Does not exists"); + recordIdValue.value = "0"; + } else if (typeof fromNumber === "number" && fromNumber >= 0) { + let resizeScreen = () => { + if (window.innerHeight > 500) { + recordDiff = 14; + } else if (window.innerHeight <= 500 && window.innerHeight > 350) { + recordDiff = 10; + } else if (window.innerHeight <= 350 && window.innerHeight > 170) { + recordDiff = 2; + } else if (window.innerHeight <= 170) { + recordDiff = 1; } - }); - let clearBtn: any = document.querySelector("#clear-record-btn"); - let amountOfRecords: any = document.querySelector(".amount-of-records"); - let addRecord: any = document.querySelector("#add-record-btn"); - let getSingleRecord: any = document.querySelector("#get-record-btn"); + toNumber = fromNumber + recordDiff; - if (records.length === 0) { - getSingleRecord.disabled = true; - clearBtn.disabled = true; - } else { - } - - addRecord.addEventListener("click", () => { - clearBtn.disabled = false; - let IdSelection: any = document.querySelector("#record-id"); - let IdValue = IdSelection.value; - let numberCheck: number = 12 - Number(IdValue); + console.log(fromNumber, toNumber); - if (IdValue > 999999) { - alert("The record you are looking for does not exist"); - IdValue = 0; + if (toNumber > 999999) { + alert("This is the last page."); + fromNumber = 999999 - recordDiff; + toNumber = fromNumber + recordDiff; + console.log(fromNumber, toNumber), recordDiff; + } else if (fromNumber > 999985) { + fromNumber = 999985; + toNumber = fromNumber + recordDiff; } else { //pass } - - if (IdValue.length === 0 || IdValue < 0) { - alert("You have entered an incorrect character."); - IdValue = 0; - } - - if (typeof numberCheck === "number") { - addRecord.disabled = false; - IdSelection.readonly = false; - let recordAmount: any; - - if (window.innerHeight > 500) { - recordAmount = 15; - } else { - recordAmount = 11; - } - - clearBtn.addEventListener("click", () => { - if (records.length === 0) { - clearBtn.disabled = true; - } else { - addRecord.disabled = false; - clearBtn.disabled = true; - getSingleRecord.disabled = true; - records = []; - amountOfRecords.innerHTML = records.length + " / " + recordAmount; - alert("Records been cleared"); - } - }); - - let record = { - ID: IdValue, - }; - - let arrayRecord = JSON.stringify(record); - let isInArray = records.includes(arrayRecord); - - if (isInArray === false || isInArray === true) { - if (isInArray === true) { - let removeIndex = records.indexOf(record["ID"]); - records.splice(removeIndex); - } else { - //pass - } - - if (records.length === recordAmount) { - addRecord.disabled = true; - IdSelection.readonly = true; - getSingleRecord.disabled = false; - alert( - "Thats the maximun. To view your records click see record button." - ); - } else { - records.push(arrayRecord); - } - - for (let i = 0; i < records.length; i++) { - JSON.parse(records[i]); - } - - records = records; - amountOfRecords.innerHTML = records.length + " / " + recordAmount; - } else { - alert("Enter apropriate inputs please."); - } - } - }); - - getSingleRecord.addEventListener("click", () => { infoColumns.innerHTML = ""; + fetchDataScreenSize(fromNumber, toNumber); + }; - let recordIdValue: any; - let lastRecord: any; - - for (let i = 0; i < records.length; i++) { - recordIdValue = Number(JSON.parse(records[i])["ID"]); - lastRecord = Number(JSON.parse(records[records.length - 1])["ID"]); - - fetch( - "http://localhost:2050/records?from=" + - recordIdValue + - "&to=" + - recordIdValue, - { - method: "GET", - headers: { "Content-Type": "application/json" }, - } - ) - .then((response) => response.text()) - .then((data) => { - let columnDataList = JSON.parse(data); - infoColumns.innerHTML += ""; - for (let x = 0; x < columnDataList.length; x++) { - dynamicGrid(columnDataList[x]); - } - }); - } - console.log(lastRecord); - }); - - records = records; - } else if (recordSelectionValue === "multiple") { - let multipleRecordSelection = ` - -
- -
- - `; - selectionArea.innerHTML = ""; - selectionArea.innerHTML = multipleRecordSelection; - - let returnBtn: any = document.querySelector("#return-btn"); - returnBtn.addEventListener("click", () => { - records = []; - headingColumns.innerHTML = ""; - infoColumns.innerHTML = ""; - fetchData(); - createNavigation(); - }); - - let SubmitBtn: any = document.querySelector("#submit-btn"); - SubmitBtn.addEventListener("click", () => { - let fromIdSelection: any = document.querySelector( - "#from-record-id.navigation-input" - ); - let toIdSelection: any = document.querySelector( - "#to-record-id.navigation-input" - ); - - let fromIdValue = fromIdSelection.value; - - if (fromIdValue > 999984 && fromIdValue <= 999999) { - fromIdValue = 999984; - alert("You have reached the final page"); - } else { - //pass - } - - let totalRecordsAllowed: any; - - let toIdSelectionValue = (toIdSelection.value = - Number(fromIdValue) + totalRecordsAllowed); - let toIdValue = toIdSelectionValue; - - let recordCount: number = Number(toIdValue) - Number(fromIdValue); - - if ( - recordCount !== totalRecordsAllowed || - fromIdValue > 999999 || - fromIdSelection < 0 - ) { - fromIdSelection.value = "0"; - toIdSelection.value = "14"; - alert("Your entered ID is not correct or does not exist"); - } else { - if (totalRecordsAllowed === recordCount && fromIdValue <= 999999) { - // Fetching information - fetch( - "http://localhost:2050/records?from=" + - fromIdValue + - "&to=" + - toIdValue, - { - method: "GET", - headers: { "Content-Type": "application/json" }, - } - ) - .then((response) => response.text()) - .then((data) => { - let columnDataList = JSON.parse(data); - - infoColumns.innerHTML = ""; - for (let i = 0; i < columnDataList.length; i++) { - dynamicGrid(columnDataList[i]); - } - }); - } else { - alert("Sorry there has been a problem. Please check your inputs."); - } - } - }); + resizeScreen = debounce(resizeScreen, 700); + window.addEventListener("resize", resizeScreen); + resizeScreen(); } else { - alert("Sorry there has been a problem."); - window.location.reload(); + alert("Error"); } - } else { - alert("Something went wrong."); - } + }); } diff --git a/style.css b/style.css index 3c08f7a2..3392959a 100644 --- a/style.css +++ b/style.css @@ -3,7 +3,6 @@ padding: 0; box-sizing: border-box; font-family: sans-serif; - font-size: 12px; overflow-y: hidden; overflow-x: hidden; } @@ -19,6 +18,8 @@ body { display: flex; flex-direction: column; align-items: center; + min-height: 50vh; + min-width: 30%; height: 100vh; } /* */ @@ -38,17 +39,17 @@ input { justify-content: space-around; align-items: center; flex-direction: row; - height: 15vh; + height: 10vh; width: 100%; padding: 20px; border-bottom: 1px solid black; } /* Next and previous controls */ -.next-previous-navigation-btns { +.navigation-btns { display: flex; justify-content: space-around; - width: 40%; + width: 80%; } .current-page-container { @@ -57,14 +58,6 @@ input { } /* */ -/* Select filter method */ -.select-confirm { - display: flex; - justify-content: space-around; - width: 20%; -} -/* */ - /* Headings */ #column-headings-container { display: flex; @@ -81,6 +74,7 @@ input { align-items: center; justify-content: center; font-size: 15px; + padding: 10px; border-right: 1px solid black; height: 100%; width: 100%; @@ -91,7 +85,7 @@ input { #info-columns-container { display: flex; flex-direction: column; - height: calc(100vh - 20vh); + height: 80vh; width: 100%; } diff --git a/text b/text index 567116b6..e69de29b 100644 --- a/text +++ b/text @@ -1,4 +0,0 @@ -Debouncing - implement -Reseting - get rid -next-previous rapid clicking - one page - From 28c01275a8d538eea88d6aa260fc3b3fb2e1b928 Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Thu, 28 Apr 2022 08:16:07 +0200 Subject: [PATCH 12/30] Coding changes --- app.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/app.ts b/app.ts index fd16eeb2..dbd6055d 100644 --- a/app.ts +++ b/app.ts @@ -137,7 +137,18 @@ function nextPrevious(firstId: any) { previousBtn.disabled = true; nextBtn.disabled = false; firstId = 0; - finalId = finalId + (finalId - firstId); + + if (window.innerHeight > 500) { + finalId = firstId + 14; + } else if (window.innerHeight <= 500 && window.innerHeight > 350) { + finalId = firstId + 10; + } else if (window.innerHeight <= 350 && window.innerHeight > 170) { + finalId = firstId + 2; + } else if (window.innerHeight <= 170) { + finalId = firstId + 1; + } else { + //pass + } resizeScreen = debounce(resizeScreen, 700); window.addEventListener("resize", resizeScreen); From c0cc0ddfd92c1e1b824b339de9065ce6cfef125a Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Tue, 3 May 2022 08:47:14 +0200 Subject: [PATCH 13/30] Commit --- app.ts | 419 ++++++++++++++----------------------------------- index.html | 8 +- server/main.go | 4 +- 3 files changed, 119 insertions(+), 312 deletions(-) diff --git a/app.ts b/app.ts index dbd6055d..c6784cbd 100644 --- a/app.ts +++ b/app.ts @@ -1,23 +1,18 @@ -// Get the container from the html where the data will be stored -let recordNav: any = document.querySelector("#record-navigation-container"); //Navigation area; let headingColumns: any = document.querySelector("#column-headings-container"); //Headings; let infoColumns: any = document.querySelector("#info-columns-container"); //Information; -let count = 1; -let debounce = (func: any, delay: any) => { - let timer: any; +let debounce = (func: any, delay: number) => { + let timer: number; return function () { clearTimeout(timer); - count++; timer = setTimeout(() => { func(); - count = 1; }, delay); }; }; -// Creates the navigation. function createNavigation() { + let recordNav: any = document.querySelector("#record-navigation-container"); //Navigation area; recordNav.innerHTML = `
@@ -29,197 +24,31 @@ function createNavigation() {

- `; } -// The functionality to move through an amount of records. -function nextPrevious(firstId: any) { - let navigation = document.querySelector(".navigation-btns"); - - let firstPage: any = document.querySelector(".first-page-btn"); - let lastPage: any = document.querySelector(".last-page-btn"); - let nextBtn: any = document.querySelector(".next-records-btn"); - let previousBtn: any = document.querySelector(".previous-records-btn"); - - let currentPage: any = document.querySelector(".current-page"); - let finalId: any; - - if (recordNav.contains(navigation) === true) { - let resizeScreen = () => { - let amountRecord: any; - - if (finalId >= 999999) { - if (window.innerHeight > 500) { - finalId = 999999; - firstId = finalId - 14; - } else if (window.innerHeight <= 500 && window.innerHeight > 350) { - finalId = 999999; - firstId = finalId - 10; - } else if (window.innerHeight <= 350 && window.innerHeight > 170) { - finalId = 999999; - firstId = finalId - 2; - } else if (window.innerHeight <= 170) { - finalId = 999999; - firstId = finalId - 1; - } else { - //pass - } - } else { - if (window.innerHeight > 500) { - amountRecord = 14; - finalId = firstId + amountRecord; - } else if (window.innerHeight <= 500 && window.innerHeight > 350) { - amountRecord = 10; - finalId = firstId + amountRecord; - } else if (window.innerHeight <= 350 && window.innerHeight > 170) { - amountRecord = 2; - finalId = firstId + amountRecord; - } else if (window.innerHeight <= 170) { - amountRecord = 1; - finalId = firstId + amountRecord; - } else { - //pass - } - } - - if (firstId === 0) { - previousBtn.disabled = true; - nextBtn.disabled = false; - } else if (finalId === 999999) { - nextBtn.disabled = true; - previousBtn.disabled = false; - } else { - //pass - } - - // To change the id so that the page does not cause an error - if (finalId > 999999 === true) { - let recordAmount = finalId - firstId; - nextBtn.disabled = true; - finalId = 999999; - firstId = finalId - recordAmount; - - currentPage.innerHTML = - firstId + - " / " + - finalId + - " " + - (finalId - firstId + 1) + - " records only."; - - console.log(typeof firstId, typeof finalId); - - fetchDataScreenSize(firstId, finalId); - } else { - firstId = firstId; - finalId = finalId; - - console.log(firstId, finalId); - - currentPage.innerHTML = - firstId + - " / " + - finalId + - " " + - (finalId - firstId + 1) + - " records only."; - - fetchDataScreenSize(firstId, finalId); - } - }; - - resizeScreen = debounce(resizeScreen, 700); - window.addEventListener("resize", resizeScreen); - resizeScreen(); - - firstPage.addEventListener("click", () => { - previousBtn.disabled = true; - nextBtn.disabled = false; - firstId = 0; - - if (window.innerHeight > 500) { - finalId = firstId + 14; - } else if (window.innerHeight <= 500 && window.innerHeight > 350) { - finalId = firstId + 10; - } else if (window.innerHeight <= 350 && window.innerHeight > 170) { - finalId = firstId + 2; - } else if (window.innerHeight <= 170) { - finalId = firstId + 1; - } else { - //pass - } - - resizeScreen = debounce(resizeScreen, 700); - window.addEventListener("resize", resizeScreen); - resizeScreen(); - }); - - lastPage.addEventListener("click", () => { - previousBtn.disabled = false; - nextBtn.disabled = true; - - finalId = 999999; - - if (window.innerHeight > 500) { - firstId = finalId - 14; - } else if (window.innerHeight <= 500 && window.innerHeight > 350) { - firstId = finalId - 10; - } else if (window.innerHeight <= 350 && window.innerHeight > 170) { - firstId = finalId - 2; - } else if (window.innerHeight <= 170) { - firstId = finalId - 1; - } else { - //pass - } - - resizeScreen = debounce(resizeScreen, 700); - window.addEventListener("resize", resizeScreen); - resizeScreen(); - }); - - nextBtn.addEventListener("click", () => { - previousBtn.disabled = false; - - let amount = finalId - firstId; - - firstId = firstId + amount; - finalId = finalId + amount * count; - - resizeScreen = debounce(resizeScreen, 700); - window.addEventListener("resize", resizeScreen); - resizeScreen(); - count = 1; - }); - - previousBtn.addEventListener("click", () => { - nextBtn.disabled = false; - firstId = firstId - (finalId - firstId); - finalId = finalId - (finalId - firstId); +function createHeadingGrid(headings: any) { + let headingsData: any = `

${headings}

`; + headingColumns.innerHTML += headingsData; +} - if (firstId < 0) { - firstId = 0; - previousBtn.disabled = true; - } else { - //pass - } +function headingRowCreation() { + fetch("http://localhost:2050/columns", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((response) => response.text()) + .then((data) => { + let headingDataList = JSON.parse(data); + let headings: string; - if (finalId === 0) { - previousBtn.disabled = true; - } else { - //pass + for (let i = 0; i < headingDataList.length; i++) { + headings = headingDataList[i]; + createHeadingGrid(headings); } - - window.addEventListener("resize", resizeScreen); - resizeScreen(); + dataRowCreation(0); }); - } -} - -// Heading and info grid being created. -function createHeadingGrid(headings: any) { - let headingsData: any = `

${headings}

`; - headingColumns.innerHTML += headingsData; + createNavigation(); } function dynamicGrid(columnData: any) { @@ -227,9 +56,7 @@ function dynamicGrid(columnData: any) { let infoDataRow = `
`; infoColumns.innerHTML += infoDataRow; // Gets the created rows. - let finalInfoDataRow: any = document.querySelector( - "#info-row-" + columnData[0] + ".info-rows" - ); + let finalInfoDataRow: any = document.querySelector("#info-row-" + columnData[0] + ".info-rows"); // Loops through for (let x = 0; x < columnData.length; x++) { @@ -238,87 +65,112 @@ function dynamicGrid(columnData: any) { } } -function screenSizeCheck() { - let fromNumber: any; - let toNumber: any; - let recordDiff: any; +let nextPrevious = (fromNumber: number) => { + let numberOfRows = Math.floor(window.innerHeight / 50); + let count: number = 0; - if (typeof fromNumber && typeof toNumber === "undefined") { - fromNumber = 0; - } else if (typeof fromNumber === "number" && fromNumber !== 0) { - console.log(fromNumber); - //pass + let nextBtn: any = document.querySelector(".next-records-btn"); + let nextPage = () => { + fromNumber = fromNumber + numberOfRows * count; + dataRowCreation(fromNumber); + count = 0; + }; + + nextPage = debounce(nextPage, 500); + nextBtn.addEventListener("click", () => { + count++; + nextPage(); + }); + + let previousBtn: any = document.querySelector(".previous-records-btn"); + let previousPage = () => { + fromNumber = fromNumber - numberOfRows * count; + dataRowCreation(fromNumber); + count = 0; + }; + + previousPage = debounce(previousPage, 500); + previousBtn.addEventListener("click", () => { + count++; + previousPage(); + }); + + if (fromNumber === 0) { + previousBtn.disabled = true; + } else { + previousBtn.disabled = false; } - let resizeScreen = () => { - if (window.innerHeight > 500) { - recordDiff = 14; - } else if (window.innerHeight <= 500 && window.innerHeight > 350) { - recordDiff = 10; - } else if (window.innerHeight <= 350 && window.innerHeight > 170) { - recordDiff = 2; - } else if (window.innerHeight <= 170) { - recordDiff = 1; - } + let firstBtn: any = document.querySelector(".first-page-btn"); + let firstPage = () => { + fromNumber = 0; + dataRowCreation(fromNumber); + }; - toNumber = fromNumber + recordDiff; + firstPage = debounce(firstPage, 500); + firstBtn.addEventListener("click", () => { + firstPage(); + }); - fetchDataScreenSize(fromNumber, toNumber); + let lastBtn: any = document.querySelector(".last-page-btn"); + let lastPage = () => { + let toNumber = 999999; + fromNumber = toNumber - numberOfRows; + dataRowCreation(fromNumber); }; - resizeScreen = debounce(resizeScreen, 700); - window.addEventListener("resize", resizeScreen); - resizeScreen(); - nextPrevious(fromNumber); -} + lastPage = debounce(lastPage, 500); + lastBtn.addEventListener("click", () => { + lastPage(); + }); +}; -// Adds data in the heading and info grid. -function fetchData() { - // Gets headings array - fetch("http://localhost:2050/columns", { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((response) => response.text()) - .then((data) => { - let headingDataList = JSON.parse(data); - let headings: string; +function dataRowCreation(fromNumber: number) { + let toNumber: number; - for (let i = 0; i < headingDataList.length; i++) { - headings = headingDataList[i]; - createHeadingGrid(headings); - } - screenSizeCheck(); - }); - createNavigation(); -} + let resizeScreen = () => { + let numberOfRows = Math.floor(window.innerHeight / 50); + toNumber = fromNumber + numberOfRows; + + if (toNumber >= 999999) { + let nextBtn: any = document.querySelector(".next-records-btn"); + let lastBtn: any = document.querySelector(".last-page-btn"); + + toNumber = 999999; + fromNumber = toNumber - numberOfRows; -// Adds data in the heading and info grid on a smaller screen. -function fetchDataScreenSize(fromNumber: any, toNumber: any) { - console.log(typeof fromNumber, typeof toNumber); - // Fetching information - fetch( - "http://localhost:2050/records?from=" + fromNumber + "&to=" + toNumber, - { + nextBtn.disabled = true; + lastBtn.disabled = false; + } + + fetch("http://localhost:2050/records?from=" + fromNumber + "&to=" + toNumber, { method: "GET", headers: { "Content-Type": "application/json" }, - } - ) - .then((response) => response.text()) - .then((data) => { - let columnDataList = JSON.parse(data); - infoColumns.innerHTML = ""; - for (let i = 0; i < columnDataList.length; i++) { - dynamicGrid(columnDataList[i]); - } - }); + }) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + infoColumns.innerHTML = ""; + for (let i = 0; i < columnDataList.length; i++) { + dynamicGrid(columnDataList[i]); + } + }); + + let currentPage: any = document.querySelector(".current-page"); + currentPage.innerHTML = ""; + currentPage.innerHTML = currentPage.innerHTML = fromNumber + " / " + toNumber + " " + (Number(numberOfRows) + 1) + " records only."; + }; + + resizeScreen = debounce(resizeScreen, 500); + window.addEventListener("resize", resizeScreen); + resizeScreen(); + nextPrevious(fromNumber); } -fetchData(); +headingRowCreation(); -// Checks if you looking for a single or multiple records. function recordSelection() { - let selectionArea: any = recordNav; + let selectionArea: any = document.querySelector("#record-navigation-container"); let SingleRecordSelection = `
@@ -350,63 +202,22 @@ function recordSelection() { returnBtn.addEventListener("click", () => { headingColumns.innerHTML = ""; infoColumns.innerHTML = ""; - fetchData(); + headingRowCreation(); createNavigation(); }); let getSingleRecord: any = document.querySelector("#get-record-btn"); getSingleRecord.addEventListener("click", () => { - let recordIdValue: any = document.querySelector( - "#record-id.navigation-input" - ); - console.log(recordIdValue.value); - + let recordIdValue: any = document.querySelector("#record-id.navigation-input"); let fromNumber: number = Number(recordIdValue.value); - let toNumber: any; - let recordDiff: any; - - console.log(typeof fromNumber === "string"); - let check = ["undefined", "string", ""]; if (check.includes(typeof fromNumber) || fromNumber < 0) { alert("Does not exists"); recordIdValue.value = "0"; } else if (typeof fromNumber === "number" && fromNumber >= 0) { - let resizeScreen = () => { - if (window.innerHeight > 500) { - recordDiff = 14; - } else if (window.innerHeight <= 500 && window.innerHeight > 350) { - recordDiff = 10; - } else if (window.innerHeight <= 350 && window.innerHeight > 170) { - recordDiff = 2; - } else if (window.innerHeight <= 170) { - recordDiff = 1; - } - - toNumber = fromNumber + recordDiff; - - console.log(fromNumber, toNumber); - - if (toNumber > 999999) { - alert("This is the last page."); - fromNumber = 999999 - recordDiff; - toNumber = fromNumber + recordDiff; - console.log(fromNumber, toNumber), recordDiff; - } else if (fromNumber > 999985) { - fromNumber = 999985; - toNumber = fromNumber + recordDiff; - } else { - //pass - } - infoColumns.innerHTML = ""; - fetchDataScreenSize(fromNumber, toNumber); - }; - - resizeScreen = debounce(resizeScreen, 700); - window.addEventListener("resize", resizeScreen); - resizeScreen(); + dataRowCreation(fromNumber); } else { alert("Error"); } diff --git a/index.html b/index.html index e79d8cd2..a1e80426 100644 --- a/index.html +++ b/index.html @@ -2,17 +2,13 @@ JS Onboard Project - + +
- diff --git a/server/main.go b/server/main.go index f4ce292a..a8133ed0 100644 --- a/server/main.go +++ b/server/main.go @@ -13,11 +13,11 @@ import ( "time" ) -var columns = [13]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"} const recordCount = 1000000 -const columnCount = len(columns); +const columnCount = 11 const delayResponse = 500 * time.Millisecond +var columns = [columnCount]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"} var letters = []rune("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ") func main() { From 0a5e24a366a2926bd44e9c3044bfe92148d57173 Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Tue, 3 May 2022 09:02:11 +0200 Subject: [PATCH 14/30] try catch --- app.ts | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/app.ts b/app.ts index c6784cbd..754d4708 100644 --- a/app.ts +++ b/app.ts @@ -11,6 +11,14 @@ let debounce = (func: any, delay: number) => { }; }; +let tryCatch = (func: any) => { + try { + func; + } catch (error) { + console.log(error); + } +}; + function createNavigation() { let recordNav: any = document.querySelector("#record-navigation-container"); //Navigation area; recordNav.innerHTML = ` @@ -72,7 +80,7 @@ let nextPrevious = (fromNumber: number) => { let nextBtn: any = document.querySelector(".next-records-btn"); let nextPage = () => { fromNumber = fromNumber + numberOfRows * count; - dataRowCreation(fromNumber); + tryCatch(dataRowCreation(fromNumber)); count = 0; }; @@ -85,7 +93,7 @@ let nextPrevious = (fromNumber: number) => { let previousBtn: any = document.querySelector(".previous-records-btn"); let previousPage = () => { fromNumber = fromNumber - numberOfRows * count; - dataRowCreation(fromNumber); + tryCatch(dataRowCreation(fromNumber)); count = 0; }; @@ -104,7 +112,7 @@ let nextPrevious = (fromNumber: number) => { let firstBtn: any = document.querySelector(".first-page-btn"); let firstPage = () => { fromNumber = 0; - dataRowCreation(fromNumber); + tryCatch(dataRowCreation(fromNumber)); }; firstPage = debounce(firstPage, 500); @@ -116,7 +124,7 @@ let nextPrevious = (fromNumber: number) => { let lastPage = () => { let toNumber = 999999; fromNumber = toNumber - numberOfRows; - dataRowCreation(fromNumber); + tryCatch(dataRowCreation(fromNumber)); }; lastPage = debounce(lastPage, 500); @@ -129,18 +137,18 @@ function dataRowCreation(fromNumber: number) { let toNumber: number; let resizeScreen = () => { + let nextBtn: any = document.querySelector(".next-records-btn"); + nextBtn.disabled = false; let numberOfRows = Math.floor(window.innerHeight / 50); toNumber = fromNumber + numberOfRows; if (toNumber >= 999999) { let nextBtn: any = document.querySelector(".next-records-btn"); - let lastBtn: any = document.querySelector(".last-page-btn"); toNumber = 999999; fromNumber = toNumber - numberOfRows; nextBtn.disabled = true; - lastBtn.disabled = false; } fetch("http://localhost:2050/records?from=" + fromNumber + "&to=" + toNumber, { @@ -163,8 +171,8 @@ function dataRowCreation(fromNumber: number) { resizeScreen = debounce(resizeScreen, 500); window.addEventListener("resize", resizeScreen); - resizeScreen(); - nextPrevious(fromNumber); + tryCatch(resizeScreen()); + tryCatch(nextPrevious(fromNumber)); } headingRowCreation(); From 22ac1469ab875095cc95ca53137f39ef2c00a0d9 Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Tue, 3 May 2022 12:43:21 +0200 Subject: [PATCH 15/30] Recent Changes --- app.ts | 243 ++++++++++++++++++++++++------------------------- server/main.go | 1 - 2 files changed, 119 insertions(+), 125 deletions(-) diff --git a/app.ts b/app.ts index 754d4708..8626850a 100644 --- a/app.ts +++ b/app.ts @@ -1,5 +1,5 @@ -let headingColumns: any = document.querySelector("#column-headings-container"); //Headings; -let infoColumns: any = document.querySelector("#info-columns-container"); //Information; +let headingColumns: any = document.querySelector("#column-headings-container"); // Headings +let infoColumns: any = document.querySelector("#info-columns-container"); // Information let debounce = (func: any, delay: number) => { let timer: number; return function () { @@ -11,15 +11,7 @@ let debounce = (func: any, delay: number) => { }; }; -let tryCatch = (func: any) => { - try { - func; - } catch (error) { - console.log(error); - } -}; - -function createNavigation() { +let createNavigation = () => { let recordNav: any = document.querySelector("#record-navigation-container"); //Navigation area; recordNav.innerHTML = `
@@ -33,73 +25,95 @@ function createNavigation() {

`; -} +}; -function createHeadingGrid(headings: any) { - let headingsData: any = `

${headings}

`; - headingColumns.innerHTML += headingsData; -} +function recordSelection() { + let selectionArea: any = document.querySelector("#record-navigation-container"); + let singleRecordSelection = ` + +
+ +

+
+ + `; -function headingRowCreation() { - fetch("http://localhost:2050/columns", { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((response) => response.text()) - .then((data) => { - let headingDataList = JSON.parse(data); - let headings: string; + selectionArea.innerHTML = ""; + selectionArea.innerHTML = singleRecordSelection; - for (let i = 0; i < headingDataList.length; i++) { - headings = headingDataList[i]; - createHeadingGrid(headings); - } - dataRowCreation(0); - }); - createNavigation(); -} + let returnBtn: any = document.querySelector("#return-btn"); -function dynamicGrid(columnData: any) { - // Creates the row that the info will display and adds it to the infoColumnsArea. - let infoDataRow = `
`; - infoColumns.innerHTML += infoDataRow; - // Gets the created rows. - let finalInfoDataRow: any = document.querySelector("#info-row-" + columnData[0] + ".info-rows"); + returnBtn.addEventListener("click", () => { + headingColumns.innerHTML = ""; + infoColumns.innerHTML = ""; + headingRowCreation(); + createNavigation(); + }); - // Loops through - for (let x = 0; x < columnData.length; x++) { - let infoData = `

${columnData[x]}

`; - finalInfoDataRow.innerHTML += infoData; - } + let getSingleRecord: any = document.querySelector("#get-record-btn"); + + getSingleRecord.addEventListener("click", () => { + let recordIdValue: any = document.querySelector("#record-id.navigation-input"); + let fromNumber: number = Number(recordIdValue.value); + let check = ["undefined", "string", ""]; + + if (check.includes(typeof fromNumber) || fromNumber < 0) { + alert("Does not exists"); + recordIdValue.value = "0"; + } else if (typeof fromNumber === "number" && fromNumber >= 0) { + dataRowCreation(fromNumber); + } else { + alert("Error"); + } + }); } -let nextPrevious = (fromNumber: number) => { - let numberOfRows = Math.floor(window.innerHeight / 50); +let pageNavigation = (fromNumber: number, numberOfRows: number) => { let count: number = 0; let nextBtn: any = document.querySelector(".next-records-btn"); let nextPage = () => { fromNumber = fromNumber + numberOfRows * count; - tryCatch(dataRowCreation(fromNumber)); + dataRowCreation(fromNumber); count = 0; }; - nextPage = debounce(nextPage, 500); + if (fromNumber + numberOfRows === 999999) { + nextBtn.disabled = true; + } else { + nextBtn.disabled = false; + } + nextBtn.addEventListener("click", () => { count++; + nextPage = debounce(nextPage, 500); nextPage(); }); let previousBtn: any = document.querySelector(".previous-records-btn"); let previousPage = () => { fromNumber = fromNumber - numberOfRows * count; - tryCatch(dataRowCreation(fromNumber)); + dataRowCreation(fromNumber); count = 0; }; - previousPage = debounce(previousPage, 500); previousBtn.addEventListener("click", () => { count++; + previousPage = debounce(previousPage, 500); previousPage(); }); @@ -112,11 +126,11 @@ let nextPrevious = (fromNumber: number) => { let firstBtn: any = document.querySelector(".first-page-btn"); let firstPage = () => { fromNumber = 0; - tryCatch(dataRowCreation(fromNumber)); + dataRowCreation(fromNumber); }; - firstPage = debounce(firstPage, 500); firstBtn.addEventListener("click", () => { + firstPage = debounce(firstPage, 500); firstPage(); }); @@ -124,32 +138,67 @@ let nextPrevious = (fromNumber: number) => { let lastPage = () => { let toNumber = 999999; fromNumber = toNumber - numberOfRows; - tryCatch(dataRowCreation(fromNumber)); + dataRowCreation(fromNumber); }; - lastPage = debounce(lastPage, 500); lastBtn.addEventListener("click", () => { + lastPage = debounce(lastPage, 500); lastPage(); }); }; +function createHeadingGrid(headings: any) { + let headingsData: any = `

${headings}

`; + headingColumns.innerHTML += headingsData; +} + +let headingRowCreation = () => { + fetch("http://localhost:2050/columns", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((response) => response.text()) + .then((data) => { + let headingDataList = JSON.parse(data); + let headings: string; + + for (let i = 0; i < headingDataList.length; i++) { + headings = headingDataList[i]; + createHeadingGrid(headings); + } + dataRowCreation(0); + }) + .catch((error) => { + console.log(error); + }); + createNavigation(); +}; + +function dynamicGrid(columnData: any) { + // Creates the row that the info will display and adds it to the infoColumnsArea. + let infoDataRow = `
`; + infoColumns.innerHTML += infoDataRow; + // Gets the created rows. + let finalInfoDataRow: any = document.querySelector("#info-row-" + columnData[0] + ".info-rows"); + + // Loops through + for (let x = 0; x < columnData.length; x++) { + let infoData = `

${columnData[x]}

`; + finalInfoDataRow.innerHTML += infoData; + } +} + function dataRowCreation(fromNumber: number) { let toNumber: number; - let resizeScreen = () => { + let resizeScreenData = () => { let nextBtn: any = document.querySelector(".next-records-btn"); nextBtn.disabled = false; + let numberOfRows = Math.floor(window.innerHeight / 50); toNumber = fromNumber + numberOfRows; - if (toNumber >= 999999) { - let nextBtn: any = document.querySelector(".next-records-btn"); - - toNumber = 999999; - fromNumber = toNumber - numberOfRows; - - nextBtn.disabled = true; - } + pageNavigation(fromNumber, numberOfRows); fetch("http://localhost:2050/records?from=" + fromNumber + "&to=" + toNumber, { method: "GET", @@ -162,72 +211,18 @@ function dataRowCreation(fromNumber: number) { for (let i = 0; i < columnDataList.length; i++) { dynamicGrid(columnDataList[i]); } + }) + .catch((error) => { + console.log(error); }); let currentPage: any = document.querySelector(".current-page"); - currentPage.innerHTML = ""; - currentPage.innerHTML = currentPage.innerHTML = fromNumber + " / " + toNumber + " " + (Number(numberOfRows) + 1) + " records only."; + currentPage.innerHTML = currentPage.innerHTML = `${fromNumber} / ${toNumber} ${Number(numberOfRows) + 1} records only.`; }; - resizeScreen = debounce(resizeScreen, 500); - window.addEventListener("resize", resizeScreen); - tryCatch(resizeScreen()); - tryCatch(nextPrevious(fromNumber)); + resizeScreenData = debounce(resizeScreenData, 500); + window.addEventListener("resize", resizeScreenData); + resizeScreenData(); } headingRowCreation(); - -function recordSelection() { - let selectionArea: any = document.querySelector("#record-navigation-container"); - let SingleRecordSelection = ` - -
- -

-
- - `; - - selectionArea.innerHTML = ""; - selectionArea.innerHTML = SingleRecordSelection; - - let returnBtn: any = document.querySelector("#return-btn"); - - returnBtn.addEventListener("click", () => { - headingColumns.innerHTML = ""; - infoColumns.innerHTML = ""; - headingRowCreation(); - createNavigation(); - }); - - let getSingleRecord: any = document.querySelector("#get-record-btn"); - - getSingleRecord.addEventListener("click", () => { - let recordIdValue: any = document.querySelector("#record-id.navigation-input"); - let fromNumber: number = Number(recordIdValue.value); - let check = ["undefined", "string", ""]; - - if (check.includes(typeof fromNumber) || fromNumber < 0) { - alert("Does not exists"); - recordIdValue.value = "0"; - } else if (typeof fromNumber === "number" && fromNumber >= 0) { - dataRowCreation(fromNumber); - } else { - alert("Error"); - } - }); -} diff --git a/server/main.go b/server/main.go index a8133ed0..7f3dd03b 100644 --- a/server/main.go +++ b/server/main.go @@ -12,7 +12,6 @@ import ( "strconv" "time" ) - const recordCount = 1000000 const columnCount = 11 const delayResponse = 500 * time.Millisecond From d868815e8574f78cb10586f047dc54f8a9b79d39 Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Wed, 4 May 2022 08:25:48 +0200 Subject: [PATCH 16/30] Recent fixes --- app.ts | 121 +++++++++++++++++++++++++++++++-------------------------- 1 file changed, 66 insertions(+), 55 deletions(-) diff --git a/app.ts b/app.ts index 8626850a..7ea49d51 100644 --- a/app.ts +++ b/app.ts @@ -15,10 +15,10 @@ let createNavigation = () => { let recordNav: any = document.querySelector("#record-navigation-container"); //Navigation area; recordNav.innerHTML = `
- - - - + + + +
@@ -84,66 +84,61 @@ function recordSelection() { let pageNavigation = (fromNumber: number, numberOfRows: number) => { let count: number = 0; + let value: string; let nextBtn: any = document.querySelector(".next-records-btn"); - let nextPage = () => { - fromNumber = fromNumber + numberOfRows * count; - dataRowCreation(fromNumber); - count = 0; - }; + let previousBtn: any = document.querySelector(".previous-records-btn"); + let firstPageBtn: any = document.querySelector(".first-page-btn"); + let lastPageBtn: any = document.querySelector(".last-page-btn"); if (fromNumber + numberOfRows === 999999) { nextBtn.disabled = true; - } else { + previousBtn.disabled = false; + } else if (fromNumber === 0) { nextBtn.disabled = false; + previousBtn.disabled = true; } + let navigation = () => { + console.log(value); + + if (value === "next") { + fromNumber = fromNumber + numberOfRows * count; + } else if (value === "previous") { + fromNumber = fromNumber - numberOfRows * count; + } else if (value === "first") { + fromNumber = 0; + } else if (value === "last") { + let toNumber = 999999; + fromNumber = toNumber - numberOfRows; + console.log(fromNumber, numberOfRows); + } + + dataRowCreation(fromNumber), 500; + }; + + navigation = debounce(navigation, 1000); + nextBtn.addEventListener("click", () => { count++; - nextPage = debounce(nextPage, 500); - nextPage(); + value = nextBtn.value; + navigation(); }); - let previousBtn: any = document.querySelector(".previous-records-btn"); - let previousPage = () => { - fromNumber = fromNumber - numberOfRows * count; - dataRowCreation(fromNumber); - count = 0; - }; - previousBtn.addEventListener("click", () => { count++; - previousPage = debounce(previousPage, 500); - previousPage(); + value = previousBtn.value; + navigation(); }); - if (fromNumber === 0) { - previousBtn.disabled = true; - } else { - previousBtn.disabled = false; - } - - let firstBtn: any = document.querySelector(".first-page-btn"); - let firstPage = () => { - fromNumber = 0; - dataRowCreation(fromNumber); - }; - - firstBtn.addEventListener("click", () => { - firstPage = debounce(firstPage, 500); - firstPage(); + firstPageBtn.addEventListener("click", () => { + value = firstPageBtn.value; + navigation(); }); - let lastBtn: any = document.querySelector(".last-page-btn"); - let lastPage = () => { - let toNumber = 999999; - fromNumber = toNumber - numberOfRows; - dataRowCreation(fromNumber); - }; - - lastBtn.addEventListener("click", () => { - lastPage = debounce(lastPage, 500); - lastPage(); + lastPageBtn.addEventListener("click", () => { + value = lastPageBtn.value; + navigation(); }); }; @@ -192,13 +187,32 @@ function dataRowCreation(fromNumber: number) { let toNumber: number; let resizeScreenData = () => { - let nextBtn: any = document.querySelector(".next-records-btn"); - nextBtn.disabled = false; - - let numberOfRows = Math.floor(window.innerHeight / 50); - toNumber = fromNumber + numberOfRows; + let selectionArea: any = document.querySelector("#record-navigation-container"); + + if (selectionArea.contains(document.querySelector(".navigation-btns"))) { + let nextBtn: any = document.querySelector(".next-records-btn"); + let previousBtn: any = document.querySelector(".previous-records-btn"); + let numberOfRows = Math.floor(window.innerHeight / 50); + + nextBtn.disabled = false; + previousBtn.disabled = false; + + if (fromNumber + numberOfRows > 999999) { + let toNumber = 999999; + fromNumber = toNumber - numberOfRows; + nextBtn.disabled = true; + previousBtn.disabled = false; + } else if (fromNumber < 0) { + nextBtn.disabled = false; + previousBtn.disabled = true; + fromNumber = 0; + } + toNumber = fromNumber + numberOfRows; - pageNavigation(fromNumber, numberOfRows); + pageNavigation(fromNumber, numberOfRows); + let currentPage: any = document.querySelector(".current-page"); + currentPage.innerHTML = currentPage.innerHTML = `${fromNumber} / ${toNumber} ${Number(numberOfRows) + 1} records only.`; + } fetch("http://localhost:2050/records?from=" + fromNumber + "&to=" + toNumber, { method: "GET", @@ -215,9 +229,6 @@ function dataRowCreation(fromNumber: number) { .catch((error) => { console.log(error); }); - - let currentPage: any = document.querySelector(".current-page"); - currentPage.innerHTML = currentPage.innerHTML = `${fromNumber} / ${toNumber} ${Number(numberOfRows) + 1} records only.`; }; resizeScreenData = debounce(resizeScreenData, 500); From a25fa908264cc3506a732f45a11d40282568afe5 Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Wed, 4 May 2022 08:35:47 +0200 Subject: [PATCH 17/30] Whitespace server/main.go --- server/main.go | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/server/main.go b/server/main.go index 7f3dd03b..0782475b 100644 --- a/server/main.go +++ b/server/main.go @@ -13,9 +13,8 @@ import ( "time" ) const recordCount = 1000000 -const columnCount = 11 +const columnCount = 11 const delayResponse = 500 * time.Millisecond - var columns = [columnCount]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"} var letters = []rune("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ") From ed88ede1dca15c1fa40b71c9f7b1b7dda46b1666 Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Wed, 4 May 2022 15:13:22 +0200 Subject: [PATCH 18/30] Recent Fixes --- app.ts | 248 +++++++++++++++++++++++++++++++-------------------------- 1 file changed, 135 insertions(+), 113 deletions(-) diff --git a/app.ts b/app.ts index 7ea49d51..3f8e0339 100644 --- a/app.ts +++ b/app.ts @@ -1,18 +1,25 @@ let headingColumns: any = document.querySelector("#column-headings-container"); // Headings let infoColumns: any = document.querySelector("#info-columns-container"); // Information +let fromNumber: number = 0; +let count: number = 0; +let timeout: number = 0; + +window.onload = () => { + fromNumber = 0; +}; + let debounce = (func: any, delay: number) => { - let timer: number; return function () { - clearTimeout(timer); + clearTimeout(timeout); - timer = setTimeout(() => { + timeout = setTimeout(() => { func(); }, delay); }; }; let createNavigation = () => { - let recordNav: any = document.querySelector("#record-navigation-container"); //Navigation area; + let recordNav: any = document.querySelector("#record-navigation-container"); // Navigation area recordNav.innerHTML = `
@@ -56,92 +63,33 @@ function recordSelection() { selectionArea.innerHTML = singleRecordSelection; let returnBtn: any = document.querySelector("#return-btn"); + let recordIdValue: any = document.querySelector("#record-id.navigation-input"); + let numberOfRows = Math.floor(window.innerHeight / 50); returnBtn.addEventListener("click", () => { - headingColumns.innerHTML = ""; - infoColumns.innerHTML = ""; - headingRowCreation(); createNavigation(); + let currentPage: any = document.querySelector(".current-page"); + currentPage.innerHTML = `${fromNumber} / ${fromNumber + numberOfRows}.`; }); let getSingleRecord: any = document.querySelector("#get-record-btn"); getSingleRecord.addEventListener("click", () => { - let recordIdValue: any = document.querySelector("#record-id.navigation-input"); - let fromNumber: number = Number(recordIdValue.value); + fromNumber = Number(recordIdValue.value); + let toNumber = fromNumber + numberOfRows; let check = ["undefined", "string", ""]; if (check.includes(typeof fromNumber) || fromNumber < 0) { alert("Does not exists"); recordIdValue.value = "0"; } else if (typeof fromNumber === "number" && fromNumber >= 0) { - dataRowCreation(fromNumber); + getRecords(fromNumber, toNumber); } else { alert("Error"); } }); } -let pageNavigation = (fromNumber: number, numberOfRows: number) => { - let count: number = 0; - let value: string; - - let nextBtn: any = document.querySelector(".next-records-btn"); - let previousBtn: any = document.querySelector(".previous-records-btn"); - let firstPageBtn: any = document.querySelector(".first-page-btn"); - let lastPageBtn: any = document.querySelector(".last-page-btn"); - - if (fromNumber + numberOfRows === 999999) { - nextBtn.disabled = true; - previousBtn.disabled = false; - } else if (fromNumber === 0) { - nextBtn.disabled = false; - previousBtn.disabled = true; - } - - let navigation = () => { - console.log(value); - - if (value === "next") { - fromNumber = fromNumber + numberOfRows * count; - } else if (value === "previous") { - fromNumber = fromNumber - numberOfRows * count; - } else if (value === "first") { - fromNumber = 0; - } else if (value === "last") { - let toNumber = 999999; - fromNumber = toNumber - numberOfRows; - console.log(fromNumber, numberOfRows); - } - - dataRowCreation(fromNumber), 500; - }; - - navigation = debounce(navigation, 1000); - - nextBtn.addEventListener("click", () => { - count++; - value = nextBtn.value; - navigation(); - }); - - previousBtn.addEventListener("click", () => { - count++; - value = previousBtn.value; - navigation(); - }); - - firstPageBtn.addEventListener("click", () => { - value = firstPageBtn.value; - navigation(); - }); - - lastPageBtn.addEventListener("click", () => { - value = lastPageBtn.value; - navigation(); - }); -}; - function createHeadingGrid(headings: any) { let headingsData: any = `

${headings}

`; headingColumns.innerHTML += headingsData; @@ -161,12 +109,11 @@ let headingRowCreation = () => { headings = headingDataList[i]; createHeadingGrid(headings); } - dataRowCreation(0); + resizeScreenData(); }) .catch((error) => { console.log(error); }); - createNavigation(); }; function dynamicGrid(columnData: any) { @@ -183,57 +130,132 @@ function dynamicGrid(columnData: any) { } } -function dataRowCreation(fromNumber: number) { +let resizeScreenData = () => { let toNumber: number; + let selectionArea: any = document.querySelector("#record-navigation-container"); - let resizeScreenData = () => { - let selectionArea: any = document.querySelector("#record-navigation-container"); + if (selectionArea.contains(document.querySelector(".navigation-btns"))) { + let numberOfRows = Math.floor(window.innerHeight / 50); - if (selectionArea.contains(document.querySelector(".navigation-btns"))) { - let nextBtn: any = document.querySelector(".next-records-btn"); - let previousBtn: any = document.querySelector(".previous-records-btn"); - let numberOfRows = Math.floor(window.innerHeight / 50); + nextBtn.disabled = false; + previousBtn.disabled = false; - nextBtn.disabled = false; + if (fromNumber + numberOfRows >= 999999) { + let toNumber = 999999; + fromNumber = toNumber - numberOfRows; + nextBtn.disabled = true; previousBtn.disabled = false; + } else if (fromNumber <= 0) { + nextBtn.disabled = false; + previousBtn.disabled = true; + fromNumber = 0; + } - if (fromNumber + numberOfRows > 999999) { - let toNumber = 999999; - fromNumber = toNumber - numberOfRows; - nextBtn.disabled = true; - previousBtn.disabled = false; - } else if (fromNumber < 0) { - nextBtn.disabled = false; - previousBtn.disabled = true; - fromNumber = 0; + toNumber = fromNumber + numberOfRows; + + getRecords(fromNumber, toNumber); + } +}; + +function getRecords(fromNumber: number, toNumber: number) { + fetch("http://localhost:2050/records?from=" + fromNumber + "&to=" + toNumber, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((response) => response.text()) + .then((data) => { + let columnDataList = JSON.parse(data); + infoColumns.innerHTML = ""; + for (let i = 0; i < columnDataList.length; i++) { + dynamicGrid(columnDataList[i]); } - toNumber = fromNumber + numberOfRows; - pageNavigation(fromNumber, numberOfRows); let currentPage: any = document.querySelector(".current-page"); - currentPage.innerHTML = currentPage.innerHTML = `${fromNumber} / ${toNumber} ${Number(numberOfRows) + 1} records only.`; - } - - fetch("http://localhost:2050/records?from=" + fromNumber + "&to=" + toNumber, { - method: "GET", - headers: { "Content-Type": "application/json" }, + currentPage.innerHTML = `${fromNumber} / ${toNumber}.`; }) - .then((response) => response.text()) - .then((data) => { - let columnDataList = JSON.parse(data); - infoColumns.innerHTML = ""; - for (let i = 0; i < columnDataList.length; i++) { - dynamicGrid(columnDataList[i]); - } - }) - .catch((error) => { - console.log(error); - }); - }; - - resizeScreenData = debounce(resizeScreenData, 500); - window.addEventListener("resize", resizeScreenData); - resizeScreenData(); + .catch((error) => { + console.log(error); + }); } +resizeScreenData = debounce(resizeScreenData, 100); +window.addEventListener("resize", resizeScreenData); +createNavigation(); headingRowCreation(); + +let nextBtn: any = document.querySelector(".next-records-btn"); +let previousBtn: any = document.querySelector(".previous-records-btn"); +let firstPageBtn: any = document.querySelector(".first-page-btn"); +let lastPageBtn: any = document.querySelector(".last-page-btn"); + +let nextPage = () => { + let numberOfRows = Math.floor(window.innerHeight / 50); + fromNumber = fromNumber + numberOfRows * count; + let toNumber = fromNumber + numberOfRows; + + if (toNumber >= 999999) { + toNumber = 999999; + fromNumber = toNumber - numberOfRows; + nextBtn.disabled = true; + previousBtn.disabled = false; + } + + getRecords(fromNumber, toNumber); + count = 0; +}; + +nextBtn.addEventListener("click", () => { + count++; + nextPage = debounce(nextPage, 100); + nextPage(); +}); + +let previousPage = () => { + let numberOfRows = Math.floor(window.innerHeight / 50); + fromNumber = fromNumber - numberOfRows * count; + let toNumber = fromNumber + numberOfRows; + + if (fromNumber <= 0) { + nextBtn.disabled = false; + previousBtn.disabled = true; + fromNumber = 0; + } + + getRecords(fromNumber, toNumber); + count = 0; +}; + +previousBtn.addEventListener("click", () => { + count++; + previousPage = debounce(previousPage, 100); + previousPage(); +}); + +let firstPage = () => { + fromNumber = 0; + let numberOfRows = Math.floor(window.innerHeight / 50); + let toNumber = fromNumber + numberOfRows; + previousBtn.disabled = true; + nextBtn.disabled = false; + + getRecords(fromNumber, toNumber); +}; + +firstPageBtn.addEventListener("click", () => { + firstPage(); +}); + +let lastPage = () => { + let toNumber = 999999; + let numberOfRows = Math.floor(window.innerHeight / 50); + fromNumber = toNumber - numberOfRows; + nextBtn.disabled = true; + previousBtn.disabled = false; + + getRecords(fromNumber, toNumber); +}; + +lastPageBtn.addEventListener("click", () => { + console.log("Hello"); + lastPage(); +}); From fdc8503fa4c3d7e7ac828678421a532605965c9c Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Thu, 5 May 2022 12:04:40 +0200 Subject: [PATCH 19/30] Recent Commit --- app.ts | 64 +++++++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 45 insertions(+), 19 deletions(-) diff --git a/app.ts b/app.ts index 3f8e0339..f7bcb582 100644 --- a/app.ts +++ b/app.ts @@ -1,6 +1,7 @@ let headingColumns: any = document.querySelector("#column-headings-container"); // Headings let infoColumns: any = document.querySelector("#info-columns-container"); // Information let fromNumber: number = 0; +let recordNumberTotal: number; let count: number = 0; let timeout: number = 0; @@ -59,7 +60,6 @@ function recordSelection() { `; - selectionArea.innerHTML = ""; selectionArea.innerHTML = singleRecordSelection; let returnBtn: any = document.querySelector("#return-btn"); @@ -77,15 +77,24 @@ function recordSelection() { getSingleRecord.addEventListener("click", () => { fromNumber = Number(recordIdValue.value); let toNumber = fromNumber + numberOfRows; + let finalRecord = recordNumberTotal - 1; + + if (toNumber > finalRecord) { + toNumber = finalRecord; + fromNumber = toNumber - numberOfRows; + } + let check = ["undefined", "string", ""]; - if (check.includes(typeof fromNumber) || fromNumber < 0) { - alert("Does not exists"); - recordIdValue.value = "0"; - } else if (typeof fromNumber === "number" && fromNumber >= 0) { - getRecords(fromNumber, toNumber); - } else { - alert("Error"); + try { + if (check.includes(typeof fromNumber) || fromNumber < 0) { + alert("Does not exists"); + recordIdValue.value = "0"; + } else if (typeof fromNumber === "number" && fromNumber >= 0) { + getRecords(fromNumber, toNumber); + } + } catch (error) { + alert(error); } }); } @@ -95,6 +104,22 @@ function createHeadingGrid(headings: any) { headingColumns.innerHTML += headingsData; } +let recordCount = () => { + fetch("http://localhost:2050/recordCount", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((response) => response.text()) + .then((data) => { + recordNumberTotal = JSON.parse(data); + }) + .catch((error) => { + console.log(error); + }); +}; + +recordCount(); + let headingRowCreation = () => { fetch("http://localhost:2050/columns", { method: "GET", @@ -140,9 +165,10 @@ let resizeScreenData = () => { nextBtn.disabled = false; previousBtn.disabled = false; - if (fromNumber + numberOfRows >= 999999) { - let toNumber = 999999; - fromNumber = toNumber - numberOfRows; + let finalRecord = recordNumberTotal - 1; + + if (fromNumber + numberOfRows >= finalRecord) { + fromNumber = finalRecord - numberOfRows; nextBtn.disabled = true; previousBtn.disabled = false; } else if (fromNumber <= 0) { @@ -158,7 +184,7 @@ let resizeScreenData = () => { }; function getRecords(fromNumber: number, toNumber: number) { - fetch("http://localhost:2050/records?from=" + fromNumber + "&to=" + toNumber, { + fetch(`http://localhost:2050/records?from=${fromNumber}&to=${toNumber}`, { method: "GET", headers: { "Content-Type": "application/json" }, }) @@ -193,9 +219,10 @@ let nextPage = () => { fromNumber = fromNumber + numberOfRows * count; let toNumber = fromNumber + numberOfRows; - if (toNumber >= 999999) { - toNumber = 999999; - fromNumber = toNumber - numberOfRows; + let finalRecord = recordNumberTotal - 1; + + if (toNumber >= finalRecord) { + fromNumber = finalRecord - numberOfRows; nextBtn.disabled = true; previousBtn.disabled = false; } @@ -246,16 +273,15 @@ firstPageBtn.addEventListener("click", () => { }); let lastPage = () => { - let toNumber = 999999; + let finalRecord = recordNumberTotal - 1; let numberOfRows = Math.floor(window.innerHeight / 50); - fromNumber = toNumber - numberOfRows; + fromNumber = finalRecord - numberOfRows; nextBtn.disabled = true; previousBtn.disabled = false; - getRecords(fromNumber, toNumber); + getRecords(fromNumber, finalRecord); }; lastPageBtn.addEventListener("click", () => { - console.log("Hello"); lastPage(); }); From 891521b4cc85158829d54127d89112f1910f419f Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Thu, 5 May 2022 12:07:00 +0200 Subject: [PATCH 20/30] main.go spacing --- app.ts | 7 +++---- server/main.go | 1 + 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app.ts b/app.ts index f7bcb582..a8c558c6 100644 --- a/app.ts +++ b/app.ts @@ -118,8 +118,6 @@ let recordCount = () => { }); }; -recordCount(); - let headingRowCreation = () => { fetch("http://localhost:2050/columns", { method: "GET", @@ -204,10 +202,11 @@ function getRecords(fromNumber: number, toNumber: number) { }); } -resizeScreenData = debounce(resizeScreenData, 100); -window.addEventListener("resize", resizeScreenData); +recordCount(); createNavigation(); headingRowCreation(); +resizeScreenData = debounce(resizeScreenData, 100); +window.addEventListener("resize", resizeScreenData); let nextBtn: any = document.querySelector(".next-records-btn"); let previousBtn: any = document.querySelector(".previous-records-btn"); diff --git a/server/main.go b/server/main.go index 0782475b..d807a35c 100644 --- a/server/main.go +++ b/server/main.go @@ -15,6 +15,7 @@ import ( const recordCount = 1000000 const columnCount = 11 const delayResponse = 500 * time.Millisecond + var columns = [columnCount]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"} var letters = []rune("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ") From 9c4f8234d8df66e325b7bb82e1627a45026be55c Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Thu, 5 May 2022 12:23:22 +0200 Subject: [PATCH 21/30] first commit --- app.ts | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/app.ts b/app.ts index a8c558c6..344227fd 100644 --- a/app.ts +++ b/app.ts @@ -1,9 +1,9 @@ let headingColumns: any = document.querySelector("#column-headings-container"); // Headings let infoColumns: any = document.querySelector("#info-columns-container"); // Information -let fromNumber: number = 0; +let fromNumber = 0; let recordNumberTotal: number; -let count: number = 0; -let timeout: number = 0; +let count = 0; +let timeout = 0; window.onload = () => { fromNumber = 0; @@ -67,9 +67,7 @@ function recordSelection() { let numberOfRows = Math.floor(window.innerHeight / 50); returnBtn.addEventListener("click", () => { - createNavigation(); - let currentPage: any = document.querySelector(".current-page"); - currentPage.innerHTML = `${fromNumber} / ${fromNumber + numberOfRows}.`; + window.location.reload(); }); let getSingleRecord: any = document.querySelector("#get-record-btn"); @@ -203,17 +201,20 @@ function getRecords(fromNumber: number, toNumber: number) { } recordCount(); +resizeScreenData = debounce(resizeScreenData, 500); +window.addEventListener("resize", resizeScreenData); createNavigation(); headingRowCreation(); -resizeScreenData = debounce(resizeScreenData, 100); -window.addEventListener("resize", resizeScreenData); let nextBtn: any = document.querySelector(".next-records-btn"); let previousBtn: any = document.querySelector(".previous-records-btn"); let firstPageBtn: any = document.querySelector(".first-page-btn"); let lastPageBtn: any = document.querySelector(".last-page-btn"); +console.log(fromNumber); + let nextPage = () => { + console.log(fromNumber); let numberOfRows = Math.floor(window.innerHeight / 50); fromNumber = fromNumber + numberOfRows * count; let toNumber = fromNumber + numberOfRows; @@ -232,7 +233,7 @@ let nextPage = () => { nextBtn.addEventListener("click", () => { count++; - nextPage = debounce(nextPage, 100); + nextPage = debounce(nextPage, 500); nextPage(); }); @@ -253,7 +254,7 @@ let previousPage = () => { previousBtn.addEventListener("click", () => { count++; - previousPage = debounce(previousPage, 100); + previousPage = debounce(previousPage, 500); previousPage(); }); From 2240555d9c2b5340fe82d812ac142d3be5255532 Mon Sep 17 00:00:00 2001 From: AshtonMar Date: Fri, 6 May 2022 10:29:12 +0200 Subject: [PATCH 22/30] test --- app.ts | 406 ++++++++++++++++++++++++++++++--------------------------- text | 0 2 files changed, 211 insertions(+), 195 deletions(-) delete mode 100644 text diff --git a/app.ts b/app.ts index 344227fd..40c6de30 100644 --- a/app.ts +++ b/app.ts @@ -1,43 +1,44 @@ -let headingColumns: any = document.querySelector("#column-headings-container"); // Headings -let infoColumns: any = document.querySelector("#info-columns-container"); // Information let fromNumber = 0; let recordNumberTotal: number; let count = 0; let timeout = 0; window.onload = () => { - fromNumber = 0; + fromNumber = 0; }; let debounce = (func: any, delay: number) => { - return function () { - clearTimeout(timeout); + return function () { + clearTimeout(timeout); - timeout = setTimeout(() => { - func(); - }, delay); - }; + timeout = setTimeout(() => { + func(); + }, delay); + }; }; -let createNavigation = () => { - let recordNav: any = document.querySelector("#record-navigation-container"); // Navigation area - recordNav.innerHTML = ` -
- - - - - -
-
-

-
- `; -}; +function createNavigation() { + let recordNav: HTMLElement | null = document.getElementById("record-navigation-container"); // Navigation area + if (recordNav !== null) { + recordNav.innerHTML = ` +
+ + + + + +
+
+

+
+ `; + } +} function recordSelection() { - let selectionArea: any = document.querySelector("#record-navigation-container"); - let singleRecordSelection = ` + let recordNav: HTMLElement | null = document.getElementById("record-navigation-container"); // Navigation area + if (recordNav !== null) { + let singleRecordSelection = `