fix-lab documentation
  1. Components
  2. DiscoverComponent

File

src/app/components/discover/discover.component.ts

Description

Muestra todas las publicaciones de los demás usuarios para poder responder a las mismas.

Implements

OnInit

Metadata

selector app-discover
styleUrls ../home/home.component.css
templateUrl ./discover.component.html

Index

Properties
Methods

Methods

addreply
addreply(form: NgForm)
Defined in src/app/components/discover/discover.component.ts:177

Responde a una publicación.

Parameters :
Name Type Optional
form NgForm No
Returns : void
getAll
getAll()
Defined in src/app/components/discover/discover.component.ts:145

Para no aplicar filtros.

Returns : void
getConsoles
getConsoles()
Defined in src/app/components/discover/discover.component.ts:119

Para filtrar por la categoría de Consolas.

Returns : void
getOthers
getOthers()
Defined in src/app/components/discover/discover.component.ts:132

Para filtrar por la categoría de Otros.

Returns : void
getPcs
getPcs()
Defined in src/app/components/discover/discover.component.ts:106

Para filtrar por la categoría de PC's/Laptops.

Returns : void
getPhones
getPhones()
Defined in src/app/components/discover/discover.component.ts:93

Para filtrar por la categoría de Teléfonos.

Returns : void
getPosts
getPosts()
Defined in src/app/components/discover/discover.component.ts:81

Devuelve todas las publicaciones de los usuarios.

Returns : any
ngOnInit
ngOnInit()
Defined in src/app/components/discover/discover.component.ts:216

Para obtener todas las publicaciones de usuario al inicio.

Returns : void
reply
reply(template: TemplateRef, replyPost: Posts)
Defined in src/app/components/discover/discover.component.ts:158

Ventana de modal para responder una publicación.

Parameters :
Name Type Optional
template TemplateRef<any> No
replyPost Posts No
Returns : void

Properties

pposts
Type : Posts[]
Defined in src/app/components/discover/discover.component.ts:29

Arreglo de publicaciones de usuario.
uuser
Type : Customers[]
Defined in src/app/components/discover/discover.component.ts:33

Arreglo de usuarios.

 
import { Component, OnInit, TemplateRef } from '@angular/core';
import {AuthenticationService} from '../../auth/authentication.service';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { FormGroup,  FormBuilder,  Validators } from '@angular/forms';
import {PostsService} from '../../services/posts.service';
import {AnswersService} from '../../services/answers.service';
import { NgForm } from '@angular/forms';
import { Router } from "@angular/router";
import { Posts } from '../../../models/posts';
import { Customers } from '../../../models/customers';
import { Answers } from '../../../models/answers';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';

/**
* Muestra todas las publicaciones de los demás usuarios para poder responder a las mismas.
*/
@Component({
  selector: 'app-discover',
  templateUrl: './discover.component.html',
  styleUrls: ['../home/home.component.css']
})

export class DiscoverComponent implements OnInit {

/**
*Arreglo de publicaciones de usuario.
*/
pposts: Posts[];
/**
*Arreglo de usuarios.
*/
uuser: Customers[];
/**
*@ignore
*/
newAnswer: Answers = new Answers();
/**
*@ignore
*/
selectedPost: Posts;
/**
*@ignore
*/
phone: boolean = false;
/**
*@ignore
*/
pc: boolean = false;
/**
*@ignore
*/
console: boolean = false;
/**
*@ignore
*/
other: boolean = false;
/**
*@ignore
*/
textValue;
/**
*@ignore
*/
priceValue;
/**
*@ignore
*/
modalRef1: BsModalRef;

  /**
  *@ignore
  */
  constructor(private modalService: BsModalService, private router: Router, private posts: PostsService, private answers: AnswersService, private auth: AuthenticationService, private http: HttpClient, private toastr: ToastrService) 
  { 
  
  }
  /**
  *Devuelve todas las publicaciones de los usuarios.
  */
  getPosts() 
  {
    return this.posts.getposts(this.phone, this.pc, this.console, this.other)
      .subscribe(
          pposts => {
            this.pposts = pposts;
          })
  }; 

