fede/AlquilaFacil
Public Access
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

añadido tema oscuro, y programada la funcion de busqueda

Browse Source
This commit is contained in:
fedpo
2024-12-21 19:16:47 -03:00
parent 990f866a71
commit 3f08dcfc81
21 changed files with 345 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Front/src/Componentes/ListaAcciones.svelte
View File

@@ -2,6 +2,7 @@
import { onMount } from "svelte";
import { writable } from "svelte/store";
import { urlG } from "../stores/urlStore";
import { links, navigate } from "svelte-routing";
type Permiso = {
id: number;
@@ -38,11 +39,14 @@
console.error(e);
}
}
function redirijir(path: string){
navigate(path);
}
</script>
<div class="list-group" style="border: 1px solid black">
<div class="list-group border border-success" use:links>
{#each $permisos as item}
<a href="/accion/{item.id}" class="list-group-item list-group-item-action">
<a class="list-group-item list-group-item-action" href="/accion/{item.id}">
{item.descripcion}
</a>
{/each}

3
Front/src/Componentes/login.svelte → Front/src/Componentes/LoginPanel.svelte
View File

@@ -29,7 +29,6 @@
}
const ret = await response.json();
localStorage.clear();
localStorage.setItem('email', ret.email);
sessionStorage.setItem('token', ret.token);
//setTimeout(() => console.log("50ms") ,50);
@@ -41,7 +40,7 @@
</script>
<Card class="position-sticky top-50 start-50 translate-middle-x" style="width: 20rem; height: auto;" theme="auto" color="dark" outline>
<Card class="position-sticky top-50 start-50 translate-middle-x border border-success" style="width: 20rem; height: auto;" theme="auto" outline>
<CardHeader>
<CardTitle>Iniciar Sesión</CardTitle>
</CardHeader>

34
Front/src/Componentes/NavBarAutocompletable.svelte
View File

