From 88a0c439b208dfbdd6f5afc30fcdf02aeb5c7dcb Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Tue, 12 Apr 2022 12:00:58 +0200 Subject: [PATCH 01/44] final push --- app.ts | 367 ++++++++++++++++++++++++++++++++++++++++++++++ index.html | 14 +- package-lock.json | 28 ++++ package.json | 26 ++++ style.css | 125 ++++++++++++++++ 5 files changed, 559 insertions(+), 1 deletion(-) create mode 100644 app.ts create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 style.css diff --git a/app.ts b/app.ts new file mode 100644 index 00000000..aef03ab4 --- /dev/null +++ b/app.ts @@ -0,0 +1,367 @@ +let paramOne = 0 +let paramTwo = 9 +let contentNeeded: any = []; +let headings: any = document.querySelector("#Headings"); +let content_cols: any = document.querySelector("#Content"); +let pageStats: any = document.getElementById('pageStats') +let clear = ""; +let prevButton: any = document.querySelector('#prev') +let nextButton: any = document.querySelector('#next') + +// Fetch requests + +//// Heading Row(The Columns) + +function getColumns() { + fetch("http://localhost:2050/columns", { + method: "GET", + headers: { "Content-Type": "application/json" }, +}) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let colList = data; + // console.log(colList); + for (let i = 0; i < colList.length; i++) { + // console.log(colList[i]); + colHeading(colList[i]); + } + }); +} + +//// Table Content + +function getTable() { + fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let contentList = data; + for (let i = 0; i < contentList.length; i++) { + contentNeeded.push(contentList[i]) + cols(contentList[i]) + } + }); +} + +// Targets heading div to creating the 1st row(Column names) + +function colHeading(heading: string) { + if (heading == "ID") { + // console.log("heading", ); + let headingCol = `
${heading}
`; + headings.innerHTML += headingCol; + } + else { + let headingCol = `
${heading}
`; + headings.innerHTML += headingCol; + } +} + +// Display the current shown results + +function stats() { + fetch("http://localhost:2050/recordCount", { + method: "GET", + headers: { "Content-Type": "application/json" }, +}) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let count = data; + let currentStats = "Showing results from " + paramOne + " to " + paramTwo + " out of " + count + " results."; + pageStats.innerHTML = currentStats; + }) +} + +// Load all intial fields/data + +window.onload = function() { + stats() + getColumns() + getTable() +} + +// Targets content div to create the actual table and fill with data + +function cols(content: string) { + let content_col = `
+
${content[0]}
+
${content[1]}
+
${content[2]}
+
${content[3]}
+
${content[4]}
+
${content[5]}
+
${content[6]}
+
${content[7]}
+
${content[8]}
+
${content[9]}
+
${content[10]}
+
`; + content_cols.innerHTML += content_col +} + +// Nav Buttons + +//// Next Function + +function next() { + if (paramTwo < 999999) { + disableNext() + paramOne = paramOne + 10 + paramTwo = paramTwo + 10 + stats() + clearTable() + fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let contentList = data; + for (let i = 0; i < contentList.length; i++) { + contentNeeded.push(contentList[i]) + cols(contentList[i]) + } + }); + setTimeout(enableNext, 500) + } else { + alert("There are no more records") + } +} + +//// Prev Function + +function prev() { + if (paramOne >= 10) { + disablePrev() + paramOne = paramOne - 10 + paramTwo = paramTwo - 10 + stats() + clearTable() + fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let contentList = data; + // console.log(contentList); + for (let i = 0; i < contentList.length; i++) { + // console.log(contentList[i]); + contentNeeded.push(contentList[i]) + cols(contentList[i]) + } + }); + setTimeout(enablePrev, 500) + } else { + alert("No previous records") + } +} + +// To disable button +function disablePrev() { + prevButton.disabled = true; +} +function disableNext() { + nextButton.disabled = true; +} + +// To Enable Buttons +function enablePrev() { + prevButton.disabled = false; +} +function enableNext() { + nextButton.disabled = false; +} + +// Clear Table (content div) + +function clearTable() { + content_cols.innerHTML = clear +} + +// ID Search + +window.addEventListener("keydown", (e) => { + let key = e.key; + // console.log(key); + + if (key === "Enter") { + let search: any = document.querySelector('#idInput'); + // console.log("searched for", search.value); + clearTable() + if (search.value != "" && search.value < 1000000) { + pageStats.innerHTML = clear + let searchStats = "Showing result with ID of " + search.value; + pageStats.innerHTML = searchStats; + fetch("http://localhost:2050/records?from=" + search.value + "&to=" + search.value, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let contentList = data; + // console.log(contentList); + for (let i = 0; i < contentList.length; i++) { + contentNeeded.push(contentList[i]) + cols(contentList[i]) + } + }); + } else { + alert("There are no results with that ID!") + stats() + getTable() + } + search.value = clear + } +}) + +// Jump to ID + +// window.addEventListener("keydown", (e) => { +// let key = e.key; +// if (key === "Alt") { +// let search: any = document.querySelector('#idJump'); +// let searchOne = search.value +// let convert = parseInt(searchOne) + 9 +// let searchTwo = convert.toString() + +// if (searchOne != "" && searchOne <= 999990) { +// clearTable() +// fetch("http://localhost:2050/records?from=" + searchOne + "&to=" + searchTwo, { +// method: "GET", +// headers: { "Content-Type": "application/json" }, +// }) +// .then((res) => res.text()) +// .then((data) => { +// data = JSON.parse(data); +// let contentList = data; +// // console.log(contentList); +// for (let i = 0; i < contentList.length; i++) { +// contentNeeded.push(contentList[i]) +// cols(contentList[i]) +// } +// }); +// fetch("http://localhost:2050/recordCount", { +// method: "GET", +// headers: { "Content-Type": "application/json" }, +// }) +// .then((res) => res.text()) +// .then((data) => { +// data = JSON.parse(data); +// let count = data; +// let currentStats = "Showing results from ID " + searchOne + " to " + searchTwo + " out of " + count + " results."; +// pageStats.innerHTML = currentStats; +// }) +// } else if (searchOne > 999990 && searchOne < 1000000) { +// clearTable() +// fetch("http://localhost:2050/records?from=" + searchOne + "&to=" + 999999, { +// method: "GET", +// headers: { "Content-Type": "application/json" }, +// }) +// .then((res) => res.text()) +// .then((data) => { +// data = JSON.parse(data); +// let contentList = data; +// // console.log(contentList); +// for (let i = 0; i < contentList.length; i++) { +// contentNeeded.push(contentList[i]) +// cols(contentList[i]) +// } +// }); +// fetch("http://localhost:2050/recordCount", { +// method: "GET", +// headers: { "Content-Type": "application/json" }, +// }) +// .then((res) => res.text()) +// .then((data) => { +// data = JSON.parse(data); +// let count = data; +// let currentStats = "Showing results from ID " + searchOne + " to " + 999999 + " out of " + count + " results."; +// pageStats.innerHTML = currentStats; +// }) +// } else { +// alert("There are no records with that ID!") +// clearTable() +// stats() +// getTable() +// } +// search.value = clear +// } +// }) + +function idJump() { + let search: any = document.querySelector('#idJump'); + let searchOne = search.value + let convert = parseInt(searchOne) + 9 + let searchTwo = convert.toString() + + if (searchOne != "" && searchOne <= 999990) { + clearTable() + fetch("http://localhost:2050/records?from=" + searchOne + "&to=" + searchTwo, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let contentList = data; + // console.log(contentList); + for (let i = 0; i < contentList.length; i++) { + contentNeeded.push(contentList[i]) + cols(contentList[i]) + } + }); + fetch("http://localhost:2050/recordCount", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let count = data; + let currentStats = "Showing results from ID " + searchOne + " to " + searchTwo + " out of " + count + " results."; + pageStats.innerHTML = currentStats; + }) + } else if (searchOne > 999990 && searchOne < 1000000) { + clearTable() + fetch("http://localhost:2050/records?from=" + searchOne + "&to=" + 999999, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let contentList = data; + // console.log(contentList); + for (let i = 0; i < contentList.length; i++) { + contentNeeded.push(contentList[i]) + cols(contentList[i]) + } + }); + fetch("http://localhost:2050/recordCount", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let count = data; + let currentStats = "Showing results from ID " + searchOne + " to " + 999999 + " out of " + count + " results."; + pageStats.innerHTML = currentStats; + }) + } else { + alert("There are no records with that ID!") + clearTable() + stats() + getTable() + } + search.value = clear +} \ No newline at end of file diff --git a/index.html b/index.html index add5e736..a21875ec 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,22 @@ JS Onboard Project + -

Hello

+
+ +
+
+ + +
+
+
+
+ + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..57a8346d --- /dev/null +++ b/package-lock.json @@ -0,0 +1,28 @@ +{ + "name": "onboard-javascript", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@types/jquery": { + "version": "3.5.14", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.14.tgz", + "integrity": "sha512-X1gtMRMbziVQkErhTQmSe2jFwwENA/Zr+PprCkF63vFq+Yt5PZ4AlKqgmeNlwgn7dhsXEK888eIW2520EpC+xg==", + "dev": true, + "requires": { + "@types/sizzle": "*" + } + }, + "@types/sizzle": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz", + "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==", + "dev": true + }, + "typescript": { + "version": "4.6.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.3.tgz", + "integrity": "sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..5f167012 --- /dev/null +++ b/package.json @@ -0,0 +1,26 @@ +{ + "name": "onboard-javascript", + "version": "1.0.0", + "description": "This is a JavaScript project for all new developers to complete before venturing into our web frontend codebase.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "build": "tsc --build" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/Koumori97/onboard-javascript.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/Koumori97/onboard-javascript/issues" + }, + "homepage": "https://github.com/Koumori97/onboard-javascript#readme", + "dependencies": { + "typescript": "^4.6.3" + }, + "devDependencies": { + "@types/jquery": "^3.5.14" + } +} diff --git a/style.css b/style.css new file mode 100644 index 00000000..2a7768df --- /dev/null +++ b/style.css @@ -0,0 +1,125 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + overflow-y: hidden; +} + +body { + height: 100vh; + width: 100%; +} + +#Headings { + display: flex; + flex-direction: row; + min-width: 100%; +} + +#col_heading { + border: 1px solid black; + width: 100%; + height: 10vh; + display: grid; + place-items: center; + font-size: 2em; +} + +#col_heading input { + overflow-x: hidden; + width: 90%; + padding: 5px; + font-size: 0.9rem; + text-align: center; +} + +#Content { + display: flex; + flex-direction: column; + min-width: 100%; + height: calc(100vh - 15vh); +} + +#content_col { + display: flex; + width: 100%; + max-height: 20vh; +} + +.info { + border: 1px solid black; + width: 100%; + min-height: 10vh; + display: grid; + place-items: center; +} + +#info_id { + font-size: 2em; +} + +.nav { + height: 5vh; + display: grid; + place-items: center; + background-color: #000; +} + +#pageStats { + color: #fff; + font-size:1.1em; + padding: 5px; + position: absolute; + left: 1%; +} + + +#jumpID { + color: #fff; + font-size: 1.1em; + padding: 5px; + display: flex; + flex-direction: row; + text-align: center; + gap: 20px; +} +#jumpID input { + text-align: center; + padding: 3px; +} +#jumpID button { + padding: 5px; + cursor: pointer; + border-radius: 50px; + border: 1px solid black; + width: 120px; + margin: 0 25px; + font-weight: bold; + text-transform: capitalize; + transition: ease-in 0.3s; +} +#jumpID button:hover { + letter-spacing: 2px; +} + +.btns { + color: #fff; + padding: 5px; + position: absolute; + right: 1%; +} + +.btns button { + padding: 5px; + cursor: pointer; + border-radius: 50px; + border: 1px solid black; + width: 80px; + margin: 0 25px; + font-weight: bold; + text-transform: uppercase; + transition: ease-in 0.3s; +} +.btns button:hover { + letter-spacing: 3px; +} From 69a305f0e460bdb83a3859c0970855cd2ba6ce32 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Tue, 12 Apr 2022 12:17:57 +0200 Subject: [PATCH 02/44] final push --- app.ts | 42 ++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 40 insertions(+), 2 deletions(-) diff --git a/app.ts b/app.ts index aef03ab4..96494c50 100644 --- a/app.ts +++ b/app.ts @@ -130,7 +130,25 @@ function next() { }); setTimeout(enableNext, 500) } else { - alert("There are no more records") + disableNext() + paramOne = 0 + paramTwo = 9 + stats() + clearTable() + fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let contentList = data; + for (let i = 0; i < contentList.length; i++) { + contentNeeded.push(contentList[i]) + cols(contentList[i]) + } + }); + setTimeout(enableNext, 500) } } @@ -160,7 +178,27 @@ function prev() { }); setTimeout(enablePrev, 500) } else { - alert("No previous records") + disablePrev() + paramOne = 999990 + paramTwo = 999999 + stats() + clearTable() + fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let contentList = data; + // console.log(contentList); + for (let i = 0; i < contentList.length; i++) { + // console.log(contentList[i]); + contentNeeded.push(contentList[i]) + cols(contentList[i]) + } + }); + setTimeout(enablePrev, 500) } } From 95cabc669c6fe98e3c6912648df6818b86b782af Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Tue, 12 Apr 2022 12:26:11 +0200 Subject: [PATCH 03/44] final push --- app.ts | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/app.ts b/app.ts index 96494c50..6ffd9935 100644 --- a/app.ts +++ b/app.ts @@ -21,9 +21,7 @@ function getColumns() { .then((data) => { data = JSON.parse(data); let colList = data; - // console.log(colList); for (let i = 0; i < colList.length; i++) { - // console.log(colList[i]); colHeading(colList[i]); } }); @@ -51,7 +49,6 @@ function getTable() { function colHeading(heading: string) { if (heading == "ID") { - // console.log("heading", ); let headingCol = `
${heading}
`; headings.innerHTML += headingCol; } @@ -169,9 +166,7 @@ function prev() { .then((data) => { data = JSON.parse(data); let contentList = data; - // console.log(contentList); for (let i = 0; i < contentList.length; i++) { - // console.log(contentList[i]); contentNeeded.push(contentList[i]) cols(contentList[i]) } @@ -191,9 +186,7 @@ function prev() { .then((data) => { data = JSON.parse(data); let contentList = data; - // console.log(contentList); for (let i = 0; i < contentList.length; i++) { - // console.log(contentList[i]); contentNeeded.push(contentList[i]) cols(contentList[i]) } @@ -228,11 +221,9 @@ function clearTable() { window.addEventListener("keydown", (e) => { let key = e.key; - // console.log(key); if (key === "Enter") { let search: any = document.querySelector('#idInput'); - // console.log("searched for", search.value); clearTable() if (search.value != "" && search.value < 1000000) { pageStats.innerHTML = clear @@ -246,7 +237,6 @@ window.addEventListener("keydown", (e) => { .then((data) => { data = JSON.parse(data); let contentList = data; - // console.log(contentList); for (let i = 0; i < contentList.length; i++) { contentNeeded.push(contentList[i]) cols(contentList[i]) @@ -351,7 +341,6 @@ function idJump() { .then((data) => { data = JSON.parse(data); let contentList = data; - // console.log(contentList); for (let i = 0; i < contentList.length; i++) { contentNeeded.push(contentList[i]) cols(contentList[i]) @@ -378,7 +367,6 @@ function idJump() { .then((data) => { data = JSON.parse(data); let contentList = data; - // console.log(contentList); for (let i = 0; i < contentList.length; i++) { contentNeeded.push(contentList[i]) cols(contentList[i]) From 5f812147fafb8fe9e7fdcd4ba16e3addc3e86e9e Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Tue, 12 Apr 2022 13:26:14 +0200 Subject: [PATCH 04/44] final push --- app.ts | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/app.ts b/app.ts index 6ffd9935..e056829d 100644 --- a/app.ts +++ b/app.ts @@ -1,5 +1,5 @@ -let paramOne = 0 -let paramTwo = 9 +let paramOne: any = 0 +let paramTwo: any = 9 let contentNeeded: any = []; let headings: any = document.querySelector("#Headings"); let content_cols: any = document.querySelector("#Content"); @@ -108,8 +108,12 @@ function cols(content: string) { function next() { if (paramTwo < 999999) { disableNext() - paramOne = paramOne + 10 - paramTwo = paramTwo + 10 + + let intOne = parseInt(paramOne) + 10 + let intTwo = parseInt(paramTwo) + 10 + paramOne = intOne.toString() + paramTwo = intTwo.toString() + stats() clearTable() fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { @@ -154,8 +158,12 @@ function next() { function prev() { if (paramOne >= 10) { disablePrev() - paramOne = paramOne - 10 - paramTwo = paramTwo - 10 + + let intOne = parseInt(paramOne) - 10 + let intTwo = parseInt(paramTwo) - 10 + paramOne = intOne.toString() + paramTwo = intTwo.toString() + stats() clearTable() fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { @@ -330,10 +338,12 @@ function idJump() { let searchOne = search.value let convert = parseInt(searchOne) + 9 let searchTwo = convert.toString() + paramOne = searchOne + paramTwo = searchTwo if (searchOne != "" && searchOne <= 999990) { clearTable() - fetch("http://localhost:2050/records?from=" + searchOne + "&to=" + searchTwo, { + fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { method: "GET", headers: { "Content-Type": "application/json" }, }) @@ -346,17 +356,7 @@ function idJump() { cols(contentList[i]) } }); - fetch("http://localhost:2050/recordCount", { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let count = data; - let currentStats = "Showing results from ID " + searchOne + " to " + searchTwo + " out of " + count + " results."; - pageStats.innerHTML = currentStats; - }) + stats() } else if (searchOne > 999990 && searchOne < 1000000) { clearTable() fetch("http://localhost:2050/records?from=" + searchOne + "&to=" + 999999, { From 75bff11c8ade4d26be5de3ea3a5fdbd6c209e5cd Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Tue, 12 Apr 2022 13:57:38 +0200 Subject: [PATCH 05/44] final push --- app.ts | 10 ++++++---- index.html | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/app.ts b/app.ts index e056829d..d54c5f34 100644 --- a/app.ts +++ b/app.ts @@ -233,7 +233,7 @@ window.addEventListener("keydown", (e) => { if (key === "Enter") { let search: any = document.querySelector('#idInput'); clearTable() - if (search.value != "" && search.value < 1000000) { + if (search.value != "" && search.value < 1000000 && search.value >= 0) { pageStats.innerHTML = clear let searchStats = "Showing result with ID of " + search.value; pageStats.innerHTML = searchStats; @@ -341,7 +341,7 @@ function idJump() { paramOne = searchOne paramTwo = searchTwo - if (searchOne != "" && searchOne <= 999990) { + if (searchOne !== "" && searchOne <= 999990 && searchOne >= 0 && searchOne !== 'e') { clearTable() fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { method: "GET", @@ -357,7 +357,7 @@ function idJump() { } }); stats() - } else if (searchOne > 999990 && searchOne < 1000000) { + } else if (searchOne > 999990 && searchOne < 1000000 && searchOne >= 0 && searchOne !== 'e') { clearTable() fetch("http://localhost:2050/records?from=" + searchOne + "&to=" + 999999, { method: "GET", @@ -384,8 +384,10 @@ function idJump() { pageStats.innerHTML = currentStats; }) } else { - alert("There are no records with that ID!") + alert("There are no records with that ID! Please check that your input does not exceed 999 999 and is not a negative amount.") clearTable() + paramOne = 0 + paramTwo = 9 stats() getTable() } diff --git a/index.html b/index.html index a21875ec..fef0db91 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@
-
+
From 3b5929046896f0c2c213e32cb84756ecbb1dfb89 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Tue, 12 Apr 2022 15:15:03 +0200 Subject: [PATCH 06/44] final push --- index.html | 2 +- style.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index fef0db91..a3888916 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@
-
+
diff --git a/style.css b/style.css index 2a7768df..a66ccdc6 100644 --- a/style.css +++ b/style.css @@ -26,7 +26,6 @@ body { } #col_heading input { - overflow-x: hidden; width: 90%; padding: 5px; font-size: 0.9rem; @@ -86,6 +85,7 @@ body { #jumpID input { text-align: center; padding: 3px; + /* width: 100px; */ } #jumpID button { padding: 5px; From 6de1c55e1158693e1542dd891baa80786b5563a9 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Wed, 13 Apr 2022 15:42:34 +0200 Subject: [PATCH 07/44] revised code attempt 1 --- app.ts | 79 +++++++++++++++++++++++++++++++++----------------- index.html | 4 +-- server/main.go | 4 +-- 3 files changed, 56 insertions(+), 31 deletions(-) diff --git a/app.ts b/app.ts index d54c5f34..633d4701 100644 --- a/app.ts +++ b/app.ts @@ -1,12 +1,18 @@ let paramOne: any = 0 let paramTwo: any = 9 let contentNeeded: any = []; -let headings: any = document.querySelector("#Headings"); -let content_cols: any = document.querySelector("#Content"); -let pageStats: any = document.getElementById('pageStats') -let clear = ""; -let prevButton: any = document.querySelector('#prev') -let nextButton: any = document.querySelector('#next') +let contentListNeeded: any = [] +const headings: any = document.querySelector("#Headings"); +const content_cols: any = document.querySelector("#Content"); +const lists: any = document.querySelector('#info-id') +const pageStats: any = document.getElementById('pageStats') +const clear = ""; +const prevButton: any = document.querySelector('#prev') +const nextButton: any = document.querySelector('#next') +let nextClickCount = 0; +let prevClickCount = 0; +let nextClicked: boolean +let prevClicked: boolean // Fetch requests @@ -37,10 +43,16 @@ function getTable() { .then((res) => res.text()) .then((data) => { data = JSON.parse(data); - let contentList = data; + let contentList = data; for (let i = 0; i < contentList.length; i++) { contentNeeded.push(contentList[i]) cols(contentList[i]) + console.log(contentList[i]); + let contentListContent: any = contentList[i] + for (let j = 0; j < contentListContent.length; j++) { + contentListNeeded.push(contentListContent[j]); + colContent(contentListContent[j]) + } } }); } @@ -58,6 +70,20 @@ function colHeading(heading: string) { } } +function colContent(list: string) { + let contentCol = `
${list}
`; + lists.innerHTML += contentCol +} + +// Targets content div to create the actual table and fill with data + +function cols(content: string) { + let content_col = `
+
${content}
+
`; + content_cols.innerHTML += content_col +} + // Display the current shown results function stats() { @@ -82,24 +108,6 @@ window.onload = function() { getTable() } -// Targets content div to create the actual table and fill with data - -function cols(content: string) { - let content_col = `
-
${content[0]}
-
${content[1]}
-
${content[2]}
-
${content[3]}
-
${content[4]}
-
${content[5]}
-
${content[6]}
-
${content[7]}
-
${content[8]}
-
${content[9]}
-
${content[10]}
-
`; - content_cols.innerHTML += content_col -} // Nav Buttons @@ -357,7 +365,7 @@ function idJump() { } }); stats() - } else if (searchOne > 999990 && searchOne < 1000000 && searchOne >= 0 && searchOne !== 'e') { + } else if ( searchOne > 999990 && searchOne < 1000000 && searchOne >= 0 && searchOne !== 'e') { clearTable() fetch("http://localhost:2050/records?from=" + searchOne + "&to=" + 999999, { method: "GET", @@ -392,4 +400,21 @@ function idJump() { getTable() } search.value = clear -} \ No newline at end of file +} + +// nextButton.addEventListener("click", function() { +// let current = new Date() +// let firstHour = current.getHours(); +// let firstMinute = current.getMinutes(); +// let firstSecond = current.getSeconds(); +// console.log("test"); + + +// if (firstSecond > 57) { +// let currentSecs = current.getSeconds() +// if (currentSecs <= firstSecond + 3 ) { +// console.log("Works"); +// } +// } +// }) + diff --git a/index.html b/index.html index a3888916..43cb8ff4 100644 --- a/index.html +++ b/index.html @@ -11,8 +11,8 @@
- - + +
diff --git a/server/main.go b/server/main.go index eba62f8c..db7e1215 100644 --- a/server/main.go +++ b/server/main.go @@ -14,10 +14,10 @@ import ( ) const recordCount = 1000000 -const columnCount = 11 +const columnCount = 12 const delayResponse = 500 * time.Millisecond -var columns = [columnCount]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"} +var columns = [columnCount]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"} var letters = []rune("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ") func main() { From 7bd7bc8c1fbb588443242cf0713232f5faee9c41 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Wed, 13 Apr 2022 16:10:39 +0200 Subject: [PATCH 08/44] revised code attempt 1 --- app.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app.ts b/app.ts index 633d4701..e5f36635 100644 --- a/app.ts +++ b/app.ts @@ -47,11 +47,12 @@ function getTable() { for (let i = 0; i < contentList.length; i++) { contentNeeded.push(contentList[i]) cols(contentList[i]) - console.log(contentList[i]); + // console.log(contentList[i]); let contentListContent: any = contentList[i] for (let j = 0; j < contentListContent.length; j++) { + console.log(contentListContent[j]); contentListNeeded.push(contentListContent[j]); - colContent(contentListContent[j]) + // colContent(contentListContent[j]) } } }); From 7991e74ed0b10a6aec38ca367cc8a57a8b73149f Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Thu, 14 Apr 2022 15:16:40 +0200 Subject: [PATCH 09/44] next and prev buttons fixed --- app.ts | 409 ++++++++++++++++++++----------------------------- index.html | 2 +- server/main.go | 4 +- style.css | 1 + 4 files changed, 174 insertions(+), 242 deletions(-) diff --git a/app.ts b/app.ts index e5f36635..1858f158 100644 --- a/app.ts +++ b/app.ts @@ -1,18 +1,22 @@ -let paramOne: any = 0 -let paramTwo: any = 9 -let contentNeeded: any = []; -let contentListNeeded: any = [] const headings: any = document.querySelector("#Headings"); const content_cols: any = document.querySelector("#Content"); const lists: any = document.querySelector('#info-id') const pageStats: any = document.getElementById('pageStats') const clear = ""; -const prevButton: any = document.querySelector('#prev') -const nextButton: any = document.querySelector('#next') -let nextClickCount = 0; -let prevClickCount = 0; -let nextClicked: boolean -let prevClicked: boolean +const nextButton: any = document.querySelector("#next"); +const prevButton: any = document.querySelector("#prev"); +let paramOne: any = 0 +let paramTwo: any = 9 +let contentNeeded: any = []; +let contentListNeeded: any = [] +let nextCounter = 0; +let nextBtnStatus: any = false; +let nextTurnFalse: any; +let nextActCheck: any; +let prevCounter = 0; +let prevBtnStatus: any = false; +let prevTurnFalse: any; +let prevActCheck: any; // Fetch requests @@ -47,18 +51,44 @@ function getTable() { for (let i = 0; i < contentList.length; i++) { contentNeeded.push(contentList[i]) cols(contentList[i]) - // console.log(contentList[i]); let contentListContent: any = contentList[i] for (let j = 0; j < contentListContent.length; j++) { - console.log(contentListContent[j]); - contentListNeeded.push(contentListContent[j]); - // colContent(contentListContent[j]) + let rowContentList: any = contentListContent[j] + console.log(rowContentList); } + } }); } -// Targets heading div to creating the 1st row(Column names) +//// Display the current shown results + +function stats() { + fetch("http://localhost:2050/recordCount", { + method: "GET", + headers: { "Content-Type": "application/json" }, +}) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let count = data; + let currentStats = "Showing results from " + paramOne + " to " + paramTwo + " out of " + count + " results."; + pageStats.innerHTML = currentStats; + }) +} + + +// Loads all intial fields/data + +window.onload = function() { + stats() + getColumns() + getTable() +} + +// Displaying data into html + +//// Targets heading div to creating the 1st row(Column names) function colHeading(heading: string) { if (heading == "ID") { @@ -71,12 +101,7 @@ function colHeading(heading: string) { } } -function colContent(list: string) { - let contentCol = `
${list}
`; - lists.innerHTML += contentCol -} - -// Targets content div to create the actual table and fill with data +//// Targets content div to create the actual table and fill with data function cols(content: string) { let content_col = `
@@ -85,45 +110,57 @@ function cols(content: string) { content_cols.innerHTML += content_col } -// Display the current shown results - -function stats() { - fetch("http://localhost:2050/recordCount", { - method: "GET", - headers: { "Content-Type": "application/json" }, -}) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let count = data; - let currentStats = "Showing results from " + paramOne + " to " + paramTwo + " out of " + count + " results."; - pageStats.innerHTML = currentStats; - }) -} - -// Load all intial fields/data +// Clear Table (content div) -window.onload = function() { - stats() - getColumns() - getTable() +function clearTable() { + content_cols.innerHTML = clear } +// ID Search -// Nav Buttons +window.addEventListener("keydown", (e) => { + let key = e.key; -//// Next Function + if (key === "Enter") { + let search: any = document.querySelector('#idInput'); + clearTable() + if (search.value != "" && search.value < 1000000 && search.value >= 0) { + pageStats.innerHTML = clear + let searchStats = "Showing result with ID of " + search.value; + pageStats.innerHTML = searchStats; + fetch("http://localhost:2050/records?from=" + search.value + "&to=" + search.value, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let contentList = data; + for (let i = 0; i < contentList.length; i++) { + contentNeeded.push(contentList[i]) + cols(contentList[i]) + } + }); + } else { + alert("There are no results with that ID!") + stats() + getTable() + } + search.value = clear + } +}) -function next() { - if (paramTwo < 999999) { - disableNext() +// Jump to ID - let intOne = parseInt(paramOne) + 10 - let intTwo = parseInt(paramTwo) + 10 - paramOne = intOne.toString() - paramTwo = intTwo.toString() +function idJump() { + let search: any = document.querySelector('#idJump'); + let searchOne = search.value + let convert = parseInt(searchOne) + 9 + let searchTwo = convert.toString() + paramOne = searchOne + paramTwo = searchTwo - stats() + if (searchOne !== "" && searchOne <= 999990 && searchOne >= 0 && searchOne !== 'e') { clearTable() fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { method: "GET", @@ -138,14 +175,10 @@ function next() { cols(contentList[i]) } }); - setTimeout(enableNext, 500) - } else { - disableNext() - paramOne = 0 - paramTwo = 9 stats() + } else if ( searchOne > 999990 && searchOne < 1000000 && searchOne >= 0 && searchOne !== 'e') { clearTable() - fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { + fetch("http://localhost:2050/records?from=" + searchOne + "&to=" + 999999, { method: "GET", headers: { "Content-Type": "application/json" }, }) @@ -158,21 +191,40 @@ function next() { cols(contentList[i]) } }); - setTimeout(enableNext, 500) + fetch("http://localhost:2050/recordCount", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let count = data; + let currentStats = "Showing results from ID " + searchOne + " to " + 999999 + " out of " + count + " results."; + pageStats.innerHTML = currentStats; + }) + } else { + alert("There are no records with that ID! Please check that your input does not exceed 999 999 and is not a negative amount.") + clearTable() + paramOne = 0 + paramTwo = 9 + stats() + getTable() } + search.value = clear } -//// Prev Function +// Nav Buttons -function prev() { - if (paramOne >= 10) { - disablePrev() +//// Next Function - let intOne = parseInt(paramOne) - 10 - let intTwo = parseInt(paramTwo) - 10 +function next() { + if (paramTwo < 999999) { + + let intOne = parseInt(paramOne) + (10 * nextCounter) + let intTwo = parseInt(paramTwo) + (10 * nextCounter) paramOne = intOne.toString() paramTwo = intTwo.toString() - + stats() clearTable() fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { @@ -188,11 +240,9 @@ function prev() { cols(contentList[i]) } }); - setTimeout(enablePrev, 500) } else { - disablePrev() - paramOne = 999990 - paramTwo = 999999 + paramOne = 0 + paramTwo = 9 stats() clearTable() fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { @@ -208,149 +258,42 @@ function prev() { cols(contentList[i]) } }); - setTimeout(enablePrev, 500) } + nextCounter = 0 } -// To disable button -function disablePrev() { - prevButton.disabled = true; -} -function disableNext() { - nextButton.disabled = true; -} - -// To Enable Buttons -function enablePrev() { - prevButton.disabled = false; -} -function enableNext() { - nextButton.disabled = false; -} - -// Clear Table (content div) +nextButton.addEventListener("click", () => { + clearTimeout(nextTurnFalse) + clearTimeout(nextBtnStatus) + nextCounter += 1 + nextBtnStatus = true + nextTurnFalse = setTimeout(nextBtnFalse, 2000) + nextActCheck = setTimeout(nextCheck, 2100) +}) -function clearTable() { - content_cols.innerHTML = clear +function nextBtnFalse() { + nextBtnStatus = false } -// ID Search - -window.addEventListener("keydown", (e) => { - let key = e.key; - - if (key === "Enter") { - let search: any = document.querySelector('#idInput'); - clearTable() - if (search.value != "" && search.value < 1000000 && search.value >= 0) { - pageStats.innerHTML = clear - let searchStats = "Showing result with ID of " + search.value; - pageStats.innerHTML = searchStats; - fetch("http://localhost:2050/records?from=" + search.value + "&to=" + search.value, { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let contentList = data; - for (let i = 0; i < contentList.length; i++) { - contentNeeded.push(contentList[i]) - cols(contentList[i]) - } - }); - } else { - alert("There are no results with that ID!") - stats() - getTable() - } - search.value = clear +function nextCheck() { + if (nextBtnStatus) { + // pass + } else { + next() } -}) +} -// Jump to ID - -// window.addEventListener("keydown", (e) => { -// let key = e.key; -// if (key === "Alt") { -// let search: any = document.querySelector('#idJump'); -// let searchOne = search.value -// let convert = parseInt(searchOne) + 9 -// let searchTwo = convert.toString() - -// if (searchOne != "" && searchOne <= 999990) { -// clearTable() -// fetch("http://localhost:2050/records?from=" + searchOne + "&to=" + searchTwo, { -// method: "GET", -// headers: { "Content-Type": "application/json" }, -// }) -// .then((res) => res.text()) -// .then((data) => { -// data = JSON.parse(data); -// let contentList = data; -// // console.log(contentList); -// for (let i = 0; i < contentList.length; i++) { -// contentNeeded.push(contentList[i]) -// cols(contentList[i]) -// } -// }); -// fetch("http://localhost:2050/recordCount", { -// method: "GET", -// headers: { "Content-Type": "application/json" }, -// }) -// .then((res) => res.text()) -// .then((data) => { -// data = JSON.parse(data); -// let count = data; -// let currentStats = "Showing results from ID " + searchOne + " to " + searchTwo + " out of " + count + " results."; -// pageStats.innerHTML = currentStats; -// }) -// } else if (searchOne > 999990 && searchOne < 1000000) { -// clearTable() -// fetch("http://localhost:2050/records?from=" + searchOne + "&to=" + 999999, { -// method: "GET", -// headers: { "Content-Type": "application/json" }, -// }) -// .then((res) => res.text()) -// .then((data) => { -// data = JSON.parse(data); -// let contentList = data; -// // console.log(contentList); -// for (let i = 0; i < contentList.length; i++) { -// contentNeeded.push(contentList[i]) -// cols(contentList[i]) -// } -// }); -// fetch("http://localhost:2050/recordCount", { -// method: "GET", -// headers: { "Content-Type": "application/json" }, -// }) -// .then((res) => res.text()) -// .then((data) => { -// data = JSON.parse(data); -// let count = data; -// let currentStats = "Showing results from ID " + searchOne + " to " + 999999 + " out of " + count + " results."; -// pageStats.innerHTML = currentStats; -// }) -// } else { -// alert("There are no records with that ID!") -// clearTable() -// stats() -// getTable() -// } -// search.value = clear -// } -// }) +//// Prev Function -function idJump() { - let search: any = document.querySelector('#idJump'); - let searchOne = search.value - let convert = parseInt(searchOne) + 9 - let searchTwo = convert.toString() - paramOne = searchOne - paramTwo = searchTwo +function prev() { + if (paramOne >= 10) { - if (searchOne !== "" && searchOne <= 999990 && searchOne >= 0 && searchOne !== 'e') { + let intOne = parseInt(paramOne) - (10 * prevCounter) + let intTwo = parseInt(paramTwo) - (10 * prevCounter) + paramOne = intOne.toString() + paramTwo = intTwo.toString() + + stats() clearTable() fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { method: "GET", @@ -365,10 +308,12 @@ function idJump() { cols(contentList[i]) } }); + } else { + paramOne = 999990 + paramTwo = 999999 stats() - } else if ( searchOne > 999990 && searchOne < 1000000 && searchOne >= 0 && searchOne !== 'e') { clearTable() - fetch("http://localhost:2050/records?from=" + searchOne + "&to=" + 999999, { + fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { method: "GET", headers: { "Content-Type": "application/json" }, }) @@ -381,41 +326,27 @@ function idJump() { cols(contentList[i]) } }); - fetch("http://localhost:2050/recordCount", { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let count = data; - let currentStats = "Showing results from ID " + searchOne + " to " + 999999 + " out of " + count + " results."; - pageStats.innerHTML = currentStats; - }) - } else { - alert("There are no records with that ID! Please check that your input does not exceed 999 999 and is not a negative amount.") - clearTable() - paramOne = 0 - paramTwo = 9 - stats() - getTable() } - search.value = clear + prevCounter = 0 } -// nextButton.addEventListener("click", function() { -// let current = new Date() -// let firstHour = current.getHours(); -// let firstMinute = current.getMinutes(); -// let firstSecond = current.getSeconds(); -// console.log("test"); - - -// if (firstSecond > 57) { -// let currentSecs = current.getSeconds() -// if (currentSecs <= firstSecond + 3 ) { -// console.log("Works"); -// } -// } -// }) +prevButton.addEventListener("click", () => { + clearTimeout(prevTurnFalse) + clearTimeout(prevBtnStatus) + prevCounter += 1 + prevBtnStatus = true + prevTurnFalse = setTimeout(prevBtnFalse, 2000) + prevActCheck = setTimeout(prevCheck, 2100) +}) +function prevBtnFalse() { + prevBtnStatus = false +} + +function prevCheck() { + if (prevBtnStatus) { + // pass + } else { + prev() + } +} \ No newline at end of file diff --git a/index.html b/index.html index 43cb8ff4..e6b82837 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
- +
diff --git a/server/main.go b/server/main.go index db7e1215..eba62f8c 100644 --- a/server/main.go +++ b/server/main.go @@ -14,10 +14,10 @@ import ( ) const recordCount = 1000000 -const columnCount = 12 +const columnCount = 11 const delayResponse = 500 * time.Millisecond -var columns = [columnCount]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"} +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 index a66ccdc6..1a31169e 100644 --- a/style.css +++ b/style.css @@ -43,6 +43,7 @@ body { display: flex; width: 100%; max-height: 20vh; + font-size: 0.7em; } .info { From c54940f5a49862e23abbb9dec2b97f88fa2829ec Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Thu, 14 Apr 2022 15:28:54 +0200 Subject: [PATCH 10/44] next and prev buttons fixed --- app.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/app.ts b/app.ts index 1858f158..c6ba8b6f 100644 --- a/app.ts +++ b/app.ts @@ -105,7 +105,17 @@ function colHeading(heading: string) { function cols(content: string) { let content_col = `
-
${content}
+
${content[0]}
+
${content[1]}
+
${content[2]}
+
${content[3]}
+
${content[4]}
+
${content[5]}
+
${content[6]}
+
${content[7]}
+
${content[8]}
+
${content[8]}
+
${content[10]}
`; content_cols.innerHTML += content_col } From 3e5eae572b95e185bcf5141f4a5f2d8eb1b5a5e6 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Thu, 14 Apr 2022 15:52:38 +0200 Subject: [PATCH 11/44] next and prev buttons fixed --- app.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.ts b/app.ts index c6ba8b6f..d43efea1 100644 --- a/app.ts +++ b/app.ts @@ -54,7 +54,7 @@ function getTable() { let contentListContent: any = contentList[i] for (let j = 0; j < contentListContent.length; j++) { let rowContentList: any = contentListContent[j] - console.log(rowContentList); + // console.log(rowContentList); } } From b028cc45c998b8d3e8179171a782380e818eec07 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Wed, 20 Apr 2022 11:23:17 +0200 Subject: [PATCH 12/44] revised code --- app.ts | 44 ++++++++++++++++++++------------------------ style.css | 18 ++++++++---------- 2 files changed, 28 insertions(+), 34 deletions(-) diff --git a/app.ts b/app.ts index d43efea1..1f9f1852 100644 --- a/app.ts +++ b/app.ts @@ -1,10 +1,11 @@ const headings: any = document.querySelector("#Headings"); const content_cols: any = document.querySelector("#Content"); -const lists: any = document.querySelector('#info-id') +const lists: any = document.querySelector('#content_row') const pageStats: any = document.getElementById('pageStats') const clear = ""; const nextButton: any = document.querySelector("#next"); const prevButton: any = document.querySelector("#prev"); +let arrChild: any = [] let paramOne: any = 0 let paramTwo: any = 9 let contentNeeded: any = []; @@ -47,16 +48,11 @@ function getTable() { .then((res) => res.text()) .then((data) => { data = JSON.parse(data); - let contentList = data; + let contentList = data; + // console.log(contentList); for (let i = 0; i < contentList.length; i++) { - contentNeeded.push(contentList[i]) - cols(contentList[i]) let contentListContent: any = contentList[i] - for (let j = 0; j < contentListContent.length; j++) { - let rowContentList: any = contentListContent[j] - // console.log(rowContentList); - } - + cols(contentListContent) } }); } @@ -103,23 +99,23 @@ function colHeading(heading: string) { //// Targets content div to create the actual table and fill with data -function cols(content: string) { - let content_col = `
-
${content[0]}
-
${content[1]}
-
${content[2]}
-
${content[3]}
-
${content[4]}
-
${content[5]}
-
${content[6]}
-
${content[7]}
-
${content[8]}
-
${content[8]}
-
${content[10]}
-
`; - content_cols.innerHTML += content_col +let columnRowData: any = [] + +function cols(content: any) { + let rows = `
`; + + content_cols.innerHTML += rows; + + let finalRow: any = document.querySelector("#row-" + content[0] + ".rows"); + + for (let x = 0; x < content.length; x++) { + let rowCols = `
${content[x]}
`; + finalRow.innerHTML += rowCols; + } } + + // Clear Table (content div) function clearTable() { diff --git a/style.css b/style.css index 1a31169e..dec23b28 100644 --- a/style.css +++ b/style.css @@ -39,23 +39,21 @@ body { height: calc(100vh - 15vh); } -#content_col { +.rows { + height: 100vh; + /* border: solid 1px #000; */ display: flex; - width: 100%; - max-height: 20vh; - font-size: 0.7em; + flex-direction: row; + min-width: 100%; } -.info { +.row-cols { border: 1px solid black; width: 100%; - min-height: 10vh; + height: 10vh; display: grid; place-items: center; -} - -#info_id { - font-size: 2em; + font-size: 1em; } .nav { From dfc1c75784e98642888d93a887fd2f94e1998bf5 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Wed, 20 Apr 2022 14:53:15 +0200 Subject: [PATCH 13/44] revised code --- app.ts | 84 +++++++++++++++++++++++--------------------------- server/main.go | 4 +-- 2 files changed, 41 insertions(+), 47 deletions(-) diff --git a/app.ts b/app.ts index 1f9f1852..323c64ec 100644 --- a/app.ts +++ b/app.ts @@ -87,14 +87,8 @@ window.onload = function() { //// Targets heading div to creating the 1st row(Column names) function colHeading(heading: string) { - if (heading == "ID") { - let headingCol = `
${heading}
`; - headings.innerHTML += headingCol; - } - else { - let headingCol = `
${heading}
`; - headings.innerHTML += headingCol; - } + let headingCol = `
${heading}
`; + headings.innerHTML += headingCol; } //// Targets content div to create the actual table and fill with data @@ -122,39 +116,39 @@ function clearTable() { content_cols.innerHTML = clear } -// ID Search - -window.addEventListener("keydown", (e) => { - let key = e.key; - - if (key === "Enter") { - let search: any = document.querySelector('#idInput'); - clearTable() - if (search.value != "" && search.value < 1000000 && search.value >= 0) { - pageStats.innerHTML = clear - let searchStats = "Showing result with ID of " + search.value; - pageStats.innerHTML = searchStats; - fetch("http://localhost:2050/records?from=" + search.value + "&to=" + search.value, { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let contentList = data; - for (let i = 0; i < contentList.length; i++) { - contentNeeded.push(contentList[i]) - cols(contentList[i]) - } - }); - } else { - alert("There are no results with that ID!") - stats() - getTable() - } - search.value = clear - } -}) +// // ID Search + +// window.addEventListener("keydown", (e) => { +// let key = e.key; + +// if (key === "Enter") { +// let search: any = document.querySelector('#idInput'); +// clearTable() +// if (search.value != "" && search.value < 1000000 && search.value >= 0) { +// pageStats.innerHTML = clear +// let searchStats = "Showing result with ID of " + search.value; +// pageStats.innerHTML = searchStats; +// fetch("http://localhost:2050/records?from=" + search.value + "&to=" + search.value, { +// method: "GET", +// headers: { "Content-Type": "application/json" }, +// }) +// .then((res) => res.text()) +// .then((data) => { +// data = JSON.parse(data); +// let contentList = data; +// for (let i = 0; i < contentList.length; i++) { +// contentNeeded.push(contentList[i]) +// cols(contentList[i]) +// } +// }); +// } else { +// alert("There are no results with that ID!") +// stats() +// getTable() +// } +// search.value = clear +// } +// }) // Jump to ID @@ -273,8 +267,8 @@ nextButton.addEventListener("click", () => { clearTimeout(nextBtnStatus) nextCounter += 1 nextBtnStatus = true - nextTurnFalse = setTimeout(nextBtnFalse, 2000) - nextActCheck = setTimeout(nextCheck, 2100) + nextTurnFalse = setTimeout(nextBtnFalse, 100) + nextActCheck = setTimeout(nextCheck, 200) }) function nextBtnFalse() { @@ -341,8 +335,8 @@ prevButton.addEventListener("click", () => { clearTimeout(prevBtnStatus) prevCounter += 1 prevBtnStatus = true - prevTurnFalse = setTimeout(prevBtnFalse, 2000) - prevActCheck = setTimeout(prevCheck, 2100) + prevTurnFalse = setTimeout(prevBtnFalse, 100) + prevActCheck = setTimeout(prevCheck, 200) }) function prevBtnFalse() { diff --git a/server/main.go b/server/main.go index eba62f8c..db7e1215 100644 --- a/server/main.go +++ b/server/main.go @@ -14,10 +14,10 @@ import ( ) const recordCount = 1000000 -const columnCount = 11 +const columnCount = 12 const delayResponse = 500 * time.Millisecond -var columns = [columnCount]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J"} +var columns = [columnCount]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"} var letters = []rune("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ") func main() { From 6c53b8d57d044755eac32408e2bc9756510e9646 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Thu, 21 Apr 2022 15:52:57 +0200 Subject: [PATCH 14/44] window resizing --- app.ts | 341 +++++++++++++++++++++++++++++++++++------------------- style.css | 13 ++- 2 files changed, 230 insertions(+), 124 deletions(-) diff --git a/app.ts b/app.ts index 323c64ec..5f98a8f6 100644 --- a/app.ts +++ b/app.ts @@ -6,10 +6,9 @@ const clear = ""; const nextButton: any = document.querySelector("#next"); const prevButton: any = document.querySelector("#prev"); let arrChild: any = [] -let paramOne: any = 0 -let paramTwo: any = 9 +let paramOne: any = "0" +let paramTwo: any = "9" let contentNeeded: any = []; -let contentListNeeded: any = [] let nextCounter = 0; let nextBtnStatus: any = false; let nextTurnFalse: any; @@ -49,7 +48,6 @@ function getTable() { .then((data) => { data = JSON.parse(data); let contentList = data; - // console.log(contentList); for (let i = 0; i < contentList.length; i++) { let contentListContent: any = contentList[i] cols(contentListContent) @@ -77,9 +75,41 @@ function stats() { // Loads all intial fields/data window.onload = function() { - stats() - getColumns() - getTable() + let windowHeight = window.innerHeight; + + if (windowHeight < 600 && windowHeight >= 480) { + paramOne = paramOne + paramTwo = parseInt(paramOne) + 6 + paramTwo = paramTwo.toString() + stats() + getColumns() + getTable() + } else if (windowHeight < 480 && windowHeight >= 400) { + paramOne = paramOne + paramTwo = parseInt(paramOne) + 4 + paramTwo = paramTwo.toString() + stats() + getColumns() + getTable() + } else if (windowHeight < 400 && windowHeight > 300) { + paramOne = paramOne + paramTwo = parseInt(paramOne) + 2 + paramTwo = paramTwo.toString() + stats() + getColumns() + getTable() + } else if (windowHeight <= 300) { + paramOne = paramOne + paramTwo = parseInt(paramOne) + 1 + paramTwo = paramTwo.toString() + stats() + getColumns() + getTable() + } else { + stats() + getColumns() + getTable() + } } // Displaying data into html @@ -108,54 +138,37 @@ function cols(content: any) { } } - - // Clear Table (content div) function clearTable() { content_cols.innerHTML = clear } -// // ID Search - -// window.addEventListener("keydown", (e) => { -// let key = e.key; - -// if (key === "Enter") { -// let search: any = document.querySelector('#idInput'); -// clearTable() -// if (search.value != "" && search.value < 1000000 && search.value >= 0) { -// pageStats.innerHTML = clear -// let searchStats = "Showing result with ID of " + search.value; -// pageStats.innerHTML = searchStats; -// fetch("http://localhost:2050/records?from=" + search.value + "&to=" + search.value, { -// method: "GET", -// headers: { "Content-Type": "application/json" }, -// }) -// .then((res) => res.text()) -// .then((data) => { -// data = JSON.parse(data); -// let contentList = data; -// for (let i = 0; i < contentList.length; i++) { -// contentNeeded.push(contentList[i]) -// cols(contentList[i]) -// } -// }); -// } else { -// alert("There are no results with that ID!") -// stats() -// getTable() -// } -// search.value = clear -// } -// }) - // Jump to ID function idJump() { + let windowHeight = window.innerHeight; + let toConvert: any; + + if (windowHeight < 600 && windowHeight >= 480) { + toConvert = 6 + } + else if (windowHeight < 480 && windowHeight >= 400) { + toConvert = 4 + } + else if (windowHeight < 400 && windowHeight > 300) { + toConvert = 2 + } + else if (windowHeight <= 300) { + toConvert = 1 + } + else { + toConvert = 9 + } + let search: any = document.querySelector('#idJump'); let searchOne = search.value - let convert = parseInt(searchOne) + 9 + let convert = parseInt(searchOne) + toConvert let searchTwo = convert.toString() paramOne = searchOne paramTwo = searchTwo @@ -176,7 +189,8 @@ function idJump() { } }); stats() - } else if ( searchOne > 999990 && searchOne < 1000000 && searchOne >= 0 && searchOne !== 'e') { + } + else if ( searchOne > 999990 && searchOne < 1000000 && searchOne >= 0 && searchOne !== 'e') { clearTable() fetch("http://localhost:2050/records?from=" + searchOne + "&to=" + 999999, { method: "GET", @@ -202,7 +216,8 @@ function idJump() { let currentStats = "Showing results from ID " + searchOne + " to " + 999999 + " out of " + count + " results."; pageStats.innerHTML = currentStats; }) - } else { + } + else { alert("There are no records with that ID! Please check that your input does not exceed 999 999 and is not a negative amount.") clearTable() paramOne = 0 @@ -218,46 +233,19 @@ function idJump() { //// Next Function function next() { - if (paramTwo < 999999) { + if (paramTwo == 999999) { + paramOne = "0" + + resizing() + } else { + let nextAmount: any = (paramTwo - paramOne) + 1 - let intOne = parseInt(paramOne) + (10 * nextCounter) - let intTwo = parseInt(paramTwo) + (10 * nextCounter) + let intOne = parseInt(paramOne) + (nextAmount * nextCounter) + let intTwo = parseInt(paramTwo) + (nextAmount * nextCounter) paramOne = intOne.toString() paramTwo = intTwo.toString() - stats() - clearTable() - fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let contentList = data; - for (let i = 0; i < contentList.length; i++) { - contentNeeded.push(contentList[i]) - cols(contentList[i]) - } - }); - } else { - paramOne = 0 - paramTwo = 9 - stats() - clearTable() - fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let contentList = data; - for (let i = 0; i < contentList.length; i++) { - contentNeeded.push(contentList[i]) - cols(contentList[i]) - } - }); + resizing() } nextCounter = 0 } @@ -286,46 +274,19 @@ function nextCheck() { //// Prev Function function prev() { - if (paramOne >= 10) { + if (paramOne == 0) { + paramTwo = "999999" + + prevRe() + } else { + let prevAmount: any = (paramTwo - paramOne) + 1 - let intOne = parseInt(paramOne) - (10 * prevCounter) - let intTwo = parseInt(paramTwo) - (10 * prevCounter) + let intOne = parseInt(paramOne) - (prevAmount * prevCounter) + let intTwo = parseInt(paramTwo) - (prevAmount * prevCounter) paramOne = intOne.toString() paramTwo = intTwo.toString() - - stats() - clearTable() - fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let contentList = data; - for (let i = 0; i < contentList.length; i++) { - contentNeeded.push(contentList[i]) - cols(contentList[i]) - } - }); - } else { - paramOne = 999990 - paramTwo = 999999 - stats() - clearTable() - fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let contentList = data; - for (let i = 0; i < contentList.length; i++) { - contentNeeded.push(contentList[i]) - cols(contentList[i]) - } - }); + + prevRe() } prevCounter = 0 } @@ -349,4 +310,146 @@ function prevCheck() { } else { prev() } +} + + + + +function resizing() { + let windowHeight = window.innerHeight; + + if (windowHeight < 600 && windowHeight >= 480) { + if (paramOne > 999993) { + paramOne = 999993 + } else { + //pass + } + paramTwo = parseInt(paramOne) + 6 + paramTwo = paramTwo.toString() + clearTable() + stats() + getTable() + } + else if (windowHeight < 480 && windowHeight >= 400) { + if (paramOne > 999995) { + paramOne = 999995 + } else { + //pass + } + paramTwo = parseInt(paramOne) + 4 + paramTwo = paramTwo.toString() + clearTable() + stats() + getTable() + } + else if (windowHeight < 400 && windowHeight > 300) { + if (paramOne > 999997) { + paramOne = 999997 + } else { + //pass + } + paramTwo = parseInt(paramOne) + 2 + paramTwo = paramTwo.toString() + clearTable() + stats() + getTable() + } + else if (windowHeight <= 300) { + if (paramOne > 999998) { + paramOne = 999998 + } else { + //pass + } + paramTwo = parseInt(paramOne) + 1 + paramTwo = paramTwo.toString() + clearTable() + stats() + getTable() + } + else { + if (paramOne > 999990) { + paramOne = 999990 + } else { + //pass + } + paramTwo = parseInt(paramOne) + 9 + paramTwo = paramTwo.toString() + clearTable() + stats() + getTable() + } +} + +let runit: any; + +window.addEventListener("resize", () => { + clearTimeout(runit); + runit = setTimeout(resizing, 100) + +}); + + +function prevRe() { + let windowHeight = window.innerHeight; + + if (windowHeight < 600 && windowHeight >= 480) { + if (paramOne == 0) { + paramOne = 999993 + } else { + //pass + } + paramTwo = parseInt(paramOne) + 6 + paramTwo = paramTwo.toString() + clearTable() + stats() + getTable() + } + else if (windowHeight < 480 && windowHeight >= 400) { + if (paramOne == 0) { + paramOne = 999995 + } else { + //pass + } + paramTwo = parseInt(paramOne) + 4 + paramTwo = paramTwo.toString() + clearTable() + stats() + getTable() + } + else if (windowHeight < 400 && windowHeight > 300) { + if (paramOne == 0) { + paramOne = 999997 + } else { + //pass + } + paramTwo = parseInt(paramOne) + 2 + paramTwo = paramTwo.toString() + clearTable() + stats() + getTable() + } + else if (windowHeight <= 300) { + if (paramOne == 0) { + paramOne = 999999 + } else { + //pass + } + paramTwo = parseInt(paramOne) + 1 + paramTwo = paramTwo.toString() + clearTable() + stats() + getTable() + } + else { + if (paramOne == 0) { + paramOne = 999990 + } else { + //pass + } + paramTwo = parseInt(paramOne) + 9 + paramTwo = paramTwo.toString() + clearTable() + stats() + getTable() + } } \ No newline at end of file diff --git a/style.css b/style.css index dec23b28..b754d5d5 100644 --- a/style.css +++ b/style.css @@ -2,12 +2,13 @@ padding: 0; margin: 0; box-sizing: border-box; - overflow-y: hidden; } body { height: 100vh; width: 100%; + overflow-y: hidden; + overflow-x: hidden; } #Headings { @@ -19,10 +20,11 @@ body { #col_heading { border: 1px solid black; width: 100%; - height: 10vh; + min-height: 10vh; display: grid; place-items: center; font-size: 2em; + padding: 1px; } #col_heading input { @@ -41,7 +43,6 @@ body { .rows { height: 100vh; - /* border: solid 1px #000; */ display: flex; flex-direction: row; min-width: 100%; @@ -49,18 +50,20 @@ body { .row-cols { border: 1px solid black; + height: 100%; width: 100%; - height: 10vh; display: grid; place-items: center; font-size: 1em; + padding: 1px; } .nav { - height: 5vh; + min-height: 5vh; display: grid; place-items: center; background-color: #000; + padding: 1px; } #pageStats { From 6a9233bae9307fdb5edacc0c5209c24884a67bbb Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Thu, 21 Apr 2022 16:13:56 +0200 Subject: [PATCH 15/44] window resizing --- app.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/app.ts b/app.ts index 5f98a8f6..0665cdd8 100644 --- a/app.ts +++ b/app.ts @@ -123,7 +123,6 @@ function colHeading(heading: string) { //// Targets content div to create the actual table and fill with data -let columnRowData: any = [] function cols(content: any) { let rows = `
`; @@ -381,13 +380,21 @@ function resizing() { } let runit: any; +let resizeInProgress: any = false +let resizeStatus: any; window.addEventListener("resize", () => { clearTimeout(runit); - runit = setTimeout(resizing, 100) + clearTimeout(resizeStatus) + resizeInProgress = true + resizeStatus = setTimeout(resizeStatusFalse, 100) + runit = setTimeout(resizing, 200) }); +function resizeStatusFalse() { + resizeInProgress = false +} function prevRe() { let windowHeight = window.innerHeight; From 708034d9e2acc01e21b086e5861fbda0bcc93458 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Fri, 22 Apr 2022 09:56:53 +0200 Subject: [PATCH 16/44] window resizing --- app.ts | 127 +++++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 88 insertions(+), 39 deletions(-) diff --git a/app.ts b/app.ts index 0665cdd8..f28fabad 100644 --- a/app.ts +++ b/app.ts @@ -273,21 +273,95 @@ function nextCheck() { //// Prev Function function prev() { - if (paramOne == 0) { - paramTwo = "999999" - - prevRe() - } else { - let prevAmount: any = (paramTwo - paramOne) + 1 - - let intOne = parseInt(paramOne) - (prevAmount * prevCounter) - let intTwo = parseInt(paramTwo) - (prevAmount * prevCounter) - paramOne = intOne.toString() - paramTwo = intTwo.toString() + let windowHeight = window.innerHeight; - prevRe() + if (windowHeight < 600 && windowHeight >= 480) { + if (paramOne <= 6) { + paramOne = 999993 + prevRe() + } else { + let prevAmount: any = (paramTwo - paramOne) + 1 + + let intOne = parseInt(paramOne) - (prevAmount * prevCounter) + let intTwo = parseInt(paramTwo) - (prevAmount * prevCounter) + paramOne = intOne.toString() + paramTwo = intTwo.toString() + console.log("more than 6"); + console.log(intOne); + + prevRe() + } + prevCounter = 0 + } + else if (windowHeight < 480 && windowHeight >= 400) { + if (paramOne <= 4) { + paramOne = 999995 + + prevRe() + } else { + let prevAmount: any = (paramTwo - paramOne) + 1 + + let intOne = parseInt(paramOne) - (prevAmount * prevCounter) + let intTwo = parseInt(paramTwo) - (prevAmount * prevCounter) + paramOne = intOne.toString() + paramTwo = intTwo.toString() + + prevRe() + } + prevCounter = 0 + } + else if (windowHeight < 400 && windowHeight > 300) { + if (paramOne <= 2) { + paramOne = 999997 + + prevRe() + } else { + let prevAmount: any = (paramTwo - paramOne) + 1 + + let intOne = parseInt(paramOne) - (prevAmount * prevCounter) + let intTwo = parseInt(paramTwo) - (prevAmount * prevCounter) + paramOne = intOne.toString() + paramTwo = intTwo.toString() + + prevRe() + } + prevCounter = 0 + } + else if (windowHeight <= 300) { + if (paramOne <= 1) { + paramOne = 999998 + + prevRe() + } else { + let prevAmount: any = (paramTwo - paramOne) + 1 + + let intOne = parseInt(paramOne) - (prevAmount * prevCounter) + let intTwo = parseInt(paramTwo) - (prevAmount * prevCounter) + paramOne = intOne.toString() + paramTwo = intTwo.toString() + + prevRe() + } + prevCounter = 0 } - prevCounter = 0 + else { + if (paramOne <= 9) { + paramOne = 999990 + + prevRe() + } else { + let prevAmount: any = (paramTwo - paramOne) + 1 + + let intOne = parseInt(paramOne) - (prevAmount * prevCounter) + let intTwo = parseInt(paramTwo) - (prevAmount * prevCounter) + paramOne = intOne.toString() + paramTwo = intTwo.toString() + + prevRe() + } + prevCounter = 0 + } + } prevButton.addEventListener("click", () => { @@ -367,7 +441,7 @@ function resizing() { } else { if (paramOne > 999990) { - paramOne = 999990 + paramOne = 0 } else { //pass } @@ -400,11 +474,6 @@ function prevRe() { let windowHeight = window.innerHeight; if (windowHeight < 600 && windowHeight >= 480) { - if (paramOne == 0) { - paramOne = 999993 - } else { - //pass - } paramTwo = parseInt(paramOne) + 6 paramTwo = paramTwo.toString() clearTable() @@ -412,11 +481,6 @@ function prevRe() { getTable() } else if (windowHeight < 480 && windowHeight >= 400) { - if (paramOne == 0) { - paramOne = 999995 - } else { - //pass - } paramTwo = parseInt(paramOne) + 4 paramTwo = paramTwo.toString() clearTable() @@ -424,11 +488,6 @@ function prevRe() { getTable() } else if (windowHeight < 400 && windowHeight > 300) { - if (paramOne == 0) { - paramOne = 999997 - } else { - //pass - } paramTwo = parseInt(paramOne) + 2 paramTwo = paramTwo.toString() clearTable() @@ -436,11 +495,6 @@ function prevRe() { getTable() } else if (windowHeight <= 300) { - if (paramOne == 0) { - paramOne = 999999 - } else { - //pass - } paramTwo = parseInt(paramOne) + 1 paramTwo = paramTwo.toString() clearTable() @@ -448,11 +502,6 @@ function prevRe() { getTable() } else { - if (paramOne == 0) { - paramOne = 999990 - } else { - //pass - } paramTwo = parseInt(paramOne) + 9 paramTwo = paramTwo.toString() clearTable() From 027f2901955f1d503122dc49e0d9be59b3feca5f Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Mon, 25 Apr 2022 10:47:32 +0200 Subject: [PATCH 17/44] resize --- app.ts | 42 ++++++++++++++++-------------------------- style.css | 11 ++++++----- 2 files changed, 22 insertions(+), 31 deletions(-) diff --git a/app.ts b/app.ts index f28fabad..89cfba77 100644 --- a/app.ts +++ b/app.ts @@ -191,7 +191,9 @@ function idJump() { } else if ( searchOne > 999990 && searchOne < 1000000 && searchOne >= 0 && searchOne !== 'e') { clearTable() - fetch("http://localhost:2050/records?from=" + searchOne + "&to=" + 999999, { + let lastParamOne = 999999 - toConvert + + fetch("http://localhost:2050/records?from=" + lastParamOne + "&to=" + 999999, { method: "GET", headers: { "Content-Type": "application/json" }, }) @@ -212,17 +214,12 @@ function idJump() { .then((data) => { data = JSON.parse(data); let count = data; - let currentStats = "Showing results from ID " + searchOne + " to " + 999999 + " out of " + count + " results."; + let currentStats = "Showing results from ID " + lastParamOne + " to " + 999999 + " out of " + count + " results."; pageStats.innerHTML = currentStats; }) } else { alert("There are no records with that ID! Please check that your input does not exceed 999 999 and is not a negative amount.") - clearTable() - paramOne = 0 - paramTwo = 9 - stats() - getTable() } search.value = clear } @@ -233,9 +230,7 @@ function idJump() { function next() { if (paramTwo == 999999) { - paramOne = "0" - - resizing() + alert("You have reached the final page") } else { let nextAmount: any = (paramTwo - paramOne) + 1 @@ -277,8 +272,8 @@ function prev() { if (windowHeight < 600 && windowHeight >= 480) { if (paramOne <= 6) { - paramOne = 999993 - prevRe() + paramOne = 0 + alert("This is the first page") } else { let prevAmount: any = (paramTwo - paramOne) + 1 @@ -295,9 +290,8 @@ function prev() { } else if (windowHeight < 480 && windowHeight >= 400) { if (paramOne <= 4) { - paramOne = 999995 - - prevRe() + paramOne = 0 + alert("This is the first page") } else { let prevAmount: any = (paramTwo - paramOne) + 1 @@ -312,9 +306,8 @@ function prev() { } else if (windowHeight < 400 && windowHeight > 300) { if (paramOne <= 2) { - paramOne = 999997 - - prevRe() + paramOne = 0 + alert("This is the first page") } else { let prevAmount: any = (paramTwo - paramOne) + 1 @@ -329,9 +322,8 @@ function prev() { } else if (windowHeight <= 300) { if (paramOne <= 1) { - paramOne = 999998 - - prevRe() + paramOne = 0 + alert("This is the first page") } else { let prevAmount: any = (paramTwo - paramOne) + 1 @@ -346,9 +338,8 @@ function prev() { } else { if (paramOne <= 9) { - paramOne = 999990 - - prevRe() + paramOne = 0 + alert("This is the first page") } else { let prevAmount: any = (paramTwo - paramOne) + 1 @@ -441,7 +432,7 @@ function resizing() { } else { if (paramOne > 999990) { - paramOne = 0 + paramOne = 999990 } else { //pass } @@ -463,7 +454,6 @@ window.addEventListener("resize", () => { resizeInProgress = true resizeStatus = setTimeout(resizeStatusFalse, 100) runit = setTimeout(resizing, 200) - }); function resizeStatusFalse() { diff --git a/style.css b/style.css index b754d5d5..d2bf415f 100644 --- a/style.css +++ b/style.css @@ -9,6 +9,7 @@ body { width: 100%; overflow-y: hidden; overflow-x: hidden; + font-size: 15px; } #Headings { @@ -23,14 +24,14 @@ body { min-height: 10vh; display: grid; place-items: center; - font-size: 2em; + /* font-size: 2em; */ padding: 1px; } #col_heading input { width: 90%; padding: 5px; - font-size: 0.9rem; + /* font-size: 0.9rem; */ text-align: center; } @@ -54,7 +55,7 @@ body { width: 100%; display: grid; place-items: center; - font-size: 1em; + /* font-size: 1em; */ padding: 1px; } @@ -68,7 +69,7 @@ body { #pageStats { color: #fff; - font-size:1.1em; + /* font-size:1.1em; */ padding: 5px; position: absolute; left: 1%; @@ -77,7 +78,7 @@ body { #jumpID { color: #fff; - font-size: 1.1em; + /* font-size: 1.1em; */ padding: 5px; display: flex; flex-direction: row; From c4039efc640a8cc4b01c6772af3719483858beca Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Mon, 25 Apr 2022 11:43:03 +0200 Subject: [PATCH 18/44] debounce implimented --- app.ts | 137 +++++++++++++++++++++++---------------------------------- 1 file changed, 55 insertions(+), 82 deletions(-) diff --git a/app.ts b/app.ts index 89cfba77..7a3eb241 100644 --- a/app.ts +++ b/app.ts @@ -5,18 +5,9 @@ const pageStats: any = document.getElementById('pageStats') const clear = ""; const nextButton: any = document.querySelector("#next"); const prevButton: any = document.querySelector("#prev"); -let arrChild: any = [] let paramOne: any = "0" let paramTwo: any = "9" let contentNeeded: any = []; -let nextCounter = 0; -let nextBtnStatus: any = false; -let nextTurnFalse: any; -let nextActCheck: any; -let prevCounter = 0; -let prevBtnStatus: any = false; -let prevTurnFalse: any; -let prevActCheck: any; // Fetch requests @@ -228,46 +219,49 @@ function idJump() { //// Next Function -function next() { +const nextDebounce = (fn: any, delay: any) => { + let timer: any; + return function() { + clearTimeout(timer) + timer = setTimeout(() => { + fn() + }, delay) + } +} + +let next = () => { + if (paramTwo == 999999) { alert("You have reached the final page") } else { let nextAmount: any = (paramTwo - paramOne) + 1 - - let intOne = parseInt(paramOne) + (nextAmount * nextCounter) - let intTwo = parseInt(paramTwo) + (nextAmount * nextCounter) + + let intOne = parseInt(paramOne) + nextAmount + let intTwo = parseInt(paramTwo) + nextAmount paramOne = intOne.toString() paramTwo = intTwo.toString() resizing() } - nextCounter = 0 } -nextButton.addEventListener("click", () => { - clearTimeout(nextTurnFalse) - clearTimeout(nextBtnStatus) - nextCounter += 1 - nextBtnStatus = true - nextTurnFalse = setTimeout(nextBtnFalse, 100) - nextActCheck = setTimeout(nextCheck, 200) -}) +next = nextDebounce(next, 500) -function nextBtnFalse() { - nextBtnStatus = false -} +nextButton.addEventListener("click", next) -function nextCheck() { - if (nextBtnStatus) { - // pass - } else { - next() +//// Prev Function + +const prevDebounce = (fn: any, delay: any) => { + let timer: any; + return function() { + clearTimeout(timer) + timer = setTimeout(() => { + fn() + }, delay) } } -//// Prev Function - -function prev() { +let prev = () => { let windowHeight = window.innerHeight; if (windowHeight < 600 && windowHeight >= 480) { @@ -277,16 +271,13 @@ function prev() { } else { let prevAmount: any = (paramTwo - paramOne) + 1 - let intOne = parseInt(paramOne) - (prevAmount * prevCounter) - let intTwo = parseInt(paramTwo) - (prevAmount * prevCounter) + let intOne = parseInt(paramOne) - prevAmount + let intTwo = parseInt(paramTwo) - prevAmount paramOne = intOne.toString() paramTwo = intTwo.toString() - console.log("more than 6"); - console.log(intOne); prevRe() } - prevCounter = 0 } else if (windowHeight < 480 && windowHeight >= 400) { if (paramOne <= 4) { @@ -295,14 +286,13 @@ function prev() { } else { let prevAmount: any = (paramTwo - paramOne) + 1 - let intOne = parseInt(paramOne) - (prevAmount * prevCounter) - let intTwo = parseInt(paramTwo) - (prevAmount * prevCounter) + let intOne = parseInt(paramOne) - prevAmount + let intTwo = parseInt(paramTwo) - prevAmount paramOne = intOne.toString() paramTwo = intTwo.toString() prevRe() } - prevCounter = 0 } else if (windowHeight < 400 && windowHeight > 300) { if (paramOne <= 2) { @@ -311,14 +301,13 @@ function prev() { } else { let prevAmount: any = (paramTwo - paramOne) + 1 - let intOne = parseInt(paramOne) - (prevAmount * prevCounter) - let intTwo = parseInt(paramTwo) - (prevAmount * prevCounter) + let intOne = parseInt(paramOne) - prevAmount + let intTwo = parseInt(paramTwo) - prevAmount paramOne = intOne.toString() paramTwo = intTwo.toString() prevRe() } - prevCounter = 0 } else if (windowHeight <= 300) { if (paramOne <= 1) { @@ -327,14 +316,13 @@ function prev() { } else { let prevAmount: any = (paramTwo - paramOne) + 1 - let intOne = parseInt(paramOne) - (prevAmount * prevCounter) - let intTwo = parseInt(paramTwo) - (prevAmount * prevCounter) + let intOne = parseInt(paramOne) - prevAmount + let intTwo = parseInt(paramTwo) - prevAmount paramOne = intOne.toString() paramTwo = intTwo.toString() prevRe() } - prevCounter = 0 } else { if (paramOne <= 9) { @@ -343,43 +331,37 @@ function prev() { } else { let prevAmount: any = (paramTwo - paramOne) + 1 - let intOne = parseInt(paramOne) - (prevAmount * prevCounter) - let intTwo = parseInt(paramTwo) - (prevAmount * prevCounter) + let intOne = parseInt(paramOne) - prevAmount + let intTwo = parseInt(paramTwo) - prevAmount paramOne = intOne.toString() paramTwo = intTwo.toString() prevRe() } - prevCounter = 0 } } -prevButton.addEventListener("click", () => { - clearTimeout(prevTurnFalse) - clearTimeout(prevBtnStatus) - prevCounter += 1 - prevBtnStatus = true - prevTurnFalse = setTimeout(prevBtnFalse, 100) - prevActCheck = setTimeout(prevCheck, 200) -}) +prev = prevDebounce(prev, 500) -function prevBtnFalse() { - prevBtnStatus = false -} +prevButton.addEventListener("click", prev) -function prevCheck() { - if (prevBtnStatus) { - // pass - } else { - prev() - } -} +// Resizing +let count = 0; +const debounce = (fn: any, delay: any) => { + let timer: any; + return function() { + clearTimeout(timer) + timer = setTimeout(() => { + fn() + }, delay) + } +} -function resizing() { +let resizing = () => { let windowHeight = window.innerHeight; if (windowHeight < 600 && windowHeight >= 480) { @@ -436,7 +418,9 @@ function resizing() { } else { //pass } + paramTwo = parseInt(paramOne) + 9 + paramTwo = paramTwo.toString() clearTable() stats() @@ -444,21 +428,10 @@ function resizing() { } } -let runit: any; -let resizeInProgress: any = false -let resizeStatus: any; +resizing = debounce(resizing, 500) -window.addEventListener("resize", () => { - clearTimeout(runit); - clearTimeout(resizeStatus) - resizeInProgress = true - resizeStatus = setTimeout(resizeStatusFalse, 100) - runit = setTimeout(resizing, 200) -}); +window.addEventListener("resize", resizing) -function resizeStatusFalse() { - resizeInProgress = false -} function prevRe() { let windowHeight = window.innerHeight; From ecceaf0bebeef736a45352cf1056a3a4939f2c55 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Mon, 25 Apr 2022 13:44:20 +0200 Subject: [PATCH 19/44] debounce implimented --- app.ts | 9 ++++----- style.css | 24 +++++++++++++----------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/app.ts b/app.ts index 7a3eb241..bd531688 100644 --- a/app.ts +++ b/app.ts @@ -1,10 +1,9 @@ const headings: any = document.querySelector("#Headings"); const content_cols: any = document.querySelector("#Content"); -const lists: any = document.querySelector('#content_row') const pageStats: any = document.getElementById('pageStats') -const clear = ""; const nextButton: any = document.querySelector("#next"); const prevButton: any = document.querySelector("#prev"); +const clear = ""; let paramOne: any = "0" let paramTwo: any = "9" let contentNeeded: any = []; @@ -245,7 +244,7 @@ let next = () => { } } -next = nextDebounce(next, 500) +next = nextDebounce(next, 200) nextButton.addEventListener("click", next) @@ -342,7 +341,7 @@ let prev = () => { } -prev = prevDebounce(prev, 500) +prev = prevDebounce(prev, 200) prevButton.addEventListener("click", prev) @@ -428,7 +427,7 @@ let resizing = () => { } } -resizing = debounce(resizing, 500) +resizing = debounce(resizing, 200) window.addEventListener("resize", resizing) diff --git a/style.css b/style.css index d2bf415f..8b5fadc7 100644 --- a/style.css +++ b/style.css @@ -24,17 +24,9 @@ body { min-height: 10vh; display: grid; place-items: center; - /* font-size: 2em; */ padding: 1px; } -#col_heading input { - width: 90%; - padding: 5px; - /* font-size: 0.9rem; */ - text-align: center; -} - #Content { display: flex; flex-direction: column; @@ -55,8 +47,6 @@ body { width: 100%; display: grid; place-items: center; - /* font-size: 1em; */ - padding: 1px; } .nav { @@ -96,7 +86,7 @@ body { border-radius: 50px; border: 1px solid black; width: 120px; - margin: 0 25px; + margin: 0 35px; font-weight: bold; text-transform: capitalize; transition: ease-in 0.3s; @@ -126,3 +116,15 @@ body { .btns button:hover { letter-spacing: 3px; } + +@media screen and (max-width: 1050px) { + #pageStats { + font-size: 0.8em; + } + + #jumpID { + display: flex; + flex-direction: column; + justify-content: center; + } +} \ No newline at end of file From 5ff356396a458228aa3b8cf74a7231be8fc7e41a Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Mon, 25 Apr 2022 16:09:31 +0200 Subject: [PATCH 20/44] debounce implimented --- app.ts | 6 +- style.css | 166 +++++++++++++++++++++++++----------------------------- 2 files changed, 79 insertions(+), 93 deletions(-) diff --git a/app.ts b/app.ts index bd531688..2d06e2ad 100644 --- a/app.ts +++ b/app.ts @@ -244,7 +244,7 @@ let next = () => { } } -next = nextDebounce(next, 200) +next = nextDebounce(next, 500) nextButton.addEventListener("click", next) @@ -341,7 +341,7 @@ let prev = () => { } -prev = prevDebounce(prev, 200) +prev = prevDebounce(prev, 500) prevButton.addEventListener("click", prev) @@ -427,7 +427,7 @@ let resizing = () => { } } -resizing = debounce(resizing, 200) +resizing = debounce(resizing, 500) window.addEventListener("resize", resizing) diff --git a/style.css b/style.css index 8b5fadc7..cea911c0 100644 --- a/style.css +++ b/style.css @@ -5,126 +5,112 @@ } body { - height: 100vh; - width: 100%; + font-size: 1em; overflow-y: hidden; overflow-x: hidden; - font-size: 15px; -} - -#Headings { - display: flex; - flex-direction: row; - min-width: 100%; -} - -#col_heading { - border: 1px solid black; width: 100%; - min-height: 10vh; - display: grid; - place-items: center; - padding: 1px; -} - -#Content { - display: flex; - flex-direction: column; - min-width: 100%; - height: calc(100vh - 15vh); -} - -.rows { height: 100vh; - display: flex; - flex-direction: row; - min-width: 100%; } -.row-cols { - border: 1px solid black; - height: 100%; - width: 100%; - display: grid; - place-items: center; -} +/* Navigation */ .nav { - min-height: 5vh; - display: grid; - place-items: center; background-color: #000; - padding: 1px; + display: flex; + flex-direction: row; + color: #fff; + height: 5%; + width: 100%; } #pageStats { - color: #fff; - /* font-size:1.1em; */ - padding: 5px; position: absolute; left: 1%; + top: 1%; } - #jumpID { - color: #fff; - /* font-size: 1.1em; */ - padding: 5px; - display: flex; - flex-direction: row; - text-align: center; - gap: 20px; + position: absolute; + left: 50%; + top: 1%; + transform: translate(-50%, -1%); } #jumpID input { + border: none; + margin-right: 20px; + padding: 7px 10px; text-align: center; - padding: 3px; - /* width: 100px; */ -} -#jumpID button { - padding: 5px; - cursor: pointer; - border-radius: 50px; - border: 1px solid black; - width: 120px; - margin: 0 35px; - font-weight: bold; - text-transform: capitalize; - transition: ease-in 0.3s; -} -#jumpID button:hover { - letter-spacing: 2px; } .btns { - color: #fff; - padding: 5px; position: absolute; right: 1%; + top: 1%; +} +.btns .next { + margin-left: 20px; } -.btns button { - padding: 5px; +button { + border: none; + padding: 5px 10px; + border-radius: 10px; + width: 100px; + color: #000; + background-color: #fff; cursor: pointer; - border-radius: 50px; - border: 1px solid black; - width: 80px; - margin: 0 25px; - font-weight: bold; - text-transform: uppercase; - transition: ease-in 0.3s; + transition: all 0.3s; + transition-timing-function: ease-in-out; } -.btns button:hover { - letter-spacing: 3px; +button:hover { + letter-spacing: 1px; + color: #fff; + background-color: #000; + border: 1px solid #fff; } -@media screen and (max-width: 1050px) { - #pageStats { - font-size: 0.8em; - } +/* Headings */ + +#Headings { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; + width: 100%; + height: 10vh; +} +#col_heading { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + font-size: 1em; + font-weight: bold; + border: 1px solid #000; +} - #jumpID { - display: flex; - flex-direction: column; - justify-content: center; - } +/* Table */ +#Content { + display: flex; + flex-direction: column; + height: calc(100vh - 15vh); + width: 100%; +} +.rows { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; + height: 100%; + width: 100%; +} +.row-cols { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + font-size: 0.8em; + border: 1px solid #000; } \ No newline at end of file From 405592dcbae80d44176eb4b05ed712748be310aa Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Tue, 26 Apr 2022 10:20:38 +0200 Subject: [PATCH 21/44] column aligning --- style.css | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/style.css b/style.css index cea911c0..38c0ff24 100644 --- a/style.css +++ b/style.css @@ -2,13 +2,11 @@ padding: 0; margin: 0; box-sizing: border-box; + overflow-y: hidden; + overflow-x: hidden; } body { - font-size: 1em; - overflow-y: hidden; - overflow-x: hidden; - width: 100%; height: 100vh; } @@ -99,7 +97,7 @@ button:hover { } .rows { display: flex; - justify-content: space-between; + justify-content: center; align-items: center; flex-direction: row; height: 100%; @@ -111,6 +109,13 @@ button:hover { align-items: center; height: 100%; width: 100%; - font-size: 0.8em; + font-size: 1em; border: 1px solid #000; + word-wrap: break-word; +} + +@media screen and (max-width:800px) { + .row-cols { + font-size: 0.7em; + } } \ No newline at end of file From c67502c8cae14c9d82458eeeacb4d672614ef5e5 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Tue, 26 Apr 2022 11:12:11 +0200 Subject: [PATCH 22/44] column aligning --- app.ts | 44 ++++++++++++++++++++++++++++++++++---------- 1 file changed, 34 insertions(+), 10 deletions(-) diff --git a/app.ts b/app.ts index 2d06e2ad..1f2a182e 100644 --- a/app.ts +++ b/app.ts @@ -264,9 +264,14 @@ let prev = () => { let windowHeight = window.innerHeight; if (windowHeight < 600 && windowHeight >= 480) { - if (paramOne <= 6) { - paramOne = 0 + if (paramOne == 0) { alert("This is the first page") + } + else if (paramOne <= 6) { + paramOne = 0 + clearTable() + stats() + getTable() } else { let prevAmount: any = (paramTwo - paramOne) + 1 @@ -279,9 +284,14 @@ let prev = () => { } } else if (windowHeight < 480 && windowHeight >= 400) { - if (paramOne <= 4) { - paramOne = 0 + if (paramOne == 0) { alert("This is the first page") + } + else if (paramOne <= 4) { + paramOne = 0 + clearTable() + stats() + getTable() } else { let prevAmount: any = (paramTwo - paramOne) + 1 @@ -294,9 +304,14 @@ let prev = () => { } } else if (windowHeight < 400 && windowHeight > 300) { - if (paramOne <= 2) { - paramOne = 0 + if (paramOne == 0) { alert("This is the first page") + } + else if (paramOne <= 2) { + paramOne = 0 + clearTable() + stats() + getTable() } else { let prevAmount: any = (paramTwo - paramOne) + 1 @@ -309,9 +324,14 @@ let prev = () => { } } else if (windowHeight <= 300) { - if (paramOne <= 1) { - paramOne = 0 + if (paramOne == 0) { alert("This is the first page") + } + else if (paramOne <= 1) { + paramOne = 0 + clearTable() + stats() + getTable() } else { let prevAmount: any = (paramTwo - paramOne) + 1 @@ -324,9 +344,13 @@ let prev = () => { } } else { - if (paramOne <= 9) { - paramOne = 0 + if (paramOne == 0) { alert("This is the first page") + } else if(paramOne <= 9) { + paramOne = 0 + clearTable() + stats() + getTable() } else { let prevAmount: any = (paramTwo - paramOne) + 1 From 7cf9e78ccb349bab4f78c2c76a6ad2071766c007 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Tue, 26 Apr 2022 14:40:13 +0200 Subject: [PATCH 23/44] final testing complete --- app.ts | 114 +++++++++++++++++++++++---------------------------------- 1 file changed, 45 insertions(+), 69 deletions(-) diff --git a/app.ts b/app.ts index 1f2a182e..e600e258 100644 --- a/app.ts +++ b/app.ts @@ -155,6 +155,8 @@ function idJump() { toConvert = 9 } + let currentOne: any = paramOne + let currentTwo: any = paramTwo let search: any = document.querySelector('#idJump'); let searchOne = search.value let convert = parseInt(searchOne) + toConvert @@ -164,52 +166,17 @@ function idJump() { if (searchOne !== "" && searchOne <= 999990 && searchOne >= 0 && searchOne !== 'e') { clearTable() - fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let contentList = data; - for (let i = 0; i < contentList.length; i++) { - contentNeeded.push(contentList[i]) - cols(contentList[i]) - } - }); + getTable() stats() } - else if ( searchOne > 999990 && searchOne < 1000000 && searchOne >= 0 && searchOne !== 'e') { - clearTable() - let lastParamOne = 999999 - toConvert - - fetch("http://localhost:2050/records?from=" + lastParamOne + "&to=" + 999999, { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let contentList = data; - for (let i = 0; i < contentList.length; i++) { - contentNeeded.push(contentList[i]) - cols(contentList[i]) - } - }); - fetch("http://localhost:2050/recordCount", { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let count = data; - let currentStats = "Showing results from ID " + lastParamOne + " to " + 999999 + " out of " + count + " results."; - pageStats.innerHTML = currentStats; - }) + else if ( searchOne > 999990 && searchOne < 1000000 && searchOne >= 0 && searchOne !== 'e') { + resizing() } else { + paramOne = currentOne + paramTwo = currentTwo alert("There are no records with that ID! Please check that your input does not exceed 999 999 and is not a negative amount.") + } search.value = clear } @@ -217,10 +184,12 @@ function idJump() { // Nav Buttons //// Next Function +let nextCount = 0 const nextDebounce = (fn: any, delay: any) => { let timer: any; return function() { + nextCount++ clearTimeout(timer) timer = setTimeout(() => { fn() @@ -234,12 +203,16 @@ let next = () => { alert("You have reached the final page") } else { let nextAmount: any = (paramTwo - paramOne) + 1 + let nextCountAmount: any = nextAmount * nextCount + - let intOne = parseInt(paramOne) + nextAmount - let intTwo = parseInt(paramTwo) + nextAmount + let intOne = parseInt(paramOne) + nextCountAmount + let intTwo = parseInt(paramTwo) + nextCountAmount paramOne = intOne.toString() paramTwo = intTwo.toString() + nextCount = 0 + resizing() } } @@ -250,9 +223,12 @@ nextButton.addEventListener("click", next) //// Prev Function +let prevCount = 0 + const prevDebounce = (fn: any, delay: any) => { let timer: any; return function() { + prevCount++ clearTimeout(timer) timer = setTimeout(() => { fn() @@ -269,16 +245,16 @@ let prev = () => { } else if (paramOne <= 6) { paramOne = 0 - clearTable() - stats() - getTable() + resizing() } else { let prevAmount: any = (paramTwo - paramOne) + 1 + let prevCountAmount = prevAmount * prevCount - let intOne = parseInt(paramOne) - prevAmount - let intTwo = parseInt(paramTwo) - prevAmount + let intOne = parseInt(paramOne) - prevCountAmount + let intTwo = parseInt(paramTwo) - prevCountAmount paramOne = intOne.toString() paramTwo = intTwo.toString() + prevCount = 0 prevRe() } @@ -289,16 +265,16 @@ let prev = () => { } else if (paramOne <= 4) { paramOne = 0 - clearTable() - stats() - getTable() + resizing() } else { let prevAmount: any = (paramTwo - paramOne) + 1 + let prevCountAmount = prevAmount * prevCount - let intOne = parseInt(paramOne) - prevAmount - let intTwo = parseInt(paramTwo) - prevAmount + let intOne = parseInt(paramOne) - prevCountAmount + let intTwo = parseInt(paramTwo) - prevCountAmount paramOne = intOne.toString() paramTwo = intTwo.toString() + prevCount = 0 prevRe() } @@ -309,16 +285,16 @@ let prev = () => { } else if (paramOne <= 2) { paramOne = 0 - clearTable() - stats() - getTable() + resizing() } else { let prevAmount: any = (paramTwo - paramOne) + 1 + let prevCountAmount = prevAmount * prevCount - let intOne = parseInt(paramOne) - prevAmount - let intTwo = parseInt(paramTwo) - prevAmount + let intOne = parseInt(paramOne) - prevCountAmount + let intTwo = parseInt(paramTwo) - prevCountAmount paramOne = intOne.toString() paramTwo = intTwo.toString() + prevCount = 0 prevRe() } @@ -329,16 +305,16 @@ let prev = () => { } else if (paramOne <= 1) { paramOne = 0 - clearTable() - stats() - getTable() + resizing() } else { let prevAmount: any = (paramTwo - paramOne) + 1 + let prevCountAmount = prevAmount * prevCount - let intOne = parseInt(paramOne) - prevAmount - let intTwo = parseInt(paramTwo) - prevAmount + let intOne = parseInt(paramOne) - prevCountAmount + let intTwo = parseInt(paramTwo) - prevCountAmount paramOne = intOne.toString() paramTwo = intTwo.toString() + prevCount = 0 prevRe() } @@ -348,16 +324,16 @@ let prev = () => { alert("This is the first page") } else if(paramOne <= 9) { paramOne = 0 - clearTable() - stats() - getTable() + resizing() } else { let prevAmount: any = (paramTwo - paramOne) + 1 + let prevCountAmount = prevAmount * prevCount - let intOne = parseInt(paramOne) - prevAmount - let intTwo = parseInt(paramTwo) - prevAmount + let intOne = parseInt(paramOne) - prevCountAmount + let intTwo = parseInt(paramTwo) - prevCountAmount paramOne = intOne.toString() paramTwo = intTwo.toString() + prevCount = 0 prevRe() } @@ -494,4 +470,4 @@ function prevRe() { stats() getTable() } -} \ No newline at end of file +} From 708ef312a59bac57c84a7741a1acbef8bff2cb15 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Thu, 28 Apr 2022 09:40:48 +0200 Subject: [PATCH 24/44] final testing complete --- app.ts | 733 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 361 insertions(+), 372 deletions(-) diff --git a/app.ts b/app.ts index e600e258..3943d3a8 100644 --- a/app.ts +++ b/app.ts @@ -1,11 +1,11 @@ const headings: any = document.querySelector("#Headings"); const content_cols: any = document.querySelector("#Content"); -const pageStats: any = document.getElementById('pageStats') +const pageStats: any = document.getElementById("pageStats"); const nextButton: any = document.querySelector("#next"); const prevButton: any = document.querySelector("#prev"); const clear = ""; -let paramOne: any = "0" -let paramTwo: any = "9" +let paramOne: any = "0"; +let paramTwo: any = "9"; let contentNeeded: any = []; // Fetch requests @@ -13,461 +13,450 @@ let contentNeeded: any = []; //// Heading Row(The Columns) function getColumns() { - fetch("http://localhost:2050/columns", { + fetch("http://localhost:2050/columns", { method: "GET", headers: { "Content-Type": "application/json" }, -}) + }) .then((res) => res.text()) .then((data) => { - data = JSON.parse(data); - let colList = data; - for (let i = 0; i < colList.length; i++) { - colHeading(colList[i]); - } + data = JSON.parse(data); + let colList = data; + for (let i = 0; i < colList.length; i++) { + colHeading(colList[i]); + } }); } //// Table Content function getTable() { - fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) + fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) .then((res) => res.text()) .then((data) => { - data = JSON.parse(data); - let contentList = data; - for (let i = 0; i < contentList.length; i++) { - let contentListContent: any = contentList[i] - cols(contentListContent) - } - }); + data = JSON.parse(data); + let contentList = data; + for (let i = 0; i < contentList.length; i++) { + let contentListContent: any = contentList[i]; + cols(contentListContent); + } + }); } //// Display the current shown results function stats() { - fetch("http://localhost:2050/recordCount", { + fetch("http://localhost:2050/recordCount", { method: "GET", headers: { "Content-Type": "application/json" }, -}) + }) .then((res) => res.text()) .then((data) => { - data = JSON.parse(data); - let count = data; - let currentStats = "Showing results from " + paramOne + " to " + paramTwo + " out of " + count + " results."; - pageStats.innerHTML = currentStats; - }) + data = JSON.parse(data); + let count = data; + let currentStats = + "Showing results from " + + paramOne + + " to " + + paramTwo + + " out of " + + count + + " results."; + pageStats.innerHTML = currentStats; + }); } - // Loads all intial fields/data -window.onload = function() { - let windowHeight = window.innerHeight; - - if (windowHeight < 600 && windowHeight >= 480) { - paramOne = paramOne - paramTwo = parseInt(paramOne) + 6 - paramTwo = paramTwo.toString() - stats() - getColumns() - getTable() - } else if (windowHeight < 480 && windowHeight >= 400) { - paramOne = paramOne - paramTwo = parseInt(paramOne) + 4 - paramTwo = paramTwo.toString() - stats() - getColumns() - getTable() - } else if (windowHeight < 400 && windowHeight > 300) { - paramOne = paramOne - paramTwo = parseInt(paramOne) + 2 - paramTwo = paramTwo.toString() - stats() - getColumns() - getTable() - } else if (windowHeight <= 300) { - paramOne = paramOne - paramTwo = parseInt(paramOne) + 1 - paramTwo = paramTwo.toString() - stats() - getColumns() - getTable() - } else { - stats() - getColumns() - getTable() - } -} +window.onload = function () { + let windowHeight = window.innerHeight; + + if (windowHeight < 600 && windowHeight >= 480) { + paramOne = paramOne; + paramTwo = parseInt(paramOne) + 6; + paramTwo = paramTwo.toString(); + stats(); + getColumns(); + getTable(); + } else if (windowHeight < 480 && windowHeight >= 400) { + paramOne = paramOne; + paramTwo = parseInt(paramOne) + 4; + paramTwo = paramTwo.toString(); + stats(); + getColumns(); + getTable(); + } else if (windowHeight < 400 && windowHeight > 300) { + paramOne = paramOne; + paramTwo = parseInt(paramOne) + 2; + paramTwo = paramTwo.toString(); + stats(); + getColumns(); + getTable(); + } else if (windowHeight <= 300) { + paramOne = paramOne; + paramTwo = parseInt(paramOne) + 1; + paramTwo = paramTwo.toString(); + stats(); + getColumns(); + getTable(); + } else { + stats(); + getColumns(); + getTable(); + } +}; // Displaying data into html //// Targets heading div to creating the 1st row(Column names) function colHeading(heading: string) { - let headingCol = `
${heading}
`; - headings.innerHTML += headingCol; + let headingCol = `
${heading}
`; + headings.innerHTML += headingCol; } //// Targets content div to create the actual table and fill with data - function cols(content: any) { - let rows = `
`; + let rows = `
`; - content_cols.innerHTML += rows; + content_cols.innerHTML += rows; - let finalRow: any = document.querySelector("#row-" + content[0] + ".rows"); + let finalRow: any = document.querySelector("#row-" + content[0] + ".rows"); - for (let x = 0; x < content.length; x++) { - let rowCols = `
${content[x]}
`; - finalRow.innerHTML += rowCols; - } + for (let x = 0; x < content.length; x++) { + let rowCols = `
${content[x]}
`; + finalRow.innerHTML += rowCols; + } } // Clear Table (content div) function clearTable() { - content_cols.innerHTML = clear + content_cols.innerHTML = clear; } -// Jump to ID +// Jump to ID function idJump() { - let windowHeight = window.innerHeight; - let toConvert: any; - - if (windowHeight < 600 && windowHeight >= 480) { - toConvert = 6 - } - else if (windowHeight < 480 && windowHeight >= 400) { - toConvert = 4 - } - else if (windowHeight < 400 && windowHeight > 300) { - toConvert = 2 - } - else if (windowHeight <= 300) { - toConvert = 1 - } - else { - toConvert = 9 - } - - let currentOne: any = paramOne - let currentTwo: any = paramTwo - let search: any = document.querySelector('#idJump'); - let searchOne = search.value - let convert = parseInt(searchOne) + toConvert - let searchTwo = convert.toString() - paramOne = searchOne - paramTwo = searchTwo - - if (searchOne !== "" && searchOne <= 999990 && searchOne >= 0 && searchOne !== 'e') { - clearTable() - getTable() - stats() - } - else if ( searchOne > 999990 && searchOne < 1000000 && searchOne >= 0 && searchOne !== 'e') { - resizing() - } - else { - paramOne = currentOne - paramTwo = currentTwo - alert("There are no records with that ID! Please check that your input does not exceed 999 999 and is not a negative amount.") - - } - search.value = clear + let windowHeight = window.innerHeight; + let toConvert: any; + + if (windowHeight < 600 && windowHeight >= 480) { + toConvert = 6; + } else if (windowHeight < 480 && windowHeight >= 400) { + toConvert = 4; + } else if (windowHeight < 400 && windowHeight > 300) { + toConvert = 2; + } else if (windowHeight <= 300) { + toConvert = 1; + } else { + toConvert = 9; + } + + let currentOne: any = paramOne; + let currentTwo: any = paramTwo; + let search: any = document.querySelector("#idJump"); + let searchOne = search.value; + let convert = parseInt(searchOne) + toConvert; + let searchTwo = convert.toString(); + paramOne = searchOne; + paramTwo = searchTwo; + + if ( + searchOne !== "" && + searchOne <= 999990 && + searchOne >= 0 && + searchOne !== "e" + ) { + clearTable(); + getTable(); + stats(); + } else if ( + searchOne > 999990 && + searchOne < 1000000 && + searchOne >= 0 && + searchOne !== "e" + ) { + resizing(); + } else { + paramOne = currentOne; + paramTwo = currentTwo; + alert( + "There are no records with that ID! Please check that your input does not exceed 999 999 and is not a negative amount." + ); + } + search.value = clear; } // Nav Buttons //// Next Function -let nextCount = 0 +let nextCount = 0; const nextDebounce = (fn: any, delay: any) => { - let timer: any; - return function() { - nextCount++ - clearTimeout(timer) - timer = setTimeout(() => { - fn() - }, delay) - } -} + let timer: any; + return function () { + nextCount++; + clearTimeout(timer); + timer = setTimeout(() => { + fn(); + }, delay); + }; +}; let next = () => { - - if (paramTwo == 999999) { - alert("You have reached the final page") - } else { - let nextAmount: any = (paramTwo - paramOne) + 1 - let nextCountAmount: any = nextAmount * nextCount - - - let intOne = parseInt(paramOne) + nextCountAmount - let intTwo = parseInt(paramTwo) + nextCountAmount - paramOne = intOne.toString() - paramTwo = intTwo.toString() - - nextCount = 0 - - resizing() - } -} + if (paramTwo == 999999) { + alert("You have reached the final page"); + } else { + let nextAmount: any = paramTwo - paramOne + 1; + let nextCountAmount: any = nextAmount * nextCount; + + let intOne = parseInt(paramOne) + nextCountAmount; + let intTwo = parseInt(paramTwo) + nextCountAmount; + paramOne = intOne.toString(); + paramTwo = intTwo.toString(); + + nextCount = 0; + + resizing(); + } +}; -next = nextDebounce(next, 500) +next = nextDebounce(next, 500); -nextButton.addEventListener("click", next) +nextButton.addEventListener("click", next); //// Prev Function -let prevCount = 0 +let prevCount = 0; const prevDebounce = (fn: any, delay: any) => { - let timer: any; - return function() { - prevCount++ - clearTimeout(timer) - timer = setTimeout(() => { - fn() - }, delay) - } -} + let timer: any; + return function () { + prevCount++; + clearTimeout(timer); + timer = setTimeout(() => { + fn(); + }, delay); + }; +}; let prev = () => { - let windowHeight = window.innerHeight; - - if (windowHeight < 600 && windowHeight >= 480) { - if (paramOne == 0) { - alert("This is the first page") - } - else if (paramOne <= 6) { - paramOne = 0 - resizing() - } else { - let prevAmount: any = (paramTwo - paramOne) + 1 - let prevCountAmount = prevAmount * prevCount - - let intOne = parseInt(paramOne) - prevCountAmount - let intTwo = parseInt(paramTwo) - prevCountAmount - paramOne = intOne.toString() - paramTwo = intTwo.toString() - prevCount = 0 - - prevRe() - } - } - else if (windowHeight < 480 && windowHeight >= 400) { - if (paramOne == 0) { - alert("This is the first page") - } - else if (paramOne <= 4) { - paramOne = 0 - resizing() - } else { - let prevAmount: any = (paramTwo - paramOne) + 1 - let prevCountAmount = prevAmount * prevCount - - let intOne = parseInt(paramOne) - prevCountAmount - let intTwo = parseInt(paramTwo) - prevCountAmount - paramOne = intOne.toString() - paramTwo = intTwo.toString() - prevCount = 0 - - prevRe() - } + let windowHeight = window.innerHeight; + + if (windowHeight < 600 && windowHeight >= 480) { + if (paramOne == 0) { + alert("This is the first page"); + } else if (paramOne <= 6) { + paramOne = 0; + resizing(); + } else { + let prevAmount: any = paramTwo - paramOne + 1; + let prevCountAmount = prevAmount * prevCount; + + let intOne = parseInt(paramOne) - prevCountAmount; + let intTwo = parseInt(paramTwo) - prevCountAmount; + paramOne = intOne.toString(); + paramTwo = intTwo.toString(); + prevCount = 0; + + prevRe(); } - else if (windowHeight < 400 && windowHeight > 300) { - if (paramOne == 0) { - alert("This is the first page") - } - else if (paramOne <= 2) { - paramOne = 0 - resizing() - } else { - let prevAmount: any = (paramTwo - paramOne) + 1 - let prevCountAmount = prevAmount * prevCount - - let intOne = parseInt(paramOne) - prevCountAmount - let intTwo = parseInt(paramTwo) - prevCountAmount - paramOne = intOne.toString() - paramTwo = intTwo.toString() - prevCount = 0 - - prevRe() - } + } else if (windowHeight < 480 && windowHeight >= 400) { + if (paramOne == 0) { + alert("This is the first page"); + } else if (paramOne <= 4) { + paramOne = 0; + resizing(); + } else { + let prevAmount: any = paramTwo - paramOne + 1; + let prevCountAmount = prevAmount * prevCount; + + let intOne = parseInt(paramOne) - prevCountAmount; + let intTwo = parseInt(paramTwo) - prevCountAmount; + paramOne = intOne.toString(); + paramTwo = intTwo.toString(); + prevCount = 0; + + prevRe(); } - else if (windowHeight <= 300) { - if (paramOne == 0) { - alert("This is the first page") - } - else if (paramOne <= 1) { - paramOne = 0 - resizing() - } else { - let prevAmount: any = (paramTwo - paramOne) + 1 - let prevCountAmount = prevAmount * prevCount - - let intOne = parseInt(paramOne) - prevCountAmount - let intTwo = parseInt(paramTwo) - prevCountAmount - paramOne = intOne.toString() - paramTwo = intTwo.toString() - prevCount = 0 - - prevRe() - } + } else if (windowHeight < 400 && windowHeight > 300) { + if (paramOne == 0) { + alert("This is the first page"); + } else if (paramOne <= 2) { + paramOne = 0; + resizing(); + } else { + let prevAmount: any = paramTwo - paramOne + 1; + let prevCountAmount = prevAmount * prevCount; + + let intOne = parseInt(paramOne) - prevCountAmount; + let intTwo = parseInt(paramTwo) - prevCountAmount; + paramOne = intOne.toString(); + paramTwo = intTwo.toString(); + prevCount = 0; + + prevRe(); } - else { - if (paramOne == 0) { - alert("This is the first page") - } else if(paramOne <= 9) { - paramOne = 0 - resizing() - } else { - let prevAmount: any = (paramTwo - paramOne) + 1 - let prevCountAmount = prevAmount * prevCount - - let intOne = parseInt(paramOne) - prevCountAmount - let intTwo = parseInt(paramTwo) - prevCountAmount - paramOne = intOne.toString() - paramTwo = intTwo.toString() - prevCount = 0 - - prevRe() - } + } else if (windowHeight <= 300) { + if (paramOne == 0) { + alert("This is the first page"); + } else if (paramOne <= 1) { + paramOne = 0; + resizing(); + } else { + let prevAmount: any = paramTwo - paramOne + 1; + let prevCountAmount = prevAmount * prevCount; + + let intOne = parseInt(paramOne) - prevCountAmount; + let intTwo = parseInt(paramTwo) - prevCountAmount; + paramOne = intOne.toString(); + paramTwo = intTwo.toString(); + prevCount = 0; + + prevRe(); } + } else { + if (paramOne == 0) { + alert("This is the first page"); + } else if (paramOne <= 9) { + paramOne = 0; + resizing(); + } else { + let prevAmount: any = paramTwo - paramOne + 1; + let prevCountAmount = prevAmount * prevCount; -} + let intOne = parseInt(paramOne) - prevCountAmount; + let intTwo = parseInt(paramTwo) - prevCountAmount; + paramOne = intOne.toString(); + paramTwo = intTwo.toString(); + prevCount = 0; -prev = prevDebounce(prev, 500) + prevRe(); + } + } +}; -prevButton.addEventListener("click", prev) +prev = prevDebounce(prev, 500); +prevButton.addEventListener("click", prev); -// Resizing +// Resizing let count = 0; const debounce = (fn: any, delay: any) => { - let timer: any; - return function() { - clearTimeout(timer) - timer = setTimeout(() => { - fn() - }, delay) - } -} + let timer: any; + return function () { + clearTimeout(timer); + timer = setTimeout(() => { + fn(); + }, delay); + }; +}; let resizing = () => { - let windowHeight = window.innerHeight; - - if (windowHeight < 600 && windowHeight >= 480) { - if (paramOne > 999993) { - paramOne = 999993 - } else { - //pass - } - paramTwo = parseInt(paramOne) + 6 - paramTwo = paramTwo.toString() - clearTable() - stats() - getTable() - } - else if (windowHeight < 480 && windowHeight >= 400) { - if (paramOne > 999995) { - paramOne = 999995 - } else { - //pass - } - paramTwo = parseInt(paramOne) + 4 - paramTwo = paramTwo.toString() - clearTable() - stats() - getTable() - } - else if (windowHeight < 400 && windowHeight > 300) { - if (paramOne > 999997) { - paramOne = 999997 - } else { - //pass - } - paramTwo = parseInt(paramOne) + 2 - paramTwo = paramTwo.toString() - clearTable() - stats() - getTable() - } - else if (windowHeight <= 300) { - if (paramOne > 999998) { - paramOne = 999998 - } else { - //pass - } - paramTwo = parseInt(paramOne) + 1 - paramTwo = paramTwo.toString() - clearTable() - stats() - getTable() + let windowHeight = window.innerHeight; + + if (windowHeight < 600 && windowHeight >= 480) { + if (paramOne > 999993) { + paramOne = 999993; + } else { + //pass } - else { - if (paramOne > 999990) { - paramOne = 999990 - } else { - //pass - } - - paramTwo = parseInt(paramOne) + 9 - - paramTwo = paramTwo.toString() - clearTable() - stats() - getTable() + paramTwo = parseInt(paramOne) + 6; + paramTwo = paramTwo.toString(); + clearTable(); + stats(); + getTable(); + } else if (windowHeight < 480 && windowHeight >= 400) { + if (paramOne > 999995) { + paramOne = 999995; + } else { + //pass + } + paramTwo = parseInt(paramOne) + 4; + paramTwo = paramTwo.toString(); + clearTable(); + stats(); + getTable(); + } else if (windowHeight < 400 && windowHeight > 300) { + if (paramOne > 999997) { + paramOne = 999997; + } else { + //pass + } + paramTwo = parseInt(paramOne) + 2; + paramTwo = paramTwo.toString(); + clearTable(); + stats(); + getTable(); + } else if (windowHeight <= 300) { + if (paramOne > 999998) { + paramOne = 999998; + } else { + //pass + } + paramTwo = parseInt(paramOne) + 1; + paramTwo = paramTwo.toString(); + clearTable(); + stats(); + getTable(); + } else { + if (paramOne > 999990) { + paramOne = 999990; + } else { + //pass } -} -resizing = debounce(resizing, 500) + paramTwo = parseInt(paramOne) + 9; -window.addEventListener("resize", resizing) + paramTwo = paramTwo.toString(); + clearTable(); + stats(); + getTable(); + } +}; +resizing = debounce(resizing, 500); + +window.addEventListener("resize", resizing); function prevRe() { - let windowHeight = window.innerHeight; - - if (windowHeight < 600 && windowHeight >= 480) { - paramTwo = parseInt(paramOne) + 6 - paramTwo = paramTwo.toString() - clearTable() - stats() - getTable() - } - else if (windowHeight < 480 && windowHeight >= 400) { - paramTwo = parseInt(paramOne) + 4 - paramTwo = paramTwo.toString() - clearTable() - stats() - getTable() - } - else if (windowHeight < 400 && windowHeight > 300) { - paramTwo = parseInt(paramOne) + 2 - paramTwo = paramTwo.toString() - clearTable() - stats() - getTable() - } - else if (windowHeight <= 300) { - paramTwo = parseInt(paramOne) + 1 - paramTwo = paramTwo.toString() - clearTable() - stats() - getTable() - } - else { - paramTwo = parseInt(paramOne) + 9 - paramTwo = paramTwo.toString() - clearTable() - stats() - getTable() - } + let windowHeight = window.innerHeight; + + if (windowHeight < 600 && windowHeight >= 480) { + paramTwo = parseInt(paramOne) + 6; + paramTwo = paramTwo.toString(); + clearTable(); + stats(); + getTable(); + } else if (windowHeight < 480 && windowHeight >= 400) { + paramTwo = parseInt(paramOne) + 4; + paramTwo = paramTwo.toString(); + clearTable(); + stats(); + getTable(); + } else if (windowHeight < 400 && windowHeight > 300) { + paramTwo = parseInt(paramOne) + 2; + paramTwo = paramTwo.toString(); + clearTable(); + stats(); + getTable(); + } else if (windowHeight <= 300) { + paramTwo = parseInt(paramOne) + 1; + paramTwo = paramTwo.toString(); + clearTable(); + stats(); + getTable(); + } else { + paramTwo = parseInt(paramOne) + 9; + paramTwo = paramTwo.toString(); + clearTable(); + stats(); + getTable(); + } } From 1256e0cbbea2f24c9e6cc48bf8426658841a1476 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Fri, 29 Apr 2022 11:45:59 +0200 Subject: [PATCH 25/44] revision after code review --- app.ts | 567 +++++++++++++++++-------------------------------- index.html | 48 +++-- server/main.go | 4 +- style.css | 164 +++++++------- 4 files changed, 297 insertions(+), 486 deletions(-) diff --git a/app.ts b/app.ts index 3943d3a8..c538802e 100644 --- a/app.ts +++ b/app.ts @@ -1,199 +1,162 @@ -const headings: any = document.querySelector("#Headings"); -const content_cols: any = document.querySelector("#Content"); -const pageStats: any = document.getElementById("pageStats"); -const nextButton: any = document.querySelector("#next"); -const prevButton: any = document.querySelector("#prev"); -const clear = ""; -let paramOne: any = "0"; -let paramTwo: any = "9"; -let contentNeeded: any = []; - -// Fetch requests - -//// Heading Row(The Columns) - -function getColumns() { - fetch("http://localhost:2050/columns", { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let colList = data; - for (let i = 0; i < colList.length; i++) { - colHeading(colList[i]); - } - }); -} - -//// Table Content - -function getTable() { - fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let contentList = data; - for (let i = 0; i < contentList.length; i++) { - let contentListContent: any = contentList[i]; - cols(contentListContent); - } - }); -} - -//// Display the current shown results - -function stats() { - fetch("http://localhost:2050/recordCount", { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let count = data; - let currentStats = - "Showing results from " + - paramOne + - " to " + - paramTwo + - " out of " + - count + - " results."; - pageStats.innerHTML = currentStats; - }); -} - -// Loads all intial fields/data +// Function To Get Number Of Rows That Can Be Displayed While Still Being Readable -window.onload = function () { - let windowHeight = window.innerHeight; +const getNoOfRows = () => { + const height = window.innerHeight; - if (windowHeight < 600 && windowHeight >= 480) { - paramOne = paramOne; - paramTwo = parseInt(paramOne) + 6; - paramTwo = paramTwo.toString(); - stats(); - getColumns(); - getTable(); - } else if (windowHeight < 480 && windowHeight >= 400) { - paramOne = paramOne; - paramTwo = parseInt(paramOne) + 4; - paramTwo = paramTwo.toString(); - stats(); - getColumns(); - getTable(); - } else if (windowHeight < 400 && windowHeight > 300) { - paramOne = paramOne; - paramTwo = parseInt(paramOne) + 2; - paramTwo = paramTwo.toString(); - stats(); - getColumns(); - getTable(); - } else if (windowHeight <= 300) { - paramOne = paramOne; - paramTwo = parseInt(paramOne) + 1; - paramTwo = paramTwo.toString(); - stats(); - getColumns(); - getTable(); - } else { - stats(); - getColumns(); - getTable(); - } + let number = height / 40; + let noOfRows = Math.floor(number); + return noOfRows; }; -// Displaying data into html +// Variables + +let paramOne: number = 0; +let paramTwo: number = paramOne + getNoOfRows(); -//// Targets heading div to creating the 1st row(Column names) +//// Functions To Create/Clear The HTML -function colHeading(heading: string) { - let headingCol = `
${heading}
`; - headings.innerHTML += headingCol; -} +// Heading Row -//// Targets content div to create the actual table and fill with data +const createHeadingRow = (headingData: string) => { + const heading: any = document.querySelector("#heading"); + + let headings = `
${headingData}
`; + heading.innerHTML += headings; +}; -function cols(content: any) { - let rows = `
`; +// Table Content - content_cols.innerHTML += rows; +const createTableContent = (contentData: string) => { + const content: any = document.querySelector("#content"); - let finalRow: any = document.querySelector("#row-" + content[0] + ".rows"); + let table = `
`; + content.innerHTML += table; - for (let x = 0; x < content.length; x++) { - let rowCols = `
${content[x]}
`; - finalRow.innerHTML += rowCols; + let rows: any = document.querySelector("#row-" + contentData[0] + ".rows"); + for (let x = 0; x < contentData.length; x++) { + let rowCols = `
${contentData[x]}
`; + rows.innerHTML += rowCols; } -} +}; -// Clear Table (content div) +// Clear Table Content -function clearTable() { - content_cols.innerHTML = clear; -} +const clearTable = () => { + const content: any = document.querySelector("#content"); + const clear = ""; -// Jump to ID + content.innerHTML = clear; +}; -function idJump() { - let windowHeight = window.innerHeight; - let toConvert: any; +//// Fetch Requests + +// Heading Row (Getting the columns data) + +const getHeadings = () => { + try { + fetch("http://localhost:2050/columns", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let headingData = data; + for (let i = 0; i < headingData.length; i++) { + createHeadingRow(headingData[i]); + } + }); + } catch (error) { + console.log(error); + } +}; - if (windowHeight < 600 && windowHeight >= 480) { - toConvert = 6; - } else if (windowHeight < 480 && windowHeight >= 400) { - toConvert = 4; - } else if (windowHeight < 400 && windowHeight > 300) { - toConvert = 2; - } else if (windowHeight <= 300) { - toConvert = 1; - } else { - toConvert = 9; +// Table Content (Getting the table's data) + +const getTable = () => { + try { + fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let contentData = data; + for (let i = 0; i < contentData.length; i++) { + createTableContent(contentData[i]); + } + }); + } catch (error) { + console.log(error); } +}; - let currentOne: any = paramOne; - let currentTwo: any = paramTwo; - let search: any = document.querySelector("#idJump"); - let searchOne = search.value; - let convert = parseInt(searchOne) + toConvert; - let searchTwo = convert.toString(); - paramOne = searchOne; - paramTwo = searchTwo; - - if ( - searchOne !== "" && - searchOne <= 999990 && - searchOne >= 0 && - searchOne !== "e" - ) { - clearTable(); - getTable(); - stats(); - } else if ( - searchOne > 999990 && - searchOne < 1000000 && - searchOne >= 0 && - searchOne !== "e" - ) { - resizing(); +// Displays The Current Results Being Shown + +const stats = () => { + const pageStats: any = document.querySelector("#pageStats"); + + try { + fetch("http://localhost:2050/recordCount", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + data = JSON.parse(data); + let count = data; + let currentStats = "Showing results from " + paramOne + " to " + paramTwo + " out of " + count + " results."; + pageStats.innerHTML = currentStats; + }); + } catch (error) {} +}; + +//// Debounce + +const debounce = (fn: any, delay: number) => { + let timer: number; + return function () { + clearTimeout(timer); + timer = setTimeout(() => { + fn(); + }, delay); + }; +}; + +//// Sizing And Resizing + +let resizing = () => { + let end = paramOne + getNoOfRows(); + + if (end > 999999) { + paramTwo = 999999; + paramOne = paramTwo - getNoOfRows(); } else { - paramOne = currentOne; - paramTwo = currentTwo; - alert( - "There are no records with that ID! Please check that your input does not exceed 999 999 and is not a negative amount." - ); + paramOne; + paramTwo = paramOne + getNoOfRows(); } - search.value = clear; -} + clearTable(); + getTable(); + stats(); +}; -// Nav Buttons +resizing = debounce(resizing, 500); -//// Next Function +window.addEventListener("resize", resizing); + +//// On Window Load + +window.onload = function () { + getHeadings(); + getTable(); + stats(); +}; + +//// Navigation + +// Next +const nextButton: any = document.querySelector("#next"); let nextCount = 0; const nextDebounce = (fn: any, delay: any) => { @@ -208,29 +171,35 @@ const nextDebounce = (fn: any, delay: any) => { }; let next = () => { - if (paramTwo == 999999) { + if (paramTwo === 999999) { alert("You have reached the final page"); - } else { - let nextAmount: any = paramTwo - paramOne + 1; - let nextCountAmount: any = nextAmount * nextCount; + } - let intOne = parseInt(paramOne) + nextCountAmount; - let intTwo = parseInt(paramTwo) + nextCountAmount; - paramOne = intOne.toString(); - paramTwo = intTwo.toString(); + let nextAmount: number = paramTwo - paramOne + 1; + let nextCountAmount: number = nextAmount * nextCount; + paramOne = paramOne + nextCountAmount; + paramTwo = paramOne + getNoOfRows(); - nextCount = 0; + let end = paramOne + getNoOfRows(); - resizing(); + if (end > 999999) { + paramTwo = 999999; + paramOne = paramTwo - getNoOfRows(); } + + nextCount = 0; + + clearTable(); + getTable(); + stats(); }; next = nextDebounce(next, 500); nextButton.addEventListener("click", next); -//// Prev Function - +// Previous +const prevButton: any = document.querySelector("#prev"); let prevCount = 0; const prevDebounce = (fn: any, delay: any) => { @@ -245,98 +214,27 @@ const prevDebounce = (fn: any, delay: any) => { }; let prev = () => { - let windowHeight = window.innerHeight; - - if (windowHeight < 600 && windowHeight >= 480) { - if (paramOne == 0) { - alert("This is the first page"); - } else if (paramOne <= 6) { - paramOne = 0; - resizing(); - } else { - let prevAmount: any = paramTwo - paramOne + 1; - let prevCountAmount = prevAmount * prevCount; - - let intOne = parseInt(paramOne) - prevCountAmount; - let intTwo = parseInt(paramTwo) - prevCountAmount; - paramOne = intOne.toString(); - paramTwo = intTwo.toString(); - prevCount = 0; - - prevRe(); - } - } else if (windowHeight < 480 && windowHeight >= 400) { - if (paramOne == 0) { - alert("This is the first page"); - } else if (paramOne <= 4) { - paramOne = 0; - resizing(); - } else { - let prevAmount: any = paramTwo - paramOne + 1; - let prevCountAmount = prevAmount * prevCount; + if (paramOne === 0) { + alert("You Are On The First Page"); + } else { + let prevAmount: number = paramTwo - paramOne + 1; + let prevCountAmount: number = prevAmount * prevCount; - let intOne = parseInt(paramOne) - prevCountAmount; - let intTwo = parseInt(paramTwo) - prevCountAmount; - paramOne = intOne.toString(); - paramTwo = intTwo.toString(); - prevCount = 0; + let intOne = paramOne - prevCountAmount; - prevRe(); - } - } else if (windowHeight < 400 && windowHeight > 300) { - if (paramOne == 0) { - alert("This is the first page"); - } else if (paramOne <= 2) { + if (intOne < 0) { paramOne = 0; - resizing(); } else { - let prevAmount: any = paramTwo - paramOne + 1; - let prevCountAmount = prevAmount * prevCount; - - let intOne = parseInt(paramOne) - prevCountAmount; - let intTwo = parseInt(paramTwo) - prevCountAmount; - paramOne = intOne.toString(); - paramTwo = intTwo.toString(); - prevCount = 0; - - prevRe(); + paramOne = intOne; } - } else if (windowHeight <= 300) { - if (paramOne == 0) { - alert("This is the first page"); - } else if (paramOne <= 1) { - paramOne = 0; - resizing(); - } else { - let prevAmount: any = paramTwo - paramOne + 1; - let prevCountAmount = prevAmount * prevCount; - let intOne = parseInt(paramOne) - prevCountAmount; - let intTwo = parseInt(paramTwo) - prevCountAmount; - paramOne = intOne.toString(); - paramTwo = intTwo.toString(); - prevCount = 0; + paramTwo = paramOne + getNoOfRows(); - prevRe(); - } - } else { - if (paramOne == 0) { - alert("This is the first page"); - } else if (paramOne <= 9) { - paramOne = 0; - resizing(); - } else { - let prevAmount: any = paramTwo - paramOne + 1; - let prevCountAmount = prevAmount * prevCount; - - let intOne = parseInt(paramOne) - prevCountAmount; - let intTwo = parseInt(paramTwo) - prevCountAmount; - paramOne = intOne.toString(); - paramTwo = intTwo.toString(); - prevCount = 0; + prevCount = 0; - prevRe(); - } + clearTable(); + getTable(); + stats(); } }; @@ -344,119 +242,36 @@ prev = prevDebounce(prev, 500); prevButton.addEventListener("click", prev); -// Resizing +// ID Jump +const input: any = document.querySelector("input"); -let count = 0; +let idJump = () => { + let currentID: number = paramOne; + let search = input.value; + let end = parseInt(search) + getNoOfRows(); -const debounce = (fn: any, delay: any) => { - let timer: any; - return function () { - clearTimeout(timer); - timer = setTimeout(() => { - fn(); - }, delay); - }; -}; - -let resizing = () => { - let windowHeight = window.innerHeight; - - if (windowHeight < 600 && windowHeight >= 480) { - if (paramOne > 999993) { - paramOne = 999993; - } else { - //pass - } - paramTwo = parseInt(paramOne) + 6; - paramTwo = paramTwo.toString(); - clearTable(); - stats(); - getTable(); - } else if (windowHeight < 480 && windowHeight >= 400) { - if (paramOne > 999995) { - paramOne = 999995; + if (search !== NaN && search !== "" && search < 1000000 && search >= 0) { + if (end > 999999) { + paramTwo = 999999; + paramOne = paramTwo - getNoOfRows(); } else { - //pass + paramOne = parseInt(search); + paramTwo = paramOne + getNoOfRows(); } - paramTwo = parseInt(paramOne) + 4; - paramTwo = paramTwo.toString(); - clearTable(); - stats(); - getTable(); - } else if (windowHeight < 400 && windowHeight > 300) { - if (paramOne > 999997) { - paramOne = 999997; - } else { - //pass - } - paramTwo = parseInt(paramOne) + 2; - paramTwo = paramTwo.toString(); - clearTable(); - stats(); - getTable(); - } else if (windowHeight <= 300) { - if (paramOne > 999998) { - paramOne = 999998; - } else { - //pass - } - paramTwo = parseInt(paramOne) + 1; - paramTwo = paramTwo.toString(); - clearTable(); - stats(); - getTable(); + } else if (search === "") { + //pass } else { - if (paramOne > 999990) { - paramOne = 999990; - } else { - //pass - } - - paramTwo = parseInt(paramOne) + 9; - - paramTwo = paramTwo.toString(); - clearTable(); - stats(); - getTable(); + alert("Make Sure Your Desired ID Is Not A Negative Number Or Doesn't Exceed 999999"); + paramOne = currentID; + paramTwo = paramOne + getNoOfRows(); + input.value = ""; } -}; -resizing = debounce(resizing, 500); - -window.addEventListener("resize", resizing); + clearTable(); + stats(); + getTable(); +}; -function prevRe() { - let windowHeight = window.innerHeight; +idJump = debounce(idJump, 500); - if (windowHeight < 600 && windowHeight >= 480) { - paramTwo = parseInt(paramOne) + 6; - paramTwo = paramTwo.toString(); - clearTable(); - stats(); - getTable(); - } else if (windowHeight < 480 && windowHeight >= 400) { - paramTwo = parseInt(paramOne) + 4; - paramTwo = paramTwo.toString(); - clearTable(); - stats(); - getTable(); - } else if (windowHeight < 400 && windowHeight > 300) { - paramTwo = parseInt(paramOne) + 2; - paramTwo = paramTwo.toString(); - clearTable(); - stats(); - getTable(); - } else if (windowHeight <= 300) { - paramTwo = parseInt(paramOne) + 1; - paramTwo = paramTwo.toString(); - clearTable(); - stats(); - getTable(); - } else { - paramTwo = parseInt(paramOne) + 9; - paramTwo = paramTwo.toString(); - clearTable(); - stats(); - getTable(); - } -} +window.addEventListener("input", idJump); diff --git a/index.html b/index.html index e6b82837..4ca4d73a 100644 --- a/index.html +++ b/index.html @@ -1,25 +1,27 @@ - - - JS Onboard Project - - - - - -
- -
-
- - -
-
-
-
- - - - + + + + + + Onboarding JavaScript Task + + + + + + +
+
+ - diff --git a/server/main.go b/server/main.go index db7e1215..eba62f8c 100644 --- a/server/main.go +++ b/server/main.go @@ -14,10 +14,10 @@ import ( ) const recordCount = 1000000 -const columnCount = 12 +const columnCount = 11 const delayResponse = 500 * time.Millisecond -var columns = [columnCount]string{"ID", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"} +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 index 38c0ff24..9a990700 100644 --- a/style.css +++ b/style.css @@ -1,121 +1,115 @@ * { - padding: 0; - margin: 0; - box-sizing: border-box; - overflow-y: hidden; - overflow-x: hidden; + padding: 0; + margin: 0; + box-sizing: border-box; + overflow-y: hidden; + overflow-x: hidden; } body { - height: 100vh; + height: 100vh; } /* Navigation */ -.nav { - background-color: #000; - display: flex; - flex-direction: row; - color: #fff; - height: 5%; - width: 100%; +#nav { + background-color: #000; + display: flex; + flex-direction: row; + color: #fff; + height: 5%; + width: 100%; } #pageStats { - position: absolute; - left: 1%; - top: 1%; + position: absolute; + left: 1%; + top: 1%; } #jumpID { - position: absolute; - left: 50%; - top: 1%; - transform: translate(-50%, -1%); + position: absolute; + left: 50%; + top: 1%; + transform: translate(-50%, -1%); } #jumpID input { - border: none; - margin-right: 20px; - padding: 7px 10px; - text-align: center; + border: none; + margin-right: 20px; + padding: 7px 10px; + text-align: center; } -.btns { - position: absolute; - right: 1%; - top: 1%; +#btns { + position: absolute; + right: 1%; + top: 1%; } -.btns .next { - margin-left: 20px; +#btns .next { + margin-left: 20px; } button { - border: none; - padding: 5px 10px; - border-radius: 10px; - width: 100px; - color: #000; - background-color: #fff; - cursor: pointer; - transition: all 0.3s; - transition-timing-function: ease-in-out; + border: none; + padding: 5px 10px; + border-radius: 10px; + width: 100px; + color: #000; + background-color: #fff; + cursor: pointer; + transition: all 0.3s; + transition-timing-function: ease-in-out; } button:hover { - letter-spacing: 1px; - color: #fff; - background-color: #000; - border: 1px solid #fff; + letter-spacing: 1px; + color: #fff; + background-color: #000; + border: 1px solid #fff; } /* Headings */ -#Headings { - display: flex; - justify-content: space-between; - align-items: center; - flex-direction: row; - width: 100%; - height: 10vh; +#heading { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; + width: 100%; + height: 10vh; } -#col_heading { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - width: 100%; - font-size: 1em; - font-weight: bold; - border: 1px solid #000; +#headings { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + font-size: 1em; + font-weight: bold; + border: 1px solid #000; } /* Table */ -#Content { - display: flex; - flex-direction: column; - height: calc(100vh - 15vh); - width: 100%; +#content { + display: flex; + flex-direction: column; + height: calc(100vh - 15vh); + width: 100%; } .rows { - display: flex; - justify-content: center; - align-items: center; - flex-direction: row; - height: 100%; - width: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: row; + height: 100%; + width: 100%; } -.row-cols { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - width: 100%; - font-size: 1em; - border: 1px solid #000; - word-wrap: break-word; +.row_cols { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + width: 100%; + font-size: 1em; + border: 1px solid #000; + word-wrap: break-word; } - -@media screen and (max-width:800px) { - .row-cols { - font-size: 0.7em; - } -} \ No newline at end of file From 93e2511f6101d82843b0aabd478d2a6f6b6a6e77 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Fri, 29 Apr 2022 13:17:19 +0200 Subject: [PATCH 26/44] revision after code review --- app.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/app.ts b/app.ts index c538802e..6be63e5e 100644 --- a/app.ts +++ b/app.ts @@ -10,8 +10,8 @@ const getNoOfRows = () => { // Variables -let paramOne: number = 0; -let paramTwo: number = paramOne + getNoOfRows(); +let paramOne = 0; +let paramTwo = paramOne + getNoOfRows(); //// Functions To Create/Clear The HTML @@ -159,7 +159,7 @@ window.onload = function () { const nextButton: any = document.querySelector("#next"); let nextCount = 0; -const nextDebounce = (fn: any, delay: any) => { +const nextDebounce = (fn: any, delay: number) => { let timer: any; return function () { nextCount++; @@ -175,8 +175,8 @@ let next = () => { alert("You have reached the final page"); } - let nextAmount: number = paramTwo - paramOne + 1; - let nextCountAmount: number = nextAmount * nextCount; + let nextAmount = paramTwo - paramOne + 1; + let nextCountAmount = nextAmount * nextCount; paramOne = paramOne + nextCountAmount; paramTwo = paramOne + getNoOfRows(); @@ -202,7 +202,7 @@ nextButton.addEventListener("click", next); const prevButton: any = document.querySelector("#prev"); let prevCount = 0; -const prevDebounce = (fn: any, delay: any) => { +const prevDebounce = (fn: any, delay: number) => { let timer: any; return function () { prevCount++; @@ -217,8 +217,8 @@ let prev = () => { if (paramOne === 0) { alert("You Are On The First Page"); } else { - let prevAmount: number = paramTwo - paramOne + 1; - let prevCountAmount: number = prevAmount * prevCount; + let prevAmount = paramTwo - paramOne + 1; + let prevCountAmount = prevAmount * prevCount; let intOne = paramOne - prevCountAmount; @@ -246,7 +246,7 @@ prevButton.addEventListener("click", prev); const input: any = document.querySelector("input"); let idJump = () => { - let currentID: number = paramOne; + let currentID = paramOne; let search = input.value; let end = parseInt(search) + getNoOfRows(); From 0b1c2e6770d6032aac661b89d57c01baa8e77892 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Tue, 3 May 2022 14:06:32 +0200 Subject: [PATCH 27/44] 03 May code review revision --- app.ts | 165 +++++++++++++++++++++++++++------------------------------ 1 file changed, 79 insertions(+), 86 deletions(-) diff --git a/app.ts b/app.ts index 6be63e5e..06d80e81 100644 --- a/app.ts +++ b/app.ts @@ -1,4 +1,14 @@ -// Function To Get Number Of Rows That Can Be Displayed While Still Being Readable +let fromParameter = 0; + +function getParameters(fromParameter: number) { + let toParameter: number; + const height = window.innerHeight; + + let noOfRows = Math.floor(height / 40); + toParameter = fromParameter + noOfRows; + + return toParameter; +} const getNoOfRows = () => { const height = window.innerHeight; @@ -8,11 +18,6 @@ const getNoOfRows = () => { return noOfRows; }; -// Variables - -let paramOne = 0; -let paramTwo = paramOne + getNoOfRows(); - //// Functions To Create/Clear The HTML // Heading Row @@ -53,63 +58,52 @@ const clearTable = () => { // Heading Row (Getting the columns data) const getHeadings = () => { - try { - fetch("http://localhost:2050/columns", { - method: "GET", - headers: { "Content-Type": "application/json" }, + fetch("http://localhost:2050/columns", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + let headingData = JSON.parse(data); + for (let i = 0; i < headingData.length; i++) { + createHeadingRow(headingData[i]); + } + getParameters((fromParameter = 0)); }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let headingData = data; - for (let i = 0; i < headingData.length; i++) { - createHeadingRow(headingData[i]); - } - }); - } catch (error) { - console.log(error); - } + .catch((error) => { + console.log("Call Hector", error); + }); }; // Table Content (Getting the table's data) const getTable = () => { - try { - fetch("http://localhost:2050/records?from=" + paramOne + "&to=" + paramTwo, { - method: "GET", - headers: { "Content-Type": "application/json" }, + let toParameter = getParameters(fromParameter); + + fetch(`http://localhost:2050/records?from=${fromParameter}&to=${toParameter}`, { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + let contentData = JSON.parse(data); + for (let i = 0; i < contentData.length; i++) { + createTableContent(contentData[i]); + } }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let contentData = data; - for (let i = 0; i < contentData.length; i++) { - createTableContent(contentData[i]); - } - }); - } catch (error) { - console.log(error); - } + .catch((error) => { + console.log(error); + }); }; // Displays The Current Results Being Shown const stats = () => { const pageStats: any = document.querySelector("#pageStats"); + let toParameter = getParameters(fromParameter); - try { - fetch("http://localhost:2050/recordCount", { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - data = JSON.parse(data); - let count = data; - let currentStats = "Showing results from " + paramOne + " to " + paramTwo + " out of " + count + " results."; - pageStats.innerHTML = currentStats; - }); - } catch (error) {} + let currentStats = `Showing results from ${fromParameter} to ${toParameter} out of 1 000 000 results.`; + pageStats.innerHTML = currentStats; }; //// Debounce @@ -127,14 +121,14 @@ const debounce = (fn: any, delay: number) => { //// Sizing And Resizing let resizing = () => { - let end = paramOne + getNoOfRows(); + let end = fromParameter + getNoOfRows(); + let toParameter: number; if (end > 999999) { - paramTwo = 999999; - paramOne = paramTwo - getNoOfRows(); + toParameter = 999999; + fromParameter = toParameter - getNoOfRows(); } else { - paramOne; - paramTwo = paramOne + getNoOfRows(); + toParameter = fromParameter + getNoOfRows(); } clearTable(); getTable(); @@ -171,20 +165,22 @@ const nextDebounce = (fn: any, delay: number) => { }; let next = () => { - if (paramTwo === 999999) { + let toParameter = getParameters(fromParameter); + + if (toParameter === 999999) { alert("You have reached the final page"); } - let nextAmount = paramTwo - paramOne + 1; + let nextAmount = toParameter - fromParameter + 1; let nextCountAmount = nextAmount * nextCount; - paramOne = paramOne + nextCountAmount; - paramTwo = paramOne + getNoOfRows(); + fromParameter = fromParameter + nextCountAmount; + toParameter = fromParameter + getNoOfRows(); - let end = paramOne + getNoOfRows(); + let end = fromParameter + getNoOfRows(); if (end > 999999) { - paramTwo = 999999; - paramOne = paramTwo - getNoOfRows(); + toParameter = 999999; + fromParameter = toParameter - getNoOfRows(); } nextCount = 0; @@ -194,9 +190,7 @@ let next = () => { stats(); }; -next = nextDebounce(next, 500); - -nextButton.addEventListener("click", next); +nextButton.addEventListener("click", nextDebounce(next, 500)); // Previous const prevButton: any = document.querySelector("#prev"); @@ -214,21 +208,23 @@ const prevDebounce = (fn: any, delay: number) => { }; let prev = () => { - if (paramOne === 0) { + let toParameter = getParameters(fromParameter); + + if (fromParameter === 0) { alert("You Are On The First Page"); } else { - let prevAmount = paramTwo - paramOne + 1; + let prevAmount = toParameter - fromParameter + 1; let prevCountAmount = prevAmount * prevCount; - let intOne = paramOne - prevCountAmount; + let intOne = fromParameter - prevCountAmount; if (intOne < 0) { - paramOne = 0; + fromParameter = 0; } else { - paramOne = intOne; + fromParameter = intOne; } - paramTwo = paramOne + getNoOfRows(); + toParameter = fromParameter + getNoOfRows(); prevCount = 0; @@ -238,33 +234,32 @@ let prev = () => { } }; -prev = prevDebounce(prev, 500); - -prevButton.addEventListener("click", prev); +prevButton.addEventListener("click", prevDebounce(prev, 500)); // ID Jump const input: any = document.querySelector("input"); +let toParameter = getParameters(fromParameter); let idJump = () => { - let currentID = paramOne; + let currentID = fromParameter; let search = input.value; let end = parseInt(search) + getNoOfRows(); if (search !== NaN && search !== "" && search < 1000000 && search >= 0) { if (end > 999999) { - paramTwo = 999999; - paramOne = paramTwo - getNoOfRows(); + toParameter = 999999; + fromParameter = toParameter - getNoOfRows(); } else { - paramOne = parseInt(search); - paramTwo = paramOne + getNoOfRows(); + fromParameter = parseInt(search); + toParameter = fromParameter + getNoOfRows(); } - } else if (search === "") { - //pass - } else { + } else if (search !== "") { alert("Make Sure Your Desired ID Is Not A Negative Number Or Doesn't Exceed 999999"); - paramOne = currentID; - paramTwo = paramOne + getNoOfRows(); + fromParameter = currentID; + toParameter = fromParameter + getNoOfRows(); input.value = ""; + } else { + //pass } clearTable(); @@ -272,6 +267,4 @@ let idJump = () => { getTable(); }; -idJump = debounce(idJump, 500); - -window.addEventListener("input", idJump); +window.addEventListener("input", debounce(idJump, 500)); From 876307bcf9823890c4e732f54cbcb73621d6a150 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Tue, 3 May 2022 16:13:38 +0200 Subject: [PATCH 28/44] 03 May code review revision --- app.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app.ts b/app.ts index 06d80e81..eba7b29f 100644 --- a/app.ts +++ b/app.ts @@ -1,6 +1,9 @@ let fromParameter = 0; +const input: any = document.querySelector("input"); +const prevButton: any = document.querySelector("#prev"); +const nextButton: any = document.querySelector("#next"); -function getParameters(fromParameter: number) { +const getParameters = (fromParameter: number) => { let toParameter: number; const height = window.innerHeight; @@ -8,7 +11,7 @@ function getParameters(fromParameter: number) { toParameter = fromParameter + noOfRows; return toParameter; -} +}; const getNoOfRows = () => { const height = window.innerHeight; @@ -150,7 +153,6 @@ window.onload = function () { //// Navigation // Next -const nextButton: any = document.querySelector("#next"); let nextCount = 0; const nextDebounce = (fn: any, delay: number) => { @@ -193,7 +195,6 @@ let next = () => { nextButton.addEventListener("click", nextDebounce(next, 500)); // Previous -const prevButton: any = document.querySelector("#prev"); let prevCount = 0; const prevDebounce = (fn: any, delay: number) => { @@ -237,10 +238,9 @@ let prev = () => { prevButton.addEventListener("click", prevDebounce(prev, 500)); // ID Jump -const input: any = document.querySelector("input"); -let toParameter = getParameters(fromParameter); let idJump = () => { + let toParameter = getParameters(fromParameter); let currentID = fromParameter; let search = input.value; let end = parseInt(search) + getNoOfRows(); From d2cf1df050b16141478ebed1d2f022efcd28cd42 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Tue, 3 May 2022 16:22:02 +0200 Subject: [PATCH 29/44] 03 May code review revision --- app.ts | 135 +++++++++++++++++++++++++++++---------------------------- 1 file changed, 69 insertions(+), 66 deletions(-) diff --git a/app.ts b/app.ts index eba7b29f..3b947b0c 100644 --- a/app.ts +++ b/app.ts @@ -1,7 +1,4 @@ let fromParameter = 0; -const input: any = document.querySelector("input"); -const prevButton: any = document.querySelector("#prev"); -const nextButton: any = document.querySelector("#next"); const getParameters = (fromParameter: number) => { let toParameter: number; @@ -153,89 +150,95 @@ window.onload = function () { //// Navigation // Next -let nextCount = 0; - -const nextDebounce = (fn: any, delay: number) => { - let timer: any; - return function () { - nextCount++; - clearTimeout(timer); - timer = setTimeout(() => { - fn(); - }, delay); +{ + let nextCount = 0; + const nextButton: any = document.querySelector("#next"); + + const nextDebounce = (fn: any, delay: number) => { + let timer: any; + return function () { + nextCount++; + clearTimeout(timer); + timer = setTimeout(() => { + fn(); + }, delay); + }; }; -}; -let next = () => { - let toParameter = getParameters(fromParameter); + let next = () => { + let toParameter = getParameters(fromParameter); - if (toParameter === 999999) { - alert("You have reached the final page"); - } + if (toParameter === 999999) { + alert("You have reached the final page"); + } - let nextAmount = toParameter - fromParameter + 1; - let nextCountAmount = nextAmount * nextCount; - fromParameter = fromParameter + nextCountAmount; - toParameter = fromParameter + getNoOfRows(); + let nextAmount = toParameter - fromParameter + 1; + let nextCountAmount = nextAmount * nextCount; + fromParameter = fromParameter + nextCountAmount; + toParameter = fromParameter + getNoOfRows(); - let end = fromParameter + getNoOfRows(); + let end = fromParameter + getNoOfRows(); - if (end > 999999) { - toParameter = 999999; - fromParameter = toParameter - getNoOfRows(); - } + if (end > 999999) { + toParameter = 999999; + fromParameter = toParameter - getNoOfRows(); + } - nextCount = 0; + nextCount = 0; - clearTable(); - getTable(); - stats(); -}; + clearTable(); + getTable(); + stats(); + }; -nextButton.addEventListener("click", nextDebounce(next, 500)); + nextButton.addEventListener("click", nextDebounce(next, 500)); +} // Previous -let prevCount = 0; - -const prevDebounce = (fn: any, delay: number) => { - let timer: any; - return function () { - prevCount++; - clearTimeout(timer); - timer = setTimeout(() => { - fn(); - }, delay); +{ + let prevCount = 0; + const prevButton: any = document.querySelector("#prev"); + + const prevDebounce = (fn: any, delay: number) => { + let timer: any; + return function () { + prevCount++; + clearTimeout(timer); + timer = setTimeout(() => { + fn(); + }, delay); + }; }; -}; -let prev = () => { - let toParameter = getParameters(fromParameter); + let prev = () => { + let toParameter = getParameters(fromParameter); - if (fromParameter === 0) { - alert("You Are On The First Page"); - } else { - let prevAmount = toParameter - fromParameter + 1; - let prevCountAmount = prevAmount * prevCount; + if (fromParameter === 0) { + alert("You Are On The First Page"); + } else { + let prevAmount = toParameter - fromParameter + 1; + let prevCountAmount = prevAmount * prevCount; - let intOne = fromParameter - prevCountAmount; + let intOne = fromParameter - prevCountAmount; - if (intOne < 0) { - fromParameter = 0; - } else { - fromParameter = intOne; - } + if (intOne < 0) { + fromParameter = 0; + } else { + fromParameter = intOne; + } - toParameter = fromParameter + getNoOfRows(); + toParameter = fromParameter + getNoOfRows(); - prevCount = 0; + prevCount = 0; - clearTable(); - getTable(); - stats(); - } -}; + clearTable(); + getTable(); + stats(); + } + }; -prevButton.addEventListener("click", prevDebounce(prev, 500)); + prevButton.addEventListener("click", prevDebounce(prev, 500)); +} // ID Jump From e31c2d3de8e0effe02ec8399e002445c255c40af Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Tue, 3 May 2022 16:22:57 +0200 Subject: [PATCH 30/44] 03 May code review revision --- app.ts | 53 +++++++++++++++++++++++++++-------------------------- 1 file changed, 27 insertions(+), 26 deletions(-) diff --git a/app.ts b/app.ts index 3b947b0c..81a8cb7e 100644 --- a/app.ts +++ b/app.ts @@ -241,33 +241,34 @@ window.onload = function () { } // ID Jump - -let idJump = () => { - let toParameter = getParameters(fromParameter); - let currentID = fromParameter; - let search = input.value; - let end = parseInt(search) + getNoOfRows(); - - if (search !== NaN && search !== "" && search < 1000000 && search >= 0) { - if (end > 999999) { - toParameter = 999999; - fromParameter = toParameter - getNoOfRows(); - } else { - fromParameter = parseInt(search); +{ + let idJump = () => { + let toParameter = getParameters(fromParameter); + let currentID = fromParameter; + let search = input.value; + let end = parseInt(search) + getNoOfRows(); + + if (search !== NaN && search !== "" && search < 1000000 && search >= 0) { + if (end > 999999) { + toParameter = 999999; + fromParameter = toParameter - getNoOfRows(); + } else { + fromParameter = parseInt(search); + toParameter = fromParameter + getNoOfRows(); + } + } else if (search !== "") { + alert("Make Sure Your Desired ID Is Not A Negative Number Or Doesn't Exceed 999999"); + fromParameter = currentID; toParameter = fromParameter + getNoOfRows(); + input.value = ""; + } else { + //pass } - } else if (search !== "") { - alert("Make Sure Your Desired ID Is Not A Negative Number Or Doesn't Exceed 999999"); - fromParameter = currentID; - toParameter = fromParameter + getNoOfRows(); - input.value = ""; - } else { - //pass - } - clearTable(); - stats(); - getTable(); -}; + clearTable(); + stats(); + getTable(); + }; -window.addEventListener("input", debounce(idJump, 500)); + window.addEventListener("input", debounce(idJump, 500)); +} From f5fdd2d7da3d057dbbd13377dec3d80d043e4c57 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Tue, 3 May 2022 16:24:28 +0200 Subject: [PATCH 31/44] 03 May code review revision --- app.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app.ts b/app.ts index 81a8cb7e..bf5276d6 100644 --- a/app.ts +++ b/app.ts @@ -242,6 +242,8 @@ window.onload = function () { // ID Jump { + const input: any = document.querySelector("input"); + let idJump = () => { let toParameter = getParameters(fromParameter); let currentID = fromParameter; From 951158c7de267f5e5b0a37ba844ae9212b03e21d Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Wed, 4 May 2022 08:30:51 +0200 Subject: [PATCH 32/44] 4 May Code Review Implimented --- app.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/app.ts b/app.ts index bf5276d6..6900bf89 100644 --- a/app.ts +++ b/app.ts @@ -2,19 +2,15 @@ let fromParameter = 0; const getParameters = (fromParameter: number) => { let toParameter: number; - const height = window.innerHeight; + let noOfRows = getNoOfRows(); - let noOfRows = Math.floor(height / 40); toParameter = fromParameter + noOfRows; - return toParameter; }; const getNoOfRows = () => { const height = window.innerHeight; - - let number = height / 40; - let noOfRows = Math.floor(number); + let noOfRows = Math.floor(height / 40); return noOfRows; }; From 46fc0eb34b6da6dc4da5fe848593a17b694e73d1 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Thu, 5 May 2022 13:38:25 +0200 Subject: [PATCH 33/44] 05 May code revisied --- app.ts | 78 ++++++++++++++++++++++++++++++---------------------------- 1 file changed, 40 insertions(+), 38 deletions(-) diff --git a/app.ts b/app.ts index 6900bf89..0ed60612 100644 --- a/app.ts +++ b/app.ts @@ -1,4 +1,19 @@ let fromParameter = 0; +let timer: number; +let recordCount = 0; + +//// On Window Load + +window.onload = function () { + getRecordCount() + .then(() => { + return getHeadings(); + }) + .then(() => { + return getTable(); + }); + console.log("CALL HECTOR!!!"); +}; const getParameters = (fromParameter: number) => { let toParameter: number; @@ -40,15 +55,6 @@ const createTableContent = (contentData: string) => { } }; -// Clear Table Content - -const clearTable = () => { - const content: any = document.querySelector("#content"); - const clear = ""; - - content.innerHTML = clear; -}; - //// Fetch Requests // Heading Row (Getting the columns data) @@ -74,7 +80,16 @@ const getHeadings = () => { // Table Content (Getting the table's data) const getTable = () => { + const content: any = document.querySelector("#content"); let toParameter = getParameters(fromParameter); + const pageStats: any = document.querySelector("#pageStats"); + + // Clears Table + content.innerHTML = ""; + + // Displays The Current Results Being Shown + let currentStats = `Showing results from ${fromParameter} to ${toParameter} out of ${recordCount} results.`; + pageStats.innerHTML = currentStats; fetch(`http://localhost:2050/records?from=${fromParameter}&to=${toParameter}`, { method: "GET", @@ -92,20 +107,27 @@ const getTable = () => { }); }; -// Displays The Current Results Being Shown - -const stats = () => { - const pageStats: any = document.querySelector("#pageStats"); - let toParameter = getParameters(fromParameter); - - let currentStats = `Showing results from ${fromParameter} to ${toParameter} out of 1 000 000 results.`; - pageStats.innerHTML = currentStats; +let getRecordCount = () => { + return fetch("http://localhost:2050/recordCount", { + method: "GET", + headers: { "Content-Type": "application/json" }, + }) + .then((res) => res.text()) + .then((data) => { + recordCount = JSON.parse(data); + }) + .catch((error) => { + console.log(error); + }); }; +// getRecordCount(); +// getHeadings(); +// getTable(); + //// Debounce const debounce = (fn: any, delay: number) => { - let timer: number; return function () { clearTimeout(timer); timer = setTimeout(() => { @@ -126,23 +148,13 @@ let resizing = () => { } else { toParameter = fromParameter + getNoOfRows(); } - clearTable(); getTable(); - stats(); }; resizing = debounce(resizing, 500); window.addEventListener("resize", resizing); -//// On Window Load - -window.onload = function () { - getHeadings(); - getTable(); - stats(); -}; - //// Navigation // Next @@ -151,7 +163,6 @@ window.onload = function () { const nextButton: any = document.querySelector("#next"); const nextDebounce = (fn: any, delay: number) => { - let timer: any; return function () { nextCount++; clearTimeout(timer); @@ -182,9 +193,7 @@ window.onload = function () { nextCount = 0; - clearTable(); getTable(); - stats(); }; nextButton.addEventListener("click", nextDebounce(next, 500)); @@ -196,7 +205,6 @@ window.onload = function () { const prevButton: any = document.querySelector("#prev"); const prevDebounce = (fn: any, delay: number) => { - let timer: any; return function () { prevCount++; clearTimeout(timer); @@ -227,9 +235,7 @@ window.onload = function () { prevCount = 0; - clearTable(); getTable(); - stats(); } }; @@ -259,12 +265,8 @@ window.onload = function () { fromParameter = currentID; toParameter = fromParameter + getNoOfRows(); input.value = ""; - } else { - //pass } - clearTable(); - stats(); getTable(); }; From b581516ca90ddc848d2697b836a9c6aadca2e9d4 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Thu, 5 May 2022 14:27:40 +0200 Subject: [PATCH 34/44] 05 May code revisied --- app.ts | 31 ++++++++++++++----------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/app.ts b/app.ts index 0ed60612..40012075 100644 --- a/app.ts +++ b/app.ts @@ -1,6 +1,6 @@ let fromParameter = 0; let timer: number; -let recordCount = 0; +let recordCount: number; //// On Window Load @@ -15,7 +15,7 @@ window.onload = function () { console.log("CALL HECTOR!!!"); }; -const getParameters = (fromParameter: number) => { +const getParameters = (fromParameter: number): number => { let toParameter: number; let noOfRows = getNoOfRows(); @@ -23,7 +23,7 @@ const getParameters = (fromParameter: number) => { return toParameter; }; -const getNoOfRows = () => { +const getNoOfRows = (): number => { const height = window.innerHeight; let noOfRows = Math.floor(height / 40); return noOfRows; @@ -121,10 +121,6 @@ let getRecordCount = () => { }); }; -// getRecordCount(); -// getHeadings(); -// getTable(); - //// Debounce const debounce = (fn: any, delay: number) => { @@ -141,9 +137,10 @@ const debounce = (fn: any, delay: number) => { let resizing = () => { let end = fromParameter + getNoOfRows(); let toParameter: number; + let maxRecordsID = recordCount - 1; - if (end > 999999) { - toParameter = 999999; + if (end > maxRecordsID) { + toParameter = maxRecordsID; fromParameter = toParameter - getNoOfRows(); } else { toParameter = fromParameter + getNoOfRows(); @@ -174,8 +171,9 @@ window.addEventListener("resize", resizing); let next = () => { let toParameter = getParameters(fromParameter); + let maxRecordsID = recordCount - 1; - if (toParameter === 999999) { + if (toParameter === maxRecordsID) { alert("You have reached the final page"); } @@ -186,8 +184,8 @@ window.addEventListener("resize", resizing); let end = fromParameter + getNoOfRows(); - if (end > 999999) { - toParameter = 999999; + if (end > maxRecordsID) { + toParameter = maxRecordsID; fromParameter = toParameter - getNoOfRows(); } @@ -231,8 +229,6 @@ window.addEventListener("resize", resizing); fromParameter = intOne; } - toParameter = fromParameter + getNoOfRows(); - prevCount = 0; getTable(); @@ -251,10 +247,11 @@ window.addEventListener("resize", resizing); let currentID = fromParameter; let search = input.value; let end = parseInt(search) + getNoOfRows(); + let maxRecordsID = recordCount - 1; - if (search !== NaN && search !== "" && search < 1000000 && search >= 0) { - if (end > 999999) { - toParameter = 999999; + if (search !== NaN && search !== "" && search <= maxRecordsID && search >= 0) { + if (end > maxRecordsID) { + toParameter = maxRecordsID; fromParameter = toParameter - getNoOfRows(); } else { fromParameter = parseInt(search); From 4d5c1a50a628685bba1d02432225412feab8f28b Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Thu, 5 May 2022 15:01:30 +0200 Subject: [PATCH 35/44] 05 May code revisied --- app.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.ts b/app.ts index 40012075..81d63527 100644 --- a/app.ts +++ b/app.ts @@ -73,7 +73,7 @@ const getHeadings = () => { getParameters((fromParameter = 0)); }) .catch((error) => { - console.log("Call Hector", error); + console.log(error); }); }; From f2457dad1e6aebd94b54a5f6839465107d158d7c Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Fri, 6 May 2022 08:57:25 +0200 Subject: [PATCH 36/44] 06 May code revisied --- app.ts | 404 ++++++++++++++++++++++++++--------------------------- index.html | 48 +++---- 2 files changed, 222 insertions(+), 230 deletions(-) diff --git a/app.ts b/app.ts index 81d63527..ace6281f 100644 --- a/app.ts +++ b/app.ts @@ -3,269 +3,261 @@ let timer: number; let recordCount: number; //// On Window Load - window.onload = function () { - getRecordCount() - .then(() => { - return getHeadings(); - }) - .then(() => { - return getTable(); - }); - console.log("CALL HECTOR!!!"); + getRecordCount() + .then(() => { + return getHeadings(); + }) + .then(() => { + return getTable(); + }); + console.log("CALL HECTOR!!!"); }; -const getParameters = (fromParameter: number): number => { - let toParameter: number; - let noOfRows = getNoOfRows(); +function getParameters(fromParameter: number) { + let toParameter: number; + let noOfRows = getNoOfRows(); - toParameter = fromParameter + noOfRows; - return toParameter; -}; + toParameter = fromParameter + noOfRows; + return toParameter; +} -const getNoOfRows = (): number => { - const height = window.innerHeight; - let noOfRows = Math.floor(height / 40); - return noOfRows; -}; +function getNoOfRows(): number { + const height = window.innerHeight; + let noOfRows = Math.floor(height / 40); + return noOfRows; +} //// Functions To Create/Clear The HTML - // Heading Row +function createHeadingRow(headingData: string) { + const heading: HTMLElement | null = document.getElementById("heading"); -const createHeadingRow = (headingData: string) => { - const heading: any = document.querySelector("#heading"); - - let headings = `
${headingData}
`; - heading.innerHTML += headings; -}; + let headings = `
${headingData}
`; + if (heading !== null) { + heading.innerHTML += headings; + } +} // Table Content +function createTableContent(contentData: string) { + const content: any = document.querySelector("#content"); -const createTableContent = (contentData: string) => { - const content: any = document.querySelector("#content"); - - let table = `
`; - content.innerHTML += table; + let table = `
`; + content.innerHTML += table; - let rows: any = document.querySelector("#row-" + contentData[0] + ".rows"); - for (let x = 0; x < contentData.length; x++) { - let rowCols = `
${contentData[x]}
`; - rows.innerHTML += rowCols; - } -}; + let rows: any = document.querySelector("#row-" + contentData[0] + ".rows"); + for (let x = 0; x < contentData.length; x++) { + let rowCols = `
${contentData[x]}
`; + rows.innerHTML += rowCols; + } +} //// Fetch Requests - // Heading Row (Getting the columns data) - -const getHeadings = () => { - fetch("http://localhost:2050/columns", { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - let headingData = JSON.parse(data); - for (let i = 0; i < headingData.length; i++) { - createHeadingRow(headingData[i]); - } - getParameters((fromParameter = 0)); +function getHeadings() { + return fetch("http://localhost:2050/columns", { + method: "GET", + headers: { "Content-Type": "application/json" }, }) - .catch((error) => { - console.log(error); - }); -}; + .then((res) => res.text()) + .then((data) => { + let headingData = JSON.parse(data); + for (let i = 0; i < headingData.length; i++) { + createHeadingRow(headingData[i]); + } + getParameters(0); + }) + .catch((error: Error) => { + console.log(error); + }); +} // Table Content (Getting the table's data) +function getTable() { + const content: any = document.querySelector("#content"); + let toParameter = getParameters(fromParameter); + const pageStats: any = document.querySelector("#pageStats"); + + // Clears Table + content.innerHTML = ""; + + // Displays The Current Results Being Shown + let currentStats = `Showing results from ${fromParameter} to ${toParameter} out of ${recordCount} results.`; + pageStats.innerHTML = currentStats; -const getTable = () => { - const content: any = document.querySelector("#content"); - let toParameter = getParameters(fromParameter); - const pageStats: any = document.querySelector("#pageStats"); - - // Clears Table - content.innerHTML = ""; - - // Displays The Current Results Being Shown - let currentStats = `Showing results from ${fromParameter} to ${toParameter} out of ${recordCount} results.`; - pageStats.innerHTML = currentStats; - - fetch(`http://localhost:2050/records?from=${fromParameter}&to=${toParameter}`, { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - let contentData = JSON.parse(data); - for (let i = 0; i < contentData.length; i++) { - createTableContent(contentData[i]); - } + return fetch(`http://localhost:2050/records?from=${fromParameter}&to=${toParameter}`, { + method: "GET", + headers: { "Content-Type": "application/json" }, }) - .catch((error) => { - console.log(error); - }); -}; + .then((res) => res.text()) + .then((data) => { + let contentData = JSON.parse(data); + for (let i = 0; i < contentData.length; i++) { + createTableContent(contentData[i]); + } + }) + .catch((error) => { + console.log(error); + }); +} -let getRecordCount = () => { - return fetch("http://localhost:2050/recordCount", { - method: "GET", - headers: { "Content-Type": "application/json" }, - }) - .then((res) => res.text()) - .then((data) => { - recordCount = JSON.parse(data); +function getRecordCount() { + return fetch("http://localhost:2050/recordCount", { + method: "GET", + headers: { "Content-Type": "application/json" }, }) - .catch((error) => { - console.log(error); - }); -}; + .then((res) => res.text()) + .then((data) => { + recordCount = JSON.parse(data); + }) + .catch((error) => { + console.log(error); + }); +} //// Debounce - -const debounce = (fn: any, delay: number) => { - return function () { - clearTimeout(timer); - timer = setTimeout(() => { - fn(); - }, delay); - }; -}; +function debounce(fn: any, delay: number) { + return function () { + clearTimeout(timer); + timer = setTimeout(() => { + fn(); + }, delay); + }; +} //// Sizing And Resizing +function resizing() { + let end = fromParameter + getNoOfRows(); + let toParameter: number; + let maxRecordsID = recordCount - 1; -let resizing = () => { - let end = fromParameter + getNoOfRows(); - let toParameter: number; - let maxRecordsID = recordCount - 1; - - if (end > maxRecordsID) { - toParameter = maxRecordsID; - fromParameter = toParameter - getNoOfRows(); - } else { - toParameter = fromParameter + getNoOfRows(); - } - getTable(); -}; - -resizing = debounce(resizing, 500); + if (end > maxRecordsID) { + toParameter = maxRecordsID; + fromParameter = toParameter - getNoOfRows(); + } else { + toParameter = fromParameter + getNoOfRows(); + } + getTable(); +} -window.addEventListener("resize", resizing); +window.addEventListener("resize", debounce(resizing, 500)); //// Navigation - // Next { - let nextCount = 0; - const nextButton: any = document.querySelector("#next"); - - const nextDebounce = (fn: any, delay: number) => { - return function () { - nextCount++; - clearTimeout(timer); - timer = setTimeout(() => { - fn(); - }, delay); + let nextCount = 0; + const nextButton: HTMLElement | null = document.getElementById("next"); + + const nextDebounce = (fn: any, delay: number) => { + return function () { + nextCount++; + clearTimeout(timer); + timer = setTimeout(() => { + fn(); + }, delay); + }; }; - }; - let next = () => { - let toParameter = getParameters(fromParameter); - let maxRecordsID = recordCount - 1; + let next = () => { + let toParameter = getParameters(fromParameter); + let maxRecordsID = recordCount - 1; - if (toParameter === maxRecordsID) { - alert("You have reached the final page"); - } + if (toParameter === maxRecordsID) { + alert("You have reached the final page"); + } - let nextAmount = toParameter - fromParameter + 1; - let nextCountAmount = nextAmount * nextCount; - fromParameter = fromParameter + nextCountAmount; - toParameter = fromParameter + getNoOfRows(); + let nextAmount = toParameter - fromParameter + 1; + let nextCountAmount = nextAmount * nextCount; + fromParameter = fromParameter + nextCountAmount; + toParameter = fromParameter + getNoOfRows(); - let end = fromParameter + getNoOfRows(); + let end = fromParameter + getNoOfRows(); - if (end > maxRecordsID) { - toParameter = maxRecordsID; - fromParameter = toParameter - getNoOfRows(); - } + if (end > maxRecordsID) { + toParameter = maxRecordsID; + fromParameter = toParameter - getNoOfRows(); + } - nextCount = 0; + nextCount = 0; - getTable(); - }; + getTable(); + }; - nextButton.addEventListener("click", nextDebounce(next, 500)); + if (nextButton !== null) { + nextButton.addEventListener("click", nextDebounce(next, 500)); + } } // Previous { - let prevCount = 0; - const prevButton: any = document.querySelector("#prev"); - - const prevDebounce = (fn: any, delay: number) => { - return function () { - prevCount++; - clearTimeout(timer); - timer = setTimeout(() => { - fn(); - }, delay); + let prevCount = 0; + const prevButton: any = document.querySelector("#prev"); + + const prevDebounce = (fn: any, delay: number) => { + return function () { + prevCount++; + clearTimeout(timer); + timer = setTimeout(() => { + fn(); + }, delay); + }; }; - }; - let prev = () => { - let toParameter = getParameters(fromParameter); + let prev = () => { + let toParameter = getParameters(fromParameter); - if (fromParameter === 0) { - alert("You Are On The First Page"); - } else { - let prevAmount = toParameter - fromParameter + 1; - let prevCountAmount = prevAmount * prevCount; + if (fromParameter === 0) { + alert("You Are On The First Page"); + } else { + let prevAmount = toParameter - fromParameter + 1; + let prevCountAmount = prevAmount * prevCount; - let intOne = fromParameter - prevCountAmount; + let intOne = fromParameter - prevCountAmount; - if (intOne < 0) { - fromParameter = 0; - } else { - fromParameter = intOne; - } + if (intOne < 0) { + fromParameter = 0; + } else { + fromParameter = intOne; + } - prevCount = 0; + prevCount = 0; - getTable(); - } - }; + getTable(); + } + }; - prevButton.addEventListener("click", prevDebounce(prev, 500)); + prevButton.addEventListener("click", prevDebounce(prev, 500)); } // ID Jump { - const input: any = document.querySelector("input"); - - let idJump = () => { - let toParameter = getParameters(fromParameter); - let currentID = fromParameter; - let search = input.value; - let end = parseInt(search) + getNoOfRows(); - let maxRecordsID = recordCount - 1; - - if (search !== NaN && search !== "" && search <= maxRecordsID && search >= 0) { - if (end > maxRecordsID) { - toParameter = maxRecordsID; - fromParameter = toParameter - getNoOfRows(); - } else { - fromParameter = parseInt(search); - toParameter = fromParameter + getNoOfRows(); - } - } else if (search !== "") { - alert("Make Sure Your Desired ID Is Not A Negative Number Or Doesn't Exceed 999999"); - fromParameter = currentID; - toParameter = fromParameter + getNoOfRows(); - input.value = ""; - } - - getTable(); - }; + const input: any = document.querySelector("input"); + + let idJump = () => { + let toParameter = getParameters(fromParameter); + let currentID = fromParameter; + let search = input.value; + let end = parseInt(search) + getNoOfRows(); + let maxRecordsID = recordCount - 1; + + if (search !== NaN && search !== "" && search <= maxRecordsID && search >= 0) { + if (end > maxRecordsID) { + toParameter = maxRecordsID; + fromParameter = toParameter - getNoOfRows(); + } else { + fromParameter = parseInt(search); + toParameter = fromParameter + getNoOfRows(); + } + } else if (search !== "") { + alert("Make Sure Your Desired ID Is Not A Negative Number Or Doesn't Exceed 999999"); + fromParameter = currentID; + toParameter = fromParameter + getNoOfRows(); + input.value = ""; + } + + getTable(); + }; - window.addEventListener("input", debounce(idJump, 500)); + window.addEventListener("input", debounce(idJump, 500)); } diff --git a/index.html b/index.html index 4ca4d73a..b5ed2a6f 100644 --- a/index.html +++ b/index.html @@ -1,27 +1,27 @@ - - - - - Onboarding JavaScript Task - - - - - - -
-
- + + + + + Onboarding JavaScript Task + + + + + + +
+
+ From ade9748ac5c1384f034005ed6e9107d2ffbce340 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Fri, 6 May 2022 10:55:50 +0200 Subject: [PATCH 37/44] 06 May code revisied --- app.ts | 52 +++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 37 insertions(+), 15 deletions(-) diff --git a/app.ts b/app.ts index ace6281f..df42c15f 100644 --- a/app.ts +++ b/app.ts @@ -41,26 +41,39 @@ function createHeadingRow(headingData: string) { // Table Content function createTableContent(contentData: string) { - const content: any = document.querySelector("#content"); + const content: HTMLElement | null = document.getElementById("content"); let table = `
`; - content.innerHTML += table; + if (content !== null) { + content.innerHTML += table; + } - let rows: any = document.querySelector("#row-" + contentData[0] + ".rows"); + let rows: HTMLElement | null = document.getElementById("row-" + contentData[0]); for (let x = 0; x < contentData.length; x++) { let rowCols = `
${contentData[x]}
`; - rows.innerHTML += rowCols; + if (rows !== null) { + rows.innerHTML += rowCols; + } } } //// Fetch Requests +// Response Error Handling +function handleErrors(response: Response) { + if (!response.ok) { + throw Error(response.statusText); + } + return response; +} + // Heading Row (Getting the columns data) function getHeadings() { return fetch("http://localhost:2050/columns", { method: "GET", headers: { "Content-Type": "application/json" }, }) - .then((res) => res.text()) + .then(handleErrors) + .then((response) => response.text()) .then((data) => { let headingData = JSON.parse(data); for (let i = 0; i < headingData.length; i++) { @@ -75,43 +88,50 @@ function getHeadings() { // Table Content (Getting the table's data) function getTable() { - const content: any = document.querySelector("#content"); + const content: HTMLElement | null = document.getElementById("content"); let toParameter = getParameters(fromParameter); - const pageStats: any = document.querySelector("#pageStats"); + const pageStats: HTMLElement | null = document.getElementById("pageStats"); // Clears Table - content.innerHTML = ""; + if (content !== null) { + content.innerHTML = ""; + } // Displays The Current Results Being Shown let currentStats = `Showing results from ${fromParameter} to ${toParameter} out of ${recordCount} results.`; - pageStats.innerHTML = currentStats; + if (pageStats !== null) { + pageStats.innerHTML = currentStats; + } return fetch(`http://localhost:2050/records?from=${fromParameter}&to=${toParameter}`, { method: "GET", headers: { "Content-Type": "application/json" }, }) - .then((res) => res.text()) + .then(handleErrors) + .then((res: Response) => res.text()) .then((data) => { let contentData = JSON.parse(data); for (let i = 0; i < contentData.length; i++) { createTableContent(contentData[i]); } }) - .catch((error) => { + .catch((error: Error) => { console.log(error); }); } +// Gets Total Of All Records function getRecordCount() { return fetch("http://localhost:2050/recordCount", { method: "GET", headers: { "Content-Type": "application/json" }, }) - .then((res) => res.text()) + .then(handleErrors) + .then((res: Response) => res.text()) .then((data) => { recordCount = JSON.parse(data); }) - .catch((error) => { + .catch((error: Error) => { console.log(error); }); } @@ -192,7 +212,7 @@ window.addEventListener("resize", debounce(resizing, 500)); // Previous { let prevCount = 0; - const prevButton: any = document.querySelector("#prev"); + const prevButton: HTMLElement | null = document.getElementById("prev"); const prevDebounce = (fn: any, delay: number) => { return function () { @@ -227,7 +247,9 @@ window.addEventListener("resize", debounce(resizing, 500)); } }; - prevButton.addEventListener("click", prevDebounce(prev, 500)); + if (prevButton !== null) { + prevButton.addEventListener("click", prevDebounce(prev, 500)); + } } // ID Jump From cdaf8aad9d46b3b8352a8c44bfda88f98ebe9f51 Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Mon, 9 May 2022 14:27:08 +0200 Subject: [PATCH 38/44] 09 May code review --- app.ts | 231 +++++++++++++++++++++++++++++---------------------------- 1 file changed, 117 insertions(+), 114 deletions(-) diff --git a/app.ts b/app.ts index df42c15f..e30d524f 100644 --- a/app.ts +++ b/app.ts @@ -4,6 +4,10 @@ let recordCount: number; //// On Window Load window.onload = function () { + const next = new Next(); // next class + const prev = new Prev(); // prev class + window.addEventListener("input", debounce(idJump, 500)); + window.addEventListener("resize", debounce(resizing, 500)); getRecordCount() .then(() => { return getHeadings(); @@ -11,10 +15,10 @@ window.onload = function () { .then(() => { return getTable(); }); - console.log("CALL HECTOR!!!"); }; -function getParameters(fromParameter: number) { +// Gets The 2nd paramater from the 1st parameter +function getParameters(fromParameter: number): number { let toParameter: number; let noOfRows = getNoOfRows(); @@ -22,13 +26,14 @@ function getParameters(fromParameter: number) { return toParameter; } +// Gets the number of rows on the screen function getNoOfRows(): number { const height = window.innerHeight; let noOfRows = Math.floor(height / 40); return noOfRows; } -//// Functions To Create/Clear The HTML +//// Functions To Create The HTML // Heading Row function createHeadingRow(headingData: string) { const heading: HTMLElement | null = document.getElementById("heading"); @@ -40,17 +45,19 @@ function createHeadingRow(headingData: string) { } // Table Content -function createTableContent(contentData: string) { +function createTableContent(contentData: any) { const content: HTMLElement | null = document.getElementById("content"); let table = `
`; if (content !== null) { content.innerHTML += table; + } else { + alert("ERROR"); } let rows: HTMLElement | null = document.getElementById("row-" + contentData[0]); - for (let x = 0; x < contentData.length; x++) { - let rowCols = `
${contentData[x]}
`; + for (let x of contentData) { + let rowCols = `
${x}
`; if (rows !== null) { rows.innerHTML += rowCols; } @@ -67,19 +74,18 @@ function handleErrors(response: Response) { } // Heading Row (Getting the columns data) -function getHeadings() { +function getHeadings(): Promise { return fetch("http://localhost:2050/columns", { method: "GET", headers: { "Content-Type": "application/json" }, }) .then(handleErrors) - .then((response) => response.text()) - .then((data) => { - let headingData = JSON.parse(data); - for (let i = 0; i < headingData.length; i++) { - createHeadingRow(headingData[i]); + .then((response: Response) => response.json()) + .then((data: string) => { + let headingData = data; + for (let heading of headingData) { + createHeadingRow(heading); } - getParameters(0); }) .catch((error: Error) => { console.log(error); @@ -87,7 +93,7 @@ function getHeadings() { } // Table Content (Getting the table's data) -function getTable() { +function getTable(): Promise { const content: HTMLElement | null = document.getElementById("content"); let toParameter = getParameters(fromParameter); const pageStats: HTMLElement | null = document.getElementById("pageStats"); @@ -108,11 +114,11 @@ function getTable() { headers: { "Content-Type": "application/json" }, }) .then(handleErrors) - .then((res: Response) => res.text()) - .then((data) => { - let contentData = JSON.parse(data); - for (let i = 0; i < contentData.length; i++) { - createTableContent(contentData[i]); + .then((res: Response) => res.json()) + .then((data: string) => { + let contentData = data; + for (let content of contentData) { + createTableContent(content); } }) .catch((error: Error) => { @@ -121,15 +127,15 @@ function getTable() { } // Gets Total Of All Records -function getRecordCount() { +function getRecordCount(): Promise { return fetch("http://localhost:2050/recordCount", { method: "GET", headers: { "Content-Type": "application/json" }, }) .then(handleErrors) - .then((res: Response) => res.text()) - .then((data) => { - recordCount = JSON.parse(data); + .then((res: Response) => res.json()) + .then((data: number) => { + recordCount = data; }) .catch((error: Error) => { console.log(error); @@ -155,131 +161,128 @@ function resizing() { if (end > maxRecordsID) { toParameter = maxRecordsID; fromParameter = toParameter - getNoOfRows(); - } else { - toParameter = fromParameter + getNoOfRows(); } getTable(); } -window.addEventListener("resize", debounce(resizing, 500)); - //// Navigation // Next -{ - let nextCount = 0; - const nextButton: HTMLElement | null = document.getElementById("next"); - - const nextDebounce = (fn: any, delay: number) => { - return function () { - nextCount++; - clearTimeout(timer); - timer = setTimeout(() => { - fn(); - }, delay); +class Next { + nextCount: number; + nextButton: HTMLElement | null; + + constructor() { + this.nextCount = 0; + this.nextButton = document.getElementById("next"); + + const nextDebounce = (fn: any, delay: number) => { + return () => { + this.nextCount++; + clearTimeout(timer); + timer = setTimeout(() => { + fn(); + }, delay); + }; }; - }; - let next = () => { - let toParameter = getParameters(fromParameter); - let maxRecordsID = recordCount - 1; + let next = () => { + let toParameter = getParameters(fromParameter); + let maxRecordsID = recordCount - 1; - if (toParameter === maxRecordsID) { - alert("You have reached the final page"); - } + if (toParameter === maxRecordsID) { + alert("You have reached the final page"); + } - let nextAmount = toParameter - fromParameter + 1; - let nextCountAmount = nextAmount * nextCount; - fromParameter = fromParameter + nextCountAmount; - toParameter = fromParameter + getNoOfRows(); + let nextAmount = toParameter - fromParameter + 1; + let nextCountAmount = nextAmount * this.nextCount; + fromParameter = fromParameter + nextCountAmount; + toParameter = fromParameter + getNoOfRows(); - let end = fromParameter + getNoOfRows(); + let end = fromParameter + getNoOfRows(); - if (end > maxRecordsID) { - toParameter = maxRecordsID; - fromParameter = toParameter - getNoOfRows(); - } + if (end > maxRecordsID) { + toParameter = maxRecordsID; + fromParameter = toParameter - getNoOfRows(); + } - nextCount = 0; + this.nextCount = 0; - getTable(); - }; + getTable(); + }; - if (nextButton !== null) { - nextButton.addEventListener("click", nextDebounce(next, 500)); + this.nextButton?.addEventListener("click", nextDebounce(next, 500)); } } // Previous -{ - let prevCount = 0; - const prevButton: HTMLElement | null = document.getElementById("prev"); - - const prevDebounce = (fn: any, delay: number) => { - return function () { - prevCount++; - clearTimeout(timer); - timer = setTimeout(() => { - fn(); - }, delay); +class Prev { + prevCount: number; + prevButton: HTMLElement | null; + + constructor() { + this.prevCount = 0; + this.prevButton = document.getElementById("prev"); + + const prevDebounce = (fn: any, delay: number) => { + return () => { + this.prevCount++; + clearTimeout(timer); + timer = setTimeout(() => { + fn(); + }, delay); + }; }; - }; - let prev = () => { - let toParameter = getParameters(fromParameter); + let prev = () => { + let toParameter = getParameters(fromParameter); - if (fromParameter === 0) { - alert("You Are On The First Page"); - } else { - let prevAmount = toParameter - fromParameter + 1; - let prevCountAmount = prevAmount * prevCount; + if (fromParameter === 0) { + alert("You Are On The First Page"); + } else { + let prevAmount = toParameter - fromParameter + 1; + let prevCountAmount = prevAmount * this.prevCount; - let intOne = fromParameter - prevCountAmount; + let intOne = fromParameter - prevCountAmount; - if (intOne < 0) { - fromParameter = 0; - } else { - fromParameter = intOne; - } + if (intOne < 0) { + fromParameter = 0; + } else { + fromParameter = intOne; + } - prevCount = 0; + this.prevCount = 0; - getTable(); - } - }; + getTable(); + } + }; - if (prevButton !== null) { - prevButton.addEventListener("click", prevDebounce(prev, 500)); + this.prevButton?.addEventListener("click", prevDebounce(prev, 500)); } } // ID Jump -{ +function idJump() { const input: any = document.querySelector("input"); + let toParameter = getParameters(fromParameter); + let currentID = fromParameter; + let search = input.value; + let end = parseInt(search) + getNoOfRows(); + let maxRecordsID = recordCount - 1; - let idJump = () => { - let toParameter = getParameters(fromParameter); - let currentID = fromParameter; - let search = input.value; - let end = parseInt(search) + getNoOfRows(); - let maxRecordsID = recordCount - 1; - - if (search !== NaN && search !== "" && search <= maxRecordsID && search >= 0) { - if (end > maxRecordsID) { - toParameter = maxRecordsID; - fromParameter = toParameter - getNoOfRows(); - } else { - fromParameter = parseInt(search); - toParameter = fromParameter + getNoOfRows(); - } - } else if (search !== "") { - alert("Make Sure Your Desired ID Is Not A Negative Number Or Doesn't Exceed 999999"); - fromParameter = currentID; + if (search !== NaN && search !== "" && search <= maxRecordsID && search >= 0) { + if (end > maxRecordsID) { + toParameter = maxRecordsID; + fromParameter = toParameter - getNoOfRows(); + } else { + fromParameter = parseInt(search); toParameter = fromParameter + getNoOfRows(); - input.value = ""; } + } else if (search !== "") { + alert("Make Sure Your Desired ID Is Not A Negative Number Or Doesn't Exceed 999999"); + fromParameter = currentID; + toParameter = fromParameter + getNoOfRows(); + input.value = ""; + } - getTable(); - }; - - window.addEventListener("input", debounce(idJump, 500)); + getTable(); } From b72ecd9f6bc9e3503f2f13774c97bf384029e6ae Mon Sep 17 00:00:00 2001 From: Koumori97 Date: Mon, 9 May 2022 14:35:47 +0200 Subject: [PATCH 39/44] 09 May code review --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index b5ed2a6f..1f4aaa7d 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ Onboarding JavaScript Task - +