fix-lab documentation
  1. Components
  2. NotifyComponent

File

src/app/components/notify/notify.component.ts

Description

Muestra si han recibido respuestas en publicaciones del usuario.

Implements

OnInit

Metadata

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

Index

Properties
Methods

Methods

getAnswers
getAnswers()
Defined in src/app/components/notify/notify.component.ts:37

Obtiene todas las respuestas.

Returns : any
getPosts
getPosts()
Defined in src/app/components/notify/notify.component.ts:50

Obtiene todas las publicaciones.

Returns : void
ngOnInit
ngOnInit()
Defined in src/app/components/notify/notify.component.ts:59

Obtiene todas las respuestas y publicaciones al inicio.

Returns : void

Properties

aanswers
Type : Answers[]
Defined in src/app/components/notify/notify.component.ts:24

Arreglo de respuestas.
pposts
Type : Posts[]
Defined in src/app/components/notify/notify.component.ts:28

Arreglo de respuestas.

 
import { Component, OnInit } from '@angular/core';
import {AuthenticationService} from '../../auth/authentication.service';
import {PostsService} from '../../services/posts.service';
import {AnswersService} from '../../services/answers.service';
import { Router } from "@angular/router";
import { Posts } from '../../../models/posts';
import { Customers } from '../../../models/customers';
import { Answers } from '../../../models/answers';
import { ToastrService } from 'ngx-toastr';

/**
*Muestra si han recibido respuestas en publicaciones del usuario.
*/  
@Component({
  selector: 'app-notify',
  templateUrl: './notify.component.html',
  styleUrls: ['../home/home.component.css']
})
export class NotifyComponent implements OnInit {

  /**
  *Arreglo de respuestas.
  */
	aanswers: Answers[];
  /**
  *Arreglo de respuestas.
  */  
	pposts: Posts[];
  /**
  *@ignore
  */
  constructor(private router: Router, private posts: PostsService, private answers: AnswersService, private auth: AuthenticationService, private toastr: ToastrService) { }

  /**
  *Obtiene todas las respuestas.
  */
  getAnswers()
  {
    return this.answers.getAnswers()
      .subscribe(
          answers => {
            this.aanswers = answers
          }
  )   
  }

  /**
  *Obtiene todas las publicaciones.
  */
  getPosts()
  {
    const id = this.auth.getUserDetails().id_user;
    this.posts.getpostsOwner(id).subscribe(pposts => this.pposts = pposts);
  }

  /**
  *Obtiene todas las respuestas y publicaciones al inicio.
  */
  ngOnInit() {
  	this.getPosts();
  	this.getAnswers();
  }

}

<div *ngFor="let post of pposts">
	<div *ngFor="let answer of aanswers">
		<div *ngIf="(post.id_owner == this.auth.getUserDetails().id_user)">
			<div class="container-fluid"> 
				<div class="notice notice-success notice-lg">
				<i class="fas fa-info-circle fa-2x info"></i>&nbsp;Tienes una nueva respuesta en: 
				<strong>{{post.title}}</strong>
				</div>
			</div>
		</div>		
	</div>	
</div>

../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 ""