Providers y Routerlinks

src/app/app.component.ts

@@ -1,10 +1,15 @@
 import { Component } from '@angular/core';
+import { SettingsService } from './services/service.index';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app';
+
+  constructor(public _settingsService:SettingsService){
+
+  }
+
 }

src/app/app.module.ts

@@ -5,8 +5,9 @@ import { FormsModule } from '@angular/forms';
 //Routes
 import { APP_ROUTES } from './app.routes';
 
-//Módulos
+//Modules
 import { PagesModule } from './pages/pages.module';
+import { ServiceModule } from './services/service.module';
 
 //Components
 import { AppComponent } from './app.component';
@@ -24,6 +25,7 @@ import { RegisterComponent } from './auth/register.component';
     BrowserModule,
     PagesModule,
     FormsModule,
+    ServiceModule,
     APP_ROUTES
   ],
   providers: [],

src/app/auth/login.component.html

@@ -2,16 +2,16 @@
 <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" (ngSubmit)="login()">
                 <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">
-                        <input class="form-control" type="text" required="" placeholder="Username">
+                        <input class="form-control" type="text" placeholder="Username">
                     </div>
                 </div>
                 <div class="form-group">
                     <div class="col-xs-12">
-                        <input class="form-control" type="password" required="" placeholder="Password">
+                        <input class="form-control" type="password" placeholder="Password">
                     </div>
                 </div>
                 <div class="form-group row">
@@ -24,7 +24,7 @@
                 </div>
                 <div class="form-group text-center m-t-20">
                     <div class="col-xs-12">
-                        <button class="btn btn-info btn-lg btn-block text-uppercase btn-rounded" type="submit">Log In</button>
+                        <button class="btn btn-info btn-lg btn-block text-uppercase btn-rounded" type="submit">Ingresar</button>
                     </div>
                 </div>
                 <div class="row">
@@ -47,7 +47,7 @@ <h3>Recover Password</h3>
                 </div>
                 <div class="form-group ">
                     <div class="col-xs-12">
-                        <input class="form-control" type="text" required="" placeholder="Email">
+                        <input class="form-control" type="text" placeholder="Email">
                     </div>
                 </div>
                 <div class="form-group text-center m-t-20">

src/app/auth/login.component.ts

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

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

@@ -0,0 +1,31 @@
+<div class="row">
+  <div class="col-4">
+    <div class="card">
+      <div class="card-body">
+
+        <h4>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)="changeColor('default',link1)" data-theme="default" class="selector default-theme working">1</a></li>
+              <li><a #link2 (click)="changeColor('green',link2)" data-theme="green" class="selector green-theme">2</a></li>
+              <li><a #link3 (click)="changeColor('red',link3)" data-theme="red" class="selector red-theme">3</a></li>
+              <li><a #link4 (click)="changeColor('blue',link4)" data-theme="blue" class="selector blue-theme">4</a></li>
+              <li><a #link5 (click)="changeColor('purple',link5)" data-theme="purple" class="selector purple-theme">5</a></li>
+              <li><a #link6 (click)="changeColor('megna',link6)" data-theme="megna" 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)="changeColor('default-dark',link7)" data-theme="default-dark" class="selector default-dark-theme">7</a></li>
+              <li><a #link8 (click)="changeColor('green-dark',link8)" data-theme="green-dark" class="selector green-dark-theme">8</a></li>
+              <li><a #link9 (click)="changeColor('red-dark',link9)" data-theme="red-dark" class="selector red-dark-theme">9</a></li>
+              <li><a #link10 (click)="changeColor('blue-dark',link10)" data-theme="blue-dark" class="selector blue-dark-theme">10</a></li>
+              <li><a #link11 (click)="changeColor('purple-dark',link11)" data-theme="purple-dark" class="selector purple-dark-theme">11</a></li>
+              <li><a #link12 (click)="changeColor('megna-dark',link12)" data-theme="megna-dark" 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,50 @@
+import { Component, OnInit } 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 {
+
+  constructor(public _settingsService:SettingsService) { }
+
+  ngOnInit() {
+    this.loadCheck();
+  }
+
+  changeColor(theme:string,link:any){
+
+    this.activateCheck(link);
+    this._settingsService.applyTheme(theme);
+
+  }
+
+  activateCheck(link:any){
+
+    let selectors:any = document.getElementsByClassName('selector');
+    for(let ref of selectors){
+      ref.classList.remove('working');
+    }
+
+    link.classList.add('working');
+
+  }
+
+  loadCheck(){
+
+    let selectors:any = document.getElementsByClassName('selector');
+    let theme = this._settingsService.settings.theme;
+
+    for(let ref of selectors){
+      ref.classList.remove('working');
+      if(ref.getAttribute('data-theme')=== theme){
+        ref.classList.add('working');
+      }
+    }
+
+  }
+
+
+}

