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

finalmente adapte todo a svelte y más

Browse Source 
Signed-off-by: fede <federico.nicolas.polidoro@gmail.com>
This commit is contained in:
fedpo
2024-11-03 04:49:54 -03:00
parent 735cdfc344
commit b1952399fa
19 changed files with 300 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Front/index.html
View File

@@ -3,7 +3,9 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AlquilaFacil</title>
</head>

13
Front/public/home.svg Normal file
View File

@@ -0,0 +1,13 @@
<!--
unicode: "fe2b"
version: "3.0"
-->
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d="M12.707 2.293l9 9c.63 .63 .184 1.707 -.707 1.707h-1v6a3 3 0 0 1 -3 3h-1v-7a3 3 0 0 0 -2.824 -2.995l-.176 -.005h-2a3 3 0 0 0 -3 3v7h-1a3 3 0 0 1 -3 -3v-6h-1c-.89 0 -1.337 -1.077 -.707 -1.707l9 -9a1 1 0 0 1 1.414 0m.293 11.707a1 1 0 0 1 1 1v7h-4v-7a1 1 0 0 1 .883 -.993l.117 -.007z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 457 B

15
Front/src/App.svelte
View File

@@ -4,7 +4,8 @@
import MenuPage from './Menu/page.svelte';
import ProteRoute from './lib/RutaProtegida.svelte';
import InfoPage from './Info/page.svelte';
import InqPage from "./Inquilinos/page.svelte";
import InqPage from "./Inquilino/page.svelte";
import PropPage from "./Propietario/page.svelte";
</script>
<Router>
@@ -16,11 +17,17 @@
<Route path="/Menu">
<ProteRoute component={MenuPage} />
<ProteRoute componente={MenuPage} />
</Route>
<Route path="/Inquilinos">
<ProteRoute component={InqPage}/>
<!--Crear Cuenta Inquilino-->
<Route path="/accion/4">
<ProteRoute componente={InqPage}/>
</Route>
<!--Crear Cuenta Propietario-->
<Route path="/accion/5">
<ProteRoute componente={PropPage}/>
</Route>
</Router>

18
Front/src/Info/page.svelte
View File

@@ -1,17 +1,13 @@
<script>
import NavBarLogin from "../lib/NavBarLogin.svelte";
import BarraTexto from "../lib/BarraHorizontalConTexto.svelte";
</script>
<NavBarLogin/><br>
<div class="container text-justify">
<h4>Preguntas Frecuentes:</h4>
<div class="row">
<div class="col"><hr></div>
<div class="col-auto"><h5>Que es AlquilaFacil</h5></div>
<div class="col"><hr></div>
</div>
<BarraTexto text="Que es AlquilaFacil" />
Es un sistema el cual desarrolle para la materia de ingenieria de software / trabajo de diploma.
En la cual se pueden publicar propiedades como un propietario y buscar propiedades para alquilar.
@@ -19,10 +15,8 @@
los pagos o visualizar los comprobantes de los pagos realizados.
<div class="row">
<div class="col"><hr></div>
<div class="col-auto"><h5>Necesito una cuenta?</h5></div>
<div class="col"><hr></div>
</div>
Sí es necesario comunicarse con un administrador para poder acceder.
<BarraTexto text="Necesito una cuenta?" />
Sí es necesario comunicarse con un administrador para que se te creé una cuenta ya sea para inquilino,
propietario o ambas.
</div>

35
Front/src/Inquilino/page.svelte Normal file
View File

@@ -0,0 +1,35 @@
<script lang="ts">
import FormPostInq from "../lib/FormPostCli.svelte";
import NavBarAutocompletable from "../lib/NavBarAutocompletable.svelte";
import TextBar from "../lib/BarraHorizontalConTexto.svelte";
</script>
<NavBarAutocompletable/>
<div class="container">
<div class="row align-items-start">
<div class="col">
<br><br>
<TextBar text="Formulario Alta Inquilino" />
Este es un formulario para crear una cuenta de Propietario.
Los campos con un asterisco (*) requieren ser completados
si o si.
<br><br>
<TextBar text="¿Porque querria crear una cuenta?" />
Crear una cuenta es necesario para poder acceder al menu de
inquilino donde se mostrarán los alquileres pendientes de pago
y donde podrá buscar propiedades para alquilar.
<br><br>
<TextBar text="¿Que pasa si ya tengo una cuenta de propietario?" />
Si tiene una cuenta de propietario rellene los campos igualmente y
se le añadirán las capacidades de buscar propiedades para alquilar
y ver el estado de los alquileres donde usted es inquilino.
</div>
<div class="col">
<br>
<FormPostInq url="http://127.0.0.1:5007/api/inquilino"/>
</div>
</div>
</div>

15
Front/src/Inquilinos/page.svelte
View File

@@ -1,15 +0,0 @@
<script lang="ts">
import { Col } from "@sveltestrap/sveltestrap";
import FormPostInq from "../lib/FormPostCli.svelte";
import NavBarAutocompletable from "../lib/NavBarAutocompletable.svelte";
</script>
<NavBarAutocompletable/>
<div class="container">
<div class="row align-items-start">
<div class="col">
<FormPostInq url="http://127.0.0.1:5007/api/inquilino"/>
</div>
</div>
</div>

34
Front/src/Propietario/page.svelte Normal file
View File

