Nada nuevo

src/app/app.module.ts

@@ -12,13 +12,16 @@ import { PerfilDiscotecaPage } from './perfil-discoteca/perfil-discoteca.page';
 import { PromptEventoPage} from './prompt-evento/prompt-evento.page'
 import { GaleriamodalPageModule } from './galeriamodal/galeriamodal.module';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatCardModule } from '@angular/material/card';
 import { LoginPage } from './login/login.page';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatIconModule } from '@angular/material/icon';
+
 
 @NgModule({
   declarations: [AppComponent, PerfilDiscotecaPage, PromptEventoPage, LoginPage],
   entryComponents: [],
-  imports: [BrowserModule, HttpClientModule, IonicModule.forRoot(), AppRoutingModule, ReactiveFormsModule, GaleriamodalPageModule, MatMenuModule, BrowserAnimationsModule],
+  imports: [BrowserModule, HttpClientModule, IonicModule.forRoot(), AppRoutingModule, ReactiveFormsModule, GaleriamodalPageModule, MatMenuModule, BrowserAnimationsModule, MatIconModule, MatCardModule],
   providers: [
     StatusBar,
     SplashScreen,

src/app/discoteca.ts

@@ -43,7 +43,7 @@ export class Discoteca {
         this.descripcion = desc;
     }
 
-    get Descripcion(): string{
+    getDescripcion(): string{
         return this.descripcion;
     }
 }

src/app/perfil-discoteca/perfil-discoteca.page.html

@@ -8,11 +8,52 @@
 
 <ion-content [fullscreen]="true">
 
-    <div class='fotoPerfil'>
+    <div class='main'>
       <ion-grid>
       <ion-row>
+      <div class='fotoPerfil'>
           <ion-img class="fotoPerfil" width="100%" height="100%" [src]='fotoSrc' alt='barraquinha'></ion-img>
           <div class="textoPie">{{nombre}}</div>
+      </div>
+      </ion-row>
+
+      <ion-row>
+      <div class="menuBotones">
+
+        <button mat-icon-button [matMenuTriggerFor]="menu">
+          <ion-icon name="settings" class="settingsIcon"></ion-icon>
+        </button>
+        
+        <mat-menu #menu="matMenu" xPositon="after" yPosition="above"> 
+        <button mat-menu-item>
+          <ion-icon name="image" slot="icon-only"></ion-icon>
+          <input type="file" (change)="loadImageFromDevice($event);cargarImagen()" id="file-input-perfil" accept="image/png, image/jpeg">
+        </button>
+
+
+        <button mat-menu-item (click)="enableEdit()" label="editar" [disabled]='editEnabled'>
+          <ion-icon name="create"></ion-icon>
+        </button>
+
+
+        <button mat-menu-item (click)="addEvento()">
+          <ion-icon name="add-circle-outline">
+          </ion-icon>
+          Añadir evento
+        </button>
+      </mat-menu>
+      </div>
+    </ion-row>
+
+      <ion-row>
+        <div id="botonesHidden1" class="botonesHidden">
+          <button (click)="saveEdit()" label="guardar" [disabled]='editDisabled' id="saveButton">
+            <ion-icon name="save"></ion-icon>
+            </button>
+            <button (click)="cancelEdit()" [disabled]='editDisabled' id="cancelButton">
+              Cancelar
+            </button>
+        </div>
       </ion-row>
 
 
@@ -25,9 +66,17 @@
             <div [contentEditable]='editEnabled'>{{localizacion}}</div>
           </div>
         </ion-col>
-        
         <ion-col>
-          <div>{{descripcion}}</div>
+          <div>
+            <mat-card>
+              <mat-card-header>
+                Descripción
+              </mat-card-header>
+              <mat-card-content>
+                {{descripcion}}
+              </mat-card-content>
+            </mat-card>
+          </div>
         </ion-col>
       </ion-row>
 
@@ -51,6 +100,7 @@
       </ion-row>
       
       <ion-row>
+        <ion-col size="12">
         <div *ngIf="eventos.length>0" class="eventos">
           <ion-list>
               <ion-item *ngFor="let evento of eventos" button (click)="mostrarEvento(evento)">
@@ -70,39 +120,11 @@
               </ion-item>
           </ion-list>
         </div>
+      </ion-col>
       </ion-row>
 
       <ion-row>
-        <button mat-icon-button [matMenuTriggerFor]="menu">
-          <ion-icon name="create"></ion-icon>
-        </button>
       
-        <mat-menu #menu="matMenu">
-        <button mat-menu-item [disabled]='editDisabled'>
-          <ion-icon name="image" slot="icon-only"></ion-icon>
-          <input type="file" (change)="loadImageFromDevice($event);cargarImagen()" id="file-input-perfil" accept="image/png, image/jpeg">
-        </button>
-
-
-        <button mat-menu-item (click)="enableEdit()" label="editar" [disabled]='editEnabled'>
-          <ion-icon name="create"></ion-icon>
-        </button>
-
-        <button mat-menu-item (click)="saveEdit()" label="guardar" [disabled]='editDisabled'>
-        <ion-icon name="save"></ion-icon>
-        </button>
-
-        <button mat-menu-item (click)="cancelEdit()" [disabled]='editDisabled'>
-          Cancelar
-        </button>
-
-        <button mat-menu-item (click)="addEvento()">
-          <ion-icon name="add-circle-outline">
-          </ion-icon>
-          Añadir evento
-        </button>
-
-      </mat-menu>
       </ion-row>
     </ion-grid>  
     </div>

src/app/perfil-discoteca/perfil-discoteca.page.scss

@@ -6,16 +6,20 @@
   }
     
     *{
-      padding: 5px;
+      padding: 10px;
       display: block;
+    }
+    
+    .main{
+      max-width: 800px;
+      max-height: auto;
       margin: auto;
+      text-align: justify;
     }
 
     .fotoPerfil{
         text-align: end;
-        max-width: 800px;
-        max-height: auto;
-        margin: auto;
+
     }
     
     .textoPie{
@@ -35,6 +39,8 @@
       float: left;
       position: relative;
       margin: auto;
+      text-align: right;
+      padding-right: 50px;
         
     }
     
@@ -43,15 +49,14 @@
     }
     
     .galeria{
-      
-        display: block;
-        max-width: 300px;
-        max-height: auto;
+        text-align: center;
+        padding: 30px;
         margin: auto;
     }
     
     .botonesHidden{
         display: none;
+        padding: none;
     }
     
     .botonesVisible{
@@ -59,14 +64,21 @@
     }
 
     .eventos{
-      display:block;
+      text-align: justify;
+    }
+
+    .evento{
+      max-width:fit-content;
     }
 
     .evento:hover{
       background-color: rgb(97, 97, 97);
     }
+
     .eventoHeader{
       font-weight: bold;
+      float: left;
+
     }
 
     .eventoDesc{
@@ -76,3 +88,26 @@
     ion-slides {
       height: 200px;
     }
+
+    mat-card-header{
+      text-align: right;
+      font-weight: bold;
+    }
+
+
+    button{
+      background-color: transparent;
+    }
+
+    .settingsIcon{
+      font-size: large;
+      background-color: white;
+    }
+
+    .menuBotones{
+      position: relative;
+      float: left;
+      bottom: 60px;
+      left: 20px;
+      
+    }

src/app/perfil-discoteca/perfil-discoteca.page.ts

@@ -5,7 +5,6 @@ import { AlertController } from '@ionic/angular';
 import { ViewChild } from '@angular/core';
 import { Evento } from '../evento';
 import { Router } from '@angular/router';
-import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import { THIS_EXPR } from '@angular/compiler/src/output/output_ast';
 import { GaleriamodalPage } from '../galeriamodal/galeriamodal.page';
 import { stringify } from '@angular/compiler/src/util';
@@ -18,10 +17,10 @@ import { stringify } from '@angular/compiler/src/util';
 export class PerfilDiscotecaPage implements OnInit {
 
   @ViewChild('IonSlides') slides: IonSlides;
-  @ViewChild('MatMenuTrigger') trigger: MatMenuTrigger;
   nombre: string;
   telefono: number;
   localizacion: string;
+  descripcion: string;
   fotoSrc: string;
   fotoLoaded: string;
   someURL: string;
@@ -34,7 +33,6 @@ export class PerfilDiscotecaPage implements OnInit {
   sliderOpts = {
       slidesPerView: 1.5,
       centeredSlides: true,
-      spaceBetween: 20,
   };
 
   constructor(private tab1Service: Tab1Service, private router: Router, private modalController: ModalController) {
@@ -50,6 +48,7 @@ export class PerfilDiscotecaPage implements OnInit {
     this.getTelefono();
     this.getLocalizacion();
     this.getEventos();
+    this.getDescripcion();
     this.editDisabled="true";
     this.editEnabled="false";
     this.fotoSrc = '../assets/img/barraca.jpg';
@@ -75,6 +74,10 @@ export class PerfilDiscotecaPage implements OnInit {
     this.eventos = this.tab1Service.getEventos();
   }
 
+  getDescripcion(): void{
+    this.descripcion = this.tab1Service.getDescripcion();
+  }
+
   cargarImagen(){
       this.fotoSrc = this.someURL;
   }
@@ -119,10 +122,14 @@ export class PerfilDiscotecaPage implements OnInit {
     let cajaDatos = document.getElementById("cajaDatos");
     cajaDatos.style.background="white";
     cajaDatos.style.color="black";
+    cajaDatos.contentEditable = "true";
     let botones = document.getElementById("botonesHidden1");
     botones.style.display = "block";
-    botones = document.getElementById("botonesHidden2");
-    botones.style.display = "block";
+    let saveButton = document.getElementById("saveButton") as HTMLButtonElement;
+    saveButton.disabled=false;
+    let cancelButton = document.getElementById("cancelButton") as HTMLButtonElement;
+    cancelButton.disabled=false;
+
 
  
 
@@ -134,6 +141,7 @@ export class PerfilDiscotecaPage implements OnInit {
     let cajaDatos = document.getElementById("cajaDatos");
     cajaDatos.style.background="inherit";
     cajaDatos.style.color="inherit";
+    cajaDatos.contentEditable="false";
     let botones = document.getElementById("botonesHidden1");
     botones.style.display = "none";
     botones = document.getElementById("botonesHidden2");

src/app/prompt-evento/prompt-evento.page.html

@@ -13,7 +13,7 @@
     <input type="text" id="nombre" formControlName = "nombre">
   </label>
   <span
-    *ngIf="nombre.errors.required && (nombre.touched||submitted)">
+    *ngIf="nombre?.errors?.required && (nombre.touched||submitted)">
     Tu evento necesita un nombre
   </span>
   </ion-item>
@@ -24,7 +24,7 @@
       <ion-datetime displayFormat="DD/MM, HH:mm"placeholder="Elegir Fecha" formControlName="fecha"></ion-datetime>
     </label>
     <span
-      *ngIf="fecha.errors.required && submitted">
+      *ngIf="fecha?.errors?.required && submitted">
       Tu evento necesita una fecha
     </span>
   </ion-item>
@@ -36,7 +36,7 @@
       <input type="number" formControlName = "precio1"><label>, </label><input type="number" formControlName = "precio2">
     </label>
     <span
-    *ngIf="precio1.errors.required && (precio1.touched||submitted)">
+    *ngIf="precio1?.errors?.required && (precio1.touched||submitted)">
     Tu evento necesita un precio (puede ser 0)
   </span>
   </ion-item>
@@ -47,7 +47,7 @@
       <textarea formControlName = "descripcion" rows="10"></textarea>
     </label>
     <span
-    *ngIf="descripcion.errors.required && (descripcion.touched||submitted)">
+    *ngIf="descripcion?.errors?.required && (descripcion.touched||submitted)">
     ¡Dale una descripción a tu evento!
   </span>
   </ion-item>

src/app/prompt-evento/prompt-evento.page.ts

@@ -12,6 +12,7 @@ import { Router } from '@angular/router';
 export class PromptEventoPage implements OnInit{
 
   submitted = false;
+  editarEvento = false;
   eventoForm = new FormGroup({
       nombre: new FormControl('', Validators.required),
       fecha: new FormControl('', Validators.required),

src/app/tab1/tab1.service.ts

@@ -32,6 +32,7 @@ export class Tab1Service implements OnInit{
     this.discoteca.setNombre('Barraca');
     this.discoteca.setTelefono(666666666);
     this.discoteca.setLocalizacion('Calle del Barquillo');
+    this.discoteca.setDescripcion('Barraca es una discoteca inaugurada en 1965 que tuvo su gran auge en los años 80, cuando se consolidó como la discoteca de mayor importancia de la movida valenciana, durante la conocida Ruta Destroy.');
     this.galeria = [];
     this.initEventos();
     this.editarEvento = false;
@@ -52,6 +53,10 @@ export class Tab1Service implements OnInit{
     return this.discoteca.getLocalizacion();
   }
 
+  getDescripcion(): string{
+    return this.discoteca.getDescripcion();
+  }
+
   getEventos(): Evento[]{
     return this.eventos;
   }