Skip to content

S
SkuciSe
Commit 8bb28e9c by Milovan Samardzic
Options

IzmenaProfilaUpdate

parent 8e8325f5
Showing with 202 additions and 74 deletions
SkuciSe/src/main/java/com/example/SkuciSe/controller/AppController.java
......@@ -66,6 +66,7 @@ public class AppController
model.addAttribute("editUser", loggedUser.getKorisnik());
model.addAttribute("profileRole", kRepo.findRoleById( loggedUser.getKorisnik().getTipId()));
model.addAttribute("grad", lRepo.findById( loggedUser.getKorisnik().getGradId()));
model.addAttribute("lokacije", lRepo.findAll());
return("profile");
}
......
SkuciSe/src/main/resources/static/css/style.css
......@@ -279,6 +279,7 @@ h3{
.container {
max-width: 1000px;
padding: 0;
height: 600px;
}
p {
......@@ -359,3 +360,22 @@ img {
width: 50%;
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
SkuciSe/src/main/resources/static/js/main.js
......@@ -27,3 +27,27 @@ function proveraLogin(){
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
SkuciSe/src/main/resources/templates/profile.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<title>SkuciSe</title>
<link href='https://fonts.googleapis.com/css?family=Jost' rel='stylesheet'>
<!-- 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 -->
<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)-->
<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="/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"/>
</head>
<body th:object="${loggedUser}">
......@@ -35,24 +35,33 @@
<!--<img src="../static/images/logo.png" alt="Logo">-->
<div id="navbar-login">
<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="@{/register}"><i class="fa-solid fa-circle-user"></i><span style="padding:5px;">Registruj se</span></a></li>
<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="@{/register}"><i class="fa-solid fa-circle-user"></i><span
style="padding:5px;">Registruj se</span></a></li>
<li th:if="${loggedUser != null}">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle round" type="button" id="dropdownMenuButton" 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 class="btn btn-secondary dropdown-toggle round" type="button" id="dropdownMenuButton"
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>
<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="@{/mojioglasi/{korisnikid}(korisnikid=${loggedUser.getKorisnik().getKorisnikId()})}">Moji Oglasi</a>
<a class="dropdown-item" th:href="@{/mojizahtevi/{korisnikid}(korisnikid=${loggedUser.getKorisnik().getKorisnikId()})}">Moji Zahtevi</a>
<a class="dropdown-item" th:href="@{/profile}">Moj Profil</a>
<a class="dropdown-item" th:href="@{/mojioglasi}">Moji Oglasi</a>
<a class="dropdown-item" th:href="@{/mojizahtevi}">Moji Zahtevi</a>
<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>
</div>
</div>
</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>
</div>
</header>
......@@ -64,86 +73,114 @@
<div class="row">
<div class="col-12 bg-white p-0 px-3 py-3 mb-3">
<div class="d-flex flex-column align-items-center">
<a href="#" onclick="document.getElementById('inputSlika').click();" style="color:white">
<div class="profilepic">
<img class="photo profilepic__image" th:src="@{'data:image/png;charset=utf-8;base64,'+${loggedUser.getKorisnik().getSlika()}}" alt="slika korisnika">
<img class="photo profilepic__image"
th:src="@{'data:image/png;charset=utf-8;base64,'+${loggedUser.getKorisnik().getSlika()}}"
alt="slika korisnika">
<div class="profilepic__content">
<span class="profilepic__icon"><i class="fas fa-camera"></i></span>
<span class="profilepic__text"><a href="#" onclick="document.getElementById('inputSlika').click();" style="color:white">Izmeni sliku</a></span>
<span class="profilepic__text">Izmeni sliku</span>
</div>
</div>
</a>
<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>
<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 class="d-flex align-items-end justify-content-end">
<button type="button" class="btn btn-secondary">Secondary</button>
</div>
</div>
</div>
<form id="formaSlika" method="POST" th:object="${loggedUser}" th:action="@{/picture-update}" 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>
<div class="col-md-7 ps-md-4">
<div class="form-body" style="height: 400px;margin-left:53px;display: none;" id="fadeDiv">
<div class="row">
<div class="col-12 bg-white px-3 mb-3 pb-3">
<div class="d-flex align-items-center justify-content-between border-bottom">
<p class="py-2">Ime i Prezime</p>
<p class="py-2 text-muted" th:text="${loggedUser.getKorisnik().getIme() + ' '+ loggedUser.getKorisnik().getPrezime()}"></p>
</div>
<div class="d-flex align-items-center justify-content-between border-bottom">
<p class="py-2">Email</p>
<p class="py-2 text-muted" th:text="${loggedUser.getKorisnik().getEmail()}"></p>
</div>
<div class="d-flex align-items-center justify-content-between border-bottom">
<p class="py-2">Broj telefona</p>
<p class="py-2 text-muted" th:text="${loggedUser.getKorisnik().getTelefon()}"></p>
</div>
<div class="d-flex align-items-center justify-content-between">
<p class="py-2">Grad</p>
<p class="py-2 text-muted" th:object="${grad}" th:text="${grad.naziv}"></p>
</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="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="valid-feedback">Dobro ime!</div>
<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="valid-feedback">Dobro prezime!</div>
<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="valid-feedback">Dobar broj!</div>
<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="valid-feedback">Dobar email!</div>
<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">
<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>
<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>
<button id="submit" type="submit" class="btn btn-primary">Izmeni podatke
</button>
</div>
</form>
</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">
<input type="file" name="image" accept="image/png, image/jpeg" id="inputSlika" style="display: none"
onchange="document.getElementById('formaSlika').submit();return false;"/>
</form>
<div class="col-md-7 ps-md-4">
<div class="row">
<div class="col-12 bg-white px-3 mb-3 pb-3">
<div class="d-flex align-items-center justify-content-between border-bottom">
<p class="py-2">Ime i Prezime</p>
<p class="py-2 text-muted"
th:text="${loggedUser.getKorisnik().getIme() + ' '+ loggedUser.getKorisnik().getPrezime()}"></p>
</div>
<div class="d-flex align-items-center justify-content-between border-bottom">
<p class="py-2">Email</p>
<p class="py-2 text-muted" th:text="${loggedUser.getKorisnik().getEmail()}"></p>
</div>
<div class="d-flex align-items-center justify-content-between border-bottom">
<p class="py-2">Broj telefona</p>
<p class="py-2 text-muted" th:text="${loggedUser.getKorisnik().getTelefon()}"></p>
</div>
<div class="d-flex align-items-center justify-content-between">
<p class="py-2">Grad</p>
<p class="py-2 text-muted" th:object="${grad}" th:text="${grad.naziv}"></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid pb-0 mb-0 justify-content-center text-light ">
......@@ -151,23 +188,63 @@
<div class="row my-5 justify-content-center py-5">
<div class="col-11">
<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-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 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-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 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-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 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-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>
</footer>
</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://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://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
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://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.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>
</html>
SkuciSe/src/main/resources/templates/register.html
......@@ -71,10 +71,14 @@
<div class="invalid-feedback">Email ne sme biti prazan!</div>
</div>
div class="col-md-12">
<select th:field="${newUser.gradId}">
<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">
<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