Modulo de servicios

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { SettingsService } from './services/service.index';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +8,8 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'app';
+
+  constructor(public _ajustesSetting: SettingsService) {
+
+  }
 }

src/app/app.module.ts

@@ -9,10 +9,15 @@ import { PagesModule } from './pages/pages.module';
 //Rutas
 import { APP_ROUTES } from './app.routes';
 
+// Servicios
+//import { SettingsService } from './services/settings/settings.service';
+import { ServiceModule } from './services/service.module';
+
 import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './login/register.component';
 
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -23,7 +28,8 @@ import { RegisterComponent } from './login/register.component';
     BrowserModule,
     APP_ROUTES,
     PagesModule,
-    FormsModule
+    FormsModule,
+    ServiceModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/login/login.component.html

@@ -4,7 +4,7 @@
 <section id="wrapper" class="login-register login-sidebar" style="background-image:url(../assets/images/background/login-register.jpg);">
   <div class="login-box card">
       <div class="card-body">
-          <form class="form-horizontal form-material" id="loginform" action="index.html">
+          <form class="form-horizontal form-material" id="loginform" action="index.html" (ngSubmit)="ingresar()">
               <a href="javascript:void(0)" class="text-center db"><img src="../assets/images/logo-icon.png" alt="Home" /><br/><img src="../assets/images/logo-text.png" alt="Home" /></a>
               <div class="form-group m-t-40">
                   <div class="col-xs-12">

