1.1.0-SNAPSHOT

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-electron-admin",
-  "version": "1.0.0-SNAPSHOT",
+  "version": "1.1.0-SNAPSHOT",
   "description": "Angular Electron Admin Template",
   "homepage": "https://aea.incubator.edurt.io",
   "author": {
@@ -41,10 +41,15 @@
     "@angular/platform-browser-dynamic": "12.1.2",
     "@angular/router": "12.1.2",
     "bootstrap": "4.0.0-beta",
+    "d3": "5",
+    "font-awesome": "^4.7.0",
     "material-design-iconic-font": "^2.2.0",
+    "moment": "^2.29.1",
     "ngx-bootstrap": "^7.1.0",
     "ngx-clipboard": "^14.0.1",
+    "ngx-perfect-scrollbar": "^10.1.1",
     "rxjs": "~6.6.0",
+    "simple-keyboard": "^3.3.22",
     "tslib": "^2.1.0",
     "zone.js": "~0.11.4"
   },

src/renderer/app/layout/layout.routing.ts

@@ -19,6 +19,10 @@ const LAYOUT_ROUTES: Routes = [
           {
             path: 'zmdi',
             loadChildren: () => import('../pages/icon/zmdi/zmdi.module').then(m => m.IconsZmdiModule)
+          },
+          {
+            path: 'fa',
+            loadChildren: () => import('../pages/icon/fa/fa.module').then(m => m.IconsFaModule)
           }
         ]
       },
@@ -32,6 +36,35 @@ const LAYOUT_ROUTES: Routes = [
           {
             path: 'tooltips',
             loadChildren: () => import('../pages/component/tooltips/tooltips.module').then(m => m.TooltipsComponentModule)
+          },
+          {
+            path: 'scrollbar',
+            loadChildren: () => import('../pages/component/scrollbar/scrollbar.module').then(m => m.ScrollbarModule)
+          },
+          {
+            path: 'datepicker',
+            loadChildren: () => import('../pages/component/datepicker/datepicker.module').then(m => m.DatepickerModule)
+          },
+          {
+            path: 'carousel',
+            loadChildren: () => import('../pages/component/carousel/carousel.module').then(m => m.CarouselComponentModule)
+          },
+          {
+            path: 'progressbar',
+            loadChildren: () => import('../pages/component/progressbar/progressbar.module').then(m => m.ProgressbarComponentModule)
+          },
+          {
+            path: 'keyboard',
+            loadChildren: () => import('../pages/component/keyboard/keyboard.module').then(m => m.KeyboardModule)
+          }
+        ]
+      },
+      {
+        path: 'directive',
+        children: [
+          {
+            path: 'contribution',
+            loadChildren: () => import('../pages/directive/contribution/contribution.module').then(m => m.DirectiveContributionModule)
           }
         ]
       }

src/renderer/app/layout/navigation/navigation.component.html

@@ -5,7 +5,10 @@
         <i class="zmdi zmdi-share"></i> Icon</a>
       <ul [@toggleHeight]="navigationSubState.Icon">
         <li routerLinkActive="navigation__active">
-          <a [routerLink]="['/icon/zmdi']">ZMDI</a>
+          <a [routerLink]="['/icon/zmdi']"><i class="fa fa-id-card-o"></i> Material Icon</a>
+        </li>
+        <li routerLinkActive="navigation__active">
+          <a [routerLink]="['/icon/fa']"><i class="fa fa-fax"></i> Fa Icon</a>
         </li>
       </ul>
     </li>
@@ -14,10 +17,34 @@
         <i class="zmdi zmdi-nature"></i> Component</a>
       <ul [@toggleHeight]="navigationSubState.Component">
         <li routerLinkActive="navigation__active">
-          <a [routerLink]="['/component/clipboard']">Clipboard</a>
+          <a [routerLink]="['/component/clipboard']"><i class="fa fa-clipboard"></i> Clipboard</a>
         </li>
         <li routerLinkActive="navigation__active">
