mejorado el look del evento form

This commit is contained in:
onsaliyo 2021-02-10 15:45:25 +01:00
parent 3c9a0c416f
commit dca38179bb
5 changed files with 47 additions and 26 deletions

View File

@ -7,7 +7,9 @@ const routes: Routes = [
{ {
path: '', path: '',
component: PromptEventoPage component: PromptEventoPage
} },
]; ];
@NgModule({ @NgModule({

View File

@ -7,33 +7,34 @@
<ion-content> <ion-content>
<form [formGroup]="eventoForm" (ngSubmit)="onSubmit()"> <form [formGroup]="eventoForm" (ngSubmit)="onSubmit()">
<div class="campoInput"> <ion-item>
<label> <label>
Nombre del evento: Nombre del evento:
<input type="text" formControlName = "nombre"> <input type="text" formControlName = "nombre">
</label> </label>
</div> </ion-item>
<div class="campoInput"> <ion-item>
<label> <label>
Fecha: Fecha:
<ion-datetime displayFormat="DD/MM, HH:mm"placeholder="Elegir Fecha" formControlName="fecha"></ion-datetime> <ion-datetime displayFormat="DD/MM, HH:mm"placeholder="Elegir Fecha" formControlName="fecha"></ion-datetime>
</label> </label>
</div> </ion-item>
<div class="campoInput">
<label>
Descripción:
<input type="text" formControlName = "descripcion">
</label>
</div>
<div class="campoInput"> <ion-item>
<label> <label>
Precio: Precio:
<input type="number" formControlName = "precio1"><label>, </label><input type="number" formControlName = "precio2"> <input type="number" formControlName = "precio1"><label>, </label><input type="number" formControlName = "precio2">
</label> </label>
</div> </ion-item>
<ion-item>
<label>
Descripción:
<textarea formControlName = "descripcion" rows="10"></textarea>
</label>
</ion-item>
<button type="submit">GUARDAR</button> <button type="submit">GUARDAR</button>
</form> </form>

View File

@ -1,12 +1,24 @@
*{ *{
--ion-text-color: #000000; --ion-text-color: #fbffc4;
padding: 5px; padding: 15px;
letter-spacing: 2px; letter-spacing: 2px;
} }
.campoInput{ ion-item{
display: block; text-align: center;
color: wheat,
} }
input{
display: inline-block;
text-align: left;
color: black;
}
label{
display: inline-block;
text-align: left;
color: wheat,
}

View File

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'; import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Tab1Service } from '../tab1/tab1.service'; import { Tab1Service } from '../tab1/tab1.service';
import { Evento } from '../evento'; import { Evento } from '../evento';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
@ -11,12 +11,12 @@ import { Router } from '@angular/router';
}) })
export class PromptEventoPage implements OnInit{ export class PromptEventoPage implements OnInit{
eventoForm = new FormGroup({ eventoForm = new FormGroup({
nombre: new FormControl(''), nombre: new FormControl('', Validators.required),
fecha: new FormControl(''), fecha: new FormControl('', Validators.required),
hora: new FormControl(''), hora: new FormControl('', Validators.required),
precio1: new FormControl(''), precio1: new FormControl('', Validators.required),
precio2: new FormControl(''), precio2: new FormControl('', Validators.required),
descripcion: new FormControl('') descripcion: new FormControl('', Validators.required),
}); });
eventos: Evento[]; eventos: Evento[];
@ -33,7 +33,7 @@ export class PromptEventoPage implements OnInit{
onSubmit(){ onSubmit(){
let evento = new Evento(); let evento = new Evento();
this.asignarEvento(evento); this.asignarEvento(evento);
this.router.navigate(['/tabs/tab1/perfil-discoteca']); this.router.navigate(['/tabs']);
} }
asignarEvento(evento: Evento){ asignarEvento(evento: Evento){
evento.setNombre(this.eventoForm.get('nombre').value); evento.setNombre(this.eventoForm.get('nombre').value);

View File

@ -9,10 +9,16 @@ const routes: Routes = [
{ {
path: '', path: 'perfil-discoteca',
component: PerfilDiscotecaPage component: PerfilDiscotecaPage
}, },
{
path: '',
redirectTo: 'perfil-discoteca',
pathMatch: 'full,'
},
{ {
path: 'prompt-evento', path: 'prompt-evento',
component: PromptEventoPage component: PromptEventoPage