Permite añadir eventos a la p
This commit is contained in:
parent
e8b52ec48d
commit
af852bff37
|
@ -10,4 +10,14 @@
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: auto;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { RouteReuseStrategy } from '@angular/router';
|
import { RouteReuseStrategy } from '@angular/router';
|
||||||
|
import { ReactiveFormsModule } from '@angular/forms';
|
||||||
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
|
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
|
||||||
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
|
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
|
||||||
import { StatusBar } from '@ionic-native/status-bar/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 { AppRoutingModule } from './app-routing.module';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { PerfilDiscotecaPage } from './perfil-discoteca/perfil-discoteca.page';
|
import { PerfilDiscotecaPage } from './perfil-discoteca/perfil-discoteca.page';
|
||||||
|
import { PromptEventoPage} from './prompt-evento/prompt-evento.page'
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [AppComponent, PerfilDiscotecaPage],
|
declarations: [AppComponent, PerfilDiscotecaPage, PromptEventoPage],
|
||||||
entryComponents: [],
|
entryComponents: [],
|
||||||
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
|
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ReactiveFormsModule],
|
||||||
providers: [
|
providers: [
|
||||||
StatusBar,
|
StatusBar,
|
||||||
SplashScreen,
|
SplashScreen,
|
||||||
|
|
|
@ -1,9 +1,13 @@
|
||||||
export class Evento {
|
export class Evento {
|
||||||
private id: number;
|
private id: number;
|
||||||
private nombre: string;
|
nombre: string;
|
||||||
private localizacion: string;
|
localizacion: string;
|
||||||
private fecha: Date;
|
fecha: Date;
|
||||||
private desc: string;
|
dia: string;
|
||||||
|
hora: string;
|
||||||
|
descripcion: string;
|
||||||
|
precio1: number;
|
||||||
|
precio2: number;
|
||||||
|
|
||||||
setNombre(nombre: string): void{
|
setNombre(nombre: string): void{
|
||||||
this.nombre = nombre;
|
this.nombre = nombre;
|
||||||
|
@ -30,10 +34,42 @@ export class Evento {
|
||||||
}
|
}
|
||||||
|
|
||||||
setDesc(desc: string): void{
|
setDesc(desc: string): void{
|
||||||
this.desc = desc;
|
this.descripcion = desc;
|
||||||
}
|
}
|
||||||
|
|
||||||
getDesc(): string{
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -57,6 +57,7 @@
|
||||||
</ion-col>
|
</ion-col>
|
||||||
<ion-col>
|
<ion-col>
|
||||||
<div class="galeria">
|
<div class="galeria">
|
||||||
|
Galería de Fotos
|
||||||
<input type="file" (change)="loadImageFromDevice($event)" id="file-input-galeria" accept="image/png, image/jpeg">
|
<input type="file" (change)="loadImageFromDevice($event)" id="file-input-galeria" accept="image/png, image/jpeg">
|
||||||
<ion-slides (ionDrag)="onSlideChanged()">
|
<ion-slides (ionDrag)="onSlideChanged()">
|
||||||
<ion-slide *ngFor="let foto of galeriaFotos">
|
<ion-slide *ngFor="let foto of galeriaFotos">
|
||||||
|
@ -80,6 +81,27 @@
|
||||||
</ion-button>
|
</ion-button>
|
||||||
</ion-row>
|
</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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -2,11 +2,11 @@
|
||||||
--ion-background-color-rgb: 73,73,73;
|
--ion-background-color-rgb: 73,73,73;
|
||||||
|
|
||||||
--ion-text-color: #eeeeee;
|
--ion-text-color: #eeeeee;
|
||||||
--ion-text-color-rgb: 238,238,238;}
|
--ion-text-color-rgb: 238,238,238;
|
||||||
|
}
|
||||||
|
|
||||||
*{
|
*{
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
letter-spacing: 2px;
|
|
||||||
}
|
}
|
||||||
.titulo{
|
.titulo{
|
||||||
font: "arial";
|
font: "arial";
|
||||||
|
@ -60,6 +60,22 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.eventos{
|
||||||
|
margin: 20px;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.evento{
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.eventoHeader{
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eventoDesc{
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
ion-slides {
|
ion-slides {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
|
@ -26,7 +26,6 @@ export class PerfilDiscotecaPage implements OnInit {
|
||||||
editDisabled: string;
|
editDisabled: string;
|
||||||
editEnabled: string;
|
editEnabled: string;
|
||||||
galeriaFotos: string[];
|
galeriaFotos: string[];
|
||||||
galeriaFake: string[];
|
|
||||||
currentIndex: number;
|
currentIndex: number;
|
||||||
eventos: Evento[];
|
eventos: Evento[];
|
||||||
alertCtrl: AlertController;
|
alertCtrl: AlertController;
|
||||||
|
@ -78,7 +77,6 @@ export class PerfilDiscotecaPage implements OnInit {
|
||||||
this.slides.update();
|
this.slides.update();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
loadImageFromDevice(event): void{
|
loadImageFromDevice(event): void{
|
||||||
|
|
|
@ -5,6 +5,40 @@
|
||||||
</ion-header>
|
</ion-header>
|
||||||
|
|
||||||
<ion-content>
|
<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>
|
</ion-content>
|
||||||
|
|
|
@ -0,0 +1,12 @@
|
||||||
|
*{
|
||||||
|
--ion-text-color: #000000;
|
||||||
|
padding: 5px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.campoInput{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,15 +1,51 @@
|
||||||
import { Component, OnInit } from '@angular/core';
|
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({
|
@Component({
|
||||||
selector: 'app-prompt-evento',
|
selector: 'app-prompt-evento',
|
||||||
templateUrl: './prompt-evento.page.html',
|
templateUrl: './prompt-evento.page.html',
|
||||||
styleUrls: ['./prompt-evento.page.scss'],
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -29,6 +29,7 @@ export class Tab1Service implements OnInit{
|
||||||
this.discoteca.setTelefono(666666666);
|
this.discoteca.setTelefono(666666666);
|
||||||
this.discoteca.setLocalizacion('Calle del Barquillo');
|
this.discoteca.setLocalizacion('Calle del Barquillo');
|
||||||
this.galeria = new Galeria();
|
this.galeria = new Galeria();
|
||||||
|
this.initEventos();
|
||||||
this.galeria.setDiscoteca(this.discoteca.getNombre());
|
this.galeria.setDiscoteca(this.discoteca.getNombre());
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -48,7 +49,11 @@ export class Tab1Service implements OnInit{
|
||||||
}
|
}
|
||||||
|
|
||||||
getEventos(): Evento[]{
|
getEventos(): Evento[]{
|
||||||
return this.discoteca.getEventos();
|
return this.eventos;
|
||||||
|
}
|
||||||
|
|
||||||
|
initEventos(): void{
|
||||||
|
this.eventos = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
<p>
|
||||||
|
view-evento works!
|
||||||
|
</p>
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
|
@ -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() {}
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue