9 |
10 |
11 | 
12 |
13 |
14 | `,
15 | })
16 | export class FooterComponent {
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/@theme/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './header/header.component';
2 | export * from './footer/footer.component';
3 | export * from './search-input/search-input.component';
4 | export * from './tiny-mce/tiny-mce.component';
5 | export * from './theme-settings/theme-settings.component';
6 | export * from './theme-switcher/theme-switcher.component';
7 | export * from './switcher/switcher.component';
8 | export * from './layout-direction-switcher/layout-direction-switcher.component';
9 | export * from './theme-switcher/themes-switcher-list/themes-switcher-list.component';
10 |
--------------------------------------------------------------------------------
/src/app/@theme/components/layout-direction-switcher/layout-direction-switcher.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy, Input } from '@angular/core';
2 | import { NbLayoutDirectionService, NbLayoutDirection } from '@nebular/theme';
3 | import { takeWhile } from 'rxjs/operators/takeWhile';
4 |
5 | @Component({
6 | selector: 'ngx-layout-direction-switcher',
7 | template: `
8 |
12 |
13 |
5 |
6 | Themes
7 |
8 |
--------------------------------------------------------------------------------
/src/app/@theme/components/theme-switcher/theme-switcher.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/themes';
2 | @import '~@nebular/theme/styles/core/mixins';
3 | @import '~@nebular/theme/styles/core/functions';
4 |
5 | @include nb-install-component() {
6 | .themes-switcher {
7 | display: flex;
8 | font-size: 1.25rem;
9 | padding: 0.8rem 1.25rem;
10 | align-items: center;
11 | cursor: pointer;
12 | background-color: nb-theme(switcher-background);
13 | border-radius: nb-theme(radius);
14 |
15 | &:hover {
16 | $color: nb-theme(switcher-background);
17 | $percentage: nb-theme(switcher-background-percentage);
18 |
19 | background-color: tint($color, $percentage);
20 | }
21 |
22 | span {
23 | margin: 0 1.2rem;
24 | }
25 |
26 | i {
27 | color: nb-theme(color-primary);
28 | font-size: 1.8rem;
29 | border-radius: 50%;
30 | position: relative;
31 |
32 | @include nb-for-theme(default) {
33 | color: nb-theme(color-success);
34 | }
35 |
36 | @include nb-for-theme(corporate) {
37 | color: nb-theme(color-fg-highlight);
38 | }
39 |
40 | &::before {
41 | // Hack for IE11, IE11 should not set background
42 | background: nb-theme(drops-icon-line-gadient);
43 | -webkit-background-clip: text;
44 | -webkit-text-fill-color: transparent;
45 | }
46 | }
47 | }
48 | }
49 |
50 |
51 |
--------------------------------------------------------------------------------
/src/app/@theme/components/theme-switcher/theme-switcher.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, ViewChild } from '@angular/core';
2 | import { NbPopoverDirective } from '@nebular/theme';
3 | import { NbJSThemeOptions } from '@nebular/theme/services/js-themes/theme.options';
4 |
5 | import { ThemeSwitcherListComponent } from './themes-switcher-list/themes-switcher-list.component';
6 |
7 | @Component({
8 | selector: 'ngx-theme-switcher',
9 | templateUrl: './theme-switcher.component.html',
10 | styleUrls: ['./theme-switcher.component.scss'],
11 | })
12 | export class ThemeSwitcherComponent {
13 | @ViewChild(NbPopoverDirective) popover: NbPopoverDirective;
14 |
15 | @Input() showTitle: boolean = true;
16 |
17 | switcherListComponent = ThemeSwitcherListComponent;
18 | theme: NbJSThemeOptions;
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/@theme/components/tiny-mce/tiny-mce.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy, AfterViewInit, Output, EventEmitter, ElementRef } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ngx-tiny-mce',
5 | template: '',
6 | })
7 | export class TinyMCEComponent implements OnDestroy, AfterViewInit {
8 |
9 | @Output() editorKeyup = new EventEmitter
2 |
43 |
--------------------------------------------------------------------------------
/src/app/pages/charts/d3/d3.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../@theme/styles/themes';
2 |
3 | @include nb-install-component() {
4 | ngx-d3-bar,
5 | ngx-d3-pie,
6 | ngx-d3-advanced-pie,
7 | ngx-d3-area-stack,
8 | ngx-d3-line,
9 | ngx-d3-polar {
10 | display: block;
11 | width: 100%;
12 | height: nb-theme(card-height-medium);
13 |
14 | /deep/ {
15 | .pie-label {
16 | fill: nb-theme(color-fg-heading);
17 | }
18 |
19 | .grid-line-path {
20 | stroke: nb-theme(separator);
21 | }
22 |
23 | text {
24 | fill: nb-theme(color-fg-heading);
25 | }
26 |
27 | .chart-legend {
28 | .legend-labels {
29 | background: nb-theme(color-bg);
30 | }
31 | .legend-label {
32 | color: nb-theme(color-fg-heading);
33 | .active .legend-label-text {
34 | color: nb-theme(color-fg-heading);
35 | }
36 | }
37 | }
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/pages/charts/d3/d3.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ngx-d3',
5 | styleUrls: ['./d3.component.scss'],
6 | templateUrl: './d3.component.html',
7 | })
8 | export class D3Component {}
9 |
--------------------------------------------------------------------------------
/src/app/pages/charts/echarts/echarts.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../@theme/styles/themes';
2 |
3 | @include nb-install-component() {
4 | ngx-echarts-pie,
5 | ngx-echarts-bar,
6 | ngx-echarts-line,
7 | ngx-echarts-multiple-xaxis,
8 | ngx-echarts-area-stack,
9 | ngx-echarts-bar-animation,
10 | ngx-echarts-radar {
11 | display: block;
12 | height: nb-theme(card-height-medium);
13 | width: 100%;
14 | }
15 |
16 | /deep/ .echart {
17 | height: 100%;
18 | width: 100%;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/pages/charts/echarts/echarts.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ngx-echarts',
5 | styleUrls: ['./echarts.component.scss'],
6 | templateUrl: './echarts.component.html',
7 | })
8 | export class EchartsComponent {}
9 |
--------------------------------------------------------------------------------
/src/app/pages/components/components-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 |
4 | import { ComponentsComponent } from './components.component';
5 | import { TreeComponent } from './tree/tree.component';
6 | import { NotificationsComponent } from './notifications/notifications.component';
7 |
8 | const routes: Routes = [{
9 | path: '',
10 | component: ComponentsComponent,
11 | children: [
12 | {
13 | path: 'tree',
14 | component: TreeComponent,
15 | }, {
16 | path: 'notifications',
17 | component: NotificationsComponent,
18 | },
19 | ],
20 | }];
21 |
22 | @NgModule({
23 | imports: [RouterModule.forChild(routes)],
24 | exports: [RouterModule],
25 | })
26 | export class ComponentsRoutingModule { }
27 |
28 | export const routedComponents = [
29 | ComponentsComponent,
30 | TreeComponent,
31 | NotificationsComponent,
32 | ];
33 |
--------------------------------------------------------------------------------
/src/app/pages/components/components.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ngx-components',
5 | template: `
6 |
3 |
4 | Pie
5 |
6 |
8 |
9 |
10 |
11 |
12 | Bar
13 |
14 |
16 |
17 |
18 |
19 |
20 | Line
21 |
22 |
24 |
25 |
26 |
27 |
28 | Advanced Pie
29 |
30 |
32 |
33 |
34 |
35 |
36 | Area Chart
37 |
38 |
40 |
41 |
42 |
2 |
11 |
--------------------------------------------------------------------------------
/src/app/pages/components/tree/tree.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../@theme/styles/themes';
2 |
3 | @include nb-install-component() {
4 |
5 | /deep/ .angular-tree-component {
6 | cursor: default;
7 |
8 | .node-wrapper {
9 | .node-content-wrapper {
10 | background: none;
11 | box-shadow: none;
12 | cursor: default;
13 | }
14 |
15 | .toggle-children-wrapper {
16 | cursor: pointer;
17 | }
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/pages/components/tree/tree.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ngx-tree',
5 | templateUrl: './tree.component.html',
6 | styleUrls: ['./tree.component.scss'],
7 | })
8 | export class TreeComponent {
9 |
10 | nodes = [{
11 | name: 'Programming languages by programming paradigm',
12 | children: [{
13 | name: 'Object-oriented programming',
14 | children: [{
15 | name: 'Java',
16 | }, {
17 | name: 'C++',
18 | }, {
19 | name: 'C#',
20 | }],
21 | }, {
22 | name: 'Prototype-based programming',
23 | children: [{
24 | name: 'JavaScript',
25 | }, {
26 | name: 'CoffeeScript',
27 | }, {
28 | name: 'Lua',
29 | }],
30 | }],
31 | }];
32 |
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/pages/dashboard/contacts/contacts.component.html:
--------------------------------------------------------------------------------
1 |
3 |
4 | Tree
5 |
6 |
8 |
9 |
10 |
5 |
8 |
11 |
14 |
2 |
9 |
10 |
3 |
5 |
6 |
7 |
8 |
11 |
19 |
20 |
12 |
14 |
15 |
16 |
18 |
21 |
44 |
--------------------------------------------------------------------------------
/src/app/pages/dashboard/dashboard.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../@theme/styles/themes';
2 | @import '~bootstrap/scss/mixins/breakpoints';
3 | @import '~@nebular/theme/styles/global/breakpoints';
4 |
5 | @include nb-install-component() {
6 | .solar-card nb-card-header {
7 | border: none;
8 | padding-bottom: 0;
9 | }
10 |
11 | @include media-breakpoint-down(sm) {
12 | ngx-traffic {
13 | display: none;
14 | }
15 | }
16 |
17 | @include media-breakpoint-down(is) {
18 | /deep/ nb-card.large-card {
19 | height: nb-theme(card-height-medium);
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../@theme/styles/themes';
2 |
3 | @include nb-install-component() {
4 |
5 | display: block;
6 | flex: 1;
7 | position: relative;
8 |
9 | .echart {
10 | position: absolute;
11 | width: 100%;
12 | height: 100%;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/pages/dashboard/electricity/electricity.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnDestroy } from '@angular/core';
2 | import { NbThemeService } from '@nebular/theme';
3 |
4 | import { ElectricityService } from '../../../@core/data/electricity.service';
5 |
6 | @Component({
7 | selector: 'ngx-electricity',
8 | styleUrls: ['./electricity.component.scss'],
9 | templateUrl: './electricity.component.html',
10 | })
11 | export class ElectricityComponent implements OnDestroy {
12 |
13 | data: Array
22 |
24 |
25 |
26 |
28 |
29 |
30 |
34 |
35 |
36 |
39 |
40 |
41 |
43 |
6 |
13 |
7 | React Native UI Kitten
8 |
9 |
10 | React Native UI Kitten is a framework that contains a set of commonly used UI components styled in a similar way. The most awesome thing: you can change themes on the fly by just passing a different set of variables. 100% native. Give our kitten a try!
11 |
12 |
9 |
13 |
14 |
10 |
12 |
15 |
18 | {{ title }}
16 | {{ on ? 'ON' : 'OFF' }}
17 |
3 |
4 |
7 |
8 |
9 |
10 |
11 |
20 |
21 |
35 |
12 |
14 | Akveo Team
13 |Design & Development
15 |
16 | We're small team of fullstack software experts. We're crazy about creation of modern and secure software. We help to make
17 | your product amazing.
18 |
19 |
2 |
21 |
--------------------------------------------------------------------------------
/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../@theme/styles/themes';
2 | @import '~bootstrap/scss/mixins/breakpoints';
3 | @import '~@nebular/theme/styles/global/breakpoints';
4 |
5 | @include nb-install-component() {
6 | .chart-header {
7 | display: flex;
8 | justify-content: space-between;
9 | margin-bottom: 2.125rem;
10 | align-items: center;
11 | }
12 |
13 | .dropdown {
14 | min-width: 8.125rem;
15 | }
16 |
17 | @include media-breakpoint-down(is) {
18 | .chart-header {
19 | flex-direction: column-reverse;
20 | }
21 |
22 | ngx-legend-chart {
23 | align-self: flex-start;
24 |
25 | /deep/ .legends {
26 | padding-left: 0;
27 | font-size: nb-theme(font-size-sm);
28 | }
29 |
30 | /deep/ .legend {
31 | margin-left: 1rem;
32 | }
33 | }
34 |
35 | .dropdown {
36 | margin-top: 1.5rem;
37 | margin-bottom: 1.5rem;
38 | align-self: flex-end;
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../@theme/styles/themes';
2 | @import '~bootstrap/scss/mixins/breakpoints';
3 | @import '~@nebular/theme/styles/global/breakpoints';
4 |
5 | @include nb-install-component() {
6 | .summary-container {
7 | display: flex;
8 | flex: 1;
9 | background-color: nb-theme(chart-panel-summary-background-color);
10 | box-shadow: nb-theme(chart-panel-summary-box-shadow);
11 | justify-content: space-between;
12 | padding: 1.5rem 4rem 1rem;
13 | margin-bottom: 1rem;
14 | border:
15 | nb-theme(chart-panel-summary-border-width)
16 | solid
17 | nb-theme(chart-panel-summary-border-color);
18 | border-left: none;
19 | border-right: none;
20 | }
21 |
22 | .value {
23 | font-size: 2rem;
24 | color: nb-theme(color-fg-heading);
25 | }
26 |
27 | @include media-breakpoint-down(sm) {
28 | .value, .title {
29 | font-weight: nb-theme(font-weight-bold);
30 | }
31 |
32 | .title {
33 | font-size: nb-theme(font-size-sm);
34 | }
35 |
36 | .value {
37 | font-size: nb-theme(font-size-xlg);
38 | }
39 | }
40 |
41 | @include media-breakpoint-down(is) {
42 | .summary-container {
43 | padding-left: nb-theme(padding);
44 | padding-right: nb-theme(padding);
45 | }
46 |
47 | .value {
48 | margin-top: 0.5rem;
49 | }
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ngx-chart-panel-summary',
5 | styleUrls: ['./chart-panel-summary.component.scss'],
6 | template: `
7 |
7 |
14 |
19 |
20 |
8 |
13 | `,
14 | })
15 | export class ChartPanelSummaryComponent {
16 | @Input() summary: {title: string; value: number}[];
17 | }
18 |
19 |
--------------------------------------------------------------------------------
/src/app/pages/e-commerce/charts-panel/charts-panel.component.html:
--------------------------------------------------------------------------------
1 |
9 |
12 | {{ item.title }}
10 | {{ item.value }}
11 |
5 |
8 |
9 |
11 |
14 |
17 |
18 |
20 |
2 |
19 |
20 |
3 |
14 |
15 |
4 |
11 |
12 |
5 |
7 |
8 |
10 |
16 |
18 |
21 |
29 |
30 |
22 |
24 |
25 |
26 |
28 |
31 |
39 |
--------------------------------------------------------------------------------
/src/app/pages/e-commerce/e-commerce.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ngx-ecommerce',
5 | templateUrl: './e-commerce.component.html',
6 | })
7 | export class ECommerceComponent {
8 | }
9 |
--------------------------------------------------------------------------------
/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.html:
--------------------------------------------------------------------------------
1 |
32 |
34 |
35 |
36 |
38 |
6 |
10 | {{ name }}
7 | Last week
8 | {{ value }}%
9 |
3 |
9 |
12 |
13 |
16 |
24 | Daily Income
17 | {{ earningLiveUpdateCardData.dailyIncome | ngxNumberWithCommas }}
18 |
21 | {{ earningLiveUpdateCardData.delta.value }}%
22 |
23 |
2 |
8 |
--------------------------------------------------------------------------------
/src/app/pages/e-commerce/legend-chart/legend-chart.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../@theme/styles/themes';
2 | @import '~bootstrap/scss/mixins/breakpoints';
3 | @import '~@nebular/theme/styles/global/breakpoints';
4 |
5 | @include nb-install-component() {
6 | .legends {
7 | display: flex;
8 | @include nb-rtl(flex-direction, row-reverse);
9 | color: nb-theme(color-fg);
10 | padding: 0 0 0 2.85rem;
11 | }
12 |
13 | .legend {
14 | display: flex;
15 | justify-content: space-between;
16 | align-items: baseline;
17 | margin-left: 4rem;
18 |
19 | &:first-child {
20 | margin-left: 0;
21 | }
22 | }
23 |
24 | .legend-item-color {
25 | min-width: 15px;
26 | min-height: 15px;
27 | border-radius: 0.2rem;
28 | }
29 |
30 | .legend-title {
31 | padding: 0 0.75rem;
32 | white-space: nowrap;
33 | }
34 |
35 | @include media-breakpoint-down(md) {
36 | .legend {
37 | margin-left: 1.5rem;
38 | }
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/pages/e-commerce/legend-chart/legend-chart.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 |
3 | import { NgxLegendItemColor } from './enum.legend-item-color';
4 |
5 | @Component({
6 | selector: 'ngx-legend-chart',
7 | styleUrls: ['./legend-chart.component.scss'],
8 | templateUrl: './legend-chart.component.html',
9 | })
10 | export class ECommerceLegendChartComponent {
11 |
12 | /**
13 | * Take an array of legend items
14 | * Available iconColor: 'green', 'purple', 'light-purple', 'blue', 'yellow'
15 | * @type {{iconColor: string; title: string}[]}
16 | */
17 | @Input()
18 | legendItems: { iconColor: NgxLegendItemColor; title: string }[] = [];
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html:
--------------------------------------------------------------------------------
1 |
3 |
5 |
7 | {{ legend.title }}
6 |
3 |
8 |
4 |
5 |
6 | Profit
7 |
11 |
26 |
12 | Jun 1 - Jun 30
13 |
18 |
14 | $
15 | 300
16 |
17 |
19 | Jul 1 - Jul 31
20 |
25 |
21 | $
22 | 860
23 |
24 |
3 |
8 |
4 |
5 |
6 | Profit
7 |
4 |
11 | {{ item.title }}
5 | {{ item.value | ngxNumberWithCommas }}
6 |
8 | {{ item.description }}
9 |
10 | -
3 |
-
4 | {{ item.date }}5 |{{ item.value }}6 |9 | {{ item.delta.value }}% 10 |11 |
13 | 14 |
15 |
4 |
10 |
15 |
16 | Visitors Analytics
4 | Consumption
5 |
8 |
13 |
9 |
11 |
2 |
22 |
--------------------------------------------------------------------------------
/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../@theme/styles/themes';
2 |
3 | @include nb-install-component() {
4 |
5 | .visitors-value {
6 | font-size: 3rem;
7 | font-weight: nb-theme(font-weight-light);
8 | color: nb-theme(color-fg-heading);
9 | line-height: 0.8;
10 | }
11 |
12 | .visitors-title {
13 | margin-top: 1rem;
14 | font-size: 1.25rem;
15 | color: nb-theme(color-fg);
16 | }
17 |
18 | .visitors-statistics {
19 | width: 100%;
20 | }
21 |
22 | .statistics-chart {
23 | margin-top: 3.5rem;
24 | margin-bottom: 1.5rem;
25 | width: 100%;
26 |
27 | .echart {
28 | display: block;
29 | height: 190px;
30 | width: 100%;
31 | }
32 | }
33 |
34 | .chart-values {
35 | display: flex;
36 | }
37 |
38 | .chart-value {
39 | color: nb-theme(color-fg-heading);
40 | font-size: 2rem;
41 | font-weight: nb-theme(font-weight-bold);
42 | margin-bottom: 1rem;
43 | flex: 1;
44 | }
45 |
46 | // legend start
47 | .visitors-statistics-legend {
48 | /deep/ .legends {
49 | padding: 0;
50 | margin-left: 0;
51 | }
52 |
53 | /deep/ .legend {
54 | flex: 1;
55 | margin-left: 0;
56 | justify-content: flex-start;
57 | }
58 | }
59 | // legend end
60 | }
61 |
--------------------------------------------------------------------------------
/src/app/pages/editors/ckeditor/ckeditor.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import './ckeditor.loader';
4 | import 'ckeditor';
5 |
6 | @Component({
7 | selector: 'ngx-ckeditor',
8 | template: `
9 |
3 |
6 | 1,100
4 | New Visitors
5 |
7 |
14 |
21 |
12 |
13 |
2 |
4 |
5 |
--------------------------------------------------------------------------------
/src/app/pages/miscellaneous/miscellaneous-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 |
4 | import { MiscellaneousComponent } from './miscellaneous.component';
5 | import { NotFoundComponent } from './not-found/not-found.component';
6 |
7 | const routes: Routes = [{
8 | path: '',
9 | component: MiscellaneousComponent,
10 | children: [{
11 | path: '404',
12 | component: NotFoundComponent,
13 | }],
14 | }];
15 |
16 | @NgModule({
17 | imports: [RouterModule.forChild(routes)],
18 | exports: [RouterModule],
19 | })
20 | export class MiscellaneousRoutingModule { }
21 |
22 | export const routedComponents = [
23 | MiscellaneousComponent,
24 | NotFoundComponent,
25 | ];
26 |
--------------------------------------------------------------------------------
/src/app/pages/miscellaneous/miscellaneous.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ngx-miscellaneous',
5 | template: `
6 |
2 |
--------------------------------------------------------------------------------
/src/app/pages/miscellaneous/not-found/not-found.component.scss:
--------------------------------------------------------------------------------
1 | .flex-centered {
2 | margin: auto;
3 | }
4 | nb-card-body {
5 | display: flex;
6 | }
7 |
8 | .title {
9 | text-align: center;
10 | }
11 |
12 | .sub-title {
13 | text-align: center;
14 | display: block;
15 | margin-bottom: 3rem;
16 | }
17 |
18 | .btn {
19 | margin-bottom: 2rem;
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/pages/miscellaneous/not-found/not-found.component.ts:
--------------------------------------------------------------------------------
1 | import { NbMenuService } from '@nebular/theme';
2 | import { Component } from '@angular/core';
3 |
4 | @Component({
5 | selector: 'ngx-not-found',
6 | styleUrls: ['./not-found.component.scss'],
7 | templateUrl: './not-found.component.html',
8 | })
9 | export class NotFoundComponent {
10 |
11 | constructor(private menuService: NbMenuService) {
12 | }
13 |
14 | goToHome() {
15 | this.menuService.navigateHome();
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/pages/pages-menu.ts:
--------------------------------------------------------------------------------
1 | import {NbMenuItem} from '@nebular/theme';
2 |
3 | export const MENU_ITEMS: NbMenuItem[] = [
4 | {
5 | title: '服务',
6 | icon: 'nb-gear',
7 | link: '/pages/server'
8 | },
9 | {
10 | title: '策略',
11 | icon: 'nb-compose',
12 | link: '/pages/policy',
13 | },
14 | ];
15 |
--------------------------------------------------------------------------------
/src/app/pages/pages.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { MENU_ITEMS } from './pages-menu';
4 |
5 | @Component({
6 | selector: 'ngx-pages',
7 | template: `
8 |
3 |
4 |
5 |
13 |
14 |
15 |
6 |
12 | 404 Page Not Found
7 | The page you were looking for doesn't exist 8 | 11 |
2 |
6 |
--------------------------------------------------------------------------------
/src/app/pages/policy/policy.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit, ViewContainerRef} from '@angular/core';
2 | import {Router} from "@angular/router";
3 | import {PolicyService} from "./policy.service";
4 |
5 | @Component({
6 | selector: 'app-policy',
7 | templateUrl: './policy.component.html',
8 | styleUrls: []
9 | })
10 | export class PolicyComponent implements OnInit {
11 | public state: any = {
12 | tabs: {
13 | demo1: 0,
14 | }
15 | };
16 | constructor(
17 | private _service: PolicyService,
18 | private _router: Router,
19 |
20 | ) {
21 | }
22 | ngOnInit() {
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/pages/policy/policy.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import {PolicyRouting} from "./policy.routing";
3 | import {PolicyListComponent} from "./policy-list/policy-list.component";
4 | import {PolicyComponent} from "./policy.component";
5 | import {NgxDatatableModule} from "@swimlane/ngx-datatable";
6 | import {SecrulesComponent} from "./secrules/secrules.component";
7 | import {AntilinkComponent} from "./antilink/antilink.component";
8 | import {LimitconnComponent} from "./limitconn/limitconn.component";
9 | import {AntidetectionComponent} from "./antidetection/antidetection.component";
10 | import {ModalContentPolicyComponent} from "./policy-list/modal-content-policy.component";
11 | import {ModalModule} from "ngx-bootstrap";
12 | import {ThemeModule} from "../../@theme/theme.module";
13 | import {RlTagInputModule} from "angular2-tag-input/dist";
14 |
15 | @NgModule({
16 | imports: [
17 | ModalModule.forRoot(),
18 | ThemeModule,
19 | PolicyRouting,
20 | NgxDatatableModule,
21 | RlTagInputModule,
22 | ],
23 | declarations: [
24 | PolicyListComponent, ModalContentPolicyComponent, PolicyComponent,
25 | SecrulesComponent, AntilinkComponent, LimitconnComponent, AntidetectionComponent],
26 | entryComponents: [ModalContentPolicyComponent]
27 | })
28 | export class PolicyModule { }
29 |
--------------------------------------------------------------------------------
/src/app/pages/policy/policy.routing.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {Routes, RouterModule} from '@angular/router';
3 | import {PolicyComponent} from "./policy.component";
4 | import {SecrulesComponent} from "./secrules/secrules.component";
5 | import {AntilinkComponent} from "./antilink/antilink.component";
6 | import {LimitconnComponent} from "./limitconn/limitconn.component";
7 | import {AntidetectionComponent} from "./antidetection/antidetection.component";
8 |
9 | const routes: Routes = [
10 | {
11 | path: '',
12 | component: PolicyComponent,
13 | },
14 | {
15 | path: 'edit/:_id',
16 | component: SecrulesComponent,
17 | data: {
18 | pageTitle: '编辑',
19 | },
20 | },
21 | {
22 | path: 'secrules/:_id',
23 | component: SecrulesComponent,
24 | data: {
25 | pageTitle: '攻击防护',
26 | },
27 | },
28 | {
29 | path: 'antilink/:_id',
30 | component: AntilinkComponent,
31 | data: {
32 | pageTitle: '防信息滥用',
33 | },
34 | },
35 | {
36 | path: 'limitconn/:_id',
37 | component: LimitconnComponent,
38 | data: {
39 | pageTitle: '防CC',
40 | },
41 | },
42 | {
43 | path: 'antidetection/:_id',
44 | component: AntidetectionComponent,
45 | data: {
46 | pageTitle: '防探测',
47 | },
48 | },
49 | ];
50 |
51 | @NgModule({
52 | imports: [RouterModule.forChild(routes)],
53 | exports: [RouterModule]
54 | })
55 | export class PolicyRouting {
56 | }
57 |
--------------------------------------------------------------------------------
/src/app/pages/policy/policy.service.ts:
--------------------------------------------------------------------------------
1 | import {Injectable} from '@angular/core';
2 | import {BasicHttpService} from "../../@theme/http/basichttp.service";
3 |
4 | @Injectable({
5 | providedIn: 'root'
6 | })
7 | @Injectable()
8 | export class PolicyService {
9 |
10 | policyUrl = '/policy';
11 |
12 | constructor(private _basicHttpService: BasicHttpService) {
13 | }
14 | // policy
15 | getPolicyAll = function () {
16 | const opt = this._basicHttpService.NewReqOpts();
17 | return this._basicHttpService.MyPolicy(this.policyUrl, opt);
18 | }
19 |
20 | getPolicy(id) {
21 | const opt = this._basicHttpService.NewReqOpts();
22 | return this._basicHttpService.MyGet(this.policyUrl + '/' + id, opt);
23 | }
24 |
25 | addPolicy(uuid, data) {
26 | const opt = this._basicHttpService.NewReqOpts();
27 | return this._basicHttpService.MyPost(this.policyUrl + '/' + uuid, data, opt, true);
28 | }
29 |
30 | setPolicy(id, data) {
31 | const opt = this._basicHttpService.NewReqOpts();
32 | return this._basicHttpService.MyPut(this.policyUrl + '/' + id, data, opt, true);
33 | }
34 |
35 | deletePolicy(id) {
36 | const opt = this._basicHttpService.NewReqOpts();
37 | return this._basicHttpService.MyDelete(this.policyUrl + '/' + id, opt, true);
38 | }
39 |
40 | }
41 |
--------------------------------------------------------------------------------
/src/app/pages/policy/secrules/secrules.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/titansec/OpenWAF-UI/295fdd5aadf694d95fa264d99f923ee6451dfbaa/src/app/pages/policy/secrules/secrules.component.css
--------------------------------------------------------------------------------
/src/app/pages/server/server-routing.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {Routes, RouterModule} from '@angular/router';
3 | import {ServerComponent} from "./server.component";
4 | import {ServerListComponent} from "./server-list/server-list.component";
5 |
6 |
7 | const routes: Routes = [{
8 | path: '',
9 | component: ServerComponent,
10 | }];
11 |
12 | @NgModule({
13 | imports: [RouterModule.forChild(routes)],
14 | exports: [RouterModule],
15 | })
16 | export class ServerRoutingModule {
17 | }
18 |
19 | export const routedComponents = [
20 | ServerComponent,
21 | ServerListComponent,
22 | ];
23 |
--------------------------------------------------------------------------------
/src/app/pages/server/server.component.html:
--------------------------------------------------------------------------------
1 |
3 |
5 |
2 |
6 |
--------------------------------------------------------------------------------
/src/app/pages/server/server.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ngx-server',
5 | templateUrl: './server.component.html',
6 | // template: `
3 |
5 |
4 | Action Groups
5 |
6 |
2 |
26 |
--------------------------------------------------------------------------------
/src/app/pages/ui-features/buttons/buttons.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ngx-buttons',
5 | styleUrls: ['./buttons.component.scss'],
6 | templateUrl: './buttons.component.html',
7 | })
8 | export class ButtonsComponent {
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../@theme/styles/themes';
2 |
3 | @include nb-install-component() {
4 | text-align: center;
5 |
6 | .dropdown, .dropup, .btn-group {
7 | margin-bottom: 1rem;
8 | }
9 |
10 | nb-card-body {
11 | overflow: visible;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/app/pages/ui-features/buttons/dropdown-buttons/dropdown-button.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ngx-dropdown-buttons',
5 | styleUrls: ['./dropdown-button.component.scss'],
6 | templateUrl: './dropdown-button.component.html',
7 | })
8 |
9 | export class DropdownButtonsComponent {
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.scss:
--------------------------------------------------------------------------------
1 | nb-card-body {
2 | div:not(:last-child) {
3 | margin-bottom: 1rem;
4 | }
5 | }
6 |
7 | .btn-with-icon-example {
8 | width: 100%;
9 |
10 | .btn {
11 | width: 100%;
12 | }
13 | }
14 |
15 | .btn-group:not(:last-child) {
16 | margin-bottom: 1rem;
17 | }
18 |
19 | .icon-button-examples {
20 | display: flex;
21 | justify-content: space-between;
22 |
23 | button {
24 | min-width: 4rem;
25 | }
26 | }
27 |
28 | .icon-button-examples:not(:last-child) {
29 | margin-bottom: 1rem;
30 | }
31 |
--------------------------------------------------------------------------------
/src/app/pages/ui-features/buttons/icon-buttons/icon-buttons.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ngx-icon-buttons',
5 | styleUrls: ['./icon-buttons.component.scss'],
6 | templateUrl: './icon-buttons.component.html',
7 | })
8 | export class IconButtonsComponent {
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/pages/ui-features/buttons/labeled-actions-group/labeled-actions-group.component.html:
--------------------------------------------------------------------------------
1 |
3 |
5 |
6 |
20 |
11 |
19 |
12 |
15 |
16 |
18 |
21 |
25 |
5 |
16 |
17 |
6 | Rectangle Button
7 |
8 |
9 | Border radius:
10 | 4px
11 |
12 |
13 |
14 |
15 |
18 |
29 |
30 |
19 | Semi-round Button
20 |
21 |
22 | Border radius:
23 | 12px
24 |
25 |
26 |
27 |
28 |
31 |
42 |
32 | Rounded Button
33 |
34 |
35 | Border radius:
36 | round
37 |
38 |
39 |
40 |
41 |
8 | {{ modalHeader }}
9 |
12 |
13 |
14 | {{ modalContent }}
15 |
16 |
19 | `,
20 | })
21 | export class ModalComponent {
22 |
23 | modalHeader: string;
24 | modalContent = `Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
25 | nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
26 | nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.`;
27 |
28 | constructor(private activeModal: NgbActiveModal) { }
29 |
30 | closeModal() {
31 | this.activeModal.close();
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/pages/ui-features/modals/modals.component.html:
--------------------------------------------------------------------------------
1 |
2 |
13 |
--------------------------------------------------------------------------------
/src/app/pages/ui-features/modals/modals.component.scss:
--------------------------------------------------------------------------------
1 | @import '~@nebular/theme/styles/core/mixins';
2 |
3 | :host {
4 | button {
5 | @include nb-ltr(margin, 0 0.75rem 2rem 0);
6 | @include nb-rtl(margin, 0 0 2rem 0.75rem);
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/app/pages/ui-features/modals/modals.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
3 |
4 | import { ModalComponent } from './modal/modal.component';
5 |
6 | @Component({
7 | selector: 'ngx-modals',
8 | styleUrls: ['./modals.component.scss'],
9 | templateUrl: './modals.component.html',
10 | })
11 | export class ModalsComponent {
12 |
13 | constructor(private modalService: NgbModal) { }
14 |
15 | showLargeModal() {
16 | const activeModal = this.modalService.open(ModalComponent, { size: 'lg', container: 'nb-layout' });
17 |
18 | activeModal.componentInstance.modalHeader = 'Large Modal';
19 | }
20 | showSmallModal() {
21 | const activeModal = this.modalService.open(ModalComponent, { size: 'sm', container: 'nb-layout' });
22 |
23 | activeModal.componentInstance.modalHeader = 'Small Modal';
24 | }
25 |
26 | showStaticModal() {
27 | const activeModal = this.modalService.open(ModalComponent, {
28 | size: 'sm',
29 | backdrop: 'static',
30 | container: 'nb-layout',
31 | });
32 |
33 | activeModal.componentInstance.modalHeader = 'Static modal';
34 | activeModal.componentInstance.modalContent = `This is static modal, backdrop click
35 | will not close it. Click × or confirmation button to close modal.`;
36 | }
37 |
38 | }
39 |
--------------------------------------------------------------------------------
/src/app/pages/ui-features/popovers/popovers.component.scss:
--------------------------------------------------------------------------------
1 | @import '~@nebular/theme/styles/core/mixins';
2 |
3 | /deep/ nb-card.popover-card {
4 | margin-bottom: 0;
5 | width: 300px;
6 | box-shadow: none;
7 | }
8 |
9 | :host {
10 | button.with-margins {
11 | @include nb-ltr(margin, 0 0.75rem 2rem 0);
12 | @include nb-rtl(margin, 0 0 2rem 0.75rem);
13 | }
14 |
15 | /deep/ .btn-outline-secondary {
16 | @include nb-ltr(margin, 0 0.5rem 0.5rem 0);
17 | @include nb-rtl(margin, 0 0 0.5rem 0.5rem);
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/pages/ui-features/popovers/popovers.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 | import {
3 | NgxPopoverCardComponent, NgxPopoverFormComponent,
4 | NgxPopoverTabsComponent,
5 | } from './popover-examples.component';
6 |
7 | @Component({
8 | selector: 'ngx-popovers',
9 | styleUrls: ['./popovers.component.scss'],
10 | templateUrl: './popovers.component.html',
11 | })
12 | export class PopoversComponent {
13 | tabsComponent = NgxPopoverTabsComponent;
14 | cardComponent = NgxPopoverCardComponent;
15 | formComponent = NgxPopoverFormComponent;
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/pages/ui-features/search-fields/search-fields.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ngx-search-fields',
5 | templateUrl: 'search-fields.component.html',
6 | })
7 | export class SearchComponent {
8 | }
9 |
--------------------------------------------------------------------------------
/src/app/pages/ui-features/tabs/tabs.component.scss:
--------------------------------------------------------------------------------
1 | @import '../../../@theme/styles/themes';
2 | @import '~bootstrap/scss/mixins/breakpoints';
3 | @import '~@nebular/theme/styles/global/breakpoints';
4 |
5 | @include nb-install-component() {
6 | nb-tabset {
7 | height: 100%;
8 | display: flex;
9 | flex-direction: column;
10 | }
11 |
12 | nb-tab {
13 | padding: nb-theme(padding);
14 | }
15 |
16 | /deep/ ngx-tab1, /deep/ ngx-tab2 {
17 | display: block;
18 | padding: nb-theme(padding);
19 | }
20 |
21 | @include media-breakpoint-down(xs) {
22 | nb-tabset /deep/ul {
23 | font-size: 1rem;
24 | padding: 0 0.25rem;
25 | }
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/app/pages/ui-features/tabs/tabs.component.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'ngx-tab1',
5 | template: `
6 |
3 |
4 | Modals
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Early home automation began with labor-saving machines. Self-contained electric or gas powered 7 | home appliances 8 | became viable in the 1900s with the introduction of 9 | electric power distribution 10 | and led to the introduction of washing machines (1904), water heaters (1889), refrigerators, sewing machines, 11 | dishwashers, and clothes dryers. 12 |
13 | `, 14 | }) 15 | export class Tab1Component { } 16 | 17 | @Component({ 18 | selector: 'ngx-tab2', 19 | template: ` 20 |Tab 2 works!
21 | `, 22 | }) 23 | export class Tab2Component { } 24 | 25 | @Component({ 26 | selector: 'ngx-tabs', 27 | styleUrls: ['./tabs.component.scss'], 28 | templateUrl: './tabs.component.html', 29 | }) 30 | export class TabsComponent { 31 | 32 | tabs: any[] = [ 33 | { 34 | title: 'Route tab #1', 35 | route: '/pages/ui-features/tabs/tab1', 36 | }, 37 | { 38 | title: 'Route tab #2', 39 | route: '/pages/ui-features/tabs/tab2', 40 | }, 41 | ]; 42 | 43 | } 44 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/typography/typography.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnDestroy } from '@angular/core'; 2 | import { NbThemeService, NbMediaBreakpoint, NbMediaBreakpointsService } from '@nebular/theme'; 3 | 4 | @Component({ 5 | selector: 'ngx-typography', 6 | styleUrls: ['./typography.component.scss'], 7 | templateUrl: './typography.component.html', 8 | }) 9 | export class TypographyComponent implements OnDestroy { 10 | breakpoint: NbMediaBreakpoint; 11 | breakpoints: any; 12 | themeSubscription: any; 13 | 14 | constructor(private themeService: NbThemeService, 15 | private breakpointService: NbMediaBreakpointsService) { 16 | 17 | this.breakpoints = this.breakpointService.getBreakpointsMap(); 18 | this.themeSubscription = this.themeService.onMediaQueryChange() 19 | .subscribe(([oldValue, newValue]) => { 20 | this.breakpoint = newValue; 21 | }); 22 | } 23 | 24 | ngOnDestroy() { 25 | this.themeSubscription.unsubscribe(); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/app/pages/ui-features/ui-features.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ngx-ui-features', 5 | template: ` 6 |