-          <a [routerLink]="['/component/tooltips']">Tooltips</a>
+          <a [routerLink]="['/component/tooltips']"><i class="fa fa-tripadvisor"></i> Tooltips</a>
+        </li>
+        <li routerLinkActive="navigation__active">
+          <a [routerLink]="['/component/scrollbar']"><i class="fa fa-bars"></i> Scrollbar</a>
+        </li>
+        <li routerLinkActive="navigation__active">
+          <a [routerLink]="['/component/datepicker']"><i class="fa fa-clock-o"></i> Datepicker</a>
+        </li>
+        <li routerLinkActive="navigation__active">
+          <a [routerLink]="['/component/carousel']"><i class="fa fa-calculator"></i> Carousel</a>
+        </li>
+        <li routerLinkActive="navigation__active">
+          <a [routerLink]="['/component/progressbar']"><i class="fa fa-pagelines"></i> Progressbar</a>
+        </li>
+        <li routerLinkActive="navigation__active">
+          <a [routerLink]="['/component/keyboard']"><i class="fa fa-keyboard-o"></i> Keyboard</a>
+        </li>
+      </ul>
+    </li>
+    <li routerLinkActive="navigation__sub--active" class="navigation__sub">
+      <a (click)="toggleNavigationSub('Directive', $event)">
+        <i class="zmdi zmdi-chart"></i> Directive</a>
+      <ul [@toggleHeight]="navigationSubState.Directive">
+        <li routerLinkActive="navigation__active">
+          <a [routerLink]="['/directive/contribution']"><i class="fa fa-connectdevelop"></i> Contribution</a>
         </li>
       </ul>
     </li>

src/renderer/app/layout/navigation/navigation.component.scss

@@ -152,7 +152,7 @@
       @include font-icon('\f26d', 6px);
       position: absolute;
       left: 1rem;
-      top: 0.7rem;
+      top: 1rem;
     }
   }
 }

src/renderer/app/layout/navigation/navigation.component.ts

