Fixed spacing issues, added most client corrections and remax logo to footer, along with socials
This commit is contained in:
Franklin
parent
2e4f9e201e
commit
090d285ff9
15
Readme.md
15
Readme.md
|
|
@ -6,4 +6,17 @@
|
|||
- [ ] Show page to client and start work on admin panel
|
||||
- [ ] Whatsapp button link
|
||||
- [ ] Contact widget should be whatsapp OR email depending on agent contact info
|
||||
- [ ] Footer should have call to action?
|
||||
- [ ] Footer should have call to action?
|
||||
|
||||
- [x] If no properties are found footer jumps up, shouldn't happen.
|
||||
- [x] Agentes / Quienes Somos (Similar al de remax) (recordar poner a jorge ledesma de primero y despues a los demas agentes)
|
||||
- [x] Que se pueda buscar por cant. de habitaciones
|
||||
- [x] Cambiar unidad 1 unid 2 etc... -> Tipo A Tipo B Tipo C Etc...
|
||||
- [x] Cambiar orden de el menu de unidades (poner area comun de ultimo) y quitar que se pueda varias areas comunes
|
||||
- [x] Spacing de menu de unidades
|
||||
- [x] Poner Features arriba de la desc y las imagenes de la unidad
|
||||
- [ ] Poner el logo de remax en el footer
|
||||
- [ ] Poner logos de facebook, instagram, youtube, en el footer (Sin enlaces)
|
||||
- [ ] Poner boton de solicita tu prestamo, que rediriga a remax (Se te dará el enlace), abajo de el disclaimer en la página de detalles de proyecto
|
||||
- [ ] Contenido statico folder de imagenes para la imagen de portada de inicio, que se roten aleatoriamente cada día
|
||||
- [x] Space between Unit selection menu and unit media on empty unit features
|
||||
|
|
@ -2,11 +2,11 @@
|
|||
.footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
height: 170px;
|
||||
height: 210px;
|
||||
|
||||
background-color: #02114A;
|
||||
}
|
||||
|
|
@ -19,11 +19,28 @@
|
|||
height: 100%;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.footer-remax-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
.footer-logo {
|
||||
object-fit: cover;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.footer-remax-logo {
|
||||
position: absolute;
|
||||
margin-left: 140px;
|
||||
margin-top: -15px;
|
||||
object-fit: cover;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.footer-copyright-text {
|
||||
font-size: 9px;
|
||||
font-family: Inter;
|
||||
|
|
@ -36,6 +53,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.footer-credit {
|
||||
font-size: 13px;
|
||||
|
|
@ -54,6 +72,26 @@
|
|||
cursor: pointer;
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
.footer-brand-socials {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
.footer-brand-social-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 30px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/*
|
||||
.footer-call-to-action-container {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -80,4 +80,17 @@
|
|||
@keyframes fade {
|
||||
from {opacity: .4}
|
||||
to {opacity: 1}
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop view */
|
||||
@media only screen and (min-width: 750px) {
|
||||
.media-slideshow-frame {
|
||||
height: 55vw;
|
||||
max-height: 550px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop view */
|
||||
@media only screen and (min-width: 1200px) {
|
||||
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ Divide the Details page into 3 main sections:
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
align-items: start;
|
||||
align-items: center;
|
||||
padding: 0px 15px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@ Divide the Details page into 3 main sections:
|
|||
justify-content: stretch;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
gap: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
|
@ -70,9 +71,10 @@ Divide the Details page into 3 main sections:
|
|||
.details-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
gap: 15px;
|
||||
margin-top: -10px;
|
||||
margin-bottom: 30px;
|
||||
|
|
@ -95,14 +97,15 @@ Divide the Details page into 3 main sections:
|
|||
|
||||
.details-body-features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
align-items: start;
|
||||
gap: 25px;
|
||||
flex-flow: row wrap;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
gap: 3%;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-bottom: 60px;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
.details-body-feature-item {
|
||||
|
|
@ -114,6 +117,7 @@ Divide the Details page into 3 main sections:
|
|||
|
||||
font-family: Inter;
|
||||
font-size: 24px;
|
||||
width: clamp(200px, calc(100% * (0.40) - 10px), 1000px);
|
||||
}
|
||||
|
||||
.details-body-feature-item-icon-container {
|
||||
|
|
@ -162,10 +166,9 @@ Divide the Details page into 3 main sections:
|
|||
.details-body-units-selection-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -214,20 +217,26 @@ Divide the Details page into 3 main sections:
|
|||
color: rgba(34, 34, 34, 0.873);
|
||||
}
|
||||
|
||||
.details-body-unit-features {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
align-items: start;
|
||||
gap: 25px;
|
||||
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.details-body-disclaimer {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
font-family: Inter;
|
||||
}
|
||||
|
||||
/* Desktop view */
|
||||
@media only screen and (min-width: 750px) {
|
||||
.details-body-units-media-slideshow-frame {
|
||||
height: 55vw;
|
||||
max-height: 550px;
|
||||
}
|
||||
.details-body-features {
|
||||
flex-direction: row;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
/* Desktop view */
|
||||
@media only screen and (min-width: 1200px) {
|
||||
|
||||
}
|
||||
|
|
@ -117,6 +117,9 @@
|
|||
padding-bottom: 10px;
|
||||
font-family: Space Grotesk;
|
||||
}
|
||||
.navbar-item-selected:hover {
|
||||
cursor: default;
|
||||
}
|
||||
.navbar-item:hover {
|
||||
background-color: #ffffff14;
|
||||
font-size: 13pt;
|
||||
|
|
@ -207,6 +210,7 @@
|
|||
padding-bottom: 10px;
|
||||
font-family: Source Sans Pro;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
.navbar-item:hover {
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@
|
|||
.project-search-button {
|
||||
margin-top: 20px;
|
||||
height: 50px;
|
||||
background-color: #5D6A73;
|
||||
background-color: #02114A;
|
||||
color: white;
|
||||
border: 0px;
|
||||
border-radius: 5px;
|
||||
|
|
@ -105,7 +105,6 @@
|
|||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
transition-duration: 0.3s;
|
||||
background-color: #252631;
|
||||
}
|
||||
|
||||
/* Results */
|
||||
|
|
|
|||
|
|
@ -10,10 +10,13 @@
|
|||
<link data-trunk type="text/css" href="css/search.css" rel="css" />
|
||||
<link data-trunk type="text/css" href="css/project_card.css" rel="css" />
|
||||
<link data-trunk type="text/css" href="css/details.css" rel="css" />
|
||||
<link data-trunk type="text/css" href="css/admin-login.css" rel="css" />
|
||||
|
||||
<link data-trunk type="text/css" href="css/components/loading.css" rel="css" />
|
||||
<link data-trunk type="text/css" href="css/components/media_slideshow.css" rel="css" />
|
||||
<link data-trunk type="text/css" href="css/components/floating_widget.css" rel="css" />
|
||||
<link data-trunk type="text/css" href="css/components/footer.css" rel="css" />
|
||||
|
||||
|
||||
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,21 @@ pub fn page_footer() -> Html {
|
|||
html! {
|
||||
<div class={"footer"}>
|
||||
<div class={"footer-brand-container"}>
|
||||
<img class={"footer-logo"} src={"images/logo-white.png"}/>
|
||||
<div class={"footer-remax-container"}>
|
||||
<img class={"footer-logo"} src={"images/logo-white.png"}/>
|
||||
<img class={"footer-remax-logo"} src={"https://remaxrd.com/icons/ballow.svg"}/>
|
||||
</div>
|
||||
<div class={"footer-brand-socials"}>
|
||||
<div class={"footer-brand-social-container"}>
|
||||
<i class="fa-brands fa-instagram"></i>
|
||||
</div>
|
||||
<div class={"footer-brand-social-container"}>
|
||||
<i class="fa-brands fa-youtube"></i>
|
||||
</div>
|
||||
<div class={"footer-brand-social-container"}>
|
||||
<i class="fa-brands fa-facebook"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class={"footer-copyright-text"}>{"© 2023 Proyectos en Construcción - Todos los derechos Reservados"}</div>
|
||||
<div class={"footer-credit-container"}>
|
||||
<div class={"footer-credit"}>{"Powered by"}</div>
|
||||
|
|
@ -13,6 +27,10 @@ pub fn page_footer() -> Html {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
<div class={"footer-call-to-action-container"}>
|
||||
<input placeholder={"AAA"} class={"footer-call-to-action-input"}/>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ use stdweb::web::{IEventTarget, event::ResizeEvent};
|
|||
use yew::prelude::*;
|
||||
use yew_router::prelude::{use_navigator, use_route};
|
||||
|
||||
use crate::{routes::main_router::{Route}, constants::{NAVBAR_COL_LANDING, NAVBAR_COL_CONTACTO, NAVBAR_COL_PROYECTOS}};
|
||||
use crate::{routes::main_router::{Route}, constants::{NAVBAR_COL_LANDING, NAVBAR_COL_CONTACTO, NAVBAR_COL_PROYECTOS, NAVBAR_COL_AGENTES}};
|
||||
//use yew_router::prelude::use_navigator;
|
||||
|
||||
|
||||
|
|
@ -16,6 +16,7 @@ pub fn navigation_bar() -> Html {
|
|||
let cloned_navigator_3 = navigator.clone();
|
||||
let cloned_navigator_4 = navigator.clone();
|
||||
let cloned_navigator_5 = navigator.clone();
|
||||
let cloned_navigator_6 = navigator.clone();
|
||||
|
||||
let navbar_toggle = use_state(|| true);
|
||||
let on_click_hamburger = {
|
||||
|
|
@ -54,10 +55,17 @@ pub fn navigation_bar() -> Html {
|
|||
</div>
|
||||
|
||||
<div onclick={move |_| cloned_navigator_2.push(&Route::Search)} class={
|
||||
if current_route.is_some() && matches!(current_route.unwrap(), Route::Search) {"navbar-item-selected"} else {"navbar-item"}
|
||||
if current_route.is_some() && matches!(current_route.clone().unwrap(), Route::Search) {"navbar-item-selected"} else {"navbar-item"}
|
||||
}>
|
||||
{NAVBAR_COL_PROYECTOS}
|
||||
</div>
|
||||
|
||||
<div onclick={move |_| cloned_navigator_6.push(&Route::Agentes)} class={
|
||||
if current_route.is_some() && matches!(current_route.unwrap(), Route::Agentes) {"navbar-item-selected"} else {"navbar-item"}
|
||||
}>
|
||||
{NAVBAR_COL_AGENTES}
|
||||
</div>
|
||||
|
||||
{
|
||||
if (*window_device_handle) == WindowDevice::Mobile {
|
||||
html! {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ pub fn project_card(props: &ProjectCardProps) -> Html {
|
|||
|
||||
let project_title = format!("{} en {}, {}", props.project.project_type, props.project.district, props.project.city);
|
||||
|
||||
let project_price = format!("Desde ${} USD", match props.project.starts_from {
|
||||
let project_price = format!("Desde US${}", match props.project.starts_from {
|
||||
Some(price) => {
|
||||
let price_separated = price.separate_with_commas();
|
||||
if price_separated.contains(".") {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
pub const NAVBAR_COL_LANDING: &str = "Inicio";
|
||||
pub const NAVBAR_COL_PROYECTOS: &str = "Proyectos";
|
||||
pub const NAVBAR_COL_CONTACTO: &str = "Contacto";
|
||||
pub const NAVBAR_COL_AGENTES: &str = "Agentes";
|
||||
|
||||
pub const PRIMARY_COLOR: &str = "#41BDD9";
|
||||
pub const SECONDARY_COLOR: &str = "#5D6A73";
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
use yew::prelude::*;
|
||||
use yew_router::prelude::use_navigator;
|
||||
|
||||
#[function_component(AdminLoginPage)]
|
||||
pub fn login_page() -> Html {
|
||||
let _navigator = use_navigator().unwrap();
|
||||
html! {
|
||||
<div class={"admin-login-container"}>
|
||||
<div class={"admin-login-title"}>
|
||||
{"Portal de Administración"}
|
||||
</div>
|
||||
<div class={"admin-login-form-container"}>
|
||||
<div class={"admin-login-form-textfield-"}>
|
||||
{"Google"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
pub mod login;
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
use yew::prelude::*;
|
||||
|
||||
use crate::components::{nav_bar::NavigationBar, footer::PageFooter};
|
||||
|
||||
|
||||
#[function_component(AgentsPage)]
|
||||
pub fn agents_page() -> Html {
|
||||
html!{
|
||||
<>
|
||||
<NavigationBar/>
|
||||
<div class={"page-container"} style={"margin-bottom: 72vh"}> //TODO: remove this margin when landing page done
|
||||
{"Agents Page"}
|
||||
</div>
|
||||
<PageFooter/>
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
use jl_types::{dto::listing::Listing, domain::unit_type::UnitType};
|
||||
use jl_types::{dto::listing::Listing, domain::{unit_type::UnitType, unit::Unit}};
|
||||
use log::{error, info};
|
||||
use thousands::Separable;
|
||||
use uuid::Uuid;
|
||||
|
|
@ -6,6 +6,8 @@ use yew::prelude::*;
|
|||
|
||||
use crate::{components::{nav_bar::NavigationBar, media_slideshow::MediaSlideshow, floating_widget::FloatingWidget, feature::FeatureItem, footer::PageFooter}, api::backend::get_project_listing};
|
||||
|
||||
const ALPHABET_LETTERS: &str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
|
||||
#[function_component(DetailsPage)]
|
||||
pub fn details_page(props: &DetailsPageProps) -> Html {
|
||||
let finished_loading = use_state(|| false);
|
||||
|
|
@ -30,6 +32,12 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
|||
});
|
||||
|
||||
let listing = (*listing_handle).clone();
|
||||
let mut forsale_units: Vec<&Unit> = listing.units.iter().filter(|unit| unit.unit_type == UnitType::ForSale).collect();
|
||||
let mut not_forsale_units: Vec<&Unit> = listing.units.iter().filter(|unit| unit.unit_type == UnitType::NotForSale).collect();
|
||||
|
||||
let mut organized_units = Vec::new();
|
||||
organized_units.append(&mut forsale_units);
|
||||
organized_units.append(&mut not_forsale_units);
|
||||
|
||||
let project_title = format!("{} en {}, {}", &listing.project.project_type, &listing.location.district, &listing.location.city);
|
||||
//let project_description = &listing.project.description;
|
||||
|
|
@ -43,7 +51,7 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
|||
|
||||
let cloned_selected_unit_handle = selected_unit_handle.clone();
|
||||
|
||||
let selected_unit_opt = listing.units.get(*cloned_selected_unit_handle);
|
||||
let selected_unit_opt = organized_units.get(*cloned_selected_unit_handle);
|
||||
html!{
|
||||
<>
|
||||
<NavigationBar/>
|
||||
|
|
@ -68,10 +76,10 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class={"details-body-divider"}></div>
|
||||
</div>
|
||||
|
||||
<div class={"details-body-divider"}></div>
|
||||
|
||||
|
||||
<div class={"details-body"}>
|
||||
<div class={"details-body-description"}>
|
||||
|
|
@ -109,43 +117,39 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
|||
html! {
|
||||
<div class={"details-body-units"}>
|
||||
<div class={"details-body-units-title"}>{"Unidades"}</div>
|
||||
<div class={"details-body-units-selection-container"}>
|
||||
{ // Maps all the units to generate the unit selection menu
|
||||
listing.units.iter().enumerate().map(|(index, unit)| {
|
||||
let cloned_selected_unit_handle = cloned_selected_unit_handle.clone();
|
||||
let select_unit_onclick_cb = {
|
||||
let cloned_selected_unit_handle = cloned_selected_unit_handle.clone();
|
||||
Callback::from(move |_| cloned_selected_unit_handle.set(index))
|
||||
};
|
||||
html! {
|
||||
<div class={
|
||||
if *cloned_selected_unit_handle == index
|
||||
{"details-body-units-selection-item-selected"}
|
||||
else
|
||||
{"details-body-units-selection-item-unselected"}
|
||||
} onclick={select_unit_onclick_cb}>
|
||||
{
|
||||
match unit.unit_type {
|
||||
UnitType::ForSale => html! {
|
||||
<>
|
||||
<i class="fa-solid fa-house-circle-check"></i>
|
||||
<div>{format!("Unidad {}", index + 1)}</div>
|
||||
</>
|
||||
},
|
||||
UnitType::NotForSale => html! {
|
||||
<>
|
||||
<i class="fa-solid fa-people-group"></i>
|
||||
<div>{"Área común"}</div>
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
||||
{create_unit_selection_menu(&organized_units, selected_unit_handle)}
|
||||
|
||||
{
|
||||
if unit.unit_type == UnitType::ForSale {
|
||||
let price_separated = unit.price_usd.separate_with_commas();
|
||||
html! {
|
||||
<div class={"details-body-features"}>
|
||||
{
|
||||
html! {
|
||||
<>
|
||||
<FeatureItem title={"Precio"} icon={"fa-solid fa-money-bill-trend-up"} subtitle={
|
||||
if price_separated.contains(".") { //TODO: Desde en el precio
|
||||
format!("Desde US${}", price_separated)
|
||||
} else {
|
||||
format!("Desde US${}", format!("{price_separated}.00"))
|
||||
}
|
||||
}/>
|
||||
<FeatureItem title={"Habitaciones"} icon={"fa-solid fa-bed"} subtitle={format!("{}", unit.rooms)}/>
|
||||
<FeatureItem title={"Baños"} icon={"fa-solid fa-bath"} subtitle={format!("{}", unit.bathrooms)}/>
|
||||
<FeatureItem title={"Metraje"} icon={"fa-solid fa-ruler-combined"} subtitle={format!("{}m²", unit.area)}/>
|
||||
</>
|
||||
}
|
||||
|
||||
</div>
|
||||
}
|
||||
}).collect::<Html>()
|
||||
}
|
||||
</div>
|
||||
}
|
||||
} else {
|
||||
html! {}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
|
||||
<div class={"details-body-units-media-slideshow-frame"}>
|
||||
{
|
||||
if unit.media.media_list.len() >= 1 {
|
||||
|
|
@ -172,32 +176,7 @@ pub fn details_page(props: &DetailsPageProps) -> Html {
|
|||
|
||||
<div class={"details-body-divider"}></div>
|
||||
|
||||
<div class={"details-body-unit-features"}>
|
||||
|
||||
{ // Features only to be shown on a ForSale unit
|
||||
if unit.unit_type == UnitType::ForSale {
|
||||
let price_separated = unit.price_usd.separate_with_commas();
|
||||
html! {
|
||||
<>
|
||||
<FeatureItem title={"Inversión"} icon={"fa-solid fa-money-bill-trend-up"} subtitle={
|
||||
if price_separated.contains(".") {
|
||||
format!("${} USD", price_separated)
|
||||
} else {
|
||||
format!("${} USD", format!("{price_separated}.00"))
|
||||
}
|
||||
}/>
|
||||
<FeatureItem title={"Habitaciones"} icon={"fa-solid fa-bed"} subtitle={format!("{}", unit.rooms)}/>
|
||||
<FeatureItem title={"Baños"} icon={"fa-solid fa-bath"} subtitle={format!("{}", unit.bathrooms)}/>
|
||||
</>
|
||||
}
|
||||
} else {html! {}}
|
||||
}
|
||||
|
||||
// Features that always are shown
|
||||
<FeatureItem title={"Metraje"} icon={"fa-solid fa-ruler-combined"} subtitle={format!("{}m²", unit.area)}/>
|
||||
</div>
|
||||
|
||||
<div class={"details-body-divider"}></div>
|
||||
|
||||
|
||||
<div class={"details-body-disclaimer"}>
|
||||
{"*Unidades sujetas a disponibilidad"}
|
||||
|
|
@ -244,3 +223,47 @@ pub struct DetailsPageProps {
|
|||
}
|
||||
|
||||
|
||||
pub fn create_unit_selection_menu(units: &Vec<&Unit>, selected_unit_handle: UseStateHandle<usize>) -> Html {
|
||||
|
||||
html! {
|
||||
<div class={"details-body-units-selection-container"}>
|
||||
{ // Maps all the units to generate the unit selection menu
|
||||
units.iter().enumerate().map(|(index, unit)| {
|
||||
let cloned_selected_unit_handle = selected_unit_handle.clone();
|
||||
let select_unit_onclick_cb = {
|
||||
let cloned_selected_unit_handle = cloned_selected_unit_handle.clone();
|
||||
Callback::from(move |_| cloned_selected_unit_handle.set(index))
|
||||
};
|
||||
html! {
|
||||
<div class={
|
||||
if *cloned_selected_unit_handle == index
|
||||
{"details-body-units-selection-item-selected"}
|
||||
else
|
||||
{"details-body-units-selection-item-unselected"}
|
||||
} onclick={select_unit_onclick_cb}>
|
||||
{
|
||||
match unit.unit_type {
|
||||
UnitType::ForSale => html! {
|
||||
<>
|
||||
<i class="fa-solid fa-house-circle-check"></i>
|
||||
<div>{format!("Unidad {}", ALPHABET_LETTERS.chars().nth(index).unwrap_or_else(|| index.to_string().chars().nth(1).unwrap()))}</div>
|
||||
</>
|
||||
},
|
||||
UnitType::NotForSale => html! {
|
||||
<>
|
||||
<i class="fa-solid fa-people-group"></i>
|
||||
<div>{"Área común"}</div>
|
||||
</>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</div>
|
||||
}
|
||||
}).collect::<Html>()
|
||||
|
||||
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
@ -2,4 +2,6 @@ pub mod landing;
|
|||
pub mod search;
|
||||
pub mod details;
|
||||
pub mod not_found;
|
||||
pub mod contact;
|
||||
pub mod contact;
|
||||
pub mod admin;
|
||||
pub mod agents;
|
||||
|
|
@ -54,6 +54,7 @@ pub fn search_page() -> Html {
|
|||
let project_city_filter: UseStateHandle<OptionWrapper<String>> = use_state(|| OptionWrapper::new(None));
|
||||
// Dropdown
|
||||
let project_district_filter: UseStateHandle<OptionWrapper<String>> = use_state(|| OptionWrapper::new(None));
|
||||
let unit_rooms_filter: UseStateHandle<OptionWrapper<usize>> = use_state(|| OptionWrapper::new(None));
|
||||
//TODO: Think about price filtering
|
||||
/*// TextField
|
||||
let _project_min_price_filter: UseStateHandle<OptionWrapper<f64>> = use_state(|| OptionWrapper::new(None));
|
||||
|
|
@ -111,7 +112,6 @@ pub fn search_page() -> Html {
|
|||
|
||||
Callback::from(move |project_city: OptionWrapper<String>| {
|
||||
let districts_handle = districts_handle.clone();
|
||||
info!("{}", project_city.to_string());
|
||||
cloned_project_city_filter.set(project_city.clone());
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
match get_all_districts_in_city(&project_city.to_string()).await {
|
||||
|
|
@ -134,13 +134,24 @@ pub fn search_page() -> Html {
|
|||
selection_changed: {
|
||||
let cloned_project_district_filter = project_district_filter.clone();
|
||||
Callback::from(move |project_district: OptionWrapper<String>| {
|
||||
info!("{}", project_district.to_string());
|
||||
cloned_project_district_filter.set(project_district)
|
||||
}
|
||||
)},
|
||||
class_css: Some("project-search-filter-item".into())
|
||||
});
|
||||
|
||||
let unit_room_amount_drop_down = comp_with::<DropDown<OptionWrapper<usize>>>(DropDownProps {
|
||||
initial: OptionWrapper::new(None),
|
||||
options: vec![OptionWrapper::new(None), OptionWrapper::new(Some(1)), OptionWrapper::new(Some(2)), OptionWrapper::new(Some(3)), OptionWrapper::new(Some(4)), OptionWrapper::new(Some(5)), OptionWrapper::new(Some(6)), OptionWrapper::new(Some(7)), OptionWrapper::new(Some(8)), OptionWrapper::new(Some(9)), OptionWrapper::new(Some(10))],
|
||||
selection_changed: {
|
||||
let unit_rooms_filter = unit_rooms_filter.clone();
|
||||
Callback::from(move |unit_room_amount: OptionWrapper<usize>| {
|
||||
unit_rooms_filter.set(unit_room_amount)
|
||||
})
|
||||
},
|
||||
class_css: Some("project-search-filter-item".into())
|
||||
});
|
||||
|
||||
let search_onclick = {
|
||||
let search_results_handle = search_results_handle.clone();
|
||||
let page_counter = page_counter.clone();
|
||||
|
|
@ -262,6 +273,13 @@ pub fn search_page() -> Html {
|
|||
{project_district_drop_down}
|
||||
</div>
|
||||
|
||||
<div class={"project-search-filter-container"}>
|
||||
<div class={"project-search-filter-label"}>
|
||||
{"Habitaciones"}
|
||||
</div>
|
||||
{unit_room_amount_drop_down}
|
||||
</div>
|
||||
|
||||
<button class={"project-search-button"} onclick={search_onclick}>
|
||||
{"Buscar"}
|
||||
</button>
|
||||
|
|
@ -273,6 +291,15 @@ pub fn search_page() -> Html {
|
|||
if *finished_loading {
|
||||
html!{
|
||||
<div class={"project-search-results-container"}> // Search Results Content
|
||||
{if (*search_results_handle).len() == 0 {
|
||||
html!{
|
||||
<div style={"margin-bottom: 40vh"}>
|
||||
{"No se han encontrado proyectos con los filtros de busqueda especificados."}
|
||||
</div>
|
||||
}
|
||||
} else {
|
||||
html! {}
|
||||
}}
|
||||
{(*search_results_handle).clone().into_iter().map(|project| html!{<ProjectCard {project}/>}).collect::<Html>()}
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ use yew::prelude::*;
|
|||
|
||||
use uuid::Uuid;
|
||||
|
||||
use crate::{pages::{landing::LandingPage, search::{SearchPage}, details::DetailsPage, not_found::NotFoundPage, contact::ContactPage}};
|
||||
use crate::{pages::{landing::LandingPage, search::{SearchPage}, details::DetailsPage, not_found::NotFoundPage, contact::ContactPage, admin::login::AdminLoginPage, agents::AgentsPage}};
|
||||
|
||||
#[derive(Clone, Routable, PartialEq)]
|
||||
pub enum Route {
|
||||
|
|
@ -15,6 +15,11 @@ pub enum Route {
|
|||
Details { project_id: Uuid },
|
||||
#[at("/contact")]
|
||||
Contact,
|
||||
#[at("/agentes")]
|
||||
Agentes,
|
||||
|
||||
#[at("/admin")]
|
||||
Admin,
|
||||
|
||||
#[not_found]
|
||||
#[at("/404")]
|
||||
|
|
@ -27,6 +32,8 @@ pub fn switch(routes: Route) -> Html {
|
|||
Route::Search => html! { <SearchPage/> },
|
||||
Route::Details { project_id } => html! { <DetailsPage project_id={project_id}/> },
|
||||
Route::NotFound => html! { <NotFoundPage/> },
|
||||
Route::Contact => html! { <ContactPage/> }
|
||||
Route::Contact => html! { <ContactPage/> },
|
||||
Route::Admin => html! { <AdminLoginPage/> },
|
||||
Route::Agentes => html! { <AgentsPage/> },
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue