Permite añadir eventos a la p

This commit is contained in:
onsaliyo 2021-02-02 12:02:37 +01:00
parent e8b52ec48d
commit af852bff37
14 changed files with 231 additions and 20 deletions

View File

@ -10,4 +10,14 @@
margin-right: auto;
text-align: center;
margin: auto;
--ion-color-primary: #c4b700;
--ion-color-primary-rgb: 196, 183, 0;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #695100;
--ion-color-primary-tint: #8a8b39;
}

View File

@ -1,7 +1,7 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
@ -9,11 +9,12 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PerfilDiscotecaPage } from './perfil-discoteca/perfil-discoteca.page';
import { PromptEventoPage} from './prompt-evento/prompt-evento.page'
@NgModule({
declarations: [AppComponent, PerfilDiscotecaPage],
declarations: [AppComponent, PerfilDiscotecaPage, PromptEventoPage],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ReactiveFormsModule],
providers: [
StatusBar,
SplashScreen,

View File

@ -1,9 +1,13 @@
export class Evento {
private id: number;
private nombre: string;
private localizacion: string;
private fecha: Date;
private desc: string;
nombre: string;
localizacion: string;
fecha: Date;
dia: string;
hora: string;
descripcion: string;
precio1: number;
precio2: number;
setNombre(nombre: string): void{
this.nombre = nombre;
@ -30,10 +34,42 @@ export class Evento {
}
setDesc(desc: string): void{
this.desc = desc;
this.descripcion = desc;
}
getDesc(): string{
return this.desc;
return this.descripcion;
}
setDia(fecha: Date): void{
this.dia = fecha.getDate()+"/"+fecha.getMonth();
}
getDia(): string{
return this.dia;
}
setHora(fecha: Date): void{
this.hora = fecha.getHours()+":"+fecha.getMinutes();
}
getHora(): string{
return this.hora;
}
setPrecio1(precio: number): void{
this.precio1 = precio;
}
getPrecio1(): number{
return this.precio1;
}
setPrecio2(precio: number): void{
this.precio2 = precio;
}
getPrecio2(): number{
return this.precio2;
}
}

View File

@ -57,6 +57,7 @@
</ion-col>
<ion-col>
<div class="galeria">
Galería de Fotos
<input type="file" (change)="loadImageFromDevice($event)" id="file-input-galeria" accept="image/png, image/jpeg">
<ion-slides (ionDrag)="onSlideChanged()">
<ion-slide *ngFor="let foto of galeriaFotos">
@ -80,6 +81,27 @@
</ion-button>
</ion-row>
<ion-row>
<div *ngIf="eventos.length>0" class="eventos">
<ion-list>
<ion-item *ngFor="let evento of eventos">
<div class="evento">
<div class="eventoHeader">
{{evento.nombre}} ·
<ion-icon name="calendar-outline"></ion-icon>
{{evento.fecha}} ·
<ion-icon name="cash-outline"></ion-icon>
{{evento.precio1}}, {{evento.precio2}}
</div>
<div class="eventoDesc">
{{evento.descripcion}}
</div>
</div>
</ion-item>
</ion-list>
</div>
</ion-row>
</div>

View File

@ -2,11 +2,11 @@
--ion-background-color-rgb: 73,73,73;
--ion-text-color: #eeeeee;
--ion-text-color-rgb: 238,238,238;}
--ion-text-color-rgb: 238,238,238;
}
*{
padding: 5px;
letter-spacing: 2px;
}
.titulo{
font: "arial";
@ -60,6 +60,22 @@
display: none;
}
.eventos{
margin: 20px;
justify-content: space-between;
}
.evento{
margin-top: 20px;
}
.eventoHeader{
font-weight: bold;
}
.eventoDesc{
color: white;
}
ion-slides {
height: 100%;
}

View File

@ -26,7 +26,6 @@ export class PerfilDiscotecaPage implements OnInit {
editDisabled: string;
editEnabled: string;
galeriaFotos: string[];
galeriaFake: string[];
currentIndex: number;
eventos: Evento[];
alertCtrl: AlertController;
@ -78,7 +77,6 @@ export class PerfilDiscotecaPage implements OnInit {
this.slides.update();
}
loadImageFromDevice(event): void{

View File

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

View File

@ -0,0 +1,12 @@
*{
--ion-text-color: #000000;
padding: 5px;
letter-spacing: 2px;
}
.campoInput{
display: block;
}

View File

@ -1,15 +1,51 @@
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Tab1Service } from '../tab1/tab1.service';
import { Evento } from '../evento';
import { Router } from '@angular/router';
import { FormBuilder } from '@angular/forms';
@Component({
selector: 'app-prompt-evento',
templateUrl: './prompt-evento.page.html',
styleUrls: ['./prompt-evento.page.scss'],
})
export class PromptEventoPage implements OnInit {
export class PromptEventoPage{
eventoForm = new FormGroup({
nombre: new FormControl(''),
fecha: new FormControl(''),
hora: new FormControl(''),
precio1: new FormControl(''),
precio2: new FormControl(''),
descripcion: new FormControl('')
});
constructor() { }
eventos: Evento[];
ngOnInit() {
constructor(private tab1Service: Tab1Service, private router: Router) {
this.eventos = [];
}
onSubmit(){
let evento = new Evento();
this.asignarEvento(evento);
this.router.navigate(['/tabs/tab1/perfil-discoteca']);
}
asignarEvento(evento: Evento){
evento.setNombre(this.eventoForm.get('nombre').value);
evento.setDesc(this.eventoForm.get('descripcion').value);
evento.setFecha(this.eventoForm.get('fecha').value);
evento.setPrecio1(this.eventoForm.get('precio1').value);
evento.setPrecio2(this.eventoForm.get('precio2').value);
//evento.setDia(evento.getFecha()); el datetime de Ion devuelve un String, no se puede
//evento.setHora(evento.getFecha()); transformar en dia y hora
if (!this.tab1Service.eventos){
this.tab1Service.initEventos();}
this.tab1Service.eventos.push(evento);
for (var i=0; i<this.tab1Service.eventos.length; i++){
console.warn(this.tab1Service.eventos[i].nombre);
}
}
}

View File

@ -29,6 +29,7 @@ export class Tab1Service implements OnInit{
this.discoteca.setTelefono(666666666);
this.discoteca.setLocalizacion('Calle del Barquillo');
this.galeria = new Galeria();
this.initEventos();
this.galeria.setDiscoteca(this.discoteca.getNombre());
}
@ -48,7 +49,11 @@ export class Tab1Service implements OnInit{
}
getEventos(): Evento[]{
return this.discoteca.getEventos();
return this.eventos;
}
initEventos(): void{
this.eventos = [];
}
}

View File

@ -0,0 +1,3 @@
<p>
view-evento works!
</p>

View File

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { ViewEventoComponent } from './view-evento.component';
describe('ViewEventoComponent', () => {
let component: ViewEventoComponent;
let fixture: ComponentFixture<ViewEventoComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ViewEventoComponent ],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(ViewEventoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
}));
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,14 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-view-evento',
templateUrl: './view-evento.component.html',
styleUrls: ['./view-evento.component.scss'],
})
export class ViewEventoComponent implements OnInit {
constructor() { }
ngOnInit() {}
}