Servicios básicos, temas, rutas básicas y persistentes

src/app/auth/auth.module.ts

@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { FormsModule } from '@angular/forms';
 
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
@@ -16,7 +18,9 @@ import { RegisterComponent } from './register/register.component';
     RegisterComponent,
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    RouterModule,
+    FormsModule
   ]
 })
 export class AuthModule { }

src/app/auth/login/login.component.html

@@ -5,7 +5,7 @@
     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" (submit)="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">

src/app/auth/login/login.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-login',
@@ -7,9 +8,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginComponent implements OnInit {
 
-  constructor() { }
+  constructor(private router: Router) { }
 
   ngOnInit(): void {
   }
 
+  login() {
+    this.router.navigateByUrl('/dashboard');
+  }
 }

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

@@ -0,0 +1,29 @@
+<div class="row">
+    <div class="col-5">
+        <div class="card">
+            <div class="card-body">
+                <h4>Seleccione un tema </h4>
+                <div class="r-panel-body">
+                    <ul id="themecolors" class="m-t-20">
+                        <li><b>Con el sidebar claro</b></li>
+                        <li><a (click)="changeTheme('default')" data-theme="default" class="selector default-theme">1</a></li>
+                        <li><a (click)="changeTheme('green')" data-theme="green" class="selector green-theme">2</a></li>
+                        <li><a (click)="changeTheme('red')" data-theme="red" class="selector red-theme">3</a></li>
+                        <li><a (click)="changeTheme('blue')" data-theme="blue" class="selector blue-theme">4</a></li>
+                        <li><a (click)="changeTheme('purple')" data-theme="purple" class="selector purple-theme">5</a></li>
+                        <li><a (click)="changeTheme('megna')" 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 (click)="changeTheme('default-dark')" data-theme="default-dark" class="selector default-dark-theme">7</a></li>
+                        <li><a (click)="changeTheme('green-dark')" data-theme="green-dark" class="selector green-dark-theme">8</a></li>
+                        <li><a (click)="changeTheme('red-dark')" data-theme="red-dark" class="selector red-dark-theme">9</a></li>
+                        <li><a (click)="changeTheme('blue-dark')" data-theme="blue-dark" class="selector blue-dark-theme working">10</a></li>
+                        <li><a (click)="changeTheme('purple-dark')" data-theme="purple-dark" class="selector purple-dark-theme">11</a></li>
+                        <li><a (click)="changeTheme('megna-dark')" data-theme="megna-dark" class="selector megna-dark-theme">12</a></li>
+                    </ul>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,22 @@
+import { Component, OnInit } from '@angular/core';
+import { SettingsService } from '../../services/settings.service';
+
+@Component({
+  selector: 'app-accout-settings',
+  templateUrl: './accout-settings.component.html',
+  styles: [
+  ]
+})
+export class AccoutSettingsComponent implements OnInit {
+
+  constructor(private settingsService: SettingsService) { }
+
+  ngOnInit(): void {
+    this.settingsService.checkCurrentTheme();
+  }
+
+  changeTheme(theme: string) {
+    this.settingsService.changeTheme(theme);
+  }
+
+}

src/app/pages/pages.component.ts

@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 
+import { SettingsService } from '../services/settings.service';
+
+declare function customInitFuctions(): any;
+
 @Component({
   selector: 'app-pages',
   templateUrl: './pages.component.html',
@@ -8,9 +12,10 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PagesComponent implements OnInit {
 
-  constructor() { }
+  constructor(private settingsService: SettingsService) { }
 
   ngOnInit(): void {
+    customInitFuctions();
   }
 
 }

src/app/pages/pages.module.ts

@@ -13,6 +13,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { ProgressComponent } from './progress/progress.component';
 import { Grafica1Component } from './grafica1/grafica1.component';
 import { PagesComponent } from './pages.component';
+import { AccoutSettingsComponent } from './accout-settings/accout-settings.component';
 
 
 @NgModule({
@@ -27,13 +28,15 @@ import { PagesComponent } from './pages.component';
     DashboardComponent,
     ProgressComponent,
     Grafica1Component,
-    PagesComponent
+    PagesComponent,
+    AccoutSettingsComponent
   ],
   exports: [
     DashboardComponent,
     ProgressComponent,
     Grafica1Component,
-    PagesComponent
+    PagesComponent,
+    AccoutSettingsComponent
   ]
 })
 export class PagesModule { }

src/app/pages/pages.routing.ts

@@ -5,6 +5,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { ProgressComponent } from './progress/progress.component';
 import { Grafica1Component } from './grafica1/grafica1.component';
 import { PagesComponent } from './pages.component';
+import { AccoutSettingsComponent } from './accout-settings/accout-settings.component';
 
 
 const routes: Routes = [
@@ -15,6 +16,7 @@ const routes: Routes = [
             { path: '', component: DashboardComponent },
             { path: 'progress', component: ProgressComponent },
             { path: 'grafica1', component: Grafica1Component },
+            { path: 'account-settings', component: AccoutSettingsComponent },
         ]
     },
 ];

