diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index d47a628..c59b223 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -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'; @@ -23,6 +25,8 @@ import { AccountSettingsComponent } from './account-settings/account-settings.co Grafica1Component, PagesComponent, AccountSettingsComponent, + PromesasComponent, + RxjsComponent, ], exports: [ DashboardComponent, diff --git a/src/app/pages/pages.routing.ts b/src/app/pages/pages.routing.ts index c054dfa..22395de 100644 --- a/src/app/pages/pages.routing.ts +++ b/src/app/pages/pages.routing.ts @@ -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 { } diff --git a/src/app/pages/promesas/promesas.component.html b/src/app/pages/promesas/promesas.component.html new file mode 100644 index 0000000..7b1b151 --- /dev/null +++ b/src/app/pages/promesas/promesas.component.html @@ -0,0 +1 @@ +

promesas works!

diff --git a/src/app/pages/promesas/promesas.component.ts b/src/app/pages/promesas/promesas.component.ts new file mode 100644 index 0000000..cd2fe07 --- /dev/null +++ b/src/app/pages/promesas/promesas.component.ts @@ -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)); + }); + } + + + + + + + + +} diff --git a/src/app/pages/rxjs/rxjs.component.html b/src/app/pages/rxjs/rxjs.component.html new file mode 100644 index 0000000..cd8ce38 --- /dev/null +++ b/src/app/pages/rxjs/rxjs.component.html @@ -0,0 +1 @@ +

rxjs works!

