Commit 8bb28e9c by Milovan Samardzic

IzmenaProfilaUpdate

parent 8e8325f5
...@@ -66,6 +66,7 @@ public class AppController ...@@ -66,6 +66,7 @@ public class AppController
model.addAttribute("editUser", loggedUser.getKorisnik()); model.addAttribute("editUser", loggedUser.getKorisnik());
model.addAttribute("profileRole", kRepo.findRoleById( loggedUser.getKorisnik().getTipId())); model.addAttribute("profileRole", kRepo.findRoleById( loggedUser.getKorisnik().getTipId()));
model.addAttribute("grad", lRepo.findById( loggedUser.getKorisnik().getGradId())); model.addAttribute("grad", lRepo.findById( loggedUser.getKorisnik().getGradId()));
model.addAttribute("lokacije", lRepo.findAll());
return("profile"); return("profile");
} }
......
...@@ -279,6 +279,7 @@ h3{ ...@@ -279,6 +279,7 @@ h3{
.container { .container {
max-width: 1000px; max-width: 1000px;
padding: 0; padding: 0;
height: 600px;
} }
p { p {
...@@ -358,4 +359,23 @@ img { ...@@ -358,4 +359,23 @@ img {
font-size: 12px; font-size: 12px;
width: 50%; width: 50%;
text-align: center; text-align: center;
}
/*the fade animations*/
@keyframes fade-out {
from {
opacity: 100%;
}
to {
opacity: 0%;
}
}
@keyframes fade-in {
from {
opacity: 0%;
}
to {
opacity: 100%;
}
} }
\ No newline at end of file
...@@ -26,4 +26,28 @@ function proveraLogin(){ ...@@ -26,4 +26,28 @@ function proveraLogin(){
{ {
document.getElementById("losaSifra").style.display = "none"; document.getElementById("losaSifra").style.display = "none";
} }
}
//toggle var
var fade_state = true;
//on btn click
function fade() {
//get the button and div
let div = document.getElementById("fadeDiv");
let btn = document.getElementById("fade");
//if faded in or out
if (fade_state == true) {
//trigers animation
div.style.animation = "fade-out 2s forwards";
//sets the text
btn.innerHTML = "fade-in";
//sets fade_state
fade_state = false;
} else if (fade_state == false) {
//trigers animation
div.style.animation = "fade-in 2s forwards";
//sets the text
btn.innerHTML = "fade-out";
//sets fade_state
fade_state = true;
}
} }
\ No newline at end of file
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="description" content="" /> <meta name="description" content=""/>
<meta name="author" content="" /> <meta name="author" content=""/>
<title>SkuciSe</title> <title>SkuciSe</title>
<link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'>
<!-- Favicon--> <!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> <link rel="icon" type="image/x-icon" href="assets/favicon.ico"/>
<!-- CSS only --> <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- Core theme CSS (includes Bootstrap)--> <!-- Core theme CSS (includes Bootstrap)-->
<link href="/css/style.css" rel="stylesheet" /> <link href="/css/style.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/svg-with-js.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/svg-with-js.min.css" rel="stylesheet"/>
</head> </head>
<body th:object="${loggedUser}"> <body th:object="${loggedUser}">
...@@ -35,24 +35,33 @@ ...@@ -35,24 +35,33 @@
<!--<img src="../static/images/logo.png" alt="Logo">--> <!--<img src="../static/images/logo.png" alt="Logo">-->
<div id="navbar-login"> <div id="navbar-login">
<ul> <ul>
<li th:if="${loggedUser == null}"><a th:href="@{/login}"><i class="fas fa-sign-in-alt"></i><span style="padding:5px;">Prijavi se</span></a></li> <li th:if="${loggedUser == null}"><a th:href="@{/login}"><i class="fas fa-sign-in-alt"></i><span
<li th:if="${loggedUser == null}"><a th:href="@{/register}"><i class="fa-solid fa-circle-user"></i><span style="padding:5px;">Registruj se</span></a></li> style="padding:5px;">Prijavi se</span></a></li>
<li th:if="${loggedUser == null}"><a th:href="@{/register}"><i class="fa-solid fa-circle-user"></i><span
style="padding:5px;">Registruj se</span></a></li>
<li th:if="${loggedUser != null}"> <li th:if="${loggedUser != null}">
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-secondary dropdown-toggle round" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button class="btn btn-secondary dropdown-toggle round" type="button" id="dropdownMenuButton"
<i class="fa-solid fa-circle-user"></i><span style="padding:5px;" th:text="${loggedUser.getKorisnik().getIme()}"></span> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa-solid fa-circle-user"></i><span style="padding:5px;"
th:text="${loggedUser.getKorisnik().getIme()}"></span>
</button> </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" th:href="@{/profile/{korisnikid}(korisnikid=${loggedUser.getKorisnik().getKorisnikId()})}">Moj Profil</a> <a class="dropdown-item" th:href="@{/profile}">Moj Profil</a>
<a class="dropdown-item" th:href="@{/mojioglasi/{korisnikid}(korisnikid=${loggedUser.getKorisnik().getKorisnikId()})}">Moji Oglasi</a> <a class="dropdown-item" th:href="@{/mojioglasi}">Moji Oglasi</a>
<a class="dropdown-item" th:href="@{/mojizahtevi/{korisnikid}(korisnikid=${loggedUser.getKorisnik().getKorisnikId()})}">Moji Zahtevi</a> <a class="dropdown-item" th:href="@{/mojizahtevi}">Moji Zahtevi</a>
<form th:action="@{/logout}" method="post" id="my_form" class="dropdown-item"> <form th:action="@{/logout}" method="post" id="my_form" class="dropdown-item">
<a href="#" onclick="document.getElementById('my_form').submit(); return false;"><i class="fas fa-sign-in-alt"></i><span style="padding:5px;">Odjavi se</span></a> <a href="#" onclick="document.getElementById('my_form').submit(); return false;"><i
class="fas fa-sign-in-alt"></i><span style="padding:5px;">Odjavi se</span></a>
</form> </form>
</div> </div>
</div> </div>
</li> </li>
<li><button type="button" class="btn btn-primary btn-md"><i class="fa-regular fa-message"></i> Postavite novi oglas</button></li> <li>
<button type="button" class="btn btn-primary btn-md"><i class="fa-regular fa-message"></i> Postavite
novi oglas
</button>
</li>
</ul> </ul>
</div> </div>
</header> </header>
...@@ -64,31 +73,97 @@ ...@@ -64,31 +73,97 @@
<div class="row"> <div class="row">
<div class="col-12 bg-white p-0 px-3 py-3 mb-3"> <div class="col-12 bg-white p-0 px-3 py-3 mb-3">
<div class="d-flex flex-column align-items-center"> <div class="d-flex flex-column align-items-center">
<div class="profilepic"> <a href="#" onclick="document.getElementById('inputSlika').click();" style="color:white">
<img class="photo profilepic__image" th:src="@{'data:image/png;charset=utf-8;base64,'+${loggedUser.getKorisnik().getSlika()}}" alt="slika korisnika"> <div class="profilepic">
<div class="profilepic__content"> <img class="photo profilepic__image"
<span class="profilepic__icon"><i class="fas fa-camera"></i></span> th:src="@{'data:image/png;charset=utf-8;base64,'+${loggedUser.getKorisnik().getSlika()}}"
<span class="profilepic__text"><a href="#" onclick="document.getElementById('inputSlika').click();" style="color:white">Izmeni sliku</a></span> alt="slika korisnika">
<div class="profilepic__content">
<span class="profilepic__icon"><i class="fas fa-camera"></i></span>
<span class="profilepic__text">Izmeni sliku</span>
</div>
</div> </div>
</div> </a>
<p class="fw-bold h4 mt-3"><span th:text="${loggedUser.getKorisnik().getIme()}"></span></p> <p class="fw-bold h4 mt-3"><span th:text="${loggedUser.getKorisnik().getIme()}"></span></p>
<p class="text-muted" th:object="${profileRole}" th:text="${profileRole}"></p> <p class="text-muted" th:object="${profileRole}" th:text="${profileRole}"></p>
<div class="d-flex justify-content-around w-75">
<button type="button" class="btn btn-secondary m-10" id="fade">Izmeni podatke</button>
<button type="button" class="btn btn-secondary m-10">Promeni sifru</button>
</div>
</div> </div>
</div> </div>
<div class="d-flex align-items-end justify-content-end"> <div class="form-body" style="height: 400px;margin-left:53px;display: none;" id="fadeDiv">
<button type="button" class="btn btn-secondary">Secondary</button> <div class="row">
<div class="form-holder" style="min-height: 0;">
<div class="form-content">
<div class="form-items">
<form class="requires-validation" novalidate th:object="${editUser}" method="POST"
th:action="@{/profile-update}" enctype="multipart/form-data">
<input th:field="${editUser.korisnikId}" class="form-control" type="hidden"
name="name" placeholder="Ime" required>
<div class="col-md-12">
<input th:field="${editUser.ime}" class="form-control" type="text"
name="name" placeholder="Ime" required>
<div class="invalid-feedback">Ime ne sme biti prazno!</div>
</div>
<div class="col-md-12">
<input th:field="${editUser.prezime}" class="form-control" type="text"
name="surname" placeholder="Prezime" required>
<div class="invalid-feedback">Prezime ne sme biti prazno!</div>
</div>
<div class="col-md-12">
<input th:field="${editUser.telefon}" class="form-control" type="text"
name="phone" placeholder="Broj telefona" required>
<div class="invalid-feedback">Broj telefona ne sme biti prazan!</div>
</div>
<div class="col-md-12">
<input th:field="${editUser.email}" class="form-control" type="email"
name="email" placeholder="E-mail Adresa" required>
<div class="invalid-feedback">Email ne sme biti prazan!</div>
</div>
<div class="col-md-12">
<select th:field="${editUser.gradId}">
<option th:each="lokacija: ${lokacije}"
th:value="${lokacija.getLokacijaId()}"
th:text="${lokacija.getNaziv()}">
</option>
</select>
</div>
<div class="col-md-12">
<input th:field="${editUser.sifra}" class="form-control" type="password"
name="password" placeholder="Sifra" required>
<div class="invalid-feedback">Sifra ne sme biti prazna!</div>
</div>
<div class="form-button mt-3">
<button id="submit" type="submit" class="btn btn-primary">Izmeni podatke
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<form id="formaSlika" method="POST" th:object="${loggedUser}" th:action="@{/picture-update}" style="display: none" enctype="multipart/form-data"> <form id="formaSlika" method="POST" th:object="${loggedUser}" th:action="@{/picture-update}"
<input type="file" name="image" accept="image/png, image/jpeg" id="inputSlika" style="display: none" onchange="document.getElementById('formaSlika').submit();return false;"/> style="display: none" enctype="multipart/form-data">
<input type="file" name="image" accept="image/png, image/jpeg" id="inputSlika" style="display: none"
onchange="document.getElementById('formaSlika').submit();return false;"/>
</form> </form>
<div class="col-md-7 ps-md-4"> <div class="col-md-7 ps-md-4">
<div class="row"> <div class="row">
<div class="col-12 bg-white px-3 mb-3 pb-3"> <div class="col-12 bg-white px-3 mb-3 pb-3">
<div class="d-flex align-items-center justify-content-between border-bottom"> <div class="d-flex align-items-center justify-content-between border-bottom">
<p class="py-2">Ime i Prezime</p> <p class="py-2">Ime i Prezime</p>
<p class="py-2 text-muted" th:text="${loggedUser.getKorisnik().getIme() + ' '+ loggedUser.getKorisnik().getPrezime()}"></p> <p class="py-2 text-muted"
th:text="${loggedUser.getKorisnik().getIme() + ' '+ loggedUser.getKorisnik().getPrezime()}"></p>
</div> </div>
<div class="d-flex align-items-center justify-content-between border-bottom"> <div class="d-flex align-items-center justify-content-between border-bottom">
<p class="py-2">Email</p> <p class="py-2">Email</p>
...@@ -105,44 +180,6 @@ ...@@ -105,44 +180,6 @@
</div> </div>
</div> </div>
</div> </div>
<form class="requires-validation" novalidate th:object="${editUser}" method="POST" th:action="@{/profile-update}" enctype="multipart/form-data">
<input th:field="${editUser.korisnikId}" class="form-control" type="hidden" name="name" placeholder="Ime" required>
<div class="col-md-12">
<input th:field="${editUser.ime}" class="form-control" type="text" name="name" placeholder="Ime" required>
<div class="valid-feedback">Dobro ime!</div>
<div class="invalid-feedback">Ime ne sme biti prazno!</div>
</div>
<div class="col-md-12">
<input th:field="${editUser.prezime}" class="form-control" type="text" name="surname" placeholder="Prezime" required>
<div class="valid-feedback">Dobro prezime!</div>
<div class="invalid-feedback">Prezime ne sme biti prazno!</div>
</div>
<div class="col-md-12">
<input th:field="${editUser.telefon}" class="form-control" type="text" name="phone" placeholder="Broj telefona" required>
<div class="valid-feedback">Dobar broj!</div>
<div class="invalid-feedback">Broj telefona ne sme biti prazan!</div>
</div>
<div class="col-md-12">
<input th:field="${editUser.email}" class="form-control" type="email" name="email" placeholder="E-mail Adresa" required>
<div class="valid-feedback">Dobar email!</div>
<div class="invalid-feedback">Email ne sme biti prazan!</div>
</div>
<div class="col-md-12">
<input th:field="${editUser.sifra}" class="form-control" type="password" name="password" placeholder="Sifra" required>
<div class="valid-feedback">Dobra sifra!</div>
<div class="invalid-feedback">Sifra ne sme biti prazna!</div>
</div>
<div class="form-button mt-3">
<button id="submit" type="submit" class="btn btn-primary">Izmeni podatke</button>
</div>
</form>
</div> </div>
</div> </div>
...@@ -151,23 +188,63 @@ ...@@ -151,23 +188,63 @@
<div class="row my-5 justify-content-center py-5"> <div class="row my-5 justify-content-center py-5">
<div class="col-11"> <div class="col-11">
<div class="row "> <div class="row ">
<div class="col-xl-8 col-md-4 col-sm-4 col-12 my-auto mx-auto a"><h3 class="text-muted mb-md-0 mb-5 bold-text">SkuciSe</h3></div> <div class="col-xl-8 col-md-4 col-sm-4 col-12 my-auto mx-auto a"><h3
<div class="col-xl-2 col-md-4 col-sm-4 col-12"><h6 class="mb-3 mb-lg-4 bold-text "><b>MENI</b></h6><ul class="list-unstyled"><li>Pocetna</li><li>O nama</li><li>Blog</li><li>Portfolio</li></ul></div> class="text-muted mb-md-0 mb-5 bold-text">SkuciSe</h3></div>
<div class="col-xl-2 col-md-4 col-sm-4 col-12"><h6 class="mb-3 mb-lg-4 text-muted bold-text mt-sm-0 mt-5"><b>ADRESA</b></h6><p class="mb-1">Radoja Domanovića 12</p><p> Kragujevac 34000</p> </div> <div class="col-xl-2 col-md-4 col-sm-4 col-12"><h6 class="mb-3 mb-lg-4 bold-text "><b>MENI</b></h6>
<ul class="list-unstyled">
<li>Pocetna</li>
<li>O nama</li>
<li>Blog</li>
<li>Portfolio</li>
</ul>
</div>
<div class="col-xl-2 col-md-4 col-sm-4 col-12"><h6
class="mb-3 mb-lg-4 text-muted bold-text mt-sm-0 mt-5"><b>ADRESA</b></h6>
<p class="mb-1">Radoja Domanovića 12</p>
<p> Kragujevac 34000</p></div>
</div> </div>
<div class="row "> <div class="row ">
<div class="col-xl-8 col-md-4 col-sm-4 col-auto my-md-0 mt-5 order-sm-1 order-3 align-self-end"><p class="social text-muted mb-0 pb-0 bold-text"> <span class="mx-2"><i class="fa fa-facebook" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-linkedin-square" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-twitter" aria-hidden="true"></i></span> <span class="mx-2"><i class="fa fa-instagram" aria-hidden="true"></i></span> </p><small class="rights"><span>&#174;</span> SkuciSe All Rights Reserved.</small></div> <div class="col-xl-8 col-md-4 col-sm-4 col-auto my-md-0 mt-5 order-sm-1 order-3 align-self-end"><p
<div class="col-xl-2 col-md-4 col-sm-4 col-auto order-1 align-self-end "><h6 class="mt-55 mt-2 text-muted bold-text"><b>PERA PERIC</b></h6><small> <span><i class="fa fa-envelope" aria-hidden="true"></i></span> pera@gmail.com</small></div> class="social text-muted mb-0 pb-0 bold-text"><span class="mx-2"><i class="fa fa-facebook"
<div class="col-xl-2 col-md-4 col-sm-4 col-auto order-2 align-self-end mt-3 "><h6 class="text-muted bold-text"><b>ACA ACIC</b></h6><small><span><i class="fa fa-envelope" aria-hidden="true"></i></span> aca@gmail.com</small></div> aria-hidden="true"></i></span>
<span class="mx-2"><i class="fa fa-linkedin-square" aria-hidden="true"></i></span> <span
class="mx-2"><i class="fa fa-twitter" aria-hidden="true"></i></span> <span class="mx-2"><i
class="fa fa-instagram" aria-hidden="true"></i></span></p><small class="rights"><span>&#174;</span>
SkuciSe All Rights Reserved.</small></div>
<div class="col-xl-2 col-md-4 col-sm-4 col-auto order-1 align-self-end "><h6
class="mt-55 mt-2 text-muted bold-text"><b>PERA PERIC</b></h6><small> <span><i
class="fa fa-envelope" aria-hidden="true"></i></span> pera@gmail.com</small></div>
<div class="col-xl-2 col-md-4 col-sm-4 col-auto order-2 align-self-end mt-3 "><h6
class="text-muted bold-text"><b>ACA ACIC</b></h6><small><span><i class="fa fa-envelope"
aria-hidden="true"></i></span>
aca@gmail.com</small></div>
</div> </div>
</div> </div>
</div> </div>
</footer> </footer>
</div> </div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/51d1fadef3.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
<script>
$(document).ready(function () {
$("#fade").click(function () {
if (document.getElementById("fadeDiv").style.display === "none") {
$("#fadeDiv").fadeIn(1000);
}
else
$("#fadeDiv").fadeOut(1000);
});
});
</script>
</body> </body>
</html> </html>
...@@ -71,10 +71,14 @@ ...@@ -71,10 +71,14 @@
<div class="invalid-feedback">Email ne sme biti prazan!</div> <div class="invalid-feedback">Email ne sme biti prazan!</div>
</div> </div>
<select th:field="${newUser.gradId}">
<option th:each="lokacija: ${lokacije}" th:value="${lokacija.getLokacijaId()}" th:text="${lokacija.getNaziv()}"> div class="col-md-12">
</option> <select th:field="${newUser.gradId}">
</select> <option th:each="lokacija: ${lokacije}" th:value="${lokacija.getLokacijaId()}" th:text="${lokacija.getNaziv()}">
</option>
</select>
<div class="valid-feedback">Dobar grad!</div>
</div>
<div class="col-md-12"> <div class="col-md-12">
<input th:field="${newUser.sifra}" class="form-control" type="password" name="password" placeholder="Sifra" required> <input th:field="${newUser.sifra}" class="form-control" type="password" name="password" placeholder="Sifra" required>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment