Skip to content

Commit

Permalink
Observables y Promesas
Browse files Browse the repository at this point in the history
  • Loading branch information
leandrotomassini committed Mar 11, 2022
1 parent b5857b4 commit 0f79eec
Show file tree
Hide file tree
Showing 11 changed files with 212 additions and 125 deletions.
4 changes: 4 additions & 0 deletions src/app/pages/pages.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import { ProgressComponent } from './progress/progress.component';
import { Grafica1Component } from './grafica1/grafica1.component';
import { PagesComponent } from './pages.component';
import { AccountSettingsComponent } from './account-settings/account-settings.component';
import { PromesasComponent } from './promesas/promesas.component';
import { RxjsComponent } from './rxjs/rxjs.component';



Expand All @@ -23,6 +25,8 @@ import { AccountSettingsComponent } from './account-settings/account-settings.co
Grafica1Component,
PagesComponent,
AccountSettingsComponent,
PromesasComponent,
RxjsComponent,
],
exports: [
DashboardComponent,
Expand Down
30 changes: 17 additions & 13 deletions src/app/pages/pages.routing.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,28 @@ import { DashboardComponent } from './dashboard/dashboard.component';
import { ProgressComponent } from './progress/progress.component';
import { Grafica1Component } from './grafica1/grafica1.component';
import { AccountSettingsComponent } from './account-settings/account-settings.component';
import { PromesasComponent } from './promesas/promesas.component';
import { RxjsComponent } from './rxjs/rxjs.component';

const routes: Routes = [
{
path: 'dashboard',
component: PagesComponent,
children: [
{ path: '', component: DashboardComponent },
{ path: 'progress', component: ProgressComponent },
{ path: 'grafica1', component: Grafica1Component },
{ path: 'account-settings', component: AccountSettingsComponent },
]
},
{
path: 'dashboard',
component: PagesComponent,
children: [
{ path: '', component: DashboardComponent, data: { titulo: 'Dashboard' } },
{ path: 'progress', component: ProgressComponent, data: { titulo: 'ProgressBar' } },
{ path: 'grafica1', component: Grafica1Component, data: { titulo: 'Gráfica #1' } },
{ path: 'account-settings', component: AccountSettingsComponent, data: { titulo: 'Ajustes de cuenta' } },
{ path: 'promesas', component: PromesasComponent, data: { titulo: 'Promesas' } },
{ path: 'rxjs', component: RxjsComponent, data: { titulo: 'RxJs' } },
]
},
];

@NgModule({
imports: [ RouterModule.forChild(routes) ],
exports: [ RouterModule ]
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class PagesRoutingModule {}
export class PagesRoutingModule { }


1 change: 1 addition & 0 deletions src/app/pages/promesas/promesas.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<p>promesas works!</p>
35 changes: 35 additions & 0 deletions src/app/pages/promesas/promesas.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-promesas',
templateUrl: './promesas.component.html',
styles: [
]
})
export class PromesasComponent implements OnInit {

constructor() { }

ngOnInit(): void {
this.getUsuarios().then(usuarios => {
console.log(usuarios);
});
}


getUsuarios() {
return new Promise(resolve => {
fetch('https://reqres.in/api/users')
.then(resp => resp.json())
.then(body => resolve(body.data));
});
}








}
1 change: 1 addition & 0 deletions src/app/pages/rxjs/rxjs.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<p>rxjs works!</p>
32 changes: 32 additions & 0 deletions src/app/pages/rxjs/rxjs.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Component, OnDestroy } from '@angular/core';
import { Observable, interval, Subscription } from 'rxjs';
import { retry, take, map, filter } from 'rxjs/operators';

@Component({
selector: 'app-rxjs',
templateUrl: './rxjs.component.html',
styles: [
]
})
export class RxjsComponent implements OnDestroy {

public intervalSubs: Subscription;

constructor() {
this.intervalSubs = this.retornaIntervalo().subscribe(console.log);
}

ngOnDestroy() {
this.intervalSubs.unsubscribe();
}

retornaIntervalo(): Observable<number> {
return interval(100)
.pipe(
// take(10),
map(valor => valor + 1),
filter(valor => (valor % 2 === 0) ? true : false),
);
}

}
2 changes: 2 additions & 0 deletions src/app/services/sidebar.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ export class SidebarService {
{ titulo: 'Main', url: '/' },
{ titulo: 'ProgressBar', url: 'progress' },
{ titulo: 'Gráficas', url: 'grafica1' },
{ titulo: 'Promesas', url: 'promesas' },
{ titulo: 'Rxjs', url: 'rxjs' },
]
},
];
Expand Down
26 changes: 13 additions & 13 deletions src/app/shared/breadcrumbs/breadcrumbs.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
<div class="col-md-5 align-self-center">
<h3 class="text-themecolor">Blank Page</h3>
</div>
<div class="col-md-7 align-self-center">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="javascript:void(0)">Home</a>
</li>
<li class="breadcrumb-item">pages</li>
<li class="breadcrumb-item active">Blank Page</li>
</ol>
</div>
<div class="col-md-5 align-self-center">
<h3 class="text-themecolor">{{ titulo }}</h3>
</div>
<div class="col-md-7 align-self-center">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="javascript:void(0)">Home</a>
</li>
<li class="breadcrumb-item">pages</li>
<li class="breadcrumb-item active">Blank Page</li>
</ol>
</div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
31 changes: 27 additions & 4 deletions src/app/shared/breadcrumbs/breadcrumbs.component.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,39 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnDestroy } from '@angular/core';
import { ActivationEnd, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { filter, map } from 'rxjs/operators';

@Component({
selector: 'app-breadcrumbs',
templateUrl: './breadcrumbs.component.html',
styles: [
]
})
export class BreadcrumbsComponent implements OnInit {
export class BreadcrumbsComponent implements OnDestroy {

constructor() { }
public titulo: string = '';
public tituloSubs$: Subscription;

ngOnInit(): void {
constructor(private router: Router) {

this.tituloSubs$ = this.getArgumentosRuta()
.subscribe(({ titulo }) => {
this.titulo = titulo;
document.title = `AdminPro - ${titulo}`;
});
}

ngOnDestroy(): void {
this.tituloSubs$.unsubscribe();
}

getArgumentosRuta() {
return this.router.events
.pipe(
filter(event => event instanceof ActivationEnd),
filter((event: ActivationEnd) => event.snapshot.firstChild == null),
map((event: ActivationEnd) => event.snapshot.data),
);
}

}
82 changes: 42 additions & 40 deletions src/app/shared/sidebar/sidebar.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,50 @@
<!-- Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<aside class="left-sidebar">
<!-- Sidebar scroll-->
<div class="scroll-sidebar">
<!-- Sidebar navigation-->
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li class="user-profile">
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><img src="./assets/images/users/profile.png" alt="user" /><span class="hide-menu">Steave Jobs </span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="javascript:void()">My Profile </a></li>
<li><a href="javascript:void()">My Balance</a></li>
<li><a href="javascript:void()">Inbox</a></li>
<li><a routerLink="account-settings">Account Setting</a></li>
<li><a routerLink="/login">Logout</a></li>
</ul>
</li>
<li class="nav-devider"></li>
<li class="nav-small-cap">PERSONAL</li>
<!-- Sidebar scroll-->
<div class="scroll-sidebar">
<!-- Sidebar navigation-->
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li class="user-profile">
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><img
src="./assets/images/users/profile.png" alt="user" /><span class="hide-menu">Steave Jobs </span></a>
<ul aria-expanded="false" class="collapse">
<li><a href="javascript:void()">My Profile </a></li>
<li><a href="javascript:void()">My Balance</a></li>
<li><a href="javascript:void()">Inbox</a></li>
<li><a routerLink="account-settings">Account Setting</a></li>
<li><a routerLink="/login">Logout</a></li>
</ul>
</li>
<li class="nav-devider"></li>
<li class="nav-small-cap">PERSONAL</li>

<li *ngFor="let item of menuItems">
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false">
<i class="mdi mdi-gauge"></i>
<span class="hide-menu">
{{ item.titulo }}
<span class="label label-rouded label-themecolor pull-right">
{{ item.submenu.length }}
</span>
</span>
</a>
<li *ngFor="let item of menuItems">
<a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false">
<i class="mdi mdi-gauge"></i>
<span class="hide-menu">
{{ item.titulo }}
<span class="label label-rouded label-themecolor pull-right">
{{ item.submenu.length }}
</span>
</span>
</a>

<ul aria-expanded="false" class="collapse">
<li *ngFor="let subMenuItem of item.submenu">
<a [routerLink]="subMenuItem.url"> {{ subMenuItem.titulo }} </a>
</li>
</ul>
</li>

</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
<ul aria-expanded="false" class="collapse">
<li *ngFor="let subMenuItem of item.submenu">
<a [routerLink]="subMenuItem.url" routerLinkActive="active" routerLink="{ exact:true }"> {{
subMenuItem.titulo }} </a>
</li>
</ul>
</li>

</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<!-- ============================================================== -->
<!-- End Left Sidebar - style you can find in sidebar.scss -->
<!-- ============================================================== -->
<!-- ============================================================== -->
Loading

0 comments on commit 0f79eec

Please sign in to comment.