Retoques css y muestra mensaje cuando no obtiene resultados

Author: Genaro Salas

src/app/components/crear-evento/crear-evento.component.css

@@ -49,7 +49,7 @@
     border: 3px solid black;
     border-radius: 8px;
     padding: .4rem .2rem;
-    min-width: 300px;
+    width: 300px;
 }
 
 .contenedor-crear form textarea{

src/app/components/crear-evento/crear-evento.component.html

@@ -21,13 +21,15 @@
         </div>
         <div class="input-container">
             <select formControlName="idUbicacion" >
+              <option value="" selected="selected">Seleccione Ubicación</option>
                 <option  *ngFor="let ubicacion of ubicaciones" value="{{ubicacion.idUbicacion}}" >{{ubicacion.nombre}}</option> <!-- El value puede ser el ID --->
             </select>
-          <strong class="add-button">Añadir ubicación <i class="bi bi-geo-alt-fill"></i></strong>
+          <strong class="add-button" (click)="anadirUbicacion()">Añadir ubicación <i class="bi bi-geo-alt-fill"></i></strong>
           <p *ngIf="!this.validar('idUbicacion')" class="error">Ubicaciones</p>
         </div>
         <div class="input-container">
             <select formControlName="idSubcategoria">
+              <option value="" selected="selected">Seleccione Subcategoría</option>
                 <option *ngFor="let subcategoria of subcategorias" value="{{subcategoria.idSubcategoria}}">{{subcategoria.nombre}}</option>
             </select>
           <p *ngIf="!this.validar('idSubcategoria')" class="error">Subcategoría</p>

src/app/components/crear-evento/crear-evento.component.ts

@@ -171,7 +171,15 @@ export class CrearEventoComponent implements OnInit {
         console.log(data);
         if (data['status'] != 'error') {
           console.log('data');
-          this.router.navigate(['/ubicacion']);
+          this.modal.generateModal(
+            'Éxito',
+            `Evento creado con éxito.`,
+            'De acuerdo',
+            'success'
+          );
+          setTimeout(() => {
+            this.router.navigate(['/mis-eventos']);
+          }, 2000);
           //this.borrarForm();
         } else {
           this.modal.generateModal(
@@ -200,6 +208,10 @@ export class CrearEventoComponent implements OnInit {
     this.imagen=event[0]['base64']
     console.log(event[0]['base64'])
   }
+
+  anadirUbicacion() {
+    this.router.navigate(['/formularioUbicacion', 0]);
+  }
 }
 
 

src/app/components/datos-ubicaciones/datos-ubicaciones.component.ts

@@ -23,6 +23,7 @@ export class DatosUbicacionesComponent implements OnInit {
     private appService: AppService,
     private router: Router,
     private activatedRoute: ActivatedRoute
+
   ) {
     this.activatedRoute.params.subscribe((parametros) => {
       this.idUbicacion = parametros['idUbicacion'];
@@ -99,7 +100,7 @@ export class DatosUbicacionesComponent implements OnInit {
         console.log(data);
         if (data['status'] != 'error') {
           console.log('data');
-          this.router.navigate(['/ubicacion']);
+          window.history.back();
           //this.borrarForm();
         } else {
           this.modal.generateModal(
@@ -134,8 +135,7 @@ export class DatosUbicacionesComponent implements OnInit {
         console.log(data);
         if (data['status'] != 'error') {
           console.log('data');
-          this.router.navigate(['/ubicacion']);
-          //this.borrarForm();
+          window.history.back();
         } else {
           this.modal.generateModal(
             `Algo salió mal`,
@@ -159,7 +159,7 @@ export class DatosUbicacionesComponent implements OnInit {
    * @ignore
    */
   volver() {
-    this.router.navigate(['ubicacion']);
+    window.history.back();
   }
 
   /**

src/app/components/home/home.component.css

@@ -49,7 +49,7 @@
   position: absolute;
   bottom: 10px;
   right: 10px;
-  font-size: 1.4rem;
+  font-size: 1.3rem;
   cursor: pointer;
   border: none;
   background: none;

src/app/components/home/home.component.html

@@ -10,9 +10,10 @@ <h2>{{evento.titulo}}</h2>
             <span><strong>Nº asistentes: </strong> {{evento.numParticipantes}}</span>
             <span><strong>{{evento.nombreSubcateogria}}</strong></span>
         </div>
-        <button *ngIf="comprobarParticipante(evento.idEvento)"(click)="anadirParticipante(evento.idEvento)"><i class="bi bi-check-circle-fill"></i></button>
+        <button *ngIf="comprobarParticipante(evento.idEvento)"(click)="anadirParticipante(evento.idEvento)">Apuntarme <i class="bi bi-check-circle-fill"></i></button>
         <button *ngIf="!comprobarParticipante(evento.idEvento)"><i class="bi bi-check-circle-fill" style="opacity: 10%; cursor: default;"></i></button>
       <!--<button *ngIf="!comprobarParticipante(evento.idEvento)"><i class="bi bi-dash-circle-fill" style="opacity: 10%"></i></button>-->
     </div>
 </div>
+<p *ngIf="!mostrar">No hay eventos</p>
 <app-modal></app-modal>

src/app/components/mis-eventos/mis-eventos.component.css

@@ -4,11 +4,28 @@
     --secondary-color: #939393;
     --text-base-color: black;
   }
+
+  h2{
+    color: var(--primary-color);
+  }
 
+  .separador{
+    margin-top: 50px;
+  }
+
   .contenedor-filtros{
     display: flex;
     gap: 1rem;
+    padding: .5rem;
     align-items: center;
+    position: absolute;
+    top: 79px;
+    left: 0;
+    z-index: 10;
+    background-color: rgba(255, 255, 255, .75);
+    backdrop-filter: blur(15px);
+    width: 100%;
+    height: 60px;
   }
 
   .contenedor-eventos {
@@ -55,7 +72,7 @@
     position: absolute;
     bottom: 10px;
     right: 10px;
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     cursor: pointer;
     border: none;
     background: none;

src/app/components/mis-eventos/mis-eventos.component.html

@@ -2,6 +2,8 @@
     <input type="checkbox" name="creados" #creados value="1" (change)="mostrar(creados.value)" checked><label for="">Eventos creados</label>
     <input type="checkbox" name="apuntados" #apuntados value="2" (change)="mostrar(apuntados.value)" checked><label for="">Eventos apuntados</label>
 </div>
+<div class="separador"></div>
+<h2 *ngIf="mostrarCreados">Eventos creados</h2>
 <div class="contenedor-eventos creados" *ngIf="mostrarCreados && mostrarC">
   <div class="evento" *ngFor="let eventoCreado of eventosCreados">
     <div class="imagen-evento"  [ngStyle]="{'background-image': 'url(' + 'http://localhost/proyecto/badajozUnida/php/eventos/imagenes/'+eventoCreado.imagen + ')'}"></div>
@@ -19,6 +21,7 @@ <h2>{{eventoCreado.titulo}}</h2>
 </div>
 <p *ngIf="!mostrarC && mostrarCreados">No has creado ningún evento.</p>
 <hr *ngIf="mostrarParticipo && mostrarCreados"/>
+<h2 *ngIf="mostrarParticipo">Eventos apuntados</h2>
 <div class="contenedor-eventos apuntados" *ngIf="mostrarParticipo && mostrarP">
     <div class="evento" *ngFor="let eventoParticipo of eventosParticipo">
         <div class="imagen-evento"  [ngStyle]="{'background-image': 'url(' + 'http://localhost/proyecto/badajozUnida/php/eventos/imagenes/'+eventoParticipo.imagen + ')'}"></div>
@@ -31,7 +34,7 @@ <h2>{{eventoParticipo.titulo}}</h2>
             <span><strong>Nº asistentes: </strong>{{eventoParticipo.numParticipantes}}</span>
             <span><strong>{{eventoParticipo.nombreSubcategoria}}</strong></span>
         </div>
-        <button (click)="preguntaBorrado(eventoParticipo.idEvento,eventoParticipo.imange,2)"><i class="bi bi-dash-circle-fill"></i></button>
+        <button (click)="preguntaBorrado(eventoParticipo.idEvento,eventoParticipo.imange,2)">Desapuntarme <i class="bi bi-dash-circle-fill"></i></button>
     </div>
 </div>
 <p *ngIf="!mostrarP && mostrarParticipo">No participas en ningún evento.</p>

src/app/components/share/menu/menu.component.css

@@ -53,6 +53,7 @@ header .account-container>button{
 
 header .account-container>.desplegable{
     position: absolute;
+    z-index: 12;
     top: 60px;
     right: 10px;
     width: fit-content;