src/app/services/settings.service.ts

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SettingsService {
+
+  private linkTheme = document.querySelector('#theme');
+
+  constructor() {
+    const url = localStorage.getItem('theme') || './assets/css/colors/purple-dark.css';
+    this.linkTheme?.setAttribute('href', url);
+  }
+
+
+  changeTheme(theme: string) {
+    const url = `./assets/css/colors/${theme}.css`;
+    this.linkTheme?.setAttribute('href', url);
+    localStorage.setItem('theme', url);
+
+    this.checkCurrentTheme();
+  }
+
+  checkCurrentTheme() {
+
+    const links = document.querySelectorAll('.selector');
+
+    links.forEach(elem => {
+      elem.classList.remove('working');
+      const btnTheme = elem.getAttribute('data-theme');
+      const btnThemeUrl = `./assets/css/colors/${btnTheme}.css`;
+      const currentTheme = this.linkTheme?.getAttribute('href');
+
+      if (btnThemeUrl === currentTheme) {
+        elem.classList.add('working');
+      }
+
+    });
+
+  }
+}

src/app/services/sidebar.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SidebarService {
+
+  menu: any[] = [
+    {
+      titulo: 'Dashboard',
+      icono: 'mdi mdi-gauge',
+      submenu: [
+        { titulo: 'Main', url: '/' },
+        { titulo: 'Progressbar', url: 'progress' },
+        { titulo: 'Gráfica', url: 'grafica1' },
+      ]
+    }
+  ];
+
+  constructor() { }
+
+
+}

src/app/shared/header/header.component.html

@@ -172,9 +172,9 @@ <h4>Steave Jobs</h4>
                             <li><a href="#"><i class="ti-wallet"></i> My Balance</a></li>
                             <li><a href="#"><i class="ti-email"></i> Inbox</a></li>
                             <li role="separator" class="divider"></li>
-                            <li><a href="#"><i class="ti-settings"></i> Account Setting</a></li>
+                            <li><a routerLink="/dashboard/account-settings"><i class="ti-settings"></i> Account Setting</a></li>
                             <li role="separator" class="divider"></li>
-                            <li><a href="#"><i class="fa fa-power-off"></i> Logout</a></li>
+                            <li><a routerLink="/login"><i class="fa fa-power-off"></i> Logout</a></li>
                         </ul>
                     </div>
                 </li>

src/app/shared/shared.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
 
 import { BreadcrumbsComponent } from './breadcrumbs/breadcrumbs.component';
 import { SidebarComponent } from './sidebar/sidebar.component';
@@ -19,7 +20,8 @@ import { HeaderComponent } from './header/header.component';
     HeaderComponent,
   ],
   imports: [
-    CommonModule
+    CommonModule,
+    RouterModule
   ]
 })
 export class SharedModule { }

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

@@ -15,20 +15,18 @@
                         <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 routerLink="/dashboard/account-settings">Account Setting</a></li>
                         <li><a href="javascript:void()">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 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><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 subitem of item.submenu"><a
+                                [routerLink]="subitem.url">{{subitem.titulo}}</a></li>
                     </ul>
                 </li>
             </ul>

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

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
+import { SidebarService } from '../../services/sidebar.service';
+
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
@@ -8,7 +10,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SidebarComponent implements OnInit {
 
-  constructor() { }
+  menuItems: any[]
+
+  constructor(private sidebarService: SidebarService) {
+    this.menuItems = sidebarService.menu;
+    console.log(this.menuItems);
+  }
 
   ngOnInit(): void {
   }