src/app/login/login.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+declare function init_plugins_jquery();
 
 @Component({
   selector: 'app-login',
@@ -7,9 +10,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+  constructor(public router: Router) { }
 
   ngOnInit() {
+    init_plugins_jquery();
+  }
+
+  ingresar() {
+    console.log('aqiu');
+    this.router.navigate(['/dashboard']);
   }
 
 }

src/app/pages/account-settings/account-settings.component.html

@@ -0,0 +1,30 @@
+<div class="row">
+  <div class="col-6">
+    <div class="card">
+      <div class="card-body">
+        <h4 clas="card-title">Temas</h4>
+        <hr>
+        <div class="r-panel-body">
+          <ul id="themecolors" class="m-t-20">
+              <li><b>Con el sidebar claro</b></li>
+              <li><a #link1 (click)="cambiarColor('green', link1)" class="selector green-theme">2</a></li>
+              <li><a #link2 (click)="cambiarColor('default', link2)" class="selector default-theme">1</a></li>
+              <li><a #link3 (click)="cambiarColor('red', link3)" class="selector red-theme">3</a></li>
+              <li><a #link4 (click)="cambiarColor('blue', link4)" class="selector blue-theme">4</a></li>
+              <li><a #link5 (click)="cambiarColor('purple', link5)" class="selector purple-theme">5</a></li>
+              <li><a #link6 (click)="cambiarColor('megna', link6)" class="selector megna-theme">6</a></li>
+
+              <li class="d-block m-t-30"><b>Con el sidebar oscuro</b></li>
+              <li><a #link7 (click)="cambiarColor('default-dark', link7)" class="selector default-dark-theme">7</a></li>
+              <li><a #link8 (click)="cambiarColor('green-dark', link8)" class="selector green-dark-theme">8</a></li>
+              <li><a #link9 (click)="cambiarColor('red-dark', link9)" class="selector red-dark-theme">9</a></li>
+              <li><a #link10 (click)="cambiarColor('blue-dark', link10)" class="selector blue-dark-theme">10</a></li>
+              <li><a #link11 (click)="cambiarColor('purple-dark', link11)" class="selector purple-dark-theme">11</a></li>
+              <li><a #link12 (click)="cambiarColor('megna-dark', link12)" class="selector megna-dark-theme">12</a></li>
+          </ul>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/account-settings/account-settings.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { SettingsService } from '../../services/service.index';
+
+@Component({
+  selector: 'app-account-settings',
+  templateUrl: './account-settings.component.html',
+  styles: []
+})
+export class AccountSettingsComponent implements OnInit {
+  estilos: string = 'selector ';
+
+  constructor(public _ajustesService: SettingsService) {}
+
+  ngOnInit() {
+    this.colocarCheckAlInicio();
+  }
+
+  cambiarColor(tema, link) {
+    this._ajustesService.aplicarTema(tema);
+    this.aplicarCheck(link);
+  }
+
+  aplicarCheck(link) {
+    link.classList.add('working');
+    const links: Array<HTMLElement> = Array.from(document.getElementsByClassName('selector'));
+    links.forEach((el) => el.classList.remove('working'));
+  }
+
+  colocarCheckAlInicio() {
+    const link = document.getElementsByClassName(`${this._ajustesService.ajustes.tema}-theme`)[0];
+    link.classList.add('working');
+  }
+
+}

src/app/pages/pages.component.ts

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
+
+declare function init_plugins_jquery();
 @Component({
   selector: 'app-pages',
   templateUrl: './pages.component.html',
@@ -10,6 +12,7 @@ export class PagesComponent implements OnInit {
   constructor() { }
 
   ngOnInit() {
+    init_plugins_jquery();
   }
 
 }

src/app/pages/pages.module.ts

@@ -20,6 +20,7 @@ import { FormsModule } from '@angular/forms';
 
 // ng2-charts
 import { ChartsModule } from 'ng2-charts';
+import { AccountSettingsComponent } from './account-settings/account-settings.component';
 
 @NgModule({
   declarations: [
@@ -29,6 +30,7 @@ import { ChartsModule } from 'ng2-charts';
     ProgressComponent,
     IncrementadorComponent,
     GraficoDonaComponent,
+    AccountSettingsComponent,
   ],
   exports: [
     PagesComponent,

src/app/pages/pages.routes.ts

@@ -4,6 +4,7 @@ import { PagesComponent } from "./pages.component";
 import { DashboardComponent } from "./dashboard/dashboard.component";
 import { ProgressComponent } from "./progress/progress.component";
 import { Graficas1Component } from "./graficas1/graficas1.component";
+import { AccountSettingsComponent } from './account-settings/account-settings.component';
 
 const pagesRoutes: Routes = [
   {
@@ -13,6 +14,7 @@ const pagesRoutes: Routes = [
       {path: 'dashboard', component: DashboardComponent},
       {path: 'progress', component: ProgressComponent},
       {path: 'graficas1', component: Graficas1Component},
+      {path: 'account-settings', component: AccountSettingsComponent},
       {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
     ]
   },

src/app/services/service.index.ts

@@ -0,0 +1,3 @@
+export { SettingsService } from './settings/settings.service';
+export { SharedService } from './shared/shared.service';
+export { SidebarService } from './shared/sidebar.service';

src/app/services/service.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  SharedService,
+  SidebarService,
+  SettingsService
+} from './service.index';
+
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [],
+  providers: [
+    SharedService,
+    SidebarService,
+    SettingsService
+  ]
+})
+
+export class ServiceModule { }

src/app/services/settings/settings.service.ts

@@ -0,0 +1,38 @@
+import { Injectable, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
+
+@Injectable()
+export class SettingsService {
+
+  ajustes: Ajustes = {
+    temaUrl: 'assets/css/color/default.css',
+    tema: 'default'
+  };
+
+  constructor(@Inject(DOCUMENT) private _document) {
+    this.cargarAjustes();
+  }
+
+  guardarAjustes() {
+    localStorage.setItem('ajustes', JSON.stringify(this.ajustes));
+  }
+
+  cargarAjustes() {
+    this.ajustes = JSON.parse(localStorage.getItem('ajustes')) || this.ajustes;
+    this.aplicarTema(this.ajustes.tema);
+  }
+
+  aplicarTema(tema) {
+    const url = `assets/css/colors/${tema}.css`;
+    this._document.getElementById('tema').setAttribute('href', url);
+
+    this.ajustes.tema = tema;
+    this.ajustes.temaUrl = url;
+    this.guardarAjustes();
+  }
+}
+
+interface Ajustes {
+  temaUrl: string;
+  tema: string;
+}

src/app/services/shared/sidebar.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class SidebarService {
+  menu: Array<Object> = [
+    {
+      titulo: 'Principal',
+      icono: 'mdi mdi-guage',
+      submenu: [
+        { titulo: 'Dashboard', url: '/dashboard' },
+        { titulo: 'ProgressBar', url: '/progress' },
+        { titulo: 'Gráficas', url: '/graficas1' },
+      ]
+    }];
+
+  constructor() { }
+
+}

src/app/shared/shared.module.ts

@@ -1,10 +1,16 @@
 import { NgModule } from "@angular/core";
+import { RouterModule } from '@angular/router';
+import { CommonModule } from "@angular/common";
+
 import { NopagefoundComponent } from "./nopagefound/nopagefound.component";
 import { HeaderComponent } from "./header/header.component";
 import { SidebarComponent } from "./sidebar/sidebar.component";
 import { BreadcrumbsComponent } from "./breadcrumbs/breadcrumbs.component";
 
 @NgModule({
+  imports: [
+    RouterModule,
+    CommonModule],
   declarations: [
     NopagefoundComponent,
     HeaderComponent,

src/app/shared/sidebar/sidebar.component.html

@@ -13,18 +13,19 @@
                         <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 href="javascript:void()">Account Setting</a></li>
-                        <li><a href="javascript:void()">Logout</a></li>
+                        <li><a routerLinkActive 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> <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-gauge"></i><span class="hide-menu">Dashboard <span class="label label-rouded label-themecolor pull-right">4</span></span></a>
+
+                <li *ngFor="let menu of _sidebar.menu">
+                  <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i [class]="menu.icono"></i><span class="hide-menu">{{menu.titulo}} <span class="label label-rouded label-themecolor pull-right">{{menu.submenu.length}}</span></span></a>
                     <ul aria-expanded="false" class="collapse">
-                        <li><a href="index.html">Minimal </a></li>
-                        <li><a href="index2.html">Analytical</a></li>
-                        <li><a href="index3.html">Demographical</a></li>
-                        <li><a href="index4.html">Modern</a></li>
+                        <li *ngFor="let submenu of menu.submenu">
+                          <a routerLinkActive="active" [routerLink]="[submenu.url]">{{submenu.titulo}} </a>
+                        </li>
                     </ul>
                 </li>
             </ul>

src/app/shared/sidebar/sidebar.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { SidebarService } from '../../services/service.index';
 
 @Component({
   selector: 'app-sidebar',
@@ -7,7 +8,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SidebarComponent implements OnInit {
 
-  constructor() { }
+  constructor( public _sidebar: SidebarService) { }
 
   ngOnInit() {
   }