Make UI changes, Implement Logout
This commit is contained in:
parent
464820aacf
commit
d5ead08328
34
frontend/assets/internet.svg
Normal file
34
frontend/assets/internet.svg
Normal file
@ -0,0 +1,34 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg height="800px" width="800px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
viewBox="0 0 512 512" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#000000;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st0" d="M255.994,0.006C114.607,0.013,0.012,114.612,0,256c0.012,141.387,114.607,255.986,255.994,255.994
|
||||
C397.393,511.986,511.992,397.387,512,256C511.992,114.612,397.393,0.013,255.994,0.006z M97.607,97.612
|
||||
c23.34-23.328,51.761-41.475,83.455-52.725c-15.183,18.375-27.84,41.906-37.757,69.116H82.772
|
||||
C87.452,108.308,92.396,102.824,97.607,97.612z M65.612,138.003h69.986c-9.008,31.929-14.41,67.834-15.363,105.997H32.327
|
||||
C34.374,205.196,46.3,169.088,65.612,138.003z M65.612,373.997C46.3,342.912,34.374,306.804,32.327,268h87.991
|
||||
c0.961,38.124,6.21,74.092,15.206,105.998H65.612z M97.607,414.386c-5.211-5.211-10.156-10.695-14.836-16.39h60.573
|
||||
c4.28,11.774,9.019,22.944,14.312,33.21c6.954,13.438,14.758,25.468,23.348,35.89C149.332,455.846,120.931,437.699,97.607,414.386z
|
||||
M243.998,479.667c-3.746-0.196-7.469-0.477-11.164-0.86c-5.89-2.64-11.722-6.25-17.5-10.961
|
||||
c-17.632-14.359-33.976-38.671-46.398-69.85h75.061V479.667z M243.998,373.997h-83.436c-9.477-31.171-15.316-67.311-16.328-105.998
|
||||
h99.763V373.997z M243.998,244H144.31c1.008-38.71,6.875-74.819,16.359-105.997h83.33V244z M243.998,114.003h-74.951
|
||||
c3.109-7.79,6.367-15.312,9.934-22.195c10.64-20.625,23.17-36.89,36.354-47.656c5.777-4.71,11.609-8.32,17.5-10.96
|
||||
c3.695-0.382,7.417-0.664,11.164-0.859V114.003z M446.392,138.003c19.312,31.085,31.234,67.194,33.281,105.997h-87.991
|
||||
c-0.961-38.124-6.21-74.092-15.21-105.997H446.392z M414.393,97.612c5.211,5.211,10.156,10.696,14.836,16.391h-60.577
|
||||
c-4.281-11.773-9.023-22.945-14.312-33.21c-6.953-13.437-14.758-25.468-23.347-35.89C362.668,56.16,391.065,74.301,414.393,97.612z
|
||||
M267.998,32.333c3.746,0.195,7.469,0.484,11.16,0.859c5.89,2.649,11.723,6.25,17.504,10.96
|
||||
c17.636,14.359,33.976,38.671,46.397,69.85h-75.061V32.333z M267.998,138.003h83.436c9.476,31.171,15.32,67.31,16.328,105.997
|
||||
h-99.764V138.003z M267.998,268h99.685c-1.007,38.71-6.874,74.818-16.359,105.998h-83.326V268z M296.661,467.846
|
||||
c-5.781,4.711-11.614,8.313-17.504,10.961c-3.691,0.375-7.414,0.664-11.16,0.86v-81.67h74.951
|
||||
c-3.109,7.789-6.367,15.312-9.933,22.195C322.376,440.816,309.845,457.081,296.661,467.846z M414.393,414.386
|
||||
c-23.336,23.328-51.764,41.476-83.459,52.725c15.187-18.375,27.835-41.905,37.757-69.115h60.538
|
||||
C424.548,403.692,419.604,409.176,414.393,414.386z M446.392,373.997h-69.998c9.008-31.929,14.414-67.842,15.367-105.998h87.912
|
||||
C477.626,306.804,465.704,342.912,446.392,373.997z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
7
frontend/assets/logout.svg
Normal file
7
frontend/assets/logout.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 12L2 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2 12L5.5 9" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2 12L5.5 15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.00195 7C9.01406 4.82497 9.11051 3.64706 9.87889 2.87868C10.7576 2 12.1718 2 15.0002 2L16.0002 2C18.8286 2 20.2429 2 21.1215 2.87868C22.0002 3.75736 22.0002 5.17157 22.0002 8L22.0002 16C22.0002 18.8284 22.0002 20.2426 21.1215 21.1213C20.3531 21.8897 19.1752 21.9862 17 21.9983M9.00195 17C9.01406 19.175 9.11051 20.3529 9.87889 21.1213C10.5202 21.7626 11.4467 21.9359 13 21.9827" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 912 B |
7
frontend/assets/logout2.svg
Normal file
7
frontend/assets/logout2.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 12L2 12" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2 12L5.5 9" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2 12L5.5 15" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.00195 7C9.01406 4.82497 9.11051 3.64706 9.87889 2.87868C10.7576 2 12.1718 2 15.0002 2L16.0002 2C18.8286 2 20.2429 2 21.1215 2.87868C22.0002 3.75736 22.0002 5.17157 22.0002 8L22.0002 16C22.0002 18.8284 22.0002 20.2426 21.1215 21.1213C20.3531 21.8897 19.1752 21.9862 17 21.9983M9.00195 17C9.01406 19.175 9.11051 20.3529 9.87889 21.1213C10.5202 21.7626 11.4467 21.9359 13 21.9827" stroke="red" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 904 B |
@ -9,24 +9,29 @@
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="container">
|
||||
<button id="logout"></button>
|
||||
|
||||
<div class="contentbox">
|
||||
<div class="innerwrapper">
|
||||
<div class="contentbox">
|
||||
|
||||
<div class="searchbar">
|
||||
<input type="text" id="search">
|
||||
<button></button>
|
||||
</div>
|
||||
|
||||
<div class="objcontainer"></div>
|
||||
|
||||
<div class="searchbar">
|
||||
<input type="text" id="search">
|
||||
<button></button>
|
||||
</div>
|
||||
|
||||
<div class="objcontainer">
|
||||
<div class="querybox">
|
||||
<div class="infopanel"></div>
|
||||
</div>
|
||||
|
||||
<div class="buttonbox">
|
||||
<div class="buttonpanel"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="querybox">
|
||||
<div class="infopanel"></div>
|
||||
</div>
|
||||
|
||||
<div class="buttonbox"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script defer src="../scripts/dashboard.js"></script>
|
||||
|
||||
@ -18,6 +18,7 @@ async function getData() {
|
||||
getFieldName(userdata)
|
||||
} else if(!response.ok) {
|
||||
const errorMessage = await response.text();
|
||||
window.location.href = "../html/index.html";
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
} catch (error) {
|
||||
@ -33,7 +34,7 @@ function updateListGui(field) {
|
||||
let content = contentbox.innerHTML.concat(
|
||||
`
|
||||
<div>
|
||||
<img src="${field["url"]}">
|
||||
<img src="${field["url"]}" onerror="this.onerror=null; this.src='../assets/internet.svg'">
|
||||
<p>${field["fieldname"]}</p>
|
||||
<button id="${field["fieldname"]}" class="entrybutton"> Show </button>
|
||||
</div>
|
||||
@ -129,6 +130,36 @@ function updateInfoGui(call) {
|
||||
|
||||
//-----------------------------------------------------------------------------------------
|
||||
|
||||
async function logOut() {
|
||||
try{
|
||||
await fetch("/logout", {
|
||||
method:'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({})
|
||||
})
|
||||
window.location.href = "../html/index.html";
|
||||
} catch(err) {
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
const logoutbtn = document.querySelector("#logout")
|
||||
|
||||
logoutbtn.addEventListener('click', () => {
|
||||
console.log("logging out")
|
||||
logOut()
|
||||
})
|
||||
|
||||
|
||||
//-----------------------------------------------------------------------------------------
|
||||
|
||||
// window.addEventListener('unload', function() {
|
||||
// logOut()
|
||||
// });
|
||||
|
||||
|
||||
window.onload = function() {
|
||||
getData();
|
||||
};
|
||||
@ -30,10 +30,11 @@ body {
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: 30px;
|
||||
position: relative;
|
||||
width: 1100px;
|
||||
width: 1200px;
|
||||
height: 600px;
|
||||
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8);
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
footer{
|
||||
@ -53,14 +54,15 @@ footer p{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 0;
|
||||
background-color: rgb(0, 255, 255,0.3);
|
||||
border-radius: 20px;
|
||||
height: 85%;
|
||||
width: 40%;
|
||||
/* height: 70vh;
|
||||
width: 40vw; */
|
||||
height: 100%;
|
||||
width: 45%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.searchbar {
|
||||
@ -129,8 +131,8 @@ footer p{
|
||||
background-color: rgb(255, 255, 255, 0.8);
|
||||
border-radius: 0 0 10px 10px;
|
||||
overflow: auto;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -145,6 +147,7 @@ footer p{
|
||||
border: rgba(0, 255, 255, 0.5) 1px solid;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.objcontainer div:hover {
|
||||
@ -193,25 +196,37 @@ footer p{
|
||||
bottom: 40px;
|
||||
background-color: rgb(0, 255, 255,0.3);
|
||||
border-radius: 20px;
|
||||
height: 60%;
|
||||
width: 50%;
|
||||
height: 70%;
|
||||
width: 40%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.infopanel {
|
||||
width: 90%;
|
||||
height: 80%;
|
||||
height: 90%;
|
||||
background-color: rgb(255, 255, 255, 0.8);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.buttonpanel {
|
||||
width: 90%;
|
||||
height: 70%;
|
||||
background-color: rgb(255, 255, 255, 0.8);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.buttonbox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 40px;
|
||||
top: 0;
|
||||
background-color: rgb(0, 255, 255,0.3);
|
||||
border-radius: 20px;
|
||||
height: 20%;
|
||||
width: 50%;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@ -230,10 +245,41 @@ footer p{
|
||||
background: hsl(0, 0%, 33%);
|
||||
}
|
||||
|
||||
#logout{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
border-radius: 10px;
|
||||
background-image: url(../assets/logout2.svg);
|
||||
background-size: cover;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#logout:hover{
|
||||
background-image: url(../assets/logout2.svg);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
#logout:not(:hover){
|
||||
background-image: url(../assets/logout.svg);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.innerwrapper {
|
||||
height: 90%;
|
||||
width: 90%;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.container{
|
||||
position: fixed;
|
||||
width: 774px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user