src/app/pages/pages.component.ts

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

src/app/pages/pages.module.ts

@@ -14,6 +14,7 @@ import { GraphicComponent } from '../pages/graphic/graphic.component';
 import { PagesComponent } from '../pages/pages.component';
 import { IncrementorComponent } from '../components/incrementor/incrementor.component';
 import { GraphicDonutComponent } from '../components/graphic-donut/graphic-donut.component';
+import { AccountSettingsComponent } from './account-settings/account-settings.component';
 
 
 @NgModule({
@@ -23,13 +24,13 @@ import { GraphicDonutComponent } from '../components/graphic-donut/graphic-donut
         GraphicComponent,
         PagesComponent,
         IncrementorComponent,
-        GraphicDonutComponent
+        GraphicDonutComponent,
+        AccountSettingsComponent
     ],
     exports:[
         DashboardComponent,
         ProgressComponent,
         GraphicComponent,
-        PagesComponent,
     ],
     imports:[
         SharedModule,

src/app/pages/pages.routes.ts

@@ -3,12 +3,14 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { PagesComponent } from './pages.component';
 import { ProgressComponent } from './progress/progress.component';
 import { GraphicComponent } from './graphic/graphic.component';
+import { AccountSettingsComponent } from './account-settings/account-settings.component';
 
 const pagesRoutes:Routes = [
     { path: '', component:PagesComponent, children: [
         { path: 'dashboard', component:DashboardComponent },
         { path: 'progress', component:ProgressComponent },
         { path: 'graphic', component:GraphicComponent },
+        { path: '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 './sidebar/sidebar.service';

src/app/services/service.module.ts

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

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

@@ -0,0 +1,45 @@
+import { Injectable, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
+
+@Injectable()
+export class SettingsService {
+
+  settings:Settings = {
+    themeUrl: 'assets/css/colors/default.css',
+    theme: 'default'
+  }
+
+  constructor(@Inject(DOCUMENT) private _document) {
+    this.loadSettings();
+  }
+
+  saveSettings(){
+
+    localStorage.setItem('settings',JSON.stringify(this.settings))
+  }
+
+  loadSettings(){
+
+    if(localStorage.getItem('settings'))
+      this.settings = JSON.parse(localStorage.getItem('settings'));
+
+    this.applyTheme(this.settings.theme);
+  }
+
+  applyTheme(theme:string){
+
+    let url = `assets/css/colors/${theme}.css`
+    this._document.getElementById('theme').setAttribute('href',url);
+
+    this.settings.theme = theme;
+    this.settings.themeUrl = url;
+    this.saveSettings();
+
+  }
+
+}
+
+interface Settings{
+  themeUrl:string;
+  theme:string;
+}

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

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class SidebarService {
+
+  menu: any = [
+    {
+      title: 'Principal', icon: 'mdi mdi-gauge',
+      submenu: [
+        { title: 'Dashboard', url: '/dashboard' },
+        { title: 'ProgressBar', url: '/progress' },
+        { title: 'Graphics', url: '/graphic' }
+      ]
+    }
+  ]
+
+  constructor() {}
+
+}

src/app/shared/shared.module.ts

@@ -1,11 +1,18 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { RouterModule } from '@angular/router';
 
 import { NopagefoundComponent } from '../shared/nopagefound/nopagefound.component';
 import { HeaderComponent } from '../shared/header/header.component';
 import { SidebarComponent } from '../shared/sidebar/sidebar.component';
 import { BreadcumbsComponent } from '../shared/breadcumbs/breadcumbs.component';
 
 @NgModule({
+    imports:[
+        RouterModule,
+        CommonModule
+    ],
     declarations:[
         NopagefoundComponent,
         HeaderComponent,

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

@@ -10,18 +10,20 @@
                         <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="/settings">Ajustes</a></li>
+                        <li><a routerLink="/login">Salir</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 class="nav-small-cap">Generales</li>
+                <li *ngFor="let menu of _sidebarService.menu">
+                    <a class="has-arrow waves-effect waves-dark" aria-expanded="false"><i [class]="menu.icon"></i>
+                        <span class="hide-menu">{{menu.title}} <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.title}}</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 _sidebarService:SidebarService) { }
 
   ngOnInit() {
   }