Skip to content

S
SkuciSe
Commit 07fc9181 by Milovan Samardzic
Options

oglasStil

parent ee6b3719
Showing with 170 additions and 31 deletions
SkuciSe/src/main/java/com/example/SkuciSe/controller/OglasController.java
...@@ -89,6 +89,7 @@ public class OglasController ...@@ -89,6 +89,7 @@ public class OglasController
model.addAttribute("loggedUser", loggedUser); model.addAttribute("loggedUser", loggedUser);
model.addAttribute("oglas", oRepo.findById( oglasId)); model.addAttribute("oglas", oRepo.findById( oglasId));
model.addAttribute("slike", sRepo.findAllById( oglasId)); model.addAttribute("slike", sRepo.findAllById( oglasId));
model.addAttribute("grad",kRepo.findCity(oRepo.findById( oglasId).getLokacijaId()));
return("oglas"); return("oglas");
} }
@GetMapping("/profile/moji-oglasi") @GetMapping("/profile/moji-oglasi")
......
SkuciSe/src/main/resources/static/css/oglasiStyle.css
...@@ -247,4 +247,35 @@ h3{ ...@@ -247,4 +247,35 @@ h3{
max-height: 300px; max-height: 300px;
border-radius: 10px; border-radius: 10px;
text-align: center; text-align: center;
}
#custCarousel .carousel-indicators {
position: static;
margin-top:20px;
}
#custCarousel .carousel-indicators > li {
width:calc(100vh - 88vh);
}
#custCarousel .carousel-indicators li img {
width: 100%;
height: calc(100vh - 92vh);
display: block;
opacity: 0.5;
}
#custCarousel .carousel-indicators li.active img {
opacity: 1;
}
#custCarousel .carousel-indicators li:hover img {
opacity: 0.75;
}
.carousel-item img{
width: calc(100vh - 20vh);
height: calc(100vh - 50vh);
}
.carousel-control-next,
.carousel-control-prev {
filter: invert(100%);
} }
\ No newline at end of file
SkuciSe/src/main/resources/static/css/style.css
...@@ -506,4 +506,9 @@ img { ...@@ -506,4 +506,9 @@ img {
hsl(0, 0%, 68.5%) 91.9%, hsl(0, 0%, 68.5%) 91.9%,
hsl(0, 0%, 68%) 100% hsl(0, 0%, 68%) 100%
); );
} }
\ No newline at end of file
.carousel-inner img {
width: 100%;
height: 100%;
}
SkuciSe/src/main/resources/static/js/main.js
...@@ -99,4 +99,11 @@ function postaviFiltere() { ...@@ -99,4 +99,11 @@ function postaviFiltere() {
namesten.checked = true; namesten.checked = true;
} }
} }
}
function promenaProdaja(radio){
if(radio.value === "2"){
document.getElementById("prodajaLabel").innerText = "Kirija";
}
else
document.getElementById("prodajaLabel").innerText = "Cena po m2";
} }
\ No newline at end of file
SkuciSe/src/main/resources/templates/novi-oglas-form.html
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
<label class="form-check-label"> <label class="form-check-label" id="prodajaLabel">
Cena po m2 Cena po m2
</label> </label>
<input th:field="${newOglas.cena}" class="form-control" type="number" <input th:field="${newOglas.cena}" class="form-control" type="number"
...@@ -147,49 +147,68 @@ ...@@ -147,49 +147,68 @@
<div class="invalid-feedback">Broj soba ne sme biti prazan!</div> <div class="invalid-feedback">Broj soba ne sme biti prazan!</div>
</div> </div>
</div> </div>
<div class="d-flex justify-content-center align-items-center flex-column mt-4"> <div class="row justify-content-between align-items-center flex-column mt-4">
<div class="d-flex flex-row justify-content-center align-items-center w-100"> <div class="d-flex flex-row justify-content-center align-items-center w-100">
<div class="col d-flex flex-row justify-content-center">
<input th:field="${newOglas.lift}" class="form-check-input" type="checkbox" <div class="col-4 d-flex flex-row justify-content-between align-items-center">
value=""> <div class="row">
<label class="ml-2"> <div class="col-3">
Lift <input th:field="${newOglas.lift}" class="form-check-input" type="checkbox"
</label> value="">
</div>
<div class="col-9">
<label class="ml-2">
Lift
</label>
</div>
</div>
</div> </div>
<div class="col col d-flex flex-row justify-content-center"> <div class="col-4 d-flex flex-row justify-content-between align-items-center">
<input th:field="${newOglas.namesten}" class="form-check-input" type="checkbox" <div class="row">
value=""> <div class="col-3">
<label class="ml-2"> <input th:field="${newOglas.namesten}" class="form-check-input" type="checkbox"
Namesten value="">
</label> </div>
<div class="col-9">
<label class="ml-2">
Namesten
</label>
</div>
</div>
</div> </div>
<div class="col col d-flex flex-row justify-content-center"> <div class="col-4 d-flex flex-row justify-content-between align-items-center">
<input th:field="${newOglas.grejanje}" class="form-check-input" type="checkbox" <div class="row">
value=""> <div class="col-3">
<label class="ml-2"> <input th:field="${newOglas.grejanje}" class="form-check-input" type="checkbox"
Grejanje value="">
</label> </div>
<div class="col-9">
<label class="ml-2">
Grejanje
</label>
</div>
</div>
</div> </div>
</div> </div>
<div class="col-md-12 d-flex justify-content-between align-items-center flex-row"> <div class="col-md-12 d-flex justify-content-between align-items-center flex-row">
<div style="margin-left: 1.4rem"> <div style="margin-left: 1.4rem">
<input checked class="form-check-input" type="radio" name="flexRadioDefault" <input checked class="form-check-input" type="radio" name="flexRadioDefault"
id="flexRadioDefault1" value="1" th:field="${newOglas.vrstaOglasaId}"> id="flexRadioDefault1" value="1" th:field="${newOglas.vrstaOglasaId}" onclick="promenaProdaja(this)">
<label class="form-check-label" for="flexRadioDefault1"> <label class="form-check-label" for="flexRadioDefault1">
Prodaja Prodaja
</label> </label>
</div> </div>
<div> <div>
<input class="form-check-input" type="radio" name="flexRadioDefault" <input class="form-check-input" type="radio" name="flexRadioDefault"
id="flexRadioDefault2" value="2" th:field="${newOglas.vrstaOglasaId}"> id="flexRadioDefault2" value="2" th:field="${newOglas.vrstaOglasaId}" onclick="promenaProdaja(this)">
<label class="form-check-label" for="flexRadioDefault2"> <label class="form-check-label" for="flexRadioDefault2">
Izdavanje Izdavanje
</label> </label>
</div> </div>
</div> </div>
<div class="col-md-12 mt-2" style="color:white;"> <div class="col-md-12 mt-2" style="color:white;">
<input class="form-control" name="images" type="file" id="formFileMultiple" accept="image/png, image/jpeg" multiple /> <input class="form-control" name="images" type="file" id="formFileMultiple" accept="image/png, image/jpeg" multiple />
<label for="formFileMultiple" class="form-label">Slike stana</label> <label for="formFileMultiple" class="form-label">Slike stana</label>
......
SkuciSe/src/main/resources/templates/oglas.html
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</head> </head>
<body th:object="${loggedUser}"> <body th:object="${loggedUser}" class="pozadinaSVG">
<nav class="navbar navbar-icon-top navbar-expand-lg p-3"> <nav class="navbar navbar-icon-top navbar-expand-lg p-3">
<a class="navbar-brand" href="#"> </a> <a class="navbar-brand" href="#"> </a>
...@@ -88,11 +88,86 @@ ...@@ -88,11 +88,86 @@
</div> </div>
</nav> </nav>
<div class="container" th:object="${oglas}"> <div class="mt-5 ml-5 mr-0 w-100">
<h1 th:text="${oglas.toString()}"></h1> <div class="row mb-5 flex-row">
</div> <div class="col-lg-6 col-md-6 col-sm-6">
<div class="container" th:object="${slike}"> <div id="custCarousel" class="carousel slide" data-ride="carousel" align="center">
<h1 th:text="${slike.size()}"></h1> <!-- slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img th:src="@{'data:image/png;charset=utf-8;base64,'+${slike[0].slikaCode}}" alt="Hills">
</div>
<div class="carousel-item" th:each="i : ${#numbers.sequence(1, slike.size()-1,1)}">
<img th:src="@{'data:image/png;charset=utf-8;base64,'+${slike[i].slikaCode}}" alt="Hills">
</div>
</div>
<!-- Left right -->
<a class="carousel-control-prev" href="#custCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#custCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- Thumbnails -->
<ol class="carousel-indicators list-inline" style="height: 100px">
<li class="list-inline-item active" th:each="slika: ${slike}">
<a th:id="'carousel-selector-' + ${slikaStat.count - 1}" class="selected" th:data-slide-to="${slikaStat.count - 1}" data-target="#custCarousel">
<img th:src="@{'data:image/png;charset=utf-8;base64,'+${slika.slikaCode}}" class="img-fluid">
</a>
</li>
</ol>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-5">
<div class="row">
<div class="col d-flex justify-content-center align-items-center">
<div class="row">
<div class="row">
<h1 th:text="${oglas.naslov}"></h1>
</div>
<div class="row">
<h4 th:text="${oglas.cena*oglas.kvadratura} + '$'"></h4>
</div>
<div class="row">
<h4 th:text="${oglas.kvadratura + ' m2 ' + oglas.brojSoba + ' soba '+ oglas.cena + '$'}"></h4>
</div>
<div class="row">
<h4 th:text="${oglas.lokacija} + ', '+${grad}"></h4>
</div>
</div>
</div>
<div class="col">
<div class="row mt-5">
<div class="col">
<div class="row"><p>Cena:</p></div>
<div class="row"><p>Cena po m2:</p></div>
<div class="row"><p>Povrsina:</p></div>
<div class="row"><p>Broj soba:</p></div>
<div class="row"><p>Grejanje:</p></div>
<div class="row"><p>Lift:</p></div>
<div class="row"><p>Namesten:</p></div>
</div>
<div class="col">
<div class="row"><p th:text="${oglas.cena * oglas.kvadratura + '$'}"></p></div>
<div class="row"><p th:text="${oglas.cena + '$'}"></p></div>
<div class="row"><p th:text="${oglas.kvadratura + ' m2'}"></p></div>
<div class="row"><p th:text="${oglas.brojSoba}"></p></div>
<div class="row"><p th:text="${oglas.grejanje} ? 'Da':'Ne'"></p></div>
<div class="row"><p th:text="${oglas.lift} ? 'Da':'Ne'"></p></div>
<div class="row"><p th:text="${oglas.namesten} ? 'Da':'Ne'"></p></div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<p class="text-wrap" th:text="${oglas.opis}"></p>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<div class="container-fluid pb-0 mb-0 justify-content-center text-light "> <div class="container-fluid pb-0 mb-0 justify-content-center text-light ">
......
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