@@ -25,7 +25,8 @@ export class NavigationComponent implements OnInit {
   sidebarVisible: boolean;
   navigationSubState: any = {
     Icon: 'inactive',
-    Component: 'inactive'
+    Component: 'inactive',
+    Directive: 'inactive'
   };
 
   constructor(private navigationService: NavigationService) {

src/renderer/app/pages/component/carousel/carousel.component.html

@@ -0,0 +1,30 @@
+<section class="content--row">
+  <header class="content__title">
+    <h1>Carousel</h1>
+    <small>This template is built using <code>ngx-bootstrap/carousel</code> and provides some usage examples</small>
+  </header>
+  <div class="card">
+    <div class="card-body">
+      <h4 class="card-title">Default</h4>
+      <carousel>
+        <slide *ngFor="let img of defaultCarousels">
+          <img src="{{img.url}}" alt="{{img.title}}" style="height: 200px;">
+        </slide>
+      </carousel>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-body">
+      <h4 class="card-title">Description</h4>
+      <carousel>
+        <slide *ngFor="let img of defaultCarousels">
+          <img src="{{img.url}}" alt="{{img.title}}" style="height: 200px;">
+          <div class="carousel-caption">
+            <h3>{{img.title}}</h3>
+            <p>{{img.description}}</p>
+          </div>
+        </slide>
+      </carousel>
+    </div>
+  </div>
+</section>

src/renderer/app/pages/component/carousel/carousel.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import { CarouselService } from '@renderer/services/component/carousel.service';
+
+@Component({
+  selector: 'app-component-carousel',
+  templateUrl: './carousel.component.html'
+})
+export class CarouselComponent implements OnInit {
+  public defaultCarousels: any = [];
+
+  constructor(private carouselService: CarouselService) {
+    this.defaultCarousels = this.carouselService.builderCarousels();
+  }
+
+  ngOnInit() {
+  }
+}

src/renderer/app/pages/component/carousel/carousel.module.ts

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { CarouselModule } from 'ngx-bootstrap/carousel';
+import { CarouselComponent } from './carousel.component';
+import { CarouselService } from '@renderer/services/component/carousel.service';
+
+const CAROUSEL_ROUTES = [
+  {path: '', component: CarouselComponent}
+];
+
+@NgModule({
+  declarations: [
+    CarouselComponent
+  ],
+  imports: [
+    CommonModule,
+    BsDropdownModule.forRoot(),
+    CarouselModule.forRoot(),
+    RouterModule.forChild(CAROUSEL_ROUTES)
+  ],
+  providers: [
+    CarouselService
+  ]
+})
+export class CarouselComponentModule {
+}

src/renderer/app/pages/component/datepicker/datepicker.component.html

@@ -0,0 +1,53 @@
+<section class="content--row">
+  <header class="content__title">
+    <h1>Datepicker</h1>
+    <small>This template is built using <code>ngx-bootstrap/datepicker</code> and provides some usage examples</small>
+  </header>
+  <div class="card-demo">
+    <div class="card">
+      <div class="card-body">
+        <h4 class="card-title">Basic Datepicker</h4>
+        <div class="form-group">
+          <input type="text" class="form-control" [minDate]="minDate" [maxDate]="maxDate" #dp="bsDatepicker"
+                 bsDatepicker [(bsValue)]="bsValue">
+        </div>
+        <div class="form-group">
+          <button class="btn btn-success" (click)="dp.toggle()">Basic Datepicker</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="card-demo">
+    <div class="card">
+      <div class="card-body">
+        <h4 class="card-title">Range Datepicker</h4>
+        <div class="form-group">
+          <input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker>
+        </div>
+        <div class="form-group">
+          <button class="btn btn-success" (click)="drp.toggle()">Range Datepicker</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="card-demo">
+    <div class="card">
+      <div class="card-body">
+        <h4 class="card-title">Theme Datepicker</h4>
+        <div class="form-group">
+          <select class="custom-select form-control " [(ngModel)]="colorTheme" (ngModelChange)="applyTheme(dpTheme);">
+            <option *ngFor="let theme of colorThemes" value="{{theme}}">{{theme}}</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <div class="input-group">
+            <input type="text" class="form-control" bsDatepicker #dpTheme="bsDatepicker" [bsConfig]="bsConfig">
+            <div class="input-group-btn">
+              <button class="btn btn-success" (click)="dpTheme.show() ">Theme Datepicker</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

src/renderer/app/pages/component/datepicker/datepicker.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
+import { DatepickerService } from '@renderer/services/component/datepicker.service';
+
+@Component({
+  selector: 'app-component-datepicker',
+  templateUrl: './datepicker.component.html'
+})
+export class DatepickerComponent implements OnInit {
+  minDate = new Date(2017, 5, 10);
+  maxDate = new Date(2018, 9, 15);
+  bsValue: Date = new Date();
+  colorTheme = 'theme-green';
+  colorThemes = [];
+  bsConfig: Partial<BsDatepickerConfig>;
+
+  constructor(private datepickerService: DatepickerService) {
+    this.colorThemes = this.datepickerService.themes;
+  }
+
+  applyTheme(pop: any) {
+    this.bsConfig = Object.assign({}, {containerClass: this.colorTheme});
+    setTimeout(() => {
+      pop.show();
+    });
+  }
+
+  ngOnInit() {
+  }
+}

src/renderer/app/pages/component/datepicker/datepicker.module.ts

@@ -0,0 +1,30 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import { FormsModule } from '@angular/forms';
+import { DatepickerComponent } from './datepicker.component';
+import { DatepickerService } from '@renderer/services/component/datepicker.service';
+
+const DATEPICKER_ROUTES = [
+  {path: '', component: DatepickerComponent}
+];
+
+@NgModule({
+  declarations: [
+    DatepickerComponent
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    BsDropdownModule.forRoot(),
+    BsDatepickerModule.forRoot(),
+    RouterModule.forChild(DATEPICKER_ROUTES)
+  ],
+  providers: [
+    DatepickerService
+  ]
+})
+export class DatepickerModule {
+}

src/renderer/app/pages/component/keyboard/keyboard.component.html

@@ -0,0 +1,19 @@
+<section class="content--row">
+  <header class="content__title">
+    <h1>Keyboard</h1>
+    <small>This template is built using <code>simple-keyboard</code> and provides some usage examples</small>
+  </header>
+  <div class="card-demo">
+    <div class="card">
+      <div class="card-body">
+        <h4 class="card-title">Keyboard</h4>
+        <div class="form-group">
+          <input type="text" class="form-control form-control-lg" (input)="onInputChange($event)" value="{{value}}"
+                 placeholder="Tap on the virtual keyboard to start">
+          <i class="form-group__bar"></i>
+        </div>
+        <div class="simple-keyboard"></div>
+      </div>
+    </div>
+  </div>
+</section>