  /**
  *Para filtrar por la categoría de Teléfonos.
  */
  getPhones()
  {
    this.toastr.info('Se muestran las etiquetas de la categoría: Teléfonos y Tablets');
    this.phone=true;
    this.pc=false;
    this.console=false;
    this.other=false;
    this.ngOnInit();
  }

  /**
  *Para filtrar por la categoría de PC's/Laptops.
  */
  getPcs()
  {
    this.toastr.info('Se muestran las etiquetas de la categoría: PCs y Laptops');
    this.phone=false;
    this.pc=true;
    this.console=false;
    this.other=false;
    this.ngOnInit();
  }

  /**
  *Para filtrar por la categoría de Consolas.
  */
  getConsoles()
  {
    this.toastr.info('Se muestran las etiquetas de la categoría: Consolas');
    this.phone=false;
    this.pc=false;
    this.console=true;
    this.other=false;
    this.ngOnInit();
  }

  /**
  *Para filtrar por la categoría de Otros.
  */
  getOthers()
  {
    this.toastr.info('Se muestran las etiquetas de la categoría: Otros');
    this.phone=false;
    this.pc=false;
    this.console=false;
    this.other=true;
    this.ngOnInit();
  }

  /**
  *Para no aplicar filtros.
  */
  getAll()
  {
    this.toastr.info('Se muestran las etiquetas de todas las categoría');
    this.phone=false;
    this.pc=false;
    this.console=false;
    this.other=false;
    this.ngOnInit();
  }        

  /**
  *Ventana de modal para responder una publicación.
  */
  reply(template: TemplateRef<any>, replyPost: Posts) 
  {
    this.selectedPost = replyPost;

    this.newAnswer.id_answer= 0;
    this.newAnswer.text="";
    this.newAnswer.price=0;
    this.newAnswer.unlocked = false;
    this.newAnswer.valorated = false;
    this.newAnswer.id_owner= this.auth.getUserDetails().id_user;
    this.newAnswer.id_inpost = this.selectedPost.id_post;
  
    this.modalRef1 = this.modalService.show(template);
    this.modalRef1.hide();
  }

  /**
  *Responde a una publicación.
  */
  addreply(form: NgForm)
  {
    if(form.value.text === "")
    {
      this.toastr.warning('Debe añadirse texto a la respuesta');
      return;
    }
    else if(form.value.price <= 0)
    {
      this.toastr.warning('Debe añadirse un precio mayor a la respuesta');
      return;
    }
    else 
    {
      var newAnswer = {
        id_answer: 0,
        text: form.value.text,
        price : form.value.price,
        unlocked: false,
        valorated: false,
        id_owner : this.auth.getUserDetails().id_user,
        id_inpost: this.selectedPost.id_post        
      };
    }

    this.answers.addreply(this.newAnswer).subscribe(
      () => {
        this.toastr.success('Respuesta publicada exitosamente');
      },
      err => {
        this.toastr.error('Error al crear respuesta');
      }
    );
    this.modalRef1.hide();    
  }

  /**
  *Para obtener todas las publicaciones de usuario al inicio.
  */
  ngOnInit() 
  {
    this.getPosts();

  }

}

<!--Visualización de tarjetas-->
<div class="container-fluid text-center">
	<div class="btn-group mr-2" role="group" aria-label="Filter of posts">
	    <button type="button" class="btn btn-info" (click)="this.getPhones()">
        	<b>Teléfonos/Tablet&nbsp;</b>
        	<i class="fas fa-mobile-alt"></i>   
    	</button>
	    <button type="button" class="btn btn-danger" (click)="this.getPcs()">
	        <b>PC/Laptop&nbsp;</b>
	        <i class="fas fa-laptop"></i>   
	    </button>    	    	    
	 </div>
	 <br><br>
	<div class="btn-group mr-2" role="group" aria-label="Filter of posts">
	    <button type="button" class="btn btn-info" (click)="this.getConsoles()">
	        <b>Consolas&nbsp;</b>
	        <i class="fas fa-gamepad"></i>
	    </button>
	    <button type="button" class="btn btn-danger" (click)="this.getOthers()">
	        <b>Otros&nbsp;</b>
	        <i class="fas fa-microchip"></i>   
	    </button>
	    <button type="button" class="btn btn-info" (click)="this.getAll()">
	        <b>Sin Filtro&nbsp;</b>
	        <i class="fas fa-ban"></i>   
	    </button>   	    	    	    
	 </div> 	  