diff --git a/src/app/pages/rxjs/rxjs.component.ts b/src/app/pages/rxjs/rxjs.component.ts new file mode 100644 index 0000000..c5dc9f3 --- /dev/null +++ b/src/app/pages/rxjs/rxjs.component.ts @@ -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 { + return interval(100) + .pipe( + // take(10), + map(valor => valor + 1), + filter(valor => (valor % 2 === 0) ? true : false), + ); + } + +} diff --git a/src/app/services/sidebar.service.ts b/src/app/services/sidebar.service.ts index 8bef8e5..1cbb6d4 100644 --- a/src/app/services/sidebar.service.ts +++ b/src/app/services/sidebar.service.ts @@ -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' }, ] }, ]; diff --git a/src/app/shared/breadcrumbs/breadcrumbs.component.html b/src/app/shared/breadcrumbs/breadcrumbs.component.html index 1f98182..7d1ddb7 100644 --- a/src/app/shared/breadcrumbs/breadcrumbs.component.html +++ b/src/app/shared/breadcrumbs/breadcrumbs.component.html @@ -2,19 +2,19 @@
-
-

Blank Page

-
-
-
    -
  1. - Home -
    2. -
  2. pages
    3. -
  3. Blank Page
    4. -
-
+
+

{{ titulo }}

+
+
+
    +
  1. + Home +
    2. +
  2. pages
    3. +
  3. Blank Page
    4. +
+
- \ No newline at end of file + diff --git a/src/app/shared/breadcrumbs/breadcrumbs.component.ts b/src/app/shared/breadcrumbs/breadcrumbs.component.ts index 6b05d79..b5f7ce9 100644 --- a/src/app/shared/breadcrumbs/breadcrumbs.component.ts +++ b/src/app/shared/breadcrumbs/breadcrumbs.component.ts @@ -1,4 +1,7 @@ -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', @@ -6,11 +9,31 @@ import { Component, OnInit } from '@angular/core'; 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), + ); } } diff --git a/src/app/shared/sidebar/sidebar.component.html b/src/app/shared/sidebar/sidebar.component.html index 270061d..cb5b3b8 100644 --- a/src/app/shared/sidebar/sidebar.component.html +++ b/src/app/shared/sidebar/sidebar.component.html @@ -2,48 +2,50 @@ - \ No newline at end of file + diff --git a/src/assets/js/custom.js b/src/assets/js/custom.js index e2da07c..859dcb7 100644 --- a/src/assets/js/custom.js +++ b/src/assets/js/custom.js @@ -14,9 +14,9 @@ const customInitFunctions = () => { jQuery(document).on('click', '.mega-dropdown', function(e) { e.stopPropagation() }); - // ============================================================== + // ============================================================== // This is for the top header part and sidebar part - // ============================================================== + // ============================================================== var set = function() { var width = (window.innerWidth > 0) ? window.innerWidth : this.screen.width; var topOffset = 0; @@ -28,121 +28,104 @@ const customInitFunctions = () => { $("body").removeClass("mini-sidebar"); $('.navbar-brand span').show(); } - + var height = ((window.innerHeight > 0) ? window.innerHeight : this.screen.height) - 1; height = height - topOffset; if (height < 1) height = 1; if (height > topOffset) { $(".page-wrapper").css("min-height", (height) + "px"); } - + }; $(window).ready(set); $(window).on("resize", set); - - // ============================================================== + + // ============================================================== // Theme options - // ============================================================== + // ============================================================== $(".sidebartoggler").on('click', function() { if ($("body").hasClass("mini-sidebar")) { $("body").trigger("resize"); $("body").removeClass("mini-sidebar"); $('.navbar-brand span').show(); - + } else { $("body").trigger("resize"); $("body").addClass("mini-sidebar"); $('.navbar-brand span').hide(); - + } }); - + // this is for close icon when navigation open in mobile view $(".nav-toggler").click(function() { $("body").toggleClass("show-sidebar"); $(".nav-toggler i").toggleClass("ti-menu"); $(".nav-toggler i").addClass("ti-close"); }); - + $(".search-box a, .search-box .app-search .srh-btn").on('click', function() { $(".app-search").toggle(200); }); - // ============================================================== + // ============================================================== // Right sidebar options - // ============================================================== + // ============================================================== $(".right-side-toggle").click(function() { $(".right-sidebar").slideDown(50); $(".right-sidebar").toggleClass("shw-rside"); }); - // ============================================================== + // ============================================================== // This is for the floating labels - // ============================================================== + // ============================================================== $('.floating-labels .form-control').on('focus blur', function(e) { $(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0)); }).trigger('blur'); - - // ============================================================== - // Auto select left navbar - // ============================================================== - $(function() { - var url = window.location; - var element = $('ul#sidebarnav a').filter(function() { - return this.href == url; - }).addClass('active').parent().addClass('active'); - while (true) { - if (element.is('li')) { - element = element.parent().addClass('in').parent().addClass('active'); - } else { - break; - } - } - - }); - // ============================================================== + + // ============================================================== //tooltip - // ============================================================== + // ============================================================== $(function() { $('[data-toggle="tooltip"]').tooltip() }) - // ============================================================== + // ============================================================== //Popover - // ============================================================== + // ============================================================== $(function() { $('[data-toggle="popover"]').popover() }) - // ============================================================== + // ============================================================== // Sidebarmenu - // ============================================================== + // ============================================================== $(function() { $('#sidebarnav').AdminMenu(); }); - - // ============================================================== + + // ============================================================== // Perfact scrollbar - // ============================================================== + // ============================================================== $('.scroll-sidebar, .right-side-panel, .message-center, .right-sidebar').perfectScrollbar(); - - // ============================================================== + + // ============================================================== // Resize all elements - // ============================================================== + // ============================================================== $("body").trigger("resize"); - // ============================================================== + // ============================================================== // To do list - // ============================================================== + // ============================================================== $(".list-task li label").click(function() { $(this).toggleClass("task-done"); }); - - - - // ============================================================== + + + + // ============================================================== // Collapsable cards // ============================================================== $('a[data-action="collapse"]').on('click', function(e) { e.preventDefault(); $(this).closest('.card').find('[data-action="collapse"] i').toggleClass('ti-minus ti-plus'); $(this).closest('.card').children('.card-body').collapse('toggle'); - + }); // Toggle fullscreen $('a[data-action="expand"]').on('click', function(e) { @@ -150,13 +133,13 @@ const customInitFunctions = () => { $(this).closest('.card').find('[data-action="expand"] i').toggleClass('mdi-arrow-expand mdi-arrow-compress'); $(this).closest('.card').toggleClass('card-fullscreen'); }); - + // Close Card $('a[data-action="close"]').on('click', function() { $(this).closest('.card').removeClass().slideUp('fast'); }); - + }); } -customInitFunctions(); \ No newline at end of file +customInitFunctions();