@@ -0,0 +1,34 @@
<script lang="ts">
import FormPostInq from "../lib/FormPostCli.svelte";
import NavBarAutocompletable from "../lib/NavBarAutocompletable.svelte";
import TextBar from "../lib/BarraHorizontalConTexto.svelte";
</script>
<NavBarAutocompletable/>
<div class="container">
<div class="row align-items-start">
<div class="col">
<br><br>
<TextBar text="Formulario Alta Propietario" />
Este es un formulario para crear una cuenta de Inquilino.
Los campos con un asterisco (*) requieren ser completados
si o si.
<br><br>
<TextBar text="¿Porque querria crear una cuenta?" />
Crear una cuenta es necesario para poder acceder al menu de
propietario donde se mostrarán tanto las propiedades sin alquilar
como las alquiladas y cual es la situacion con el inquilino.
<br><br>
<TextBar text="¿Que pasa si ya tengo una cuenta de Inquilino?" />
Si tiene una cuenta de Inquilino rellene los campos igualmente y
se le añadirán las capacidades de publicar propiedades y ver
el estado de los alquileres donde usted es Propietario.
</div>
<div class="col">
<br>
<FormPostInq url="http://127.0.0.1:5007/api/propietario"/>
</div>
</div>
</div>

11
Front/src/lib/BarraHorizontalConTexto.svelte Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts">
let prop = $props();
</script>
<div class="row">
<div class="col"><hr></div>
<div class="col-auto"><h5>{prop.text}</h5></div>
<div class="col"><hr></div>
</div>

88
Front/src/lib/FormPostCli.svelte
View File

@@ -8,15 +8,15 @@
let { url }: Props = $props();
let showAlert: boolean = $state(false);
let errorMessage: string = $state()
let errorMessage: string = $state("")
let dni: number = $state()
let email: string = $state()
let contraseña: string = $state()
let nombre: string = $state()
let apellido: string = $state()
let domicilio: string = $state()
let celular: string = $state()
let dni: number = $state(0)
let email: string = $state("")
let contraseña: string = $state("")
let nombre: string = $state("")
let apellido: string = $state("")
let domicilio: string = $state("")
let celular: string = $state("")
async function submitForm(event: any) {
event.preventDefault();
@@ -38,34 +38,52 @@
}
}
</script>
<div class="card">
<div class="card-body">
<Form on:submit={submitForm}>
<FormGroup floating label="Dni*">
<Input type="number" min='1' bind:value={dni} required />
</FormGroup>
<Form on:submit={submitForm}>
<FormGroup floating label="Dni">
<Input type="number" min='1' bind:value={dni} required />
</FormGroup>
<FormGroup floating label="Email">
<Input type="email" placeholder="ejemplo@mail.com" bind:value={email} required />
</FormGroup>
<FormGroup floating label="Contraseña">
<Input type="password" placeholder="*********" bind:value={contraseña} required />
</FormGroup>
<FormGroup floating label="Nombre">
<Input type="text" bind:value={nombre} required />
</FormGroup>
<FormGroup floating label="Apellido">
<Input type="text" bind:value={apellido} required />
</FormGroup>
<FormGroup floating label="Domicilio">
<Input type="text" bind:value={domicilio} required />
</FormGroup>
<FormGroup floating label="Celular">
<Input type="tel" bind:value={celular} required />
</FormGroup>
<br>
<FormGroup>
<Button color="primary" type="submit">Ingresar</Button>
</FormGroup>
</Form>
<div class="row">
<div class="col">
<FormGroup floating label="Nombre*">
<Input type="text" bind:value={nombre} required />
</FormGroup>
</div>
<div class="col">
<FormGroup floating label="Apellido*">
<Input type="text" bind:value={apellido} required />
</FormGroup>
</div>
</div>
<FormGroup floating label="Email*">
<Input type="email" placeholder="ejemplo@mail.com" bind:value={email} required />
</FormGroup>
<FormGroup floating label="Contraseña*">
<Input type="password" placeholder="*********" bind:value={contraseña} required />
</FormGroup>
<div class="row">
<div class="col">
<FormGroup floating label="Domicilio*">
<Input type="text" bind:value={domicilio} required />
</FormGroup>
</div>
<div class="col">
<FormGroup floating label="Celular*">
<Input type="tel" bind:value={celular} required />
</FormGroup>
</div>
</div>
<FormGroup>
<Button color="primary" type="submit">Crear</Button>
</FormGroup>
</Form>
</div>
</div>
{#if showAlert}
<div class='alert alert-warning alert-dismissible fade show' role='alert'>
<strong>{errorMessage}</strong>

5
Front/src/lib/NavBarAutocompletable.svelte
View File

@@ -46,6 +46,11 @@
<NavbarBrand href="/">
AlquilaFacil
</NavbarBrand>
<div class="card">
<a href="/Menu">
<img src="/home.svg" alt="Volver al Menú"/>
</a>
</div>
<NavbarToggler on:click={() => (isOpen = !isOpen)} />
<Collapse isOpen={isOpen} navbar expand="md">
<Nav class="ms-auto" navbar>

7
Front/src/lib/RutaProtegida.svelte
View File

@@ -2,8 +2,9 @@
import { onMount } from 'svelte';
import { navigate } from 'svelte-routing';
import { writable } from 'svelte/store';
export let component;
let { componente } = $props();
const isAuthenticated = writable(false);
const isVerified = writable(false);
@@ -45,7 +46,7 @@
</div>
{:else}
{#if $isAuthenticated}
<svelte:component this={component} />
{@render componente()}
{:else}
{navigate('/')}
{/if}