</div>
<br>

<!--Opciones de Filtro-->
<div class="container-fluid" *ngFor="let post of pposts">	
	<div *ngIf="(!this.phone)&&(!this.console)&&(!this.pc)&&(!this.other)">
		<div *ngIf="(post.id_owner != this.auth.getUserDetails().id_user)&&(!post.resolved)">
			<div class="notice notice-info notice-lg">
	        	<strong>{{post.title}}</strong>&nbsp;
	        	<div class="text-right">
	        		<small>
	        			<b>Publicado el {{post.publish_date}}</b>&nbsp;
	        		</small>
	        	</div>	
		    	<hr>
		    	<br>
		    	<img *ngIf="post.image==''" src="/assets/images/no-image.png" class="img-fluid avatar">
		        <img *ngIf="post.image!=''" src={{post.image}} class="img-fluid avatar">
		    	<br>
		    	<p>{{ post.description }}</p>
		    	<div class="text-right">
					&nbsp;
					<button type="button" class="btn btn-primary btn-modify" (click)="reply(template1, post)"
					   tooltip="Responder" placement="bottom">
				      	<i class="fas fa-reply"></i>
				  	</button>
				  	&nbsp;
		    	</div>
			</div>
		</div>
	</div>

	<div *ngIf="this.phone">
		<div *ngIf="(post.id_owner != this.auth.getUserDetails().id_user) && (post.categoria=='Telefono')
		&&(!post.resolved)">
			<div class="notice notice-info notice-lg">
		    	<strong>{{post.title}}</strong>
		    	<hr>
		    	<br>
		    	<img *ngIf="post.image==''" src="/assets/images/no-image.png" class="img-fluid avatar">
		        <img *ngIf="post.image!=''" src={{post.image}} class="img-fluid avatar">
		    	<br>
		    	<p>{{ post.description }}</p>
		    	<div class="text-right">
					&nbsp;
					<button type="button" class="btn btn-primary btn-modify" (click)="reply(template1, post)"
					   tooltip="Responder" placement="bottom">
				      	<i class="fas fa-reply"></i>
				  	</button>
				  	&nbsp;
		    	</div>
			</div>
		</div>
	</div>	
	<div *ngIf="this.console">
		<div *ngIf="(post.id_owner != this.auth.getUserDetails().id_user) && (post.categoria=='Consola')
		&&(!post.resolved)">
			<div class="notice notice-info notice-lg">
		    	<strong>{{post.title}}</strong>
		    	<hr>
		    	<br>
		    	<img *ngIf="post.image==''" src="/assets/images/no-image.png" class="img-fluid avatar">
		        <img *ngIf="post.image!=''" src={{post.image}} class="img-fluid avatar">
		    	<br>
		    	<p>{{ post.description }}</p>
		    	<div class="text-right">
					&nbsp;
					<button type="button" class="btn btn-primary btn-modify" (click)="reply(template1, post)"
					   tooltip="Responder" placement="bottom">
				      	<i class="fas fa-reply"></i>
				  	</button>
				  	&nbsp;
		    	</div>
			</div>
		</div>
	</div>
	<div *ngIf="this.pc">
		<div *ngIf="(post.id_owner != this.auth.getUserDetails().id_user) && (post.categoria=='PC')
		&&(!post.resolved)">
			<div class="notice notice-info notice-lg">
		    	<strong>{{post.title}}</strong>
		    	<hr>
		    	<br>
		    	<img *ngIf="post.image==''" src="/assets/images/no-image.png" class="img-fluid avatar">
		        <img *ngIf="post.image!=''" src={{post.image}} class="img-fluid avatar">
		    	<br>
		    	<p>{{ post.description }}</p>
		    	<div class="text-right">
					&nbsp;
					<button type="button" class="btn btn-primary btn-modify" (click)="reply(template1, post)"
					   tooltip="Responder" placement="bottom">
				      	<i class="fas fa-reply"></i>
				  	</button>
				  	&nbsp;
		    	</div>
			</div>
		</div>
	</div>
	<div *ngIf="this.other">
		<div *ngIf="(post.id_owner != this.auth.getUserDetails().id_user) && (post.categoria=='Otros')
		&&(!post.resolved)">
			<div class="notice notice-info notice-lg">
		    	<strong>{{post.title}}</strong>
		    	<hr>
		    	<br>
		    	<img *ngIf="post.image==''" src="/assets/images/no-image.png" class="img-fluid avatar">
		        <img *ngIf="post.image!=''" src={{post.image}} class="img-fluid avatar">
		    	<br>
		    	<p>{{ post.description }}</p>
		    	<div class="text-right">
					&nbsp;
					<button type="button" class="btn btn-primary btn-modify" (click)="reply(template1, post)"
					   tooltip="Responder" placement="bottom">
				      	<i class="fas fa-reply"></i>
				  	</button>
				  	&nbsp;
		    	</div>
			</div>
		</div>
	</div>								
