merge eventos

naopeke · Apr 4, 2024 · 6e0af41 · 6e0af41
2 parents 9a6ee84 + 8803c6d
commit 6e0af41
Show file tree

Hide file tree

Showing 10 changed files with 197 additions and 65 deletions.
diff --git a/git checkout eventos3 b/git checkout eventos3
@@ -0,0 +1,7 @@
+  comp_carta[m
+  eventos[m
+  eventos2[m
+  eventos3[m
+  footer[m
+  header[m
+* [32mmaster[m
diff --git a/src/app/components/add-event/add-event.component.css b/src/app/components/add-event/add-event.component.css
@@ -1,7 +1,7 @@
 section{
     position: absolute;
-    top: 300px;
-    left: 700px;
+    top: 20%;
+    left: 35%;
     z-index: 30;
 }
 .modalEdit{
@@ -83,4 +83,10 @@ input::placeholder, textarea::placeholder{
 
 .buttonEditar:hover, .saveButton:hover{
     background-color: var(--blanco);
-}
+}
+
+@media (max-width: 1200px) {
+    section{
+        left: 27%;
+    }
+}
diff --git a/src/app/components/detail-event/detail-event.component.ts b/src/app/components/detail-event/detail-event.component.ts
@@ -27,24 +27,60 @@ export class DetailEventComponent implements OnInit{
 
 
   ngOnInit() {
-    this.getparticipantes();    
+    this.getParticipantes();
   }
 
-  getparticipantes(){
-    this.eventoService.getParticipantes(this.evento.id_event).subscribe((res:any) => {
-      if(!res.error){
-        this.evento.participants = [];
-        res.data.forEach(evento => {
-          console.log(res.data);
-
-          if(evento.creatorEvent == 1){
-            this.evento.creator = evento.nameUser
-          } else {
-            this.evento.participants.push(new User(evento.id_user, evento.nameUser))
-          }
-        });
-      } 
-    })
+  getParticipantes() {
+    this.eventoService.getParticipantes(this.evento.id_event).subscribe((res: any) => {
+        if (!res.error) {
+            this.evento.participants = [];
+            res.data.forEach(evento => {
+                if (evento.creatorEvent === 1) {
+                    this.evento.creator = evento.nameUser;
+                } else {
+                    this.evento.participants.push(new User(evento.id_user, evento.nameUser));
+                }
+            });
+            // Call comprobarParticipacion() here after participants are populated
+            this.comprobarParticipacion();
+        } else {
+            // Handle errors appropriately (e.g., console.error(res.error))
+        }
+    });
+}
+
+  comprobarParticipacion(){
+
+    let encontrado = false;
+
+    if(this.evento != null && this.evento.participants != null && this.evento.participants.length > 0){
+
+      for(let i = 0; i < this.evento.participants.length; i++){
+        console.log(this.evento.participants[i].id_user);
+        console.log(this.user.id_user);
+
+
+        if(this.evento.participants[i].id_user == this.user.id_user){
+
+          encontrado = true;
+          break;
+        }
+      }
+    }
+
+
+    if(encontrado){
+      this.type = 1;
+    }else{
+      if(this.evento.id_user == this.user.id_user)
+      {
+      console.log("SOY EL CREADOR");
+      this.type = 3;
+      }else{
+        this.type = 2;
+      }
+    }
+
   }
 
   closeDetail(){
@@ -56,7 +92,7 @@ export class DetailEventComponent implements OnInit{
       if(!res.error){
         this.toastr.success(res.mensaje, '¡Bienvenido al evento!');
         this.evento.participants = [];
-        this.getparticipantes(); 
+        this.getParticipantes(); 
       } else{
         this.toastr.error(res.mensaje, '¡Ups!' )
       }
@@ -68,13 +104,13 @@ export class DetailEventComponent implements OnInit{
     this.eventoService.deleteParticipacion(this.user.id_user, this.evento.id_event).subscribe((res:any) =>{
       if(!res.error){
         this.toastr.success(res.mensaje, 'Éxito')
-        this.getparticipantes(); 
+        this.getParticipantes(); 
       }
     })
   }
   eliminar(){
     this.openDelete = true
-    this.getparticipantes(); 
+    this.getParticipantes(); 
   }
 
   editar() {

diff --git a/src/app/components/edit-event/edit-event.component.css b/src/app/components/edit-event/edit-event.component.css
@@ -1,7 +1,8 @@
 main{
     position: absolute;
-    top: 300px;
-    left: 700px;
+    top: 20%;
+    left: 35%;
+    /* z-index: 30; */
 }
 .modalEdit{
     width: 500px;
@@ -10,15 +11,13 @@ main{
     background-size: cover;
     border-radius: var(--borde-cuadrado);
     border: solid var(--amarillo) 1px;
-
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 30px;
 }
 
-
 .titulo{
     color: var(--amarillo);
     font-family: var(--antiqua);
@@ -84,4 +83,10 @@ input::placeholder, textarea::placeholder{
 
 .buttonEditar:hover, .saveButton:hover{
     background-color: var(--blanco);
+}
+
+@media (max-width: 1200px) {
+    main{
+        left: 27%;
+    }
 }
diff --git a/src/app/components/header/header.component.css b/src/app/components/header/header.component.css
@@ -1,7 +1,5 @@
 header{
     font-family: var(--antiqua)!important;
-}
-header{
     background-color: black;
     text-align: center;
     height: 200px;
@@ -54,7 +52,6 @@ img{
 }
 
 /* CSS ANIMACION */
-
 .icono {
     width: 50px;
     height: 50px;
@@ -96,11 +93,11 @@ header nav ul li:hover .children {
 	display:block;
 }
 header nav ul li .children {
-	display: none;
+    display: none;
 	background:#000000;
 	position: absolute;
-    left: 20px;
-	width: 150px;
+    left: 15%;
+	width: 200px;
 	z-index:1000;
 }
 header nav ul li .children li {
@@ -151,4 +148,18 @@ header nav ul li .children li a {
     .button_lateral{
         width: auto;
     }
-  }
+  }
+@media (max-width: 1200px) {
+    header nav ul li .children {
+        left: 13%;
+        width: 150px;
+
+    }
+}
+
+@media (max-width: 900px) {
+    header nav ul li .children {
+        left: 13%;
+        width: 120px;
+    }
+}
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -51,8 +51,8 @@
                     <p class="pVerde">Eventos</p>
                 </a>
                 <ul class="children">
-                    <li><a href="#" routerLink="evento"><p class="pVerde">Próximos eventos</p></a></li>
-                    <li><a href="#" routerLink="calendario"><p class="pVerde">Calendario</p></a></li>
+                    <li><a routerLink="evento"><p class="pVerde">Próximos eventos</p></a></li>
+                    <li><a routerLink="calendario"><p class="pVerde">Calendario</p></a></li>
                 </ul>
             </li>
         </ul>

diff --git a/src/app/pages/evento/evento.component.css b/src/app/pages/evento/evento.component.css
@@ -66,7 +66,7 @@
     text-align: center;
     padding-top: 27px;
     padding-bottom: 10px;
-    size: 20px;
+    font-size: 20px;
   }
   #contenedor_info{
     display: flex;
@@ -79,7 +79,6 @@
     position: relative; /*padre de marco-container*/
   }
   .marco-container{
-    position:absolute;
     bottom: 13px;
     position: relative;
     width: 192px; /* mismo como marco*/
@@ -98,6 +97,7 @@
     width: 100%;
     height: auto;
     z-index: 999;
+    margin-top: 30px;
   }
   .nameuser {
     position: absolute;
@@ -148,7 +148,7 @@
     font-size: 18px;
   }
   #button_sabermas{
-    position: absolute; /*!hijo de #div_info_evento*/
+    /* position: absolute; !hijo de #div_info_evento */
     bottom: -38px;
     right: 40px;
     height: 40px;
@@ -195,6 +195,7 @@
   #img_superior{
     margin-top: 15px;
   }
+
 /* fin iconos */
 
 /* pagination */
@@ -233,21 +234,67 @@
   z-index: 999;
 }
 
+@media (max-width: 1200px) {
+  #img_evento {
+    width: 70%; /* Ajusta el tamaño según tu diseño */
+  }
+  #img_superior, #img_inferior{
+    width:30px
+  }
+}
+
 @media (max-width: 768px) {
   #img_evento {
     width: 80%; /* Ajusta el tamaño según tu diseño */
   }
   #img_superior, #img_inferior{
     width:5px
   }
+  h1{
+    font-size: 15px;
+  }
 }
-@media (max-width: 1200px) {
+@media (max-width: 1328px) {
   #img_evento {
     width: 70%; /* Ajusta el tamaño según tu diseño */
   }
   #img_superior, #img_inferior{
     width:30px
   }
+  h1{
+    font-size: 30px;
+  }
+  h2{
+    font-size: 20px;
+  }
+  #button_sabermas, .p_pagiantion{
+    font-size: 15px;
+  }
+}
+
+@media (max-width: 1140px) {
+  h1{
+    font-size: 27px;
+  }
+  h2{
+    font-size: 18px;
+  }
+  #button_sabermas, .p_pagiantion, .paginationSpan{
+    font-size: 12px;
+  }
+  .icono_evento{
+    width: 20px;
+    margin-left: 20px;
+  }
+  .marco{
+    margin-top: 20px;
+    margin-left: 10px;
+  }
+  .btnBuscador {
+
+    background-size: 40px;
+
+  }
 }
 
 
diff --git a/src/app/pages/evento/evento.component.html b/src/app/pages/evento/evento.component.html
@@ -5,7 +5,7 @@
             <input type="text" id="buscador" name="buscador" placeholder="Buscar" size="10" #buscador/>
             <select name="filtrar" id="filtrar" #filtroEventos>
                 <option value="todos">Todos los eventos</option>
-                <option value="misEventos">Mis eventos</option>
+                <option value="misEventos">Eventos creados</option>
             </select>
             <button type="submit" class="btn-buscador btnBuscador" (click)="filtroEventos.value == 'todos' ? findEventsWithNameAllEvents(buscador.value): findEventsWithNameMyEvents(buscador.value)"></button>
         </form>
@@ -41,27 +41,27 @@ <h2 class="nameuser">{{ item.creator.nameUser }}</h2> -->
                     <img class="icono_evento" src="../../../assets/images/iconos/lugar_evento.png" width="28px">
                     <p>&nbsp;&nbsp;{{ item.place }}   ,   {{ item.direction }}</p>
                 </div> 
+
                 <div>
                     <button id="button_sabermas" (click)="openModalDetail(item)">Saber más</button>
                 </div> 
 
             </div>
 
-            <div id="icono_elim_edit" *ngIf="item.creator.id_user === id_logueado">
+           <div id="icono_elim_edit" *ngIf="item.creator.id_user === id_logueado.id_user">
                 <img (click)="openModalEdit(item)" id="img_superior" src="../../../assets/images/iconos/editar_evento.png" width="45px">
                 <img (click)="openModalDeleteEvent(item)" data-bs-toggle="modal" data-bs-target="#deleteEvent" id="img_inferior"src="../../../assets/images/iconos/eliminar_evento.png" width="45px">
             </div>
-        </div>
-    </div>
 
-    <div>
+        </div> 
         <!--MODAL edit--><div *ngIf="modalEdit == true" class="modalEdit"><app-edit-event [evento] = "evento" (eventClose) = closeModal($event)></app-edit-event></div>
         <!-- MODAL delete--> <app-delete-event *ngIf="getModalDeleteEvent()" [eventoAEliminar]="eventoABorrar" ></app-delete-event>
         <div *ngIf="modalDetail == true" class="modalEvent">
-            <app-detail-event [evento] = "selectEvento"  (eventCloseDetail) = closeModalSaberMas($event) [type]=2 [user]="id_logueado" [typeEdit] = 2></app-detail-event>
+            <app-detail-event [evento] = "selectEvento"  (eventCloseDetail) = closeModalSaberMas($event) [type]= type [user]="id_logueado"></app-detail-event>
+
         </div>
-       
-    </div> 
+    </div>
+
 
     <!-- Pagination -->
     <div class="pagination" *ngIf="totalPages > 1">