Skip to content

S
SkuciSe
Commit 806c145d by Nikola Markovic
Options

korisnik - oglasi/ocene front

parent 6e31cddb
Showing with 155 additions and 129 deletions
SkuciSe/src/main/resources/static/js/main.js
......@@ -109,4 +109,18 @@ function promenaProdaja(radio){
}
$(document).ready(function() {
$('#rateMe1').mdbRate();
});
\ No newline at end of file
});
function prikaziOglase(){
document.getElementById("div-oglasi").style.display = "block";
document.getElementById("div-ocene").style.display = "none";
document.getElementById("dugme-oglasi").style = "text-decoration:none; border-bottom: 3px solid grey; width:100px; text-align:center;padding-bottom:5px;";
document.getElementById("dugme-ocene").style = "";
}
function prikaziOcene(){
document.getElementById("div-oglasi").style.display = "none";
document.getElementById("div-ocene").style.display = "block";
document.getElementById("dugme-ocene").style = "text-decoration:none; border-bottom: 3px solid grey; width:100px; text-align:center;padding-bottom:5px;";
document.getElementById("dugme-oglasi").style = "";
}
\ No newline at end of file
SkuciSe/src/main/resources/templates/korisnik.html
......@@ -103,6 +103,7 @@
<article class="card-group-item">
<div class="profilepic">
<img class="photo profilepic__image" id="slikaProfil"
style="width: 100px;height:100px;border-radius:50%"
th:src="@{'data:image/png;charset=utf-8;base64,'+${korisnik.getSlika()}}"
alt="slika korisnika">
</div>
......@@ -114,115 +115,125 @@
</div>
<div class="col-9" th:object="${slikeOglasa}">
<h1 th:if="${oglasi.size() == 0}" class="text-center">Nema oglasa!</h1>
<div class="row w-100 box " th:each="i : ${#numbers.sequence(0, oglasi.size()-1,3)}">
<div class="col-lg-4 p-2" data-aos="zoom-in" th:if="${oglasi[i].naslov != null}">
<div class="section border bg-white rounded p-2">
<div class="row">
<div class="col-lg-12 img-section">
<img th:src="@{'data:image/png;charset=utf-8;base64,'+${slikeOglasa[i].slikaCode}}"
class="p-0 m-0 img-responsive">
<span class="badge badge-danger add-sens p-2 rounded-0"
th:text="${oglasi[i].kvadratura + 'm2'}"></span>
</div>
<div class="col-lg-12 sectin-title d-flex alignt-items-center p-0">
<div class="col-lg-5 d-flex justify-content-start align-items-center">
<h1 class="pt-2 pb-2 text-nowrap" th:text="${oglasi[i].naslov}"></h1>
</div>
<div class="col-lg-7 d-flex justify-content-end align-items-center p-1">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star-half-alt"></i></span><br>
<div class="row w-100 box " style="/*! border: 1px solid red; */">
<div class="col d-flex justify-content-center">
<h4 id="dugme-oglasi" class="link-secondary" style="text-decoration:none; border-bottom: 3px solid grey; width:100px; text-align:center;padding-bottom:5px;" onclick="prikaziOglase()">Oglasi</h4>
</div>
<div class="col d-flex justify-content-center">
<h4 id="dugme-ocene" class="link-secondary" style="text-decoration: none" onclick="prikaziOcene()">Ocene</h4>
</div>
</div>
<div id="div-oglasi">
<div class="row w-100 box " th:each="i : ${#numbers.sequence(0, oglasi.size()-1,3)}">
<div class="col-lg-4 p-2" data-aos="zoom-in" th:if="${oglasi[i].naslov != null}">
<div class="section border bg-white rounded p-2">
<div class="row">
<div class="col-lg-12 img-section">
<img th:src="@{'data:image/png;charset=utf-8;base64,'+${slikeOglasa[i].slikaCode}}"
class="p-0 m-0 img-responsive">
<span class="badge badge-danger add-sens p-2 rounded-0"
th:text="${oglasi[i].kvadratura + 'm2'}"></span>
</div>
</div>
<div class="col-lg-12">
<div class="row d-flex justify-content-between">
<div class="col-lg-6 pb-2">
<span th:if="${oglasi[i].vrstaOglasaId == 1}" class="badge badge-info p-2"
th:text="${oglasi[i].cena*oglasi[i].kvadratura + '$'}"></span>
<span th:if="${oglasi[i].vrstaOglasaId == 2}" class="badge badge-success p-2"
th:text="${oglasi[i].cena + '$/mes'}"></span>
<div class="col-lg-12 sectin-title d-flex alignt-items-center p-0">
<div class="col-lg-5 d-flex justify-content-start align-items-center">
<h1 class="pt-2 pb-2 text-nowrap" th:text="${oglasi[i].naslov}"></h1>
</div>
<div class="col-lg-6 pb-2 d-flex justify-content-end">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i].getOglasId()})}"
class="link-secondary" style="text-decoration: none">Pogledajte oglas</a>
<div class="col-lg-7 d-flex justify-content-end align-items-center p-1">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star-half-alt"></i></span><br>
</div>
</div>
<div class="col-lg-12">
<div class="row d-flex justify-content-between">
<div class="col-lg-6 pb-2">
<span th:if="${oglasi[i].vrstaOglasaId == 1}" class="badge badge-info p-2"
th:text="${oglasi[i].cena*oglasi[i].kvadratura + '$'}"></span>
<span th:if="${oglasi[i].vrstaOglasaId == 2}" class="badge badge-success p-2"
th:text="${oglasi[i].cena + '$/mes'}"></span>
</div>
<div class="col-lg-6 pb-2 d-flex justify-content-end">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i].getOglasId()})}"
class="link-secondary" style="text-decoration: none">Pogledajte oglas</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 p-2" data-aos="zoom-in" th:if="${oglasi[i+1].naslov != null}">
<div class="section border bg-white rounded p-2">
<div class="row">
<div class="col-lg-12 img-section">
<img th:src="@{'data:image/png;charset=utf-8;base64,'+${slikeOglasa[i+1].slikaCode}}"
class="p-0 m-0 img-responsive">
<span class="badge badge-danger add-sens p-2 rounded-0"
th:text="${oglasi[i+1].kvadratura + 'm2'}"></span>
</div>
<div class="col-lg-12 sectin-title d-flex alignt-items-center p-0">
<div class="col-lg-5 d-flex justify-content-start align-items-center">
<h1 class="pt-2 pb-2 text-nowrap" th:text="${oglasi[i+1].naslov}"></h1>
<div class="col-lg-4 p-2" data-aos="zoom-in" th:if="${oglasi[i+1].naslov != null}">
<div class="section border bg-white rounded p-2">
<div class="row">
<div class="col-lg-12 img-section">
<img th:src="@{'data:image/png;charset=utf-8;base64,'+${slikeOglasa[i+1].slikaCode}}"
class="p-0 m-0 img-responsive">
<span class="badge badge-danger add-sens p-2 rounded-0"
th:text="${oglasi[i+1].kvadratura + 'm2'}"></span>
</div>
<div class="col-lg-7 d-flex justify-content-end align-items-center p-1">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star-half-alt"></i></span><br>
</div>
</div>
<div class="col-lg-12">
<div class="row d-flex justify-content-between">
<div class="col-lg-6 pb-2">
<span th:if="${oglasi[i+1].vrstaOglasaId == 1}" class="badge badge-info p-2"
th:text="${oglasi[i+1].cena*oglasi[i+1].kvadratura + '$'}"></span>
<span th:if="${oglasi[i+1].vrstaOglasaId == 2}" class="badge badge-success p-2"
th:text="${oglasi[i+1].cena + '$/mes'}"></span>
<div class="col-lg-12 sectin-title d-flex alignt-items-center p-0">
<div class="col-lg-5 d-flex justify-content-start align-items-center">
<h1 class="pt-2 pb-2 text-nowrap" th:text="${oglasi[i+1].naslov}"></h1>
</div>
<div class="col-lg-6 pb-2 d-flex justify-content-end">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i+1].getOglasId()})}"
class="link-secondary" style="text-decoration: none">Pogledajte oglas</a>
<div class="col-lg-7 d-flex justify-content-end align-items-center p-1">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star-half-alt"></i></span><br>
</div>
</div>
<div class="col-lg-12">
<div class="row d-flex justify-content-between">
<div class="col-lg-6 pb-2">
<span th:if="${oglasi[i+1].vrstaOglasaId == 1}" class="badge badge-info p-2"
th:text="${oglasi[i+1].cena*oglasi[i+1].kvadratura + '$'}"></span>
<span th:if="${oglasi[i+1].vrstaOglasaId == 2}" class="badge badge-success p-2"
th:text="${oglasi[i+1].cena + '$/mes'}"></span>
</div>
<div class="col-lg-6 pb-2 d-flex justify-content-end">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i+1].getOglasId()})}"
class="link-secondary" style="text-decoration: none">Pogledajte oglas</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 p-2" data-aos="zoom-in" th:if="${oglasi[i+2].naslov != null}">
<div class="section border bg-white rounded p-2">
<div class="row">
<div class="col-lg-12 img-section">
<img th:src="@{'data:image/png;charset=utf-8;base64,'+${slikeOglasa[i+2].slikaCode}}"
class="p-0 m-0 img-responsive">
<span class="badge badge-danger add-sens p-2 rounded-0"
th:text="${oglasi[i+2].kvadratura + 'm2'}"></span>
</div>
<div class="col-lg-12 sectin-title d-flex alignt-items-center p-0">
<div class="col-lg-5 d-flex justify-content-start align-items-center">
<h1 class="pt-2 pb-2 text-nowrap" th:text="${oglasi[i+2].naslov}"></h1>
<div class="col-lg-4 p-2" data-aos="zoom-in" th:if="${oglasi[i+2].naslov != null}">
<div class="section border bg-white rounded p-2">
<div class="row">
<div class="col-lg-12 img-section">
<img th:src="@{'data:image/png;charset=utf-8;base64,'+${slikeOglasa[i+2].slikaCode}}"
class="p-0 m-0 img-responsive">
<span class="badge badge-danger add-sens p-2 rounded-0"
th:text="${oglasi[i+2].kvadratura + 'm2'}"></span>
</div>
<div class="col-lg-7 col-md-7 d-flex justify-content-end align-items-center p-1">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star-half-alt"></i></span>
</div>
</div>
<div class="col-lg-12">
<div class="row d-flex justify-content-between">
<div class="col-lg-6 pb-2">
<span th:if="${oglasi[i+2].vrstaOglasaId == 1}" class="badge badge-info p-2"
th:text="${oglasi[i+2].cena*oglasi[i+2].kvadratura + '$'}"></span>
<span th:if="${oglasi[i+2].vrstaOglasaId == 2}" class="badge badge-success p-2"
th:text="${oglasi[i+2].cena + '$/mes'}"></span>
<div class="col-lg-12 sectin-title d-flex alignt-items-center p-0">
<div class="col-lg-5 d-flex justify-content-start align-items-center">
<h1 class="pt-2 pb-2 text-nowrap" th:text="${oglasi[i+2].naslov}"></h1>
</div>
<div class="col-lg-6 pb-2 d-flex justify-content-end">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i+2].getOglasId()})}"
class="link-secondary" style="text-decoration: none">Pogledajte oglas</a>
<div class="col-lg-7 col-md-7 d-flex justify-content-end align-items-center p-1">
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star"></i></span>
<span><i class="fas fa-star-half-alt"></i></span>
</div>
</div>
<div class="col-lg-12">
<div class="row d-flex justify-content-between">
<div class="col-lg-6 pb-2">
<span th:if="${oglasi[i+2].vrstaOglasaId == 1}" class="badge badge-info p-2"
th:text="${oglasi[i+2].cena*oglasi[i+2].kvadratura + '$'}"></span>
<span th:if="${oglasi[i+2].vrstaOglasaId == 2}" class="badge badge-success p-2"
th:text="${oglasi[i+2].cena + '$/mes'}"></span>
</div>
<div class="col-lg-6 pb-2 d-flex justify-content-end">
<a th:href="@{/lista-oglasa/{oglasid}(oglasid=${oglasi[i+2].getOglasId()})}"
class="link-secondary" style="text-decoration: none">Pogledajte oglas</a>
</div>
</div>
</div>
</div>
......@@ -230,43 +241,44 @@
</div>
</div>
</div>
</div>
</div>
</form>
<div class="col-5">
<div class="container">
<div class="row" th:object="${korisniciKomentari}">
<div class="col-md-8" th:each="komentar:${komentari}">
<div class="media g-mb-30 media-comment">
<div class="media-body u-shadow-v18 g-bg-secondary g-pa-30">
<img class="d-flex g-width-50 g-height-50 rounded-circle g-mt-3 g-mr-15"
th:src="@{'data:image/png;charset=utf-8;base64,'+${korisniciKomentari[komentarStat.index].slika}}" alt="Image Description">
<div class="g-mb-15">
<a th:href="@{/korisnik/{korisnikId}(korisnikId=${korisniciKomentari[komentarStat.index].korisnikId})}" th:text="${korisniciKomentari[komentarStat.index].ime + ' '+ korisniciKomentari[komentarStat.index].prezime}" class="text-right w-50" style="color:#495056;text-decoration: none"></a>
<br>
<span class="g-color-gray-dark-v4 g-font-size-12" th:text="${komentar.vreme + ' ' + komentar.datum}"></span>
</div>
<div id="div-ocene" style="display: none" class="row w-100">
<div class="container">
<div class="row w-100" th:object="${korisniciKomentari}">
<div class="row" th:each="komentar:${komentari}">
<div class="media g-mb-30 media-comment">
<div class="media-body u-shadow-v18 g-bg-secondary g-pa-30">
<img class="d-flex g-width-50 g-height-50 rounded-circle g-mt-3 g-mr-15"
th:src="@{'data:image/png;charset=utf-8;base64,'+${korisniciKomentari[komentarStat.index].slika}}" alt="Image Description">
<div class="g-mb-15">
<a th:href="@{/korisnik/{korisnikId}(korisnikId=${korisniciKomentari[komentarStat.index].korisnikId})}" th:text="${korisniciKomentari[komentarStat.index].ime + ' '+ korisniciKomentari[komentarStat.index].prezime}" class="text-right w-50" style="color:#495056;text-decoration: none"></a>
<br>
<span class="g-color-gray-dark-v4 g-font-size-12" th:text="${komentar.vreme + ' ' + komentar.datum}"></span>
</div>
<p th:text="${komentar.komentar}"></p>
<div class="starrating risingstar d-flex justify-content-end flex-row-reverse">
<img src th:onload="postaviZvezdice([[${komentar.ocena}]])">
<input type="radio" id="star5" name="ocenaRadio" value="5" th:checked="${komentar.ocena == 5}" disabled/><label
for="star5" title="5 star" style="pointer-events:none"></label>
<input type="radio" id="star4" name="ocenaRadio" value="4" th:checked="${komentar.ocena == 4}" disabled/><label
for="star4" title="4 star" style="pointer-events:none"></label>
<input type="radio" id="star3" name="ocenaRadio" value="3" th:checked="${komentar.ocena == 3}" disabled/><label
for="star3" title="3 star" style="pointer-events:none"></label>
<input type="radio" id="star2" name="ocenaRadio" value="2" th:checked="${komentar.ocena == 2}" disabled/><label
for="star2" title="2 star" style="pointer-events:none"></label>
<input type="radio" id="star1" name="ocenaRadio" value="1" th:checked="${komentar.ocena == 1}" disabled/><label
for="star1" title="1 star" style="pointer-events:none"></label>
<p th:text="${komentar.komentar}"></p>
<div class="starrating risingstar d-flex justify-content-end flex-row-reverse">
<img src th:onload="postaviZvezdice([[${komentar.ocena}]])">
<input type="radio" id="star5" name="ocenaRadio" value="5" th:checked="${komentar.ocena == 5}" disabled/><label
for="star5" title="5 star" style="pointer-events:none"></label>
<input type="radio" id="star4" name="ocenaRadio" value="4" th:checked="${komentar.ocena == 4}" disabled/><label
for="star4" title="4 star" style="pointer-events:none"></label>
<input type="radio" id="star3" name="ocenaRadio" value="3" th:checked="${komentar.ocena == 3}" disabled/><label
for="star3" title="3 star" style="pointer-events:none"></label>
<input type="radio" id="star2" name="ocenaRadio" value="2" th:checked="${komentar.ocena == 2}" disabled/><label
for="star2" title="2 star" style="pointer-events:none"></label>
<input type="radio" id="star1" name="ocenaRadio" value="1" th:checked="${komentar.ocena == 1}" disabled/><label
for="star1" title="1 star" style="pointer-events:none"></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="container-fluid pb-0 mb-0 justify-content-center text-light ">
<footer>
<div class="row my-5 justify-content-center py-5">
......
SkuciSe/src/main/resources/templates/oglas.html
......@@ -226,7 +226,7 @@
<img class="d-flex rounded-circle" style="width: 30%;"
th:src="@{'data:image/png;charset=utf-8;base64,'+${korisniciKomentari[komentarStat.index].slika}}" alt="Image Description">
<div class="g-mb-15">
<a th:href="@{/korisnik/{korisnikId}(korisnikId=${vlasnik.korisnikId})}" th:text="${korisniciKomentari[komentarStat.index].ime + ' '+ korisniciKomentari[komentarStat.index].prezime}" class="text-right w-50" style="color:#495056;text-decoration: none"></a>
<a th:href="@{/korisnik/{korisnikId}(korisnikId=${korisniciKomentari[komentarStat.index].korisnikId})}" th:text="${korisniciKomentari[komentarStat.index].ime + ' '+ korisniciKomentari[komentarStat.index].prezime}" class="text-right w-50" style="color:#495056;text-decoration: none"></a>
<br>
<span class="g-color-gray-dark-v4 g-font-size-12" th:text="${komentar.vreme + ' ' + komentar.datum}"></span>
</div>
......
SkuciSe/src/main/resources/templates/onama.html
......@@ -98,7 +98,7 @@
</div>
</nav>
<div class="bg-image" style="background-image: url('/images/ehl-real-estate-building.jpg');
height: 70vh;background-size: cover">
min-height: 70vh;background-size: cover">
<div class="w-100">
<div class="row h-100 justify-content-end align-items-left px-5">
<div class="col-lg-5 my-10">
......
SkuciSe/src/main/resources/templates/portfolio.html
......@@ -111,7 +111,7 @@
<div class="row text-center">
<!-- Team item-->
<div class="col-xl-3 col-sm-6 mb-5">
<div class="bg-white rounded shadow-sm py-5 px-4 h-100"><img src="/images/milovan.png" alt="" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm">
<div class="bg-white rounded shadow-sm py-5 px-3 h-100"><img src="/images/milovan.png" alt="" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm">
<h5 class="mb-0">Milovan Samardzić </h5><span class="small text-uppercase text-muted row pt-2 justify-content-center mb-3">Front-End Developer </span>
<ul class="social mb-0 list-inline pt-3">
<li class="list-inline-item"><a href="https://facebook.com" class="social-link"><i class="fa fa-facebook-f"></i></a></li>
......@@ -139,7 +139,7 @@
<!-- Team item-->
<div class="col-xl-3 col-sm-6 mb-5">
<div class="bg-white rounded shadow-sm py-5 px-4 h-100"><img src="/images/nikola.png" alt="" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm">
<div class="bg-white rounded shadow-sm py-5 px-3 h-100"><img src="/images/nikola.png" alt="" width="100" class="img-fluid rounded-circle mb-3 img-thumbnail shadow-sm">
<h5 class="mb-0">Nikola Marković</h5><span class="small text-uppercase text-muted row pt-2 justify-content-center mb-3">Front-End Developer</span>
<ul class="social mb-0 list-inline pt-3">
<li class="list-inline-item"><a href="https://facebook.com" class="social-link"><i class="fa fa-facebook-f"></i></a></li>
......
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