@@ -2,10 +2,12 @@
import { Navbar, NavbarBrand, NavbarToggler, Nav, Collapse } from "@sveltestrap/sveltestrap";
import { onMount } from "svelte";
import { writable } from 'svelte/store';
import { link, links } from "svelte-routing";
import './css/popup.css';
import type { Grupo } from "../types";
import { urlG } from "../stores/urlStore";
import { navigate } from "svelte-routing";
let isOpen: boolean = $state(false);
@@ -39,23 +41,39 @@
})
function redirijir(path: string){
location.replace(path);
navigate(path);
}
let theme = $state(localStorage.getItem("theme") ?? "light");
const toggleTheme = () => {
theme = theme === "light" ? "dark" : "light";
document.body.setAttribute("data-bs-theme", theme);
localStorage.setItem("theme", theme);
};
</script>
<Navbar container="xxl" expand="md" color="dark-subtle">
<NavbarBrand href="/">
AlquilaFacil
</NavbarBrand>
<div class="badge">
<a href="/Menu">
<img src="/home.svg" alt="Volver al Menú"/>
</a>
<div>
<div class="badge" style="background-color: turquoise;" use:links>
<a href="/Menu">
<img src="/home.svg" alt="Volver al Menú"/>
</a>
</div>
<button class="badge btn btn-outline-primary" onclick={toggleTheme} style="background-color: cadetblue;">
{#if theme === "light" }
<img src="/toggle-left.svg" alt=""/>
{:else}
<img src="/toggle-right.svg" alt=""/>
{/if}
</button>
</div>
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
<Collapse isOpen={isOpen} navbar expand="md">
<Nav class="ms-auto" navbar>
<Nav class="ms-auto" navbar >
{#each $permisos as item }
<div class="dropdown">
<div class="btn-group" style="margin-left: 3px; margin-top: 3px">
@@ -63,9 +81,9 @@
<button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu dropdown-menu-end" >
<ul class="dropdown-menu dropdown-menu-end" use:links>
{#each item.idpermisos as perm}
<a class="dropdown-item link-underline-opacity-0 link-underline" href="/accion/{perm.id}">{perm.descripcion}</a>
<a class="dropdown-item link-underline-opacity-0 link-underline" href="/accion/{perm.id}" >{perm.descripcion}</a>
<li><hr class="dropdown-divider"></li>
{/each}
</ul>

28
Front/src/Componentes/PanelBusqueda.svelte
View File

@@ -1,14 +1,27 @@
<script lang="ts">
import "./css/dotted-line.css";
import { navigate } from 'svelte-routing';
<script>
let canthabitaciones = 0;
let canthabitaciones = $state(0);
let servicios = ["Gas", "Internet", "Telefono", "Luz"];
let serviciosSel = [];
let tipo = 0;
let serviciosSel = $state([]);
let tipo = $state(0);
async function formsubmit (e){
e.preventDefault();
const url = window.location.pathname;
const goto = url+"?cantidadHabitaciones="+canthabitaciones+"&tipoPropiedad="+tipo+"&servicios="+serviciosSel.join(",");
window.location.replace(goto);
}
</script>
<form class="card p-3" style="border: 1px solid black">
<form class="card p-3 border border-succes">
<p>Busqueda Filtrada</p>
<div>Busqueda Filtrada
<div class="dotted-line">
</div>
<div class="form-floating mb-3">
<input
@@ -33,6 +46,7 @@
bind:group={serviciosSel}
value={servicio}
id={`servicio-${servicio}`}
/>
<label class="form-check-label" for={`servicio-${servicio}`}>
{servicio}
@@ -53,7 +67,7 @@
<label for="idtipopropiedad">Tipo de propiedad</label>
</div>
<button type="submit" class="btn btn-primary w-100 d-flex align-items-center justify-content-center">
<button type="submit" class="btn btn-primary w-100 d-flex align-items-center justify-content-center" onclick={formsubmit}>
Buscar
<img src="/zoom.svg" alt="" class="ms-2" style="height: 1.2em;" />
</button>

25
Front/src/Componentes/PublicacionPropiedad.svelte
View File

@@ -1,13 +1,26 @@
<script>
let {ubicacion, servicios} = $props();
<script lang="ts">
import type { PropiedadDto } from "../types";
let { prop }: { prop: PropiedadDto } = $props();
</script>
<div class="card text-center" style="border:1px solid black">
<div class="card text-center border shadow-sm">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">{prop.tipo}</h5>
</div>
<div class="card-body">
<div class="card-img-top">
<i class="bi bi-flower3" style="font-size: 3rem;"></i>
<div class="card-img-top mb-3">
<i class="bi bi-building" style="font-size: 3rem;"></i>
</div>
<p class="card-text mt-3">{ubicacion} - {servicios}</p>
<h6 class="card-title">{prop.ubicacion}</h6>
<p class="card-text">
<strong>Habitaciones:</strong> {prop.canthabitaciones}<br>
<strong>Piso:</strong> {prop.piso || "N/A"}<br>
<strong>Letra:</strong> {prop.letra || "N/A"}<br>
<strong>Servicios:</strong> {prop.servicios || "Sin servicios especificados"}
</p>
<button class="btn btn-primary">Consultar</button>
</div>
<div class="card-footer text-muted">
ID Propiedad: {prop.id}
</div>
</div>

2
Front/src/Componentes/RowPropiedad.svelte
View File

@@ -30,7 +30,7 @@
const json = await responce.json();
modalpayload = json.message;
modal = true;
location.reload();
window.location.reload();
}catch (e){
console.error(e);
}

2
Front/src/Componentes/RutaProtegida.svelte
View File

@@ -49,6 +49,6 @@
{#if $isAuthenticated}
{@render componente()}
{:else}
{navigate('/')}
{window.location.replace('/')}
{/if}
{/if}

5
Front/src/Componentes/css/dotted-line.css Normal file
View File

@@ -0,0 +1,5 @@
.dotted-line {
border: none;
border-top: 2px dashed #757575; /* Línea punteada de 2px de grosor y color negro */
margin: 20px 0; /* Márgenes opcionales */
}

73
Front/src/paginas/BusquedaPropiedades.svelte
View File

@@ -6,8 +6,11 @@
import { onMount } from "svelte";
import { fade } from "svelte/transition";
import {urlG} from "../stores/urlStore"
import type { PropiedadDto } from "../types";
let showButton = $state(false);
let propiedades: PropiedadDto[] = $state([]);
let token = sessionStorage.getItem("token");
@@ -16,18 +19,50 @@
};
onMount(() => {
checkparametros()?
busqueda():
cargaPropiedades();
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
});
function checkparametros(){
const params = new URLSearchParams(window.location.search);
function cargaPropiedades(e:Event){
e.preventDefault();
const response = fetch(String($urlG)+"/api/busqueda", {
if (params.has('cantidadHabitaciones') && params.has('tipoPropiedad')
&& params.has('servicios') ) {
return true;
}
return false
}
async function cargaPropiedades(){
const response = await fetch(String($urlG)+"/api/propiedades", {
method: "GET",
headers: {
"Auth": String(token),
}
});
if (response.ok){
propiedades = await response.json();
}
}
async function busqueda(){
const params = new URLSearchParams(window.location.search);
let hab = params.get('cantidadHabitaciones');
let tipo = params.get('tipoPropiedad');
let serv = params.get('servicios');
const response = await fetch(String($urlG)+"/api/busqueda"+"?cantidadHabitaciones="+hab+
"&tipoPropiedad="+tipo+"&servicios="+serv, {
method: "GET",
headers: {
"Auth": String(token),
}
});
if (response.ok){
propiedades = await response.json();
}
}
</script>
@@ -36,34 +71,10 @@
<div class="container mt-4">
<div class="row">
<div class="col col-md-8 order-2">
<PublicacionPropiedad ubicacion="test" servicios="test" />
<br>
<PublicacionPropiedad ubicacion="test" servicios="test" />
<br>
<PublicacionPropiedad ubicacion="test" servicios="test" />
<br>
<PublicacionPropiedad ubicacion="test" servicios="test" />
<br>
<PublicacionPropiedad ubicacion="test" servicios="test" />
<br>
<PublicacionPropiedad ubicacion="test" servicios="test" />
<br>
<PublicacionPropiedad ubicacion="test" servicios="test" />
<br>
<PublicacionPropiedad ubicacion="test" servicios="test" />
<br>
<PublicacionPropiedad ubicacion="test" servicios="test" />
<br>
<PublicacionPropiedad ubicacion="test" servicios="test" />
<br>
<PublicacionPropiedad ubicacion="test" servicios="test" />
<br>
<PublicacionPropiedad ubicacion="test" servicios="test" />
<br>
<PublicacionPropiedad ubicacion="test" servicios="test" />
<br>
<PublicacionPropiedad ubicacion="test" servicios="test" />
{#each propiedades as item}
<PublicacionPropiedad prop={item} />
<br>
{/each}
</div>
<div class="col-md-4 order-1">
<PanelBusqueda/>

5
Front/src/paginas/MisPropiedades.svelte
View File

@@ -39,7 +39,10 @@
</script>
<NavBarAutocompletable/>
<div class="container table-responsive">
<h1 class="text-center">
Propiedades de Alta
</h1>
<div class="container table-responsive border border-success">
<table class="table-responsive table table-striped">
<thead>
<tr>

5
Front/src/paginas/MisPropiedadesDeBaja.svelte
View File

@@ -39,7 +39,10 @@
</script>
<NavBarAutocompletable/>
<div class="container table-responsive">
<h1 class="text-center">
Propiedades de Baja
</h1>
<div class="container table-responsive border border-success">
<table class="table-responsive table table-striped">
<thead>
<tr>

2
Front/src/paginas/login.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import Login from "../Componentes/login.svelte"
import Login from "../Componentes/LoginPanel.svelte"
import Navbar from "../Componentes/NavBarLogin.svelte";
</script>

3
Front/src/stores/urlStore.js
View File

@@ -1,3 +0,0 @@
import { readable } from 'svelte/store';
export const urlG = readable('http://localhost:5007');

3
Front/src/stores/urlStore.ts Normal file
View File

@@ -0,0 +1,3 @@
import { readable, type Readable } from 'svelte/store';
export const urlG: Readable<string> = readable('http://localhost:5007');