From c2ea384819b55c670197cb53e5d628e85bcdb407 Mon Sep 17 00:00:00 2001 From: qianmoQ Date: Thu, 11 Nov 2021 15:12:41 +0800 Subject: [PATCH 1/3] [Component] Add component for datepicker --- src/renderer/app/layout/layout.routing.ts | 4 ++ .../navigation/navigation.component.html | 3 ++ .../datepicker/datepicker.component.html | 53 +++++++++++++++++++ .../datepicker/datepicker.component.ts | 30 +++++++++++ .../component/datepicker/datepicker.module.ts | 30 +++++++++++ .../services/component/datepicker.service.ts | 16 ++++++ 6 files changed, 136 insertions(+) create mode 100644 src/renderer/app/pages/component/datepicker/datepicker.component.html create mode 100644 src/renderer/app/pages/component/datepicker/datepicker.component.ts create mode 100644 src/renderer/app/pages/component/datepicker/datepicker.module.ts create mode 100644 src/renderer/services/component/datepicker.service.ts diff --git a/src/renderer/app/layout/layout.routing.ts b/src/renderer/app/layout/layout.routing.ts index ddf06f4..1f5e82a 100644 --- a/src/renderer/app/layout/layout.routing.ts +++ b/src/renderer/app/layout/layout.routing.ts @@ -40,6 +40,10 @@ const LAYOUT_ROUTES: Routes = [ { 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) } ] }, diff --git a/src/renderer/app/layout/navigation/navigation.component.html b/src/renderer/app/layout/navigation/navigation.component.html index 9e58e8a..c208151 100644 --- a/src/renderer/app/layout/navigation/navigation.component.html +++ b/src/renderer/app/layout/navigation/navigation.component.html @@ -25,6 +25,9 @@
  • Scrollbar
    • +
  • + Datepicker +
  • diff --git a/src/renderer/app/pages/component/datepicker/datepicker.component.html b/src/renderer/app/pages/component/datepicker/datepicker.component.html new file mode 100644 index 0000000..d83deec --- /dev/null +++ b/src/renderer/app/pages/component/datepicker/datepicker.component.html @@ -0,0 +1,53 @@ +
    +
    +

    Datepicker

    + This template is built using ngx-bootstrap/datepicker and provides some usage examples +
    +
    +
    +
    +

    Basic Datepicker

    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Range Datepicker

    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Theme Datepicker

    +
    + +
    +
    +
    + +
    + +
    +
    +
    +
    +
    +
    +
    diff --git a/src/renderer/app/pages/component/datepicker/datepicker.component.ts b/src/renderer/app/pages/component/datepicker/datepicker.component.ts new file mode 100644 index 0000000..ccf0a52 --- /dev/null +++ b/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; + + constructor(private datepickerService: DatepickerService) { + this.colorThemes = this.datepickerService.themes; + } + + applyTheme(pop: any) { + this.bsConfig = Object.assign({}, {containerClass: this.colorTheme}); + setTimeout(() => { + pop.show(); + }); + } + + ngOnInit() { + } +} diff --git a/src/renderer/app/pages/component/datepicker/datepicker.module.ts b/src/renderer/app/pages/component/datepicker/datepicker.module.ts new file mode 100644 index 0000000..8727abe --- /dev/null +++ b/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 { +} diff --git a/src/renderer/services/component/datepicker.service.ts b/src/renderer/services/component/datepicker.service.ts new file mode 100644 index 0000000..5f01919 --- /dev/null +++ b/src/renderer/services/component/datepicker.service.ts @@ -0,0 +1,16 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class DatepickerService { + public themes: any = [ + 'theme-default', + 'theme-green', + 'theme-blue', + 'theme-dark-blue', + 'theme-red', + 'theme-orange' + ]; + + constructor() { + } +} From 840ea418ad5550f4ae65eb7f1a8013ca0e7f54e3 Mon Sep 17 00:00:00 2001 From: qianmoQ Date: Thu, 11 Nov 2021 16:45:42 +0800 Subject: [PATCH 2/3] [Component] Add component for carousel --- src/renderer/app/layout/layout.routing.ts | 4 +++ .../navigation/navigation.component.html | 3 ++ .../carousel/carousel.component.html | 30 +++++++++++++++++++ .../component/carousel/carousel.component.ts | 17 +++++++++++ .../component/carousel/carousel.module.ts | 28 +++++++++++++++++ .../services/component/carousel.service.ts | 28 +++++++++++++++++ 6 files changed, 110 insertions(+) create mode 100644 src/renderer/app/pages/component/carousel/carousel.component.html create mode 100644 src/renderer/app/pages/component/carousel/carousel.component.ts create mode 100644 src/renderer/app/pages/component/carousel/carousel.module.ts create mode 100644 src/renderer/services/component/carousel.service.ts diff --git a/src/renderer/app/layout/layout.routing.ts b/src/renderer/app/layout/layout.routing.ts index 1f5e82a..1551560 100644 --- a/src/renderer/app/layout/layout.routing.ts +++ b/src/renderer/app/layout/layout.routing.ts @@ -44,6 +44,10 @@ const LAYOUT_ROUTES: Routes = [ { 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) } ] }, diff --git a/src/renderer/app/layout/navigation/navigation.component.html b/src/renderer/app/layout/navigation/navigation.component.html index c208151..27d5f00 100644 --- a/src/renderer/app/layout/navigation/navigation.component.html +++ b/src/renderer/app/layout/navigation/navigation.component.html @@ -28,6 +28,9 @@
  • Datepicker
    • +
  • + Carousel +
  • diff --git a/src/renderer/app/pages/component/carousel/carousel.component.html b/src/renderer/app/pages/component/carousel/carousel.component.html new file mode 100644 index 0000000..d44288c --- /dev/null +++ b/src/renderer/app/pages/component/carousel/carousel.component.html @@ -0,0 +1,30 @@ +
    +
    +

    Carousel

    + This template is built using ngx-bootstrap/carousel and provides some usage examples +
    +
    +
    +

    Default

    + + + {{img.title}} + + +
    +
    +
    +
    +

    Description

    + + + {{img.title}} +
    +

    {{img.title}}

    +

    {{img.description}}

    +
    +     +     +
    +
    +
    diff --git a/src/renderer/app/pages/component/carousel/carousel.component.ts b/src/renderer/app/pages/component/carousel/carousel.component.ts new file mode 100644 index 0000000..cfaef88 --- /dev/null +++ b/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() { + } +} diff --git a/src/renderer/app/pages/component/carousel/carousel.module.ts b/src/renderer/app/pages/component/carousel/carousel.module.ts new file mode 100644 index 0000000..5666593 --- /dev/null +++ b/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 { +} diff --git a/src/renderer/services/component/carousel.service.ts b/src/renderer/services/component/carousel.service.ts new file mode 100644 index 0000000..e6a98cd --- /dev/null +++ b/src/renderer/services/component/carousel.service.ts @@ -0,0 +1,28 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class CarouselService { + constructor() { + } + + builderCarousels() { + const carousels = [ + { + image: 'https://cdn.pixabay.com/photo/2016/02/11/14/59/fruits-1193727_1280.png', + title: 'fruits', + description: 'Description' + }, + { + url: 'https://cdn.pixabay.com/photo/2016/09/05/18/54/texture-1647380_1280.jpg', + title: 'texture', + description: 'Description' + }, + { + image: 'https://cdn.pixabay.com/photo/2018/05/12/19/20/mosaic-3394375_1280.jpg', + title: 'mosaic', + description: 'Description' + } + ]; + return carousels; + } +} From d661f3eabe1e9cbb193f2a107395ab93523c1782 Mon Sep 17 00:00:00 2001 From: qianmoQ Date: Thu, 11 Nov 2021 18:45:01 +0800 Subject: [PATCH 3/3] [Component] Add component for Progressbar --- src/renderer/app/layout/layout.routing.ts | 4 ++ .../navigation/navigation.component.html | 3 ++ .../progressbar/progressbar.component.html | 43 +++++++++++++++++++ .../progressbar/progressbar.component.ts | 31 +++++++++++++ .../progressbar/progressbar.module.ts | 24 +++++++++++ 5 files changed, 105 insertions(+) create mode 100644 src/renderer/app/pages/component/progressbar/progressbar.component.html create mode 100644 src/renderer/app/pages/component/progressbar/progressbar.component.ts create mode 100644 src/renderer/app/pages/component/progressbar/progressbar.module.ts diff --git a/src/renderer/app/layout/layout.routing.ts b/src/renderer/app/layout/layout.routing.ts index 1551560..bae84a6 100644 --- a/src/renderer/app/layout/layout.routing.ts +++ b/src/renderer/app/layout/layout.routing.ts @@ -48,6 +48,10 @@ const LAYOUT_ROUTES: Routes = [ { 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) } ] }, diff --git a/src/renderer/app/layout/navigation/navigation.component.html b/src/renderer/app/layout/navigation/navigation.component.html index 27d5f00..227ea29 100644 --- a/src/renderer/app/layout/navigation/navigation.component.html +++ b/src/renderer/app/layout/navigation/navigation.component.html @@ -31,6 +31,9 @@
  • Carousel
    • +
  • + Progressbar +
  • diff --git a/src/renderer/app/pages/component/progressbar/progressbar.component.html b/src/renderer/app/pages/component/progressbar/progressbar.component.html new file mode 100644 index 0000000..864b4a7 --- /dev/null +++ b/src/renderer/app/pages/component/progressbar/progressbar.component.html @@ -0,0 +1,43 @@ +
    +
    +

    Progressbar

    + This template is built using ngx-bootstrap/progressbar and provides some usage examples +
    +
    +
    +

    Static Progressbar

    + +
    + +
    + +
    + +
    + +
    +
    +
    +
    +

    Theme Progressbar

    +
    Theme + type property implementation adds a topic to the Progressbar
    + +
    + +
    + +
    + +
    +
    +
    +
    +

    Dynamic Progressbar

    + +
    +
    + +
    +
    +
    diff --git a/src/renderer/app/pages/component/progressbar/progressbar.component.ts b/src/renderer/app/pages/component/progressbar/progressbar.component.ts new file mode 100644 index 0000000..bfba54f --- /dev/null +++ b/src/renderer/app/pages/component/progressbar/progressbar.component.ts @@ -0,0 +1,31 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-component-progressbar', + templateUrl: './progressbar.component.html' +}) +export class ProgressbarComponent implements OnInit { + public type: string; + public stacked: any[] = []; + + constructor() { + this.randomStacked(); + } + + public randomStacked(): void { + const types = ['success', 'info', 'warning', 'danger']; + this.stacked = []; + const n = Math.floor((Math.random() * 4) + 1); + for (let i = 0; i < n; i++) { + const index = Math.floor((Math.random() * 4)); + const value = Math.floor((Math.random() * 27) + 3); + this.stacked.push({ + value, + type: types[index] + }); + } + } + + ngOnInit() { + } +} diff --git a/src/renderer/app/pages/component/progressbar/progressbar.module.ts b/src/renderer/app/pages/component/progressbar/progressbar.module.ts new file mode 100644 index 0000000..e0377b3 --- /dev/null +++ b/src/renderer/app/pages/component/progressbar/progressbar.module.ts @@ -0,0 +1,24 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; +import { ProgressbarModule } from 'ngx-bootstrap/progressbar'; +import { ProgressbarComponent } from './progressbar.component'; + +const PROGRESSBAR_ROUTES = [ + {path: '', component: ProgressbarComponent} +]; + +@NgModule({ + declarations: [ + ProgressbarComponent + ], + imports: [ + CommonModule, + BsDropdownModule.forRoot(), + ProgressbarModule.forRoot(), + RouterModule.forChild(PROGRESSBAR_ROUTES) + ] +}) +export class ProgressbarComponentModule { +}