</div>

<!--Modal para responder a una publicación-->
<ng-template #template1>
	<div class="modal-header">
	    <h4 class="modal-title pull-left">Crear nueva publicación</h4>
	    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef1.hide()">
	      <span aria-hidden="true">&times;</span>
	    </button>
	</div>

	<div class="modal-body">
		<div class="container text-center">	
			<div class="tab-content">
												
				<form #f="ngForm" novalidate="" method="POST">
					
					<div class="form-group">
						<div class="col-xs-6">
								<label for="name"><h4>Escribe tu respuesta</h4></label>
								<textarea type="text"  name="text" class="form-control"  placeholder="Tu respuesta..." [(ngModel)]="newAnswer.text">	
								</textarea>
						</div>
					</div>
					<div class="form-group">
						<div class="col-xs-6">
								<label for="descripcion"><h4>Precio</h4></label><br>
								<input type="number" name="price" placeholder="0.00$" [(ngModel)]="newAnswer.price">
						</div>
					</div>
					<hr>

					<div class="text-center">
						<button class="btn btn-primary" value="POST" (click)="addreply(f)" type="submit">Publicar respuesta
							<i class="fas fa-pencil-alt"></i>
						</button>
						<br><br>
						<button class="btn btn-cancelar btn-danger" (click)="modalRef1.hide()">Cancelar
							<i class="far fa-times-circle"></i>
						</button>
					</div>
				</form>
			</div>
		</div>		
	</div>

</ng-template>

../home/home.component.css 

.btn-create, .btn-modify, .btn-delete, .btn-answer, .btn-sad
{
	border-radius: 60%;
	-webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
    box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}

.btn-unlock
{
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
    box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);    
}

.notice {
    padding: 15px;
    background-color: #fafafa;
    border-left: 6px solid #7f7f84;
    margin-bottom: 10px;
    -webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
       -moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
            box-shadow: #202123;
}

.notice-lg {
    padding: 35px;
    font-size: large;
}

.notice-md {
    padding: 25px;
    font-size: medium;
}

.notice-success {
    border-color: #80D651;
}
.notice-success>strong {
    color: #80D651;
}
.notice-info {
    /*border-color: #45ABCD;*/
    border-color: #ac45cd;
}
.notice-info>strong {
    /*color: #45ABCD;*/
    color: #ac45cd;
}

.modal-header
{
    background: #834d9b;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #d04ed6, #834d9b);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #d04ed6, #834d9b);
    color: white;
}

.hidden 
{  
    display: none;
}

hr 
{
    background-color: azure;
}

.row 
{
    padding: 20px;
}

/*Prop. para imágenes*/

.img-content {
    display: block;
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
}

.img-content-user {
    display: block;
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
}

.avatar
{
    display: block;
    width: 500px;
    height: 480px;
    margin-left: auto;
    margin-right: auto;    
}

.modal-body
{
    color: #151515;
}

.info
{
    color: #80D651;   
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""