diff --git a/frontend/assets/search.svg b/frontend/assets/search.svg new file mode 100644 index 0000000..6c8c6fb --- /dev/null +++ b/frontend/assets/search.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/html/dashboard.html b/frontend/html/dashboard.html index e69de29..1229bf1 100644 --- a/frontend/html/dashboard.html +++ b/frontend/html/dashboard.html @@ -0,0 +1,37 @@ + + + + + + DashBoard + + + +
+
+ +
+ +
+ + +
+ +
+ +
+
+ +
+
+
+ +
+
+
+ + + + + + diff --git a/frontend/html/index.html b/frontend/html/index.html index 56a20ff..08f8422 100644 --- a/frontend/html/index.html +++ b/frontend/html/index.html @@ -3,7 +3,7 @@ - + Login @@ -41,7 +41,7 @@ - + diff --git a/frontend/html/register.html b/frontend/html/register.html index 9beca2f..ac91956 100644 --- a/frontend/html/register.html +++ b/frontend/html/register.html @@ -3,7 +3,7 @@ - + @@ -30,7 +30,7 @@ - + diff --git a/frontend/scripts/dashboard.js b/frontend/scripts/dashboard.js index e69de29..28b27f7 100644 --- a/frontend/scripts/dashboard.js +++ b/frontend/scripts/dashboard.js @@ -0,0 +1,74 @@ + +const search = document.getElementById('search'); +let globaldata; + +search.addEventListener('keyup', function() { + let result = search.value; + if(result == ""){ + updatelist(globaldata) + } else { + console.log(result); + updatelist(globaldata) + } +}); + +async function getData() { + try { + let response = await fetch('/get_data', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + } + }); + + if(response.ok) { + let userdata = await response.json(); + console.log(userdata) + globaldata = userdata + updatelist(userdata); + } else if(!response.ok) { + const errorMessage = await response.text(); + throw new Error(errorMessage); + } + } catch (error) { + console.error('Error:', error.message); + } + } + + +// function addlist(userdata) { +// let masterdata = []; +// for (let field in userdata){ +// masterdata.push(userdata[field]) +// } +// console.log(...masterdata) +// updatelist(masterdata) +// } + +const contentbox = document.querySelector('.objcontainer') + +function updatelist(userdata) { + contentbox.innerHTML = '' + for(let field in userdata){ + let fields = userdata[field]; + for (let data in fields) { + if (fields.hasOwnProperty(data)) { + let value = fields[data]; + updategui(field, data, value) + console.log(field, data, value) + } + + } + } + +} + +function updategui(title, key, value) { + console.log(`${title},${key},${value}`) + let content = contentbox.innerHTML.concat(`
${title},${key},${value}
`) + contentbox.innerHTML = content; +} + +window.onload = function() { + getData(); +}; \ No newline at end of file diff --git a/frontend/scripts/index.js b/frontend/scripts/index.js index a61b901..343311c 100644 --- a/frontend/scripts/index.js +++ b/frontend/scripts/index.js @@ -38,20 +38,27 @@ function validateLogin() { async function getAuth() { let _username = document.getElementById("username").value; let _password = document.getElementById("password").value; + +formData = new FormData(); +formData.append('user_name', _username); +formData.append('password', _password); +console.log(formData) + try { - const response = await fetch('http://127.0.0.1:5000/', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - user_name: _username, - password: _password - }) + const response = await fetch('/login', { + method: "post", + body: formData }); - if(!response.ok) { - throw new Error('Connection was not Ok!'); + if(response.ok) { + window.location.href = "dashboard.html"; + } else if(!response.ok) { + const errorMessage = await response.text(); + document.getElementById("errlabel").innerHTML = errorMessage; + setTimeout(()=> { + document.getElementById("errlabel").innerHTML = ""; + },3000) + throw new Error(errorMessage); } // const data = await response.json(); @@ -71,7 +78,7 @@ const register = document.getElementById("register"); register.addEventListener("click", function(event) { event.preventDefault(); - window.location.href = "register.html"; + window.location.href = "../html/register.html"; }); @@ -98,4 +105,4 @@ register.addEventListener("click", function(event) { // } else { // console.error('Login Failed:', data.error) // } -// } \ No newline at end of file +// } diff --git a/frontend/styles/dashboard.css b/frontend/styles/dashboard.css index e69de29..abf9b98 100644 --- a/frontend/styles/dashboard.css +++ b/frontend/styles/dashboard.css @@ -0,0 +1,174 @@ +* { + box-sizing: border-box; + margin: none; + } + +body { + background-color: rgb(255, 255, 255); + display: flex; + margin-top: 25px; + align-items: center; + justify-content: center; + background-image: url("../assets/bg.jpg"); + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} + +.wrapper { + display: flex; + width: 90vw; + height: 90vh; + align-items: center; + justify-content: center; +} + +.container { + display: flex; + align-items: center; + background-color: rgb(0, 255, 255,0.2); + backdrop-filter: blur(15px); + border-radius: 30px; + width: 90vw; + height: 80vh; + box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8); + overflow: hidden; +} + +footer{ + position: fixed; + bottom: 0px; + background-color: rgb(12, 12, 12); + height: 50px; + width: 100vw; +} + +footer p{ + color: white; + text-align: center; +} + +.contentbox { + display: flex; + position: absolute; + right: 30px; + background-color: rgb(0, 255, 255,0.3); + border-radius: 20px; + height: 85%; + width: 40%; + justify-content: center; + align-items: center; +} + +.searchbar { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + overflow: hidden; + top: 20px; + width: 90%; + height: 10%; + background-color: rgb(255, 255, 255, 0.8); + border-radius: 10px 10px 0 0; +} + +.searchbar input { + width: 95%; + height: 80%; + border: blue 2px slateblue; + box-shadow: none; + background-color: rgb(255, 255, 255, 0.5); + border-radius: 20px; + padding-left: 20px; + padding-right: 40px; +} + +.searchbar img { + display: block; + position: absolute; + top: 24%; + right: 25px; + width: 25px; +} + +.objcontainer { + display: flex; + flex-direction: column; + row-gap: 10px; + position: absolute; + bottom: 20px; + width: 90%; + height: 80%; + background-color: rgb(255, 255, 255, 0.8); + border-radius: 0 0 10px 10px; + overflow: auto; + padding-top: 10px; + padding-bottom: 10px; + align-items: center; +} + +.objcontainer div{ + padding: 20px; + width: 90%; + height: 200px; + background-color: rgb(255, 255, 255, 0.5); + text-align: center; + box-shadow: 0 0 10px black; + border: rgba(0, 255, 255, 0.5) 1px solid; + overflow: hidden; +} + +.objcontainer div:hover { + background-color: rgb(128, 128, 128, 0.4); +} + +.objcontainer div:not(:hover) { + background-color: rgb(255, 255, 255, 0.5); +} + +.querybox { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + left: 30px; + bottom: 40px; + background-color: rgb(0, 255, 255,0.3); + border-radius: 20px; + height: 60%; + width: 50%; +} + +.infopanel { + width: 90%; + height: 80%; + background-color: rgb(255, 255, 255, 0.8); + border-radius: 10px; +} + +.buttonbox { + position: absolute; + left: 30px; + top: 40px; + background-color: rgb(0, 255, 255,0.3); + border-radius: 20px; + height: 20%; + width: 50%; +} + +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: hsl(0, 0%, 53%); +} + +::-webkit-scrollbar-thumb:hover { + background: hsl(0, 0%, 33%); +} \ No newline at end of file diff --git a/frontend/styles/index.css b/frontend/styles/index.css index 27df6bf..ded948c 100644 --- a/frontend/styles/index.css +++ b/frontend/styles/index.css @@ -8,10 +8,11 @@ body { margin-top: 25px; align-items: center; justify-content: center; - background-image: url("bg.jpg"); - background-size: 200% auto; + background-image: url("../assets/bg.jpg"); + background-size: cover; background-position: center; background-repeat: no-repeat; + background-attachment: fixed } .wrapper { diff --git a/frontend/styles/register.css b/frontend/styles/register.css index aed3c06..f93aba2 100644 --- a/frontend/styles/register.css +++ b/frontend/styles/register.css @@ -8,8 +8,8 @@ body { margin-top: 25px; align-items: center; justify-content: center; - background-image: url("bg.jpg"); - background-size: 200% auto; + background-image: url("../assets/bg.jpg"); + background-size: cover; background-position: center; background-repeat: no-repeat; } @@ -182,7 +182,7 @@ footer p{ font-family: 'Pixelify Sans', cursive; color: white; background-color: transparent; - background-image: url('download.svg'); + background-image: url('../assets/download.svg'); background-size: cover; box-shadow: rgb(0, 0, 0) 0px 0px 10px;